/* Palantir-ish: flat surfaces, hairline borders, dense mono labels, no gradients. */
:root{
  --bg: #0b0f15;
  --surface: #111720;
  --surface-2: #18202c;
  --line: #1f2835;
  --line-2: #2a3545;
  --ink: #dfe6ef;
  --dim: #8fa0b4;
  --accent: #8fb8e0;
  --amber: #e0a23c;
  --nor: #4aa3ff;
  --sop: #e04a4a;
  --ok: #3ecf8e;
  --mono: "IBM Plex Sans KR", sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 13px/1.5 "IBM Plex Sans KR",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;}
.hidden{display:none!important}

button{font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  border-radius:2px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);padding:8px 12px}
button:hover:not(:disabled){background:#1d2634;border-color:#3d4b5e}
button:active:not(:disabled){background:#131a24}
button:disabled{opacity:.35;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#04121f}
button.primary:hover{background:#3f9bf7;border-color:#3f9bf7}
button.ghost{padding:6px 9px}
button.sq{width:26px;height:26px;padding:0;font-size:13px}
input{font:12px/1 var(--mono);width:100%;padding:9px 10px;border-radius:2px;
  border:1px solid var(--line-2);background:#0a0d13;color:var(--ink)}
input::placeholder{color:#4d5a6b}
input:focus{outline:none;border-color:var(--accent)}

/* ---- main menu ---- */
#menu{position:relative;min-height:100vh;display:flex;flex-direction:column;
  padding:4vh 6vw;overflow:hidden;background:#0c0f13}
#menu-bg{position:absolute;inset:0}
.bg-layer{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .45s ease;
  filter:brightness(.6)}
.bg-layer[data-src$="menubg3.webp"],.bg-layer[data-src$="menubg4.webp"]{filter:brightness(.9)}
.bg-layer.on{opacity:1}
#menu-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(12,15,19,.75),rgba(12,15,19,0) 55%)}
/* inset past the edges so the scene blur doesn't pull in dark borders */
#menu-scene{position:absolute;inset:-40px;pointer-events:none;transition:filter .25s ease}
#menu-scene.blur{filter:blur(18px)}
#menu-hero{position:absolute;inset:40px;overflow:hidden}
#menu-hero[data-opt="create"]{bottom:-73px;right:-22px}
#menu-hero[data-opt="join"]{bottom:-29px;right:12px}
#menu-hero[data-opt="join"] img.in,#menu-hero[data-opt="tutorial"] img.in{
  filter: saturate(0.9) !important;
}
#menu-hero[data-opt="tutorial"] img{
  --s: 0.8 !important;
}
#menu-hero[data-opt="tutorial"] img.in{
  --s: 0.8 !important;
}
#menu-hero[data-opt="create"] img:not(.fg),#menu-hero[data-opt="join"] img:not(.fg),
#menu-hero[data-opt="tutorial"] img:not(.fg){display:none}
#menu-hero[data-opt="tutorial"] {bottom: 26px;right: 22px;}
#menu-hero img{position:absolute;bottom:0;right:5vw;height:88vh;max-width:none;transform-origin:bottom right;
  --x:0vw;--s:1;--o:1;opacity:0;transform:translateX(calc(var(--x) + 3vw)) scale(var(--s));
  transition:opacity .2s ease,transform .2s ease}
#menu-hero img.in{opacity:var(--o);transform:translateX(var(--x)) scale(var(--s));
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);filter: saturate(.6)}
#menu-hero .g1{--x:-17vw;--s:.86;--o:.8;filter:blur(6px) saturate(.5) !important}
#menu-hero .g2{--x:-33vw;--s:.74;--o:.65;filter:blur(22px) saturate(.4) !important}
#menu-hero .g3{--x:-48vw;--s:.62;--o:.5;filter:blur(31px) saturate(.3) !important}
#menu-hero .g2.in{transition-delay:110ms}
#menu-hero .g1.in{transition-delay:220ms}
#menu-hero .fg.in{transition-delay:330ms}
#menu-hero.domino-out img{transition:opacity .3s ease,transform .3s ease}
#menu-hero.domino-out .g1{transition-delay:90ms}
#menu-hero.domino-out .g2{transition-delay:180ms}
#menu-hero.domino-out .g3{transition-delay:270ms}
#menu-top,.menu-page,#menu-error{position:relative;z-index:1}
#menu-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:5vh}
#menu-top .wordmark img{max-width:310px}
#menu-top .tag{margin:8px 0 0}
.callsign-tag{font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  padding:9px 12px;background:rgba(42,51,64,.82);border:1px solid rgba(255,255,255,.06)}
.callsign-tag b{margin-left:8px;color:#fff;font-weight:600;letter-spacing:.08em}
.menu-page{flex:1;display:flex;animation:page-in .25s ease}
.menu-page[hidden]{display:none}
@keyframes page-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
#menu-list{width:300px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#menu-desc{margin:14px 0 0;max-width:280px;color:#d6dde5}
/* dark slate with a fine dot mesh, pale centered caps */
.menu-opt,.menu-back,.menu-sub .sub-action{font:400 18px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  padding:14px 40px;min-width:250px;text-align:center;color:#a3b3c8;border-radius:0;
  background:radial-gradient(rgba(255,255,255,.07) .8px,transparent 1.1px) 0 0/3px 3px,rgba(22,28,40,.86);
  border:1px solid rgba(160,180,210,.14);box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background-color .15s,color .15s,border-color .15s}
.menu-opt:hover:not(:disabled),.menu-opt:focus-visible,.menu-back:hover:not(:disabled),
.menu-sub .sub-action:hover:not(:disabled){
  background:radial-gradient(rgba(255,255,255,.1) .8px,transparent 1.1px) 0 0/3px 3px,rgba(52,68,92,.92);
  border-color:rgba(160,190,230,.4);color:#e8eef6;outline:none}
.menu-back{font-size:12px;min-width:0;padding:9px 18px;margin-bottom:26px}
.sub-title{margin:0 0 8px;font:600 40px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:#7fa9cf}
.menu-sub{flex-direction:column;align-items:flex-start;max-width:900px}
.sub-desc{margin:0 0 24px;color:#d6dde5}
/* full-screen world map, drawn (wrapped and dimmed) on a canvas by drawWorld() */
#menu-world{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
#menu-world canvas{position:absolute;inset:0;width:100%;height:100%}
#menu-world.on{opacity:1}
.world-marker{position:absolute;transform:translate(-50%,-7px);display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:0;background:none;border:none;border-radius:0;color:#e8eef6;pointer-events:auto;
  transition:visibility 0s}
#menu-world:not(.on) .world-marker{visibility:hidden;transition-delay:.45s}
.world-marker:hover:not(:disabled),.world-marker:active:not(:disabled){background:none}
.wm-dot{position:relative;width:14px;height:14px;border:2px solid #e8eef6;background:rgba(20,26,34,.7);
  transform:rotate(45deg);transition:background .15s,border-color .15s}
.wm-label{padding:3px 7px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;background:rgba(12,15,19,.78);border:1px solid rgba(255,255,255,.08)}
.world-marker:hover .wm-dot,.world-marker:focus-visible .wm-dot{background:#8fb8e0}
.world-marker:focus-visible{outline:none}
.world-marker.selected .wm-dot{background:#e0a23c;border-color:#f6d9a0}
.world-marker.selected .wm-dot::after{content:"";position:absolute;inset:-2px;border:2px solid #e0a23c;
  animation:wm-pulse 1.6s ease-out infinite}
.world-marker.selected .wm-label{color:#f6d9a0;border-color:rgba(224,162,60,.5)}
@keyframes wm-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
/* theatre picker: the frame is a window onto the zoomed world map */
/* let clicks through the page's empty space to the map markers underneath */
.theatre-page{max-width:none;align-items:stretch;animation-name:page-fade;pointer-events:none}
.tp-head,.tp-bottom,.tf-card{pointer-events:auto}
@keyframes page-fade{from{opacity:0}to{opacity:1}}
.tp-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.tp-head .menu-back{margin:0}
.tp-head .sub-title{margin:0;padding-bottom:6px;font-weight:300;border-bottom:1px solid rgba(200,215,230,.35)}
/* invisible box: only marks where the zoomed theatre lands */
.theatre-frame{position:relative;height:min(54vh,560px,calc(100vh - 360px));aspect-ratio:16/9;max-width:100%;
  margin:0 auto 20px}
#menu.locked{height:100vh}
/* map page: black top/bottom bands + vignette over the world map, under the UI */
#menu::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:
    linear-gradient(to bottom,#000 0,rgba(0,0,0,.88) 8vh,rgba(0,0,0,0) 22vh,rgba(0,0,0,0) 70vh,rgba(0,0,0,.88) 86vh,#000 100%),
    radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(0,0,0,.75) 100%)}
#menu.locked::after{opacity:1}
#menu img{-webkit-user-drag:none;user-select:none}
/* outline of the playable game map: frame height, map's own aspect, centred on the zoom target */
.tf-box{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  border:1px solid rgba(246,217,160,.85);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.35);
  transition:opacity .3s ease}
.tf-box::before,.tf-box::after{content:"";position:absolute;width:18px;height:18px;border:3px solid #e0a23c}
.tf-box::before{top:-3px;left:-3px;border-right:none;border-bottom:none}
.tf-box::after{bottom:-3px;right:-3px;border-left:none;border-top:none}
.theatre-frame.moving .tf-box,.calibrating .tf-box{opacity:0}
/* sits just outside the map outline's right edge */
.tf-card{position:absolute;left:calc(100% + 28px);top:50%;transform:translateY(-50%);min-width:320px;
  padding:12px 16px 14px;background:rgba(24,20,16,.8);border:1px solid rgba(255,255,255,.08);
  border-top:4px solid rgba(200,200,196,.55);pointer-events:auto;transition:opacity .3s ease}
.theatre-frame.moving .tf-card{opacity:0}
.tf-region{display:inline-block;padding:2px 6px;background:rgba(120,140,160,.35);font-size:12px;color:#dfe7ef}
.tf-card h3{margin:6px 0 4px;font:300 44px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:#f2f4f6}
.tf-coords{display:block;margin-bottom:10px;font-size:11px;color:#8d96a0}
.tf-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;font-size:12px;color:#f0d9a8;
  background:rgba(214,160,60,.25);border:1px solid rgba(214,160,60,.5)}
.tf-tag::before{content:"";width:12px;height:12px;border-radius:50%;background:#e0a23c;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.tp-bottom{display:flex;align-items:center;gap:12px}
.theatre-strip{flex:1;display:flex;gap:12px;overflow-x:auto;padding:4px 2px}
.theatre-strip .map-opt{position:relative;flex:none;width:200px;aspect-ratio:16/9;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);border-radius:0;background:#0a0e14;text-transform:none}
.theatre-strip .map-opt img{display:block;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .2s}
.theatre-strip .map-opt span{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;text-align:left;
  font:400 15px/1.2 var(--mono);letter-spacing:.02em;color:#cfd8e2;background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.theatre-strip .map-opt:hover img{opacity:.8}
.theatre-strip .map-opt.selected{border-color:#8fb8e0}
.theatre-strip .map-opt.selected img{opacity:1}
.theatre-strip .map-opt.selected span{background:rgba(52,68,92,.92);color:#fff}
.tp-arrow{flex:none;width:36px;height:36px;padding:0;font-size:24px;line-height:1;background:none;border:none;color:#b8c6d6}
.tp-arrow:hover:not(:disabled){background:rgba(52,68,92,.6);color:#fff}

/* ?calibrate: real game map over the zoom target + tuning panel */
#cal-overlay{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);
  opacity:.5;pointer-events:none;image-rendering:pixelated;outline:1px dashed #e0a23c}
.calibrating .tf-card{display:none}
#cal-panel{position:fixed;top:16px;right:16px;z-index:50;width:250px;display:flex;flex-direction:column;gap:8px;
  padding:12px;font-size:12px;background:rgba(12,15,19,.94);border:1px solid #e0a23c;pointer-events:auto}
#cal-panel b{color:#f6d9a0;letter-spacing:.08em;text-transform:uppercase}
#cal-panel label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#a1adb8}
#cal-panel input[type=number],#cal-panel input[type=range]{width:120px;padding:5px 6px}
#cal-panel p{margin:0;font-size:11px;color:#7d8896}
#cal-panel textarea{width:100%;padding:6px;font:10px/1.4 ui-monospace,monospace;color:#dfe6ef;
  background:#0a0d13;border:1px solid #434d56;resize:vertical}
.menu-sub #code{max-width:320px;padding:14px;font-size:20px;margin-bottom:18px;background:rgba(10,13,19,.75)}
@media (max-width:760px){
  #menu{padding:24px 16px}
  #menu-list{width:auto}
  #menu-hero{opacity:.35}
  .tp-bottom{flex-wrap:wrap}
  .tf-card{left:0;top:calc(100% + 12px);transform:none;min-width:0}
  .tf-card h3{font-size:28px}
}
/* ---- deploy loading screen ---- */
#loading{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;padding:0 6vw 12vh;
  overflow:hidden;background:#05080c;transition:opacity .5s ease}
#loading[hidden]{display:none}
#loading.out{opacity:0;pointer-events:none}
.ld-bg{position:absolute;inset:-40px;background:center/cover no-repeat;
  filter:blur(6px) brightness(.45) saturate(.7);animation:ld-drift 14s ease-out forwards}
@keyframes ld-drift{from{transform:scale(1.08)}to{transform:scale(1.18) translateX(-2%)}}
.ld-scan{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,8,12,.95),rgba(5,8,12,.2) 60%,rgba(5,8,12,.7)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.ld-content{position:relative;width:min(640px,100%)}
.ld-kicker{font:500 12px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#e0a23c}
#ld-name{margin:10px 0 6px;font:300 64px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:#f2f4f6}
.ld-region{display:block;min-height:1em;margin-bottom:28px;font-size:13px;color:#9fb0c3}
.ld-bar{height:3px;overflow:hidden;background:rgba(255,255,255,.12)}
.ld-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8fb8e0,#e0a23c);
  box-shadow:0 0 12px rgba(224,162,60,.7);transition:width .2s linear}
.ld-row{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:12px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:#a3b3c8}
.ld-row b{font-weight:500;color:#e8eef6}
.ld-tip{max-width:520px;margin:26px 0 0;padding-left:12px;border-left:2px solid rgba(143,184,224,.6);color:#c9d3de}
@media (max-width:760px){
  #loading{padding:0 16px 10vh}
  #ld-name{font-size:38px}
}

/* ---- access panel ---- */
.panel{width:100%;max-width:330px;background:var(--surface);border:1px solid var(--line);border-radius:3px}
.panel-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);
  font:10px/1 var(--mono);letter-spacing:.16em;color:var(--dim);background:var(--surface-2)}
.dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
.panel-body{padding:22px}
h1{margin:0;font:600 30px/1 var(--mono);letter-spacing:.28em}
.wordmark{display:block;line-height:0}
.wordmark img{width:450%;max-width:260px;height:auto;image-rendering:pixelated}
.tag{margin:8px 0 22px;color:var(--dim);font:10px/1.6 var(--mono);letter-spacing:.12em}
.field{display:block;margin-bottom:10px}
.field span{display:block;margin-bottom:5px;font:10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
#code{text-transform:uppercase;letter-spacing:.36em;text-align:center}
.or{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--dim);
  font:10px/1 var(--mono);letter-spacing:.2em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.error{min-height:16px;margin:12px 0 0;color:#ff6b6b;font:11px/1.4 var(--mono)}

/* ---- console ---- */
#game{height:100vh;display:flex;flex-direction:column}
#bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.bar-left,.bar-mid,.bar-right{display:flex;align-items:center;gap:8px}
.bar-mid{flex:1;justify-content:center}
.bar-right{margin-left:auto}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:11px;width:auto;image-rendering:pixelated;opacity:.95}
.kv{display:flex;align-items:center;gap:7px;font:11px/1 var(--mono)}
.kv i{font-style:normal;color:var(--dim);letter-spacing:.14em}
.kv b{letter-spacing:.28em;color:var(--accent)}
.badge{padding:5px 9px;border-radius:2px;border:1px solid var(--line-2);background:var(--surface-2);
  font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.badge.muted{color:var(--dim)}
.badge-flag{height:12px;width:auto;margin-right:6px;vertical-align:-2px;
  border:1px solid rgba(0,0,0,.5);border-radius:1px}
.badge.norall{border-color:var(--nor);color:var(--nor)}
.badge.sopow{border-color:var(--sop);color:#ff7676}
.turn{font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.turn.active{color:var(--ok)}

#stage{flex:1;min-height:0;position:relative;background:#1F252B}
#viewport{position:absolute;inset:0}
#board{display:block;width:100%;height:100%;cursor:crosshair}
#board.grabbing{cursor:grabbing}
#zoom{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;
  padding:5px;background:var(--surface);border:1px solid var(--line)}
#zoom-level{min-width:38px;text-align:center;font:10px/1 var(--mono);color:var(--dim)}
/* the shaded terrain sits under the board canvas, which stays transparent */
#board3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#board{position:relative}
#status{padding:7px 12px;border-top:1px solid var(--line);background:var(--surface);
  color:var(--dim);font:11px/1.4 var(--mono)}

/* ---- workspace: sidebar + board ---- */
#main{flex:1;min-height:0;display:flex}
#sidebar{width:280px;min-width:220px;max-width:520px;flex:0 0 auto;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
#sidebar::-webkit-scrollbar{width:8px}
#sidebar::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
#sidebar::-webkit-scrollbar-track{background:transparent}
#resizer{flex:0 0 4px;cursor:col-resize;background:var(--bg)}
#resizer:hover,#resizer.active{background:var(--accent)}
.side-block{border-bottom:1px solid var(--line);padding:10px 10px 12px;flex:0 0 auto}
.side-block:last-of-type{border-bottom:none}
.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;
  font:10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.side-head b{color:var(--ink);font-weight:500}
.phase-row{display:flex;align-items:center;gap:8px}
.clock{flex:1;font:600 20px/1 var(--mono);letter-spacing:.06em}
.clock.urgent{color:var(--sop)}
.note{margin:9px 0 0;color:var(--dim);font:10px/1.5 var(--mono)}

.palette{display:flex;flex-direction:column;gap:2px}
/* The two rosters are the tall blocks, and between them they used to push
   Markup clean off the bottom of the sidebar. Let them share whatever space is
   left over and scroll inside themselves, so every section stays reachable. */
.roster{flex:1 1 auto;min-height:84px;display:flex;flex-direction:column;overflow:hidden}
/* Structures is the whole job during setup, so it keeps its five rows rather
   than shrinking alongside the forces list. Once setup ends the block collapses
   on its own and the forces roster inherits the space. */
#structures-block{flex:0 0 auto}
#structures-block.collapsed{flex:0 0 auto;min-height:0}
#structures,#vehicles{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

/* An element given display by a rule of ours stops honouring the hidden
   attribute, because the browser's own [hidden] rule loses to any author
   declaration. The roster hides rows that way, so say it explicitly. */
[hidden]{display:none !important}

/* a vehicle row: the item itself plus its info button */
.item-row{display:flex;align-items:stretch;gap:2px}
.item-row .item{flex:1;min-width:0}
.info-btn{flex:0 0 22px;width:22px;padding:0;border:1px solid var(--line-2);border-radius:2px;
  background:var(--surface-2);color:var(--dim);cursor:pointer;
  font:600 12px/1 var(--mono);text-transform:none;letter-spacing:0}
.info-btn:hover,.info-btn.open{color:var(--accent);border-color:var(--accent);background:#152234}
.item{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid transparent;
  border-radius:2px;background:var(--surface-2);cursor:pointer;text-align:left;
  font:11px/1.2 var(--mono);color:var(--ink);text-transform:none;letter-spacing:0}
.item:hover:not(:disabled){background:#1d2634;border-color:var(--line-2)}
.item.selected{border-color:var(--accent);background:#152234}
/* a disabled button swallows mouse events, and the row still has to answer a hover */
.item:disabled{opacity:.4;cursor:default;pointer-events:none}
.item .ico{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;
  background:#0a0d13;border:1px solid var(--line);border-radius:2px;color:var(--dim)}
.item:hover:not(:disabled) .ico{border-color:var(--line-2)}
.item.selected .ico{border-color:var(--accent);color:var(--accent);background:#0d1826}
.item .ico svg{width:22px;height:22px}
.item .ico img.art{width:28px;height:28px;object-fit:contain}
.item .meta{flex:1;min-width:0}
.item .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .sub{display:block;color:var(--dim);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.item .count{font:10px/1 var(--mono);color:var(--dim)}
.item .count.used{color:var(--accent)}
button.link{width:100%;margin-top:14px;background:none;border:none;color:var(--dim);padding:6px 0}
button.link:hover{background:none;color:var(--accent)}
#board.movable{cursor:grab}
#board.inking{cursor:crosshair}

.hint{margin:10px 0 0;padding:7px 8px;background:#0a0d13;border:1px solid var(--line);
  border-left:2px solid var(--accent);color:var(--dim);font:10px/1.6 var(--mono)}
.hint b{color:var(--ink);font-weight:500}
.hint kbd{display:inline-block;padding:1px 4px;margin:0 1px;border:1px solid var(--line-2);
  border-radius:2px;background:var(--surface-2);color:var(--ink);font:inherit}
.legend{display:flex;gap:14px;margin-top:8px;color:var(--dim);font:9px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase}
.legend span{display:flex;align-items:center;gap:5px}
.sw{width:9px;height:9px;border:1px solid}
.sw.ok{background:rgba(62,207,142,.35);border-color:#3ecf8e}
.sw.no{background:rgba(224,74,74,.35);border-color:#e04a4a}
.sw.sea{background:rgba(45,140,240,.35);border-color:#2d8cf0}

/* ---- task dropdown on the board ---- */
#taskmenu{position:absolute;z-index:5;min-width:180px;background:var(--surface);
  border:1px solid var(--line-2);box-shadow:0 6px 20px rgba(0,0,0,.55)}
.tm-head{padding:7px 9px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font:10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:none;border-radius:0;background:none;padding:8px 9px;text-align:left;
  font:11px/1.2 var(--mono);text-transform:none;letter-spacing:0;color:var(--ink)}
.tm-item:hover{background:#1d2634}
.tm-item i{font-style:normal;color:var(--dim);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.tm-item.cancel{border-top:1px solid var(--line);color:var(--dim)}

/* ---- turn hand-off blackout ---- */
#handoff{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(3,5,9,.93)}
.handoff-card{width:min(90vw,380px);padding:26px;background:var(--surface);
  border:1px solid var(--line);text-align:center}
.ho-kicker{font:10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ho-kicker b{color:var(--accent);font-weight:500}
.handoff-card h2{margin:12px 0 8px;font:500 16px/1.3 var(--mono);letter-spacing:.08em}
.handoff-card p{margin:0 0 20px;color:var(--dim);font:11px/1.6 var(--mono)}
#ho-ok{width:100%}
.tm-note{padding:8px 9px;color:var(--dim);font:10px/1.5 var(--mono);border-top:1px solid var(--line)}


/* ---- after action report ---- */
#result{position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  background:rgba(10,13,19,.86);padding:20px}
.result-card{width:min(94vw,460px);background:var(--surface);border:1px solid var(--line)}
.result-body{padding:22px}
.result-body h2{margin:0;font:600 20px/1.2 var(--mono);letter-spacing:.14em}
.result-body h2.win{color:var(--ok)}
.result-body h2.lose{color:var(--sop)}
#result-stats{width:100%;border-collapse:collapse;margin:18px 0 20px;
  font:11px/1.7 var(--mono)}
#result-stats th{text-align:right;padding:4px 6px;color:var(--dim);font-weight:400;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase}
#result-stats th:first-child{text-align:left}
#result-stats td{text-align:right;padding:4px 6px;border-top:1px solid var(--line)}
#result-stats td:first-child{text-align:left;color:var(--dim)}
#result-stats .nor{color:var(--nor)}
#result-stats .sop{color:#ff7676}
#result-close{width:100%}

/* ---- markup tools ---- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.tool{padding:7px 0;font-size:13px;line-height:1}
.tool.selected{border-color:var(--accent);background:#152234;color:var(--accent)}
.swatches{display:flex;gap:4px;margin-top:6px}
.swatch{flex:1;height:16px;border:1px solid var(--line-2);border-radius:2px;cursor:pointer;padding:0}
.swatch.selected{border-color:#fff;box-shadow:inset 0 0 0 1px #000}

/* ---- tutorial coach marks ---- */
#tutorial{width:100%;margin-top:8px}
/* The overlay only dims and catches stray clicks; the ring and the callout
   sit above it and stay interactive. */
#coach{position:fixed;inset:0;z-index:40;background:rgba(6,9,14,.55)}
#coach-ring{position:absolute;border:2px solid var(--accent);border-radius:3px;
  box-shadow:0 0 0 4000px rgba(6,9,14,.55),0 0 14px rgba(74,130,183,.65);
  transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease;
  pointer-events:none}
#coach-ring.hidden{display:none!important}
#coach-box{position:absolute;width:min(320px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--accent);box-shadow:0 10px 34px rgba(0,0,0,.6);padding:14px;
  transition:left .22s ease,top .22s ease}
/* the arrow is a rotated square tucked under the box edge nearest the target */
#coach-arrow{position:absolute;width:11px;height:11px;background:var(--surface);
  border-left:1px solid var(--accent);border-top:1px solid var(--accent)}
.coach-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:10px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.coach-head button{padding:4px 7px;font-size:9px}
#coach-box h3{margin:10px 0 6px;font:600 13px/1.3 var(--mono);letter-spacing:.06em;color:var(--ink)}
#coach-box p{margin:0 0 13px;color:var(--dim);font:11px/1.65 var(--mono)}
#coach-box p b{color:var(--ink);font-weight:500}
.coach-nav{display:flex;gap:6px}
.coach-nav button{flex:1}

/* ---- supply ---- */
.supply{display:flex;flex-direction:column;gap:2px}
.pool{display:flex;align-items:center;gap:8px;background:#0a0d13;border:1px solid var(--line);
  border-radius:2px;padding:6px 9px}
.pool .lbl{flex:1;font:10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase}
.pool .amt{font:600 14px/1 var(--mono);color:var(--ink);min-width:26px;text-align:right}
.pool .inc{min-width:52px;text-align:right;font:10px/1 var(--mono);color:var(--ok)}
.pool .inc.idle{color:var(--sop)}
.pool.air .amt{color:#8fd4ff}
.pool.sea .amt{color:#7fe3c0}
.pool.land .amt{color:#ffd24a}
.item .cost{font:10px/1 var(--mono);color:var(--dim);white-space:nowrap}
.item .cost.short{color:var(--sop)}

/* a finished setup phase folds the structure palette away */
#structures-block.collapsed #structures,
#structures-block.collapsed #hint,
#structures-block.collapsed #legend{display:none}
#structures-block.collapsed{padding-bottom:10px}

/* ---- vehicle info popover ---- */
#vehinfo{position:fixed;z-index:36;width:min(310px,calc(100vw - 24px));background:var(--surface);
  border:1px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.6);padding:0}
.vi-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font:600 11px/1.2 var(--mono);letter-spacing:.06em;color:var(--ink)}
.vi-x{padding:2px 6px;border:none;background:none;color:var(--dim);font-size:14px;line-height:1}
.vi-x:hover{background:none;color:var(--sop)}
.vi-role{padding:8px 10px 0;color:var(--accent);font:10px/1.4 var(--mono);letter-spacing:.08em;
  text-transform:uppercase}
#vehinfo p{margin:7px 0 0;padding:0 10px;color:var(--dim);font:11px/1.65 var(--mono)}
.vi-tasks{margin-top:9px;padding:8px 10px;border-top:1px solid var(--line);
  color:var(--dim);font:10px/1.7 var(--mono)}
.vi-tasks b{color:var(--ink);font-weight:500}

.vi-cost{padding:5px 10px 0;color:var(--dim);font:10px/1.4 var(--mono);letter-spacing:.06em}
.vi-cost b{color:var(--ink);font-weight:600}

/* ---- standing forces + objective, under the commander badges ---- */
#strength{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:6px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.str-side{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.str-side.foe{justify-content:flex-end}
/* the objective: a labelled badge, coloured by where the game stands */
.str-goal{--goal:var(--accent);display:flex;align-items:stretch;max-width:46vw;
  border:1px solid var(--goal);border-radius:2px;background:var(--bg);overflow:hidden}
.goal-tag{display:flex;align-items:center;padding:5px 8px;background:var(--goal);color:#0b0e13;
  font:700 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.goal-text{display:flex;gap:8px;align-items:center;padding:5px 10px;color:var(--ink);
  font:11px/1.3 var(--mono);letter-spacing:.04em}
.goal-text b{color:var(--goal);font-weight:600}
.str-goal.setup{--goal:#e0a94a}
.str-goal.ready,.str-goal.won{--goal:var(--ok)}
.str-goal.lost{--goal:var(--sop)}
.str-goal.battle .goal-tag::before{content:'';width:6px;height:6px;margin-right:6px;
  border-radius:50%;background:#0b0e13;animation:goal-pulse 1.6s ease-in-out infinite}
@keyframes goal-pulse{50%{opacity:.25}}
@media (max-width:760px){
  #strength{grid-template-columns:1fr;justify-items:center;gap:6px}
  .str-side.foe{justify-content:center}
  .str-goal{max-width:100%}
}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:2px;
  border:1px solid var(--line-2);background:var(--surface-2);
  font:600 11px/1 var(--mono);color:var(--ink)}
.chip-ico{width:14px;height:14px;flex:0 0 14px;color:var(--dim);align-self:center}
.chip.hq .chip-ico{color:var(--accent)}
.chip.hurt .chip-ico{color:#e0a94a}
.chip.gone .chip-ico{color:var(--sop)}
.chip u{text-decoration:none;font-weight:400;font-size:9px;color:var(--dim)}
/* health of the weakest one still standing, so damage is visible at a glance */
.chip s{text-decoration:none;font:9px/1 var(--mono);padding:1px 3px;border-radius:2px;
  background:rgba(255,255,255,.07);color:var(--dim)}
.chip s.warn{color:#e0a94a;background:rgba(224,169,74,.14)}
.chip s.crit{color:#ff6b6b;background:rgba(224,74,74,.16)}
/* your own side reads in your colour; the enemy always reads red */
/* each side reads in its own team's colour */
.str-side.norall .chip{border-color:rgba(74,163,255,.4);background:#16202c}
.str-side.sopow .chip{border-color:rgba(224,74,74,.4);background:#2a1a1c}
.chip.hurt{border-color:#c88a2e}
.chip.hurt i,.chip.hurt u{color:#e0a94a}
.chip.gone{opacity:.55;border-color:var(--sop)}
.chip.gone .n{color:var(--sop);text-decoration:line-through}
.chip.hq{background:#152234}
.str-empty{color:var(--dim);font:10px/1 var(--mono);letter-spacing:.1em}
.item .count.needed{color:var(--sop)}
.str-who{margin-right:2px;font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}
.str-side.norall .str-who{color:var(--nor)}
.str-side.sopow .str-who{color:#ff7676}
.str-who{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
/* during setup the forces roster is locked and empty: fold it to its heading */
#forces-block.collapsed{flex:0 0 auto;min-height:0;padding-bottom:10px}
#forces-block.collapsed #vehicles,
#forces-block.collapsed #vehicles-empty{display:none}

/* ---- the wire: a news site in a browser chrome, on the right ---- */
#newsrail{flex:0 0 auto;display:flex;align-items:stretch;background:var(--bg);
  border-left:1px solid var(--line);max-width:420px}
#newsrail.hidden{display:none!important}
#newsrail.collapsed #newspane{display:none}
#news-tab{width:26px;padding:0;border:none;border-left:1px solid var(--line);
  background:var(--surface);color:var(--dim);border-radius:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer}
#news-tab:hover{background:#1d2634;color:var(--ink)}
#news-tab span{writing-mode:vertical-rl;transform:rotate(180deg);
  font:10px/1 var(--mono);letter-spacing:.22em}
#news-tab b{font:9px/1 var(--mono);background:var(--accent);color:#04121f;
  border-radius:9px;padding:3px 5px;font-weight:600}
#news-tab b.zero{display:none}
#newspane{width:340px;display:flex;flex-direction:column;min-height:0;background:#fff}
#news-chrome{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#2b313a;
  border-bottom:1px solid #1b2027}
#news-chrome .dots{display:flex;gap:4px}
#news-chrome .dots i{width:8px;height:8px;border-radius:50%;background:#5a626d}
#news-chrome .url{flex:1;background:#1f242b;border-radius:10px;padding:3px 9px;
  font:10px/1.5 var(--mono);color:#aeb7c2;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#news-close,#news-switch{padding:2px 6px;font-size:10px;background:none;border:none;color:#aeb7c2}
#news-switch:hover,#news-close:hover{color:#fff}
#news-site{flex:1;min-height:0;overflow-y:auto;background:#fff;color:#111}
#news-empty{padding:22px 14px;font:12px/1.6 Georgia,serif;color:#777;text-align:center}
@media (max-width:900px){#newspane{width:250px}}

/* ---- breaking news banner over the board ---- */
#breaking{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;
  gap:10px;padding:7px 12px;background:rgba(12,15,20,.92);
  border-bottom:2px solid var(--news-accent,#bb1919);cursor:pointer;
  animation:bk-in .25s ease-out}
#breaking.hidden{display:none}
.bk-tag{flex:0 0 auto;background:var(--news-accent,#bb1919);color:#fff;
  font:700 9px/1 Helvetica,Arial,sans-serif;letter-spacing:.16em;padding:4px 6px}
.bk-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 12px/1.3 Georgia,'Times New Roman',serif;color:#fff}
.bk-src{flex:0 0 auto;font:9px/1 var(--mono);letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase}
@keyframes bk-in{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* ---- the wire: each outlet's own front page ---- */
#news-site{background:#fff}
#news-masthead{border-bottom:1px solid #e2e2e2}
#news-masthead.hidden{display:none!important}
#news-banner{border-bottom:12px solid #f2f2f2;cursor:pointer}
.lead img,.story img{display:block;object-fit:cover;background:#dcdcdc}
.story{cursor:pointer}
.story p{display:none;margin:6px 0 0}
.story.open p{display:block}

/* --- The Old Port Times --- */
.mh-nyt{padding:8px 12px 0;text-align:center}
.mh-nyt .mh-rail{display:flex;justify-content:center;gap:12px;
  font:9px/1 Helvetica,Arial,sans-serif;letter-spacing:.05em;color:#333;
  padding-bottom:7px;border-bottom:1px solid #e2e2e2}
.mh-nyt h1{margin:9px 0 6px;font:800 25px/1 'Old English Text MT','UnifrakturCook',Georgia,serif;
  letter-spacing:.01em;color:#121212}
.mh-nyt .mh-date{display:flex;justify-content:space-between;padding:0 2px 7px;
  font:9px/1.3 Georgia,serif;color:#555;border-bottom:1px solid #121212}
.mh-nyt .mh-nav{padding:7px 0;font:11px/1 Georgia,serif;color:#121212}
.mh-nyt .mh-nav i{margin:0 5px;color:#bbb;font-style:normal}
#news-site[data-outlet="nyt"] .lead{display:grid;grid-template-columns:1fr;gap:0;padding:14px 12px 16px}
#news-site[data-outlet="nyt"] .lead img{width:100%;aspect-ratio:16/10;margin-top:10px}
.lead.nyt .kick{font:700 9px/1 Helvetica,Arial,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:#555}
.lead.nyt h2{margin:7px 0 7px;font:700 21px/1.2 Georgia,'Times New Roman',serif;color:#121212}
.lead.nyt p{margin:0;font:13px/1.5 Georgia,serif;color:#363636}
.lead.nyt .meta{margin-top:9px;font:9px/1.4 Helvetica,Arial,sans-serif;
  letter-spacing:.06em;color:#727272;text-transform:uppercase}
.story.nyt{display:flex;gap:12px;padding:14px 12px;border-bottom:1px solid #e2e2e2}
.story.nyt .kick{font:700 8px/1 Helvetica,Arial,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:#555}
.story.nyt h3{margin:5px 0 0;font:700 14px/1.25 Georgia,serif;color:#121212}
.story.nyt p{font:12px/1.5 Georgia,serif;color:#444}
.story.nyt .meta{margin-top:6px;font:9px/1 Helvetica,Arial,sans-serif;letter-spacing:.06em;
  color:#727272;text-transform:uppercase}
.story.nyt img{width:74px;height:74px;flex:0 0 auto;order:2}

/* --- PPC News --- */
.mh-PPC{padding:9px 12px;text-align:center}
.PPC-blocks{display:inline-flex;gap:3px}
.PPC-blocks i{width:19px;height:22px;background:#121212;color:#fff;font-style:normal;
  font:700 14px/22px Helvetica,Arial,sans-serif;letter-spacing:.02em}
.mh-PPC .mh-nav{margin-top:9px;padding-top:8px;border-top:1px solid #e2e2e2;
  font:600 11px/1 Helvetica,Arial,sans-serif;color:#121212}
.mh-PPC .mh-nav i{display:inline-block;width:12px}
.lead.PPC img{width:100%;aspect-ratio:16/9}
.lead.PPC .lead-txt{padding:11px 12px 15px}
.lead.PPC h2{margin:0 0 7px;font:700 19px/1.22 Helvetica,Arial,sans-serif;color:#121212}
.lead.PPC p{margin:0;font:13px/1.5 Helvetica,Arial,sans-serif;color:#3f3f42}
.lead.PPC .meta,.story.PPC .meta{margin-top:9px;font:11px/1 Helvetica,Arial,sans-serif;color:#6e6e73}
.lead.PPC .meta i,.story.PPC .meta i{margin:0 7px;color:#c8c8cc;font-style:normal}
.livedot{display:inline-block;margin-right:7px;padding:2px 5px;background:#bb1919;color:#fff;
  font:700 9px/1 Helvetica,Arial,sans-serif;letter-spacing:.08em;vertical-align:middle}
.story.PPC{display:flex;gap:12px;padding:13px 12px;border-bottom:1px solid #e2e2e2}
.story.PPC h3{margin:0;font:700 14px/1.3 Helvetica,Arial,sans-serif;color:#121212}
.story.PPC p{font:12px/1.5 Helvetica,Arial,sans-serif;color:#3f3f42}
.story.PPC img{width:86px;height:58px;flex:0 0 auto;order:2}

/* --- VCN --- */
.mh-VCN .VCN-bar{display:flex;align-items:center;gap:12px;background:#0c0c0c;padding:7px 10px}
.VCN-logo{font:700 17px/1 Helvetica,Arial,sans-serif;color:#cc0000;letter-spacing:-.02em;
  white-space:nowrap;flex:0 0 auto}
.mh-VCN nav{margin-left:auto;text-align:right;font:600 10px/1.5 Helvetica,Arial,sans-serif;color:#e6e6e6}
.mh-VCN nav i{display:inline-block;width:11px}
.VCN-ticker{padding:6px 10px;background:#f4f4f4;font:11px/1.3 Helvetica,Arial,sans-serif;
  color:#333;border-bottom:1px solid #e2e2e2}
.VCN-ticker b{color:#cc0000;text-transform:uppercase;letter-spacing:.06em;font-size:10px;
  margin-right:6px}
.lead.VCN{padding:13px 12px 16px}
.lead.VCN h2{margin:0 0 10px;font:700 21px/1.18 Helvetica,Arial,sans-serif;color:#0c0c0c}
.lead.VCN .imgwrap{position:relative}
.lead.VCN img{width:100%;aspect-ratio:16/9}
.lead.VCN .badge{position:absolute;left:0;bottom:0;background:#cc0000;color:#fff;
  font:700 9px/1 Helvetica,Arial,sans-serif;letter-spacing:.1em;padding:5px 7px;
  text-transform:uppercase}
.lead.VCN p{margin:10px 0 0;font:13px/1.5 Helvetica,Arial,sans-serif;color:#3c3c3c}
.lead.VCN .meta,.story.VCN .meta{margin-top:8px;font:10px/1 Helvetica,Arial,sans-serif;
  color:#737373;text-transform:uppercase;letter-spacing:.05em}
.lead.VCN .meta i,.story.VCN .meta i{margin:0 6px;font-style:normal;color:#c4c4c4}
.story.VCN{display:flex;gap:11px;padding:13px 12px;border-bottom:1px solid #e2e2e2}
.story.VCN h3{margin:0;font:700 13.5px/1.3 Helvetica,Arial,sans-serif;color:#0c0c0c}
.story.VCN p{font:12px/1.5 Helvetica,Arial,sans-serif;color:#3c3c3c}
.story.VCN img{width:86px;height:58px;flex:0 0 auto}
.story.fresh h3::after{content:'NEW';margin-left:6px;font:700 8px/1 Helvetica,Arial,sans-serif;
  color:#fff;background:var(--news-accent,#bb1919);padding:2px 4px;vertical-align:middle}

/* ---- stacked front page ---- */
.round-stack{border-bottom:10px solid #f2f2f2}
.round-head{display:flex;align-items:baseline;justify-content:space-between;
  padding:9px 12px 7px;border-bottom:2px solid #121212;margin:0 0 2px;
  font:700 10px/1 Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#121212}
.round-head i{font-style:normal;font-weight:400;letter-spacing:.06em;color:#767676}
#news-site[data-outlet="nyt"] .round-head{font-family:Georgia,serif;letter-spacing:.08em}
#news-site[data-outlet="cnn"] .round-head{border-bottom-color:#cc0000;color:#cc0000}
#news-site[data-outlet="bbc"] .round-head{border-bottom-color:#bb1919}

/* ---- full article ---- */
#news-article{padding:0 0 26px}
#news-article.hidden{display:none}
#news-article .back{display:block;width:100%;text-align:left;padding:9px 12px;border:none;
  border-bottom:1px solid #e2e2e2;background:#f6f6f6;color:#333;border-radius:0;
  font:11px/1 Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:none;cursor:pointer}
#news-article .back:hover{background:#ececec}
.full{padding:14px 14px 0}
.full .kick{font:700 9px/1 Helvetica,Arial,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--news-accent,#bb1919)}
.full h1{margin:8px 0 9px;font:700 22px/1.2 Helvetica,Arial,sans-serif;letter-spacing:normal;color:#121212}
.full.nyt h1{font-family:Georgia,'Times New Roman',serif;font-size:23px}
.full .dek{margin:0 0 12px;font:14px/1.55 Helvetica,Arial,sans-serif;color:#3c3c3c}
.full.nyt .dek{font-family:Georgia,serif}
.full .bl{font:600 11px/1.4 Helvetica,Arial,sans-serif;color:#121212}
.full .stamp{margin:4px 0 13px;padding-bottom:12px;border-bottom:1px solid #e2e2e2;
  font:10px/1.5 Helvetica,Arial,sans-serif;color:#767676;text-transform:uppercase;
  letter-spacing:.05em}
.full figure{margin:0 0 14px}
.full figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#dcdcdc}
.full figcaption{margin-top:5px;font:10px/1.45 Helvetica,Arial,sans-serif;color:#767676}
.full p{margin:0 0 12px;font:13.5px/1.65 Helvetica,Arial,sans-serif;color:#232323}
.full.nyt p,.full.nyt .bl{font-family:Georgia,'Times New Roman',serif}
.full.nyt p{font-size:14px;line-height:1.7}
.tl{margin-top:18px;border-top:2px solid #121212;padding-top:10px}
.tl h4{margin:0 0 8px;font:700 10px/1 Helvetica,Arial,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:#121212}
.tl-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #ececec;cursor:pointer}
.tl-row:hover{background:#fafafa}
.tl-time{flex:0 0 62px;font:10px/1.5 Helvetica,Arial,sans-serif;color:#767676;
  text-transform:uppercase;letter-spacing:.04em}
.tl-head{font:600 12px/1.45 Helvetica,Arial,sans-serif;color:#121212}
.full.nyt ~ .tl .tl-head,#news-site[data-outlet="nyt"] .tl-head{font-family:Georgia,serif}

.tm-item:disabled{opacity:.45;cursor:default}
.tm-item:disabled:hover{background:none}

/* after-action report: rematch, look at the board, or get out */
.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.result-actions button{flex:1 1 auto;min-width:112px}
#result-note{margin:10px 0 0;color:var(--dim)}
#result-note.hidden{display:none}
/* ---- in-game: minimal. flat surfaces, hairlines only where they separate, one accent ---- */
#game{background:var(--bg)}
#game button.ghost:not(#news-close):not(#news-switch),#game .tool,#result-close,#coach button.ghost{
  border-radius:2px;border:1px solid var(--line-2);background:transparent;color:var(--dim)}
#game button.ghost:not(#news-close):not(#news-switch):hover:not(:disabled),#game .tool:hover:not(:disabled),
#result-close:hover,#coach button.ghost:hover:not(:disabled){background:rgba(255,255,255,.04);border-color:#3a4658;color:var(--ink)}
#game button.primary,#coach button.primary,#ho-ok{border-radius:2px;border:1px solid var(--accent);
  background:var(--accent);color:#0b0f15;font-weight:600}
#game button.primary:hover:not(:disabled),#coach button.primary:hover:not(:disabled),#ho-ok:hover{
  background:#a9c9e9;border-color:#a9c9e9}
#game .tool.selected{border-color:var(--accent);background:rgba(143,184,224,.1);color:var(--accent)}

#bar,#strength,#status{background:var(--bg)}
#bar{padding:10px 16px;border-bottom:1px solid var(--line)}
#strength{border-bottom:1px solid var(--line)}
#status{border-top:1px solid var(--line)}
.badge{background:transparent;border-color:var(--line-2)}

#sidebar{background:var(--bg);border-right:1px solid var(--line)}
#resizer{background:var(--bg)}
#resizer:hover,#resizer.active{background:var(--line-2)}
.side-block{padding:14px 14px 16px;border-bottom:1px solid var(--line)}
.item{background:transparent;border:1px solid transparent}
.item:hover:not(:disabled){background:rgba(255,255,255,.035);border-color:transparent}
.item.selected{background:rgba(143,184,224,.08);border-color:transparent;box-shadow:inset 2px 0 0 var(--accent)}
.item .ico{background:transparent;border-color:var(--line)}
.item.selected .ico{background:transparent;border-color:rgba(143,184,224,.5)}
.pool{background:transparent;border-color:var(--line)}
.hint{background:transparent;border-color:var(--line);border-left:2px solid var(--line-2)}
.info-btn{background:transparent}
.info-btn:hover,.info-btn.open{background:rgba(143,184,224,.08)}

#stage{background:#0a0e14}
#zoom{background:rgba(11,15,21,.85);border-color:var(--line);border-radius:2px}
#news-tab{background:var(--bg)}
#news-tab b{background:var(--accent);color:#0b0f15}

#taskmenu,#vehinfo,.handoff-card,.result-card{border-radius:2px;background:var(--surface);
  border:1px solid var(--line-2);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.tm-head,.vi-head,.result-card .panel-head{background:transparent;border-bottom:1px solid var(--line);color:var(--dim)}
.tm-item:hover{background:rgba(255,255,255,.04)}

/* ---- in-game layout: one strip on top, a slim sidebar, markup on the board, one footer ---- */
#bar{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;min-height:64px;padding:10px 16px}
#bar .brand img{height:12px;opacity:.8}
/* the two sides frame the objective */
#strength{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:0;border:none;background:none}
.str-team{display:flex;align-items:center;gap:10px;min-width:0}
.str-team.foe{justify-content:flex-end}
.str-who{display:none}
#you,#opponent{flex:none;padding:0;border:none;background:none;font:500 12px/1 var(--mono);
  letter-spacing:.04em;text-transform:none}
#you.norall,#opponent.norall{color:var(--nor)}
#you.sopow,#opponent.sopow{color:#ff7676}
.badge-flag{height:14px}
.chip,.chip.hq,.str-side.norall .chip,.str-side.sopow .chip{padding:2px 3px;border:none;background:none;font-size:12px}
/* the objective is the one thing to read */
.str-goal{flex-direction:column;align-items:center;gap:5px;max-width:40vw;border:none;background:none;overflow:visible}
.goal-tag{padding:0;background:none;color:var(--goal);font:600 10px/1 var(--mono);letter-spacing:.22em}
.str-goal.battle .goal-tag::before{background:var(--goal)}
.goal-text{padding:0;font:400 15px/1.25 var(--mono);letter-spacing:.01em;text-align:center;color:var(--ink)}
/* turn state, clock and the single primary action */
#phase{flex:none;display:flex;align-items:center;gap:14px}
.ph-text{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#phase .turn{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:none;color:var(--ink)}
#phase .turn.active{color:var(--accent)}
.ph-round{font:10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#phase .clock{flex:none;min-width:3.4ch;font:300 28px/1 var(--mono);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
#phase .clock.urgent{color:var(--sop)}
#phase button{min-width:112px;padding:10px 16px}
#game:not([data-phase="battle"]) #endturn,#game[data-phase="battle"] #ready{display:none}

#sidebar{width:260px}

/* markup tools float on the board's left edge */
#markup{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;
  gap:8px;padding:5px;background:rgba(11,15,21,.88);border:1px solid var(--line);border-radius:2px}
#markup .tools{display:flex;flex-direction:column;gap:2px}
#game #markup .tool{width:30px;height:30px;padding:0;border-color:transparent}
#game #markup .tool.selected{border-color:var(--accent)}
#markup .swatches{flex-direction:column;gap:3px;margin:0}
#markup .swatch{flex:none;width:30px;height:9px;border-radius:0}

/* footer: lobby + session controls left, the running status message right */
#footbar{display:flex;align-items:center;gap:16px;padding:6px 16px;background:var(--bg);border-top:1px solid var(--line)}
.fb-left{flex:none;display:flex;align-items:center;gap:8px}
#footbar .kv b{letter-spacing:.2em;color:var(--ink)}
#status{flex:1;min-width:0;padding:0;border:none;background:none;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
@media (max-width:760px){
  #bar{flex-wrap:wrap}
  #strength{order:3;flex-basis:100%}
}

/* markup: line icons, and one colour dot that opens the palette */
#markup .tool svg{width:18px;height:18px;display:block;margin:auto}
#game #markup .tool{color:var(--dim)}
#game #markup .tool:hover:not(:disabled){color:var(--ink)}
#game #markup .tool.selected{color:var(--accent);background:rgba(143,184,224,.12)}
#game #markup #ink-clear:hover:not(:disabled){color:var(--sop)}
.ink-color{position:relative;display:flex;justify-content:center;padding-top:6px;border-top:1px solid var(--line)}
#ink-current{width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid transparent;
  border-radius:2px;background:transparent}
#ink-current i{width:16px;height:16px;border-radius:50%;background:var(--ink,#ffd24a);
  box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(255,255,255,.35);transition:transform .15s}
#ink-current:hover:not(:disabled){background:rgba(255,255,255,.05);border-color:transparent}
#ink-current:hover i{transform:scale(1.12)}
#markup #ink-colors{position:absolute;left:calc(100% + 12px);bottom:0;display:flex;flex-direction:row;gap:8px;
  margin:0;padding:8px 10px;background:rgba(11,15,21,.96);border:1px solid var(--line-2);border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
#markup #ink-colors[hidden]{display:none}
#markup .swatch{width:20px;height:20px;flex:none;border-radius:50%;border:none;
  box-shadow:0 0 0 2px transparent;transition:transform .12s,box-shadow .12s}
#markup .swatch:hover{transform:scale(1.15)}
#markup .swatch.selected{box-shadow:0 0 0 2px rgba(11,15,21,.96),0 0 0 4px #fff}

/* setup -> battle */
#phase-banner{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(5,8,12,.8),rgba(5,8,12,0) 65%)}
#phase-banner[hidden]{display:none}
#phase-banner.play{animation:pb-show 2.8s ease forwards}
#phase-banner b{font:200 64px/1 var(--mono);letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;color:#f2f4f6}
.pb-kicker,.pb-sub{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.pb-sub{color:var(--accent)}
@keyframes pb-show{0%{opacity:0;transform:scale(1.04)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
#game[data-phase="battle"] #forces-block,#game[data-phase="battle"] #endturn{animation:phase-in .5s ease both}
@keyframes phase-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* loading screen while matchmaking: the bar sweeps instead of filling */
#loading.searching .ld-bar i{width:28%;animation:ld-sweep 1.5s ease-in-out infinite;transition:none}
@keyframes ld-sweep{from{transform:translateX(-100%)}to{transform:translateX(360%)}}
#ld-cancel{margin-top:22px;padding:11px 22px;border-radius:0;border:1px solid rgba(160,180,210,.2);
  background:rgba(22,28,40,.85);color:#a3b3c8;font:500 12px/1 var(--mono);letter-spacing:.16em}
#ld-cancel:hover:not(:disabled){background:rgba(52,68,92,.95);border-color:rgba(160,190,230,.4);color:#fff}
#ld-cancel[hidden]{display:none}

/* ---- account button + account page (styled like the menu) ---- */
#account-btn{display:flex;align-items:center;gap:8px;cursor:pointer}
#account-btn b{margin-left:0}
#account-btn:hover:not(:disabled){background:rgba(52,68,92,.92);border-color:rgba(160,190,230,.4)}
#acct-elo:not(:empty){padding-left:8px;border-left:1px solid rgba(255,255,255,.15);color:#f6d9a0;
  font-weight:600;letter-spacing:.06em}
.acct-tabs{display:flex;margin-bottom:24px;border-bottom:1px solid rgba(160,180,210,.18)}
.acct-tab{padding:11px 18px;border:none;border-radius:0;background:none;color:#8fa4ba;
  font:500 12px/1 var(--mono);letter-spacing:.16em;box-shadow:inset 0 -2px 0 transparent}
.acct-tab:hover:not(:disabled){background:none;color:#dbe5f0}
.acct-tab.selected{color:#fff;box-shadow:inset 0 -2px 0 #8fb8e0}
.acct-form{display:flex;flex-direction:column;gap:14px;width:min(360px,100%)}
.acct-field{display:flex;flex-direction:column;gap:7px}
.acct-field[hidden]{display:none}
.acct-field span{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8fa0b4}
.acct-field input{padding:13px 14px;font-size:15px;border-radius:0;background:rgba(10,13,19,.78);
  border:1px solid rgba(160,180,210,.18)}
.acct-field input:focus{border-color:#8fb8e0}
.acct-form .sub-action{align-self:flex-start;margin-top:8px}
.acct-msg{min-height:1.3em;margin:0;font-size:13px;color:#ffb3a8}
.acct-stats{display:flex;gap:32px;margin:4px 0 30px}
.acct-stats div{display:flex;flex-direction:column;gap:7px}
.acct-stats b{font:300 36px/1 var(--mono);color:#f2f4f6}
.acct-stats span{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8fa0b4}
#acct-elo:empty{display:none}
.pw-wrap{position:relative;display:flex}
.pw-wrap input{flex:1;padding-right:68px}
#pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:7px 10px;border:none;border-radius:0;
  background:none;color:#8fa4ba;font:500 11px/1 var(--mono);letter-spacing:.14em}
#pw-toggle:hover:not(:disabled){background:rgba(255,255,255,.06);color:#fff}
.menu-sub #join,.menu-sub #tutorial{width:100%;max-width:320px}

/* top strip: keep dynamic text on one line and out of each other's way */
#strength{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.str-team{overflow:hidden}
#bar .str-empty{display:none}
.str-goal{max-width:min(44vw,560px);min-width:0}
.goal-text{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#opponent.muted{color:var(--dim);font-weight:400}
#phase .clock:empty{display:none}
.ph-text{white-space:nowrap}

/* ---- account: rating history, record, leaderboard ---- */
.account-page{max-width:1120px}
.acct-layout{display:flex;align-items:flex-start;gap:6vw;width:100%}
.acct-main{flex:1;min-width:0;max-width:600px}
.acct-board{flex:0 0 320px}
.acct-h{margin:0 0 12px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8fa0b4}
.acct-panel{margin-bottom:26px}
.acct-empty{margin:0;font-size:13px;color:#8fa0b4;list-style:none}
.elo-chart{position:relative;padding:12px 12px 8px;background:rgba(10,13,19,.6);border:1px solid rgba(160,180,210,.12)}
.ec-svg{display:block;width:100%;height:auto;overflow:visible}
.ec-grid{stroke:rgba(160,180,210,.1);stroke-width:1}
.ec-tick{fill:#8fa0b4;font:11px var(--mono)}
.ec-line{fill:none;stroke:#3f8ad6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ec-cross{stroke:rgba(223,230,239,.35);stroke-width:1}
.ec-dot{fill:#3f8ad6;stroke:#0b0f15;stroke-width:2}
.ec-last{fill:#dfe6ef;font:500 12px var(--mono)}
.ec-hit{fill:transparent;cursor:crosshair}
.ec-tip{position:absolute;z-index:2;display:flex;gap:8px;padding:6px 9px;transform:translate(-50%,calc(-100% - 12px));
  background:#0b0f15;border:1px solid rgba(160,180,210,.25);font:12px/1.4 var(--mono);color:#dfe6ef;
  white-space:nowrap;pointer-events:none}
.ec-tip[hidden]{display:none}
.ec-tip span{color:#8fa0b4}
.wl-track{display:flex;gap:2px;height:10px}
.wl-track i{min-width:4px;border-radius:4px}
.wl-legend{display:flex;gap:20px;margin-top:10px;font:12px/1 var(--mono);color:#dfe6ef}
.wl-legend span{display:flex;align-items:center;gap:7px}
.wl-legend i{width:10px;height:10px;border-radius:2px}
.leaderboard{margin:0;padding:0;list-style:none;background:rgba(10,13,19,.6);border:1px solid rgba(160,180,210,.12)}
.leaderboard li{display:grid;grid-template-columns:28px 1fr auto 52px;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid rgba(160,180,210,.07);font:13px/1.2 var(--mono);color:#dfe6ef}
.leaderboard li:last-child{border-bottom:none}
.leaderboard li.me{background:rgba(63,138,214,.14);box-shadow:inset 2px 0 0 #3f8ad6}
.leaderboard li.acct-empty{display:block;padding:14px;color:#8fa0b4}
.lb-rank{font-variant-numeric:tabular-nums;color:#8fa0b4}
.leaderboard li:nth-child(-n+3) .lb-rank{color:#f6d9a0}
.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rec{font-size:12px;font-variant-numeric:tabular-nums;color:#8fa0b4}
.lb-elo{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .acct-layout{flex-direction:column}
  .acct-board{flex-basis:auto;width:100%}
}

/* top strip scales down in steps and stays on one row until phone width */
#bar{gap:clamp(10px,1.6vw,22px)}
#phase{margin-left:auto}
.str-side{flex-wrap:nowrap;overflow:hidden}
.str-team > .badge{min-width:0;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1200px){
  .ph-round{display:none}
  #phase .clock{font-size:22px}
  #phase button{min-width:92px;padding:9px 12px}
  .str-team > .badge{max-width:11ch}
}
@media (max-width:1000px){
  #bar .mark-full{display:none}
  #bar .mark-icon{display:block}
  .goal-text{font-size:13px}
  .badge-flag{display:none}
}

/* ---- live win probability under the objective ---- */
#strength{position:relative}
.str-goal{cursor:help}
.odds{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:30;
  width:min(320px,calc(100vw - 24px));padding:14px 16px 12px;background:rgba(11,15,21,.97);
  border:1px solid rgba(160,180,210,.22);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.odds[hidden]{display:none}
.odds-head{margin-bottom:10px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8fa0b4}
.odds-bar{display:flex;gap:2px;height:10px;margin-bottom:12px}
.odds-bar i{min-width:4px;border-radius:4px}
.odds-split{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;
  font:13px/1.2 var(--mono);color:#dfe6ef}
.odds-split span{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odds-split i{flex:none;width:10px;height:10px;border-radius:2px}
.odds-split b{font-weight:500;font-variant-numeric:tabular-nums}
.odds-why{margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(160,180,210,.12);list-style:none}
.odds-why li{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;font:12px/1.3 var(--mono)}
.odds-why span{color:#8fa0b4}
.odds-why b{font-weight:400;color:#dfe6ef}
.odds-note{margin:10px 0 0;font-size:11px;line-height:1.4;color:#7d8896}

/* the compact mark stands in wherever the full wordmark no longer fits */
.mark-icon{display:none;width:auto;max-width:none}
#bar .mark-icon{height:20px !important}
.wordmark .mark-icon{height:52px;image-rendering:auto}
@media (max-width:760px){
  .wordmark .mark-full{display:none}
  .wordmark .mark-icon{display:block}
}

/* ---- the wire: filter bar + field log rows ---- */
#news-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;
  background:#20262e;border-bottom:1px solid #1b2027}
#news-filter{display:flex;gap:2px}
.nf{padding:6px 10px;border:none;border-radius:0;background:none;color:#aeb7c2;
  font:500 10px/1 var(--mono);letter-spacing:.12em}
.nf:hover:not(:disabled){background:rgba(255,255,255,.07);color:#fff}
.nf.selected{background:rgba(255,255,255,.14);color:#fff}
#news-read{padding:6px 10px;border:none;border-radius:0;background:none;color:#8d97a3;
  font:500 10px/1 var(--mono);letter-spacing:.12em}
#news-read:hover:not(:disabled){background:rgba(255,255,255,.07);color:#fff}
#news-masthead.hidden{display:none}
.logrow{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid #e6e6e6;
  font:12px/1.5 var(--mono);color:#222;background:#fff}
.logrow .log-time{flex:none;min-width:62px;color:#8a8a8a;font-size:11px}
.logrow .log-text{flex:1;border-left:3px solid #c8ccd2;padding-left:10px}
.logrow.good .log-text{border-left-color:#1a7f4b}
.logrow.bad .log-text{border-left-color:#bb1919}
.logrow.info .log-text{border-left-color:#2b6cb0}

/* ---- party strip, friends and invites ---- */
.party{display:flex;align-items:center;gap:8px}
.pa{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid rgba(255,255,255,.14);
  font:600 12px/1 var(--mono);letter-spacing:.04em;color:#eef3f8;border-radius:0}
.pa-sm{width:26px;height:26px;font-size:10px}
.pa-friend{position:relative;padding:0;cursor:pointer}
.pa-friend i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:13px;
  background:rgba(11,15,21,.78);color:#ff9d9d;opacity:0;transition:opacity .15s}
.pa-friend:hover i{opacity:1}
.pa-add{width:34px;height:34px;padding:0;border:1px dashed rgba(160,180,210,.4);background:rgba(22,28,40,.6);
  color:#8fa4ba;font:400 18px/1 var(--mono);border-radius:0;cursor:pointer}
.pa-add:hover:not(:disabled){background:rgba(52,68,92,.8);border-color:rgba(160,190,230,.6);color:#fff}
.fr-form{display:flex;gap:10px;width:min(420px,100%);margin-bottom:8px}
.fr-form input{flex:1;padding:12px 14px;border-radius:0;background:rgba(10,13,19,.78);
  border:1px solid rgba(160,180,210,.18)}
.fr-form .sub-action{min-width:0;margin:0}
.fr-cols{display:flex;gap:5vw;width:100%;margin-top:14px}
.fr-cols section{flex:1;min-width:0;max-width:420px}
.fr-list{margin:0;padding:0;list-style:none}
.fr-list li{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(160,180,210,.1);font:13px/1.2 var(--mono);color:#dfe6ef}
.fr-name{flex:1;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot-on{width:7px;height:7px;border-radius:50%;background:#3ecf8e}
.fr-elo{font-variant-numeric:tabular-nums;color:#8fa0b4}
.fr-acts{display:flex;gap:6px}
.fr-acts button{padding:6px 10px;border-radius:0;border:1px solid rgba(160,180,210,.18);
  background:rgba(22,28,40,.85);color:#a3b3c8;font:500 10px/1 var(--mono);letter-spacing:.1em}
.fr-acts button:hover:not(:disabled){background:rgba(52,68,92,.95);color:#fff;border-color:rgba(160,190,230,.4)}
.invites{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.invite{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(11,15,21,.94);
  border:1px solid rgba(224,162,60,.45);font:13px/1.2 var(--mono);color:#dfe6ef}
.inv-txt{flex:1;min-width:0}
.invite button{padding:7px 12px;border-radius:0;border:1px solid rgba(160,180,210,.2);
  background:rgba(22,28,40,.9);color:#a3b3c8;font:500 10px/1 var(--mono);letter-spacing:.12em}
.invite button.primary{background:var(--accent);border-color:var(--accent);color:#0b0f15}
#invite-btn{display:grid;place-items:center;width:28px;height:28px;margin-left:8px;padding:0}
#invite-btn svg{width:16px;height:16px;display:block}

.invite-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:min(280px,80vw);padding:6px;
  background:rgba(11,15,21,.97);border:1px solid rgba(160,180,210,.22);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.invite-menu[hidden]{display:none}
.invite-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;text-align:left;
  border:none;border-radius:0;background:none;color:#dfe6ef;font:13px/1.2 var(--mono);letter-spacing:.02em;
  text-transform:none}
.invite-menu button:hover:not(:disabled){background:rgba(52,68,92,.9);color:#fff}
.im-empty{margin:0;padding:10px;font-size:12px;line-height:1.5;color:#8fa0b4}

/* the force card's photograph, above its name */
.vi-art{display:block;width:100%;height:150px;object-fit:cover;background:#0a0e14;
  border-bottom:1px solid var(--line)}

/* the theatre strip scrolls like the sidebar does */
.theatre-strip{scrollbar-width:thin;scrollbar-color:rgba(160,180,210,.35) transparent}
.theatre-strip::-webkit-scrollbar{height:8px}
.theatre-strip::-webkit-scrollbar-thumb{background:rgba(160,180,210,.35);border-radius:4px}
.theatre-strip::-webkit-scrollbar-thumb:hover{background:rgba(160,190,230,.55)}
.theatre-strip::-webkit-scrollbar-track{background:transparent}

/* hovering a force shows its card, so the `i` button is redundant */
#vehicles .info-btn{display:none}

/* Developer tools (solo test, side switch, outlet switch) stay out of the site
   entirely unless a dev account is signed in — see paintDevTools() in app.js. */
body:not(.dev) [data-dev]{display:none!important}