:root{
    --paper:#e7ebe4; --rule:#b9c9d2; --ink:#182633; --ink-soft:#5d7280;
    --you:#2f6fed; --danger:#e0413f; --panel:rgba(255,255,255,.86);
    --shadow:2px 3px 0 rgba(24,38,51,.13);
    --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
    --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
    --mini:clamp(66px,19vw,104px);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--paper);
    color:var(--ink);font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-user-select:none;user-select:none;touch-action:none}
  #stage{position:absolute;inset:0}
  #stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

  .hud{position:absolute;inset:0;pointer-events:none;z-index:2}
  .hud.hide,.tools.hide{display:none}
  .tl{position:absolute;top:calc(var(--sat) + 10px);left:calc(var(--sal) + 10px);width:min(30vw,150px)}
  .pct{font-size:clamp(25px,6.6vw,40px);font-weight:850;letter-spacing:-.045em;line-height:.85;
    font-variant-numeric:tabular-nums;color:var(--you);text-shadow:0 1px 0 rgba(255,255,255,.9)}
  .pct span{font-size:.4em;font-weight:800;margin-left:1px}
  .bar{margin-top:6px;height:6px;background:rgba(255,255,255,.75);border:1.5px solid var(--ink);
    border-radius:99px;overflow:hidden}
  .bar i{display:block;height:100%;width:0;background:var(--you);transition:width .25s ease}
  .sub{margin-top:5px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);text-shadow:0 1px 0 rgba(255,255,255,.8)}
  .sub.warn{color:var(--danger)}
  .sub.safe{color:#1f8a4c}

  .board{position:absolute;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 10px);width:min(32vw,144px);
    background:var(--panel);border:1.5px solid var(--ink);border-radius:4px;box-shadow:var(--shadow);
    overflow:hidden}
  .board h2{margin:0;padding:5px 8px 4px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);border-bottom:1px solid var(--rule)}
  .row{display:flex;align-items:center;gap:6px;padding:3.5px 8px;font-size:11.5px;font-weight:650;line-height:1.2}
  .row+.row{border-top:1px dotted var(--rule)}
  .row i{width:9px;height:9px;border-radius:2px;flex:none;border:1.5px solid rgba(24,38,51,.4)}
  .row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
  .row u{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:800}
  .row.me{background:rgba(47,111,237,.12)}
  .row.out{opacity:.4}

  .top{position:absolute;top:calc(var(--sat) + 8px);left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:6px}
  .mini{width:var(--mini);aspect-ratio:1;background:var(--panel);border:1.5px solid var(--ink);
    border-radius:4px;box-shadow:var(--shadow);padding:3px}
  .mini canvas{display:block;width:100%;height:100%;image-rendering:pixelated;border-radius:2px}
  .feed{position:absolute;top:calc(var(--sat) + var(--mini) + 16px);left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:40vw}
  .fitem{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:#fff;
    border:1.5px solid var(--ink);border-radius:3px;padding:3px 8px;box-shadow:var(--shadow);
    animation:pop .22s ease-out;white-space:nowrap}
  @keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .tools{position:absolute;right:calc(var(--sar) + 10px);bottom:calc(var(--sab) + 92px);
    display:flex;flex-direction:column;gap:6px;pointer-events:auto}
  .tools button{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:13px;
    font-weight:850;background:var(--panel);color:var(--ink);border:1.5px solid var(--ink);
    border-radius:4px;box-shadow:var(--shadow);cursor:pointer;line-height:1}
  html.touch .tools{bottom:calc(var(--sab) + 172px)}
  .tools button.on{background:var(--ink);color:#fff}
  .tools button.press,.tools button:active{transform:translate(2px,3px);box-shadow:none}
  .tools button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}

  .jump{position:absolute;right:calc(var(--sar) + 98px);bottom:calc(var(--sab) + 16px);
    width:60px;height:60px;border-radius:50%;pointer-events:auto;display:grid;place-items:center;
    font:850 11px/1 inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
    background:rgba(255,255,255,.72);border:2px solid var(--ink);box-shadow:var(--shadow);cursor:pointer}
  .jump.press{transform:translate(2px,3px);box-shadow:none;background:var(--ink);color:#fff}
  .jump.hide{display:none}

  .cross{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;z-index:3;
    pointer-events:none;opacity:.5}
  .cross:before,.cross:after{content:"";position:absolute;background:var(--ink)}
  .cross:before{left:50%;top:0;width:1.5px;height:100%;margin-left:-.75px}
  .cross:after{top:50%;left:0;height:1.5px;width:100%;margin-top:-.75px}
  .cross.hide{display:none}

  .stick{position:absolute;width:126px;height:126px;margin:-63px 0 0 -63px;border-radius:50%;
    border:2px solid rgba(24,38,51,.32);background:rgba(255,255,255,.26);pointer-events:none;
    opacity:0;transition:opacity .12s ease;z-index:3}
  .stick.on{opacity:1}
  .stick b{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;
    background:var(--you);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(24,38,51,.3)}
  .stick s{position:absolute;inset:12px;border-radius:50%;border:1px dashed rgba(24,38,51,.22)}

  .veil{position:absolute;inset:0;display:grid;place-items:center;padding:18px;z-index:6;
    background:rgba(231,235,228,.92);pointer-events:auto;overflow:auto;-webkit-overflow-scrolling:touch}
  .veil.hide{display:none}
  .card{width:min(470px,100%);background:#fff;border:2px solid var(--ink);border-radius:5px;
    box-shadow:6px 8px 0 rgba(24,38,51,.16);padding:22px 20px 18px;margin:auto}
  .eyebrow{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);font-weight:850}
  h1{margin:.26em 0 .06em;font-size:clamp(36px,9.5vw,54px);line-height:.82;letter-spacing:-.05em;
    font-weight:850;font-style:italic}
  h1 em{color:var(--you);text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:6px;
    text-decoration-color:rgba(47,111,237,.3)}
  .lede{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
  .rules{margin:14px 0 0;padding:11px 0 0;border-top:1px dotted var(--rule);display:grid;gap:7px;
    font-size:12.5px;color:var(--ink-soft)}
  .rules b{color:var(--ink);font-weight:750}
  kbd{display:inline-block;min-width:19px;text-align:center;padding:1px 5px;margin-right:1px;
    background:var(--paper);border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;
    font:inherit;font-size:11px;font-weight:800;color:var(--ink)}
  .cta{margin-top:16px;width:100%;padding:15px;font:inherit;font-size:15px;font-weight:850;letter-spacing:.06em;
    text-transform:uppercase;color:#fff;background:var(--ink);border:2px solid var(--ink);border-radius:4px;
    cursor:pointer;box-shadow:3px 4px 0 rgba(24,38,51,.22)}
  .cta:active{transform:translate(3px,4px);box-shadow:none}
  .cta[disabled]{opacity:.5}
  .cta.ghost{color:var(--ink);background:#fff;box-shadow:3px 4px 0 rgba(24,38,51,.14)}
  .cta.sm{padding:10px;font-size:12px;margin-top:8px}
  .btnrow{display:flex;gap:8px}
  .btnrow .cta{flex:1}
  .scoreline{display:flex;gap:18px;margin-top:14px;padding-top:12px;border-top:1px dotted var(--rule)}
  .scoreline div{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:850}
  .scoreline b{display:block;margin-top:3px;font-size:23px;letter-spacing:-.03em;color:var(--ink);
    font-variant-numeric:tabular-nums;font-style:normal}

  /* ---- shared form bits, drawn like a survey docket ---- */
  .field{margin-top:14px}
  .field>label{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:850;margin-bottom:6px}
  .field input[type=text]{width:100%;padding:10px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);
    background:var(--paper);border:1.5px solid var(--ink);border-radius:3px}
  .seg{display:flex;gap:6px;flex-wrap:wrap}
  .seg button{flex:1;min-width:64px;padding:9px 6px;font:inherit;font-size:11px;font-weight:850;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--paper);
    border:1.5px solid var(--ink);border-radius:3px;cursor:pointer}
  .seg button.on{background:var(--ink);color:#fff}
  .seg button small{display:block;font-size:9px;font-weight:700;letter-spacing:.04em;opacity:.6;
    text-transform:none;margin-top:2px}

  /* ---- saved maps list, as index cards ---- */
  .maps{margin-top:12px;display:grid;gap:6px;max-height:38vh;overflow:auto}
  .maps .empty{padding:16px;text-align:center;font-size:12.5px;color:var(--ink-soft);
    border:1.5px dashed var(--rule);border-radius:3px}
  .mapit{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--paper);
    border:1.5px solid var(--ink);border-radius:3px;text-align:left}
  .mapit b{flex:1;min-width:0;font-size:13px;font-weight:800;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .mapit em{font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:850}
  .mapit button{padding:6px 9px;font:inherit;font-size:10px;font-weight:850;letter-spacing:.1em;
    text-transform:uppercase;border:1.5px solid var(--ink);border-radius:3px;cursor:pointer;
    background:#fff;color:var(--ink)}
  .mapit button.go{background:var(--ink);color:#fff}
  .mapit button.del{border-color:var(--danger);color:var(--danger)}

  /* =================================================================
     EDITOR — the drafting table. Instrument rail left, specimen
     strip along the bottom, docket across the top.
     ================================================================= */
  .edui{position:absolute;inset:0;pointer-events:none;z-index:4}
  .edui.hide{display:none}

  .eddock{position:absolute;top:calc(var(--sat) + 8px);left:50%;transform:translateX(-50%);
    display:flex;align-items:stretch;gap:0;pointer-events:auto;background:var(--panel);
    border:1.5px solid var(--ink);border-radius:4px;box-shadow:var(--shadow);overflow:hidden;
    max-width:min(94vw,640px)}
  .eddock>*{display:grid;place-items:center;padding:6px 10px;font-size:10px;font-weight:850;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:none;border:0;
    border-right:1px solid var(--rule);cursor:pointer;font-family:inherit;line-height:1.1}
  .eddock>*:last-child{border-right:0}
  .eddock .name{cursor:default;letter-spacing:.02em;text-transform:none;font-size:12px;font-weight:800;
    max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;padding:8px 11px}
  .eddock .name s{display:block;text-decoration:none;font-size:8.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-soft);font-weight:850;margin-top:1px}
  .eddock button:active{background:var(--ink);color:#fff}
  .eddock .go{background:var(--ink);color:#fff}

  .edrail{position:absolute;left:calc(var(--sal) + 8px);top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:5px;pointer-events:auto;max-height:76vh;overflow:auto;
    padding:2px;scrollbar-width:none}
  .edrail::-webkit-scrollbar{display:none}
  .edrail button{width:46px;height:42px;display:grid;place-items:center;gap:1px;padding:3px 2px;
    font:inherit;font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink);background:var(--panel);border:1.5px solid var(--ink);border-radius:4px;
    box-shadow:var(--shadow);cursor:pointer;line-height:1}
  .edrail button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .edrail button.on{background:var(--ink);color:#fff}
  .edrail button:active{transform:translate(2px,3px);box-shadow:none}
  .edrail hr{width:100%;height:0;margin:1px 0;border:0;border-top:1px dotted rgba(24,38,51,.4)}

  /* specimen strip — the signature element: swatches with hand-labelled tags */
  .edstrip{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 8px);pointer-events:auto;
    padding:0 calc(var(--sal) + 8px) 0 calc(var(--sal) + 60px)}
  .edstrip.hide{display:none}
  .edtabs{display:flex;gap:5px;margin-bottom:5px}
  .edtabs button{padding:4px 10px;font:inherit;font-size:9px;font-weight:850;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink);background:var(--panel);border:1.5px solid var(--ink);
    border-radius:3px 3px 0 0;box-shadow:var(--shadow);cursor:pointer}
  .edtabs button.on{background:var(--ink);color:#fff}
  .edscroll{display:flex;gap:5px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
  .edscroll::-webkit-scrollbar{display:none}
  .swatch{flex:none;width:54px;padding:0 0 3px;background:var(--panel);border:1.5px solid var(--ink);
    border-radius:3px;box-shadow:var(--shadow);cursor:pointer;overflow:hidden;text-align:center}
  .swatch i{display:block;height:26px;border-bottom:1.5px solid var(--ink);
    background-image:linear-gradient(rgba(255,255,255,.28),rgba(24,38,51,.16))}
  .swatch b{display:block;padding:3px 2px 0;font-size:8px;font-weight:850;letter-spacing:.02em;
    line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .swatch u{display:block;text-decoration:none;font-size:6.5px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-soft)}
  .swatch.on{outline:2.5px solid var(--you);outline-offset:1.5px}
  .swatch:active{transform:translate(2px,3px);box-shadow:none}
  .swatch.pf i{background:repeating-linear-gradient(45deg,rgba(24,38,51,.1) 0 5px,transparent 5px 10px)}
  .swatch.pf i s{display:grid;place-items:center;height:100%;text-decoration:none;font-size:15px}

  /* readout — brush + coordinates, set like a survey stamp */
  .edread{position:absolute;right:calc(var(--sar) + 8px);top:calc(var(--sat) + 56px);width:112px;
    background:var(--panel);border:1.5px solid var(--ink);border-radius:4px;box-shadow:var(--shadow);
    pointer-events:auto;overflow:hidden;font-variant-numeric:tabular-nums}
  .edread h3{margin:0;padding:4px 8px 3px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);border-bottom:1px solid var(--rule);font-weight:850}
  .edread .l{display:flex;justify-content:space-between;padding:3px 8px;font-size:10.5px;font-weight:750}
  .edread .l+.l{border-top:1px dotted var(--rule)}
  .edread .l u{text-decoration:none;color:var(--ink-soft);font-size:8px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:850;align-self:center}
  .edread .stepper{display:flex;border-top:1px solid var(--rule)}
  .edread .stepper button{flex:1;padding:5px 0;font:inherit;font-size:12px;font-weight:850;color:var(--ink);
    background:none;border:0;border-right:1px solid var(--rule);cursor:pointer}
  .edread .stepper button:last-child{border-right:0}
  .edread .stepper button:active{background:var(--ink);color:#fff}

  .edpads{position:absolute;right:calc(var(--sar) + 12px);bottom:calc(var(--sab) + 92px);
    display:flex;flex-direction:column;gap:6px;pointer-events:auto}
  .edpads.hide{display:none}
  .edpads button{width:52px;height:44px;display:grid;place-items:center;font:inherit;font-size:10px;
    font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--panel);
    border:1.5px solid var(--ink);border-radius:4px;box-shadow:var(--shadow);cursor:pointer}
  .edpads button:active,.edpads button.press{transform:translate(2px,3px);box-shadow:none;
    background:var(--ink);color:#fff}
  .edact{position:absolute;right:calc(var(--sar) + 12px);bottom:calc(var(--sab) + 14px);
    width:68px;height:68px;border-radius:50%;pointer-events:auto;display:grid;place-items:center;
    font:850 10px/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:#fff;
    background:var(--ink);border:2px solid var(--ink);box-shadow:var(--shadow);cursor:pointer}
  .edact:active,.edact.press{transform:translate(2px,3px);box-shadow:none;background:var(--you)}
  .edact.hide{display:none}

  .toast{position:absolute;left:50%;bottom:calc(var(--sab) + 128px);transform:translateX(-50%);
    padding:5px 12px;background:var(--ink);color:#fff;border-radius:3px;font-size:10.5px;font-weight:850;
    letter-spacing:.1em;text-transform:uppercase;pointer-events:none;z-index:7;white-space:nowrap;
    animation:pop .18s ease-out}
  .toast.hide{display:none}

  .count{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
  .count b{font-size:clamp(64px,20vw,140px);font-weight:850;font-style:italic;letter-spacing:-.06em;
    color:var(--ink);text-shadow:0 3px 0 rgba(255,255,255,.85)}
  .count.hide{display:none}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  @media (max-width:520px){
    .eddock>*{padding:6px 7px;font-size:9px;letter-spacing:.06em}
    .eddock .name{max-width:26vw;font-size:11px;padding:7px 8px}
    .edread{width:96px;top:calc(var(--sat) + 52px)}
    .edrail button{width:42px;height:39px}
    .edstrip{padding-left:calc(var(--sal) + 54px)}
  }

/* =====================================================================
   COMBAT HUD — the ink gauge and whatever powers are running
   ===================================================================== */
.gauge{position:absolute;left:calc(var(--sal) + 14px);bottom:calc(var(--sab) + 14px);
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;pointer-events:none}
.gauge .ammo{display:flex;align-items:center;gap:8px;background:var(--paper);
  border:2px solid var(--ink);padding:6px 10px;box-shadow:3px 3px 0 var(--ink)}
.gauge .ammo u{text-decoration:none;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.gauge .ammo span{display:flex;gap:3px}
.gauge .ammo i{display:block;width:6px;height:16px;background:var(--ink);opacity:.16}
.gauge .ammo i.on{opacity:1;background:var(--you)}
.gauge .ammo i.part{opacity:.45;background:var(--you)}
.powers{display:flex;gap:6px;flex-wrap:wrap;max-width:52vw}
.pw{display:flex;align-items:center;gap:6px;background:var(--paper);border:2px solid var(--ink);
  padding:4px 8px;box-shadow:2px 2px 0 var(--ink);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;position:relative;overflow:hidden}
.pw b{font-weight:800}
.pw s{position:absolute;left:0;bottom:0;height:3px;background:var(--you);text-decoration:none}
.pw.low{animation:pwflash .5s steps(2,end) infinite}
@keyframes pwflash{50%{opacity:.45}}

/* The hud is click-through so the ball can be steered underneath it, which
   means every control inside it has to switch pointer events back on. Fire
   and Dash never did, and were dead to the touch on every phone. */
.fire,.dash{position:absolute;pointer-events:auto;border:2px solid var(--ink);background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;user-select:none;
  -webkit-user-select:none;touch-action:none;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800;z-index:6}
.fire{right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 14px);width:74px;height:74px;border-radius:50%}
.dash{right:calc(var(--sar) + 22px);bottom:calc(var(--sab) + 102px);width:56px;height:56px;
  border-radius:50%;font-size:9px}
.fire.hide,.dash.hide{display:none}
.fire.press,.dash.press{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
/* dimmed, not hidden: an empty cannon or a spent dash still shows where the
   button is. `.off` elsewhere means display:none, hence a separate name. */
.fire.dim,.dash.dim{opacity:.42}

.eddock #edSave.busy{opacity:.5;pointer-events:none}

/* the published-vs-mine switch in the map drawer */
.segbar{display:flex;gap:6px;margin:2px 0 10px}
.segbar button{flex:1;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 6px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.segbar button.on{background:var(--ink);color:var(--paper)}
.mapit b s{text-decoration:none;font-weight:500;opacity:.55;font-size:11px}

@media (max-width:520px){
  .gauge{bottom:calc(var(--sab) + 10px)}
  .powers{max-width:44vw}
  .fire{width:66px;height:66px}
  .jump{width:54px;height:54px;right:calc(var(--sar) + 88px)}
  .dash{width:50px;height:50px;bottom:calc(var(--sab) + 90px)}
}

/* group headings inside the specimen strip */
.striphead{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;padding:0 10px 0 4px;
  writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;border-right:1px dashed rgba(24,38,51,.28);margin-right:6px}

/* =====================================================================
   RUN ENERGY
   ===================================================================== */
.gauge .stam{position:relative;width:110px;height:8px;background:var(--paper);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center}
.gauge .stam i{display:block;height:100%;background:var(--ink);opacity:.55;
  transition:width .12s linear}
.gauge .stam.run i{background:var(--you);opacity:1}
.gauge .stam.spent i{background:var(--danger)}
.gauge .stam u{position:absolute;left:calc(100% + 7px);top:-4px;text-decoration:none;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.off{display:none !important}

/* the reticle stays up when the camera is pulled back, just quieter */
.cross.far{opacity:.55;transform:translate(-50%,-50%) scale(.78)}

/* =====================================================================
   SETTINGS SHEET
   ===================================================================== */
.settings{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(24,38,51,.34);backdrop-filter:blur(2px);padding:14px;
  padding:calc(var(--sat) + 14px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px)}
.settings.hide{display:none}
.setcard{width:min(520px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.sethead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:14px 16px 8px;border-bottom:2px solid var(--ink)}
.sethead h2{margin:2px 0 0;font-size:24px;font-style:italic;font-weight:800;letter-spacing:-.01em}
.sethead .close{font:inherit;font-size:16px;line-height:1;background:transparent;border:2px solid var(--ink);
  color:var(--ink);width:32px;height:32px;cursor:pointer;flex:0 0 auto}
.setbody{overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 12px}
.setbody h4{margin:14px 0 6px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.5;border-bottom:1px dashed rgba(24,38,51,.3);padding-bottom:5px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:13px}
.srow>span:first-child{display:flex;align-items:baseline;gap:8px}
.srow u{text-decoration:none;font-size:11px;opacity:.55;font-variant-numeric:tabular-nums}
.tog{position:relative;width:44px;height:24px;border:2px solid var(--ink);background:transparent;
  cursor:pointer;padding:0;flex:0 0 auto}
.tog i{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--ink);
  transition:left .12s ease,background .12s ease}
.tog.on{background:var(--ink)}
.tog.on i{left:22px;background:var(--paper)}
.srow input[type=range]{flex:0 0 150px;accent-color:var(--you)}
.srow .pick{display:flex;gap:4px;flex:0 0 auto}
.srow .pick button{font:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 8px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.srow .pick button.on{background:var(--ink);color:var(--paper)}
.setfoot{display:flex;gap:8px;padding:10px 16px;border-top:2px solid var(--ink)}
.setfoot .cta{margin:0;flex:1}

/* =====================================================================
   PHONE, LANDSCAPE
   The whole point of landscape is width for the thumbs: the joystick sits
   under the left one, the action cluster under the right, and everything
   informational is pushed to the corners where a hand never covers it.
   ===================================================================== */
.rotate-hint{display:none}
@media (max-width:960px) and (orientation:portrait){
  html.touch .rotate-hint{position:fixed;inset:0;z-index:60;display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:12px;
    background:var(--paper);text-align:center;padding:24px}
  html.touch .rotate-hint svg{width:64px;height:64px;fill:none;stroke:var(--ink);
    stroke-width:1.6;stroke-linecap:round;animation:tip 2.4s ease-in-out infinite}
  html.touch .rotate-hint b{font-size:20px;font-style:italic}
  html.touch .rotate-hint span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
}
@keyframes tip{0%,55%{transform:rotate(0)}75%,100%{transform:rotate(-90deg)}}

@media (orientation:landscape) and (max-height:560px){
  html.touch{--mini:72px}
  html.touch .tl{top:calc(var(--sat) + 8px);left:calc(var(--sal) + 8px);width:118px}
  html.touch .pct{font-size:26px}
  html.touch .bar{width:110px}
  html.touch .sub{font-size:9px}

  /* Readouts hug the corners, clear of both thumbs. The minimap used to
     carry `left:50%` and a `right` at the same time, which stretched the
     group across the whole bar and shoved it into the tool row. */
  html.touch .top{top:calc(var(--sat) + 6px);left:auto;transform:none;
    right:calc(var(--sar) + 6px);align-items:flex-end;gap:6px}
  html.touch .mini{width:var(--mini);height:var(--mini)}

  /* The standings sit under the minimap and are capped so they can never
     grow down into the action buttons, whatever the safe area does. */
  html.touch .board{top:calc(var(--sat) + var(--mini) + 12px);right:calc(var(--sar) + 6px);
    width:124px;font-size:10px;
    max-height:calc(100% - var(--sat) - var(--sab) - var(--mini) - 182px)}
  html.touch .board h2{font-size:8px;padding:3px 7px 2px}
  html.touch .row{padding:2px 7px;font-size:10px;line-height:1.15}

  /* the feed drops down the middle, under the tool row */
  html.touch .feed{top:calc(var(--sat) + 46px);max-width:32vw;gap:3px}
  html.touch .fitem{font-size:9.5px;padding:2px 7px}

  /* The action cluster: fire under the thumb in the corner, jump inboard of
     it, dash stacked above. Nothing overlaps and nothing reaches the board. */
  html.touch .fire{width:76px;height:76px;right:calc(var(--sar) + 12px);
    bottom:calc(var(--sab) + 12px)}
  html.touch .jump{width:56px;height:56px;right:calc(var(--sar) + 98px);
    bottom:calc(var(--sab) + 16px);border-radius:50%;font-size:10px}
  html.touch .dash{width:56px;height:56px;right:calc(var(--sar) + 20px);
    bottom:calc(var(--sab) + 98px);font-size:9px}

  /* gauges tuck into the bottom-left, above the joystick zone */
  html.touch .gauge{left:calc(var(--sal) + 10px);bottom:calc(var(--sab) + 10px);gap:5px}
  html.touch .powers{max-width:38vw}
  html.touch .pw{font-size:9px;padding:3px 6px}
  html.touch .gauge .ammo{padding:4px 7px}
  html.touch .gauge .ammo i{height:12px;width:5px}
  html.touch .gauge .stam{width:88px;height:7px}

  html.touch .tools{bottom:auto;top:calc(var(--sat) + 6px);
    left:50%;transform:translateX(-50%);flex-direction:row;gap:5px}
  html.touch .tools button{width:33px;height:33px}

  /* the editor in landscape: rail left, strip along the bottom, dock top */
  html.touch .edrail{max-height:78vh}
  html.touch .edstrip{bottom:calc(var(--sab) + 6px);padding-right:calc(var(--sar) + 108px)}
  html.touch .edread{width:104px;top:calc(var(--sat) + 46px)}
  html.touch .edpads{bottom:calc(var(--sab) + 92px)}
  html.touch .setcard{box-shadow:5px 5px 0 var(--ink)}
  html.touch .setbody{padding-bottom:6px}
  html.touch .srow{padding:6px 0;font-size:12px}
}

/* mirrored controls for a left-handed player */
html.lefty .fire{right:auto;left:calc(var(--sal) + 14px)}
html.lefty .jump{right:auto;left:calc(var(--sal) + 98px)}
html.lefty .dash{right:auto;left:calc(var(--sal) + 20px)}
html.lefty .gauge{left:auto;right:calc(var(--sar) + 12px);align-items:flex-end}

/* installed as an app: no browser chrome to allow for */
@media (display-mode:fullscreen),(display-mode:standalone){
  .tools #btnFull{display:none}
}