:root{
    --bg:#0f1317; --panel:#171d23; --panel2:#1e262e; --line:rgba(219,225,230,.12);
    --hair:rgba(219,225,230,.06); --ink:#dbe1e6; --muted:#8a97a1;
    --accent:#e8a13a; --accent-ink:#141a1f;
    --blue:#4b86c9; --blue-d:#2f5c8f; --red:#c9524b; --red-d:#8f322d;
    --go:#74b56b; --warn:#e0a53c; --crit:#e0685c;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:var(--bg);color:var(--ink);font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    display:flex;flex-direction:column;min-height:100%;
  }
  header.bar{
    display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
    padding:calc(10px + env(safe-area-inset-top)) max(clamp(12px,3vw,22px),env(safe-area-inset-right)) 10px max(clamp(12px,3vw,22px),env(safe-area-inset-left));
    border-bottom:1px solid var(--line);background:var(--panel);
  }
  .navbtn{flex:none}
  .navbtn:hover{border-color:var(--accent);color:var(--accent)}
  #feedbackBtn .navbtn-lbl{white-space:nowrap}
  .brand{flex:none;white-space:nowrap;font-family:var(--mono);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
  .brand b{color:var(--accent)}
  .mission{flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .turnpill{flex:none;white-space:nowrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:3px;border:1px solid var(--line)}
  #endBtn{flex:none;white-space:nowrap}
  .turnpill.player{color:var(--blue);border-color:var(--blue-d)}
  .turnpill.enemy{color:var(--red);border-color:var(--red-d)}
  .spacer{flex:1}
  .msel{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:4px 6px;cursor:pointer;max-width:210px}
  button{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:3px;
    padding:8px 14px;cursor:pointer;font-weight:600;
  }
  button:hover{border-color:var(--muted)}
  button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  button.primary:disabled{opacity:.4;cursor:not-allowed}
  button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  main{display:grid;grid-template-columns:1fr 300px;gap:14px;padding:14px clamp(12px,3vw,22px);flex:1;min-height:0}
  .stage{min-width:0;display:flex;flex-direction:column;gap:10px}
  .canvas-wrap{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel2)}
  canvas{display:block;width:100%;height:auto;touch-action:none}
  .banner{
    position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:rgba(10,13,16,.86);backdrop-filter:blur(3px);text-align:center;z-index:210;
    padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));overflow:auto;
  }
  .banner.show{display:flex}
  .banner h2{margin:0;font-family:var(--mono);font-size:2rem;letter-spacing:.06em;text-transform:uppercase}
  .banner.win h2{color:var(--go)} .banner.lose h2{color:var(--crit)} .banner.brief h2{color:var(--accent)}
  .banner p{margin:0;color:var(--muted);max-width:52ch;white-space:pre-line;line-height:1.5}
  .rank{color:#e8c15a;font-weight:800;font-size:.82em;letter-spacing:.04em}

  /* ---- Phase 4: post-game survey (injected into the win/lose banner) ---- */
  .fc-survey{width:min(440px,86vw);display:flex;flex-direction:column;gap:9px;padding:13px 15px;
    border:1px solid var(--line);border-radius:6px;background:var(--panel2);text-align:left}
  .fc-sq{font-family:var(--mono);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
  .fc-srow{display:grid;grid-template-columns:78px 1fr 20px;grid-template-rows:auto auto;
    align-items:center;column-gap:9px;row-gap:1px}
  .fc-slabel{font-size:.82rem;color:var(--ink);font-weight:600}
  .fc-slider{width:100%;accent-color:var(--accent);cursor:pointer}
  .fc-sval{font-family:var(--mono);font-size:.82rem;color:var(--accent);text-align:right}
  .fc-sends{grid-column:2/3;font-size:.62rem;color:var(--muted);display:flex;justify-content:space-between;letter-spacing:.02em}
  .fc-comment{width:100%;box-sizing:border-box;resize:vertical;background:var(--panel);color:var(--ink);
    border:1px solid var(--line);border-radius:4px;padding:7px 8px;font:inherit;font-size:.82rem}
  .fc-comment:focus{outline:none;border-color:var(--accent)}
  .fc-sactions{display:flex;align-items:center;gap:10px}
  .fc-submit{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
    border-radius:4px;padding:6px 12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
  .fc-submit:disabled{opacity:.5;cursor:default}
  .fc-thanks{color:var(--go);font-size:.8rem;font-weight:600}

  /* ---- Phase 4: in-play "Note" popup ---- */
  .fc-note-pop{position:fixed;top:52px;right:16px;z-index:40;width:min(320px,90vw);
    display:flex;flex-direction:column;gap:8px;padding:13px 14px;
    border:1px solid var(--line);border-radius:6px;background:var(--panel2);
    box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .fc-note-pop[hidden]{display:none}
  .fc-note-h{font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
  .fc-note-sub{font-size:.7rem;color:var(--muted)}
  .fc-note-text{width:100%;box-sizing:border-box;resize:vertical;background:var(--panel);color:var(--ink);
    border:1px solid var(--line);border-radius:4px;padding:7px 8px;font:inherit;font-size:.84rem}
  .fc-note-text:focus{outline:none;border-color:var(--accent)}
  .fc-note-actions{display:flex;justify-content:flex-end;gap:8px}
  .fc-note-cancel,.fc-note-send{border-radius:4px;padding:5px 11px;font:inherit;font-size:.8rem;cursor:pointer;
    border:1px solid var(--line);background:var(--panel);color:var(--ink)}
  .fc-note-send.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
  .fc-note-send:disabled{opacity:.6;cursor:default}

  aside{display:flex;flex-direction:column;gap:12px;min-height:0}
  .card{border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:12px 13px}
  .card h3{margin:0 0 9px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .sel-empty{color:var(--muted);font-size:.85rem;line-height:1.5}
  .sel-name{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem}
  .glyph{width:26px;height:26px;border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.85rem;color:#fff}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:11px;font-size:.82rem}
  .stat-grid .s{display:flex;justify-content:space-between;border-bottom:1px solid var(--hair);padding:3px 0}
  .stat-grid .s span:first-child{color:var(--muted)}
  .stat-grid .s span:last-child{font-family:var(--mono)}
  .hpbar{height:7px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:10px}
  .hpbar i{display:block;height:100%;background:var(--go)}
  .flags{display:flex;gap:6px;margin-top:9px}
  .flags span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--line);color:var(--muted)}
  .flags span.used{color:var(--crit);border-color:var(--red-d)}
  .flags span.ready{color:var(--go);border-color:var(--go)}

  .legend{display:grid;gap:5px;font-size:.78rem}
  .legend .li{display:flex;align-items:center;gap:8px;color:var(--muted)}
  .sw{width:13px;height:13px;border-radius:2px;flex:none;border:1px solid rgba(255,255,255,.15)}

  .log{flex:1;min-height:80px;overflow:auto;font-family:var(--mono);font-size:.72rem;line-height:1.55;display:flex;flex-direction:column-reverse}
  .log .e{padding:2px 0;border-bottom:1px solid var(--hair);color:var(--muted)}
  .log .e.hit{color:var(--ink)} .log .e.kill{color:var(--crit)} .log .e.info{color:var(--accent)}

  .hint{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted);text-align:center;padding:2px}

  .roster{display:flex;flex-direction:column;gap:3px;max-height:232px;overflow:auto}
  .ru{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:3px;cursor:pointer;border:1px solid transparent}
  .ru:hover{background:var(--panel2)}
  .ru.sel{border-color:var(--accent);background:var(--panel2)}
  .ru .rg{width:20px;height:20px;border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.68rem;color:#0e1216;flex:none}
  .ru .rn{flex:1;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ru .rbar{width:44px;height:6px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;flex:none}
  .ru .rbar i{display:block;height:100%}
  .ru .rtag{font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);width:48px;text-align:right;flex:none}
  .ru.dead{opacity:.55;cursor:default}
  .ru.dead .rn{text-decoration:line-through;color:var(--crit)}
  .ru.dead .rtag{color:var(--crit)}
  .ru.pinned{box-shadow:inset 3px 0 0 var(--warn)}
  .pips{display:inline-flex;gap:3px;align-items:center;justify-content:flex-end;width:36px;flex:none}
  .pip{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.14);flex:none}
  .pip.on{background:#74b56b}
  .pip.fire{border-radius:50%}
  .pip.fire.on{background:#e8a13a}
  .turnrow{display:flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
  .turnbtn{font-size:.95rem;line-height:1;padding:2px 9px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;cursor:pointer;color:var(--ink)}
  .turnbtn:hover{border-color:var(--accent);color:var(--accent)}
  .thint{color:var(--muted);font-size:.68rem}
  .help{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,13,16,.9);backdrop-filter:blur(3px);z-index:220;
    padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))}
  .help.show{display:flex}
  .help-inner{max-width:640px;width:100%;max-height:100%;overflow:auto;border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:clamp(18px,3vw,28px)}
  .help-inner h2{margin:0 0 4px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;font-size:1.4rem;color:var(--accent)}
  .help-inner h3{margin:16px 0 4px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .help-inner p{margin:3px 0;font-size:.9rem;line-height:1.5;color:var(--ink)}
  .help-inner b{color:var(--accent)}
  .help-inner .close{margin-top:18px}
  .menu{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:200;overflow:auto;
    padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(rgba(9,12,15,.9),rgba(9,12,15,.96));backdrop-filter:blur(4px)}
  .menu.show{display:flex}
  /* ≡ Menu button pinned to the title screen (same spot as the in-game header button) */
  .menu-corner{position:absolute;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
  .menu-title{font-family:var(--mono);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(1.8rem,5.5vw,3rem);color:var(--ink)}
  .menu-title b{color:var(--accent)}
  .menu-sub{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:10px 0 26px}
  .menu-btns{display:flex;flex-direction:column;gap:9px;width:min(300px,82%)}
  .menu-b{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:3px;cursor:pointer;font-weight:600}
  .menu-b:hover{border-color:var(--accent);color:var(--accent)}
  .menu-b.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .menu-b.sub{font-size:.7rem;padding:8px 14px;color:var(--muted);text-transform:none;letter-spacing:.04em}
  .menu-b.sub:hover{color:var(--accent)}
  .tally{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;border-top:1px solid var(--hair);padding-top:7px}

  /* ===== shared full-screen modal shell (≡ Menu + any future dialog) ===== */
  /* position:fixed so it escapes .canvas-wrap's overflow-clip and the canvas zoom/pan transform */
  .modal{position:fixed;inset:0;z-index:230;display:none;align-items:flex-start;justify-content:center;
    background:rgba(8,11,14,.72);backdrop-filter:blur(4px);
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
  .modal.show{display:flex}
  .modal-panel{width:min(400px,94vw);margin:auto;max-height:100%;overflow:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .modal-head{position:sticky;top:0;display:flex;align-items:center;gap:10px;
    padding:15px 16px 12px;border-bottom:1px solid var(--hair);background:var(--panel)}
  .modal-title{font-family:var(--mono);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;color:var(--accent)}
  .modal-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 6px}
  .modal-x:hover{color:var(--accent);border:none}
  .modal-body{padding:10px 16px calc(16px + env(safe-area-inset-bottom))}

  /* ≡ Menu items */
  .nav-field{display:block;margin:4px 0 2px}
  .nav-field-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .nav-field .msel{width:100%;max-width:none}
  .nav-item{width:100%;display:flex;align-items:center;gap:11px;text-align:left;margin-top:8px;
    padding:12px 13px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--ink);
    font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;cursor:pointer}
  .nav-item:hover{border-color:var(--accent);color:var(--accent)}
  .nav-item .nav-ic{flex:none;width:20px;text-align:center;color:var(--accent);font-size:.95rem}
  .nav-item.danger{margin-top:14px}
  .nav-item.danger:hover{border-color:var(--crit);color:var(--crit)}
  .nav-item.danger:hover .nav-ic{color:var(--crit)}

  /* "Pages" links injected by ui.js into the ⚙ Settings modal — the hub for the aux pages.
     Styled to match settings.js's own palette (it themes #betaPanel independently). */
  .fc-pages{padding:14px 18px 16px;border-top:1px solid #232c35;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .fc-pages-h{font-size:10px;letter-spacing:.14em;color:#5f6f7c;margin-bottom:8px}
  .fc-page-link{display:flex;align-items:center;gap:9px;padding:10px 11px;margin-top:7px;
    border:1px solid #2b3540;border-radius:6px;background:#1e262e;
    color:#d7dee5;text-decoration:none;font-size:12px;letter-spacing:.03em}
  .fc-page-link:first-of-type{margin-top:0}
  .fc-page-link::before{content:"↗";color:#e8a13a;font-size:12px;flex:none}
  .fc-page-link:hover{border-color:#e8a13a;color:#e8a13a}

  /* mobile-only controls — hidden on desktop, shown in the ≤820 media query */
  .panel-toggle,.panel-scrim,.drawer-grip{display:none}

  @media (max-width:820px){
    /* board fills the screen; the side panel becomes a bottom-sheet drawer so it never steals board space */
    header.bar{gap:8px;
      padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
    /* keep the header a single un-wrapping row: ≡ Menu · ▤ · (mission) · turn pill · End Turn */
    .mission{display:none}
    #feedbackBtn .navbtn-lbl{display:none}   /* glyph-only Feedback button on narrow screens */
    .modal-panel{width:min(400px,96vw)}
    main{display:flex;flex-direction:column;grid-template-columns:none;gap:8px;padding:8px;min-height:0}
    .stage{flex:1;min-height:0;gap:6px}
    .canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
    /* fit the whole map into the viewport box (largest that fits, preserving aspect); pinch-zoom goes beyond */
    canvas{width:auto;height:auto;max-width:100%;max-height:100%}
    .hint{font-size:.62rem;line-height:1.35;padding:0 4px;max-height:3.6em;overflow:hidden}

    aside{
      position:fixed;left:0;right:0;bottom:0;z-index:30;
      flex-direction:column;flex-wrap:nowrap;gap:10px;
      max-height:76dvh;overflow:auto;-webkit-overflow-scrolling:touch;
      background:var(--panel);border-top:1px solid var(--line);border-radius:14px 14px 0 0;
      padding:0 12px calc(14px + env(safe-area-inset-bottom));
      transform:translateY(calc(100% + 60px));transition:transform .25s ease;
      box-shadow:0 -12px 34px rgba(0,0,0,.55);
    }
    body.panel-open aside{transform:translateY(0)}
    aside .card{flex:none;min-width:0}
    .roster{max-height:none}
    .log{max-height:180px}

    .drawer-grip{
      display:flex;align-items:center;justify-content:center;gap:8px;
      position:sticky;top:0;z-index:1;
      background:var(--panel);border:none;border-bottom:1px solid var(--hair);
      width:100%;min-height:44px;margin:0 0 2px;padding:10px 0 8px;
      color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
    }
    .drawer-grip span{width:40px;height:5px;border-radius:3px;background:var(--line);display:block;position:absolute;top:6px;left:50%;transform:translateX(-50%)}

    .panel-scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.4)}
    body.panel-open .panel-scrim{display:block}

    .panel-toggle{
      display:flex;align-items:center;justify-content:center;
      position:fixed;z-index:31;
      right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));
      min-height:48px;padding:0 18px;border:none;border-radius:26px;
      background:var(--accent);color:var(--accent-ink);font-weight:700;letter-spacing:.06em;
      box-shadow:0 6px 20px rgba(0,0,0,.5);
    }
    body.panel-open .panel-toggle{display:none}
  }

  /* finger-sized controls on any touch device (keeps mouse layout untouched) */
  @media (pointer:coarse){
    button{min-height:44px;padding:10px 14px}
    .turnbtn{min-width:48px;min-height:44px;font-size:1.15rem;padding:6px 12px}
    .owbtn{min-height:44px;padding:10px 12px}
    .turnrow{gap:9px;flex-wrap:wrap}
    .ru{padding:8px 6px}
    .menu-b{min-height:46px}
    .msel{min-height:40px}
    .nav-item{min-height:48px}
  }

  /* very narrow portrait phones: drop the brand too so ≡ Menu · pill · End Turn never crowds */
  @media (max-width:560px){
    .brand{display:none}
  }