/* UI kit (Slant); its rules are in CLAUDE.md. Slab fills are ::before, skewed, so every slab leans at one angle whatever its height and neighbours meet edge to edge. */
  :root {
    --bg: oklch(.22 .025 255); --bg2: oklch(.30 .03 255); --bg3: oklch(.17 .022 255); --bg4: oklch(.12 .02 255);
    --fg: oklch(.97 .008 255); --fg2: oklch(.80 .02 255); --fg3: oklch(.62 .025 255);
    --ah: 355; --ac: oklch(.70 .22 var(--ah)); --ac2: oklch(.82 .13 var(--ah)); --ac3: oklch(.56 .2 var(--ah)); --onac: oklch(.15 .03 var(--ah));
    --plate: oklch(.17 .022 255 / .82); --panel: oklch(.20 .024 255 / .94); --hover: oklch(.38 .03 255); --line: oklch(.97 .008 255 / .14);
    --fd: 'Barlow Condensed', 'Arial Narrow', sans-serif; --fb: 'Barlow', system-ui, sans-serif;
    --lean: -14deg; --halo: 0 1px 3px rgb(0 0 0 / .65);
    --chamfer: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    color-scheme: dark;
  }
  html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg4); font-family: var(--fb); }
  button, select, input { font-family: inherit; }
/* --sb fill; --ul / --uw the underline (you, keyboard, chosen) drawn in the fill so no sliver shows at the slant; --su an inner ring */
  .btns button, .card .head button, .card .bar button, .card .seg button, .menu-list button:not(.del), #join button, #palMat button,
    #meNeeds .need, #meNeeds button.settings, #meNavKey button, #meSettings .tabs button, #meSettings .tcard, .ed-toggle button, #edTabs .tab,
    #edFoot button, #edTools button, #geTop > button, #geTabs .tab, .gi-del, #hudNote div, #hudShows div, #killfeed div, .hs-team, #hudTimers,
    #pauseInfo button.code, #controls .head button, #hudProg div { position: relative; }
  .btns button, .card .head button, .card .bar button, .card .seg button, .menu-list button:not(.del), #join button, #palMat button,
    #meNeeds .need, #meNeeds button.settings, #meNavKey button, #meSettings .tabs button, #meSettings .tcard, .ed-toggle button, #edTabs .tab,
    #edFoot button, #edTools button, #geTop > button, #geTabs .tab, .gi-del, #hudNote div, #hudShows div, #killfeed div, .hs-team, #hudTimers,
    #pauseInfo button.code, #controls .head button, #overExit, #overSwap, #ngToggle, #toast, #hudWays .way, #touch #tUse {
    isolation: isolate; background: none; border: 0; border-radius: 0; }
  .btns button::before, .card .head button::before, .card .bar button::before, .card .seg button::before, .menu-list button:not(.del)::before,
    #join button::before, #palMat button::before, #meNeeds .need::before, #meNeeds button.settings::before, #meNavKey button::before,
    #meSettings .tabs button::before, #meSettings .tcard::before, .ed-toggle button::before, #edTabs .tab::before, #edFoot button::before,
    #edTools button::before, #geTop > button::before, #geTabs .tab::before, .gi-del::before, #hudNote div::before, #hudShows div::before, #killfeed div::before,
    .hs-team::before, #hudTimers::before, #pauseInfo button.code::before, #controls .head button::before, #overExit::before, #overSwap::before,
    #ngToggle::before, #toast::before, #hudWays .way::before, #touch #tUse::before {
    content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--lean)); pointer-events: none;
    background: var(--sb, var(--bg2)); background-image: linear-gradient(to top, var(--ul, transparent) var(--uw, 0px), transparent var(--uw, 0px)); box-shadow: var(--su, none); transition: background-color .128s, box-shadow .128s; }
  .btns button, .card .head button, .card .bar button, #join button, #meNavKey button, #meNeeds button.settings, #edFoot button, #geTop > button,
    #controls .head button, #overExit, #overSwap, #ngToggle {
    font: italic 700 15px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg); padding: 9px 18px; cursor: pointer;
    transition: transform .128s; }
  .btns button:hover:not(:disabled), .card .head button:hover:not(:disabled), .card .bar button:hover:not(:disabled), #join button:hover:not(:disabled),
    #meNavKey button:hover, #meNeeds button.settings:hover, #edFoot button:hover, #geTop > button:hover, #controls .head button:hover,
    #overExit:hover, #overSwap:hover, #ngToggle:hover { --sb: var(--hover); }
  .btns button:active, .card .head button:active, .card .bar button:active, #join button:active, #edFoot button:active, #geTop > button:active,
    #overExit:active, #overSwap:active { transform: translateX(2px); }
  .btns button.on, .card button.go, .card button.tog.on, #edFoot button.go, #geTop > button.go { --sb: var(--ac); color: var(--onac); }
  .btns button.on:hover, .card button.go:hover:not(:disabled), #edFoot button.go:hover, #geTop > button.go:hover { --sb: var(--ac2); }
  button:focus-visible { outline: none; --ul: var(--fg); --uw: 3px; }
  .card button.go:focus-visible, .btns button.on:focus-visible { --ul: var(--onac); --uw: 3px; }
  input:focus-visible, select:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
/* a controller's selection (pad.js); the main and pause lists mark theirs with the accent already */
  body.pad .padsel { outline: 2px solid var(--ac); outline-offset: 2px; } body.pad .menu-list .padsel { outline: none; }
  body.pad, body.pad * { cursor: none !important; } body.pad #touch { display: none !important; }
  .card, #join, #controls, #board, #hudOver, #hudDealt, #nextGame, #meMode, #meSettings, #meNavKey, #edTools, .ge-pop, #health, #ammo,
    #palTeam { clip-path: var(--chamfer); }
  .card input[type=text], .card .bar input, .card select, #join input, #join select, #nextGame select, #meMode select, #meSettings input, #meSettings select,
    .btns select, .gs-row input[type=number], .gs-row input[type=text], .gs-row select, .gi-row input, .gi-row select, .gs-team input, .gs-need input,
    .gs-need select.gs-look, #geFilter, .gi-row textarea {
    font: 500 14px var(--fb); color: var(--fg); background: var(--bg3); border: 0; border-radius: 0; box-shadow: inset 0 -2px 0 var(--fg3); padding: 7px 9px; }
  .card input[type=text]:focus, .card .bar input:focus, #join input:focus, #meSettings input:focus, .gs-row input:focus, .gi-row input:focus, .gi-row textarea:focus,
    .gs-team input:focus, .gs-need input:focus, #geFilter:focus { outline: none; box-shadow: inset 0 -2px 0 var(--ac); }
  select option { background: var(--bg); color: var(--fg); }
  select option.unready { color: var(--fg3); }
  input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=checkbox] { accent-color: var(--ac); }
/* --p: the filled share, set as it moves */
  input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: none; cursor: pointer; }
  input[type=range]::-webkit-slider-runnable-track { height: 5px; background: linear-gradient(var(--ac), var(--ac)) 0 0 / var(--p, 50%) 100% no-repeat, var(--bg3); }
  input[type=range]::-moz-range-track { height: 5px; background: linear-gradient(var(--ac), var(--ac)) 0 0 / var(--p, 50%) 100% no-repeat, var(--bg3); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 20px; margin-top: -7.5px; background: var(--fg); border: 0; border-radius: 0; transform: skewX(var(--lean)); }
  body.touch input[type=range] { touch-action: pan-y; }   /* touch.js moves it sideways */
  input[type=range]::-moz-range-thumb { width: 9px; height: 20px; background: var(--fg); border: 0; border-radius: 0; transform: skewX(var(--lean)); }
/* every hue at the accent's own lightness and chroma */
  input[type=range].hue::-webkit-slider-runnable-track { background: linear-gradient(90deg, oklch(.7 .22 0), oklch(.7 .22 60), oklch(.7 .22 120), oklch(.7 .22 180), oklch(.7 .22 240), oklch(.7 .22 300), oklch(.7 .22 360)); }
  input[type=range].hue::-moz-range-track { background: linear-gradient(90deg, oklch(.7 .22 0), oklch(.7 .22 60), oklch(.7 .22 120), oklch(.7 .22 180), oklch(.7 .22 240), oklch(.7 .22 300), oklch(.7 .22 360)); }
  .card output.hue { display: inline-block; width: 28px; min-width: 0; height: 18px; background: var(--ac); transform: skewX(var(--lean)); }

  #view { position: fixed; inset: 0; }
  canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default;
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
  body.fp canvas { cursor: crosshair; }
  #cross { position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; display: none; }
  #cross::before, #cross::after { content: ''; position: absolute; background: rgba(255,255,255,.9); box-shadow: 0 0 2px rgba(0,0,0,.8); }
  #cross::before { left: 8px; top: 0; width: 2px; height: 18px; }
  #cross::after { top: 8px; left: 0; height: 2px; width: 18px; }
  body.fp #cross { display: block; }
  #palette { position: fixed; right: 16px; bottom: 16px; display: none; padding: 9px 10px; background: var(--plate); pointer-events: none; overflow: visible; }
  body.fp #palette { display: block; }
  body.fp:not(.buildmode) #palette, body.fp.gunmode #cross { display: none; }   /* only while holding a block */
  #gunCross { position: fixed; left: 50%; top: 50%; width: 0; height: 0; display: none; pointer-events: none; --g: 5px; }
  body.fp.gunmode #gunCross { display: block; }
  #gunCross i { position: absolute; background: rgba(255,255,255,.92); box-shadow: 0 0 2px rgba(0,0,0,.85); }
  #gunCross i:nth-child(1) { width: 2px; height: 7px; left: -1px; top: calc(-7px - var(--g)); }
  #gunCross i:nth-child(2) { width: 2px; height: 7px; left: -1px; top: var(--g); }
  #gunCross i:nth-child(3) { width: 7px; height: 2px; top: -1px; left: calc(-7px - var(--g)); }
  #gunCross i:nth-child(4) { width: 7px; height: 2px; top: -1px; left: var(--g); }
  #ammo { position: fixed; right: 18px; bottom: 16px; display: none; color: var(--fg); pointer-events: none; padding: 9px 16px 11px 22px; background: var(--plate);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
  body.fp.gunmode #ammo { display: block; }
  #ammo .row { display: flex; justify-content: flex-end; align-items: baseline; }
  #ammoNum { font: italic 800 42px/1 var(--fd); font-variant-numeric: tabular-nums; }
  #ammoNum.low { color: var(--ac2); }
  #ammoTicks { display: flex; gap: 2px; justify-content: flex-end; margin-top: 6px; }
  #ammoTicks i { width: 3px; height: 12px; background: var(--fg); transform: skewX(var(--lean)); }
  #ammoTicks i.spent { background: oklch(.97 .008 255 / .18); }
  #reloadBar { height: 3px; margin-top: 6px; background: oklch(.97 .008 255 / .14); visibility: hidden; }
  #reloadBar b { display: block; height: 100%; width: 0; background: var(--fg); }
  #ammo.reloading #reloadBar { visibility: visible; }
  #health { position: fixed; left: 18px; bottom: 16px; display: none; color: var(--fg); pointer-events: none; padding: 9px 22px 11px 16px; background: var(--plate);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
  body.fp #health { display: block; }
  #hpNum { font: italic 800 42px/1 var(--fd); font-variant-numeric: tabular-nums; }
  #hpNum.low { color: var(--ac2); } #hpNum.over { color: oklch(.9 .15 95); }
  #hpBar { width: 132px; height: 6px; margin: 7px 0 0 3px; background: oklch(.97 .008 255 / .16); transform: skewX(var(--lean)); }
  #hpBar b { display: block; height: 100%; width: 100%; background: var(--fg); transition: width .15s; }
  #gunCross.hit i { background: #ff4a4a; }
  #killfeed { position: fixed; right: 18px; top: 40px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none;
    font: 500 14px var(--fb); color: var(--fg2); }
  #killfeed div { --sb: var(--plate); padding: 4px 14px; transition: opacity .7s; }
  #killfeed div.me { --ul: var(--ac); --uw: 3px; }
  #killfeed div.out { opacity: 0; }
  #killfeed .who { font-weight: 700; padding: 0 1px; }
  #respawn { position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%); display: none; pointer-events: none;
    font: italic 800 72px/1 var(--fd); color: var(--fg); text-shadow: 0 2px 12px rgb(0 0 0 / .7); }
  #respawn.show { display: block; }
  #killedBy, #specCard { position: fixed; left: 50%; bottom: 16%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 11;
    padding: 8px 34px 10px; background: var(--panel); clip-path: var(--chamfer); box-shadow: inset 0 3px 0 var(--kc, #fff); }   /* both one size and place, between the two they were (user) */
  body.dying #killedBy.show { display: flex; animation: killedIn .3s ease-out; }
  @keyframes killedIn { from { opacity: 0; transform: translate(-50%, 12px); } }
  #killedBy small, #specCard small { font: italic 700 13px var(--fd); letter-spacing: .3em; text-transform: uppercase; color: var(--fg3); }
  #killedBy b, #specCard b { font: italic 800 31px/1.05 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--kc, #fff); filter: brightness(1.25); white-space: nowrap; }
  body.touch #killedBy, body.touch #specCard { bottom: 9%; padding: 5px 21px 6px; } body.touch #killedBy small, body.touch #specCard small { font-size: 10px; } body.touch #killedBy b, body.touch #specCard b { font-size: 20px; }
  body.spectating #respawn { top: auto; bottom: 9%; transform: translateX(-50%); font: italic 700 24px var(--fd); letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
  #specCard { gap: 0; }
  body.spectating #specCard.show { display: flex; animation: killedIn .3s ease-out; }
  body.touch.spectating.watchmate #respawn { bottom: calc(9% + 46px); }
  #join { position: fixed; left: 50%; top: 45%; transform: translate(-50%,-50%); display: none; width: 300px; padding: 16px 18px 18px; color: var(--fg);
    background: var(--panel); font: 500 14px var(--fb); z-index: 20; }
  body.joining #join { display: block; }
  #join label { display: flex; align-items: center; gap: 10px; color: var(--fg2); font: italic 600 14px var(--fd); letter-spacing: .06em; text-transform: uppercase; }
  #join input, #join select { flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; font-style: normal; }
  #join label + label { margin-top: 9px; }
  #join label > :first-child, #join label { white-space: nowrap; }
  #join label > span { width: 44px; }
  #join .tabs { display: flex; gap: 10px; margin-top: 14px; padding: 0 4px; }
  #join button { flex: 1; padding: 10px 6px; }
  #joinTeams button { --sb: var(--bg2); color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .5); font-size: 16px; }
  #joinTeams button.cur { --ul: var(--fg); --uw: 3px; }
  #join button:hover:not(:disabled) { filter: brightness(1.12); }
  #joinClose { --sb: transparent; color: var(--fg2); }
  #joinClose:hover { --sb: var(--bg2) !important; }
  #gunCross.hit.head i { background: #ffd23f; }

  #palGrid { display: grid; grid-template-columns: repeat(8, 16px); gap: 2px; justify-content: center; }
  body.match:not(.mapedit) #palette { width: 150px; }   /* 170 with padding: room for "Quarter", "Light: off" and blocks left */
  #palGrid div { width: 16px; height: 16px; box-sizing: border-box; }
  #palGrid div.sel { outline: 2px solid var(--fg); outline-offset: 1px; position: relative; z-index: 1; box-shadow: 0 0 0 3px rgb(0 0 0 / .6); }
  #palSize { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--fg); font: italic 600 13px var(--fd); letter-spacing: .05em; text-transform: uppercase; }
  #palSize i { width: 16px; height: 16px; background: var(--c, #888); border: 1px solid rgba(255,255,255,.7); box-sizing: border-box; }
  #palSize.quarter i { width: 8px; height: 8px; margin: 4px; }
  #palSize.lit i { box-shadow: 0 0 6px 2px var(--c); }
  #palLight { margin-left: auto; font-weight: 600; color: var(--fg3); }
  #palLight.on { color: #fff; text-shadow: 0 0 8px rgb(255 255 255 / .75); }
  #palLight.na { opacity: .4; }
  #palLeft { margin-left: 10px; font: italic 800 16px var(--fd); color: var(--fg); }   /* empty when unlimited */
  #palLeft.out { color: var(--ac2); }
  #palGrid div.lc::after { content: ''; display: block; width: 4px; height: 4px; margin: 6px; border-radius: 50%; background: rgba(0,0,0,.45); }
  canvas:active { cursor: grabbing; }
  #editor { display: none; }
  body.editor #editor { display: block; }
  #edTools { position: fixed; left: 16px; top: 16px; display: grid; grid-template-columns: 48px 48px; gap: 4px; padding: 10px 12px; background: var(--panel); zoom: 1.25; }   /* tuned: user's pick */
  #edTools button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; color: var(--fg2); --sb: transparent;
    font: italic 600 11px var(--fd); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
  #edTools hr, #edSizes { grid-column: 1 / -1; }
  #edTools button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  #edTools button:hover:not(:disabled):not(.on) { --sb: var(--bg2); color: var(--fg); }
  #edTools button.on { --sb: var(--ac); color: var(--onac); }
  #edTools button::before { transform: none; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  #edTools button:disabled { opacity: .35; cursor: default; }
  body.edgun #edTpose, body.edobj #edTpose, body.edobj #edTest { display: none; }
  #pause [data-go=swap], body.touch #pause [data-go=save] { display: none; } body.touch.online #pause [data-go=swap], body.pad.online #pause [data-go=swap] { display: block; }   /* phones and pads: no L */
  #pause .in-range, body.ranging #pause .no-range, body.ranging #pause [data-go=save] { display: none; } body.ranging #pause .in-range { display: inline; }
  body.ranging #ui { display: none !important; }
  #edTools hr { width: 70%; border: 0; border-top: 1px solid var(--line); margin: 3px auto; }
  #edSizes { display: flex; flex-direction: column; gap: 3px; }
  #edSizes:empty { display: none; }
  #edSizes button { padding: 6px 0; }
  #edSizes i { display: block; background: currentColor; }
  #edSwitch { position: fixed; right: 16px; top: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .ed-toggle { display: flex; padding: 0 6px; gap: 3px; }
  .ed-toggle button { --sb: var(--plate); font: italic 700 16px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); padding: 9px 18px; cursor: pointer; }
  .ed-toggle.big button { font-size: 20px; padding: 11px 24px; }
  .ed-toggle button:hover:not(.on) { --sb: var(--bg2); color: var(--fg); }
  .ed-toggle button.on { --sb: var(--fg); color: var(--bg4); }
  #edTabs { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 3px;
    max-width: calc(100vw - 560px); overflow-x: auto; padding: 0 10px; scrollbar-width: thin; }
/* narrower screens: tabs above Save, left of the palette */
  @media (max-width: 1150px) { #edTabs { left: 16px; transform: none; bottom: 64px; max-width: calc(100vw - 250px); } }
  #edTabs .tab { flex: none; display: flex; align-items: center; gap: 7px; font: italic 700 16px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2);
    --sb: var(--plate); padding: 9px 18px 11px; cursor: pointer; }
  #edTabs .tab:hover { --sb: var(--bg2); color: var(--fg); }
  #edTabs .tab.on { --sb: var(--fg); color: var(--bg4); padding-bottom: 15px; }
  #edTabs .tab .dot { width: 7px; height: 7px; background: var(--ac); transform: skewX(var(--lean)); }
  #edTabs .tab em { font: italic 700 12px/1 var(--fd); letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px 3px; background: var(--plate); color: var(--fg2);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
  #edTabs .tab .x { opacity: 0; font-size: 17px; line-height: 1; margin-right: -6px; font-style: normal; }
  #edTabs .tab:hover .x { opacity: .6; }
  #edTabs .tab .x:hover { opacity: 1; color: var(--ac); }
  #edTabs .tab.plus { font-size: 20px; padding: 7px 16px 9px; }
  #edFoot { position: fixed; left: 22px; bottom: 16px; display: flex; gap: 8px; }
  #edFoot button { font-size: 16px; padding: 10px 18px; }
  #edFoot button.go { font-size: 17px; padding: 10px 26px; }
/* characters: the team colour shown, and its share of the outside */
  #palTeam { position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; display: none; align-items: center; gap: 9px; padding: 7px 12px;
    background: var(--plate); color: var(--fg); font: italic 600 13px var(--fd); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  body.editor:not(.edgun) #palTeam { display: flex; }
  #palTeamCol { width: 22px; height: 16px; padding: 0; border: 1px solid rgba(255,255,255,.7); cursor: pointer; background: conic-gradient(#ff5a5a, #ffd84a, #5ce07a, #4ab8ff, #b07aff, #ff5a5a); }
  #palTeamCol.on { outline: 2px solid var(--ac); outline-offset: 2px; }
  #palTeamPct { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
  body.edobj #palTeamPct { display: none; } body.edobj #palTeam { padding-right: 17px; }
  #palTeamPct.low { color: var(--ac2); }
  #controls { z-index: 25; }
  #ge { position: fixed; inset: 0; display: none; grid-template-columns: 300px 1fr 280px; grid-template-rows: 54px 1fr; background: var(--bg4); color: var(--fg);
    font: 500 14px var(--fb); z-index: 10; }
  body.modeedit #ge { display: grid; }
  @media (max-width: 1200px) { #ge { grid-template-columns: 230px 1fr 220px; } #geTabs { max-width: calc(100vw - 470px); } }
  body.modeedit #menu { display: none; }
  #geTop { grid-column: 1 / 4; display: flex; align-items: flex-end; gap: 6px; padding: 0 16px; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
  #geTop .grow { flex: 1; }
  #geTop > button { align-self: center; padding: 8px 15px; font-size: 14px; }
  #geTop > button.go { padding: 8px 22px; }
  #geTabs { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; max-width: calc(100vw - 520px); scrollbar-width: thin; padding: 0 8px; }
  #geTabs .tab { flex: none; display: flex; align-items: center; gap: 7px; font: italic 700 15px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2);
    --sb: var(--bg3); padding: 9px 16px; cursor: pointer; }
  #geTabs .tab:hover { --sb: var(--bg2); color: var(--fg); }
  #geTabs .tab.on { --sb: var(--fg); color: var(--bg4); }
  #geTabs .tab .dot { width: 7px; height: 7px; background: var(--ac); transform: skewX(var(--lean)); }
  #geTabs .tab .x { opacity: 0; font-size: 16px; line-height: 1; font-style: normal; } #geTabs .tab:hover .x { opacity: .6; } #geTabs .tab .x:hover { opacity: 1; color: var(--ac); }
  #geTabs .tab.plus { font-size: 18px; padding: 7px 14px; }
  #geLeft, #geRight { overflow-y: auto; background: var(--bg3); padding: 10px 14px 20px; scrollbar-width: thin; }
  #geLeft { box-shadow: inset -1px 0 0 var(--line); } #geRight { box-shadow: inset 1px 0 0 var(--line); }
  #geLeft h4 { margin: 18px 0 8px; font: italic 700 13px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
  .gs-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 4px 4px 4px; }
  .gs-tabs button { position: relative; isolation: isolate; border: 0; background: none; padding: 8px 6px; cursor: pointer; color: var(--fg2);
    font: italic 700 15px/1 var(--fd); letter-spacing: .05em; text-transform: uppercase; --sb: var(--bg2); }
  .gs-tabs button::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--lean)); background: var(--sb); background-image: linear-gradient(to top, var(--ul, transparent) var(--uw, 0px), transparent var(--uw, 0px)); box-shadow: var(--su, none); }
  .gs-tabs button:hover:not(.on) { --sb: var(--bg); color: var(--fg); }
  .gs-tabs button.on { --sb: var(--fg); color: var(--bg4); }
  #geLeft h4.warn { color: #f0a63a; } #geLeft h4.bad { color: #ff6b5e; } #geLeft h4.ok { color: #a6e3a1; }
  .gs-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  .gs-row > span { flex: 1; color: var(--fg2); }  .gs-row input[type=number], .gs-row input[type=text], .gs-row select, .gi-row input, .gi-row select { width: 120px; font-size: 13px; padding: 5px 7px; }
  .gs-row input, .gs-row select { box-sizing: border-box; width: 120px; flex: none; }   /* every answer on the left one length */
  .gs-team { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  .gs-team input { flex: 1; min-width: 0; font-size: 13px; padding: 5px 7px; }
  .gs-swatch { flex: none; width: 26px; height: 26px; border: 2px solid oklch(.97 .008 255 / .5); cursor: pointer; padding: 0; transform: skewX(var(--lean)); }
  .gs-swatch:hover { border-color: var(--fg); }
  .gs-need { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .gs-need > span { flex: 1; color: var(--fg2); }
  .gs-role { margin: 10px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gs-wear { flex-wrap: wrap; } .gs-need.gs-wear select.gs-look { width: 100%; }
  .gs-need select.gs-look { width: 96px; font-size: 12px; padding: 4px 5px; }
  .gi-row input[type=checkbox] { width: auto; align-self: flex-start; transform: scale(1.2); box-shadow: none; }
  .gs-need em { font-style: normal; color: var(--fg3); font-size: 12px; }
  .gs-need input { width: 64px; font-size: 13px; padding: 5px 7px; }
  .gs-max { margin-top: -2px; } .gs-max .gs-mark { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg2); } .gs-max input[type=checkbox] { width: auto; }
  .ge-pop { position: fixed; z-index: 40; display: none; width: 288px; padding: 8px; background: var(--bg); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
  .ge-pop.show { display: grid; } .ge-pop:not(.show) { display: none; }
  .gs-prob { margin: 4px 0; padding: 6px 9px; line-height: 1.35; box-shadow: inset 3px 0 0 #f0a63a; background: rgb(240 166 58 / .1); cursor: pointer; }
  .gs-prob.bad { box-shadow: inset 3px 0 0 #ff6b5e; background: rgb(255 107 94 / .12); }
  .gn.iffy::after, .gn.bad::after { content: '!'; position: absolute; right: -7px; top: -7px; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
    font: 700 11px/1 var(--fb); color: #1a1015; background: #f0a63a; border-radius: 50%; }
  .gn.bad::after { background: #ff6b5e; }
  .gn.note { height: auto; min-height: 54px; border-style: dashed; }
  .gn.note .gtx { padding: 8px 9px; } .gn.note .gtx small { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--fg2); }
  .gi-row textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px; }
  #geCanvas { position: relative; overflow: hidden; cursor: default; background-color: var(--bg4);
    background-image: radial-gradient(circle, oklch(.97 .008 255 / .1) 1px, transparent 1.2px); }
  #geCanvas.panning { cursor: grabbing; }
  #geWorld { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  #geWires { position: absolute; left: 0; top: 0; overflow: visible; }
  #geWires path { fill: none; }
  #geWires path.w { stroke-width: 2; pointer-events: none; }
  #geWires path.w.sel { stroke: var(--ac) !important; stroke-width: 3; }
  #geWires path.w.temp { stroke: var(--ac); stroke-dasharray: 6 4; }
  #geWires path.hit { stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
  .gn { position: absolute; width: 200px; height: 54px; display: flex; align-items: stretch; background: var(--bg); border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: grab; user-select: none; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); overflow: visible; }
  .gn.sel { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
/* the accent's own pink whatever accent is picked */
  .gn.must { border: 2px solid oklch(.70 .22 355); }
  .gn.req { border: 2px solid #9a94a3; }
  .gn.sel { border-color: var(--ac); }
  .gn.shake { animation: geShake .35s; }
  @keyframes geShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
  .gic { flex: none; width: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: var(--cc); }
  .gtx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 9px; gap: 2px; }
  .gtx b { font: italic 700 15px var(--fd); letter-spacing: .02em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gtx small { font-size: 11px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gin { position: absolute; width: 7px; height: 7px; background: var(--bg4); border: 2px solid var(--cc); left: 50%; top: -6px; transform: translateX(-50%); }
  .gout { position: absolute; width: 7px; height: 7px; bottom: -6px; transform: translateX(-50%); cursor: crosshair; background: var(--bg4); border: 2px solid var(--cc);
    display: flex; align-items: center; justify-content: center; font: bold 9px/1 var(--fb); font-style: normal; color: #fff; }
  .gout:hover { background: var(--ac); color: var(--onac); }
/* in / out sit on the edges: drawn over the tile, unclipped */
  .gn { clip-path: none; }
  .gout.o-yes, .gout.o-no, .gout.o-next, .gout.o-over { width: 11px; height: 11px; bottom: -8px; }
  .gout.o-yes { background: #2f7d3a; border-color: #7fc97f; } .gout.o-no { background: #8f3328; border-color: #e0816b; }
  .gout.o-next { background: #4a4552; border-color: #b7b0c0; } .gout.o-over { background: #8a6a17; border-color: #ffc23a; }
  #geInspect { margin-bottom: 12px; padding: 12px; background: var(--bg); clip-path: var(--chamfer); }
  #geInspect.empty { display: none; }
  .gi-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: italic 700 18px var(--fd); letter-spacing: .02em; color: var(--fg); }
  .gi-head i { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-style: normal; background: var(--cc); }
  .gi-give { margin-bottom: 8px; font-size: 12px; color: var(--fg3); line-height: 1.4; }
  .gi-row { display: flex; flex-direction: column; gap: 3px; margin: 7px 0; } .gi-row > span { font-size: 12px; color: var(--fg2); }
  .gi-row input, .gi-row select { width: 100%; box-sizing: border-box; }
  .ge-cols { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; }
  .ge-cols i { aspect-ratio: 1; cursor: pointer; } .ge-cols i.on { outline: 2px solid var(--fg); outline-offset: 1px; position: relative; z-index: 1; }
  .gi-del { margin-top: 8px; width: 100%; font: italic 700 14px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--ac2); --sb: var(--bg2); padding: 7px; cursor: pointer; }
  .gi-del:hover { --sb: var(--ac3); color: var(--fg); }
  #geFilter { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
  .gp-cat { width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; padding: 6px 9px; font: italic 700 15px var(--fd);
    letter-spacing: .04em; text-transform: uppercase; color: var(--fg); background: var(--bg); border: 0; box-shadow: inset 3px 0 0 var(--cc); cursor: pointer; }
  .gp-cat b { font: 600 11px var(--fb); padding: 1px 7px; border: 1px solid var(--cc); }
  .gp-item { display: flex; align-items: center; gap: 8px; margin: 3px 0; padding: 4px 6px 4px 4px; border: 1px solid var(--line); cursor: grab; user-select: none; }
  .gp-item:hover { background: var(--bg2); border-color: var(--cc); }
  .gp-item.must { border-color: oklch(.70 .22 355 / .75); } .gp-item.req { border-color: rgba(154,148,163,.75); }
  .gp-item.have { cursor: pointer; opacity: .62; } .gp-item.have:hover { opacity: 1; }
  .gp-item i { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; color: #fff; background: var(--cc); }
  .gp-ghost { position: fixed; z-index: 30; transform: translate(-50%,-50%); padding: 10px 14px; pointer-events: none; color: var(--fg); font: italic 700 15px var(--fd);
    background: var(--bg); box-shadow: inset 6px 0 0 var(--cc); opacity: .9; }
  body.edwarn #edWarn { display: block; }
  #edWarn { z-index: 17; width: min(420px, calc(100vw - 32px)); }
  #edWarn p { margin: 0 0 14px; color: var(--fg2); }
/* it paints models, not the world */
  body.editor #palGrid div.lc::after, body.editor #palGrid div.wc::after, body.editor #palGrid div.vc::after { content: none; }
  body.saving #saveBox { display: block; }
  body.saving #pause { visibility: hidden; }
  #saveBox { z-index: 16; width: min(500px, calc(100vw - 32px)); }
  #saveBox .row input { max-width: none; }
  #esTeam .meter { position: relative; flex: 1; height: 10px; background: var(--bg3); overflow: hidden; transform: skewX(var(--lean)); }
  #esTeam .meter b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff5a5a, #ffd84a, #5ce07a, #4ab8ff, #b07aff); }
  #esTeam .meter i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fg); }
  #esTeam.low output { color: var(--ac2); }
  #esTeam output { min-width: 108px; text-align: right; font-size: 13px; }
  body.editor #ui, body.editor #fps { display: none; }
  body.editor #palette { display: block; pointer-events: auto; }
  body.editor #palSize { display: none; }
  body.editor #palGrid div { cursor: pointer; }
  body.editor canvas { cursor: crosshair; }
  #controls { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none; z-index: 20; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px); overflow: auto; padding: 18px 24px 20px; color: var(--fg); background: var(--panel); font: 500 13px var(--fb); }
  #controls.open { display: block; }
  #controls { scrollbar-width: none; } #controls::-webkit-scrollbar { display: none; }
  #controls .head { display: flex; align-items: center; justify-content: space-between; font: italic 800 26px var(--fd); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 10px; }
  #controls .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 44px; }
  #controls { width: min(920px, calc(100vw - 32px)); box-sizing: border-box; }
  #controls .grp + .grp { margin-top: 14px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--line); }
  #controls h3 { margin: 0 0 2px; font: italic 800 20px var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); }
  #controls:not([data-ctx=all]) .grp > h3 { display: none; } #controls:not([data-ctx=all]) .grp + .grp { margin: 0; padding: 0; box-shadow: none; }
  #controls h4 { margin: 10px 0 6px; font: italic 700 14px var(--fd); color: var(--fg3); letter-spacing: .1em; text-transform: uppercase; }
  #controls dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0; }
  #controls dt { color: var(--fg2); }
/* data-ctx set by toggleControls */
  #controls:not([data-ctx=all]) section { display: none; }
  #controls[data-ctx=fp] section[data-show=fp], #controls[data-ctx=mapedit] section[data-show=mapedit],
  #controls[data-ctx=mapedit-fp] section[data-show=mapedit-fp], #controls[data-ctx=models] section[data-show=models],
  #controls[data-ctx=modeedit] section[data-show=modeedit] { display: block; }
  #controls:not([data-ctx=all]) .cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  #controls dd { margin: 0; text-align: right; font: italic 700 14px var(--fd); letter-spacing: .03em; }
    @media (max-width: 560px) { #controls .cols { grid-template-columns: 1fr; } }
  #toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 9px 18px; color: var(--fg); --sb: var(--plate);
    font: 500 14px var(--fb); opacity: 0; transition: opacity .3s; pointer-events: none; }
  #toast.show { opacity: 1; }
  #fps { position: fixed; left: 16px; top: 14px; color: var(--fg); font: italic 700 15px var(--fd); text-shadow: var(--halo); display: none; pointer-events: none; }
  #ui { position: fixed; top: 16px; left: 22px; display: none; margin: 0; }
  body.mapedit #ui { display: flex; } body.mapedit #fps { top: 60px; }   /* in a match the host picks the next game on the end screen (#nextGame) */
  body.mapedit.locked #ui { opacity: .55; pointer-events: none; }
  #nextGame { position: fixed; left: 40px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; padding: 18px 20px; z-index: 5;
    background: var(--panel); color: var(--fg); font: 500 14px var(--fb); animation: pauseIn .6s ease both; }
  body.hosting.between #nextGame, body.owner.between #nextGame { display: flex; }
  body.paused #nextGame { display: none; }
  #overExit { position: fixed; right: 26px; bottom: 96px; display: none; z-index: 13; padding: 11px 30px; font-size: 19px; animation: pauseIn .6s ease both; }
  #overSwap { position: fixed; left: 26px; bottom: 96px; display: none; z-index: 13; padding: 11px 30px; font-size: 19px; animation: pauseIn .6s ease both; }
  body.online.gameover:not(.locked):not(.paused):not(.touch) #overExit { display: block; }
  body.online.gameover.teams:not(.locked):not(.paused):not(.joining) #overSwap { display: block; }
  #joinTeams button:disabled { opacity: .3; cursor: default; filter: grayscale(.6); }
  #nextGame h5 { margin: 0 0 2px; font: italic 800 20px var(--fd); letter-spacing: .02em; text-transform: uppercase; }
  #nextGame label { display: flex; flex-direction: column; gap: 4px; }
  #nextGame span { font: italic 600 13px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
  #nextGame select { font-size: 15px; padding: 6px 8px; min-width: 200px; cursor: pointer; }
  #nextGame select:hover { background: var(--bg2); }
  #hud, #hudMsg, #hudCount, #hudOver, #hudProg, #hudWays, #board, #killfeed, #respawn { transition: opacity .3s; }
  body.paused #hud, body.paused #hudMsg, body.paused #hudCount, body.paused #hudOver, body.paused #hudProg, body.paused #hudWays, body.paused #board, body.paused #killfeed, body.paused #respawn, body.paused #killedBy, body.paused #specCard { opacity: 0 !important; }
  body.paused #pause { animation: pauseIn .3s ease-out; }
  @keyframes pauseIn { from { opacity: 0; } }
  body.match #killfeed { top: 12px; }   /* level with the score at the top (user) */
  #hud { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 0; pointer-events: none;
    color: var(--fg); font: 500 14px var(--fb); }
  body.online.fp #hud { display: flex; }
  #hudScore { display: flex; gap: 0; padding: 0 8px; }
  .hs-team { --sb: var(--tc); display: grid; grid-template-columns: auto auto; align-items: center; gap: 1px 10px; padding: 6px 18px 7px; color: #fff; }
  .hs-team.lt { color: var(--bg4); }
  .hs-name { grid-column: 1 / 3; font: italic 700 12px var(--fd); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
  .hs-bar { width: 140px; height: 6px; background: rgb(0 0 0 / .3); transform: skewX(var(--lean)); }
  .hs-bar b { display: block; height: 100%; background: currentColor; transition: width .3s; }
  .hs-num { font: italic 800 26px/1 var(--fd); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
  .hs-pips { grid-column: 1 / 3; display: flex; gap: 5px; }
  .hs-pips i { width: 10px; height: 8px; border: 1.5px solid currentColor; transform: skewX(var(--lean)); }
  .hs-pips i.on { background: currentColor; }
  .hs-alive { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 3px; max-width: 176px; font: italic 700 13px var(--fd); font-variant-numeric: tabular-nums; }
  .hs-alive i { width: 6px; height: 11px; background: currentColor; opacity: .3; transform: skewX(var(--lean)); }
  .hs-alive i.on { opacity: 1; }
  .hs-alive i.more { position: relative; } .hs-alive i.more::after { content: '+'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%) skewX(calc(-1 * var(--lean))); font: 800 10px/1 var(--fb); color: var(--tc); }   /* over 10: the 11th says so */
  .hs-left { --tc: var(--bg3); }
  /* Players alive as faces (hud.js): your side on the left edge, the rest on the right, faces at the edge */
  #hudFaces { display: none; pointer-events: none; transition: opacity .3s; }
  body.online.fp.faces #hudFaces { display: block; } body.gameover #hudFaces, body.paused #hudFaces { opacity: 0; }
  .hf-side { position: fixed; top: var(--facesTop, 33.333vh); display: flex; flex-direction: column; gap: 10px; transition: top .25s ease-out; }   /* placeFaces */
  .hf-side.l { left: 0; align-items: flex-start; } .hf-side.r { right: 0; align-items: flex-end; }   /* each box as long as its name */
  .hf-row { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; row-gap: 0; padding: 5px 14px 6px 6px; background: oklch(.17 .022 255 / .3); transition: transform .4s ease-out; }
  .hf-face { grid-row: 1 / 3; position: relative; --hp: 1; width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--tc); }
  .hf-face img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
  .hf-hit { position: absolute; inset: 0; background: #ff2a2a; opacity: 0; animation: hfHit .4s linear both; }
  @keyframes hfHit { from { opacity: .4; } to { opacity: 0; } }
  .hf-face.dead img { filter: grayscale(1) brightness(.55); }
  .hf-face.back img { animation: hfBack .4s linear var(--bt, 0s) both; }   /* FACE_BACK: the colour comes back */
  @keyframes hfBack { from { filter: grayscale(1) brightness(.55); } to { filter: none; } }
  .hf-redact { position: absolute; left: 0; right: 0; top: 20%; height: 40%; background: #000; animation: hfRedact .5s linear both; }   /* rows 2 and 3: over the eyes, wiped in left to right (user) */
  @keyframes hfRedact { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  .hf-row.going { animation: hfGone 2s linear both; }   /* FACE_X: faded over its last half second */
  @keyframes hfGone { 75% { opacity: 1; } to { opacity: 0; } }
  .hf-name { font: italic 700 18px/1 var(--fd); letter-spacing: .05em; text-transform: uppercase; color: var(--fg); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hf-face .hf-drain { position: absolute; inset: 0; filter: grayscale(1) brightness(.55); clip-path: inset(0 0 calc(var(--hp) * 100%) 0); }   /* the health lost, from the top (user) */
  .hf-line { position: absolute; left: 0; right: 0; bottom: calc(var(--hp) * 100%); height: 1px; background: var(--tc); opacity: .7; }
  .hf-side.r .hf-row { padding: 5px 6px 6px 14px; } .hf-side .hf-row.foe { padding: 6px; grid-template-columns: auto; } .hf-side .hf-row.foe .hf-face { grid-column: 1; }   /* no name: the face alone, no gap for one */
  .hf-side.r .hf-face { grid-column: 2; } .hf-side.r .hf-name { grid-column: 1; justify-self: end; }
  .hf-name { grid-row: 1 / 3; }   /* level with the face */
  #hudTimers { --sb: var(--plate); padding: 5px 20px 6px; font: italic 700 18px var(--fd); letter-spacing: .04em; white-space: pre; text-align: center; font-variant-numeric: tabular-nums; }
  #hudTimers:empty { display: none; }
  #hudShows { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; }
  #hudShows:empty { display: none; }
  #hudShows div { --sb: var(--plate); padding: 3px 16px 4px; font: italic 700 15px var(--fd); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
  body.gameover #hudShows { display: none; }
  #hudNote { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; }
  #hudNote div { --sb: var(--plate); padding: 3px 14px; transition: opacity .7s; }
  #hudNote div.out { opacity: 0; }
  #hudMsg { position: fixed; left: 50%; top: 28%; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; white-space: nowrap;
    font: italic 800 48px var(--fd); letter-spacing: .01em; text-transform: uppercase; color: var(--fg); text-shadow: 0 3px 18px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); }
  #hudMsg.show { animation: hudMsg 5.4s ease forwards; }   /* tuned: user's pick */
  @keyframes hudMsg { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.85); } 6.3%, 84.3% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; } }
  #hudCount { position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%); pointer-events: none; opacity: 0; z-index: 11;
    font: italic 800 140px/1 var(--fd); color: var(--fg); text-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8); }
  #hudCount.show { animation: hudCount 1s ease-out forwards; }
  #hudCount.last { color: var(--ac2); }
  #hudCount.go { font-size: 170px; letter-spacing: .02em; color: var(--ac); animation: hudGo 1.2s ease-out forwards; }
  @keyframes hudCount { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.85); } }
  @keyframes hudGo { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 20% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); } }
  body:not(.online) #hudCount { display: none; }
  #hudOver { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); display: none; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
    padding: 18px 34px 20px; background: var(--panel); color: var(--fg); font: 500 15px var(--fb); z-index: 11; }
  #hudOver.show { display: flex; animation: hudOver .9s ease both; }
  @keyframes hudOver { from { opacity: 0; transform: translate(-50%,-46%) scale(.9); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
  #hudOver > small { font: italic 700 16px var(--fd); letter-spacing: .3em; text-transform: uppercase; color: var(--mc, var(--fg)); filter: brightness(1.25); }
  #hudOver > b { font: italic 800 68px/1 var(--fd); text-transform: uppercase; letter-spacing: .01em; color: var(--oc, var(--fg)); filter: brightness(1.25); white-space: nowrap; }
  #hudOver .ho-board { display: flex; flex-direction: column; gap: 4px; min-width: 260px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--line); }
  .ho-row { display: flex; justify-content: space-between; gap: 30px; font: italic 700 20px var(--fd); text-transform: uppercase; letter-spacing: .03em; } .ho-row span { color: var(--tc); filter: brightness(1.35); }
  .ho-row b { font: italic 800 22px var(--fd); color: var(--fg); filter: none; letter-spacing: 0; font-variant-numeric: tabular-nums; } .ho-row.first { font-size: 24px; } .ho-row.first b { font-size: 26px; }
  #hudOver > span { font: italic 600 16px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); white-space: pre; }
  body.gameover #hudWays, body.gameover #hudTimers, body.gameover #hudMsg { display: none !important; }
  #hudProg { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
    color: var(--fg); font: italic 700 17px var(--fd); letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--halo); }
  #hudProg.show { display: flex; }
  #hudProg div { width: 230px; height: 8px; background: oklch(.17 .022 255 / .7); transform: skewX(var(--lean)); overflow: hidden; }
  #hudProg b { display: block; height: 100%; background: var(--ac); }
  #hudWays { position: fixed; inset: 0; pointer-events: none; display: none; }
  body.online.fp #hudWays { display: block; }
  #hudWays .way { position: absolute; transform: translate(-50%,-50%); padding: 4px 14px; --sb: var(--plate); --su: inset 0 0 0 3px var(--wc);
    font: italic 800 19px var(--fd); color: var(--fg); text-shadow: var(--halo); white-space: nowrap; }
  #hudWays .way.here { top: 128px; font-size: 32px; padding: 5px 26px; --su: inset 0 0 0 4px var(--wc); animation: wayHere 1.6s ease-in-out infinite; }
  @keyframes wayHere { 50% { filter: drop-shadow(0 0 10px var(--wc)); } }
  #hudWays .way.name { --sb: transparent; --su: none; padding: 0; font: 700 clamp(14px, .85vw, 18px) var(--fb);   /* 16px at 1920 wide; phones keep 12px */
    color: var(--wc);
    text-shadow: 0 0 3px #000, 0 1px 2px #000; filter: brightness(1.35); }
  #hudWays .way.armed { animation: wayArmed .5s steps(2) infinite; }
  @keyframes wayArmed { 50% { --su: inset 0 0 0 3px #fff; } }
  #hudWays .way.far { opacity: .75; }
  #hudWays .way.role { --sb: var(--wc); --su: none; font-size: 13px; letter-spacing: .04em; }
/* eight a side fit, more scroll */
  #board { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none; align-items: flex-start; gap: 28px; padding: 20px 28px;
    max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: oklch(.97 .008 255 / .35) transparent;
    background: var(--panel); color: var(--fg); font: 500 15px var(--fb); z-index: 12; }
  #board.show { display: grid; }   /* a column a side (renderBoard), spectators across under them */
  #board section.specs { grid-column: 1 / -1; } #board.three > section:nth-child(3) { grid-column: 1 / -1; justify-self: center; }   /* 3 sides: the third centred under */ #board .specs h4 { color: var(--fg3); filter: none; font-size: 15px; margin-bottom: 4px; }
  #board .specs div { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 600; color: var(--fg2); }
/* under the winner, as tall as the screen leaves */
  #board.over { top: calc(30vh + 132px); bottom: auto; transform: translateX(-50%); max-height: calc(70vh - 148px); }
/* narrow screens: Swap team and Exit go to the top corners, clear of the scoreboard */
  @media (max-width: 1240px) { body:not(.touch) #overSwap, body:not(.touch) #overExit { bottom: auto; top: 16px; } }
  #board.over, body.touch #board { pointer-events: auto; touch-action: pan-y; }
  #hudOver.up { top: calc(30vh + 120px); translate: 0 -50%; transition: top .6s ease, translate .6s ease; }   /* its foot 12px over the board, however tall (translate: the entry animation holds transform) */
  body.gameover #health, body.gameover #ammo { display: none; }   /* under the post-game buttons */
  #hudDealt { position: fixed; right: calc(22px + var(--facesR, 0px)); top: 38%; display: none; min-width: 180px; padding: 12px 16px; background: var(--panel);
    color: var(--fg); font: 500 14px var(--fb); pointer-events: none; z-index: 11; }
  #hudDealt.show { display: block; animation: dealtIn .25s ease-out; }
  @keyframes dealtIn { from { opacity: 0; transform: translateX(16px); } }
  #hudDealt h5 { margin: 0 0 6px; font: italic 700 13px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
  #hudDealt div { display: flex; justify-content: space-between; gap: 18px; margin: 3px 0; } #hudDealt span { font: italic 700 15px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } #hudDealt b { font: italic 800 17px var(--fd); font-variant-numeric: tabular-nums; color: var(--fg); }
/* just over the Killed by card */
  #hudPts { position: fixed; left: 50%; bottom: calc(23% + 100px); transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; pointer-events: none; z-index: 11; }
  #hudPts div { font: italic 700 17px var(--fd); letter-spacing: .03em; text-transform: uppercase; color: var(--fg); text-shadow: 0 1px 3px rgba(0,0,0,.8); animation: ptsUp 2.6s ease-out forwards; white-space: nowrap; }
  #hudPts div b { color: var(--ac2); margin-right: 8px; font-size: 22px; font-weight: 800; } #hudPts div.assist b { color: var(--fg); font-size: 18px; }
  #hudPts div span { color: var(--tc, #fff); }
  #hudPts div.held { animation-name: ptsHeld; }   /* added to while up: stays put, no fading in again */
  @keyframes ptsHeld { 0%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
  @keyframes ptsUp { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
  #board td i.bot { font: italic 600 11px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); margin-left: 6px; }
  #board h4 { margin: 0 0 8px; font: italic 800 22px var(--fd); letter-spacing: .02em; text-transform: uppercase; filter: brightness(1.3); }
  #board table { border-collapse: collapse; }
  #board th { font: italic 600 13px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); padding: 0 10px 4px; text-align: right; }
  #board td { padding: 4px 10px; text-align: right; font-variant-numeric: tabular-nums; }
  #board td:first-child { text-align: left; min-width: 120px; font-weight: 600; }
  #board tr.me td { background: var(--ac); color: var(--onac); }
  #board tr.me td:first-child { clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%); }
  #board tr.me td i.bot { color: inherit; }
  #board tr.dead td { opacity: .4; }
  #board td i.host { display: inline-block; font: italic 700 11px/16px var(--fd); width: 16px; text-align: center; margin-left: 6px; background: var(--bg3); color: var(--ac); vertical-align: 1px; }
  body.dying #cross, body.dying #gunCross, body.spectating #cross, body.spectating #gunCross, body.spectating #ammo, body.spectating #palette, body.spectating #health { display: none !important; }

  #menu { position: fixed; left: max(24px, 7vw); top: 0; bottom: 0; display: none; flex-direction: column; justify-content: center; z-index: 1; }
  body.menu #menu { display: flex; }
  #menu::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, oklch(.12 .02 255 / .5), oklch(.12 .02 255 / .15) 34%, transparent 52%); }
  #version { position: fixed; right: 18px; bottom: 50px; display: none; font: italic 600 13px var(--fd); letter-spacing: .08em; color: var(--fg); opacity: .4; pointer-events: none; z-index: 2; }
  body.menu #version { display: block; }
  body.browsing #version, body.creating #version, body.settings #version { display: none; }
  #pnBtn { position: fixed; right: 18px; bottom: 14px; display: none; z-index: 2; isolation: isolate; background: none; border: 0; border-radius: 0; cursor: pointer;
    font: italic 700 16px/1 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); padding: 6px 16px 6px 13px; }
  #pnBtn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--lean)); background: oklch(.29 .03 255 / .86); background-image: linear-gradient(to top, var(--ul, transparent) var(--uw, 0px), transparent var(--uw, 0px)); box-shadow: var(--su, none); transition: box-shadow .128s; }
  #pnBtn:hover, #pnBtn:focus-visible { outline: none; --ul: var(--ac); --uw: 3px; }
  body.menu #pnBtn { display: block; }
  body.browsing #pnBtn, body.creating #pnBtn, body.settings #pnBtn, body.joining #pnBtn, body.menu-maps #pnBtn, body.patchnotes #pnBtn, body.patchnotes #version { display: none; }
  body.patchnotes #patchNotes { display: block; } body.patchnotes #menu { visibility: hidden; }   /* the list alone: the menu would show through */
  #patchNotes { z-index: 16; width: min(460px, calc(100vw - 32px)); }
  #pnList { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 6px; }
  #pnList .pn { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid oklch(1 0 0 / .08); }
  #pnList .pn:first-child { border-top: 0; padding-top: 2px; }
  #pnList .pn b { font: italic 800 19px var(--fd); letter-spacing: .03em; color: var(--fg); }
  #pnList .pn span { color: var(--fg2); font-size: 15px; }
  body.touch #pnBtn { font-size: 13px; padding: 5px 12px 5px 10px; right: calc(14px + var(--sa-right)); bottom: 10px; }
  body.touch #version { right: calc(14px + var(--sa-right)); bottom: 38px; font-size: 11px; }
  body.touch #patchNotes .head { font-size: 22px; margin-bottom: 4px; } body.touch #pnList { max-height: calc(100 * var(--vh) - 150px); }
  body.touch #pnTabs { margin: 2px 0 6px; } body.touch #pnTabs button { font-size: 13px; padding: 6px 14px; } body.touch #pnList .pn { padding: 6px 0; }
  body.touch #pnList .pn b { font-size: 16px; } body.touch #pnList .pn span { font-size: 13px; }
  #menuEditor { display: none; }
  #menuPlay { display: none; }
  body.menu-editor #menuEditor, body.menu-play #menuPlay { display: flex; } body.menu-editor #menuMain, body.menu-play #menuMain { display: none; }
  #pause { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none; align-items: center; }
  body.paused #pause { display: flex; }
  body.paused #pause::before { content: ''; position: fixed; inset: -100vmax; z-index: -1; pointer-events: none; background: oklch(.12 .02 255 / .45); }
  #pause { isolation: isolate; }
  body.paused #pause button { text-align: center; min-width: 260px; align-self: stretch; }
  .menu-list { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; user-select: none; }
  .menu-list button:not(.del) { font: italic 700 32px/1 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); --sb: oklch(.29 .03 255 / .86);
    padding: 9px 30px 9px 24px; min-width: 250px; text-align: left; cursor: pointer; transition: transform .128s, color .128s; }
  .menu-list button:not(.del):focus-visible { outline: none; }
  .menu-list button.pri:not(.del) { --sb: var(--ac); color: var(--onac); --ul: var(--onac); --uw: 4px; transform: translateX(8px); }
  #pause button.pri { transform: none; }
  #menuMain button[data-go=multi] { font-size: 48px; padding: 11px 36px 12px 28px; }
  body.touch #menuMain button[data-go=multi] { font-size: 33px; }
  #menuMain button:nth-child(2), #menuEditor button:nth-child(2), #menuPlay button:nth-child(2) { margin-left: 12px; }
  #menuMain button:nth-child(3), #menuEditor button:nth-child(3), #menuPlay button:nth-child(3) { margin-left: 24px; }
  #menuMain button:nth-child(4), #menuEditor button:nth-child(4), #menuPlay button:nth-child(4) { margin-left: 36px; }
  #menuPlay button.sub { margin-left: 64px; margin-top: -4px; margin-bottom: 10px; font-size: 24px; min-width: 206px; }   /* one of Multiplayer's: smaller, further in */
  .menu-list button:disabled { opacity: .38; cursor: default; }
  .menu-list button.back { font-size: 22px; margin-top: 10px; min-width: 0; --sb: oklch(.17 .022 255 / .6); color: var(--fg2); }
  #pause button.back { font-size: 32px; margin-top: 0; min-width: 260px; --sb: oklch(.19 .025 255 / .86); color: var(--fg); }
  #pause button.back.pri { --sb: var(--ac); color: var(--onac); }
  body.touch #pause button.back { font-size: 22px; min-width: 190px; }

  .card { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none; z-index: 15; width: min(580px, calc(100vw - 32px));
    max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px 26px 22px; color: var(--fg); background: var(--panel); font: 500 15px var(--fb); scrollbar-width: thin; }
  body.settings #settings { display: block; }
  body.settings #menu, body.settings #pause { visibility: hidden; }
  .card .head { display: flex; align-items: center; gap: 10px; font: italic 800 30px/1.1 var(--fd); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
  .card .head span { flex: 1; }
  .card .head button { font-size: 15px; }
  .card > .tabs { display: flex; gap: 4px; margin: 4px 0 12px; padding: 0 6px; }
  .card > .tabs button { position: relative; isolation: isolate; border: 0; background: none; font: italic 700 16px/1 var(--fd); letter-spacing: .05em; text-transform: uppercase;
    color: var(--fg2); padding: 9px 20px; cursor: pointer; }
  .card > .tabs button::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--lean)); background: var(--sb, var(--bg3)); background-image: linear-gradient(to top, var(--ul, transparent) var(--uw, 0px), transparent var(--uw, 0px)); box-shadow: var(--su, none); }
  .card > .tabs button:hover:not(.on) { --sb: var(--bg2); color: var(--fg); }
  .card > .tabs button.on { --sb: var(--fg); color: var(--bg4); }
  .card h4 { margin: 18px 0 8px; font: italic 700 15px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
  .card .row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
  .card .row > label { flex: 0 0 160px; color: var(--fg2); }
  .card .imp { position: relative; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 11px;
    border: 1px solid oklch(.97 .008 255 / .4); border-radius: 50%; opacity: .7; cursor: default; vertical-align: 1px; }
  .card .imp:hover, .card .imp:focus-visible { opacity: 1; outline: none; }
  .card .imp .tip { display: none; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 2; width: max-content; max-width: 220px;
    padding: 6px 9px; font-size: 12px; line-height: 1.4; text-align: left; color: var(--fg); background: var(--bg4); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  .card .imp:hover .tip, .card .imp:focus-visible .tip { display: block; }
  .card .seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 5px; }
  .card .seg button { font: italic 700 14px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); --sb: var(--bg3); padding: 7px 12px; cursor: pointer; }
  .card .seg button:hover:not(.on):not(:disabled) { --sb: var(--bg2); color: var(--fg); }
  .card .seg button.on { --sb: var(--fg); color: var(--bg4); }
  .card .seg button:disabled { opacity: .45; cursor: default; }
  .card select.dim { opacity: .45; }   /* set aside for Random */
  .card input[type=range] { flex: 1; }
  .card output { min-width: 44px; text-align: right; font: italic 700 16px var(--fd); font-variant-numeric: tabular-nums; }
  .card input[type=text] { flex: 1; max-width: 230px; }
  .card .soon { font-size: 12px; color: var(--fg3); }
  .card button:disabled { opacity: .45; cursor: default; }
  .card .bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 0 4px; }
  .card .bar input { flex: 1; min-width: 120px; }
  .card .bar .lbl { font: italic 600 14px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
  .card .grow { flex: 1; }
  .card button.tog { color: var(--fg2); }
  .card input[type=checkbox] { width: 18px; height: 18px; }
  .card.wide { width: min(880px, calc(100vw - 32px)); }
  body.browsing #browser, body.creating #create { display: block; }
  body.browsing #menu, body.creating #menu, body.creating #browser { visibility: hidden; }
  #create { z-index: 16; }
  #browser .list { height: min(52vh, 460px); overflow-y: auto; margin-top: 12px; background: var(--bg3); scrollbar-width: thin; }
  #browser table { width: 100%; border-collapse: collapse; }
  #browser th { position: sticky; top: 0; z-index: 1; text-align: left; font: italic 700 14px var(--fd); letter-spacing: .08em; text-transform: uppercase;
    color: var(--fg3); background: var(--bg3); padding: 8px 12px; box-shadow: inset 0 -1px 0 var(--line); }
  #browser td { padding: 7px 12px; box-shadow: inset 0 1px 0 oklch(.97 .008 255 / .05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
  #browser td:nth-child(2) { font-variant-numeric: tabular-nums; }
  #browser tbody tr { cursor: pointer; user-select: none; }
  #browser tbody tr:hover { background: var(--bg2); }
  #browser tbody tr.sel { background: var(--bg2); box-shadow: inset 4px 0 0 var(--ac); }
  #browser tbody tr.full { opacity: .5; }
  #brNote { padding: 28px 12px; text-align: center; color: var(--fg3); }
  #brNote:empty { display: none; }
  #brNote.warn { color: var(--fg); font: italic 700 24px/1.35 var(--fd); max-width: 640px; margin: 0 auto; }
  @media (max-width: 640px) { #browser th:nth-child(n+4), #browser td:nth-child(n+4) { display: none; } }
  #pauseInfo { margin-bottom: 16px; text-align: center; font: 500 16px/1.6 var(--fb); color: var(--fg); text-shadow: var(--halo); }
  #pauseInfo:empty { display: none; } #pauseInfo.plain { font: italic 700 16px/1.6 var(--fd); letter-spacing: .08em; text-transform: uppercase; }
  #pauseInfo div + div { font: italic 700 15px/1.6 var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
  #pauseInfo .name { font: italic 800 26px/1.2 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); margin-bottom: 4px; }
  #pauseInfo .lbl, #pauseInfo .code { font: italic 800 19px var(--fd); letter-spacing: .14em; text-transform: uppercase; }
  #pauseInfo .lbl { color: var(--fg2); margin-right: 8px; }
  #pauseInfo .code { color: var(--fg); }
  #pauseInfo .codeline { cursor: pointer; } #pauseInfo .codeline:hover .code { color: var(--ac2); }
  #pauseInfo button.code { font: italic 800 19px var(--fd); letter-spacing: .14em; color: var(--fg); --sb: var(--bg2); padding: 2px 12px; cursor: pointer; transform: none; opacity: 1; min-width: 0; }

  #menuMaps { display: none; max-height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; padding: 6px 16px 6px 8px; gap: 7px; }
  #menuMaps button:not(.del) { font-size: 26px; padding: 8px 26px 8px 20px; }
  #menuSaved { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
  #menuSaved:not(:empty) { margin: 2px 0; }
  #menuSaved .saved { display: flex; align-items: center; gap: 6px; }
  .menu-list #menuSaved button.del { font-size: 22px; color: var(--fg); background: none; border: 0; opacity: 0; padding: 0 6px; cursor: pointer; text-shadow: var(--halo); }
  #menuSaved .saved:hover button.del { opacity: .55; }
  .menu-list #menuSaved button.del:hover { opacity: 1; color: var(--ac2); transform: none; }
  body.menu-maps #menuMaps { display: flex; }
  body.menu-maps #menuMain, body.menu-maps #menuEditor, body.menu-maps #menuPlay { display: none; }
  #menuStd { display: contents; }

  #meBar { position: fixed; top: 16px; right: 22px; display: none; margin: 0; }
  body.mapedit #meBar { display: flex; }
  body.mapedit.locked #meBar { opacity: .55; pointer-events: none; }
  body.mapedit #meBar button:disabled { opacity: .4; cursor: default; }
  body.mapedit #health, body.mapedit #palLight { display: none; }
  body.mapedit #palette { display: block; pointer-events: auto; }
  body.mapedit #palGrid div, body.mapedit #palSize { cursor: pointer; }
  body.mapedit #palGrid { grid-template-columns: repeat(8, 20px); cursor: pointer; }
  body.mapedit #palGrid div { width: 20px; height: 20px; }
  body.mapedit #palGrid div.lc::after { margin: 8px; }
  body.mapedit canvas { cursor: crosshair; }
  #palMat { display: none; gap: 4px; margin-bottom: 8px; padding: 0 4px; }
  body.mapedit #palMat { display: flex; }
  #palMat button { flex: 1; font: italic 700 13px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); --sb: var(--bg3); padding: 5px 0; cursor: pointer; }
  #palMat button.on { --sb: var(--fg); color: var(--bg4); }
  #palMat button[hidden] { display: none; }
  body.mapedit #palGrid div.wc::after { content: ''; display: block; width: 10px; height: 2px; margin: 9px 5px; border-radius: 1px; background: rgba(255,255,255,.75); }
  body.mapedit #palGrid div.vc::after { content: ''; display: block; width: 5px; height: 5px; margin: 7.5px; background: rgba(60,0,0,.6); transform: rotate(45deg); }
  #palMat button:disabled { opacity: .35; cursor: default; }
  #meInfo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; display: none; font: italic 600 15px var(--fd); letter-spacing: .06em; color: var(--fg);
    opacity: .8; text-shadow: var(--halo); font-variant-numeric: tabular-nums; white-space: pre; pointer-events: none; }
  body.mapedit #meInfo { display: block; }
  #meMode { position: fixed; left: 16px; bottom: 16px; display: none; width: 260px; padding: 12px; color: var(--fg); font: 500 14px var(--fb); background: var(--panel); }
  body.mapedit #meMode { display: block; }
  #meNavKey { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); display: none; padding: 10px 12px; color: var(--fg); font: 500 13px var(--fb);
    background: var(--panel); z-index: 6; }
  body.mapedit.navshow #meNavKey { display: block; }
  #meNavTab { display: none; position: fixed; right: 0; top: 64px; writing-mode: vertical-rl; rotate: 180deg; padding: 12px 6px;
    font: italic 700 13px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); background: var(--panel); border: 0; cursor: pointer; z-index: 3; }
  #meNavTab:hover { color: var(--fg); } body.mapedit #meNavTab { display: block; }
  body.mapedit.navshow #meNavTab { right: 220px; color: var(--ac); }   /* level with the panel's top, in or out: only slides across */
  body.mapedit.navshow #meNavKey { width: 196px; right: 0; top: 64px; transform: none; }   /* under the top bar, clear of the palette */
  #meNavKey p.lim { justify-content: flex-start; } #meNavKey p.lim input { margin-left: auto; width: 52px; padding: 3px 6px; font: 500 13px var(--fb); color: var(--fg);
    background: var(--bg3); border: 0; box-shadow: inset 0 -2px 0 var(--fg3); }
  #meNavKey p.lim input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--ac); }
  #meNavKey p { margin: 3px 0; display: flex; align-items: center; gap: 7px; }
  #meNavKey i { width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.4); flex: none; transform: skewX(var(--lean)); }
  #meNavKey button { margin-top: 8px; width: 100%; padding: 6px 8px; font-size: 13px; }
  #meMode label { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font: italic 600 14px var(--fd); letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); }
  #meMode select { flex: 1; min-width: 0; text-transform: none; font-style: normal; letter-spacing: 0; padding: 5px 7px; }
  #meNeeds .need { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 6px 12px; font: 500 14px var(--fb); color: var(--fg);
    text-align: left; --sb: var(--bg3); cursor: pointer; }
  #meNeeds .need:hover { --sb: var(--bg2); }
  #meNeeds .need.fixed:hover { --sb: var(--bg3); } #meNeeds .need.fixed i { visibility: hidden; }   /* dynamic spawns: a line, not a button */
  #meNeeds .need.on { --sb: var(--ac); color: var(--onac); }
  #meNeeds .need i { width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.5); flex: none; transform: skewX(var(--lean)); }
  #meNeeds .need span { flex: 1; }
  #meNeeds .need b { font: italic 700 15px var(--fd); color: #ff8a80; font-variant-numeric: tabular-nums; }
  #meNeeds .need.ok b { color: #a6e3a1; } #meNeeds .need.over b { color: #ffb37a; }
  #meNeeds .need.on b { color: inherit; }
  #meNeeds .need.refuse { animation: needNo .45s; }
  #meTabs { padding: 0 0 10px; } #meTabs button { flex: 1; font-size: 14px; padding: 7px 8px; } #meTabs button.on { --sb: var(--ac); color: var(--onac); }
  body.mefx #meMode > label { display: none; }
  #meNeeds .need.fx { padding: 4px 6px 4px 12px; margin: 3px 0; } #meNeeds .need.fx b { color: var(--fg2); min-width: 2.4em; text-align: right; }
  #meNeeds .need.whole { cursor: default; } #meNeeds .need.whole:hover { --sb: var(--bg3); }
  #meNeeds .need.fx .times { flex: none; display: flex; gap: 2px; }
  #meNeeds .need.fx .times button { width: 24px; height: 22px; padding: 0; border: 0; font: 13px/22px var(--fb); color: var(--fg3); background: var(--bg2); cursor: pointer; transform: skewX(var(--lean)); }
  #meNeeds .need.whole .times button.on { color: var(--onac); background: var(--ac); }
  /* painted ones: all grey, a cross over those off */
  #meNeeds .need.fx:not(.whole) .times button { color: var(--fg2); position: relative; }
  #meNeeds .need.fx:not(.whole) .times button:not(.on)::after { content: ''; position: absolute; inset: 3px 5px; pointer-events: none;
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--fg2) 50%, transparent calc(50% + 1px)),
      linear-gradient(to top left, transparent calc(50% - 1px), var(--fg2) 50%, transparent calc(50% + 1px)); }
  #meNeeds .need.on .times button { background: rgba(0,0,0,.25); color: rgba(255,255,255,.75); }
  #meNeeds .need.on .times button:not(.on)::after { --fg2: rgba(255,255,255,.75); }
  /* the unused effects' drawer, like the walk sheet's tab */
  #meNeeds .fxmore { display: block; width: 100%; margin: 10px 0 0; padding: 6px 12px; border: 0; background: var(--bg2); cursor: pointer; text-align: left;
    font: italic 700 13px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
  #meNeeds .fxmore::after { content: ' ▾'; } #meNeeds .fxmore.on::after { content: ' ▴'; }
  #meNeeds .fxmore:hover { color: var(--fg); } #meNeeds .fxmore.on { color: var(--ac); }
  #meNeeds .fxsep { margin: 10px 0 2px; font: italic 600 13px var(--fd); letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); }
  #meNeeds .zshare { padding: 0 0 4px; } #meNeeds .zshare button { flex: 1; font-size: 13px; padding: 5px 8px; }   /* the zone row's: every mode's or this mode's own */
  @keyframes needNo { 0%, 50% { --sb: oklch(.6 .2 25); } }
  #meNeeds .status { margin-top: 8px; font: italic 600 14px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: #ff8a80; }
  #meNeeds .status.ok { color: #a6e3a1; }
  #meNeeds button.settings { margin-top: 9px; width: 100%; padding: 8px; font-size: 14px; }
  #meSetBack { position: fixed; inset: 0; display: none; z-index: 19; background: oklch(.12 .02 255 / .4); }
  #meSettings { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); display: none; z-index: 20; width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 20px 20px; color: var(--fg); font: 500 14px var(--fb); background: var(--panel); }
  body.mesettings #meSetBack, body.mesettings #meSettings { display: block; }
  #meSettings .x { position: absolute; right: 18px; top: 14px; background: none; border: 0; color: var(--fg); font-size: 18px; cursor: pointer; opacity: .8; }
  #meSettings .tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin: 0 30px 0 0; padding: 0 6px; }
  #meSettings .tabs button { font: italic 700 15px var(--fd); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); cursor: pointer; --sb: var(--bg3); padding: 8px 16px; }
  #meSettings .tabs button:hover { --sb: var(--bg2); color: var(--fg); }
  #meSettings .tabs button.on { --sb: var(--fg); color: var(--bg4); }
  #meSettings h4 { margin: 16px 0 7px; font: italic 700 14px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
  #meSettings .none { color: var(--fg3); font-size: 13px; }
  #meSettings .zn { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
  #meSettings .zn i { width: 10px; height: 10px; flex: none; transform: skewX(var(--lean)); }
  #meSettings .zn span { width: 90px; flex: none; color: var(--fg2); }
  #meSettings input, #meSettings select { font-size: 13px; padding: 5px 7px; }
  #meSettings .zn input { flex: 1; min-width: 0; }
  #meSettings .tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 0 5px; }
  #meSettings .tcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 7px 12px; text-align: left; cursor: pointer;
    font: italic 700 15px var(--fd); letter-spacing: .02em; color: var(--fg); --sb: var(--bg3); }
  #meSettings .tcard:hover { --sb: var(--bg2); }
  #meSettings .tcard.mine { --ul: var(--ac); --uw: 3px; }
  #meSettings .tcard.on { --sb: var(--fg); color: var(--bg4); }
  #meSettings .tcard b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #meSettings .tcard small { font: 500 11px var(--fb); opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #meSettings .tbox { grid-column: 1 / -1; display: flex; gap: 16px; padding: 12px 14px; background: var(--bg4); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
  #meSettings .tbox .fields { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  #meSettings .tbox label { display: flex; align-items: center; gap: 8px; } #meSettings .tbox label > span:first-child { width: 150px; flex: none; color: var(--fg2); }
  #meSettings .tbox label.fixed { opacity: .45; } #meSettings .tbox input:disabled { cursor: default; }
  #meSettings .tbox input[type=number] { width: 90px; } #meSettings .tbox input[type=text] { flex: 1; min-width: 0; }
  #meSettings .tbox .ctx { width: 190px; flex: none; padding-left: 14px; box-shadow: inset 1px 0 0 var(--line); font-size: 13px; }
  #meSettings .tbox .ctx h5 { margin: 0 0 3px; font: italic 700 13px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
  #meSettings .tbox .ctx div { margin-bottom: 10px; line-height: 1.4; }
  #meSettings .tbox .reset { align-self: flex-start; margin-top: 4px; background: none; border: 0; padding: 0; color: var(--ac2); cursor: pointer; font: italic 700 14px var(--fd); letter-spacing: .04em; text-transform: uppercase; }
  .btns { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: auto; padding: 0 4px; }
  .btns:first-child { margin-top: 0; }
  #hint { display: none; }
  .btns button { --sb: var(--plate); font-size: 14px; padding: 8px 15px; }
  .btns select { padding: 7px 9px; cursor: pointer; background: var(--plate); }
  .hint { margin-top: 10px; max-width: 360px; font: 12px/1.4 var(--fb); opacity: .8; text-shadow: var(--halo); }
  #loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: var(--fg); transition: opacity .9s;
    background: radial-gradient(120% 90% at 50% 0%, oklch(.28 .03 255), oklch(.14 .02 255) 70%); font: italic 700 16px var(--fd); letter-spacing: .12em; }
  #loading .bar { width: min(640px, 72vw); height: 12px; overflow: hidden; background: oklch(.97 .008 255 / .08); transform: skewX(var(--lean)); }
/* LOAD in index.html animates it */
  #loading .bar i { display: block; height: 100%; transform: translateX(-100%); background: var(--ac); will-change: transform; }
  /* loaded: the press browsers want before any sound, so the menu and its song start together. Pulses a bar at the song's 150 bpm */
  #loading .go { display: none; font: italic 700 30px var(--fd); text-transform: uppercase; letter-spacing: .16em; animation: ldGo 1.6s ease-in-out infinite; }
  #loading.ready .bar { display: none; }
  #loading.ready .go { display: block; }
  body.touch #loading .go { font-size: 22px; }
  @keyframes ldGo { 50% { opacity: .35; } }
  #loading .err { position: relative; z-index: 1; max-width: 460px; text-align: center; font: 500 15px/1.5 var(--fb); letter-spacing: 0; color: var(--fg); }

  .touch-only { display: none !important; }
  body.touch .touch-only { display: inline-block !important; }
  body.touch.nofs [data-go="fullscreen"] { display: none !important; }
  body.touch [data-go="editor"], body.touch #pause [data-go="controls"], body.touch #setControls { display: none !important; }
  body.touch > :not(#view) { zoom: var(--tz, 1); }   /* every phone the same look (touchZoom) */
  #touch { position: fixed; inset: 0; z-index: 4; display: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  body.touch.fp:not(.paused) #touch { display: block; }
  body.touch.fp:not(.paused) #ui { display: none !important; }
/* paused: clear of Resume top right */
  body.touch #ui { top: auto; bottom: calc(16px + var(--sa-bottom)); left: calc(16px + var(--sa-left)); }
  body.touch .menu-list button:not(.del) { font-size: 22px; padding: 7px 22px 7px 18px; min-width: 190px; }
  body.touch .menu-list { gap: 6px; }
  body.touch :is(#menuMain, #menuPlay) button:nth-child(2) { margin-left: 8px; } body.touch :is(#menuMain, #menuPlay) button:nth-child(3) { margin-left: 16px; } body.touch :is(#menuMain, #menuPlay) button:nth-child(4) { margin-left: 24px; }
  body.touch #menuPlay button.sub { margin-left: 46px; margin-top: -2px; margin-bottom: 6px; font-size: 17px; min-width: 158px; }
  body.touch .menu-list button.back { font-size: 17px; }
  body.touch #menuMaps button:not(.del) { font-size: 19px; }
  #ammoMax { display: none; }
/* --hpw: 242px, less on narrow screens so the ammo after it clears Crouch (left edge 255px from the right, ammo ~60px, 8px each side) */
  body.touch { --hpw: clamp(132px, calc(100 * var(--vw) - 662px - 2 * var(--sa-right)), 242px); }
  body.touch #health { left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); padding: 0; background: none; clip-path: none; }
  body.touch #hpNum, body.touch #ammoTicks, body.touch #reloadBar { display: none; }
  body.touch #hpBar { width: var(--hpw); height: 7px; margin: 0; overflow: hidden; background: oklch(.17 .022 255 / .6); }
  body.touch #hpBar b.low { background: var(--ac2); } body.touch #hpBar b.over { background: oklch(.9 .15 95); }
/* centred between the bar's end and Crouch; digits sit ~.18em above their line's foot, so that much lower levels them with the bar */
  body.touch #ammo { left: calc((150 * var(--vw) + var(--hpw) / 2 - 255px - var(--sa-right)) / 2); right: auto; transform: translateX(-50%); bottom: calc(10px - .18em);
    font: italic 800 22px/1 var(--fd); padding: 0; background: none; clip-path: none; text-shadow: var(--halo); }
  body.touch #ammoNum, body.touch #ammoMax { font: inherit; }
  body.touch #ammoMax { display: inline; opacity: .7; }
  body.touch #ammo.reloading { opacity: .45; }
  #tStick { position: absolute; left: calc(96px + var(--sa-left)); bottom: auto; top: calc(100% - 110px); width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
    border: 2px solid oklch(.97 .008 255 / .22); background: oklch(.17 .022 255 / .14); pointer-events: none; opacity: .55; }
  #tStick.on { opacity: 1; }
  #tStick b { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
    background: oklch(.97 .008 255 / .28); border: 2px solid oklch(.97 .008 255 / .5); }
  #touch .tb, #tFull, #tResume { clip-path: polygon(28% 0, 100% 0, 100% 72%, 72% 100%, 0 100%, 0 28%); }
  #touch .tb { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0;
    color: var(--fg); font: italic 800 20px var(--fd); background: oklch(.17 .022 255 / .38); touch-action: none; -webkit-tap-highlight-color: transparent; }
  #touch .tb.down, body.t-aim #tAim, body.t-crouch #tCrouch, body.t-quarter #tSize { background: oklch(.97 .008 255 / .4); }
  #touch .tb svg { width: 56%; height: 56%; fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  #touch .tb svg .f { fill: var(--fg); }
/* Fire's middle 140px from the right, 120px up; five round it, 54px: Grenade left and Reload right (middles 92px off, tops level),

     Crouch / Jump / Aim along the bottom, 10px off it. Placed by middle (--x / --y from right and bottom) less half --s. */
  #tFire, #tReload, #tNade, #tJump, #tCrouch, #tAim, #tDig, #tSize { width: var(--s); height: var(--s);
    right: calc(var(--x) - var(--s) / 2 + var(--sa-right)); bottom: calc(var(--y) - var(--s) / 2); }
  #tReload, #tNade, #tJump, #tCrouch, #tAim, #tDig, #tSize { --s: 54px; }
  #touch #tFire { --s: 88px; --x: 140px; --y: 120.3px; background: oklch(.70 .22 var(--ah) / .85); }
  #touch #tFire svg { stroke: var(--onac); }
  #touch #tFire.down { background: var(--ac2); }
  #tNade { --x: 227.5px; --y: 137.3px; }
  #tCrouch { --x: 227.5px; --y: 37.1px; }
  #tJump { --x: 140px; --y: 37.1px; }
  #tAim, #tSize { --x: 52.5px; --y: 37.1px; }
  #tReload, #tDig { --x: 52.5px; --y: 137.3px; }
/* tBuild: a block in shoot mode, the crosshair in build mode */
  #touch #tDig, #touch #tSize, #tFire .ic-blk, body.buildmode #tFire .ic-gun, #tBuild .ic-gun, body.buildmode #tBuild .ic-blk { display: none; }
  body.buildmode #tFire .ic-blk, body.buildmode #tBuild .ic-gun { display: block; }
  body.buildmode #touch #tDig, body.buildmode #touch #tSize { display: flex; }
  body.touch.buildmode #touch #tReload, body.touch.buildmode #touch #tAim, body.touch.buildmode #touch #tNade { display: none; }
  #touch #tUse { left: 50%; bottom: calc(28px + var(--sa-bottom)); transform: translateX(-50%); height: 44px; min-width: 128px; clip-path: none;
    padding: 0 26px; background: none; --sb: var(--ac); color: var(--onac); font: italic 800 20px var(--fd); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
  #tBoard { width: 50px; height: 50px; left: calc(70px + var(--sa-left)); top: 12px; }   /* just right of Pause */
  #tPause { width: 50px; height: 50px; left: calc(12px + var(--sa-left)); top: 12px; }
  #tBuild { width: 50px; height: 50px; left: calc(128px + var(--sa-left)); top: 12px; }   /* just right of Scores */
  #touch #tNade, #touch #tUse, #touch #tBoard, #touch #tBuild { display: none; }   /* only with a grenade, a zone wanting E, a match, building */
  body.t-nade #touch #tNade, body.t-use #touch #tUse, body.t-board #touch #tBoard, body.t-build #touch #tBuild { display: flex; }
  body.unarmed #touch #tFire, body.unarmed #touch #tReload, body.unarmed #touch #tAim { visibility: hidden; }   /* empty hands: nothing to fire, reload or aim */
  body.touch.match #killfeed, body.touch.online #killfeed { top: 12px; }
  body.touch #fps, body.touch.match #fps { left: calc(14px + var(--sa-left)); top: 70px; }   /* under Pause, Scores and Build; the kill feed has the top right */
  body.touch #palette { display: none !important; }   /* building on a phone: one colour, the team's */
  body.touch #hudMsg { font-size: 26px; white-space: normal; text-align: center; width: max-content; max-width: calc(80 * var(--vw)); top: 30%; }
  body.touch #hudCount { font-size: 64px; } body.touch #hudCount.go { font-size: 76px; }
  body.touch #hudOver > b { font-size: 40px; } body.touch .ho-row { font-size: 16px; } body.touch .ho-row.first { font-size: 18px; }
  body.touch #hudOver { padding: 12px 22px 14px; gap: 5px; }
  body.touch #respawn { font-size: 42px; } body.touch.spectating #respawn { font-size: 17px; }
  body.touch #hud { top: 6px; font-size: 11px; } body.touch .hs-team { padding: 3px 12px 4px; gap: 0 7px; } body.touch .hs-bar { width: 80px; height: 5px; }
  body.touch .hs-alive { max-width: 104px; gap: 2px; font-size: 11px; } body.touch .hs-alive i { width: 5px; height: 8px; } body.touch .hs-alive i.more::after { font-size: 8px; }
  /* the camera cutout's side blacked out, the picture's corners rounded like the phone's (user); no cutout, no change */
  /* the cutout's margins in the zoomed layer's pixels (touchZoom), so a margin stays its real width */
  :root { --sa-left: calc(env(safe-area-inset-left, 0px) / var(--tz, 1)); --sa-right: calc(env(safe-area-inset-right, 0px) / var(--tz, 1)); --sa-bottom: calc(env(safe-area-inset-bottom, 0px) / var(--tz, 1)); }
  body.touch::after { content: ''; position: fixed; top: 0; bottom: 0; left: env(safe-area-inset-left); right: env(safe-area-inset-right); pointer-events: none; z-index: 2147483000;
    border-radius: min(22px, calc((env(safe-area-inset-left) + env(safe-area-inset-right)) * 100)); box-shadow: 0 0 0 100vmax #000; }
  body.touch.cutout::after { display: none; }   /* Use cutout space: the picture runs under it, the HUD still clear */
  body.touch .hf-side { gap: 3px; --fs: clamp(14px, calc((62vh - var(--facesTop, 72px)) / var(--n) - 3px), 30px); }   /* above the joystick and buttons: as big as the team lets them */ body.touch .hf-side .hf-row { padding: 0; background: none; } body.touch .hf-name { display: none; }
  body.touch .hf-face { width: var(--fs); height: var(--fs); box-shadow: 0 0 0 2.5px var(--tc); } body.touch .hf-side.l { left: calc(6px + var(--sa-left)); } body.touch .hf-side.r { right: calc(6px + var(--sa-right)); }
  body.touch .hs-num { font-size: 18px; min-width: 22px; } body.touch .hs-name { font-size: 10px; } body.touch #hudTimers { font-size: 14px; padding: 2px 14px 3px; }
  body.touch #hudWays .way { font-size: 14px; padding: 2px 10px; --su: inset 0 0 0 2px var(--wc); } body.touch #hudWays .way.name { --su: none; padding: 0; font-size: 12px; } body.touch #hudWays .way.here { top: 80px; font-size: 19px; padding: 3px 14px; --su: inset 0 0 0 3px var(--wc); }
  body.touch #hudNote div, body.touch #hudShows div { font-size: 12px; } body.touch #hudShows { margin-top: 3px; } body.touch #hudPts { bottom: 25%; } body.touch #hudPts div { font-size: 14px; } body.touch #hudPts div b { font-size: 16px; }
  body.touch #killfeed { font-size: 13px; gap: 3px; } body.touch #killfeed div { padding: 3px 12px; } body.touch #killfeed div.me { --ul: var(--ac); --uw: 2px; }
/* under Scores, over the stick */
  body.touch #hudDealt { left: calc(12px + var(--sa-left) + var(--facesL, 0px)); right: auto; top: 72px; font-size: 10px; min-width: 110px; padding: 6px 10px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  body.touch #hudDealt h5 { font-size: 10px; margin-bottom: 3px; } body.touch #hudDealt div { margin: 1px 0; gap: 10px; } body.touch #hudDealt b { font-size: 12px; } body.touch #hudDealt span { font-size: 11px; } body.touch #hudProg { font-size: 13px; }
  body.touch #nextGame { left: calc(12px + var(--sa-left)); padding: 10px 12px; gap: 6px; font-size: 11px; }
  body.touch #nextGame select { font-size: 12px; padding: 4px 6px; min-width: 130px; } body.touch #nextGame h5 { font-size: 14px; } body.touch #nextGame span { font-size: 11px; }
/* phones, the host after a game: the next game's choices behind Change settings, in the scoreboard's place, never overlapping */
  #ngToggle { display: none; }
  body.touch #overSwap { display: none !important; }
  body.touch.between:is(.owner, .hosting) #ngToggle { display: block; position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 13; height: 38px; padding: 0 20px;
    font-size: 15px; --sb: var(--plate); }
  body.touch.paused #ngToggle, body.touch.gameover:not(:has(#hudOver.up)) #ngToggle { display: none !important; }   /* with the scoreboard, 5 s in */
  body.touch.hosting.between #nextGame, body.touch.owner.between #nextGame { display: none; }
  body.touch.ngopen.between:is(.owner, .hosting):not(.paused) #nextGame { display: flex; left: 50%; top: calc(50% + 2px); transform: translate(-50%,-50%);
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px; max-width: calc(100vw - 32px); }
  body.touch.ngopen #nextGame h5 { width: 100%; text-align: center; }
  body.touch.ngopen #board { display: none !important; }
  body.touch.between:is(.owner, .hosting) #board.over { top: calc(50% + 2px); max-height: calc(100 * var(--vh) - 124px); }
/* written out in full, not :is(): every phone browser follows it */
  body.touch.t-boardup #hud,
    body.touch.t-boardup #hudMsg,
    body.touch.t-boardup #hudCount,
    body.touch.t-boardup #hudOver,
    body.touch.t-boardup #hudProg,
    body.touch.t-boardup #hudWays,
    body.touch.t-boardup #killfeed,
    body.touch.t-boardup #respawn,
    body.touch.t-boardup #hudDealt,
    body.touch.t-boardup #hudPts,
    body.touch.t-boardup #cross,
    body.touch.t-boardup #gunCross,
    body.touch.t-boardup #ammo,
    body.touch.t-boardup #health,
    body.touch.t-boardup #fps,
    body.touch.t-boardup #toast,
    body.touch.t-boardup #tStick,
    body.touch.t-boardup #touch .tb,
    body.touch.paused #hud,
    body.touch.paused #hudMsg,
    body.touch.paused #hudCount,
    body.touch.paused #hudOver,
    body.touch.paused #hudProg,
    body.touch.paused #hudWays,
    body.touch.paused #killfeed,
    body.touch.paused #respawn,
    body.touch.paused #killedBy,
    body.touch.paused #specCard,
    body.touch.t-boardup #killedBy,
    body.touch.paused #hudDealt,
    body.touch.paused #hudPts,
    body.touch.paused #cross,
    body.touch.paused #gunCross,
    body.touch.paused #ammo,
    body.touch.paused #health,
    body.touch.paused #fps,
    body.touch.paused #toast,
    body.touch.paused #tStick,
    body.touch.paused #touch .tb { visibility: hidden !important; }   /* !important: the crosshair sets its own every frame */
/* the winner 5 s, then the scoreboard mid-screen */
  body.touch.gameover #touch .tb:not(#tPause), body.touch.gameover #tStick { display: none !important; }
  #tPause .ex, body.gameover #tPause .ps { display: none; } body.gameover #tPause .ex { display: inline; }
  body.touch.gameover #hud, body.touch #hudOver > small { display: none !important; }
  body.touch #hudOver.up { top: 10px; transform: translate(-50%,0); translate: none; animation: none; }
  body.touch #hudOver.up > b, body.touch #hudOver.up .ho-board { display: none; }
  body.touch #board { padding: 10px 18px; gap: 18px; font-size: 13px; max-height: calc(100 * var(--vh) - 56px); }
  body.touch #board.over { top: calc(50% + 24px); bottom: auto; transform: translate(-50%,-50%); max-height: calc(100 * var(--vh) - 72px); }
/* clear of the scoreboard (the ✕ is top right) */
  body.touch #overSwap { left: calc(16px + var(--sa-left)); top: 12px; bottom: auto; height: 42px; padding: 0 18px; font-size: 15px; --sb: var(--plate); }
  body.touch #board td { padding: 2px 8px; } body.touch #board h4 { margin-bottom: 4px; font-size: 17px; } body.touch #board th { font-size: 11px; }
  body.touch #board td:first-child { min-width: 96px; } body.touch #board .specs h4 { font-size: 12px; margin-bottom: 2px; }
  #tFull, #tResume { position: fixed; z-index: 20; width: 42px; height: 42px; right: calc(12px + var(--sa-right)); top: 12px; display: none; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 0; background: oklch(.17 .022 255 / .5); -webkit-tap-highlight-color: transparent; }
  #tFull { width: 72px; height: 72px; right: calc(18px + var(--sa-right)); top: 18px; background: oklch(.17 .022 255 / .6); }
  body.menu:not(.browsing):not(.creating):not(.settings):not(.joining):not(.menu-maps) #tFull { display: flex; }
  body:not(.touch) #tFull { width: 48px; height: 48px; cursor: pointer; } body:not(.touch) #tFull:hover { background: oklch(.17 .022 255 / .85); }
  body.touch.paused:not(.settings):not(.saving) #tResume { display: flex; }
  body.touch.paused:not(.settings):not(.saving) #tFull { display: flex; width: 42px; height: 42px; right: auto; left: calc(12px + var(--sa-left)); top: 12px; }
  body.fsguide #fsGuide { display: block; } body.fsguide #menu, body.fsguide #pause, body.fsguide #pauseInfo { visibility: hidden; }   /* the box alone: the menu would show through */
  #fsGuide { z-index: 25; width: min(400px, calc(100vw - 32px)); }
  #fsGuide ol { margin: 0 0 14px; padding-left: 22px; color: var(--fg2); line-height: 1.6; } #fsGuide b { color: var(--fg); }
  #fsGuide ol svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  body.touch #fsGuide .head { font-size: 22px; }
  body.touch.nofs #tFull { display: none !important; } body.bfs #tFull { display: none !important; }
  #tFull svg, #tResume svg { width: 56%; height: 56%; fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  #tFull .back, body.fs #tFull .go { display: none; } body.fs #tFull .back { display: inline; }
  #rotate { position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    color: var(--fg); background: var(--bg4); font: italic 700 22px var(--fd); letter-spacing: .06em; text-transform: uppercase; }
  #rotate .phone { width: 44px; height: 76px; border: 3px solid var(--fg); border-radius: 9px; animation: turnPhone 2.2s ease-in-out infinite; }
  @keyframes turnPhone { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
  @media (orientation: portrait) { body.touch #rotate { display: flex; zoom: 1; } }