:root { --bg:#0e1014; --ink:#e6e8ec; --muted:#9aa3b2; --blue:#2e5e8c; --green:#2c7a2c; }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; background:#7a7d80; color:var(--ink); font:14px/1.4 system-ui,Segoe UI,sans-serif; overflow:hidden; user-select:none; -webkit-tap-highlight-color:transparent; }   /* -webkit-tap-highlight is mouse-inert -> desktop-safe; pull-to-refresh suppression is under html.is-touch (keeps desktop trackpad swipe-back) */

  /* ---------- LOBBY + MULTIPLAYER HUB + CLAN PAGE ---------- styled in public/styles/lobby.css and clanpage.css
     (the old #mpModal pop-up was replaced by the inline FFA/Teams hub; the clan modal by the full-screen #clanPage). */

  /* ---------- GAME ---------- */
  #game { position:fixed; inset:0; }
  canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; background:#0a0b0e; cursor:crosshair; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; }   /* no long-press callout on the map */

  .panel { position:absolute; background:#000a; border:1px solid #2a2e37; color:var(--ink); }

  /* leaderboard (left) */
  #lb { top:10px; left:10px; width:228px; border-radius:4px; overflow:hidden; }
  #lb .hd { background:var(--blue); padding:6px 11px; font:800 13px system-ui; letter-spacing:.5px; }
  /* exactly top 10 — YOU always hold one slot (real rank if past 10th); capped in JS, so no scroll */
  #lb .row { display:flex; align-items:center; gap:6px; padding:3px 10px; font-size:12px; border-top:1px solid #ffffff10; cursor:pointer; }
  #lb .row:hover { background:#ffffff14; }
  #lb .row.me { background:#1f5e1f; }
  #lb .row.me:hover { background:#256e25; }
  #lb .row .rk { min-width:19px; color:var(--muted); flex:none; }   /* min-width so 4-digit ranks (1000.) don't clip the swatch */
  #lb .row .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #lb .row .sw { width:9px; height:9px; border-radius:2px; flex:none; }
  #lb .row .val { font-variant-numeric:tabular-nums; }
  /* ALL / CLAN / TEAM filter tabs across the bottom (shown/hidden + driven by main.mjs) */
  #lbTabs { display:none; border-top:1px solid #ffffff1c; }
  #lbTabs button { flex:1; background:#0e1726; border:none; color:#8ea6c4; font:800 13px system-ui; letter-spacing:.06em; padding:9px 4px; cursor:pointer; border-right:1px solid #ffffff14; }
  #lbTabs button:last-child { border-right:none; }
  #lbTabs button:hover { background:#16233a; color:#cdd9ea; }
  #lbTabs button.on { background:var(--blue); color:#fff; }

  /* stats (top-right) */
  #stats { top:10px; right:10px; min-width:210px; border-radius:4px; padding:8px 11px; font:13px/1.55 ui-monospace,monospace; }
  #stats .r { display:flex; justify-content:space-between; gap:18px; }
  #stats .r b { font-weight:700; }
  #stats .r .red { color:#e2624a; }
  #stats .bar { height:5px; background:#333a; border-radius:3px; margin-top:4px; overflow:hidden; }
  #stats .bar>div { height:100%; background:#5bd35b; width:0%; }

  /* balance bar (top-center) */
  #balbar { top:10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; background:var(--green); border:2px solid #1c4d1c; border-radius:6px; padding:6px 14px; font:800 26px ui-monospace,monospace; gap:10px; }
  #balbar.red { background:#a83232; border-color:#5a1818; }   /* peak income reached -> expand/attack */
  /* transient feedback after sending a clan signal */
  #sigToast { position:absolute; bottom:120px; left:50%; transform:translateX(-50%) translateY(8px); background:#16203aee; border:1px solid #3f56a0;
    color:#fff; padding:8px 16px; border-radius:20px; font:700 13px system-ui; z-index:22; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; white-space:nowrap; }
  #sigToast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  #sigToast.warn { background:#3a1d1dee; border-color:#a83232; }
  /* bottom-RIGHT toast: troops a teammate donated to me */
  #donateToast { position:absolute; right:14px; bottom:120px; z-index:42; max-width:60vw; padding:10px 16px; border-radius:10px;
    background:#13241aee; border:1px solid #2f6f4f; color:#bff0d8; font:800 14px system-ui; box-shadow:0 4px 16px #000a;
    opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #donateToast.show { opacity:1; transform:translateY(0); }
  #emojiToast { position:absolute; right:14px; bottom:172px; z-index:42; max-width:60vw; padding:10px 16px; border-radius:10px;   /* sits above #donateToast (120px) so a private emoji + a donation can show at once */
    background:#1d1830ee; border:1px solid #6a51a0; color:#e2d4ff; font:800 16px system-ui; box-shadow:0 4px 16px #000a;
    opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #emojiToast.show { opacity:1; transform:translateY(0); }
  #balbar .rk { font-size:15px; opacity:.85; }
  #balbar .inc { font-size:15px; color:#bfe6bf; }

  /* attack ratio bar (bottom-center) */
  #atk { bottom:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:0; background:#0c0d10; border:1px solid #2a2e37; border-radius:8px; overflow:hidden; }
  #atk button { background:#11141a; color:#fff; border:none; width:46px; height:44px; font-size:22px; cursor:pointer; }
  #atk button:hover { background:#1a1f28; }
  #atk .track { position:relative; width:300px; height:44px; cursor:pointer; background:#10141b; }
  #atk .fill { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#1f4a6e,#2f7fb0); width:30%; }
  #atk .lab { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 16px ui-monospace,monospace; }

  /* zoom buttons (right) */
  #zoom { position:absolute; right:18px; top:50%; transform:translateY(-50%); background:none; border:none; display:flex; flex-direction:column; gap:14px; z-index:16; }
  #zoom button { width:54px; height:54px; border-radius:50%; background:#0009; border:1px solid #2a2e37; color:#fff; font-size:26px; cursor:pointer; }
  #zoom button:hover { background:#000c; }

  /* cursor info (bottom-right) */
  #cur { bottom:14px; right:14px; padding:5px 10px; border-radius:4px; font:13px ui-monospace,monospace; }

  /* leave button (bottom-left) */
  #leaveBtn { position:absolute; bottom:14px; left:14px; background:#0009; border:1px solid #2a2e37; color:#fff; border-radius:6px; padding:11px 16px; min-height:44px; font:600 13px system-ui; cursor:pointer; z-index:20; }
  #leaveBtn:hover { background:#a83232; border-color:#5a1818; }

  /* clan signal toggle (sits above Leave; shown only in multiplayer while in a clan) */
  #sigBtn { position:absolute; bottom:70px; left:14px; width:50px; height:50px; border-radius:50%; background:#0e1626e6; border:1px solid #2a3346; color:#cdd9ea; cursor:pointer; z-index:20; display:none; align-items:center; justify-content:center; }
  #sigBtn:hover { background:#000c; }
  #sigBtn.on { background:#2c6ed5; border-color:#7ab0ff; color:#fff; box-shadow:0 0 12px #2c6ed5aa; }
  /* clan-signal type picker (the "ping wheel"): a small toolbar right of the signal button; shown only while signal mode is on */
  #sigPicker { position:absolute; bottom:72px; left:74px; z-index:21; display:none; gap:6px; padding:6px 8px;
    background:#0e1322ee; border:1px solid #3a4570; border-radius:12px; box-shadow:0 6px 22px #000b; }
  #sigPicker.show { display:flex; }
  #sigPicker button { width:44px; height:44px; border-radius:10px; border:1px solid #2b3354; background:#161d33; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0; transition:transform .08s, background .12s; }
  #sigPicker button:hover { background:#222c4d; transform:translateY(-2px); }
  #sigPicker button.sel { border-color:#7ab0ff; box-shadow:0 0 10px #2c6ed5aa; background:#223056; }
  #sigPicker button .ic { width:23px; height:23px; }
  .banner{ position:absolute; top:64px; left:50%; transform:translateX(-50%); background:#000b; padding:10px 18px; border-radius:10px; font-size:16px; display:none; z-index:20; }

  /* spawn-selection window (P4 #3): a slim top banner with a live countdown + Start; the map underneath is clickable to place the spawn */
  #spawnBar{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:min(340px,92%); background:#0e1626ee; border:1px solid #2a3346; border-radius:12px; padding:12px 16px; text-align:center; z-index:40; box-shadow:0 8px 26px #000a; }
  #spawnBar[hidden]{ display:none; }
  #spawnBar .sp-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  #spawnBar .sp-title{ font-weight:700; letter-spacing:.3px; color:var(--ink); }
  #spawnBar .sp-clock{ font:800 22px system-ui; color:#5cc8ff; font-variant-numeric:tabular-nums; min-width:34px; }
  #spawnBar .sp-clock.low{ color:#e2624a; }
  #spawnBar .sp-hint{ color:var(--muted); font-size:13px; margin:6px 0 0; }
  #netStatus{ position:absolute; top:110px; left:50%; transform:translateX(-50%); background:#a83232; color:#fff; padding:8px 16px; border-radius:8px; font:600 14px system-ui; display:none; z-index:30; }
  /* attack forces in flight, stacked below the balance bar (max 5) */
  #atkForce{ position:absolute; top:62px; left:50%; transform:translateX(-50%); display:none; flex-direction:column; gap:6px; align-items:center; z-index:36; }
  /* OUR colours: gray pill with a red ✕ (left) and green + (right) end-cap; troop number centred with breathing room.
     62px top leaves a clean gap below the balance bar. */
  #atkForce .row{ display:flex; align-items:stretch; height:32px; overflow:hidden; border:2px solid #3a3f4a; border-radius:7px;
    background:linear-gradient(#6e7686,#565d6b); box-shadow:0 2px 6px #0007; color:#fff; font:800 18px ui-monospace,monospace; white-space:nowrap; }
  #atkForce .row.boat{ background:linear-gradient(#5a78aa,#3f5680); border-color:#27344c; }
  #atkForce .row .amt{ display:flex; align-items:center; justify-content:center; padding:0 18px; letter-spacing:.5px; }   /* breathing room around the number */
  #atkForce .row .cx, #atkForce .row .pl{ width:30px; display:flex; align-items:center; justify-content:center; cursor:pointer;
    font:900 19px system-ui; line-height:1; user-select:none; transition:filter .12s; }
  #atkForce .row .cx{ background:#bb3a2c; }   /* red ✕ — left */
  #atkForce .row .pl{ background:#2f8a2f; }   /* green + — right */
  #atkForce .row .cx:hover, #atkForce .row .pl:hover{ filter:brightness(1.18); }
  #atkForce .row .cx:active, #atkForce .row .pl:active{ filter:brightness(.86); }
  #atkForce .row.more{ height:auto; padding:2px 12px; justify-content:center; background:#2b2f38d0; border-color:#222; font-weight:600; font-size:13px; }
  #boatTip{ position:fixed; transform:translate(14px,14px); background:#000d; color:#fff; padding:4px 9px; border-radius:5px; font:600 13px ui-monospace,monospace; pointer-events:none; z-index:44; display:none; }
  /* click feedback: a brief expanding ring in the action's colour (no cartoon emoji) */
  .clickFx{ position:fixed; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; border:2.5px solid currentColor; pointer-events:none; z-index:45; animation:clickPop .5s ease-out forwards; }
  @keyframes clickPop{ 0%{opacity:.9; transform:translate(-50%,-50%) scale(.4);} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.6);} }
  /* click action chooser: sword sits ON the cursor (fast double-click = attack); boat offsets up */
  #actMenu{ position:fixed; display:none; z-index:46; }
  #actMenu.show{ display:block; }
  /* shared monochrome line icons — tinted via the button's `color` (currentColor) */
  .ic { width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ic-sm { width:15px; height:15px; display:inline-block; vertical-align:-3px; }
  #actMenu button{ position:absolute; left:0; top:0; width:50px; height:50px; border-radius:50%; border:1px solid #2a3346; background:#0e1626e6; color:#cdd9ea; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px #000a; }
  #actMenu button:hover{ background:#16233a; border-color:#3a4762; }
  #actMenu button .ic{ width:23px; height:23px; }
  #actMenu .atk{ color:#e2624a; } #actMenu .boat{ color:#5b9bd3; } #actMenu .donate{ color:#7fd1a8; } #actMenu .emoji{ color:#9aa3b2; }   /* intent read via a restrained tint, not a cartoon fill */
  #actMenu #actDonateLbl{ position:absolute; left:0; top:0; display:none; font:800 12px ui-monospace,monospace; color:#bff0d8; background:#000d; padding:2px 8px; border-radius:9px; white-space:nowrap; pointer-events:none; text-shadow:0 1px 2px #000; }   /* live post-tax donate preview under the 💰 */
  /* emoji picker: a centered popup bar of emoji buttons; opens on tapping YOUR land (broadcast) or a player's 😀 (private) */
  #emojiPicker{ position:fixed; left:50%; bottom:120px; transform:translateX(-50%) translateY(10px); z-index:48; display:none; flex-wrap:wrap; justify-content:center; gap:6px; padding:8px 10px;
    width:max-content; max-width:min(440px,92vw); background:#0e1322ee; border:1px solid #3a4570; border-radius:14px; box-shadow:0 6px 22px #000b; opacity:0; transition:opacity .15s, transform .15s; }
  #emojiPicker.show{ display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
  #emojiPicker button{ width:46px; height:46px; border-radius:11px; border:1px solid #2b3354; background:#161d33; font-size:26px; line-height:1; cursor:pointer; padding:0; transition:transform .08s, background .12s; }
  #emojiPicker button:hover{ background:#222c4d; transform:translateY(-2px) scale(1.08); }

  /* ---------- leave menu: the bottom-left button opens a small stack (Leave match + Call peace vote) growing UPWARD ---------- */
  #leaveMenu{ position:absolute; left:14px; bottom:62px; z-index:30; display:flex; flex-direction:column; min-width:200px;
    background:#0c0d10; border:1px solid #2a2e37; border-radius:8px; overflow:hidden; box-shadow:0 6px 20px #000a; }
  #leaveMenu[hidden]{ display:none; }
  #leaveMenu button{ background:transparent; color:#fff; border:none; border-bottom:1px solid #1c2027; padding:11px 14px;
    min-height:44px; text-align:left; font:600 13px system-ui; cursor:pointer; }
  #leaveMenu button:last-child{ border-bottom:none; }
  #lmLeave:hover{ background:#a83232; }
  #lmCall:hover{ background:#1a1f28; }

  /* ---------- peace-vote bar (SP + MP): the fill = the agreed share of the land (a frozen snapshot). The 60% pass threshold is
     deliberately NOT marked — players don't see it. BOTTOM-RIGHT corner — sits ABOVE #atk (vertical gap) + #cur, clear of #zoom. ---------- */
  #peaceVote{ position:absolute; right:14px; bottom:70px; z-index:40; display:flex; align-items:center;
    gap:8px; width:min(300px, calc(100vw - 28px)); background:#161a22ee; border:1px solid #6fb1d6; border-radius:10px; padding:8px 10px; box-shadow:0 4px 16px #000a; }
  #peaceVote[hidden]{ display:none; }
  #pvMine{ font:700 12px system-ui; color:#9fb6c2; white-space:nowrap; }   /* shown in place of the buttons once you've locked your vote */
  .pv-track{ position:relative; flex:1; height:30px; background:#11141a; border:1px solid #2a2e37; border-radius:6px; overflow:hidden; }
  .pv-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:#2a6f8e; transition:width .18s linear; }
  .pv-num{ position:absolute; inset:0; display:flex; align-items:center; padding-left:9px; font:700 13px ui-monospace,monospace;
    color:#fff; text-shadow:0 1px 2px #000,0 0 3px #000; z-index:2; pointer-events:none; }
  #peaceYes,#peaceNo{ background:#222a36; color:#cdd5e2; border:1px solid #3a4658; border-radius:7px; padding:7px 10px;
    min-height:34px; font:700 12px system-ui; cursor:pointer; white-space:nowrap; }
  #peaceYes:hover,#peaceNo:hover{ filter:brightness(1.15); }
  #peaceYes.on{ background:var(--green); color:#fff; border-color:transparent; }
  #peaceNo.on{ background:#a23a3a; color:#fff; border-color:transparent; }

  /* ---------- end-of-game SCREEN (victory / defeat): big centred title + a Leave button at the bottom-centre ---------- */
  #overEnd{ position:absolute; inset:0; display:none; background:#0a0b0edd; z-index:60; }
  #overEnd.show{ display:block; animation:overFade .3s ease-out; }
  @keyframes overFade{ from{opacity:0;} to{opacity:1;} }
  #overEnd .mid{ position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); text-align:center; width:min(560px,92%); }
  #overEnd .ttl{ font:800 clamp(36px,7vw,58px) system-ui; letter-spacing:.5px; margin-bottom:10px; text-shadow:0 6px 30px #000; }
  #overEnd .sub{ color:#cdd3df; font-size:clamp(14px,2.4vw,18px); }
  /* ladder-points badge (appears a moment after a ranked win, when the server's replay awards the clan) */
  #overEnd .pts{ display:none; margin:18px auto 0; padding:10px 18px; border:1px solid #2a6f8e; border-radius:11px; background:#12222b;
    color:#bfe2f2; font:800 clamp(15px,2.6vw,19px) system-ui; box-shadow:0 4px 18px #0008; animation:overFade .35s ease-out; }
  #overEnd .pts.show{ display:inline-block; }
  #overEnd .pts b{ color:#7fd1a8; }
  #overEnd.win .ttl{ color:#f0d889; }
  #overEnd.loss .ttl{ color:#e2624a; }
  #overEnd #overLobby{ position:absolute; bottom:9%; left:50%; transform:translateX(-50%); background:#2c3242; color:#fff; border:none;
    border-radius:12px; padding:14px 30px; font:700 17px system-ui; cursor:pointer; box-shadow:0 6px 22px #000a; }
  #overEnd #overLobby:hover{ filter:brightness(1.18); }

  /* ---------- TOUCH / mobile layout — gated on html.is-touch (main.mjs sets it from pointer:coarse && hover:none; see
     PLAN_MOBILE.md §0). Replaces the old @media(max-width:520px): now fires on EVERY phone incl. LANDSCAPE (844px wide, which
     the width query never caught -> desktop HUD), and NEVER on a mouse desktop (any width) so PC stays byte-identical. ---------- */
  html.is-touch input, html.is-touch textarea, html.is-touch select { font-size:16px; }   /* kill iOS focus-zoom, independent of the viewport meta */
  html.is-touch, html.is-touch body { overscroll-behavior:none; }   /* pull-to-refresh off mid-match — TOUCH only, so desktop trackpad swipe-back stays untouched */
  /* safe-area on ALL edge panels (viewport-fit=cover extends under the notch; in LANDSCAPE the notch is on the SIDES where #lb/#stats live) */
  /* MOBILE HUD FOOTPRINT = the desktop ~12%, NOT a shrunk-inline ~60%: leaderboard + stats are HIDDEN and represented by two
     44x44 CORNER BUTTONS (#lbToggle top-left, #statsToggle top-right). Tapping a button opens the FULL panel as an OVERLAY over
     the map at a readable font; tapping again or the map closes it. So the map centre stays free — only two small corner buttons. */
  /* MOBILE: leaderboard + stats stay VISIBLE by default but COMPACT, so their footprint ≈ the desktop % (not the ~60% a
     full-size panel eats on a phone). A 44x44 corner button (just above each panel) HIDES/SHOWS it so you can clear the screen. */
  .hud-toggle{ display:none; }
  html.is-touch .hud-toggle{ display:flex; align-items:center; justify-content:center; position:absolute; padding:0; z-index:22; cursor:pointer; border-radius:8px; }
  /* panel SHOWN (.on): a SMALL unobtrusive chip BESIDE the panel (right of the leaderboard / left of stats) */
  html.is-touch .hud-toggle.on{ width:30px; height:30px; background:#0e162699; border:1px solid #2a3346; color:#8ea6c4; opacity:.9; }
  html.is-touch .hud-toggle.on svg{ width:16px; height:16px; }
  html.is-touch #lbToggle.on{ top:calc(14px + env(safe-area-inset-top)); left:calc(150px + env(safe-area-inset-left)); }
  html.is-touch #statsToggle.on{ top:calc(14px + env(safe-area-inset-top)); right:calc(139px + env(safe-area-inset-right)); }
  /* panel HIDDEN (:not(.on)): full 44x44 PROMINENT button back at the corner (its "place") -> easy to find + tap to restore */
  html.is-touch .hud-toggle:not(.on){ width:44px; height:44px; background:var(--blue); border:1px solid #3a6ea0; color:#fff; }
  html.is-touch .hud-toggle:not(.on) svg{ width:22px; height:22px; }
  html.is-touch #lbToggle:not(.on){ top:calc(10px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left)); }
  html.is-touch #statsToggle:not(.on){ top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right)); }
  /* keep the DESKTOP panel styling but SCALE the whole panel down, so lb+stats occupy ~the same % of the phone screen as on
     desktop (measured: 1080p top-HUD ~5%, 1366 ~10%). Same look, same corners — just proportionally small. Tune the scale below. */
  html.is-touch #lb{ left:calc(10px + env(safe-area-inset-left)); top:calc(10px + env(safe-area-inset-top)); transform:scale(0.6); transform-origin:top left; }
  html.is-touch #lbRows{ max-height:150px; overflow-y:auto; }              /* cap so the leaderboard is a SHORT panel (scroll for the rest), not a full-side column */
  html.is-touch #stats{ right:calc(10px + env(safe-area-inset-right)); top:calc(10px + env(safe-area-inset-top)); transform:scale(0.6); transform-origin:top right; }
  html.is-touch #lb.hud-hidden, html.is-touch #stats.hud-hidden{ display:none; }   /* the corner button hides them */
  html.is-touch #balbar{ font-size:18px; padding:5px 10px; gap:6px; top:calc(8px + env(safe-area-inset-top)); }
  html.is-touch #balbar .rk, html.is-touch #balbar .inc{ font-size:12px; }
  html.is-touch #atk{ bottom:calc(10px + env(safe-area-inset-bottom)); }
  html.is-touch #atk .track{ width:min(168px,50vw); height:30px; }
  html.is-touch #atk button{ width:34px; height:30px; font-size:15px; }
  html.is-touch #atk .lab{ font-size:14px; }
  html.is-touch #zoom{ right:calc(10px + env(safe-area-inset-right)); gap:10px; }
  html.is-touch #zoom button{ width:46px; height:46px; font-size:22px; }
  html.is-touch #atkForce{ top:calc(56px + env(safe-area-inset-top)); }   /* notch-aware + moves down with #balbar/#lb/#stats so it never sits under the pill on a notched phone */
  html.is-touch #atkForce .row{ height:30px; font-size:13px; }   /* compact in-flight rows so the map centre stays visible; still finger-tappable */
  html.is-touch #atkForce .row .cx, html.is-touch #atkForce .row .pl{ width:36px; }   /* thumb-sized cancel ✕ / reinforce + (the ✕ is the safety net that lets 1-tap attack commit) */
  html.is-touch #cur{ display:none; }   /* the bare coordinate readout is the first thing to drop on a phone */
  html.is-touch #peaceVote{ right:calc(8px + env(safe-area-inset-right)); bottom:calc(172px + env(safe-area-inset-bottom)); width:min(300px, calc(100vw - 16px)); }   /* bottom-RIGHT, ABOVE the relocated zoom stack (which tops out ~166px) so it can't cover the zoom-out button */
  html.is-touch #peaceYes, html.is-touch #peaceNo{ font-size:12px; }
  html.is-touch #leaveBtn{ left:calc(14px + env(safe-area-inset-left)); bottom:calc(14px + env(safe-area-inset-bottom)); }   /* bottom-left, clear of the side notch + home bar */
  html.is-touch #sigBtn{ left:calc(14px + env(safe-area-inset-left)); bottom:calc(70px + env(safe-area-inset-bottom)); }

  /* ---- Step 3: rebuild the in-match HUD for touch — de-collide + shrink space-hogs (PLAN_MOBILE.md Step 3). Existing DOM, reflowed. ---- */
  html.is-touch .panel{ background:#000e; }                                  /* denser overlay bg so the full panel reads over the pixel map */
  /* 3a: keep the three thumb controls in NON-overlapping bottom zones -> [☰ menu | left]  [%-track | centre]  [zoom | right] */
  html.is-touch #leaveBtn{ width:46px; padding:0; text-align:center; overflow:hidden; }   /* icon-only ☰ so it clears the centred % track */
  html.is-touch #leaveBtn .mtxt{ display:none; }
  html.is-touch #zoom{ top:auto; transform:none; bottom:calc(64px + env(safe-area-inset-bottom)); right:calc(10px + env(safe-area-inset-right)); }   /* out of the mid-right map zone -> bottom-right, above the % track */
  /* Step 2b: quick-% chips above the track (touch only) — set attack strength once with a thumb, then just tap targets */
  #atkChips{ display:none; }
  html.is-touch #atkChips{ display:flex; gap:6px; position:absolute; left:50%; transform:translateX(-50%); bottom:calc(42px + env(safe-area-inset-bottom)); z-index:16; width:min(230px, calc(100vw - 150px)); }   /* clamp so the row never reaches the side #zoom/#sigBtn clusters on narrow phones */
  html.is-touch #atkChips button{ flex:1 1 0; min-width:0; height:26px; padding:0 5px; background:#0c0d10cc; border:1px solid #2a2e37; color:#cdd9ea; border-radius:6px; font:700 12px ui-monospace,monospace; cursor:pointer; }
  html.is-touch #atkChips button.on{ background:var(--blue); color:#fff; border-color:#3a6ea0; }
  /* LANDSCAPE (short height): shrink the corner panels more + cap the leaderboard shorter so the play area isn't squeezed vertically */
  @media (orientation:landscape){
    html.is-touch #lb, html.is-touch #stats{ transform:scale(0.5); }
    html.is-touch #lbRows{ max-height:130px; }   /* touch = exactly top-5 now -> fits all 5 rows with margin, no clip/scroll */
    html.is-touch #lbToggle.on{ left:calc(127px + env(safe-area-inset-left)); }       /* panels are 0.5x here -> narrower -> the chip sits closer beside them */
    html.is-touch #statsToggle.on{ right:calc(118px + env(safe-area-inset-right)); }
  }
  /* PORTRAIT (narrow): the centre balance pill fills the very top row, so a flush-corner panel + its beside-chip would collide with the pill. Drop panels + chips below the pill here (landscape stays flush at the corner). */
  @media (orientation:portrait){
    html.is-touch #lb, html.is-touch #stats{ top:calc(58px + env(safe-area-inset-top)); }
    html.is-touch #lbToggle.on{ top:calc(62px + env(safe-area-inset-top)); }
    html.is-touch #statsToggle.on{ top:calc(62px + env(safe-area-inset-top)); }
  }