/* GRAND THEFT PARIS · the GTP look (UI chat a14d2fda, 2026-10-19). Loaded LAST, after tokens/pc/war/combat/ui.css: it re-tokens the
   whole game and restyles every player-facing screen in one system. The kit's identity: the Ultra wordmark (white, black stroke, hard
   shadow) with the Tower in pink -> orange -> yellow; UI labels in Barlow Condensed, the big words in Anton, every number in JetBrains
   Mono; dark asphalt panels with thin outlines and square corners, one sunset gradient for what matters now, teal for money.
   Rules kept: fixed slots (content never moves anything), no blur or blend layers over the canvas, page writes never throw (ids unchanged). */

:root {
  --pink: #ff3d8b; --orange: #ff8a3d; --gold: #ffd23d; --teal: #22d8c8;
  --sun: linear-gradient(90deg, #ff3d8b 0%, #ff8a3d 58%, #ffd23d 100%);
  --sun-v: linear-gradient(180deg, #ff3d8b 0%, #ff8a3d 55%, #ffd23d 100%);
  --acc: #ff3d8b; --acc-ink: #16030b;
  --good: #22d8c8; --warn: #ffd23d; --bad: #ff3d55;
  --bg: #09090b; --s0: rgba(9, 9, 11, .92); --s1: rgba(12, 12, 15, .96); --s2: rgba(246, 241, 232, .04); --s3: rgba(246, 241, 232, .08); --s4: rgba(246, 241, 232, .14);
  --ink: #f6f1e8; --ink2: rgba(246, 241, 232, .72); --ink3: rgba(246, 241, 232, .44);
  --line: rgba(246, 241, 232, .12); --line2: rgba(246, 241, 232, .24);
  --font-brand: 'Ultra', 'Rockwell Extra Bold', Georgia, serif;
  --font-poster: 'Anton', 'Barlow Condensed', Impact, sans-serif;
  --font-display: 'Barlow Condensed', 'Anton', Impact, sans-serif;
  --font-text: 'Barlow', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r1: 0px; --r2: 2px; --r3: 3px;
  --sh-panel: inset 0 1px 0 rgba(246, 241, 232, .05), 0 26px 80px rgba(0, 0, 0, .6);
  --sh-hard: 2px 2px 0 rgba(0, 0, 0, .92), 0 0 10px rgba(0, 0, 0, .35);
  --sh-out: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 0 #000;
}
body { font-family: var(--font-text); }

/* ================================================================================================ the wordmark (svg built by __gtpMark) */
.gtp-mark { display: block; margin: 0; line-height: 0; text-shadow: none; }
.gtp-mark svg.gm { display: block; width: 100%; height: auto; overflow: visible; }
.gm text { font-family: var(--font-brand); font-size: 104px; }
.gm .gm-sh text, .gm .gm-sh path { fill: #000; stroke: #000; stroke-width: 18px; stroke-linejoin: round; }
.gm .gm-w text { fill: var(--ink); stroke: #000; stroke-width: 18px; stroke-linejoin: round; paint-order: stroke fill; }
.gm .gm-t path { stroke: #000; stroke-width: 7px; stroke-linejoin: round; paint-order: stroke fill; }

/* ================================================================================================ THE TITLE */
.title { --col: 520px; --colx: 60px; --top: 78px; --pb: 4.4vh; --plh: 128px; }
/* the loading cards: a real capture under the title until the live render takes over; a short fade, so the still and the live frame
   never stand on top of each other long enough to read as a doubled picture */
.tt-bg { transition: opacity .35s var(--ease); }
.tt-bg.swap { opacity: 0; }
.title.live .tt-bg { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.tt-cap { position: absolute; left: 32px; top: calc(var(--top) + 10px); height: 30px; display: flex; align-items: center; gap: 10px; pointer-events: none; transition: opacity .3s; }
.title.live .tt-cap { opacity: 0; }
.tt-cap i { width: 10px; height: 10px; background: var(--pink); animation: gtp-blink 1s steps(2) infinite; }
.tt-cap b { font: 400 18px/30px var(--font-poster); letter-spacing: .14em; color: var(--ink); text-shadow: var(--sh-hard); }
.tt-cap span { font: 600 13px/30px var(--font-mono); letter-spacing: .06em; color: var(--ink2); text-shadow: 0 1px 2px #000; white-space: nowrap; }
@keyframes gtp-blink { 50% { opacity: .2; } }
/* one scrim, one layer over the stage: dark under the top bar, the right column on near-black, a sunset glow along the very foot */
.tt-scrim {
  background: linear-gradient(180deg, rgba(9, 9, 11, .74) 0, rgba(9, 9, 11, 0) 13%, rgba(9, 9, 11, 0) 58%, rgba(9, 9, 11, .84) 100%),
              linear-gradient(90deg, rgba(9, 9, 11, 0) 46%, rgba(9, 9, 11, .76) 63%, rgba(9, 9, 11, .93) 100%);
}
.tt-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sun); pointer-events: none; }

/* top bar: the kit's logo + name · four live facts · the coin */
.tt-brand img { width: 46px; height: 46px; border-radius: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--line2); }
.tt-logo { font: 400 26px/1 var(--font-brand); letter-spacing: .01em; color: var(--ink); -webkit-text-stroke: 0; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 3px 4px 0 #000; transform: scaleX(.86); transform-origin: left center; }
.tt-logo span { color: var(--ink); }
.tt-facts { gap: 0; border: 1px solid var(--line2); background: rgba(9, 9, 11, .7); }
.tt-fact { width: 128px; height: 50px; border: 0; border-radius: 0; background: none; }
.tt-fact + .tt-fact { border-left: 1px solid var(--line); }
.tt-fact b { font-size: 19px; }
.tt-fact i { font-size: 9.5px; letter-spacing: .18em; }
.tt-fact.pay b { color: var(--gold); }
.ca-pill { border-radius: 0; border-color: var(--line2); background: rgba(9, 9, 11, .74); }
.ca-pill.is-live { border-color: var(--pink); box-shadow: inset 3px 0 0 var(--pink); }
.ca-lab { font: 400 14px/1 var(--font-poster); letter-spacing: .12em; color: var(--ink); }
.ca-copy, .wm-ca > i { border-radius: 0; background: var(--sun); color: var(--acc-ink); font-weight: 800; }
.ca-link { border-radius: 0; }

/* "pick your character" over the heroes */
.tt-pick-k { font-family: var(--font-poster) !important; font-weight: 400 !important; letter-spacing: .1em !important; text-shadow: var(--sh-hard) !important; }

/* the gang plates: character-select cards; the one you picked lights up in its colour, the closed ones stay quiet */
.plate { border-top: 3px solid var(--c); border-radius: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .86), rgba(9, 9, 11, .7));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.plate::before { content: ''; position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: linear-gradient(225deg, var(--c) 0 50%, transparent 50%); opacity: .9; }
.plate .pl-name { font: 400 26px/1 var(--font-poster); letter-spacing: .05em; text-shadow: var(--sh-hard); }
.plate .pl-name.long { font-size: 21px; }
.plate .pl-chip { border-radius: 0; font-weight: 700; }
.plate.hot, .plate.mine, .plate.picked { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, rgba(9, 9, 11, .9)), rgba(9, 9, 11, .8) 70%); }
.plate.picked { border-top-width: 3px; }
.plate .pl-bar { border-radius: 0; height: 4px; }
.plate.mine::after { top: 8px; right: 30px; border-radius: 0; font-family: var(--font-poster); font-weight: 400; letter-spacing: .16em; }
.plate.closed { opacity: .5; }

/* the right column: the wordmark, the sentence, three numbers, PLAY */
.tt-col { grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
.tt-head.gtp-mark { grid-row: 2; width: 100%; font: inherit; }
.tt-pitch { margin-top: 2.6vh; font-size: clamp(15px, 1.95vh, 19px); color: var(--ink2); }
.tt-pitch b { color: var(--teal); }
.tt-keys { border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.tt-key b { color: var(--ink); }
.tt-key:first-child b { color: var(--gold); }
.tt-go .ui-in { height: 58px; border-radius: 0; font-size: 18px; background: rgba(9, 9, 11, .8); }
.tt-go .ui-in:focus { border-color: var(--pink); }
/* PLAY: the sunset, slanted; while the city loads it is the loading bar (same button, same place) */
.tt-play { border-radius: 0; background: var(--sun); color: var(--acc-ink); font: 400 30px/1 var(--font-poster); letter-spacing: .12em; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: none; }
.tt-play:hover { filter: brightness(1.08) saturate(1.1); }
.tt-play svg { width: 20px; height: 20px; }
.title:not(.ready) .tt-play { background: rgba(246, 241, 232, .08); color: var(--ink2); box-shadow: none; }
.title:not(.ready) .tt-play > span { font: 400 20px/1 var(--font-poster); letter-spacing: .3em; }
.tt-play .tt-load i { background: var(--sun); opacity: .55; }
.tt-crews .ui-btn { border-radius: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tt-crews .ui-btn:hover { border-color: var(--pink); color: var(--ink); background: rgba(255, 61, 139, .08); }
.tt-hint b { color: var(--teal); }
.tt-more:hover { color: var(--pink); }

/* joining: the gang you are dealt, in its colour, poster type */
.tt-join-k { font: 400 84px/1 var(--font-poster); height: 86px; letter-spacing: .04em; text-shadow: 4px 5px 0 #000; }
.tt-join .ui-eyebrow { color: var(--ink); letter-spacing: .3em; }
.tt-join-s { color: var(--ink); }

/* the pinned bar and the sections below the stage */
.tt-pin { background: rgba(9, 9, 11, .97); border-top: 0; box-shadow: inset 0 3px 0 0 transparent; }
.tt-pin::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sun); }
.tt-pin-k { font: 400 22px/1 var(--font-brand) !important; transform: scaleX(.86); transform-origin: left center; text-shadow: 2px 2px 0 #000; }
.tt-nav a.on { color: var(--pink) !important; }
.pg { background: var(--bg); }
.pg-eye b { color: var(--pink); }
.pg-h { font-family: var(--font-poster) !important; font-weight: 400 !important; letter-spacing: .02em !important; text-transform: uppercase; }
.pg-fig img, .pg-mapbox, .pg-cell, .pg-card, .pg-ca-row { border-radius: 0 !important; }
.pg-big { color: var(--gold); }

/* ================================================================================================ controls */
.ui-btn, .ui-in, .ui-seg, .ui-seg button, .ui-copy, .ui-key, .sheet-in, .lo-c { border-radius: 0; }
.ui-btn.primary { background: var(--sun); color: var(--acc-ink); border: 0; font-weight: 800; }
.ui-copy { background: var(--sun); color: var(--acc-ink); }
.ui-seg button.on { background: var(--ink); color: var(--bg); }
.ui-tog.on { background: var(--pink); }
.ui-eyebrow { color: var(--ink3); }
:focus-visible { outline-color: var(--pink); }
::selection { background: var(--pink); color: #fff; }

/* the sheets (create / join a crew) */
.sheet { background: rgba(5, 5, 7, .76); }
.sheet-in { border-color: var(--line2); background: var(--s1); position: relative; }
.sheet-in::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sun); }
.sheet-head h2 { font-family: var(--font-poster) !important; font-weight: 400 !important; letter-spacing: .03em; text-transform: uppercase; }

/* ================================================================================================ THE MENU (Esc): a pause screen, the tabs across the top */
.warmenu { background: rgba(5, 5, 7, .8); }
.wm-in { width: 1240px; height: 720px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line2); border-radius: 0; background: #0c0c0f; position: relative; }
.wm-in::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sun); z-index: 1; }
.wm-rail { grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 72px 50px; border-right: 0; border-bottom: 1px solid var(--line2); background: rgba(0, 0, 0, .3); }
.wm-k { display: flex; align-items: center; grid-column: 1; grid-row: 1; height: 72px; padding: 6px 26px 0; font: 400 30px/1 var(--font-brand); letter-spacing: .01em; color: var(--ink); text-transform: uppercase; white-space: nowrap; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 4px 5px 0 #000; }
.wm-k span { color: var(--ink); -webkit-text-stroke: 0; margin-left: .22em; }
.wm-k span::before { content: none !important; }
.wm-k::before { content: ''; flex: none; width: 15px; height: 30px; margin-right: 14px; background: var(--sun-v); clip-path: polygon(50% 0, 62% 40%, 100% 100%, 0 100%, 38% 40%); }
.wm-me { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: auto 220px; grid-template-rows: 16px 40px; column-gap: 16px; row-gap: 4px; align-content: center; padding: 0 26px; border-top: 0; }
.wm-me .wm-team { grid-column: 1; grid-row: 1 / 3; align-self: center; height: auto; font: 400 26px/1 var(--font-poster); letter-spacing: .06em; text-align: right; text-shadow: var(--sh-hard); }
.wm-me .wm-team small { display: block; margin: 6px 0 0; font: 600 10px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.wm-me label { grid-column: 2; grid-row: 1; }
.wm-me .ui-in { grid-column: 2; grid-row: 2; height: 40px; }
.wm-tabs { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: stretch; padding: 0 14px; overflow: hidden; }
.wm-tab { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-left: 0 !important; background: none; position: relative;
  font: 700 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.wm-tab span { overflow: hidden; text-overflow: ellipsis; }
.wm-tab svg { width: 16px; height: 16px; flex: none; }
.wm-tab kbd { display: none; }
.wm-tab::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--sun); transform: scaleX(0); transition: transform var(--fast) var(--ease); }
.wm-tab:hover { color: var(--ink); background: var(--s2); }
.wm-tab.on { color: var(--ink); background: var(--s3); }
.wm-tab.on::after { transform: none; }
.wm-tab.resume { color: var(--teal); flex: 0 0 auto; padding: 0 16px; }
.wm-pane { grid-row: 2; grid-column: 1; }
.wm-head { height: 66px; padding: 0 30px; }
.wm-head h3 { font: 400 26px/1 var(--font-poster); letter-spacing: .04em; text-transform: uppercase; }
.wm-head h3 small { font-family: var(--font-text); text-transform: none; letter-spacing: 0; margin-top: 7px; }
.lo-c.on { border-color: var(--pink); background: rgba(255, 61, 139, .14); }
.lg-cell b, .coin-cell b, .tb-money b { color: var(--ink); }
.lg-r a { color: var(--teal); }
.lg-r i, .tb-p i.pay, .tb-t2 b.pay, .tb-money b.pay { color: var(--teal); }
.wm-elig.ok { border-color: var(--teal); }

/* ================================================================================================ THE HUD */
/* the location line: bottom-left, beside the radar, in caption type (GTA puts the street by the map, so do we) */
.dist { left: 384px; top: auto; bottom: 26px; width: 520px; }
.d-name { height: 34px; font: 400 30px/34px var(--font-poster); letter-spacing: .04em; text-transform: uppercase; text-shadow: var(--sh-hard), 0 0 18px rgba(0, 0, 0, .5); }
.d-own { height: 20px; font: 600 13px/20px var(--font-mono); letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.d-cap { height: 5px; border-radius: 0; }
.d-cap i { background: var(--sun); }
.is-dead .dist { visibility: hidden; }
/* the radar's health and armour, square and thicker */
.bar { height: 8px; border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }
.bar.hp i { background: linear-gradient(#4fdc7a, #2e9e52); } .bar.ar i { background: linear-gradient(#4fb4ff, #2a73c4); }
#mini { box-shadow: 0 0 0 2px rgba(0, 0, 0, .75); }
/* the weapon, top-right */
.wpn-name { font: 400 17px/1 var(--font-poster); letter-spacing: .14em; color: var(--ink); text-shadow: var(--sh-hard); height: 20px; }
.wpn-ammo { font: 400 44px/1.1 var(--font-poster); letter-spacing: .03em; text-shadow: var(--sh-hard); }
.wpn-ammo #wRes { font-size: 26px; }
/* the war's split at the top */
.war-bar { height: 8px; border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 2px rgba(246, 241, 232, .12); }
.war-row { font-weight: 700; }
.war-row span { text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(0, 0, 0, .8), 0 0 6px rgba(0, 0, 0, .9); }
.war-clock { font: 400 26px/28px var(--font-poster); letter-spacing: .08em; height: 28px; text-shadow: var(--sh-hard); }
.war-pay { color: var(--ink); }
.war-pay b { color: var(--gold); }
/* the feed */
.feed div { border-radius: 0; background: rgba(9, 9, 11, .74); font-family: var(--font-text); font-weight: 600; }
.feed div.good { border-left-color: var(--teal); }
.feed div.bad { border-left-color: var(--bad); }
/* the notifications under the war bar */
.nt { background: rgba(9, 9, 11, .86); }
.nt b { font-family: var(--font-display); font-weight: 700; }
.nt.payout b em { color: var(--teal); }
.nt.mine { box-shadow: 0 0 0 1px var(--teal), 0 6px 18px rgba(0, 0, 0, .35); background: rgba(6, 34, 32, .92); }
.nt.hot { background: rgba(52, 6, 16, .9); }
.toast { border-radius: 0 !important; font-family: var(--font-display) !important; }
.prompt { border-radius: 0 !important; }
/* the payday countdown, 10 -> 1: poster numbers in the sunset */
.count i { font: 400 18px/22px var(--font-poster); letter-spacing: .32em; color: var(--gold); text-shadow: var(--sh-hard); }
.count b { font: 400 124px/112px var(--font-poster); color: var(--gold); text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 6px 7px 0 #000; }
/* the kill banner */
.kb-k { font: 400 28px/34px var(--font-poster); letter-spacing: .1em; text-shadow: var(--sh-hard); }
.kb-k em { color: var(--gold); }
/* the clash banner */
.clashb i { color: var(--pink); font-family: var(--font-poster); font-weight: 400; }
.clashb b { font: 400 34px/34px var(--font-poster); text-shadow: var(--sh-hard); }
/* MORT: the death screen. The world goes dark red at the edges, the word lands hard, who and what under it, the ring drains */
.dead { background: radial-gradient(ellipse at 50% 46%, rgba(30, 2, 8, .38) 0, rgba(24, 0, 6, .78) 70%, rgba(10, 0, 3, .9) 100%); }
.dd-k { height: 150px; font: 400 150px/150px var(--font-brand); letter-spacing: .02em; color: var(--bad); transform: scaleX(.86);
  text-shadow: 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 8px 10px 0 #000; }
.dd-by b { font: 400 26px/30px var(--font-poster); letter-spacing: .05em; }
.dd-by em { font-family: var(--font-display); font-weight: 700; }
.dd-by u, .dd-by .dd-chip { border-radius: 0; }
.dd-ring circle.c { stroke: var(--pink); stroke-linecap: butt; }
.dd-ring b { font: 400 58px/1 var(--font-poster); }
.dd-t { font: 400 15px/18px var(--font-poster); letter-spacing: .36em; color: var(--ink); }

/* PAYDAY: the mission-passed card at the right, the sunset word, the amount big and in teal */
.paysheet { width: 380px; border-radius: 0; border: 1px solid var(--line2); border-left: 0; background: var(--s1); padding: 18px 22px 18px 26px; }
.paysheet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sun-v); }
.pay-k { height: 40px; align-items: center; }
.pay-k b { font: 400 40px/40px var(--font-brand); letter-spacing: .01em; transform: scaleX(.86); transform-origin: left center; background: var(--sun); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(3px 3px 0 #000); }
.pay-k em { font: 700 14px/1 var(--font-mono); color: var(--ink2); }
.pay-big { margin-top: 12px; height: 48px; font: 700 42px/48px var(--font-mono); color: var(--teal); }
.pay-sub { height: 54px; font-size: 13.5px; line-height: 18px; }
.pay-sub.bad { color: #ff7a8a; }
.pay-bars { grid-template-columns: 1fr 1fr !important; row-gap: 6px; column-gap: 14px; }
.pay-bars div { height: 30px; min-width: 0; }
.pay-bars b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-bars i { border-radius: 0; }

/* the round's end */
.re-in { border-radius: 0; position: relative; border-color: var(--line2); }
.re-in::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sun); }
.re-k { font: 400 56px/60px var(--font-poster); height: 60px; text-transform: uppercase; }
.re-row { border-radius: 0; }
.recon { border-radius: 0; border-color: var(--pink); font-family: var(--font-poster); font-weight: 400; letter-spacing: .2em; }
.recon i { background: var(--pink); border-radius: 0; }

/* the big map and the board */
.bigmap { border-radius: 0; border-color: var(--line2); }
.bigmap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sun); z-index: 1; }
.board { border-radius: 0 !important; }

/* laptop sizes */
@media (max-width: 1500px) {
  .title { --col: 440px; --colx: 40px; }
  .tt-logo { font-size: 22px; }
  .tt-fact { width: 108px; }
  .tt-play { font-size: 26px; }
  .plate { padding: 10px 10px 0; }
  .plate .pl-name { font-size: 20px; letter-spacing: .03em; }
  .plate .pl-name.long { font-size: 16px; letter-spacing: .01em; }
  .plate .pl-share { font-size: 22px; }
  .tt-key i { letter-spacing: .06em; font-size: 9.5px; }
  .tt-pin-k { font-size: 18px !important; max-width: 280px !important; }
  .wm-in { width: 1120px; height: 660px; }
  .wm-tab { font-size: 13px; letter-spacing: .06em; gap: 6px; }
  .wm-tab svg { display: none; }
  .wm-k { font-size: 26px; }
  .dist { width: 420px; }
  .d-name { font-size: 26px; }
}
@media (max-height: 820px) {
  .title { --col: 400px; }
  .tt-play { font-size: 24px; }
  .dd-k { height: 120px; font-size: 120px; line-height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .tt-cap i { animation: none; } }
/* the ledger's side totals: the header row in the header face */
.lg-tot.h span, .lg-tot.h b { font: 600 9.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.lg-tot, .lg-r, .lg-cell, .lg-rule, .coin-cell, .wm-elig, .inv-link, .crew-m, .crew-row, .mute, .set-g, .tb-t2, .tb-p { border-radius: 0 !important; }

/* ================================================================================================ THE START SCREEN v2 (owner 10-19: "make it look like gta
   landing page / the start UI"): LOADING = the box-art collage + wordmark + thin bar + tips + legal line; MENU = tabs across the top, a list
   on the left, the detail on the right, the fighters behind at 60 % black. One layer over the stage; no blur, no blend. */
html.landing, html.landing body { overflow: hidden !important; height: 100%; }
.pg, .tt-pin { display: none !important; }
.tt-stage::after { display: none; }
/* ---- LOADING */
.gl { position: absolute; inset: 0; z-index: 4; background: #000; }
.gl > * { transition: opacity .2s linear; }
.title.gm-cut .gl { pointer-events: none; }
.title.gm-cut .gl > * { opacity: 0; }
.title.gm-on .gl { display: none; }
.gl-art { position: absolute; inset: 0; background: url(/media/ui/gtp-collage.jpg) center / cover no-repeat, url(/media/ui/gtp-collage-sm.jpg) center / cover no-repeat, #120a12; }
.gl-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 42% 36% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .86) 100%); }
.gl-mark.gtp-mark { position: absolute; left: 50%; top: 47%; width: min(40vw, 70vh, 760px); transform: translate(-50%, -50%); }
.gl-foot { position: absolute; left: 64px; right: 64px; bottom: 34px; display: grid; row-gap: 12px; }
.gl-tip { height: 20px; display: flex; align-items: center; gap: 14px; font: 600 15px/20px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; }
.gl-tip b { flex: none; padding: 0 8px; height: 20px; background: var(--ink); color: #000; font: 400 13px/20px var(--font-poster); letter-spacing: .16em; text-shadow: none; }
.gl-tip span { transition: opacity .22s; overflow: hidden; text-overflow: ellipsis; } .gl-tip span.swap { opacity: 0; }
.gl-bar { height: 3px; background: rgba(246, 241, 232, .16); overflow: hidden; }
.gl-bar i { display: block; height: 100%; background: var(--sun); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.gl-row { display: flex; justify-content: space-between; height: 14px; font: 600 11px/14px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.gl-st { color: var(--ink); }
/* ---- MENU */
.gm-veil { position: absolute; inset: 0; background: rgba(5, 5, 7, .6); opacity: 0; pointer-events: none; }
.gm-menu { position: absolute; inset: 0; padding: 34px 64px 26px; display: grid; grid-template-rows: 70px 58px minmax(0, 1fr) 34px; opacity: 0; visibility: hidden; transition: opacity .2s linear; --tabc: var(--pink); --gc: var(--pink); }
.title.gm-on .gm-veil { opacity: 1; }
.title.gm-on .gm-menu { opacity: 1; visibility: visible; }
html.joining .gm-menu, html.joining .gm-veil, .title.fatal .gm-menu { display: none; }
.title.fatal .tt-fatal { z-index: 6; }
.tt-small { z-index: 7; }
html.keyart .gl, html.keyart .gm-menu, html.keyart .gm-veil { display: none !important; }
.gm-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
.gm-brand { display: flex; align-items: center; gap: 16px; height: 70px; }
.gm-brand img { width: 52px; height: 52px; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--line2); }
.gm-mark.gtp-mark { width: 170px; }
.gm-facts { justify-self: center; display: flex; border: 1px solid var(--line2); background: rgba(9, 9, 11, .8); }
.gm-facts .tt-fact { width: 118px; height: 48px; border: 0; background: none; }
.gm-facts .tt-fact + .tt-fact { border-left: 1px solid var(--line); }
.gm-top .tt-right { width: 520px; }
.gm-tabs { display: flex; align-items: flex-end; gap: 40px; border-bottom: 1px solid var(--line2); }
.gm-tabs button { position: relative; height: 58px; padding: 0 2px 16px; border: 0; background: none; cursor: pointer; font: 700 21px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: flex-end; transition: color var(--fast); }
.gm-tabs button:hover { color: var(--ink2); }
.gm-tabs button.on { color: var(--ink); }
.gm-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--tabc); }
.gm-tabs kbd { align-self: center; margin-top: 6px; font: 600 11px/1 var(--font-mono); padding: 4px 6px; border: 1px solid var(--line2); color: var(--ink3); background: none; }
.gm-tabs .gm-q { margin-right: -16px; } .gm-tabs .gm-e { margin-left: -16px; }
.gm-body { display: grid; grid-template-columns: 440px 780px; column-gap: 20px; margin-top: 26px; min-height: 0; align-items: start; }
.gm-list { display: grid; row-gap: 3px; align-content: start; }
.gr { position: relative; height: 62px; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr; column-gap: 18px; align-items: center; padding-right: 18px; background: rgba(9, 9, 11, .84); border: 1px solid var(--line); cursor: pointer; user-select: none; transition: background var(--fast); }
.gr:hover { background: rgba(24, 24, 28, .9); }
.gr i { grid-row: 1 / 3; align-self: stretch; background: transparent; }
.gr span { grid-column: 2; grid-row: 1; align-self: end; font: 700 19px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr em { grid-column: 2; grid-row: 2; align-self: start; margin-top: 6px; font: 500 12px/1 var(--font-mono); font-style: normal; letter-spacing: .02em; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr u { grid-column: 3; grid-row: 1 / 3; text-decoration: none; font: 400 11px/1 var(--font-poster); letter-spacing: .16em; padding: 5px 7px; background: var(--c, var(--tabc)); color: #000; }
.gr.on { background: rgba(246, 241, 232, .1); border-color: var(--line2); }
.gr.on i { background: var(--c, var(--tabc)); }
.gr.on span { color: var(--ink); }
.gr[style] span { color: var(--c); } .gr.dim { opacity: .55; }
.gm-detail { position: relative; height: auto; max-height: 100%; min-height: 0; overflow: auto; scrollbar-width: thin; background: rgba(9, 9, 11, .9); border: 1px solid var(--line2); padding: 30px 36px 32px; }
.gm-detail::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tabc); }
.gd { display: none; } .gd.on { display: block; }
.gd-k { height: 54px; font: 400 44px/54px var(--font-brand); color: var(--ink); transform: scaleX(.86); transform-origin: left center; white-space: nowrap; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 4px 5px 0 #000; text-transform: uppercase; }
.gd-p { margin: 14px 0 0; max-width: 680px; font: 500 17.5px/1.5 var(--font-text); color: var(--ink2); }
.gd-p b, .gd-how b { color: var(--ink); }
.gd .tt-keys { margin-top: 24px; }
.gd-go { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 12px; height: 66px; }
.gd-go.one { grid-template-columns: 360px; }
.gd-go .ui-in { height: 66px; font-size: 20px; }
.gd-go .tt-play { height: 66px; font-size: 32px; }
.gd-go .gd-btn { height: 60px; font: 400 20px/1 var(--font-poster); letter-spacing: .14em; text-transform: uppercase; }
.gd-go .gd-btn em { font: 600 12px/1 var(--font-mono); font-style: normal; margin-left: 12px; opacity: .7; }
.gd .tt-hint { margin-top: 12px; }
.title:not(.ready) .gd-go .tt-play { background: rgba(246, 241, 232, .08); }
/* a gang's card */
.gg-head { display: flex; align-items: center; gap: 22px; }
.gg-emb { flex: none; width: 112px; height: 112px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 70%, #000), #050507 85%); box-shadow: inset 0 0 0 2px var(--gc), 4px 5px 0 #000; }
.gg-emb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.gg-tag { margin-top: 8px; font: 400 15px/1 var(--font-poster); letter-spacing: .3em; color: var(--gc); }
.gg-cells { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.gg-cells div { padding: 14px 0; display: grid; row-gap: 8px; }
.gg-cells div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.gg-cells i { font: 600 10.5px/1 var(--font-display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.gg-cells b { font: 700 26px/1 var(--font-mono); color: var(--ink); white-space: nowrap; } .gg-cells b small { font-size: .5em; color: var(--ink3); margin-left: 3px; } .gg-cells b.ok { color: var(--gc); font: 400 26px/1 var(--font-poster); letter-spacing: .06em; }
.gg-lore { font-size: 15.5px; height: calc(3 * 1.5em); overflow: hidden; }
.gg-k { margin-top: 18px; font: 700 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); } .gg-k span { color: var(--ink3); }
.gg-outfits { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 150px); gap: 12px; }
.gg-o { position: relative; height: 200px; padding: 0; border: 1px solid var(--line2); background: #15161a; cursor: pointer; overflow: hidden; display: block; }
.gg-o img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: 50% 8%; }
.gg-o span { display: block; height: 30px; font: 700 13px/30px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); background: #0b0b0e; }
.gg-o:hover { border-color: var(--ink3); }
.gg-o.on { border: 2px solid var(--gc); } .gg-o.on span { background: var(--gc); color: #000; }
.gg-o u { position: absolute; left: 8px; top: 8px; text-decoration: none; font: 400 11px/1 var(--font-poster); letter-spacing: .16em; padding: 4px 6px; background: var(--gc); color: #000; }
/* how it works */
.gd-how { margin-top: 10px; max-width: 690px; }
.gd-how p { margin: 12px 0 0; font: 500 17px/1.5 var(--font-text); color: var(--ink2); }
.hw-pts { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.hw-pts div { height: 38px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font: 500 15px/1 var(--font-text); color: var(--ink2); }
.hw-pts b { font: 700 15px/1 var(--font-mono); color: var(--ink); }
.hw-keys { margin-top: 10px; display: grid; row-gap: 6px; }
.hw-keys div { display: grid; grid-template-columns: 110px 1fr; align-items: center; height: 40px; border-bottom: 1px solid var(--line); font: 500 15.5px/1 var(--font-text); color: var(--ink2); }
.hw-keys kbd { justify-self: start; font: 700 12px/1 var(--font-mono); padding: 6px 8px; border: 1px solid var(--line2); color: var(--ink); background: rgba(0, 0, 0, .4); }
.gd-map { display: none; margin-top: 18px; width: 360px; height: 360px; border: 1px solid var(--line2); }
.gd-map.on { display: block; }
.gd-map canvas { display: block; width: 100%; height: 100%; }
/* settings borrowed from the Esc menu */
.gd-sethost { margin-top: 16px; max-width: 700px; }
.gd-sethost .set-g { border: 0; padding: 0; margin: 0; }
.gd-sethost .set-g > .ui-eyebrow { display: none; }
.gd-sethost .wm-body { padding: 0; }
.gd-sethost .binds { max-height: 520px; overflow: auto; }
/* the foot: the console keys */
.gm-foot { display: flex; align-items: flex-end; gap: 26px; font: 600 12px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.gm-foot span { display: flex; align-items: center; gap: 6px; }
.gm-foot kbd { font: 600 11px/1 var(--font-mono); padding: 4px 6px; border: 1px solid var(--line2); color: var(--ink); background: rgba(0, 0, 0, .5); letter-spacing: 0; }
.gm-foot .gm-attr { margin-left: auto; letter-spacing: .08em; text-transform: none; font-family: var(--font-mono); font-weight: 500; }
@media (max-width: 1500px) {
  .gm-menu { padding: 26px 40px 20px; grid-template-rows: 62px 52px minmax(0, 1fr) 30px; }
  .gm-mark.gtp-mark { width: 140px; }
  .gm-facts .tt-fact { width: 100px; }
  .gm-top .tt-right { width: 400px; }
  .gm-tabs { gap: 30px; } .gm-tabs button { font-size: 18px; height: 52px; padding-bottom: 14px; }
  .gm-body { grid-template-columns: 360px minmax(0, 700px); margin-top: 20px; }
  .gr { height: 56px; } .gr span { font-size: 17px; }
  .gm-detail { padding: 24px 28px 26px; }
  .gd-k { font-size: 36px; height: 46px; line-height: 46px; }
  .gd-p { font-size: 16px; }
  .gd-go { grid-template-columns: minmax(0, 1fr) 230px; height: 58px; } .gd-go .ui-in, .gd-go .tt-play { height: 58px; } .gd-go .tt-play { font-size: 28px; }
  .gg-outfits { grid-template-columns: repeat(3, 130px); } .gg-o { height: 176px; } .gg-o img { height: 146px; }
  .gd-map { width: 300px; height: 300px; }
}
@media (max-height: 820px) {
  .gm-menu { padding-top: 18px; grid-template-rows: 56px 48px minmax(0, 1fr) 26px; }
  .gd .tt-keys { margin-top: 14px; } .gd-go { margin-top: 16px; }
  .gg-emb { width: 84px; height: 84px; } .gg-lore { display: none; } .gg-cells { margin-top: 14px; }
  .gl-mark.gtp-mark { top: 44%; }
}
.gr.one span { grid-row: 1 / 3; align-self: center; }
.wm-tab svg { display: none !important; }