/* PUMPCITY · every screen outside the HUD (chat UI): the landing / title, the Esc menu with its loadout, invite, coin, settings and
   controls panes, the joining overlay, the no-WebGL and reconnecting screens, the payday sheet, the round's end and the frame of the
   death screen. Tokens: css/tokens.css. Rules: fixed slots (content length never moves anything), no blur over the canvas, first
   paint looks finished (the title's backdrop is a real capture of the game until the live render is up). */

/* ------------------------------------------------------------------------------------------------ controls shared by every screen */
.is-hidden { display: none !important; }
.ui-btn { height: 44px; padding: 0 20px; border: 1px solid var(--line2); border-radius: var(--r2); background: var(--s3); color: var(--ink); font: 700 15px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.ui-btn:hover { background: var(--s4); border-color: var(--ink3); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn.primary { background: var(--me); border-color: transparent; color: var(--me-ink); }
.ui-btn.primary:hover { filter: brightness(1.08); }
.ui-btn.ghost { background: transparent; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.ui-btn kbd { background: rgba(0, 0, 0, .25); border-color: rgba(0, 0, 0, .3); }
.ui-in { height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r2); background: rgba(0, 0, 0, .35); color: var(--ink); font: 600 16px/1 var(--font-text); outline: none; min-width: 0; transition: border-color var(--fast) var(--ease); }
.ui-in::placeholder { color: var(--ink3); font-weight: 500; }
.ui-in:focus { border-color: var(--me); }
.ui-eyebrow { font: 600 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.ui-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-seg { display: flex; height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r2); background: rgba(0, 0, 0, .3); }
.ui-seg button { flex: 1 1 0; min-width: 0; border: 0; border-radius: var(--r1); background: transparent; color: var(--ink2); font: 700 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.ui-seg button:hover { color: var(--ink); }
.ui-seg button.on { background: var(--me); color: var(--me-ink); }
.ui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; }
.ui-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--me) 0 var(--p, 50%), var(--s4) var(--p, 50%) 100%); }
.ui-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line2); }
.ui-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--s4); }
.ui-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--me); }
.ui-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); }
.ui-tog { position: relative; width: 44px; height: 24px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); flex: none; }
.ui-tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink2); transition: transform var(--fast) var(--ease), background var(--fast) var(--ease); }
.ui-tog.on { background: var(--me); border-color: transparent; }
.ui-tog.on::after { transform: translateX(20px); background: var(--me-ink); }
.ui-key { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: var(--r1); border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); font: 700 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink); cursor: pointer; white-space: nowrap; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.ui-key:hover { border-color: var(--ink3); }
.ui-key.listen { border-color: var(--me); color: var(--me); background: rgba(0, 0, 0, .5); animation: ui-blink .9s ease-in-out infinite; }
@keyframes ui-blink { 50% { opacity: .45; } }
.ui-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--s4) transparent; }
.ui-scroll::-webkit-scrollbar { width: 8px; } .ui-scroll::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 4px; }
.ui-copy { min-width: 74px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r1); background: var(--me); color: var(--me-ink); font: 700 11px/1 var(--font-display); letter-spacing: .14em; cursor: pointer; flex: none; }
:focus-visible { outline: 2px solid var(--me); outline-offset: 2px; }
::selection { background: var(--me); color: var(--me-ink); }

/* ------------------------------------------------------------------------------------------------ THE TITLE (the landing) */
/* v2 (chat 06e571a6, owner 10-18 15:05: "it has to get better ... make the characters a bit smaller / make everything more clear"):
   three zones in fixed slots: the top bar (brand from the kit · four live tiles · the coin), the four gangs standing over their plates
   (left), the column on the right (the line, what it is in one sentence, three numbers, PLAY). The lore lives in the Gangs section. */
.title { position: fixed; inset: 0; display: block; cursor: default; background: none; z-index: 10; font-family: var(--font-text); color: var(--ink); --col: 500px; --colx: 64px; --top: 76px; --pb: 4.4vh; --plh: 124px; }
.title.off { display: none; }
/* the backdrop: a real capture of this very view (media/ui/title-paris.jpg) painted at once; the live render fades in under it */
.tt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transition: opacity 1.2s var(--ease); background: #1b1b1f; }
.title.live .tt-bg { opacity: 0; pointer-events: none; }
.tt-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 10, .66) 0, rgba(8, 8, 10, 0) 15%, rgba(8, 8, 10, 0) 60%, rgba(8, 8, 10, .8) 100%),
              linear-gradient(90deg, rgba(8, 8, 10, 0) 50%, rgba(8, 8, 10, .7) 66%, rgba(8, 8, 10, .88) 100%); }
/* the top bar */
.tt-top { position: absolute; left: 0; right: 0; top: 0; height: var(--top); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; align-items: center; padding: 0 32px; }
.tt-brand { display: flex; align-items: center; gap: 14px; height: 46px; min-width: 0; }
.tt-brand img { width: 46px; height: 46px; border-radius: var(--r2); object-fit: cover; background: var(--s2); flex: none; box-shadow: 0 0 0 1px var(--line2); }
.tt-logo { font: 800 32px/1 var(--font-display); letter-spacing: .035em; text-transform: uppercase; color: var(--ink); text-shadow: var(--sh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* war/main.js re-writes the kit's name as WORD<span>WORD</span>: the same letters as the server's {{NAME}}, so the mark never jumps */
.tt-logo span::before, .tt-pin-k span::before, .wm-k span::before { content: ' '; }
.tt-facts { display: flex; gap: 8px; }
.tt-fact { width: 132px; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 6px; border: 1px solid var(--line); border-radius: var(--r2); background: rgba(8, 8, 10, .62); }
.tt-fact b { font: 700 19px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-fact i { font: 600 9.5px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; color: var(--ink3); text-transform: uppercase; white-space: nowrap; }
.tt-fact.pay b { color: var(--good); }
.tt-right { min-width: 0; display: flex; justify-content: flex-end; }
/* the coin address: a fixed pill (the copy, pump.fun and chart buttons come in at launch inside the same width) */
.ca-pill { position: static; display: flex; align-items: center; gap: 8px; height: 46px; width: 100%; max-width: 540px; min-width: 0; padding: 0 7px 0 16px; border-radius: var(--r2); background: rgba(8, 8, 10, .62); border: 1px solid var(--line); }
.ca-pill.is-live { border-color: var(--me); }
.ca-lab { font: 700 13px/1 var(--font-display); letter-spacing: .16em; color: var(--ink2); white-space: nowrap; }
.ca-addr, .wm-ca { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; height: 32px; padding: 0 2px; border: 0; background: none; font: 500 12.5px/1 var(--font-mono); color: var(--ink); cursor: copy; user-select: text; }
.ca-addr:disabled, .wm-ca:disabled { cursor: default; color: var(--ink3); font: 500 12.5px/1 var(--font-text); }
.ca-addr > span, .wm-ca > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ca-copy, .wm-ca > i { flex: none; font: 700 11px/1 var(--font-display); letter-spacing: .14em; font-style: normal; padding: 9px 10px; border-radius: var(--r1); background: var(--me); color: var(--me-ink); min-width: 62px; text-align: center; }
.ca-link { flex: none; font: 700 11.5px/1 var(--font-display); letter-spacing: .12em; padding: 10px 11px; border-radius: var(--r1); background: var(--s3); color: var(--ink); text-decoration: none; white-space: nowrap; }
.ca-link:hover { background: var(--s4); }
/* the four gangs: a plate under each hero (war/ui.js stands the heroes at the same fractions: HERO_X) */
.tt-plates { position: absolute; left: 0; right: 0; bottom: var(--pb); height: var(--plh); pointer-events: none; }
.plate { position: absolute; bottom: 0; width: 13.2vw; height: 100%; transform: translateX(-50%); border-top: 2px solid var(--c); border-radius: 0 0 var(--r2) var(--r2); background: linear-gradient(180deg, rgba(8, 8, 10, .8), rgba(8, 8, 10, .62)); padding: 12px 14px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 30px 26px minmax(0, 1fr); row-gap: 10px; column-gap: 10px; cursor: default; pointer-events: auto; transition: background var(--fast) var(--ease), opacity var(--slow) var(--ease); --c: var(--neutral); }
.plate:nth-child(1) { left: 14%; } .plate:nth-child(2) { left: 28%; } .plate:nth-child(3) { left: 42%; } .plate:nth-child(4) { left: 56%; }
.plate.hot, .plate.mine { background: linear-gradient(180deg, rgba(8, 8, 10, .9), rgba(8, 8, 10, .72)); }
.plate .pl-name { grid-column: 1; grid-row: 1; align-self: center; font: 800 26px/1 var(--font-display); letter-spacing: .04em; color: var(--c); text-shadow: var(--sh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .pl-name.long { font-size: 21px; letter-spacing: .02em; }
.plate .pl-share { grid-column: 2; grid-row: 1; align-self: center; font: 700 28px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: var(--sh-text); white-space: nowrap; }
.plate .pl-share small { font-size: .5em; color: var(--ink3); margin-left: 2px; }
.plate .pl-picks { grid-column: 1 / 3; grid-row: 2; display: flex; gap: 5px; height: 26px; min-width: 0; overflow: hidden; }
.plate .pl-chip { height: 26px; padding: 0 9px; border-radius: var(--r1); border: 1px solid var(--line2); background: rgba(0, 0, 0, .4); color: var(--ink2); font: 700 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.plate .pl-chip:hover { color: var(--ink); border-color: var(--ink3); }
.plate .pl-chip.on { color: var(--ink); border-color: var(--c); }
.plate .pl-chip.picked { background: var(--c); border-color: var(--c); color: #0b0b0d; }
.plate .pl-sub { grid-column: 1 / 3; grid-row: 3; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; height: 30px; padding-bottom: 6px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .03em; color: var(--ink2); white-space: nowrap; }
.plate .pl-sub > span { overflow: hidden; text-overflow: ellipsis; }
.plate .pl-sub b { color: var(--ink); font-weight: 700; }
.plate .pl-sub em { font: 700 11px/1 var(--font-display); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.plate.closed { opacity: .6; } .plate.closed .pl-sub > span { display: none; } .plate.closed .pl-sub em { grid-column: 1 / 3; } .plate.closed .pl-sub em { color: var(--ink2); } .plate.closed .pl-share { color: var(--ink3); }
.plate .pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(243, 239, 230, .08); border-radius: 0 0 var(--r2) var(--r2); overflow: hidden; }
.plate .pl-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(.01); background: var(--c); transition: transform .8s var(--ease); }
.plate .pl-lore { display: none; }
.plate.picked { border-top-width: 3px; }
.plate.mine::after { content: 'YOU'; position: absolute; right: 14px; top: -11px; height: 18px; padding: 0 8px; border-radius: var(--r1); background: var(--c); color: #0b0b0d; font: 800 10px/18px var(--font-display); letter-spacing: .18em; }
/* the column: the line, the sentence, three numbers, PLAY (bottom-aligned with the plates) */
.tt-col { position: absolute; right: var(--colx); top: calc(var(--top) + 2vh); width: var(--col); bottom: var(--pb); display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
.tt-head { grid-row: 2; margin: 0; font: 800 clamp(64px, 11.6vh, 120px)/.86 var(--font-display); letter-spacing: -.012em; color: var(--ink); text-shadow: var(--sh-text); text-transform: uppercase; }
.tt-head span { color: var(--me); }
.tt-pitch { grid-row: 3; margin: 2.4vh 0 0; font: 500 clamp(15px, 2vh, 19px)/1.45 var(--font-text); color: var(--ink2); height: calc(3 * 1.45em); overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.tt-pitch b { color: var(--ink); font-weight: 700; }
.tt-keys { grid-row: 4; margin-top: 2.6vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.tt-key { padding: 1.7vh 0 1.6vh; display: grid; row-gap: 8px; min-width: 0; }
.tt-key + .tt-key { padding-left: 18px; border-left: 1px solid var(--line); }
.tt-key b { font: 700 clamp(22px, 3.3vh, 30px)/1 var(--font-mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tt-key b small { font-size: .5em; color: var(--ink3); margin-left: 4px; font-weight: 600; letter-spacing: 0; }
.tt-key i { font: 600 10.5px/1.2 var(--font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-go { grid-row: 5; margin-top: 3vh; display: grid; row-gap: 10px; }
.tt-go-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 10px; height: 58px; }
.tt-go .ui-in { height: 58px; font-size: 18px; }
.tt-play { position: relative; height: 58px; border: 0; border-radius: var(--r2); background: var(--acc); color: var(--acc-ink); font: 800 25px/1 var(--font-display); letter-spacing: .14em; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.tt-play:hover { filter: brightness(1.06); } .tt-play:active { transform: translateY(1px); }
.tt-play svg { width: 18px; height: 18px; fill: currentColor; }
/* while the city loads: PLAY is the loading bar (the same button, the same place) */
.tt-play .tt-load { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; margin: 0; height: auto; background: none; border-radius: 0; opacity: 1; transition: opacity .4s; }
.tt-play .tt-load i { display: block; height: 100%; background: rgba(243, 239, 230, .2); transform-origin: left; transition: transform .25s; }
.tt-play > span { position: relative; }
.title:not(.ready) .tt-play { background: rgba(243, 239, 230, .1); color: var(--ink2); cursor: progress; box-shadow: inset 0 0 0 1px var(--line2); }
.title:not(.ready) .tt-play > span { font-size: 19px; letter-spacing: .24em; }
.title.ready .tt-play .tt-load { opacity: 0; }
.title.ready .tt-play svg { display: block; } .title:not(.ready) .tt-play svg { display: none; }
.tt-hint { margin: 0; height: 16px; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-hint b { color: var(--ink); }
.tt-crews { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; height: 46px; }
.tt-crews .ui-btn { height: 46px; padding: 0 12px; }
.tt-crews .ui-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tt-crews .ui-btn em { font: 600 11px/1 var(--font-mono); font-style: normal; letter-spacing: .04em; color: var(--ink3); min-width: 54px; text-align: left; }
/* the foot: the way down to the sections + the map's attribution */
.tt-foot { position: absolute; left: 32px; right: calc(var(--colx) + var(--col) + 32px); bottom: 1.2vh; height: 18px; display: flex; align-items: center; gap: 20px; font: 500 11px/18px var(--font-mono); letter-spacing: .06em; color: var(--ink3); white-space: nowrap; overflow: hidden; }
.tt-more { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font: 700 12.5px/18px var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.tt-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: tt-nudge 2.4s var(--ease) infinite; }
.tt-more:hover { color: var(--me); }
@keyframes tt-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
.tt-attr { color: var(--ink3); }
/* joining: the card over the city while the server deals you a gang */
.tt-join { position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 640px; height: 170px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; z-index: 12; font-family: var(--font-text); color: var(--ink); pointer-events: none; }
html.joining .tt-join { display: flex; }
html.joining #hud, html.joining .warmenu { visibility: hidden; }
/* ?keyart=1: the title's camera and heroes with no DOM over them (the first-paint capture) */
html.keyart .tt-top, html.keyart .tt-col, html.keyart .tt-plates, html.keyart .tt-foot, html.keyart .tt-scrim, html.keyart .tt-bg, html.keyart .tt-join, html.keyart #hud { display: none !important; }
.tt-join .ui-eyebrow { height: 14px; }
.tt-join-k { font: 800 76px/1 var(--font-display); letter-spacing: .02em; color: var(--me); text-shadow: var(--sh-text); height: 76px; white-space: nowrap; text-transform: uppercase; }
.tt-join-s { height: 20px; font: 500 15px/20px var(--font-mono); color: var(--ink2); white-space: nowrap; text-shadow: var(--sh-text); }
.tt-join-s b { color: var(--ink); }
/* no WebGL */
.tt-fatal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8, 8, 10, .86); }
.title.fatal .tt-fatal { display: flex; }
.title.fatal .tt-col, .title.fatal .tt-plates, .title.fatal .tt-foot { visibility: hidden; }
.tt-fatal-in { width: 560px; padding: 34px 38px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); box-shadow: var(--sh-panel); }
.tt-fatal-in h2 { margin: 0 0 10px; font: 800 36px/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
.tt-fatal-in p { margin: 0 0 8px; font: 500 15px/1.45 var(--font-text); color: var(--ink2); }
.tt-fatal-in code { display: block; margin-top: 14px; padding: 10px 12px; border-radius: var(--r1); background: rgba(0, 0, 0, .4); font: 500 12px/1.4 var(--font-mono); color: var(--ink3); max-height: 72px; overflow: hidden; }
/* a small screen: this is a mouse-and-keyboard game */
.tt-small { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgba(8, 8, 10, .9); font: 600 18px/1.4 var(--font-text); color: var(--ink); }
@media (max-width: 900px), (max-height: 520px) { .tt-small { display: flex; } .tt-col, .tt-plates, .tt-top, .tt-foot { display: none; } }
@media (max-width: 1500px) { .title { --col: 420px; --colx: 40px; } .tt-top { padding: 0 24px; column-gap: 16px; } .tt-fact { width: 108px; } .tt-fact b { font-size: 17px; } .ca-pill { width: min(420px, 100%); } .tt-go-row { grid-template-columns: minmax(0, 1fr) 170px; } .tt-logo { font-size: 28px; } .plate { padding: 10px 11px 0; } .plate .pl-chip { padding: 0 7px; font-size: 10.5px; } .plate .pl-name { font-size: 22px; } .plate .pl-name.long { font-size: 18px; } .plate .pl-share { font-size: 24px; } .plate .pl-sub { font-size: 11.5px; } .tt-foot { left: 24px; } }
@media (max-height: 820px) { .title { --top: 66px; --plh: 114px; } .tt-fact { height: 44px; row-gap: 5px; } .ca-pill { height: 42px; } .tt-brand img { width: 40px; height: 40px; } .tt-go { row-gap: 8px; } .tt-go-row, .tt-play, .tt-go .ui-in { height: 50px; } .tt-play { font-size: 21px; } .tt-crews, .tt-crews .ui-btn { height: 40px; } .tt-go > .tt-hint:last-child { display: none; } .plate { row-gap: 7px; grid-template-rows: 28px 24px minmax(0, 1fr); } .plate .pl-chip { height: 24px; } .plate .pl-picks { height: 24px; } }

/* ------------------------------------------------------------------------------------------------ THE MENU (Esc) */
.warmenu { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6, 6, 8, .72); z-index: 15; font-family: var(--font-text); color: var(--ink); }
.warmenu.on { display: flex; }
.wm-in { width: 1120px; height: 660px; max-width: 96vw; max-height: 94vh; padding: 0; display: grid; grid-template-columns: 252px 1fr; border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); box-shadow: var(--sh-panel); overflow: hidden; }
.wm-rail { display: grid; grid-template-rows: auto 1fr auto; border-right: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.wm-k { height: 72px; padding: 0 22px; display: flex; align-items: center; font: 800 26px/1 var(--font-display); letter-spacing: .02em; color: var(--ink); border-bottom: 1px solid var(--line); margin: 0; white-space: nowrap; overflow: hidden; }
.wm-k span { color: transparent; -webkit-text-stroke: 1px var(--ink); margin-left: .14em; }
.wm-tabs { display: grid; align-content: start; padding: 10px 0; }
.wm-tab { height: 48px; padding: 0 20px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; column-gap: 12px; border: 0; border-left: 3px solid transparent; background: none; color: var(--ink2); font: 700 14px/1 var(--font-display); white-space: nowrap; letter-spacing: .12em; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.wm-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-tab:hover { background: var(--s2); color: var(--ink); }
.wm-tab.on { border-left-color: var(--me); background: var(--s3); color: var(--ink); }
.wm-tab kbd { font-size: 10px; min-width: 0; padding: 1px 5px; }
.wm-tab.resume { color: var(--me); }
.wm-me { padding: 16px 22px 18px; border-top: 1px solid var(--line); display: grid; row-gap: 8px; }
.wm-me label { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; color: var(--ink3); }
.wm-me .ui-in { height: 40px; font-size: 15px; width: 100%; }
.wm-team { height: 20px; font: 800 14px/20px var(--font-display); letter-spacing: .12em; color: var(--me); white-space: nowrap; overflow: hidden; }
.wm-team small { font: 500 11px/20px var(--font-mono); letter-spacing: .04em; color: var(--ink3); margin-left: 6px; }
.wm-pane { display: none; grid-template-rows: auto 1fr; min-height: 0; }
.wm-pane.on { display: grid; }
.wm-pane[data-pane="team"] .wm-body { padding: 0; }
.wm-pane[data-pane="team"] .board { position: static; transform: none; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; display: block; background: none; }
.wm-head { height: 72px; padding: 0 30px; display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.wm-head h3 { margin: 0; font: 800 24px/1 var(--font-display); letter-spacing: .04em; color: var(--ink); }
.wm-head h3 small { display: block; margin-top: 5px; font: 500 12px/1 var(--font-text); letter-spacing: 0; color: var(--ink3); }
.wm-body { padding: 24px 30px; min-height: 0; }
/* loadout (war/main.js draws .lo-row / .lo-c into #wmLoad) */
.wm-lo { display: grid; row-gap: 10px; align-content: start; }
.wm-lo-k { display: none; }
.lo-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; column-gap: 14px; height: 58px; border-bottom: 1px solid var(--line); }
.lo-row > span { font: 800 13px/1 var(--font-display); letter-spacing: .18em; color: var(--ink3); }
.lo-row div { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 8px; }
.lo-c { height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: var(--r2); border: 1px solid var(--line); background: var(--s2); color: var(--ink2); font: 700 13px/1 var(--font-display); letter-spacing: .1em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.lo-c:hover { background: var(--s3); color: var(--ink); }
.lo-c.on { border-color: var(--me); color: var(--ink); background: color-mix(in srgb, var(--me) 16%, transparent); box-shadow: inset 0 0 0 1px var(--me); }
.wm-note-row { margin-top: 18px; height: 18px; font: 500 13px/18px var(--font-text); color: var(--ink3); }
/* invite */
.inv { display: grid; grid-template-columns: 1fr 300px; column-gap: 30px; height: 100%; }
.inv-l { display: grid; align-content: start; row-gap: 14px; }
.inv-k { font: 800 44px/1 var(--font-display); letter-spacing: .02em; color: var(--ink); height: 44px; white-space: nowrap; }
.inv-k span { color: var(--me); }
.inv-p { font: 500 15px/1.45 var(--font-text); color: var(--ink2); height: 44px; margin: 0; }
.inv-link { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; height: 52px; padding: 0 8px 0 16px; border: 1px solid var(--line2); border-radius: var(--r2); background: rgba(0, 0, 0, .35); }
.inv-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1 var(--font-mono); color: var(--ink); }
.inv-link span.empty { color: var(--ink3); font-family: var(--font-text); font-weight: 500; }
.inv-link .ui-copy { height: 36px; min-width: 110px; }
.inv-steps { display: grid; row-gap: 8px; margin-top: 6px; }
.inv-steps div { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center; height: 24px; font: 500 14px/1 var(--font-text); color: var(--ink2); }
.inv-steps b { width: 22px; height: 22px; border-radius: 50%; background: var(--s3); color: var(--ink); font: 700 11px/22px var(--font-mono); text-align: center; }
.inv-r { border-left: 1px solid var(--line); padding-left: 30px; display: grid; grid-template-rows: auto 1fr; row-gap: 10px; min-height: 0; }
.inv-r .ui-eyebrow { height: 14px; }
.inv-list { display: grid; align-content: start; row-gap: 6px; overflow: hidden; }
.inv-row { height: 36px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; column-gap: 10px; padding: 0 10px; border-radius: var(--r1); background: var(--s2); font: 600 14px/1 var(--font-text); color: var(--ink); }
.inv-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); }
.inv-row em { font: 500 11px/1 var(--font-mono); font-style: normal; color: var(--ink3); letter-spacing: .06em; }
.inv-row.empty { color: var(--ink3); font-weight: 500; grid-template-columns: 1fr; background: none; border: 1px dashed var(--line); }
/* coin */
.coin { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.coin-g { display: grid; align-content: start; row-gap: 10px; }
.coin-g label { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; color: var(--ink3); height: 10px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.wm-ca { height: 48px; padding: 0 8px 0 14px; border-radius: var(--r2); border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); justify-content: space-between; width: 100%; }
.wm-ca > span { font: 500 13px/1 var(--font-mono); }
.wm-ca:disabled > span { font-family: var(--font-text); color: var(--ink3); }
.coin-links { display: flex; gap: 8px; height: 36px; }
.coin-links a { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r2); background: var(--s3); color: var(--ink); text-decoration: none; font: 700 12px/1 var(--font-display); letter-spacing: .14em; }
.coin-links a:hover { background: var(--s4); }
.coin-links a.off { opacity: .35; pointer-events: none; }
.coin-g .ui-in { width: 100%; font-family: var(--font-mono); font-size: 13px; }
.wm-note { min-height: 36px; margin: 0; font: 500 13px/18px var(--font-text); color: var(--ink2); }
.wm-note.bad { color: var(--bad); } .wm-note.ok { color: var(--good); }
.wm-how { margin: 0; font: 500 14px/1.55 var(--font-text); color: var(--ink2); }
#wmHow { display: none; }   /* the rules text is war/ui.js's (#wmRules) since 10-18 14:15; war/main.js's howText line stays hidden */
.wm-how b { color: var(--ink); }
.coin-pot { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.coin-cell { height: 72px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--s2); display: grid; align-content: space-between; }
.coin-cell i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; color: var(--ink3); }
.coin-cell b { font: 700 22px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.coin-cell b small { font-size: 12px; color: var(--ink3); margin-left: 4px; }
/* settings */
.set { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 0; height: 100%; }
.set-col { display: grid; align-content: start; row-gap: 0; min-height: 0; }
.set-g { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); display: grid; row-gap: 6px; }
.set-g:last-child { border-bottom: 0; }
.set-g > .ui-eyebrow { height: 20px; }
.set-row { display: grid; grid-template-columns: 150px 1fr 54px; align-items: center; column-gap: 14px; height: 34px; }
.set-row > span { font: 600 14px/1 var(--font-text); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row output { font: 700 13px/1 var(--font-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.set-row .ui-seg { grid-column: 2 / 4; }
.set-row .ui-tog { justify-self: start; }
.set-row.tog { grid-template-columns: 150px 1fr; }
.set-row.tog small { font: 500 12px/1 var(--font-mono); color: var(--ink3); margin-left: 12px; }
.set-note { font: 500 12px/1.4 var(--font-text); color: var(--ink3); height: 34px; }
.binds { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 4px; }
.bind { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 34px; column-gap: 10px; font: 600 14px/1 var(--font-text); color: var(--ink2); white-space: nowrap; overflow: hidden; }
.bind.fixed .ui-key { cursor: default; opacity: .7; }
.binds-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; height: 36px; font: 500 12px/1 var(--font-mono); color: var(--ink3); }
.binds-foot .ui-btn { height: 32px; font-size: 12px; padding: 0 14px; }
/* voice: who to mute */
.mutes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; align-content: start; max-height: 160px; overflow: hidden; }
.mute { height: 34px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; column-gap: 10px; padding: 0 10px; border-radius: var(--r1); background: var(--s2); font: 600 13px/1 var(--font-text); color: var(--ink); }
.mute i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); }
.mute span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mute button { height: 24px; padding: 0 10px; border-radius: var(--r1); border: 1px solid var(--line2); background: transparent; color: var(--ink2); font: 700 10px/1 var(--font-display); letter-spacing: .14em; cursor: pointer; }
.mute button.on { background: var(--bad); border-color: transparent; color: #fff; }
.mute.empty { grid-column: 1 / -1; grid-template-columns: 1fr; color: var(--ink3); font-weight: 500; background: none; border: 1px dashed var(--line); }
.wm-foot { display: none; }

/* ------------------------------------------------------------------------------------------------ SCREENS */
/* connection lost (after you joined) */
.recon { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 420px; height: 44px; display: none; align-items: center; justify-content: center; gap: 12px; border-radius: var(--r2); background: var(--s1); border: 1px solid var(--bad); color: var(--ink); font: 700 13px/1 var(--font-display); letter-spacing: .14em; z-index: 12; box-shadow: var(--sh-panel); }
.recon.on { display: flex; }
.recon i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); animation: ui-blink .8s ease-in-out infinite; }
/* the payday sheet: slides in on the right for a few seconds */
.paysheet { position: fixed; right: 34px; top: 50%; transform: translate(calc(100% + 60px), -50%); width: 360px; border-radius: var(--r3); border: 1px solid var(--line); border-left: 4px solid var(--me); background: var(--s1); box-shadow: var(--sh-panel); padding: 20px 22px 18px; z-index: 11; transition: transform .5s var(--ease); font-family: var(--font-text); color: var(--ink); pointer-events: none; }
.paysheet.on { transform: translate(0, -50%); }
.pay-k { display: flex; justify-content: space-between; align-items: baseline; height: 26px; }
.pay-k b { font: 800 24px/1 var(--font-display); letter-spacing: .06em; }
.pay-k em { font: 600 12px/1 var(--font-mono); font-style: normal; color: var(--ink3); letter-spacing: .08em; }
.pay-big { margin-top: 10px; height: 44px; font: 700 38px/44px var(--font-mono); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-big small { font-size: 16px; color: var(--ink3); margin-left: 6px; letter-spacing: 0; }
.pay-sub { height: 36px; margin-top: 2px; font: 500 13px/18px var(--font-text); color: var(--ink2); overflow: hidden; }
.pay-sub b { color: var(--ink); }
.pay-sub.bad { color: var(--bad); }
.pay-bars { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 6px; }
.pay-bars div { height: 34px; display: grid; align-content: end; row-gap: 4px; }
.pay-bars i { display: block; height: 5px; border-radius: 2px; background: var(--c); transform-origin: left; }
.pay-bars b { font: 600 10px/1 var(--font-mono); color: var(--ink3); letter-spacing: .04em; }
.pay-bars b span { color: var(--c); font-weight: 700; }
/* the round's end (war/hud.js J.result fills #reK #reShares #reTop) */
.roundend { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6, 6, 8, .8); z-index: 20; font-family: var(--font-text); color: var(--ink); }
.roundend.on { display: flex; }
.re-in { width: 880px; padding: 36px 40px 30px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); box-shadow: var(--sh-panel); text-align: center; }
.re-k { height: 56px; font: 800 52px/56px var(--font-display); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-shares { display: flex; gap: 22px; justify-content: center; align-items: flex-end; height: 190px; margin: 26px 0 6px; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.re-sh { width: 120px; height: 180px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; font: 800 13px/1 var(--font-display); letter-spacing: .14em; }
.re-sh i { display: block; width: 70px; border-radius: var(--r1) var(--r1) 0 0; }
.re-sh b { font: 700 22px/1 var(--font-mono); color: var(--ink); }
.re-top { margin-top: 14px; display: grid; gap: 4px; }
.re-row { display: grid; grid-template-columns: 30px 1fr 100px 90px 80px; gap: 8px; height: 30px; align-items: center; font: 600 14px/30px var(--font-text); background: var(--s2); border-radius: var(--r1); padding: 0 12px; text-align: left; }
.re-row span { color: var(--ink3); font-family: var(--font-mono); }
.re-row em { font-style: normal; color: var(--ink2); font-family: var(--font-mono); font-size: 13px; }
.re-foot { margin-top: 18px; height: 18px; font: 500 13px/18px var(--font-text); color: var(--ink3); }
/* the help overlay (H) */
.help { font-family: var(--font-text); background: var(--s1); border-color: var(--line); border-radius: var(--r3); box-shadow: var(--sh-panel); padding: 26px 32px; }
.help h3 { font: 800 22px/1 var(--font-display); letter-spacing: .14em; color: var(--ink); }
.help h4 { font: 700 11px/1 var(--font-mono); letter-spacing: .18em; color: var(--ink3); }
.help p { font: 500 13px/1.3 var(--font-text); color: var(--ink2); }
/* the big map keeps its place; only the frame follows the system */
.bigmap { background: var(--s1); border-color: var(--line); border-radius: var(--r3); box-shadow: var(--sh-panel); }
/* THE TEAM BOARD (hold Z; the same in the menu's Team pane): your team's players by kills, each one's cut of the next payday,
   you lit, the other three teams as one line each. Every row a fixed slot. */
.board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1040px; height: 600px; display: none; padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); box-shadow: var(--sh-panel); font-family: var(--font-text); color: var(--ink); overflow: hidden; }
.board.on { display: block; }
.tb { display: grid; grid-template-rows: 72px 1fr auto; height: 100%; }
.tb-head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 30px; border-bottom: 1px solid var(--line); }
.tb-head h3 { margin: 0; font: 800 26px/1 var(--font-display); letter-spacing: .04em; color: var(--me); white-space: nowrap; }
.tb-head h3 small { display: block; margin-top: 6px; font: 500 12px/1 var(--font-text); letter-spacing: 0; color: var(--ink3); }
.tb-pay { display: grid; grid-template-columns: auto auto; column-gap: 24px; text-align: right; }
.tb-pay div { display: grid; row-gap: 5px; }
.tb-pay i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; color: var(--ink3); text-transform: uppercase; }
.tb-pay b { font: 700 22px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-pay b small { font-size: 12px; color: var(--ink3); margin-left: 4px; }
.tb-rows { padding: 10px 30px 0; display: grid; grid-template-rows: 26px repeat(10, 38px); row-gap: 2px; align-content: start; }
.tb-r { display: grid; grid-template-columns: 34px 1fr 80px 64px 64px 64px 64px 128px; column-gap: 12px; align-items: center; height: 38px; padding: 0 12px; border-radius: var(--r1); background: var(--s2); font: 600 15px/1 var(--font-text); color: var(--ink); }
.tb-r.h { height: 26px; background: none; font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.tb-r.me { background: color-mix(in srgb, var(--me) 16%, transparent); box-shadow: inset 0 0 0 1px var(--me); }
.tb-r.empty { background: none; border: 1px dashed var(--line); }
.tb-r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-r i { font: 700 14px/1 var(--font-mono); font-style: normal; text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tb-r i.k { color: var(--ink); }
.tb-r i.cut { color: var(--me); font-weight: 700; }
.tb-r .tb-n { font: 700 13px/1 var(--font-mono); color: var(--ink3); }
.tb-r.me .tb-n { color: var(--me); }
.tb-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; padding: 12px 30px 16px; border-top: 1px solid var(--line); }
.tb-foot.wide { grid-template-columns: repeat(4, 1fr); }
.tb-t.crew em { font-size: 13px; }
.tb-t { height: 48px; display: grid; grid-template-columns: 1fr auto auto; column-gap: 14px; align-items: center; padding: 0 14px; border-left: 3px solid var(--c); border-radius: var(--r1); background: var(--s2); }
.tb-t em { font: 800 15px/1 var(--font-display); letter-spacing: .08em; font-style: normal; color: var(--c); white-space: nowrap; }
.tb-t b { font: 700 16px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-t b small { font: 500 10px/1 var(--font-mono); color: var(--ink3); margin-left: 4px; letter-spacing: .1em; }

/* ------------------------------------------------------------------------------------------------ a laptop (1366 x 768) */
@media (max-width: 1500px) { .wm-in { width: 1040px; height: 620px; } .lo-row { grid-template-columns: 96px 1fr; } .set-row { grid-template-columns: 130px 1fr 50px; } .set-row.tog { grid-template-columns: 130px 1fr; } }
@media (prefers-reduced-motion: reduce) { .paysheet, .plate .pl-bar i, .sh-row .sh-bar i, .tt-bg { transition: none; } .ui-key.listen, .recon i { animation: none; } }

/* ------------------------------------------------------------------------------------------------ CREWS (owner 2026-10-18 11:42): sheets and the crew panel */
.sheet { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6, 6, 8, .6); z-index: 16; font-family: var(--font-text); color: var(--ink); }
.sheet.on { display: flex; }
.sheet-in { width: 640px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); box-shadow: var(--sh-panel); display: grid; grid-template-rows: auto 1fr auto; }
.sheet-head { display: grid; grid-template-columns: 1fr auto; align-items: start; padding: 24px 28px 0; }
.sheet-head h2 { margin: 6px 0 0; font: 800 40px/1 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.sheet-x { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r2); background: transparent; color: var(--ink2); font: 500 22px/1 var(--font-text); cursor: pointer; }
.sheet-x:hover { background: var(--s3); color: var(--ink); }
.sheet-body { padding: 20px 28px 6px; display: grid; row-gap: 16px; }
.sheet-grid { display: grid; grid-template-columns: 1fr 120px; column-gap: 12px; }
.sheet-f { display: grid; row-gap: 8px; }
.sheet-f > span { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); height: 10px; }
.sheet-f .ui-in { width: 100%; }
.sheet-f.tag .ui-in { font-family: var(--font-mono); letter-spacing: .1em; text-align: center; }
.sheet-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
.sheet-note { font: 500 12px/1.35 var(--font-text); color: var(--ink3); height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-err { height: 18px; font: 600 13px/18px var(--font-text); color: var(--bad); }
.sheet-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; padding: 14px 28px 24px; border-top: 1px solid var(--line); }
.sheet-hint { font: 500 12px/1.4 var(--font-text); color: var(--ink3); height: 50px; overflow: hidden; display: flex; align-items: center; }
.sheet-foot .ui-btn { height: 48px; padding: 0 26px; font-size: 16px; }
.swatches { display: grid; grid-template-columns: repeat(11, 1fr); column-gap: 8px; height: 36px; }
.swatch { height: 36px; border-radius: var(--r2); border: 2px solid transparent; background: var(--c); cursor: pointer; transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease); position: relative; }
.swatch:hover { transform: translateY(-2px); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }
.swatch.auto { background: linear-gradient(135deg, var(--s4), var(--s2)); border-color: var(--line2); }
.swatch.auto::after { content: 'AUTO'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink2); }
.crews-list { display: grid; row-gap: 6px; max-height: 232px; overflow: hidden; }
.crew-row { height: 50px; display: grid; grid-template-columns: 12px 64px 1fr 80px 70px auto; align-items: center; column-gap: 12px; padding: 0 12px; border-radius: var(--r2); background: var(--s2); border: 1px solid var(--line); font: 600 14px/1 var(--font-text); color: var(--ink); }
.crew-row i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.crew-row em { font: 800 15px/1 var(--font-display); letter-spacing: .1em; font-style: normal; color: var(--c); }
.crew-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-row b { font: 700 13px/1 var(--font-mono); color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
.crew-row b small { color: var(--ink3); font-weight: 500; }
.crew-row .ui-btn { height: 32px; padding: 0 14px; font-size: 12px; }
.crew-row.empty { grid-template-columns: 1fr; color: var(--ink3); font-weight: 500; background: none; border-style: dashed; }
/* the crew panel (the Invite pane while you ride with a crew) */
html:not(.in-crew) .crew-body { display: none; }
html.in-crew .inv-body { display: none; }
.crew-body { display: grid !important; grid-template-rows: auto 1fr; row-gap: 18px; }
.crew-top { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; height: 64px; }
.crew-k { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.crew-k em { font: 800 40px/1 var(--font-display); letter-spacing: .08em; font-style: normal; color: var(--me); white-space: nowrap; }
.crew-k b { font: 700 22px/1 var(--font-text); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-facts { display: grid; grid-template-columns: repeat(3, auto); column-gap: 26px; }
.crew-facts div { display: grid; row-gap: 5px; text-align: right; }
.crew-facts i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.crew-facts b { font: 700 18px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.crew-grid { display: grid; grid-template-columns: 1fr 320px; column-gap: 30px; min-height: 0; }
.crew-l, .crew-r { display: grid; align-content: start; row-gap: 10px; min-height: 0; }
.crew-r { border-left: 1px solid var(--line); padding-left: 30px; }
.crew-list { display: grid; row-gap: 6px; max-height: 360px; overflow: hidden; }
.crew-m { height: 40px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 10px; padding: 0 12px; border-radius: var(--r1); background: var(--s2); font: 600 14px/1 var(--font-text); color: var(--ink); }
.crew-m.me { box-shadow: inset 0 0 0 1px var(--me); }
.crew-m span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-m .chip { height: 20px; padding: 0 8px; border-radius: var(--r1); background: var(--me); color: var(--me-ink); font: 800 10px/20px var(--font-display); letter-spacing: .16em; }
.crew-m button { height: 26px; padding: 0 10px; border-radius: var(--r1); border: 1px solid var(--line2); background: transparent; color: var(--ink2); font: 700 10px/1 var(--font-display); letter-spacing: .14em; cursor: pointer; }
.crew-m button:hover { border-color: var(--ink3); color: var(--ink); }
.crew-m button.kick:hover { border-color: var(--bad); color: var(--bad); }
.crew-m.empty { grid-template-columns: 1fr; background: none; border: 1px dashed var(--line); color: var(--ink3); font-weight: 500; }
.crew-lead { display: grid; row-gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--s2); }
html:not(.crew-lead) .crew-lead { display: none; }
.ui-btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.inv-crewbtns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; margin-top: 8px; }
@media (max-width: 1500px) { .sheet-in { width: 600px; } .crew-grid { grid-template-columns: 1fr 280px; } }

/* ------------------------------------------------------------------------------------------------ THE PAGE (owner 10-18 13:45: "make the page scrollable. explain everything in detail") */
/* the title scrolls while it is on: the 3D stage is the first screen (100vh), the sections follow on an opaque ground */
html.landing, html.landing body { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100%; }
.title { position: relative; inset: auto; min-height: 100vh; display: block; }
.title.off { display: none; }
.tt-stage { position: relative; height: 100vh; min-height: 620px; }
.pg { position: relative; background: var(--bg); color: var(--ink); font-family: var(--font-text); padding-bottom: 68px; }
.pg-s { padding: 96px 0; border-top: 1px solid var(--line); }
.pg-wrap { width: min(1360px, calc(100% - 128px)); margin: 0 auto; }
.pg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.pg-two.rev { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .pg-two.rev .pg-txt { order: 2; }
.pg-eye { font: 600 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); display: flex; gap: 12px; align-items: center; height: 14px; }
.pg-eye b { color: var(--me); }
.pg-h { margin: 14px 0 0; font: 800 clamp(40px, 4.4vw, 64px)/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.pg-p { margin: 18px 0 0; font: 500 17px/1.5 var(--font-text); color: var(--ink2); max-width: 56ch; }
.pg-p.pg-lead { max-width: 74ch; }
.pg-facts { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pg-facts div { background: var(--bg); padding: 14px 16px; display: grid; row-gap: 6px; }
.pg-facts b { font: 700 28px/1 var(--font-mono); color: var(--ink); white-space: nowrap; } .pg-facts b small { font-size: 14px; color: var(--ink3); margin-left: 2px; }
.pg-facts i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.pg-fig { margin: 0; position: relative; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: var(--s2); aspect-ratio: 16 / 9; }
.pg-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; padding: 0 14px; display: flex; align-items: flex-end; padding-bottom: 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink2); background: linear-gradient(180deg, transparent, rgba(8, 8, 10, .82)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-crews .pg-fig { aspect-ratio: 1200 / 780; }
.pg-btns { margin-top: 26px; display: flex; gap: 10px; }
.pg-btns .ui-btn { height: 48px; padding: 0 22px; font-size: 15px; }
/* how it pays */
.pg-cells { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pg-cell { background: var(--bg); padding: 26px 28px 28px; min-height: 320px; }
.pg-cell-k { font: 600 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); height: 14px; }
.pg-big { margin-top: 16px; font: 700 64px/1 var(--font-mono); letter-spacing: -.03em; color: var(--ink); height: 64px; white-space: nowrap; } .pg-big small { font-size: 22px; color: var(--ink3); margin-left: 6px; letter-spacing: 0; }
.pg-cell p { margin: 16px 0 0; font: 500 15px/1.5 var(--font-text); color: var(--ink2); }
.tk { color: var(--ink); font-weight: 700; }
.pg-rows { margin-top: 14px; display: grid; }
.pg-rows div { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 34px; border-bottom: 1px solid var(--line); font: 500 14px/1 var(--font-text); color: var(--ink2); }
.pg-rows b { font: 700 16px/1 var(--font-mono); color: var(--ink); }
/* the map */
.pg-mapbox { border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: #0f1013; }
.pg-mapbox canvas { width: 100%; aspect-ratio: 1 / 1; display: block; }
.pg-mapfoot { height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink3); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.pg-legend { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.pg-legend div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; height: 28px; font: 700 13px/1 var(--font-display); letter-spacing: .08em; color: var(--ink2); white-space: nowrap; overflow: hidden; }
.pg-legend div span { overflow: hidden; text-overflow: ellipsis; }
.pg-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.pg-legend b { font: 700 13px/1 var(--font-mono); color: var(--ink); }
/* the gangs */
.pg-cards { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pg-card { border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r3); background: var(--s2); padding: 22px 22px 20px; display: grid; grid-template-rows: auto auto auto auto; align-content: start; row-gap: 16px; }
.pg-card h3 { margin: 0; font: 800 24px/1 var(--font-display); letter-spacing: .04em; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 24px; }
.pg-card h3 small { font: 600 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); margin-left: 8px; }
.pg-card p { margin: 0; font: 500 14px/1.45 var(--font-text); color: var(--ink2); height: calc(6 * 1.45em); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.pg-chars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pg-char { position: relative; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: #22262c; aspect-ratio: 2 / 3; cursor: pointer; padding: 0; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.pg-char img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-char span { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; font: 700 11px/26px var(--font-display); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink); background: rgba(8, 8, 10, .72); }
.pg-char:hover { border-color: var(--ink3); transform: translateY(-2px); }
.pg-char.picked { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.pg-char.picked span { background: var(--c); color: #0b0b0d; }
.pg-pick { height: 16px; font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; }
.pg-pick b { color: var(--c); }
/* how to play */
.pg-keys { margin-top: 24px; display: grid; row-gap: 10px; }
.pg-keys > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 14px; min-height: 40px; font: 500 15px/1.5 var(--font-text); color: var(--ink2); }
.pg-keys kbd { font-size: 12px; padding: 4px 8px; }
.pg-keys > div > kbd { justify-self: start; }
/* the coin */
.pg-coinrow { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: center; padding: 34px 38px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--s2); }
.pg-coinname { display: flex; gap: 18px; align-items: center; min-width: 0; } .pg-coinname img { width: 56px; height: 56px; border-radius: var(--r2); object-fit: cover; flex: none; }
.pg-coinname .pg-h { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-tk { margin-top: 8px; font: 700 20px/1 var(--font-mono); color: var(--me); }
.pg-ca { display: grid; row-gap: 10px; min-width: 0; }
.pg-ca-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; height: 52px; padding: 0 8px 0 16px; border: 1px solid var(--line2); border-radius: var(--r2); background: rgba(0, 0, 0, .35); }
.pg-ca-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1 var(--font-mono); color: var(--ink3); }
.pg-ca-row.live { border-color: var(--me); } .pg-ca-row.live span { color: var(--ink); }
.pg-ca-row .ui-copy { height: 36px; min-width: 90px; } .pg-ca-row .ui-copy:disabled { opacity: .35; cursor: default; }
.pg-ca-links { display: flex; gap: 8px; height: 36px; }
.pg-ca-links a { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r2); background: var(--s3); color: var(--ink); text-decoration: none; font: 700 12px/1 var(--font-display); letter-spacing: .14em; }
.pg-ca-links a.off { opacity: .35; pointer-events: none; }
/* the foot */
.pg-footin { display: grid; row-gap: 14px; width: min(640px, calc(100% - 128px)); text-align: center; padding: 10px 0 20px; justify-items: stretch; }
.pg-footin .pg-h { font-size: clamp(48px, 6vw, 84px); margin: 0 0 10px; }
.pg-footin .tt-go-row { grid-template-columns: minmax(0, 1fr) 200px; height: 56px; }
.pg-footin .tt-crews { height: 44px; }
.pg-small { margin-top: 10px; display: flex; justify-content: center; gap: 24px; font: 500 12px/1 var(--font-mono); color: var(--ink3); height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-small span:first-child { display: none; }
/* the pinned PLAY bar once the stage is scrolled away */
.tt-pin { position: fixed; left: 0; right: 0; bottom: 0; height: 68px; transform: translateY(100%); transition: transform .3s var(--ease); background: var(--s1); border-top: 1px solid var(--line); z-index: 11; display: flex; align-items: center; justify-content: center; }
html.scrolled .tt-pin { transform: none; }
.tt-pin-in { width: min(1360px, calc(100% - 128px)); display: grid; grid-template-columns: auto minmax(0, 1fr) 200px auto; column-gap: 12px; align-items: center; }
.tt-pin-k { font: 800 24px/1 var(--font-display); color: var(--ink); white-space: nowrap; margin-right: 12px; overflow: hidden; max-width: 320px; } .tt-pin-k span { color: transparent; -webkit-text-stroke: 1px var(--ink); margin-left: .14em; }
.tt-pin .ui-in { height: 44px; max-width: 360px; } .tt-pin .tt-play { height: 44px; font-size: 18px; }
html.joining .tt-pin, html.keyart .tt-pin, html.keyart .pg { display: none !important; }
html.joining .pg { visibility: hidden; }
@media (max-width: 1500px) { .pg-wrap, .tt-pin-in { width: min(1200px, calc(100% - 80px)); } .pg-two { gap: 36px; } .pg-s { padding: 72px 0; } .pg-cards { gap: 12px; } .pg-card { padding: 16px; } .pg-card h3 { font-size: 21px; } .pg-cell { padding: 20px 22px 22px; min-height: 300px; } .pg-big { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) { .tt-pin { transition: none; } }

/* ------------------------------------------------------------------------------------------------ THE WAR BOARD v2 (owner 14:15: Tab = every gang, crew and player, what each gets) + the LEDGER (owner 14:08) */
.board { width: 1280px; height: 740px; }
.tb-head { grid-template-columns: auto 1fr auto; column-gap: 24px; }
.tb-money { display: grid; grid-template-columns: repeat(4, auto); column-gap: 26px; }
.tb-money div { display: grid; row-gap: 5px; text-align: right; }
.tb-money i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; color: var(--ink3); text-transform: uppercase; white-space: nowrap; }
.tb-money b { font: 700 22px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-money b small { font-size: 11px; color: var(--ink3); margin-left: 4px; }
.tb-money b.pay { color: var(--me); }
.tb-sort { display: flex; gap: 4px; align-items: center; justify-self: start; }
.tb-sort span { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); margin-right: 6px; }
.tb-sort button { height: 26px; padding: 0 10px; border-radius: var(--r1); border: 1px solid var(--line2); background: transparent; color: var(--ink2); font: 700 10px/1 var(--font-display); letter-spacing: .14em; cursor: pointer; }
.tb-sort button.on { background: var(--me); border-color: transparent; color: var(--me-ink); }
.tb-body { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 20px; padding: 12px 24px 0; min-height: 0; }
.tb-teams { display: grid; grid-template-rows: 24px repeat(12, 34px); row-gap: 2px; align-content: start; }
.tb-t2 { display: grid; grid-template-columns: 10px minmax(0, 1fr) 46px 36px 40px 50px 84px; column-gap: 8px; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--r1); background: var(--s2); font: 600 13px/1 var(--font-text); color: var(--ink); }
.tb-t2.h { height: 24px; background: none; font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.tb-t2.me { box-shadow: inset 0 0 0 1px var(--c); }
.tb-t2.empty { background: none; border: 1px dashed var(--line); }
.tb-t2 i.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tb-t2 em { font: 800 13px/1 var(--font-display); letter-spacing: .06em; font-style: normal; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-t2 em small { font: 600 10px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink3); margin-left: 6px; }
.tb-t2 b { font: 700 12px/1 var(--font-mono); color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
.tb-t2 b.pay { color: var(--ink); }
.tb-t2 u { text-decoration: none; font: 700 9px/1 var(--font-display); letter-spacing: .14em; color: var(--ink3); text-align: center; }
.tb-t2 u.open { color: var(--good); }
.tb-players { display: grid; grid-template-rows: 24px repeat(15, 34px); row-gap: 2px; align-content: start; min-width: 0; }
.tb-p { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 40px 40px 40px 44px 56px 24px 24px 96px; column-gap: 8px; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--r1); background: var(--s2); font: 600 13px/1 var(--font-text); color: var(--ink); }
.tb-p.h { height: 24px; background: none; font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.tb-p.me { background: color-mix(in srgb, var(--me) 16%, transparent); box-shadow: inset 0 0 0 1px var(--me); }
.tb-p.empty { background: none; border: 1px dashed var(--line); }
.tb-p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-p em { font: 800 11px/1 var(--font-display); letter-spacing: .1em; font-style: normal; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-p i { font: 700 12px/1 var(--font-mono); font-style: normal; text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tb-p i.k { color: var(--ink); } .tb-p i.pay { color: var(--me); font-weight: 700; font-size: 13px; }
.tb-p .ok { width: 16px; height: 16px; border-radius: 50%; background: var(--good); justify-self: center; } .tb-p .no { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line2); justify-self: center; }
.tb-p .tb-n { font: 700 12px/1 var(--font-mono); color: var(--ink3); } .tb-p.me .tb-n { color: var(--me); }
.tb-rule { padding: 10px 24px 14px; font: 500 12px/1.4 var(--font-text); color: var(--ink3); border-top: 1px solid var(--line); height: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-rule b { color: var(--ink2); }
.wm-pane[data-pane="team"] .board { width: 100%; height: 100%; }
/* the ledger */
.lg { display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 14px; min-height: 0; padding: 18px 30px 20px; }
.lg-seg { width: 180px; }
.lg-head { display: grid; grid-template-columns: repeat(4, 1fr) 220px; column-gap: 10px; }
.lg-cell { height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--s2); display: grid; align-content: space-between; }
.lg-cell i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; color: var(--ink3); text-transform: uppercase; }
.lg-cell b { font: 700 18px/1 var(--font-mono); color: var(--ink); white-space: nowrap; overflow: hidden; } .lg-cell b small { font-size: 10px; color: var(--ink3); margin-left: 4px; }
.lg-head .ui-in { height: 58px; font-family: var(--font-text); }
.lg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 22px; min-height: 0; }
.lg-rows { display: grid; grid-template-rows: 24px minmax(0, 1fr); min-height: 0; }
.lg-r { display: grid; grid-template-columns: 72px minmax(0, 1fr) 150px 84px 90px 70px; column-gap: 10px; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--r1); background: var(--s2); font: 600 13px/1 var(--font-text); color: var(--ink); margin-bottom: 2px; }
.lg-r.h { height: 24px; background: none; font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; margin: 0; }
.lg-r.me { box-shadow: inset 0 0 0 1px var(--me); }
.lg-r.empty { grid-template-columns: 1fr; background: none; border: 1px dashed var(--line); color: var(--ink3); font-weight: 500; }
.lg-r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-r span.t { font: 600 12px/1 var(--font-mono); color: var(--ink3); }
.lg-r em { font: 800 11px/1 var(--font-display); letter-spacing: .1em; font-style: normal; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-r i { font: 700 13px/1 var(--font-mono); font-style: normal; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-r a { font: 700 10px/1 var(--font-display); letter-spacing: .14em; color: var(--ink2); text-decoration: none; padding: 5px 8px; border-radius: var(--r1); background: var(--s3); justify-self: start; }
.lg-r a:hover { background: var(--s4); color: var(--ink); }
.lg-r span.k { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; }
#lgList { min-height: 0; overflow-y: auto; }
.lg-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 10px; border-left: 1px solid var(--line); padding-left: 22px; min-height: 0; }
.lg-tot { display: grid; grid-template-columns: 10px minmax(0, 1fr) 70px 70px; column-gap: 8px; align-items: center; height: 32px; padding: 0 8px; border-radius: var(--r1); background: var(--s2); margin-bottom: 4px; font: 700 12px/1 var(--font-display); letter-spacing: .06em; color: var(--c); }
.lg-tot.h { background: none; font: 600 9px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); height: 18px; }
.lg-tot i.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lg-tot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-tot b { font: 700 12px/1 var(--font-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.lg-rule { font: 500 12px/1.45 var(--font-text); color: var(--ink2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--s2); min-height: 64px; }
.lg-rule b { color: var(--ink); }
/* eligibility, in the Coin pane */
.wm-elig { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--s2); font: 500 13px/1.4 var(--font-text); color: var(--ink2); min-height: 58px; }
.wm-elig i { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); margin-top: 4px; } .wm-elig.ok i { background: var(--good); } .wm-elig.bad i { background: var(--bad); }
.wm-elig b { color: var(--ink); }
.pg-sub { margin-top: 10px !important; color: var(--ink3) !important; font-size: 13px !important; }
@media (max-width: 1500px) { .board { width: 1120px; height: 660px; } .tb-body { grid-template-columns: 340px minmax(0, 1fr); } .tb-t2 { grid-template-columns: 10px minmax(0, 1fr) 40px 32px 36px 44px 74px; } .tb-p { grid-template-columns: 26px minmax(0, 1fr) 56px 34px 34px 34px 40px 50px 22px 22px 84px; } .lg-grid { grid-template-columns: minmax(0, 1fr) 220px; } .lg-r { grid-template-columns: 64px minmax(0, 1fr) 120px 70px 80px 60px; } }

/* ------------------------------------------------------------------------------------------------ THE PAGE v2 (chat 06e571a6, owner 10-18 15:05 "make everything more clear / about page etc")
   larger reading sizes, brighter body text, the pinned bar carries the section links */
html.landing { scroll-behavior: smooth; }
.pg-s { padding: 112px 0; }
.pg-eye { font-size: 12px; height: 16px; letter-spacing: .2em; color: var(--ink2); }
.pg-eye b { font-size: 13px; }
.pg-h { font-size: clamp(46px, 4.6vw, 74px); }
.pg-p { font-size: 19px; line-height: 1.55; color: rgba(243, 239, 230, .8); max-width: 58ch; }
.pg-p b, .pg-p strong { color: var(--ink); font-weight: 700; }
.pg-facts b { font-size: 34px; } .pg-facts i { font-size: 11px; color: var(--ink2); } .pg-facts div { padding: 18px 18px; row-gap: 9px; }
.pg-cell { padding: 30px 32px 32px; }
.pg-cell-k { font-size: 12px; height: 16px; color: var(--ink2); }
.pg-cell p { font-size: 16.5px; line-height: 1.55; color: rgba(243, 239, 230, .8); }
.pg-cell p.pg-sub { font-size: 14.5px; color: var(--ink3); }
.pg-rows div { height: 40px; font-size: 15.5px; color: rgba(243, 239, 230, .8); } .pg-rows b { font-size: 17px; }
.pg-legend div { height: 34px; font-size: 14.5px; } .pg-legend b { font-size: 14.5px; }
.pg-mapfoot { font-size: 12.5px; }
.pg-card p { font-size: 15px; line-height: 1.5; color: rgba(243, 239, 230, .78); height: calc(6 * 1.5em); }
.pg-card h3 { font-size: 27px; height: 28px; }
.pg-pick { font-size: 12px; }
.pg-keys > div { font-size: 16.5px; min-height: 44px; color: rgba(243, 239, 230, .8); }
.pg-fig figcaption { font-size: 13px; }
/* the pinned bar: brand · the sections · name · PLAY */
.tt-pin { height: 72px; }
.tt-pin-in { grid-template-columns: auto minmax(0, 1fr) 240px 170px; column-gap: 14px; }
.tt-pin-k { font: 800 24px/1 var(--font-display); letter-spacing: .035em; text-transform: uppercase; color: var(--ink); max-width: 280px; margin-right: 8px; text-overflow: ellipsis; }
.tt-pin-k span { color: inherit; -webkit-text-stroke: 0; margin-left: 0; }
.tt-nav { display: flex; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; }
.tt-nav a { flex: none; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r1); color: var(--ink2); text-decoration: none; font: 700 13.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.tt-nav a:hover { color: var(--ink); background: var(--s3); }
.tt-nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.tt-pin .ui-in { height: 46px; max-width: none; } .tt-pin .tt-play { height: 46px; font-size: 19px; box-shadow: none; }
@media (max-width: 1500px) { .pg-s { padding: 84px 0; } .pg-p { font-size: 17.5px; } .tt-pin-in { grid-template-columns: auto minmax(0, 1fr) 200px 150px; } .tt-nav a { padding: 0 8px; font-size: 12.5px; } .tt-pin-k { font-size: 21px; max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { html.landing { scroll-behavior: auto; } .tt-more svg { animation: none; } }
/* the joining card v2: a dark band across the middle of the city (opaque gradient, no blur), the rest of the view dimmed, a running line */
.tt-join { top: 50%; width: 100vw; height: 230px; gap: 14px; background: linear-gradient(90deg, rgba(8, 8, 10, 0), rgba(8, 8, 10, .86) 22%, rgba(8, 8, 10, .86) 78%, rgba(8, 8, 10, 0)); box-shadow: 0 0 0 100vmax rgba(8, 8, 10, .38); }
.tt-join .ui-eyebrow { font-size: 12px; letter-spacing: .26em; color: var(--ink2); }
.tt-join-k { font-size: 84px; height: 84px; }
.tt-join-s { font-size: 15.5px; color: var(--ink); }
.tt-join::after { content: ''; position: absolute; left: calc(50% - 160px); bottom: 26px; width: 320px; height: 2px; background: linear-gradient(90deg, transparent, var(--me), transparent) no-repeat, rgba(243, 239, 230, .1); background-size: 40% 100%, 100% 100%; animation: tt-run 1.1s linear infinite; }
@keyframes tt-run { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .tt-join::after { animation: none; } }
/* the character pick on the stage (owner 16:27 'why cant i choose my character model'): a label over the heroes, each hero a button
   (hover = it turns to you, its ring lights, a tag names who you would play), the picked one stays lit, its plate says YOUR PICK */
.tt-pick { position: absolute; left: 35%; top: 27.5vh; transform: translateX(-50%); width: 56vw; display: grid; justify-items: center; row-gap: 7px; text-align: center; pointer-events: none; }
.tt-pick-k { height: 30px; font: 800 30px/30px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-shadow: var(--sh-text); white-space: nowrap; }
.tt-pick-k span { color: var(--ink2); }
.tt-pick-s { height: 16px; font: 500 12.5px/16px var(--font-mono); letter-spacing: .05em; color: var(--ink); opacity: .78; text-shadow: var(--sh-text); white-space: nowrap; }
.tt-heroes { position: absolute; inset: 0; pointer-events: none; }
.hero-hit { position: absolute; top: 38vh; height: 42vh; width: 8.5vw; transform: translateX(-50%); padding: 0; border: 0; border-radius: var(--r3); background: none; cursor: pointer; pointer-events: auto; --c: var(--ink); }
.hero-hit:nth-child(1) { left: 14%; } .hero-hit:nth-child(2) { left: 28%; } .hero-hit:nth-child(3) { left: 42%; } .hero-hit:nth-child(4) { left: 56%; }
.hero-hit::after { content: attr(data-label); position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); height: 26px; padding: 0 10px; border-radius: var(--r1); background: var(--c); color: #0b0b0d; font: 800 12px/26px var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity var(--fast) var(--ease); }
.hero-hit:hover::after, .hero-hit:focus-visible::after { opacity: 1; }
.hero-hit:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.plate.picked::after { content: 'YOUR PICK'; position: absolute; right: 14px; top: -11px; height: 18px; padding: 0 8px; border-radius: var(--r1); background: var(--c); color: #0b0b0d; font: 800 10px/18px var(--font-display); letter-spacing: .18em; }
.plate .pl-chip { cursor: pointer; }
.plate .pl-chip:hover { background: rgba(243, 239, 230, .1); }
html.keyart .tt-pick, html.keyart .tt-heroes, .title.fatal .tt-pick, .title.fatal .tt-heroes { display: none !important; }
@media (max-height: 820px) { .tt-pick { top: 26vh; } .tt-pick-k { font-size: 25px; height: 26px; line-height: 26px; } }