@font-face { font-family: 'Michroma'; src: url('/fonts/Michroma.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'GeistMono'; src: url('/fonts/GeistMono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root { --red: #ff2a36; --red2: #ff5560; --blue: #3d8bff; --teamr: #ff3348; --ink: #f4f5f7; --dim: rgba(244,245,247,.58); --dim2: rgba(244,245,247,.38); --line: rgba(255,255,255,.12); --glass: rgba(9,10,14,.74); --glass2: rgba(16,17,22,.86); --gold: #f2c14e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font-family: Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
b { font-weight: 600; }

/* ---------------------------------------------------------------- top bar */
.bar { position: fixed; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; padding: 0 18px; gap: 16px; background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.0)); z-index: 30; transition: transform .3s, opacity .3s; }
.bar.slim { transform: translateY(-64px); opacity: 0; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand .word { font: 400 14px/1 Michroma, sans-serif; letter-spacing: .26em; white-space: nowrap; }
.brand-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.5); }
.ld-logo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin-bottom: 22px; box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 10px 40px rgba(255,42,54,.25); }
.brand .tick { font: 600 11px/1 GeistMono, monospace; letter-spacing: .12em; color: #000; background: var(--red); padding: 5px 7px 4px; border-radius: 3px; }
.nav, .nav2 { display: flex; gap: 6px; align-items: center; }
/* the token strip in the header: pot, paid, burned, the CA, how it works, X */
.hstats { flex: none; display: flex; align-items: center; height: 40px; padding: 0 5px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,13,17,.6); backdrop-filter: blur(8px); white-space: nowrap; }
.hstats.off { visibility: hidden; }
.hs { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 11px; border-right: 1px solid var(--line); font: 600 10px/1 GeistMono, monospace; }
.hs i { font-style: normal; letter-spacing: .16em; color: var(--dim2); }
.hs b { font: 600 13px/1 GeistMono, monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.hs u { text-decoration: none; color: var(--dim); }
.hs-burn b { color: #ffb38a; }
.hs .pb-fire { align-self: center; margin-right: -1px; }
.hca { display: inline-flex; align-items: center; gap: 7px; height: 28px; margin: 0 4px 0 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.04); font: 600 11px/1 GeistMono, monospace; color: var(--ink); }
.hca i { font-style: normal; font-size: 10px; letter-spacing: .16em; color: var(--dim2); }
.hca:hover { border-color: rgba(255,255,255,.4); }
#pb-ca-t { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.hdoc { color: var(--dim); font: 500 11.5px/1 Geist, sans-serif; text-decoration: none; padding: 0 8px; }
.hdoc:hover { color: var(--ink); }
.hx { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); }
.hx:hover { border-color: rgba(255,255,255,.4); }
.nav { flex: 1; justify-content: center; }
.nb { position: relative; height: 40px; padding: 0 16px; border: 1px solid var(--line); background: rgba(12,13,17,.6); border-radius: 8px; font: 600 11px/1 GeistMono, monospace; letter-spacing: .18em; color: var(--ink); backdrop-filter: blur(8px); transition: background .15s, border-color .15s; white-space: nowrap; }
.nb:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.nb.on { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); }
.nb.cta { height: 48px; width: 252px; padding: 0 18px; background: linear-gradient(180deg, #ff3a45, #c8101e); border-color: rgba(255,120,128,.7); display: flex; flex-direction: column; justify-content: center; gap: 4px; box-shadow: 0 6px 30px rgba(255,42,54,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.nb.cta span { font: 400 14px/1 Michroma, sans-serif; letter-spacing: .22em; }
.nb.cta i { font: 500 10px/1 GeistMono, monospace; letter-spacing: .1em; font-style: normal; opacity: .82; }
.nb.cta:hover { background: linear-gradient(180deg, #ff4e58, #d81424); }
.nb.cta.in { background: linear-gradient(180deg, #2a2d35, #16181e); border-color: var(--line); box-shadow: none; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 10px/18px GeistMono, monospace; letter-spacing: 0; visibility: hidden; }
.badge.on { visibility: visible; }
.me { display: flex; align-items: center; gap: 9px; height: 40px; width: 210px; padding: 0 12px 0 10px; border: 1px solid var(--line); background: rgba(12,13,17,.6); border-radius: 8px; backdrop-filter: blur(8px); }
.me:hover { background: rgba(255,255,255,.1); }
.me span { flex: 1; text-align: left; font: 600 13px/1 Geist, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me b { font: 600 11px/1 GeistMono, monospace; color: var(--dim); }
.rk { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #888; box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 12px currentColor; display: inline-block; }

.pb-fire { width: 10px; height: 13px; display: inline-block; flex: none; background: linear-gradient(180deg, #ffd27a, #ff5a2a 60%, #ff2a36); clip-path: path('M5 0C6 3 10 5 10 9a5 4 0 0 1-10 0C0 6 2 5 3 3c0 2 1 3 2 3C5 4 4 2 5 0z'); filter: drop-shadow(0 0 4px rgba(255,90,40,.8)); }
.pb-prac { color: #ffd46b; letter-spacing: .14em; font-size: 10px; border: 1px solid rgba(255,212,107,.4); border-radius: 9px; padding: 3px 7px 2px; visibility: hidden; }
.pb-prac.on { visibility: visible; }

/* ---------------------------------------------------------------- HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.score { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; height: 50px; visibility: hidden; filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
.score.on { visibility: visible; }
.sc-t { width: 176px; display: flex; align-items: center; font: 600 11px/1 GeistMono, monospace; letter-spacing: .26em; color: rgba(255,255,255,.9); }
.sc-t span { padding: 0 16px; }
.sc-t b { align-self: stretch; width: 60px; display: flex; align-items: center; justify-content: center; font: 700 32px/1 Geist, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #fff; background: rgba(0,0,0,.22); text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.sc-b { background: linear-gradient(90deg, rgba(14,40,96,.9), #2d78ea); justify-content: flex-end; clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%); }
.sc-b span { order: 1; } .sc-b b { order: 2; }
.sc-r { background: linear-gradient(90deg, #e3283b, rgba(110,14,24,.9)); justify-content: flex-start; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%); }
.sc-r b { order: 1; } .sc-r span { order: 2; }
.sc-c { width: 118px; background: linear-gradient(#101116, #050608); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sc-c b { font: 600 25px/1 GeistMono, monospace; letter-spacing: .02em; }
.sc-c i { font: 600 9px/1 GeistMono, monospace; letter-spacing: .22em; color: #ffd46b; font-style: normal; height: 9px; }
.prize { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(6,7,10,.75); border: 1px solid var(--line); border-radius: 13px; font: 600 10px/1 GeistMono, monospace; letter-spacing: .1em; visibility: hidden; white-space: nowrap; }
.prize.on { visibility: visible; }
.prize span { color: var(--dim); letter-spacing: .18em; }
.prize b { color: #7dffa8; min-width: 8ch; }
.prize i { font-style: normal; color: var(--dim2); letter-spacing: .04em; }
.feed { position: absolute; top: 110px; right: 18px; width: 320px; height: 240px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; overflow: hidden; }
.feed div { font: 600 12px/1 Geist, sans-serif; padding: 7px 10px; background: rgba(6,7,10,.72); border-radius: 6px; border-left: 3px solid #fff; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; animation: fin .25s ease-out; }
.feed .b0 { border-left-color: var(--blue); } .feed .b1 { border-left-color: var(--teamr); }
.feed em { font-style: normal; color: var(--dim); font-weight: 500; }
@keyframes fin { from { opacity: 0; transform: translateX(20px); } }
.big { position: absolute; left: 0; right: 0; top: 26%; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.big span { font: 400 64px/1 Michroma, sans-serif; letter-spacing: .14em; color: #fff; opacity: 0; text-shadow: 0 0 40px rgba(255,255,255,.35); white-space: nowrap; }
.big i { font: 600 14px/1 GeistMono, monospace; letter-spacing: .16em; font-style: normal; color: var(--ink); opacity: 0; white-space: nowrap; }
.big.go span, .big.go i { animation: bigpop 2.2s cubic-bezier(.2,.8,.2,1) forwards; }
.big.count span { font: 700 132px/1 Geist, sans-serif; letter-spacing: 0; text-shadow: 0 0 50px rgba(255,255,255,.35), 0 6px 30px rgba(0,0,0,.5); animation: count .9s ease-out forwards; }
.big.t0 span { color: #9cc4ff; text-shadow: 0 0 40px rgba(61,139,255,.8); } .big.t1 span { color: #ff9aa4; text-shadow: 0 0 40px rgba(255,51,72,.8); }
@keyframes bigpop { 0% { opacity: 0; transform: scale(1.4); letter-spacing: .4em; } 10% { opacity: 1; transform: scale(1); letter-spacing: .14em; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes count { 0% { opacity: 0; transform: scale(1.8); } 20% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.pop { position: absolute; left: 0; right: 0; top: 64%; height: 40px; display: flex; justify-content: center; }
.pop span { font: 400 20px/1 Michroma, sans-serif; letter-spacing: .16em; color: #fff; opacity: 0; white-space: nowrap; }
.pop span.go { animation: bigpop 1.4s ease-out forwards; }
.pop span b { color: #7dffa8; margin-right: 10px; font-weight: 400; }
.ringrun { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; visibility: hidden; }
.ringrun.on { visibility: visible; }
.ringrun b { font: 600 34px/1 GeistMono, monospace; width: 7ch; text-align: center; text-shadow: 0 0 20px rgba(80,180,255,.6); }
.ringrun i { font: 600 10px/1 GeistMono, monospace; letter-spacing: .2em; color: #9fd8ff; font-style: normal; }
.gauge { position: absolute; right: 30px; bottom: 26px; width: 176px; height: 196px; }
.gring { position: absolute; left: 8px; top: 0; width: 160px; height: 160px; transform: rotate(135deg); }
.gring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.g-bg { stroke: rgba(255,255,255,.1); stroke-dasharray: 235.6 314.2; }
.g-fg { stroke: var(--red); stroke-dasharray: 235.6 314.2; filter: drop-shadow(0 0 6px rgba(255,42,54,.8)); }
.g-fg.low { stroke: #ffd2d4; }
.g-num { position: absolute; left: 8px; top: 0; width: 160px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-num b { font: 700 42px/1 Geist, sans-serif; font-variant-numeric: tabular-nums; width: 3ch; text-align: center; letter-spacing: -.01em; }
.g-num i, .g-speed i { font: 600 10px/1 GeistMono, monospace; letter-spacing: .3em; color: var(--dim); font-style: normal; margin-top: 8px; }
.g-speed { position: absolute; left: 0; right: 0; top: 152px; text-align: center; }
.g-speed b { font: 600 20px/1 GeistMono, monospace; display: inline-block; width: 4ch; text-align: right; }
.g-speed i { margin-left: 6px; }
.watchbar { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 18px; background: var(--glass); border: 1px solid var(--line); border-radius: 23px; pointer-events: auto; visibility: hidden; white-space: nowrap; }
.watchbar.on { visibility: visible; }
.wb-k { font: 600 10px/1 GeistMono, monospace; letter-spacing: .24em; color: var(--red2); }
.watchbar b { font: 600 14px/1 Geist, sans-serif; width: 140px; overflow: hidden; text-overflow: ellipsis; }
.wb-h { font: 500 12px/1 Geist, sans-serif; color: var(--dim); }
.qchint { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 6px; font: 500 11px/1 Geist, sans-serif; color: var(--dim2); white-space: nowrap; }
.qchint kbd { opacity: .85; } .qchint em { font-style: normal; margin-right: 10px; }
.qcbubble { position: fixed; transform: translate(-50%, -100%); font: 600 13px/1 Geist, sans-serif; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.95); color: #000; white-space: nowrap; pointer-events: none; z-index: 11; animation: fin .2s; }
.tut { position: absolute; left: 18px; top: 80px; width: 330px; padding: 14px 14px 10px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); pointer-events: auto; visibility: hidden; }
.tut.on { visibility: visible; }
.tut h4 { margin: 0 0 4px; font: 400 12px/1 Michroma, sans-serif; letter-spacing: .2em; display: flex; justify-content: space-between; align-items: center; }
.tut h4 button { border: 0; background: none; color: var(--dim); font: 500 11px/1 Geist, sans-serif; padding: 4px; }
.tut .t-bar { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; margin: 10px 0 10px; overflow: hidden; }
.tut .t-bar i { display: block; height: 100%; background: var(--red); transition: width .4s; }
.tut ol { list-style: none; margin: 0; padding: 0; }
.tut li { display: flex; gap: 10px; align-items: flex-start; height: 34px; font: 500 12.5px/1.25 Geist, sans-serif; color: var(--dim2); }
.tut li .ck { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); margin-top: 1px; }
.tut li.done { color: var(--dim); } .tut li.done .ck { background: #7dffa8; border-color: #7dffa8; box-shadow: 0 0 10px rgba(125,255,168,.6); }
.tut li.now { color: var(--ink); } .tut li.now .ck { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,42,54,.25); }
.tut li kbd { margin: 0 1px; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; font: 600 10px/1 GeistMono, monospace; color: #fff; background: linear-gradient(#2a2c33, #17181d); border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px; border-radius: 4px; vertical-align: 1px; }

/* ---------------------------------------------------------------- panels */
.veil { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; visibility: hidden; opacity: 0; transition: opacity .2s; }
.veil.on { visibility: visible; opacity: 1; }
.panel { position: fixed; z-index: 41; background: var(--glass2); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.6); visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; overflow: hidden; display: flex; flex-direction: column; }
.panel.on { visibility: visible; opacity: 1; transform: none; }
.panel.center { left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 8px)); }
.panel.center.on { transform: translate(-50%, -50%); }
.ph { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.ph h2 { margin: 0; flex: 1; font: 400 16px/1 Michroma, sans-serif; letter-spacing: .24em; }
.ph .x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--dim); font: 400 18px/1 Geist; }
.ph .x:hover { color: var(--ink); border-color: rgba(255,255,255,.4); }
.pb { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.pb::-webkit-scrollbar { width: 8px; } .pb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.tabs { display: flex; gap: 4px; padding: 10px 20px 0; flex: none; }
.tab { height: 32px; padding: 0 14px; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0; background: none; font: 600 10.5px/1 GeistMono, monospace; letter-spacing: .14em; color: var(--dim); }
.tab.on { background: rgba(255,255,255,.08); color: var(--ink); border-color: var(--line); }
.sbtn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); font: 600 11px/1 GeistMono, monospace; letter-spacing: .12em; color: var(--ink); white-space: nowrap; }
.sbtn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.sbtn.red { background: linear-gradient(180deg, #ff3a45, #c8101e); border-color: rgba(255,120,128,.7); }
.sbtn.red:hover { background: linear-gradient(180deg, #ff4e58, #d81424); }
.sbtn.gold { background: linear-gradient(180deg, #ffd46b, #d79a1c); color: #1a1205; border-color: rgba(255,220,140,.8); }
.sbtn:disabled { opacity: .45; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font: 600 10px/1 GeistMono, monospace; letter-spacing: .18em; color: var(--dim); }
.field input, .inp { height: 38px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--ink); padding: 0 12px; outline: none; font: 500 14px/1 Geist, sans-serif; user-select: text; }
.field input:focus, .inp:focus { border-color: rgba(255,255,255,.4); }
.row { display: flex; gap: 8px; align-items: center; }
.err { font: 500 12px/1.3 Geist, sans-serif; color: #ff8a92; min-height: 16px; }
.mono { font-family: GeistMono, monospace; }
.dim { color: var(--dim); }

/* scoreboard (Tab) and results */
.board { left: 50%; top: 50%; width: 860px; max-height: calc(100vh - 48px); transform: translate(-50%, calc(-50% + 8px)); }
.board.on { transform: translate(-50%, -50%); }
.result { left: 50%; top: 50%; width: 920px; max-height: min(860px, calc(100vh - 48px)); transform: translate(-50%, calc(-50% + 8px)); }
.result.on { transform: translate(-50%, -50%); }
table.sb { width: 100%; border-collapse: collapse; font: 500 13px/1 Geist, sans-serif; }
table.sb th { font: 600 9.5px/1 GeistMono, monospace; letter-spacing: .16em; color: var(--dim2); text-align: right; padding: 8px 8px; }
table.sb th:first-child { text-align: left; }
table.sb td { padding: 0 8px; height: 34px; text-align: right; font-family: GeistMono, monospace; border-top: 1px solid rgba(255,255,255,.05); }
table.sb td:first-child { text-align: left; font-family: Geist, sans-serif; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sb tr.you td { background: rgba(255,255,255,.08); }
table.sb .rk { width: 10px; height: 10px; margin-right: 8px; vertical-align: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
table.sb .tb0 td:first-child { border-left: 3px solid var(--blue); } table.sb .tb1 td:first-child { border-left: 3px solid var(--teamr); }
table.sb .bot { color: var(--dim2); font: 500 9px/1 GeistMono, monospace; letter-spacing: .1em; margin-left: 6px; }
table.sb .sol { color: #7dffa8; }
table.sb .mvp { color: #1a1205; background: var(--gold); font: 700 9px/1 GeistMono, monospace; margin-left: 8px; letter-spacing: .12em; padding: 3px 5px 2px; border-radius: 3px; vertical-align: 1px; }
.teamhead { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; font: 400 13px/1 Michroma, sans-serif; letter-spacing: .2em; }
.teamhead b { font: 700 24px/1 Geist, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.teamhead.t0 { color: #9cc4ff; } .teamhead.t1 { color: #ff9aa4; }
.res-top { display: flex; align-items: center; gap: 24px; padding: 6px 0 14px; }
.res-win { font: 400 40px/1 Michroma, sans-serif; letter-spacing: .14em; }
.res-win.w { color: #7dffa8; } .res-win.l { color: #ff8a92; }
.res-sc { font: 600 28px/1 GeistMono, monospace; color: var(--dim); }
.res-me { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.res-me b { font: 600 24px/1 GeistMono, monospace; }
.res-me i { font: 500 12px/1 Geist, sans-serif; color: var(--dim); font-style: normal; }
.res-acts { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); flex: none; }

/* the garage you start in: the lobby card, bottom left */
.lobby { position: fixed; left: 18px; bottom: 18px; width: 440px; padding: 18px 18px 14px; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,.55); z-index: 28; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.lobby.on { visibility: visible; opacity: 1; transform: none; }
.lb-k { font: 600 10px/1 GeistMono, monospace; letter-spacing: .26em; color: var(--red2); }
.lb-who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.lb-name { flex: 1; min-width: 0; height: 40px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 400 21px/1 Michroma, sans-serif; letter-spacing: .06em; outline: none; user-select: text; }
.lb-name:hover:not(:disabled), .lb-name:focus { border-bottom-color: rgba(255,255,255,.5); }
.lb-name:disabled { border-bottom-color: transparent; opacity: 1; }
.lb-acc { flex: none; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); font: 600 9px/1 GeistMono, monospace; letter-spacing: .16em; color: var(--dim); }
.lb-acc:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.lb-rank { display: flex; align-items: baseline; gap: 10px; margin: 9px 0 16px 28px; font: 600 11px/1 GeistMono, monospace; letter-spacing: .14em; }
.lb-rank b { color: var(--ink); } .lb-rank span { color: var(--dim2); }
.lb-go { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lb-b { min-width: 0; height: 64px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; text-align: left; transition: background .15s, border-color .15s; }
.lb-b:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); }
.lb-b span { font: 400 15px/1 Michroma, sans-serif; letter-spacing: .2em; color: var(--ink); }
.lb-b i { font: 500 10px/1 GeistMono, monospace; letter-spacing: .06em; font-style: normal; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lb-b.cta { background: linear-gradient(180deg, #ff3a45, #c8101e); border-color: rgba(255,120,128,.7); box-shadow: 0 8px 34px rgba(255,42,54,.32), inset 0 1px 0 rgba(255,255,255,.3); }
.lb-b.cta:hover { background: linear-gradient(180deg, #ff4e58, #d81424); }
.lb-b.cta i { color: rgba(255,255,255,.82); }
body.in-lobby #n-play, body.in-lobby #n-find { display: none; }      /* (the card has them) */
body.in-lobby #view { cursor: grab; } body.in-lobby #view:active { cursor: grabbing; }
.lb-h { margin-top: 12px; font: 500 10px/1 GeistMono, monospace; letter-spacing: .14em; color: var(--dim2); text-align: center; }

/* garage */
.garage { right: 18px; top: 78px; bottom: 18px; width: 560px; }
.g-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0; flex: none; }
.g-cat { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line); background: none; font: 600 10px/1 GeistMono, monospace; letter-spacing: .12em; color: var(--dim); }
.g-cat.on { background: #fff; color: #000; border-color: #fff; }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-it { position: relative; height: 112px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; text-align: left; overflow: hidden; }
.g-it:hover { border-color: rgba(255,255,255,.35); }
.g-it.eq { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.g-it .sw { position: absolute; left: 10px; top: 10px; right: 10px; height: 46px; border-radius: 6px; }
.g-it .nm { font: 600 12.5px/1.2 Geist, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-it .rr { font: 600 9px/1 GeistMono, monospace; letter-spacing: .14em; margin-top: 5px; }
.g-it .pr { position: absolute; right: 8px; bottom: 9px; font: 600 10px/1 GeistMono, monospace; color: var(--ink); }
.g-it.lock { opacity: .78; }
.g-it.lock .sw::after { content: '🔒'; position: absolute; right: 6px; top: 6px; font-size: 12px; }
.g-it .eqb { position: absolute; right: 8px; top: 8px; font: 700 9px/1 GeistMono, monospace; background: #fff; color: #000; padding: 4px 6px 3px; border-radius: 4px; letter-spacing: .1em; }
.g-foot { flex: none; padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; min-height: 64px; }
.g-foot .gf-t { flex: 1; font: 500 12.5px/1.35 Geist, sans-serif; color: var(--dim); }
.g-foot .gf-t b { color: var(--ink); }

/* profile */
.me-p { left: 50%; top: 50%; width: 820px; max-height: min(860px, calc(100vh - 48px)); transform: translate(-50%, calc(-50% + 8px)); }
.me-p.on { transform: translate(-50%, -50%); }
.pf-head { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.pf-rank { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 11px/1 Michroma, sans-serif; letter-spacing: .1em; color: #000; box-shadow: 0 0 30px currentColor; flex: none; }
.pf-name { font: 400 26px/1 Michroma, sans-serif; letter-spacing: .08em; }
.pf-sub { font: 500 13px/1.4 Geist, sans-serif; color: var(--dim); margin-top: 8px; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0 16px; }
.stat { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.stat b { display: block; font: 600 20px/1 GeistMono, monospace; }
.stat i { display: block; font: 600 9px/1 GeistMono, monospace; letter-spacing: .16em; color: var(--dim2); font-style: normal; margin-top: 8px; }
.sec { font: 600 10px/1 GeistMono, monospace; letter-spacing: .2em; color: var(--dim); margin: 18px 0 10px; }
.hist { width: 100%; border-collapse: collapse; font: 500 12.5px/1 GeistMono, monospace; }
.hist td { padding: 0 6px; height: 30px; border-top: 1px solid rgba(255,255,255,.05); }
.hist .w { color: #7dffa8; } .hist .l { color: #ff8a92; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }

/* friends, ranks, watch, private, menu */
.friends { right: 18px; top: 104px; width: 420px; bottom: 18px; }
.fr { display: flex; align-items: center; gap: 10px; height: 52px; border-top: 1px solid rgba(255,255,255,.05); }
.fr .fn { flex: 1; min-width: 0; }
.fr .fn b { display: block; font: 600 14px/1.2 Geist, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr .fn i { display: block; font: 500 11.5px/1.2 Geist, sans-serif; color: var(--dim2); font-style: normal; margin-top: 3px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #444; flex: none; }
.dot.on { background: #7dffa8; box-shadow: 0 0 8px #7dffa8; }
.ranks { left: 50%; top: 50%; width: 760px; height: 760px; max-height: calc(100vh - 140px); transform: translate(-50%, calc(-50% + 8px)); }
.ranks.on { transform: translate(-50%, -50%); }
.watch { left: 50%; top: 50%; width: 760px; max-height: min(700px, calc(100vh - 48px)); transform: translate(-50%, calc(-50% + 8px)); }
.watch.on { transform: translate(-50%, -50%); }
.wm { display: grid; grid-template-columns: 1fr 120px 90px 110px 100px; align-items: center; gap: 8px; height: 58px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: rgba(255,255,255,.03); }
.wm:hover { border-color: rgba(255,255,255,.3); }
.wm .ws { font: 600 18px/1 GeistMono, monospace; } .wm .ws .s0 { color: #9cc4ff; } .wm .ws .s1 { color: #ff9aa4; }
.wm .wn { font: 500 12px/1.3 Geist, sans-serif; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.private { left: 50%; top: 50%; width: 560px; max-height: calc(100vh - 48px); transform: translate(-50%, calc(-50% + 8px)); }
.private.on { transform: translate(-50%, -50%); }
.seg { display: flex; gap: 4px; }
.seg button { flex: 1; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: none; font: 600 12px/1 GeistMono, monospace; color: var(--dim); }
.seg button.on { background: #fff; color: #000; border-color: #fff; }
.code { font: 400 44px/1 Michroma, sans-serif; letter-spacing: .3em; text-align: center; padding: 12px 0; }
.menu { left: 50%; top: 50%; width: 520px; max-height: calc(100vh - 48px); transform: translate(-50%, calc(-50% + 8px)); }
.menu.on { transform: translate(-50%, -50%); }
.pay { left: 50%; top: 50%; width: 500px; transform: translate(-50%, calc(-50% + 8px)); }
.pay.on { transform: translate(-50%, -50%); }
.prize i b.noaddr { color: #ff8a92; font-weight: 600; }
.mrow { display: flex; align-items: center; justify-content: space-between; height: 44px; border-top: 1px solid rgba(255,255,255,.05); font: 500 13px/1 Geist, sans-serif; }
.mrow .keyb { min-width: 90px; }
.mrow .keyb.wait { border-color: var(--red); color: var(--red2); }

/* toasts, invites, overlays */
.toasts { position: fixed; top: 104px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 60; pointer-events: none; }
.toasts div { font: 600 13px/1 Geist, sans-serif; padding: 10px 14px; background: rgba(255,255,255,.96); color: #000; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: fin .2s; white-space: nowrap; }
.toasts div.err { background: #ff4b55; color: #fff; }
.invite { position: fixed; right: 18px; bottom: 236px; width: 330px; z-index: 61; display: flex; flex-direction: column; gap: 8px; }
.invite .iv { background: var(--glass2); border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: fin .25s; }
.invite .iv b { font: 600 14px/1.3 Geist, sans-serif; }
.down { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 18px 26px; background: var(--glass2); border: 1px solid var(--line); border-radius: 12px; z-index: 70; display: flex; flex-direction: column; gap: 6px; align-items: center; visibility: hidden; }
.down.on { visibility: visible; }
.down b { font: 400 16px/1 Michroma, sans-serif; letter-spacing: .2em; }
.down span { font: 500 12px/1 Geist, sans-serif; color: var(--dim); }
.nogl { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 22px 26px; background: #111; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; line-height: 1.6; text-align: center; z-index: 90; }
.nogl.on { display: block; }
.load { position: fixed; inset: 0; z-index: 80; background: radial-gradient(ellipse at 50% 60%, #1a0508, #000 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; transition: opacity .6s; }
.load.off { opacity: 0; pointer-events: none; }
.ld-w { font: 400 46px/1 Michroma, sans-serif; letter-spacing: .32em; margin-right: -.32em; }
.ld-b { width: 320px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.ld-b i { display: block; width: 0; height: 100%; background: var(--red); transition: width .3s; }
.ld-t { font: 600 11px/1 GeistMono, monospace; letter-spacing: .3em; color: var(--dim); }

/* touch */
.t-stick { position: fixed; left: 28px; bottom: 28px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); z-index: 20; display: flex; align-items: center; justify-content: center; touch-action: none; }
.t-stick i { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.3); }
.t-btns { position: fixed; right: 210px; bottom: 26px; display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; z-index: 20; touch-action: none; }
.t-btns button { height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); font: 600 10px/1 GeistMono, monospace; color: #fff; }
.t-btns button.on { background: rgba(255,42,54,.6); }

@media (max-width: 2300px) { .nb { padding: 0 12px; } .nb.cta { width: 214px; } .me { width: 176px; } }
@media (max-width: 1800px) { .hdoc { display: none; } }
@media (max-width: 1560px) { .hs-paid { display: none; } }
@media (max-width: 1380px) { .hstats .hs { display: none; } }
@media (max-width: 1280px) { .brand { width: 210px; } .brand .word { font-size: 12px; letter-spacing: .2em; } .nb { padding: 0 11px; } .nb.cta { width: 200px; } .me { width: 160px; } }
@media (max-width: 1050px) { #n-private, #n-ranks { display: none; } .feed { display: none; } }
@media (max-width: 600px) { .brand { width: auto; } .brand .word { font-size: 10px; letter-spacing: .16em; } .me { width: auto; } .me span, .me b { display: none; } body.in-lobby .nav { visibility: hidden; } .lb-b span { font-size: 13px; letter-spacing: .14em; } .hstats { display: none; } }
@media (max-width: 900px) { .garage { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; height: 46vh; } .lobby { left: 10px; right: 10px; bottom: auto; top: 104px; width: auto; padding: 12px; } .lobby .lb-who, .lobby .lb-rank, .lobby .lb-h { display: none; } .lb-k { margin-bottom: 10px; } .nav2 .nb { display: none; }  .tut { display: none; } .gauge { transform: scale(.7); transform-origin: right bottom; } .qchint { display: none; } }