/* Layout: briefing table. Map fills the middle with a floating tool rail; squad, supplies and board in a right-hand column. */
:root{
  --bg:#e9ece6; --panel:#f6f7f3; --ink:#1d2420; --muted:#5d6a62; --line:#c9d0c7;
  --accent:#e0571a; --zone:#c48a12; --ok:#2f8f4e; --warn:#b7791f; --bad:#c0392b; --info:#2f7fc1;
  --map-void:#d3d8d0; --map-land:#eef1ea; --map-grid:rgba(40,60,50,.10); --map-major:rgba(40,60,50,.28); --map-edge:#7d8a80; --map-label:#3f4b44;
  --font-display:"Chakra Petch","Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --font-data:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:6px;
  --mark-outline:rgba(5,8,7,.92);
  --mark-shadow:rgba(0,0,0,.38);
  --mark-label-bg:rgba(7,12,10,.80);
  --mark-label-br:rgba(255,255,255,.10);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101614; --panel:#161e1b; --ink:#e3ebe5; --muted:#8fa197; --line:#26332e;
  --accent:#ff7a3d; --zone:#e7b23c; --ok:#4cc276; --warn:#e2a443; --bad:#ff6a5c; --info:#5aa8ec;
  --map-void:#0b100e; --map-land:#18221e; --map-grid:rgba(160,200,180,.07); --map-major:rgba(160,200,180,.20); --map-edge:#4f6359; --map-label:#a8bab0;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101614; --panel:#161e1b; --ink:#e3ebe5; --muted:#8fa197; --line:#26332e;
  --accent:#ff7a3d; --zone:#e7b23c; --ok:#4cc276; --warn:#e2a443; --bad:#ff6a5c; --info:#5aa8ec;
  --map-void:#0b100e; --map-land:#18221e; --map-grid:rgba(160,200,180,.07); --map-major:rgba(160,200,180,.20); --map-edge:#4f6359; --map-label:#a8bab0;
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-body)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.label{font:500 10.5px var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.btn{font:600 13.5px var(--font-body);padding:8px 13px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:4px 9px;font-size:12.5px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
input[type=text],select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.field{display:grid;gap:4px;min-width:0}
.field>label{font:500 11.5px var(--font-data);color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:transparent;padding:7px 6px;font-weight:600;font-size:13px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}

/* ---------- lobby ---------- */
#lobby{min-height:100%;padding:40px 20px;display:grid;place-items:start center}
.lobby-inner{width:100%;max-width:880px;display:grid;gap:26px}
.lobby-head .eyebrow{font:600 11px var(--font-data);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lobby-head h1{font:700 clamp(34px,6vw,52px)/1 var(--font-display);margin:6px 0 10px;text-wrap:balance}
.lobby-head p{margin:0;max-width:60ch;color:var(--muted)}
.lobby-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:18px;display:grid;gap:12px;align-content:start}
.card h2{font:700 18px var(--font-display);margin:0;letter-spacing:.02em;text-transform:uppercase}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#joinCode{font:600 20px var(--font-data);letter-spacing:.3em;text-transform:uppercase}
.recent{display:grid;gap:6px}
.recent button{display:flex;justify-content:space-between;gap:10px;text-align:left;width:100%}
.recent code{font:600 12.5px var(--font-data);letter-spacing:.12em}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.features div{border-top:2px solid var(--line);padding-top:10px}
.features b{font:700 14px var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.features p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.err{color:var(--bad);font-size:13px;margin:0;min-height:1em}

/* ---------- room ---------- */
#room{height:100%;display:grid;grid-template-rows:auto 1fr}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.topbar h1{font:700 18px var(--font-display);margin:0;letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.code{font:600 14px var(--font-data);letter-spacing:.22em;padding:5px 10px;border:1px dashed var(--line);border-radius:var(--r);background:var(--bg);cursor:pointer}
.conn{display:flex;align-items:center;gap:6px;font:500 12px var(--font-data);color:var(--muted)}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.conn[data-s="on"] i{background:var(--ok)} .conn[data-s="off"] i{background:var(--bad)}
.spacer{flex:1}
.main{display:grid;grid-template-columns:1fr 340px;min-height:0}
.mapwrap{position:relative;min-width:0;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none}
.side{border-left:1px solid var(--line);background:var(--panel);display:grid;grid-template-rows:auto 1fr;min-height:0}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.tabs button{border:0;background:transparent;padding:11px 6px;font:600 13px var(--font-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;display:flex;justify-content:center;gap:6px;align-items:center}
.tabs button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--accent)}
.badge{font:600 10.5px var(--font-data);background:var(--accent);color:#fff;border-radius:9px;padding:1px 6px;min-width:18px;text-align:center}
.pane{overflow-y:auto;padding:14px;display:grid;gap:16px;align-content:start}
.section{display:grid;gap:8px}
.roster{display:grid;gap:2px}
.rgroup{font:600 10.5px var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.member{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line);min-width:0}
.member .dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.member .dot.on{background:var(--ok)}
.member .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font:600 10px var(--font-data);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid var(--zone);color:var(--zone)}
.req{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:grid;gap:6px;background:var(--bg)}
.req .top{display:flex;align-items:center;gap:8px}
.req .kind{font:700 14px var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.req .st{margin-left:auto;font:600 10.5px var(--font-data);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.st.open{background:var(--accent);color:#fff} .st.claimed{background:var(--info);color:#fff} .st.delivered{background:var(--ok);color:#fff}
.req .meta{font-size:12.5px;color:var(--muted)}
.req .acts{display:flex;gap:6px;flex-wrap:wrap}
.pend{display:flex;align-items:center;gap:8px;font-size:13.5px}
.check{display:flex;gap:8px;align-items:center;font-size:14px}

/* tool rail */
.rail{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:5px}
.rail button{width:40px;height:36px;border:0;border-radius:4px;background:transparent;cursor:pointer;display:grid;place-items:center;font:600 10px var(--font-data);color:var(--ink)}
.rail button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.rail hr{border:0;border-top:1px solid var(--line);margin:2px 0;width:100%}
.opts{position:absolute;left:66px;top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;right:64px;max-width:max-content}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.mk{border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:4px 7px;font:600 11px var(--font-data);cursor:pointer;text-transform:uppercase}
.mk[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.opts input{width:130px;padding:5px 8px}
.zoombar{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}
.zoombar button{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer;font:600 17px var(--font-data)}
.zoombar .fit{font-size:11px}
.cursor{position:absolute;left:12px;bottom:12px;font:500 12px var(--font-data);padding:5px 9px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.placing{position:absolute;left:50%;top:12px;transform:translateX(-50%);font:600 13px var(--font-body);background:var(--accent);color:#fff;padding:7px 12px;border-radius:var(--r)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 14px;border-radius:var(--r);font-size:14px;max-width:min(520px,calc(100% - 32px));z-index:10}

@media (max-width:860px){
  .lobby-grid,.features{grid-template-columns:1fr}
  #room{height:auto;min-height:100%}
  .main{grid-template-columns:1fr}
  .mapwrap{height:64vh;min-height:360px}
  .side{border-left:0;border-top:1px solid var(--line)}
  .pane{overflow:visible}
  .opts{left:12px;top:auto;bottom:52px;right:12px}
  .topbar h1{max-width:60vw}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* DHG skin -- shared tactical teal, gold and charcoal direction */
:root,:root[data-theme="dark"]{--bg:#050e11;--panel:#0b1e23;--ink:#efe9d7;--muted:#9eb3b4;--line:#2a4447;--accent:#d6b778;--zone:#d6b778;--ok:#5dd5bd;--info:#65aecd;--map-void:#020709;--map-land:#101f23;--map-grid:rgba(128,191,190,.12);--map-major:rgba(163,212,204,.26);--map-edge:#456468;--map-label:#b0c9c9;--r:3px;color-scheme:dark}
html{background:#050e11}body{background:radial-gradient(ellipse at 50% -20%,#173a3c 0,transparent 55%),#050e11;color:var(--ink)}
.dhg-site-link{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px clamp(14px,3vw,28px);font:600 11px var(--font-data);letter-spacing:.16em;color:#d6b778;background:#061318;border-bottom:1px solid #335052}
.dhg-site-link a{color:#d6b778;text-decoration:none}.dhg-site-link a:hover{color:#fff}.dhg-site-link span{opacity:.65}
#room{height:calc(100vh - 35px)}#lobby{min-height:calc(100vh - 35px)}
.lobby-head h1,.topbar h1{color:#f1e7c7;text-shadow:0 2px 24px #0009}.topbar,.card,.side{background:linear-gradient(145deg,#112b30,#07151a)}
.btn.primary,.seg button[aria-pressed="true"]{background:#d6b778;color:#071317;border-color:#d6b778}
.card{box-shadow:0 12px 30px #0005}.topbar{border-bottom:1px solid #385555}#mapwrap,.mapwrap{background:#020809}
@media(max-width:700px){.dhg-site-link span{font-size:8px;text-align:right}.dhg-site-link{padding:8px 12px}}

.dhg-tile-status{position:absolute;bottom:12px;left:12px;max-width:85%;padding:6px 9px;color:#e8c583;background:#071317e8;border:1px solid #375255;font:10px var(--font-data);pointer-events:none;z-index:4}.dhg-tile-status[data-error="true"]{color:#ff9b7c;border-color:#a45240}


/* WAR ROOM visibility boost */
.code{box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.cursor,.placing,.opts,.rail,.zoombar button{box-shadow:0 8px 24px rgba(0,0,0,.24)}