/* Plato Pod operator console.
     The arena is the subject; the chrome is a map room's: a command bar
     above, a rail of sheets on the left, a strip of units on the right.
     Flat: solid fills, hairline rules, no gradients, shadows or blur. One
     accent, one warm neutral ramp, the teams' two colours, a 4px scale. */
  :root {
    --bg:        #101314;
    --panel:     #15191b;
    --raised:    #1c2225;
    --line:      #2a3033;
    --line-soft: #222729;

    --text:      #e4e1d6;
    --text-dim:  #a6a398;
    --text-faint:#7c7a70;

    --accent:    #e0a526;
    --accent-dim:#3a2c0e;
    --accent-ink:#f3d487;
    --blue:      #4f8fd6;
    --blue-dim:  #13284a;
    --blue-ink:  #a9cbf2;
    --red:       #d35f4c;
    --red-dim:   #3a1a17;
    --red-ink:   #f0b4aa;
    --good:      #3f9a5a;
    --good-dim:  #14351f;
    --warn:      #e0a526;
    --warn-dim:  #3a2c0e;
    --bad:       #d35f4c;
    --bad-dim:   #3a1a17;

    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --r:         4px;
    --rail:      64px;
    --sheet:     300px;
    --units:     300px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    background: var(--bg); color: var(--text); overflow: hidden;
    font-family: var(--sans); font-size: 14px; line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  button { font: inherit; }
  h1, h2, h3 { font-weight: 600; }

  #app { display: flex; flex-direction: column; height: 100vh; }
  #body { position: relative; display: flex; flex: 1; min-height: 0; }

  /* ── Command bar ─────────────────────────────────────── */
  #statusbar {
    flex: none; height: 52px; min-width: 0;
    display: flex; align-items: center; gap: 12px; padding: 0 14px;
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  #brand { display: flex; align-items: center; gap: 8px; color: var(--accent); }
  #brand h1 {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  }
  #brand #build { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
  #role-chip {
    flex: none; padding: 5px 10px; border-radius: var(--r); cursor: pointer;
    background: var(--raised); color: var(--text); border: 1px solid var(--line);
    font-weight: 600; white-space: nowrap;
  }
  #role-chip.team  { background: var(--accent-dim); color: var(--accent-ink); border-color: #6b5220; }
  #role-chip.watch { background: var(--accent-dim); color: var(--accent-ink); border-color: #6b5220; }
  #role-chip.infil { background: var(--blue-dim);   color: var(--blue-ink);   border-color: #2b4f80; }
  #role-chip.out   { background: var(--raised);     color: var(--text-dim);   border-color: var(--line); }

  #sb-scenario {
    display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
    margin: 0 auto; padding: 4px 12px; height: 36px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  }
  #sb-name { font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; font-size: 12px; }
  #sb-phase {
    font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 3px; white-space: nowrap;
    background: var(--raised); color: var(--text-faint);
  }
  #sb-phase.running  { background: var(--good-dim);   color: #6fcf8e; }
  #sb-phase.placing  { background: var(--warn-dim);   color: var(--accent-ink); }
  #sb-phase.armed    { background: var(--raised);     color: var(--text-dim); }
  #sb-phase.complete { background: var(--good-dim);   color: #6fcf8e; }
  #sb-phase.error    { background: var(--bad-dim);    color: var(--red-ink); }
  #sb-summary {
    color: var(--text-dim); flex: 1; min-width: 0; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #sb-progress {
    width: 120px; height: 3px; border-radius: 2px;
    background: var(--raised); overflow: hidden; display: none; flex: none;
  }
  #sb-progress.visible { display: block; }
  #sb-progress > i {
    display: block; height: 100%; width: 0%; background: var(--accent);
    transition: width .3s linear;
  }
  #sb-score { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
  #sb-score b { color: var(--text); margin-left: 8px; }
  #best { font-family: var(--mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }
  #clock {
    font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600;
    color: var(--text-dim); white-space: nowrap; min-width: 64px; text-align: right;
  }
  #clock.running  { color: var(--accent); }
  #clock.finished { color: var(--good); }

  #sb-readouts { display: flex; align-items: center; gap: 6px; flex: none; }
  .readout {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
    border-radius: var(--r); background: var(--raised);
    font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
  .dot.on  { background: var(--good); }
  .dot.off { background: var(--bad); }
  #camera-chip {
    display: flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px 9px;
    border: 1px solid var(--line); border-radius: var(--r);
    color: var(--text-dim); cursor: pointer; font-size: 12px;
  }
  #camera-chip input { accent-color: var(--accent); }
  #bigscreen { flex: none; padding: 5px 10px; border-radius: var(--r); cursor: pointer;
               background: transparent; color: var(--text-dim); border: 1px solid var(--line); }
  #bigscreen:hover { color: var(--text); }
  #bs-run { display: none; flex: none; padding: 5px 14px; border-radius: var(--r); cursor: pointer;
            font-weight: 600; color: #0b0d0e; background: var(--good); border: 1px solid var(--good); }
  #bs-run.stop { background: var(--bad); border-color: var(--bad); color: #fff; }

  /* ── Rail ────────────────────────────────────────────── */
  #rail {
    flex: none; width: var(--rail); display: flex; flex-direction: column; gap: 2px;
    padding: 8px 6px; background: var(--panel); border-right: 1px solid var(--line); z-index: 6;
  }
  .rail-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 0; border: 0; border-radius: var(--r); cursor: pointer;
    background: transparent; color: var(--text-dim);
    font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    position: relative;
  }
  .rail-btn:hover { color: var(--text); background: var(--raised); }
  .rail-btn[aria-pressed="true"] { color: var(--accent); background: var(--raised); }
  .rail-btn.last { margin-top: auto; }
  /* The step to do now carries a mark, so the rail says where the session is. */
  .rail-btn.now::after {
    content: ""; position: absolute; right: 8px; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }

  /* ── Sheets ──────────────────────────────────────────── */
  /* The open sheet pushes the arena over rather than covering it: nothing
     on the map is ever under a panel. */
  #sidebar {
    flex: none; width: var(--sheet); z-index: 5;
    background: var(--panel); border-right: 1px solid var(--line);
    overflow-y: auto; padding-bottom: 12px;
  }
  #sidebar::-webkit-scrollbar { width: 8px; }
  #sidebar::-webkit-scrollbar-thumb { background: var(--line); }
  #sidebar .sheet { display: none; }
  #sidebar .sheet.open { display: block; }
  .section { padding: 16px; border-bottom: 1px solid var(--line); }
  .section > h2 {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px;
  }
  .step > h2 { display: flex; align-items: center; gap: 8px; }
  .step > h2 i {
    font-style: normal; width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--raised); color: var(--text-dim); font-size: 10px; letter-spacing: 0;
  }
  .step.now > h2 { color: var(--text); }
  .step.now > h2 i { background: var(--accent); color: #0b0d0e; }
  h3.sub {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-faint); margin: 16px 0 6px;
  }

  /* The chosen activity's own settings, under its entry */
  #activity-settings { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
  .settings h3.sub:first-child { margin-top: 6px; }
  .settings input[type=radio], .settings input[type=checkbox] { accent-color: var(--accent); }
  /* Who plays: a chip per pod, pressed when it is in; or a chooser per role */
  .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .chips button.act { padding: 2px 8px; }
  .roles label.twinrow { margin-top: 2px; }
  .chase-pair { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
  .chase-pair select { flex: 1; min-width: 0; }
  .chase-pair button.act { padding: 2px 7px; }
  .chips button.act[data-side="runs"] { border-color: var(--blue, #3b82f6); }
  .chips button.act[data-side="chases"] { border-color: var(--red-ink, #ef4444); }
  #chase-scores div { line-height: 1.5; }
  #chase-scores small { color: var(--text-dim); margin-right: 2px; }
  .settings[aria-disabled="true"] { opacity: .55; pointer-events: none; }
  /* The debrief: the result as a tag, the headline, then the marks */
  .debrief { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
             background: var(--raised); }
  .debrief .result { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .debrief .result span:first-child { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
             text-transform: uppercase; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); }
  .debrief[data-result="done"] .result span:first-child { color: var(--good); border-color: var(--good); }
  .debrief[data-result="failed"] .result span:first-child { color: var(--red-ink); border-color: var(--bad); }
  .debrief[data-result="stopped"] .result span:first-child { color: var(--text-dim); }
  .debrief .result span:last-child { font-weight: 500; }
  .debrief .row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
  .debrief .row span:first-child { color: var(--text-dim); }
  .debrief .row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* Scenario chooser */
  .scenario {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--raised); border: 1px solid var(--line);
    border-radius: var(--r); padding: 8px 11px; margin-bottom: 4px;
    color: var(--text-dim);
  }
  .scenario:hover { color: var(--text); border-color: #3a4246; }
  .scenario[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
  .scenario .t { font-weight: 600; font-size: 13px; display: flex; gap: 6px; }
  .scenario .t .live { display: none; }
  .scenario .b { font-size: 12px; margin-top: 1px; color: var(--text-faint); }
  .scenario[aria-pressed="true"] .b { color: var(--text-dim); }

  .btnrow { display: flex; gap: 4px; margin-top: 4px; }
  .btnrow:first-of-type { margin-top: 10px; }
  button.act {
    flex: 1; padding: 8px 10px; border-radius: var(--r); cursor: pointer;
    background: var(--raised); color: var(--text); border: 1px solid var(--line);
    font-weight: 500; letter-spacing: .01em;
  }
  button.act:hover:not(:disabled) { border-color: #3a4246; }
  button.act:disabled { opacity: .35; cursor: default; }
  button.act.go   { background: var(--good); border-color: var(--good); color: #0b0d0e; font-weight: 600; }
  button.act.go:hover:not(:disabled) { background: #4bb06a; border-color: #4bb06a; }
  button.act.stop { background: transparent; border-color: var(--bad); color: var(--red-ink); font-weight: 600; }
  button.act.stop:hover:not(:disabled) { background: var(--bad-dim); }
  button.act[aria-pressed="true"] {
    background: var(--accent); border-color: var(--accent); color: #0b0d0e;
  }

  /* Layers */
  #controls label {
    display: flex; align-items: center; gap: 8px; padding: 3px 0;
    cursor: pointer; user-select: none; color: var(--text-dim);
  }
  #controls label:hover { color: var(--text); }
  #controls input[type=checkbox] {
    accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer;
  }
  #clear-path {
    margin-top: 10px; width: 100%; padding: 8px 0; border-radius: var(--r);
    background: var(--raised); color: var(--text);
    border: 1px solid var(--line); cursor: pointer; font-weight: 500;
  }
  #clear-path:hover:not(:disabled) { border-color: #3a4246; }
  #clear-path:disabled { opacity: .35; cursor: default; }

  /* Pods, the links list in the Pods sheet */
  .pod {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; border-radius: var(--r); background: var(--raised);
    margin-bottom: 4px; border-left: 3px solid var(--line);
  }
  .pod .chip { display: none; }
  .pod.blue { border-left-color: var(--blue); }
  .pod.red  { border-left-color: var(--red); }
  .pod .who { font-weight: 600; }
  .pod .state {
    margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint);
    text-align: right; white-space: nowrap; line-height: 1.4;
  }
  .pod .state b { display: block; font-weight: 600; }
  .pod .state b.up   { color: var(--good); }
  .pod .state b.down { color: var(--bad); }
  .pod .state b.wait { color: var(--warn); }
  #pods .none, #unit-list .none { color: var(--text-faint); font-size: 13px; }

  #diag {
    font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
  }
  #diag b { color: var(--text-dim); font-weight: 600; }

  /* ── Unit strip ──────────────────────────────────────── */
  #units {
    flex: none; width: var(--units); display: flex; flex-direction: column; gap: 8px;
    padding: 12px; background: var(--panel); border-left: 1px solid var(--line);
    overflow-y: auto;
  }
  .strip-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
  .strip-head:first-child { margin-top: 0; }
  .strip-head h2 {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .strip-head span { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
  .unit {
    display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--raised); cursor: pointer;
  }
  .unit:hover { border-color: #3a4246; }
  .unit.selected { border-color: var(--accent); }
  .unit .bar { flex: none; width: 4px; border-radius: 2px; background: var(--text-faint); }
  .unit .facts .power.warn { color: var(--accent-ink); }
  .unit .facts .power.low { color: var(--red-ink); font-weight: 600; }
  .unit.blue .bar { background: var(--blue); }
  .unit.red .bar  { background: var(--red); }
  .unit.green .bar { background: var(--good); }
  .unit .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .unit .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .unit .who { font-weight: 600; white-space: nowrap; }
  .unit .who span { color: var(--text-dim); font-weight: 400; }
  .unit .link { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .unit .link.up { color: var(--good); }
  .unit .link.down { color: var(--bad); }
  .unit .link.wait { color: var(--warn); }
  .unit .link.virtual { color: var(--text-faint); }
  .unit .facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    font-family: var(--mono); font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  }
  .unit .facts span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .unit .health { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .unit .health i { display: block; height: 100%; border-radius: 2px; background: var(--good); }
  .unit .health i.warn { background: var(--warn); }
  .unit .health i.bad { background: var(--bad); }
  #scenario-card {
    padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised);
    display: flex; flex-direction: column; gap: 6px; font-size: 13px;
  }
  #scenario-card .row { display: flex; justify-content: space-between; gap: 8px; }
  #scenario-card .row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
  #scenario-card .row span:first-child { color: var(--text-dim); }
  #scenario-card .summary { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
  #scenario-card .prog { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
  #scenario-card .prog i { display: block; height: 100%; background: var(--accent); }
  #scenario-card .none { color: var(--text-faint); font-size: 13px; }

  /* ── Stage ───────────────────────────────────────────── */
  #stage { position: relative; display: flex; flex-direction: column; min-width: 0; flex: 1; }
  #view3d-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #06090d; z-index: 4; }
  #view3d-frame[hidden] { display: none; }
  #container { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0b0d0e; }
  #camera-feed {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; display: none;
  }
  #camera-feed.visible { display: block; }
  #overlay {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* Without touch-action the browser claims a drag on the canvas for
       panning or zooming and pointermove never arrives: a tap still becomes
       a click, so selecting a pod works while drawing silently does not. */
    touch-action: none;
    user-select: none; -webkit-user-select: none;
  }
  #overlay.interactive { pointer-events: auto; cursor: crosshair; }

  /* Under the arena: the work this laptop does now. */
  #dock {
    flex: none; max-height: 42vh; overflow-y: auto; background: var(--panel);
    border-top: 1px solid var(--line); padding: 12px 16px;
  }
  #game-panel, #strategy-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px;
  }
  #dock { font-size: 15px; }
  #dock #game-out, #dock #game-all-orders, #dock #strategy-out, #dock #game-mates { font-size: 14px; }
  #dock .game-help { font-size: 13px; }
  #game-text, #strategy-text { font-size: 15px !important; }
  #game-you { font-size: 15px !important; }
  /* What this team is this round, big enough to notice from the back row. */
  #game-role { font-size: 20px; font-weight: 700; letter-spacing: .02em; padding: 8px 12px;
               border-radius: var(--r); margin-bottom: 6px; }
  #game-role.watch { background: var(--accent-dim); color: var(--accent-ink); border: 1px solid #6b5220; }
  #game-role.infil { background: var(--blue-dim); color: var(--blue-ink); border: 1px solid #2b4f80; }
  #game-role.out   { background: var(--raised); color: var(--text-dim); border: 1px solid var(--line); }
  .dock-note { font-size: 15px; color: var(--text-dim); padding: 6px 0; }
  #game-all-orders { display: grid; gap: 12px;
                     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  #game-all-orders > div { background: var(--raised); border-radius: var(--r); padding: 8px 10px; }
  #game-feedback { margin-top: 12px; padding: 10px 12px; background: var(--raised);
                   border-left: 3px solid var(--accent); border-radius: var(--r); }
  #game-feedback h3, #game-all-orders .fb h3 { font-size: 12px; color: var(--accent-ink); margin: 0 0 4px;
                     text-transform: uppercase; letter-spacing: .05em; }
  #game-feedback ul, #game-all-orders .fb ul { margin: 0 0 8px 18px; padding: 0; }
  #game-feedback li, #game-all-orders .fb li { margin: 2px 0; }

  #sidebar input[type=number], #sidebar input[type=text], #arena-actions input {
    background: var(--raised); color: var(--text); border: 1px solid var(--line);
    border-radius: var(--r); padding: 3px 6px; font: inherit;
  }

  /* Asked once per laptop. */
  #role-picker {
    position: fixed; inset: 0; background: rgba(5, 7, 10, .72); z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  #role-picker .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    padding: 20px; width: min(440px, 100%);
  }
  #role-picker h2 { font-size: 16px; margin-bottom: 14px; }
  #role-picker #role-row { flex-wrap: wrap; }
  #role-picker #role-row button { flex: 1 1 40%; padding: 14px; font-size: 15px; }
  #role-close { margin-top: 14px; width: 100%; }

  /* Big screen: the arena, the score and every team's orders, nothing to press. */
  body.bigscreen #bs-run { display: inline-block; }
  body.bigscreen #sidebar, body.bigscreen #rail, body.bigscreen #units { display: none !important; }
  body.bigscreen #statusbar { height: 64px; font-size: 18px; }
  body.bigscreen #clock { font-size: 30px; }
  body.bigscreen #game-you, body.bigscreen #game-orders, body.bigscreen #game-pod-row,
  body.bigscreen #game-sensors, body.bigscreen #game-mates, body.bigscreen #strategy-panel .btnrow,
  body.bigscreen #strategy-text { display: none !important; }
  body.bigscreen #dock { font-size: 15px; }

  /* Floating arena notices. Flat panels, no blur. */
  #detail, #drawbanner, #toast {
    position: absolute; left: 50%; transform: translateX(-50%);
    border-radius: var(--r); white-space: nowrap; pointer-events: none;
    z-index: 10;
  }
  #detail {
    bottom: 14px; background: var(--panel); border: 1px solid var(--line);
    padding: 8px 14px; display: none; color: var(--text-dim); font-family: var(--mono); font-size: 12px;
  }
  #detail.visible { display: block; }
  #drawbanner {
    top: 14px; background: var(--accent-dim); border: 1px solid #6b5220;
    color: var(--accent-ink); padding: 7px 14px; display: none; z-index: 15;
  }
  #drawbanner.visible { display: block; }
  #toast {
    top: 14px; background: var(--raised); border: 1px solid var(--line);
    padding: 8px 14px; z-index: 20; opacity: 0;
    transition: opacity .2s linear;
  }
  #toast.visible { opacity: 1; }
  #toast.bad { background: var(--bad-dim); border-color: #6b2a28; color: var(--red-ink); }

  /* Plain English: the student's words, then the plan they became */
  #strategy-text {
    width: 100%; resize: vertical; min-height: 84px; padding: 8px 10px;
    background: var(--raised); color: var(--text); border: 1px solid var(--line);
    border-radius: var(--r); font: inherit; line-height: 1.45;
  }
  #strategy-text:focus { outline: none; border-color: var(--accent); }
  #strategy-out { margin-top: 10px; font-size: 12px; line-height: 1.5; }
  #strategy-out .q {
    background: var(--panel); border-left: 2px solid var(--accent);
    padding: 7px 9px; border-radius: var(--r); color: var(--text);
  }
  #strategy-out .plan { white-space: pre-wrap; color: var(--text); margin: 0;
                        font: inherit; }
  #strategy-out .bad { color: var(--red-ink); }
  #strategy-out .by { color: var(--text-faint); font-size: 11px; margin-top: 6px; }
  #strategy-events { margin-top: 8px; font-size: 11px; color: var(--text-dim);
                     list-style: none; padding: 0; }
  #strategy-events li { padding: 2px 0; border-top: 1px solid var(--line-soft); }
  #twin { margin-top: 8px; }
  .twinrow { display: flex; align-items: center; justify-content: space-between; gap: 8px;
             font-size: 12px; color: var(--text-dim); margin-top: 6px; }
  .twinrow select { background: var(--raised); color: var(--text);
                    border: 1px solid var(--line); border-radius: var(--r);
                    padding: 4px 6px; font: inherit; }
  #arena-state { font-size: 12px; color: var(--text-dim); line-height: 1.45; margin-bottom: 8px; }
  #arena-state b { color: var(--text); font-weight: 600; }
  #arena-state .bad, #arena-state b.bad { color: var(--red-ink); }

  /* Who is at this laptop. A team's laptop sees its game and nothing that
     changes the arena for everyone; those are the teacher's. */
  #role-row { display: flex; gap: 6px; }
  #role-row button { flex: 1; }
  #role-note { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
  body.locked .teacher-only { display: none !important; }
  /* Rows laid out with flex would otherwise ignore the hidden attribute. */
  [hidden] { display: none !important; }

  /* Get through unseen */
  #game-round { font-size: 13px; color: var(--text); line-height: 1.45; }
  #game-round .w { color: var(--accent-ink); font-weight: 600; }
  #game-round .i { color: var(--blue-ink); font-weight: 600; }
  #game-score { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
  #game-score td { padding: 3px 6px; border-top: 1px solid var(--line-soft); }
  #game-score td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
  #game-score tr.me td { color: var(--text); font-weight: 600; }
  #game-score td { color: var(--text-dim); }
  #game-you { margin-top: 10px; font-size: 13px; line-height: 1.45; padding: 8px 10px;
              background: var(--raised); border-left: 2px solid var(--accent); }
  #game-you.watch { border-left-color: var(--accent); }
  #game-you.out { border-left-color: var(--text-faint); color: var(--text-dim); }
  #game-sensor-list, #game-events { list-style: none; padding: 0; margin: 8px 0 0;
                                    font-size: 12px; color: var(--text-dim); }
  #game-sensor-list li { display: flex; justify-content: space-between; align-items: center;
                         padding: 3px 0; border-top: 1px solid var(--line-soft); }
  #game-sensor-list button { background: none; border: none; color: var(--text-faint);
                             cursor: pointer; font-size: 14px; }
  #game-events li { padding: 2px 0; border-top: 1px solid var(--line-soft); }
  #game-text { width: 100%; box-sizing: border-box; margin-top: 10px; background: var(--raised);
               color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
               padding: 8px; font: inherit; font-size: 13px; resize: vertical; }
  #game-text:focus { outline: none; border-color: var(--accent); }
  #game-out, #game-all-orders { margin-top: 10px; font-size: 12px; line-height: 1.5; }
  #game-out .plan, #game-all-orders .plan { white-space: pre-wrap; margin: 0; color: var(--text); }
  #game-out .q { background: var(--panel); border-left: 2px solid var(--accent);
                 padding: 6px 8px; }
  #game-out .bad { color: var(--red-ink); }
  #game-out .by { color: var(--text-faint); font-size: 11px; margin-top: 6px; }
  #game-mates { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
  #game-mates pre { white-space: pre-wrap; margin: 2px 0 6px; }
  #game-setup-form summary { cursor: pointer; font-size: 12px; color: var(--text-dim);
                             margin-bottom: 4px; }
  #team-wait { margin-top: 8px; }
  #game-all-orders h3 { font-size: 11px; color: var(--text-faint); margin: 8px 0 2px;
                        font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .game-help { font-size: 11px; color: var(--text-faint); margin-top: 6px; line-height: 1.45; }
  /* The Mission sheet: a palette of kinds, the elements as rows of fields. */
  .mpalette { display: flex; gap: 6px; margin: 8px 0; }
  .mpalette button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); }
  .mfield { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }
  .mfield span { min-width: 72px; color: var(--text-faint); }
  .mfield input, .mfield select { flex: 1; min-width: 0; font-size: 12px; }
  .mnote { font-size: 11px; color: var(--text-faint); }
  .mproblems { font-size: 11px; color: var(--red-ink); margin: 4px 0; }
  #mission-list h3 { font-size: 12px; margin: 10px 0 4px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .melement { border: 1px solid var(--line, #333); border-radius: 6px; padding: 6px; margin: 4px 0; }
  .melement:hover { border-color: rgba(245,158,11,0.6); }
  .melement.selected { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b inset; }
  .mhead { display: flex; align-items: center; gap: 6px; }
  .mname { flex: 1; min-width: 0; font-weight: 600; }
  .mremove, .mcopy { flex: none; }
  .mstands { margin-top: 4px; font-size: 12px; }
  .mproblem { font-size: 11px; color: var(--red-ink); margin: 2px 0; }
  .mfields { display: grid; grid-template-columns: 1fr; margin-top: 4px; }   /* one field a row: two clip at 300px */
  .mchooser { display: flex; gap: 6px; margin-top: 10px; }
  .mchooser select { flex: 1; min-width: 0; }
  .mchooser a { font-size: 12px; align-self: center; }
  .join-row { display: flex; gap: 6px; width: 100%; margin-bottom: 8px; }
  #class h3 { font-size: 12px; margin: 6px 0 4px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .who-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
  .who-row i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
  .who-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .who-pod { color: var(--text-faint); font-size: 12px; }
  .who-clear { flex: none; }
  .who-color { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0006; flex: none; padding: 0; cursor: pointer; }
  .who-palette { display: flex; gap: 4px; flex-wrap: wrap; }
  .who-swatch { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 1px solid #0006; }
  .join-row input { flex: 1; min-width: 0; font-size: 14px; padding: 6px 8px; }

  /* Narrow: the unit strip goes, the sheet takes the width it has. */
  @media (max-width: 1100px) {
    #units { display: none; }
    #sb-readouts .readout { display: none; }
  }
  @media (max-width: 820px) {
    #game-panel, #strategy-panel { grid-template-columns: 1fr; }
    #sb-summary, #best, #sb-phase { display: none; }
    #sidebar { width: calc(100% - var(--rail)); }
  }