/* FlapCast shared tokens + board styles */
:root{
  --ink:#0a0c10; --panel:#14171d; --panel2:#1a1e25; --line:#262b34;
  --text:#e9e6dc; --dim:#8b93a1; --dim2:#5c6472;
  --amber:#ffb01f; --amber-dn:#c98a12; --onair:#ff3b30; --ok:#3fd68f;
  --flap-a:#22262d; --flap-b:#171a1f; --glyph:#f2efe4;
  --bezel-edge:#2a2e36;
  --mono:"Cascadia Mono","Consolas",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --flapfont:"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --emoji:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";
  --c-red:#e23a2e; --c-orange:#f57e20; --c-yellow:#f5c518; --c-green:#2ea84f;
  --c-blue:#1f6fd6; --c-violet:#7d4bd0; --c-white:#efece2; --c-black:#0d0f12;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{background:var(--ink); color:var(--text); font-family:var(--sans)}
button{font-family:var(--mono); cursor:pointer}
input,select,textarea{font-family:var(--mono)}
::selection{background:var(--amber); color:#000}

/* ============ the board ============ */
.boardShell{position:relative; --tw:46px; --th:66px; --tg:6px}
.bezel{
  background:linear-gradient(#101216,#07080a); border-radius:14px;
  border:1px solid var(--bezel-edge);
  box-shadow:0 24px 60px -18px #000, inset 0 1px 0 #ffffff12, inset 0 -2px 8px #000;
  padding:26px; display:inline-block;
}
.grid6x22{display:grid; grid-template-columns:repeat(22,var(--tw)); grid-auto-rows:var(--th); gap:var(--tg)}

.tile{
  position:relative; width:var(--tw); height:var(--th); border-radius:3px;
  background:linear-gradient(var(--flap-a) 0%, var(--flap-mid-a,#1b1f25) 49%, var(--flap-mid-b,#14171c) 51%, var(--flap-b) 100%);
  box-shadow:0 1px 2px #000c, inset 0 1px 0 #ffffff10;
  perspective:340px;
}
.tile::before{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px;
  background:#000e; z-index:6; border-radius:1px;
}
.tile::after{
  content:""; position:absolute; top:calc(50% - 3px); left:-1px; right:-1px; height:6px; z-index:6;
  background:linear-gradient(90deg,#000 0 3px, transparent 3px calc(100% - 3px), #000 calc(100% - 3px));
  opacity:.8;
}
.half{position:absolute; left:0; right:0; height:50%; overflow:hidden}
.half.top{top:0; border-radius:3px 3px 0 0}
.half.bot{bottom:0; border-radius:0 0 3px 3px}
.gwrap{position:absolute; left:0; width:100%; height:200%; display:flex; align-items:center; justify-content:center}
.half.top .gwrap{top:0}
.half.bot .gwrap{bottom:0}
.g{font:var(--flap-weight,800) 42px/1 var(--flapfont); color:var(--glyph); letter-spacing:var(--flap-tracking,-.02em); transform:translateY(1px)}
.g.icon{font-size:34px; font-weight:400; font-family:var(--emoji),var(--flapfont)}
.g.svgic{display:flex; align-items:center; justify-content:center; width:100%; height:100%}
.g.svgic svg{width:78%; height:78%}
.g.svgic img{width:82%; height:82%; object-fit:contain}
.gwrap.imgcell{background-repeat:no-repeat; border-radius:2px; filter:saturate(1.05)}
.gwrap.chip{border-radius:2px}
.gwrap.chip .g{visibility:hidden}
.gwrap.chip.c63{background:var(--c-red)} .gwrap.chip.c64{background:var(--c-orange)}
.gwrap.chip.c65{background:var(--c-yellow)} .gwrap.chip.c66{background:var(--c-green)}
.gwrap.chip.c67{background:var(--c-blue)} .gwrap.chip.c68{background:var(--c-violet)}
.gwrap.chip.c69{background:var(--c-white)} .gwrap.chip.c70{background:var(--c-black)}
.halfsheen{position:absolute; inset:0; pointer-events:none; z-index:3}
.half.top .halfsheen{background:linear-gradient(#ffffff14, #ffffff05 40%, transparent)}
.half.bot .halfsheen{background:linear-gradient(transparent, #00000042)}

.flap{
  position:absolute; left:0; right:0; top:0; height:50%; z-index:5;
  transform-origin:center bottom; transform-style:preserve-3d;
  will-change:transform; display:none;
}
.tile.flipping .flap{display:block}
.face{position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:3px 3px 0 0;
  background:linear-gradient(var(--flap-a), #191d23)}
.face.back{transform:rotateX(180deg); border-radius:0 0 3px 3px;
  background:linear-gradient(#14171c, var(--flap-b))}
.face .gwrap{height:200%}
.face.front .gwrap{top:0}
.face.back .gwrap{bottom:0}
.shade{position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:4}

/* ============ themes ============
   Default (no class) = FLAPCAST ORIGINAL.
   .theme-satin = SATIN INDUSTRIAL: soft semi-matte molded plastic — smooth
   dense color, restrained specular highlights along edges only; deep
   saturated accents on charcoal. Never wet, lacquered, or candy-coated. */
.theme-satin{
  --flap-a:#212428; --flap-b:#17191B; --glyph:#EDEAE2;
  --bezel-edge:#26292C;
  /* accents anchored to industrial standards: red≈RAL 3028, orange≈RAL 2008,
     teal≈RAL 5018/Makita PMS 321, white≈RAL 9001-9010 molded-ABS cream */
  --c-red:#CD2622; --c-orange:#F26A21; --c-yellow:#F5A623; --c-green:#00B95A;
  --c-blue:#087EBE; --c-violet:#713A8A; --c-white:#EDE6D9; --c-black:#17191B;
}
.theme-satin .bezel{
  background:linear-gradient(#1A1C1F,#141618);
  border:1px solid var(--bezel-edge);
  box-shadow:0 20px 50px -20px #000, inset 0 1px 0 #ffffff0a;
}
.theme-satin .tile{
  background:linear-gradient(var(--flap-a) 0%, #1C1F22 49%, #16181A 51%, var(--flap-b) 100%);
  box-shadow:0 1px 2px #000a, inset 0 1px 0 #ffffff0e, inset 0 -1px 0 #00000055;
}
.theme-satin .half.top .halfsheen{background:linear-gradient(#ffffff0d, transparent 35%)}
.theme-satin .half.bot .halfsheen{background:linear-gradient(transparent, #00000030)}
.theme-satin .face{background:linear-gradient(var(--flap-a), #1B1E21)}
.theme-satin .face.back{background:linear-gradient(#16181A, var(--flap-b))}
.theme-satin .gwrap.chip{
  /* satin plastic chip: dense color, one restrained edge highlight */
  box-shadow:inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #00000033;
}

/* brand chips (custom hex colors mixed into the wheel) share the chip finish */
.gwrap.chip.brand{border-radius:2px}

/* .theme-neon = NEON NIGHTS: emissive tube-glass glyphs on near-black
   housings — a lit sign at midnight. Glow layers stay shallow (two shadows
   max) so low-power TV browsers keep their frame rate. */
.theme-neon{
  --flap-a:#101018; --flap-b:#0A0A10; --glyph:#F4FDFF;
  --bezel-edge:#232A4A;
  --c-red:#FF2E4D; --c-orange:#FF7A1A; --c-yellow:#FFE81A; --c-green:#2BFF88;
  --c-blue:#21A8FF; --c-violet:#C438FF; --c-white:#F4FDFF; --c-black:#0A0A10;
}
.theme-neon .bezel{
  background:linear-gradient(#0C0D14,#07070C);
  border:1px solid var(--bezel-edge);
  box-shadow:0 0 24px #2242ff2b, 0 0 70px #ff2ea81f, inset 0 0 44px #000;
}
.theme-neon .tile{
  background:linear-gradient(var(--flap-a) 0%, #0E0F16 49%, #090A0F 51%, var(--flap-b) 100%);
  box-shadow:0 1px 2px #000, inset 0 0 0 1px #ffffff08;
}
.theme-neon .face{background:linear-gradient(var(--flap-a), #0D0E15)}
.theme-neon .face.back{background:linear-gradient(#090A0F, var(--flap-b))}
.theme-neon .g{
  text-shadow:0 0 5px #23E5FF, 0 0 16px rgba(35,229,255,.45);
}
.theme-neon .g.icon{text-shadow:0 0 8px rgba(255,255,255,.35)}
.theme-neon .halfsheen{opacity:.3}
.theme-neon .gwrap.chip.c63{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-red)}
.theme-neon .gwrap.chip.c64{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-orange)}
.theme-neon .gwrap.chip.c65{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-yellow)}
.theme-neon .gwrap.chip.c66{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-green)}
.theme-neon .gwrap.chip.c67{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-blue)}
.theme-neon .gwrap.chip.c68{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-violet)}
.theme-neon .gwrap.chip.c69{box-shadow:inset 0 0 5px #ffffff59, 0 0 12px var(--c-white)}
.theme-neon .gwrap.chip.brand{filter:brightness(1.08) drop-shadow(0 0 7px rgba(255,255,255,.3))}

/* toast */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); opacity:0;
  background:#1d222a; border:1px solid var(--amber); color:var(--text); padding:10px 18px;
  border-radius:8px; font:600 11.5px var(--mono); letter-spacing:.06em; z-index:100;
  transition:all .25s; pointer-events:none; box-shadow:0 12px 30px #000c;
}
#toast.show{opacity:1; transform:translate(-50%,0)}

/* ---- sponsor map (TV side panel + control-panel preview) ---- */
.mapcanvas{position:relative; overflow:hidden; background:#0d1014}
.mapcanvas img{position:absolute; width:256px; height:256px; max-width:none;
  filter:brightness(.92) saturate(.85)}
.theme-neon .mapcanvas img{filter:brightness(.85) saturate(1.05) contrast(1.06)}

/* .theme-itmedic-style = ITMEDIC STYLE: emergency-services command center.
   Spec: docs/design/itmedic-style-spec.md. Near-black hardware (#0B0B0B),
   warm off-white Roboto Mono at weight 500, operational colors by MEANING —
   red critical, orange attention, blue informational, green CODE GREEN.
   YELLOW/VIOLET are not in the spec's palette; restrained industrial
   interpretations keep existing board content from rendering blank. */
.theme-itmedic-style{
  --ink:#0B0B0B; --panel:#151515; --panel2:#1A1A1A; --line:#2A2A2A;
  --bezel-edge:#2A2A2A;
  --flap-a:#232323; --flap-mid-a:#1A1A1A; --flap-mid-b:#161616; --flap-b:#1E1E1E;
  --glyph:#F2EDE1; --text:#F2EDE1; --dim:#8B8B85;
  --flapfont:"Roboto Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --mono:"Roboto Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --flap-weight:500; --flap-tracking:0.02em;
  --c-red:#D64545; --c-orange:#F96A00; --c-blue:#0096F9; --c-green:#A4C400;
  --c-yellow:#D9A62E; --c-violet:#7A6FA0; --c-white:#F2EDE1; --c-black:#0D0D0D;
  --amber:#F96A00; --amber-dn:#C25400; --ok:#A4C400;
}
.mappin{position:absolute; transform:translate(-50%,-100%); z-index:3;
  display:flex; flex-direction:column; align-items:center; pointer-events:none}
.mappin .head{position:relative; width:22px; height:22px; border-radius:50%;
  background:#e03131; border:3px solid #fff; box-shadow:0 2px 8px #000c}
.mappin .head::after{content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid rgba(224,49,49,.55); animation:mapPulse 2.2s ease-out infinite}
.mappin .tail{width:0; height:0; margin-top:-2px;
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:10px solid #fff}
.mapcenterdot{position:absolute; transform:translate(-50%,-50%); width:14px; height:14px;
  border-radius:50%; border:3px solid #23a7ff; background:rgba(35,167,255,.25);
  z-index:2; pointer-events:none}
@keyframes mapPulse{from{transform:scale(.55); opacity:1} to{transform:scale(1.9); opacity:0}}

/* ---- viewer-origin world map ---- */
.wmap-wrap{width:100%; margin:10px 0 6px; border-radius:12px; overflow:hidden;
  border:1px solid #1e2836; background:#0a1018}
.wmap{display:block; width:100%; height:auto}
.wmap-ocean{fill:#0b1420}
.wmap-grat line{stroke:#162334; stroke-width:.25}
.wmap-land{fill:#1f3141; stroke:#2c4256; stroke-width:.2}
.wmap-town{fill:#23e5ff; opacity:.9}
.wmap-pin circle{fill:#ffc23d}
.wmap-pin .wmap-ring{fill:#ffc23d; opacity:.22}