/* Tab Rush. A drawn desktop with its own fixed light palette, like /tab-overload.
   Window motion, the boot, the countdown pop, toasts and notifications follow the
   ad-os patterns. Only transform and opacity animate on the hot path. */

:root {
  --ink: #1d1d1f; --text: #3c4043; --muted: #6b7076; --faint: #9aa0a6; --line: #e3e5e8;
  --blue: #0075de; --blue-d: #005fb5; --tint: #e6f3fe; --tint-ink: #005bab;
  --gold: #f2b01e; --red: #e5484d; --green: #2f9e5b;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.5, 0.64, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.rush-page { overflow: hidden; background: #284a78; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible, .page:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: background 0.15s, transform 0.12s var(--ease), box-shadow 0.15s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-d); }
.btn-tint { background: var(--tint); color: var(--tint-ink); }
.btn-tint:hover { background: #d6eafc; }
.btn-ghost { box-shadow: inset 0 0 0 1px #d4d7db; color: var(--text); }
.btn-ghost:hover { background: #f5f6f7; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-go { width: 100%; height: 56px; font-size: 19px; font-weight: 700; color: #fff; border-radius: 14px; background: linear-gradient(180deg, #1a86ec, #0068c9); box-shadow: 0 10px 24px -10px rgba(0, 104, 201, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-go:hover { filter: brightness(1.06); }

/* ---------- boot ---------- */
.boot { position: fixed; inset: 0; z-index: 50; background: #0d1117; color: #c9d1d9; display: none; padding: 9vh 8vw; font-family: var(--mono); font-size: clamp(13px, 1.5vw, 16px); cursor: pointer; }
.boot.on { display: block; }
.boot.out { opacity: 0; transition: opacity 0.35s ease; }
.boot pre { white-space: pre-wrap; line-height: 1.7; }
.boot pre .ok { color: #3fb950; } .boot pre .warn { color: #d29922; }
.boot p { position: absolute; bottom: 5vh; left: 8vw; color: #6e7681; font-size: 12px; animation: blink 1.3s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ---------- desktop ---------- */
.desk {
  position: relative; height: 100dvh; min-height: 520px; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(60% 70% at 12% 6%, rgba(120, 178, 230, 0.95), transparent 64%),
    radial-gradient(55% 65% at 94% 98%, rgba(236, 160, 108, 0.95), transparent 64%),
    linear-gradient(158deg, #284a78, #3e6fa3 55%, #566f9a);
}

/* menu bar */
.mbar { position: absolute; left: 0; right: 0; top: 0; height: 32px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13.5px; background: rgba(240, 240, 244, 0.68); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.mbar-logo { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: var(--ink); color: #fff; margin-right: 4px; }
.mbar-app { font-weight: 700; margin-right: 6px; }
.mi { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13.5px; }
.mi:hover { background: rgba(0, 0, 0, 0.09); }
.mi-icon { width: 30px; padding: 0; display: grid; place-items: center; }
.mi .snd-off { display: none; } .mi[aria-pressed="false"] .snd-on { display: none; } .mi[aria-pressed="false"] .snd-off { display: block; }
.mbar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hud-chip { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.07); }
.hud-chip b { font-weight: 600; }
.hud-time { min-width: 52px; justify-content: center; font-weight: 700; }
.is-hot .hud-time { background: var(--red); color: #fff; animation: pulse 0.5s ease infinite alternate; }
.hud-mem.warn { background: #fde7c4; color: #8a5300; }
.hud-mem.full { background: var(--red); color: #fff; }
.clock { font-size: 13px; padding-left: 4px; }

/* browser window */
.bw { position: absolute; top: 48px; bottom: 26px; left: 26px; right: 398px; display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(0, 0, 0, 0.35); }
.is-lag .bw { animation: jitter 0.18s steps(2, end) infinite; }
.bw-top { position: relative; flex: none; height: 42px; background: #dee1e6; border-radius: 12px 12px 0 0; overflow: hidden; }
.lights { display: inline-flex; gap: 8px; }
.lights i, .lights button { width: 12px; height: 12px; border-radius: 50%; padding: 0; }
.l1 { background: #ff5f57; } .l2 { background: #febc2e; } .l3 { background: #28c840; }
.bw-top > .lights { position: absolute; left: 15px; top: 15px; }
.tabs { position: absolute; left: 80px; right: 54px; top: 0; bottom: 0; overflow: hidden; }
.tabs-in { position: absolute; left: 0; bottom: 0; height: 34px; display: flex; align-items: flex-end; will-change: transform; }
.newtab { position: absolute; z-index: 3; top: 4px; right: 8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #3c4043; background: rgba(255, 255, 255, 0.6); touch-action: manipulation; transition: transform 0.08s, background 0.12s; }
.newtab:active { transform: scale(0.86); background: var(--blue); color: #fff; }

.tab { position: relative; flex: none; width: var(--tw, 200px); height: 34px; padding: 0 9px 0 11px; display: flex; align-items: center; gap: 8px; border-radius: 9px 9px 0 0; color: #3c4043; font-size: 12.5px; animation: tabin 0.2s var(--ease) both; }
.tab::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px; background: #b7bbc1; }
.tab img { flex: none; width: 16px; height: 16px; border-radius: 4px; pointer-events: none; }
.tab span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tab.act { background: #fff; z-index: 2; } .tab.act::after { display: none; }
.tabs-in.narrow .tab span { display: none; }
.tabs-in.narrow .tab { padding: 0; justify-content: center; }
.tabs-in.tiny .tab img { width: 12px; height: 12px; }
.tab.gold-tab { background: linear-gradient(180deg, #fff6d6, #ffe8a3); }
.tab.leave { animation: tabout 0.4s var(--ease) both; animation-delay: var(--d, 0ms); }

.bw-bar { flex: none; height: 46px; display: flex; align-items: center; gap: 4px; padding: 0 10px; background: #fff; }
.ib { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #5f6368; flex: none; }
.omni { flex: 1; min-width: 0; height: 34px; margin: 0 6px; padding: 0 15px; display: flex; align-items: center; gap: 9px; border-radius: 17px; background: #f1f3f4; color: #5f6368; font-size: 14px; }
.omni span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #c98e6b, #7d5a4a); margin: 0 4px; flex: none; }
.extwrap { position: relative; display: grid; }
.ext { width: 40px; height: 40px; color: #fff; background: var(--blue); transition: transform 0.1s, background 0.15s; }
.ext:hover { background: var(--blue-d); }
.ext:active { transform: scale(0.9); }
.ext.ring { animation: ring 1s ease-out infinite; }
.bubble { position: absolute; top: 48px; right: -6px; z-index: 9; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.bubble::before { content: ""; position: absolute; top: -5px; right: 18px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.bubble.on { opacity: 1; transform: none; }

.mem { flex: none; height: 4px; background: #eef0f2; overflow: hidden; }
.mem i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--m, 0.09)); transition: transform 0.12s linear, background 0.3s; }
.mem.warn i { background: #f0a020; } .mem.full i { background: var(--red); }

/* page: the tap zone */
.page { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 12px 12px; background: #fff; touch-action: none; cursor: pointer; }
.site { position: absolute; inset: 0; overflow: hidden; opacity: 0.6; transition: filter 0.4s ease, opacity 0.3s; }
[data-phase="lobby"] .site, [data-phase="countdown"] .site { opacity: 0.9; }
.is-lag .site { filter: blur(2px) saturate(0.6); }
.hud { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none;  transition: opacity 0.25s ease 0.4s; }
.hud-score { transform: scale(var(--grow, 1)); transition: transform 0.3s var(--spring); text-shadow: 0 2px 0 #fff, 0 0 30px #fff; font-size: clamp(72px, 14vw, 168px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--ink); }
.hud-score.bump { animation: bump 0.12s ease; }
.hud-label { margin-top: 6px; font-size: 15px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.hud-combo { margin-top: 14px; height: 30px; font-size: 16px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.hud-combo.x2 { color: #fff; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #f2b01e); animation: pulse 0.35s ease infinite alternate; }
[data-phase="lobby"] .hud, [data-phase="countdown"] .hud, [data-phase="ended"] .hud, [data-phase="clean"] .hud, [data-phase="done"] .hud { opacity: 0.0; }

.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.plus1 { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 22px; color: var(--blue); pointer-events: none; animation: floatup 0.6s var(--ease) forwards; }
.plus1.x2 { color: #ff6a3d; font-size: 26px; }
.ripple { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid rgba(0, 117, 222, 0.5); animation: ripple 0.45s ease-out forwards; pointer-events: none; }
.gold { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, #fff8dc, #ffe39a); box-shadow: 0 10px 30px rgba(196, 140, 0, 0.45), 0 0 0 2px #f2b01e inset; font-weight: 800; font-size: 15px; color: #6b4a00; pointer-events: auto; cursor: pointer; animation: goldin 0.3s var(--spring) both; touch-action: manipulation; }
.gold img { width: 24px; height: 24px; border-radius: 6px; }
.gold::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; background: #c98a00; width: 100%; transform-origin: 0 50%; animation: drain var(--life, 1700ms) linear forwards; }
.gold.got { animation: goldgot 0.35s ease forwards; pointer-events: none; }
.gold.miss { animation: goldmiss 0.25s ease forwards; pointer-events: none; }

.countdown { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: clamp(110px, 20vw, 220px); font-weight: 800; letter-spacing: -0.05em; color: var(--ink); pointer-events: none; opacity: 0; }
.countdown.popnum { animation: campop 0.9s ease both; }
.countdown.go { color: var(--blue); }
.tapnow { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-size: 18px; font-weight: 700; color: var(--blue); opacity: 0; pointer-events: none; }
[data-phase="play"] .tapnow.on { animation: tapnow 1.2s ease 2; }

.freeze { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(400px, calc(100% - 28px)); padding: 18px; border-radius: 14px; background: rgba(250, 250, 252, 0.97); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.3); display: grid; grid-template-columns: auto 1fr; gap: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(0.95); transition: opacity 0.15s, transform 0.25s var(--spring), visibility 0s 0.25s; cursor: default; }
.freeze.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
.freeze-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #f0a64a, #d9822b); }
.freeze b { font-size: 15px; } .freeze p { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.freeze .btn { grid-column: 1 / -1; height: 48px; font-size: 16px; }

.timesup { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: clamp(54px, 9vw, 110px); font-weight: 800; letter-spacing: -0.04em; color: var(--red); opacity: 0; pointer-events: none; }
.timesup.on { animation: campop 1.1s ease both; }

/* shelf page shown after cleaning */
.shelf { position: absolute; inset: 0; z-index: 5; padding: 20px clamp(18px, 4vw, 44px); background: #fff; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s; cursor: default; }
[data-phase="done"] .shelf { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.sp-mark { width: 24px; height: 24px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--ink); color: #fff; flex: none; }
.sp-mark.big { width: 46px; height: 46px; border-radius: 12px; }
.sp-search { margin-left: auto; width: min(320px, 45%); padding: 8px 12px; border-radius: 8px; background: #f1f3f4; color: var(--faint); font-size: 13px; }
.sp-sec { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 6px; font-size: 14px; }
.sp-sec span { color: var(--faint); font-size: 13px; } .sp-sec i { font-style: normal; }
.sp-list { list-style: none; }
.sp-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0f1f2; font-size: 15px; opacity: 0; transform: translateY(5px); animation: rowin 0.4s var(--ease) forwards; animation-delay: calc(var(--i) * 50ms + 150ms); }
.sp-list img { width: 18px; height: 18px; border-radius: 4px; }
.sp-list li span { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--faint); }

/* Tab Shelf popup */
.pop { position: absolute; right: 18px; top: 92px; width: 272px; padding: 15px; z-index: 8; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.2s, transform 0.3s var(--ease), visibility 0s 0.3s; }
.pop.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pop-h { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.pop-h > span:last-child { margin-left: auto; font-size: 12.5px; color: var(--faint); }
.pop-n { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pop-n > div { padding: 9px 11px; border-radius: 8px; background: #f6f5f4; }
.pop-n small, .pop-k small { display: block; font-size: 11.5px; color: var(--faint); }
.pop-n b { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; }
.pop-k { margin: 10px 0; display: flex; align-items: center; gap: 8px; }
.pop-k small { display: inline; } .pop-k span { flex: 1; padding: 7px 10px; border: 1px solid #dadce0; border-radius: 7px; font-size: 12.5px; }
.pop .btn { height: 40px; }
.pop .btn.ring { animation: ring 1s ease-out infinite; }

/* ---------- windows (ad-os style) ---------- */
.win { position: absolute; z-index: 12; display: flex; flex-direction: column; border-radius: 14px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: scale(0.94) translateY(10px); transition: opacity 0.22s ease, transform 0.32s var(--spring), visibility 0s 0.32s; }
.win.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.win.shake { animation: shake 0.4s; }
.win-bar { position: relative; flex: none; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 14px; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; }
.win-bar .lights { position: absolute; left: 14px; top: 13px; }
.win-t { font-size: 13px; font-weight: 600; color: var(--muted); }
.win-body { padding: 22px 24px 22px; overflow: auto; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
#w-lobby { left: calc((100% - 398px) / 2 + 13px); top: 50%; width: min(440px, calc(100% - 32px)); transform: translate(-50%, -48%) scale(0.94); }
#w-lobby.on { transform: translate(-50%, -50%); }
#w-lobby h1 { margin-top: 8px; font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.rules { list-style: none; margin: 16px 0 18px; display: grid; gap: 10px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text); }
.r-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--blue); }
.r-combo { background: linear-gradient(135deg, #ff6a3d, #f2b01e); font-size: 12px; }
.r-gold { background: #fff1c2; color: #8a6200; box-shadow: inset 0 0 0 1.5px var(--gold); font-size: 12px; }
.r-ram { background: var(--ink); }
.field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field input { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #d4d7db; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: #fff; user-select: text; -webkit-user-select: text; }
.field input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 117, 222, 0.18); }
.prize { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #8a6200; }
.prize.small { font-weight: 500; color: var(--muted); font-size: 12.5px; display: block; margin-top: 12px; }
.small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.small a { color: var(--blue); }

#w-board { right: 24px; top: 48px; width: 350px; max-height: calc(100% - 74px); }
.board-meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.board { list-style: none; counter-reset: r; }
.board li { counter-increment: r; display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #f0f1f2; font-size: 15px; }
.board li::before { content: counter(r); width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: #f1f3f4; color: var(--muted); }
.board li:nth-child(1)::before { background: #ffe39a; color: #6b4a00; }
.board li:nth-child(2)::before { background: #e3e7ec; color: #3c4043; }
.board li:nth-child(3)::before { background: #f3d2b6; color: #6b3a14; }
.board li b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li span { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.board li.me { background: var(--tint); border-radius: 8px; }
.board li.board-empty { color: var(--muted); font-size: 14px; } .board li.board-empty::before { display: none; }

#w-result { left: calc((100% - 398px) / 2 + 13px); top: 50%; width: min(460px, calc(100% - 32px)); max-height: calc(100% - 70px); transform: translate(-50%, -48%) scale(0.94); }
#w-result.on { transform: translate(-50%, -50%); }
#w-result.tucked { opacity: 0.0; visibility: hidden; }
.step { display: none; } [data-step="score"] .step-score, [data-step="end"] .step-end { display: block; }
.res-score { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.res-score small { font-size: 22px; color: var(--muted); letter-spacing: 0; font-weight: 700; }
.res-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0; }
.res-stats div { padding: 10px; border-radius: 10px; background: #f6f6f7; }
.res-stats dt { font-size: 11.5px; color: var(--muted); }
.res-stats dd { font-family: var(--mono); font-size: 18px; font-weight: 700; margin-top: 2px; }
.post { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.post .field { margin: 0; }
.rank { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.claim { margin: 8px 0 6px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.claim b { font-family: var(--mono); font-size: 17px; letter-spacing: 0.08em; color: var(--ink); padding: 4px 10px; border-radius: 7px; background: #f1f3f4; user-select: text; -webkit-user-select: text; }
.copy { font-size: 13px; font-weight: 600; color: var(--blue); }
.err { color: #b4443c; margin-top: 8px; }
.cleanstep { margin-top: 16px; padding: 14px; border-radius: 12px; background: #fff7e6; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.cleanstep .btn { justify-self: start; }
.step-end h2 { margin-top: 14px; font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.end-sub { margin: 12px 0 18px; font-size: 15px; line-height: 1.55; color: var(--text); }
.end-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

/* notifications and toast (ad-os) */
.notif { position: absolute; right: 18px; top: 44px; z-index: 30; width: min(330px, calc(100% - 36px)); display: grid; gap: 10px; pointer-events: none; }
.note { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); cursor: grab; transform: translateX(34px); opacity: 0; transition: transform 0.38s var(--ease), opacity 0.38s; touch-action: pan-y; }
.note.in { transform: none; opacity: 1; }
.note-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--gold); color: #fff; }
.note b { display: block; font-size: 14.5px; } .note i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.toast { position: absolute; left: 50%; bottom: 46px; z-index: 40; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 5px 6px 0 var(--blue); opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.25s, transform 0.25s var(--ease); pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; z-index: 60; pointer-events: none; will-change: transform, opacity; }

/* phase visibility */
[data-phase="lobby"] .page { cursor: default; }
.page .ripple, .page .plus1 { z-index: 3; }

/* ---------- keyframes ---------- */
@keyframes tabin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tabout { to { opacity: 0; transform: translateY(-16px) scale(0.6); } }
@keyframes jitter { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1.5px, -1px, 0); } 100% { transform: translate3d(-1px, 1px, 0); } }
@keyframes floatup { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(0.8); } to { opacity: 0; transform: translate(var(--x), calc(var(--y) - 60px)) scale(1.1); } }
@keyframes ripple { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(0.3); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.6); } }
@keyframes bump { 50% { transform: scale(1.06); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes campop { 0% { opacity: 0; transform: translateY(-50%) scale(0.5); } 30% { opacity: 1; transform: translateY(-50%) scale(1.12); } 55% { transform: translateY(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
@keyframes tapnow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes goldin { from { opacity: 0; transform: scale(0.5) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes goldgot { to { opacity: 0; transform: scale(1.6); } }
@keyframes goldmiss { to { opacity: 0; transform: scale(0.7); } }
@keyframes drain { to { transform: scaleX(0); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(0, 117, 222, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(0, 117, 222, 0); } }
@keyframes rowin { to { opacity: 1; transform: none; } }
@keyframes shake { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 3px 0; } 30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .bw { right: 26px; }
  #w-lobby, #w-result { left: 50%; }
  #w-board { top: 50%; left: 50%; right: auto; width: min(380px, calc(100% - 32px)); transform: translate(-50%, -48%) scale(0.94); z-index: 14; }
  #w-board.on { transform: translate(-50%, -50%); }
}
@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .mbar { height: 40px; padding: 0 8px; gap: 2px; }
  .mbar-app { font-size: 14px; }
  .hud-chip { height: 26px; font-size: 13px; }
  .bw { top: 46px; left: 6px; right: 6px; bottom: 6px; border-radius: 12px; }
  .bw-top > .lights { left: 12px; } .bw-top > .lights i { width: 10px; height: 10px; }
  .tabs { left: 60px; right: 48px; }
  .omni { font-size: 13px; padding: 0 12px; margin: 0 4px 0 2px; }
  .ext { width: 44px; height: 44px; }
  .win { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto !important; max-height: calc(100% - 56px); transform: translateY(30px) !important; border-radius: 18px; }
  .win.on { transform: none !important; }
  .win-bar { cursor: default; }
  .res-stats { grid-template-columns: repeat(3, 1fr); }
  .post { grid-template-columns: 1fr; }
  .post .btn { width: 100%; }
  #w-lobby h1 { font-size: 26px; }
  .rules { gap: 8px; margin: 12px 0 14px; }
  .rules li { font-size: 13.5px; }
  .notif { top: 48px; right: 8px; width: calc(100% - 16px); }
  .pop { right: 8px; top: 96px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .rules li:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-lag .bw, .is-hot .hud-time, .ext.ring, .pop .btn.ring, .hud-combo.x2, .boot p { animation: none; }
  .tab, .sp-list li { animation: none; opacity: 1; transform: none; }
  .win, .freeze, .pop, .shelf, .toast, .note { transition: none; }
}

/* ---------- v2: timer, nitro, milestones, flyers, strain ---------- */
.loop { margin: 12px 0 2px; padding: 12px 14px; border-radius: 12px; background: #fff7e6; color: #6b4a00; font-size: 14px; line-height: 1.5; font-weight: 500; }
.rules kbd, .nitro kbd { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: #f1f3f4; box-shadow: inset 0 -1px 0 #d4d7db; color: var(--ink); }
.r-nitro { background: linear-gradient(135deg, #7c3aed, #ff3d81); }

.timebar { flex: none; height: 6px; background: #eef0f2; overflow: hidden; }
.timebar i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--t, 1)); }
.is-hot .timebar i { background: var(--red); }

.bigtime { position: absolute; z-index: 4; top: 14px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.bigtime b { font-size: clamp(40px, 6vw, 64px); line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bigtime span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.is-hot .bigtime { background: var(--red); animation: pulse 0.5s ease infinite alternate; }
.is-hot .bigtime b, .is-hot .bigtime span { color: #fff; }
[data-phase="lobby"] .bigtime, [data-phase="clean"] .bigtime, [data-phase="done"] .bigtime { opacity: 0; }
.freeze { z-index: 7; }
.freeze b { color: #b4443c; }

.nitro { position: absolute; z-index: 5; left: 16px; bottom: 16px; height: 50px; padding: 0 16px 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 25px; overflow: hidden; color: #fff; background: #3b3f46; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); font-weight: 800; font-size: 15px; touch-action: manipulation; opacity: 0.55; transition: opacity 0.2s, transform 0.1s; }
.nitro > *:not(.nitro-fill) { position: relative; }
.nitro-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #7c3aed, #ff3d81); transform-origin: 0 50%; transform: scaleX(var(--n, 0)); transition: transform 0.15s linear; }
.nitro b { min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.25); font-size: 13px; }
.nitro kbd { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; }
.nitro.ready { opacity: 1; animation: nitroglow 1s ease-in-out infinite alternate; }
.nitro.ready .nitro-fill { transform: scaleX(1); }
.nitro.got { animation: nitrogot 0.4s var(--spring); }
.nitro:active { transform: scale(0.95); }
[data-phase="lobby"] .nitro, [data-phase="countdown"] .nitro, [data-phase="ended"] .nitro, [data-phase="clean"] .nitro, [data-phase="done"] .nitro { opacity: 0; pointer-events: none; }
.page.nitro-burst { animation: burst 0.45s ease; }

.milestone { position: absolute; z-index: 6; left: 0; right: 0; top: 22%; text-align: center; font-size: clamp(40px, 8vw, 96px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #ffd43b; text-shadow: 0 3px 0 #0a5fc0, 0 7px 0 #084a99, 0 14px 28px rgba(0, 90, 200, 0.45); opacity: 0; pointer-events: none; text-transform: uppercase; }
.milestone.on { animation: milestone 1.1s var(--ease) both; }

.flyer { position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 6px; pointer-events: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background: #fff; }
.is-strain .bw { animation: jitter 0.3s steps(2, end) infinite; }
.is-strain .mem i { animation: memflash 0.4s ease infinite alternate; }

@keyframes nitroglow { from { box-shadow: 0 10px 26px rgba(124, 58, 237, 0.35); } to { box-shadow: 0 10px 34px rgba(255, 61, 129, 0.75); } }
@keyframes nitrogot { 50% { transform: scale(1.12); } }
@keyframes burst { 0% { transform: scale(1); } 30% { transform: scale(1.015); filter: saturate(1.6) brightness(1.08); } 100% { transform: scale(1); } }
@keyframes milestone { 0% { opacity: 0; transform: scale(0.4) rotate(-4deg); } 25% { opacity: 1; transform: scale(1.1) rotate(1deg); } 45% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes memflash { from { opacity: 1; } to { opacity: 0.5; } }

/* ---------- the made-up pages (tab-rush-pages.js) ---------- */
.pg { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 14px; color: var(--ink); }
.pg-nav { flex: none; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 1px solid #eceef0; }
.pg-nav img { border-radius: 5px; }
.pg-nav b { font-size: 16px; text-transform: capitalize; }
.pg-search { flex: 1; max-width: 340px; height: 30px; margin-left: 18px; border-radius: 15px; background: #f1f3f4; }
.pg-dot { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; opacity: 0.8; }
.pg-body { flex: 1; min-height: 0; overflow: hidden; padding: 20px 22px; }
.pg-line { display: block; height: 10px; border-radius: 5px; background: #eceef0; margin-top: 9px; }
.pg-line.faint { background: #f3f4f5; } .pg-line.light { background: rgba(255, 255, 255, 0.25); margin: 0; }
.pg h3 { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin-top: 10px; }
.pg-meta { color: var(--muted); font-size: 13px; margin-top: 6px; }
.pg-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }

.pg-video { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
.pg-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; display: grid; place-items: center; }
.pg-play { width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); position: relative; }
.pg-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-left: 17px solid #111; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.pg-prog { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.pg-prog i { display: block; height: 100%; border-radius: 2px; }
.pg-side { display: grid; gap: 10px; align-content: start; }
.pg-thumbrow { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.pg-thumb { height: 56px; border-radius: 8px; }

.pg-music { margin: -20px -22px; padding: 22px; height: calc(100% + 40px); color: #fff; }
.pg-album { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 18px; }
.pg-art { width: 120px; height: 120px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.pg-album small { font-size: 12px; opacity: 0.8; } .pg-album h3 { font-size: clamp(24px, 3vw, 40px); }
.pg-track { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 9px 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); }

.pg-call { margin: -20px -22px; padding: 16px; height: calc(100% + 40px); background: #1c1c1e; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pg-tile { position: relative; border-radius: 12px; background: #2c2c2e; display: grid; place-items: center; }
.pg-tile .pg-av { width: 58px; height: 58px; font-size: 22px; }
.pg-tile small { position: absolute; left: 10px; bottom: 8px; color: #fff; font-size: 12px; }

.pg-code .pg-path { font-size: 18px; font-weight: 600; color: #0969da; }
.pg-tabsrow { display: flex; gap: 18px; margin: 12px 0; border-bottom: 1px solid #eceef0; font-size: 13.5px; color: var(--muted); }
.pg-tabsrow span { padding-bottom: 9px; } .pg-tabsrow .on { color: var(--ink); font-weight: 600; border-bottom: 2px solid; }
.pg-files { border: 1px solid #e3e5e8; border-radius: 10px; overflow: hidden; }
.pg-commit { padding: 10px 14px; background: #f6f8fa; font-size: 13px; font-weight: 600; }
.pg-file { display: grid; grid-template-columns: 18px 160px 1fr; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid #eceef0; font-size: 13px; }
.pg-file b { font-weight: 500; color: #0969da; } .pg-msg { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-fi { width: 14px; height: 12px; border-radius: 2px; background: #9aa0a6; } .pg-fi.dir { background: #54aeff; }

.pg-qa { display: grid; grid-template-columns: 70px 1fr; gap: 16px; margin-top: 16px; }
.pg-vote { display: grid; justify-items: center; align-content: start; gap: 2px; } .pg-vote b { font-size: 22px; } .pg-vote small { color: var(--muted); }
.pg-pre { margin-top: 12px; padding: 12px; border-radius: 8px; background: #f6f6f6; font-family: var(--mono); font-size: 13px; }

.pg-feed { max-width: 620px; margin: 0 auto; display: grid; gap: 12px; }
.pg-post { padding: 14px; border: 1px solid #e3e5e8; border-radius: 12px; }
.pg-ph { display: flex; align-items: center; gap: 10px; } .pg-ph small { color: var(--muted); margin-left: auto; }
.pg-post p { margin: 10px 0; font-size: 15px; line-height: 1.4; }
.pg-act { display: flex; gap: 18px; font-size: 12.5px; color: var(--muted); }

.pg-chat { margin: -20px -22px; height: calc(100% + 40px); display: grid; grid-template-columns: 170px 1fr; }
.pg-chan { padding: 16px 12px; display: grid; align-content: start; gap: 4px; color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.pg-chan span { padding: 5px 8px; border-radius: 6px; } .pg-chan .on { background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; }
.pg-msgs { padding: 16px; display: grid; align-content: start; gap: 14px; }
.pg-msg2 { display: flex; gap: 10px; } .pg-msg2 p { margin-top: 2px; color: var(--text); }

.pg-article { max-width: 680px; }
.pg-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pg-hero { display: block; height: 150px; border-radius: 12px; margin: 14px 0 6px; }
.pg-props { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .pg-props span { padding: 4px 10px; border-radius: 6px; background: #f1f3f4; font-size: 12.5px; color: var(--muted); }
.pg-todo { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; }
.pg-todo i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #9aa0a6; } .pg-todo i.done { background: var(--blue); border-color: var(--blue); }

.pg-searchpg { max-width: 640px; }
.pg-q { height: 44px; padding: 0 20px; display: flex; align-items: center; border-radius: 22px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); font-size: 15px; margin-bottom: 18px; }
.pg-result { margin-bottom: 18px; } .pg-result small { color: #4d5156; font-size: 12.5px; } .pg-result b { display: block; color: #1a0dab; font-size: 18px; font-weight: 500; margin-top: 2px; }

.pg-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pg-card { display: grid; gap: 4px; font-size: 13.5px; }
.pg-img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; }
.pg-price { font-weight: 800; }
.pg-stars { height: 12px; width: 70px; background: linear-gradient(90deg, #f2b01e calc(var(--r) / 5 * 100%), #e3e5e8 0); -webkit-mask: radial-gradient(circle at 6px 6px, #000 5px, transparent 5.5px) 0 0 / 14px 12px repeat-x; mask: radial-gradient(circle at 6px 6px, #000 5px, transparent 5.5px) 0 0 / 14px 12px repeat-x; }

.pg-canvas { position: relative; margin: -20px -22px; height: calc(100% + 40px); background: #e9e9ec radial-gradient(#c9c9ce 1px, transparent 1px) 0 0 / 18px 18px; }
.pg-shape { position: absolute; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .pg-shape.round { border-radius: 50%; }
.pg-sel { position: absolute; left: 30%; top: 30%; width: 160px; height: 100px; border: 2px solid; }

.pg-board { margin: -20px -22px; padding: 16px; height: calc(100% + 40px); display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; align-items: start; overflow: hidden; }
.pg-col { padding: 10px; border-radius: 12px; background: #f1f2f4; display: grid; gap: 8px; } .pg-col b { font-size: 13.5px; padding: 2px 4px; }
.pg-kcard { padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); font-size: 13px; }

.pg-filesgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pg-fcell { display: grid; justify-items: center; gap: 8px; font-size: 13px; }
.pg-folder { width: 72px; height: 54px; border-radius: 6px; } .pg-doc { width: 48px; height: 60px; border-radius: 4px; background: #eef1f5; border: 1px solid #d4d9e1; }

.pg-newtab { margin: auto; padding-top: 8%; display: grid; justify-items: center; gap: 22px; width: 100%; }
.pg-logo { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(90deg, #0075de, #7c3aed, #ff3d81); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-big-search { width: min(520px, 86%); height: 48px; border-radius: 24px; display: flex; align-items: center; padding: 0 22px; color: var(--muted); box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); }
.pg-tiles { display: grid; grid-template-columns: repeat(4, 84px); gap: 14px; }
.pg-tile2 { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pg-tile2 img { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #f1f3f4; box-sizing: border-box; }

@media (max-width: 760px) {
  .pg-video { grid-template-columns: 1fr; } .pg-side { display: none; }
  .pg-shop { grid-template-columns: repeat(2, 1fr); }
  .pg-chat { grid-template-columns: 1fr; } .pg-chan { display: none; }
  .pg-board { grid-template-columns: repeat(2, 1fr); }
  .pg-file { grid-template-columns: 18px 110px 1fr; }
  .pg-call { grid-template-columns: repeat(2, 1fr); }
  .pg-filesgrid { grid-template-columns: repeat(3, 1fr); }
  .pg-tiles { grid-template-columns: repeat(4, 64px); gap: 10px; }
  .bigtime { top: 10px; right: 10px; padding: 6px 10px; }
  .nitro { left: 10px; bottom: 10px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .milestone.on, .nitro.ready, .is-strain .bw, .is-strain .mem i, .page.nitro-burst, .is-hot .bigtime { animation: none; }
  .milestone.on { opacity: 1; }
}

/* ---------- v3: icons, breathing plus, RAM bar, results, pitch ---------- */
.ic { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; color: currentColor; }
.ic svg, .ic img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ic.big { width: 44px; height: 44px; } .ic.huge { width: 56px; height: 56px; }
.show-sm { display: none; }

/* the + button breathes with a blue edge until the first tap */
.newtab.beckon { color: var(--blue); background: #fff; animation: breathe 1.7s ease-in-out infinite; }
.newtab.beckon::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0.0; animation: breathe-ring 1.7s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 117, 222, 0.0), 0 0 0 2px rgba(0, 117, 222, 0.55), 0 0 8px 1px rgba(0, 117, 222, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(0, 117, 222, 0.14), 0 0 0 2px rgba(0, 117, 222, 0.95), 0 0 26px 7px rgba(0, 117, 222, 0.6); } }
@keyframes breathe-ring { 0% { opacity: 0.7; transform: scale(0.9); } 70%, 100% { opacity: 0; transform: scale(1.7); } }

/* lobby */
.loop { margin: 8px 0 0; padding: 0; background: none; color: var(--muted); font-size: 15px; font-weight: 500; }
.how { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0 16px; }
.how li { display: grid; justify-items: center; gap: 2px; padding: 12px 4px 10px; border-radius: 14px; background: #f5f7fa; text-align: center; transition: transform 0.2s var(--spring), background 0.2s; }
.how li:hover { transform: translateY(-3px); background: #eaf3fe; }
.how .ic { color: var(--blue); margin-bottom: 4px; }
.how li:nth-child(2) .ic { color: #ff6a3d; } .how li:nth-child(3) .ic { color: #e0a000; } .how li:nth-child(4) .ic { color: #8a3ffc; }
.how b { font-size: 14px; } .how small { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.prize .ic { width: 16px; height: 16px; }

/* leaderboard header */
.board-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; }
.board-head .ic { color: #e0a000; padding: 8px; border-radius: 16px; background: #fff6d6; box-sizing: content-box; width: 40px; height: 40px; }
.board-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.board-head p { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.board-prize { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, #f1e9ff, #ffe9f1); color: #5a2bb5; font-size: 13px; font-weight: 700; }
.board-prize .ic { width: 18px; height: 18px; }
#w-board .win-body { padding-top: 16px; }

/* bottom RAM bar */
.rambar { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; border-radius: 17px; background: rgba(20, 24, 33, 0.9); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); transition: opacity 0.25s, transform 0.25s; }
.rambar-l { display: inline-flex; align-items: center; gap: 6px; } .rambar .ic { width: 16px; height: 16px; }
.rambar-track { position: relative; flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.rambar-track i { position: absolute; inset: 0; background: linear-gradient(90deg, #2fd27a, #f2c230 70%, #ff5a4d); transform-origin: 0 50%; transform: scaleX(var(--m, 0.09)); transition: transform 0.12s linear; border-radius: 6px; }
.rambar-zone { position: absolute; top: 0; bottom: 0; left: 85%; right: 0; background: repeating-linear-gradient(135deg, rgba(255, 90, 77, 0.45) 0 4px, transparent 4px 8px); }
.rambar-n { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.rambar-x { color: #ff8a80; font-size: 11px; opacity: 0.85; }
.rambar.warn .rambar-n { color: #ffd166; } .rambar.full { background: #b3261e; animation: jitter 0.16s steps(2, end) infinite; } .rambar.full .rambar-x { color: #fff; }
[data-phase="lobby"] .rambar, [data-phase="countdown"] .rambar { opacity: 0; transform: translateY(12px); }
[data-phase="ended"] .rambar, [data-phase="clean"] .rambar, [data-phase="done"] .rambar { opacity: 0; transform: translateY(12px); }
.nitro { bottom: 58px; }
.hud-combo, .hud-label { z-index: 1; }

/* results: dark, blue glow, one clear action */
.win-res { width: min(480px, calc(100% - 32px)); overflow: hidden; background: #0a1226; color: #fff; box-shadow: 0 40px 120px rgba(0, 20, 80, 0.7), 0 0 0 1px rgba(110, 160, 255, 0.25), 0 0 80px rgba(0, 117, 222, 0.35); }
.win-res { left: calc((100% - 398px) / 2 + 13px); top: 50%; transform: translate(-50%, -48%) scale(0.94); }
.win-res.on { transform: translate(-50%, -50%); }
.res-glow { position: absolute; inset: -30% -20% auto -20%; height: 90%; background: radial-gradient(50% 55% at 50% 38%, rgba(30, 140, 255, 0.85), rgba(30, 100, 255, 0.25) 45%, transparent 70%); filter: blur(10px); animation: glow 4s ease-in-out infinite alternate; pointer-events: none; }
.win-res::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 34px; -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); pointer-events: none; }
.res-body { position: relative; z-index: 1; padding: 28px 28px 22px; text-align: center; max-height: calc(100dvh - 80px); overflow: auto; }
.res-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8cc4ff; }
.res-score { margin-top: 6px; font-size: clamp(76px, 15vw, 116px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(60, 150, 255, 0.8); }
.res-score small { display: block; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #9ec9ff; text-shadow: none; margin-top: 4px; }
.res-rank { display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font-size: 14px; font-weight: 700; }
.res-rank.top { background: linear-gradient(90deg, #ffd166, #ff9d4d); color: #3a2300; box-shadow: none; }
.res-stats { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 18px 0 16px; }
.res-stats li { display: grid; justify-items: center; gap: 1px; padding: 9px 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.res-stats .ic { color: #8cc4ff; width: 20px; height: 20px; } .res-stats li:nth-child(2) .ic { color: #ff9a6a; } .res-stats li:nth-child(3) .ic { color: #ffd166; } .res-stats li:nth-child(4) .ic { color: #c9a0ff; }
.res-stats b { font-family: var(--mono); font-size: 16px; } .res-stats small { font-size: 10.5px; color: #8fa6c9; }
.post { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }
.post input { height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 16px; user-select: text; -webkit-user-select: text; }
.post input::placeholder { color: #7f93b5; } .post input:focus { outline: none; border-color: #4aa3ff; box-shadow: 0 0 0 3px rgba(74, 163, 255, 0.25); }
.btn-light { background: #fff; color: #0a1226; } .btn-light:hover { background: #e9f1ff; }
.claim { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: #9ab0d3; }
.claim b { font-family: var(--mono); font-size: 15px; letter-spacing: 0.1em; color: #fff; padding: 4px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); user-select: text; -webkit-user-select: text; }
.claim .copy { color: #8cc4ff; font-weight: 700; }
.win-res .err { color: #ff9a92; margin: -4px 0 10px; font-size: 12.5px; }
.res-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.btn-go2 { height: 54px; font-size: 18px; font-weight: 800; color: #fff; border-radius: 14px; background: linear-gradient(180deg, #2a97ff, #0068d6); box-shadow: 0 12px 28px -8px rgba(0, 130, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-go2:hover { filter: brightness(1.08); }
.btn-glass { height: 54px; font-size: 15.5px; color: #fff; border-radius: 14px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.16); }
.res-share { margin-top: 12px; font-size: 13px; font-weight: 600; color: #8fa6c9; } .res-share:hover { color: #fff; }

/* the pitch, sliding in from the side */
.win-about { right: 20px; top: 48px; bottom: 20px; left: auto; width: min(400px, calc(100% - 32px)); transform: translateX(40px); display: flex; flex-direction: column; overflow: auto; z-index: 15; background: #fff; }
.win-about.on { transform: none; }
.about-x { position: absolute; z-index: 2; right: 10px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); font-size: 20px; line-height: 1; color: var(--muted); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.about-shot { flex: none; background: linear-gradient(160deg, #e6f3fe, #f6f0ff); padding: 28px 22px 0; overflow: hidden; }
.about-shot img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 40px rgba(0, 90, 200, 0.2); transform: translateY(6px); animation: floaty 5s ease-in-out infinite; }
.about-body { padding: 20px 22px 22px; display: grid; gap: 12px; }
.about-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } .about-brand img { border-radius: 6px; }
.about h2, .win-about h2 { font-size: 26px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.about-list { list-style: none; display: grid; gap: 10px; }
.about-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.about-list .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--tint); color: var(--blue); box-sizing: border-box; }
.btn-xl { height: 54px; font-size: 17px; font-weight: 700; border-radius: 14px; box-shadow: 0 12px 26px -10px rgba(0, 117, 222, 0.9); }

/* more motion */
.desk::before, .desk::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; pointer-events: none; opacity: 0.55; will-change: transform; }
.desk::before { left: -20vmax; top: -22vmax; background: radial-gradient(circle, rgba(120, 190, 255, 0.55), transparent 62%); animation: drift1 16s ease-in-out infinite alternate; }
.desk::after { right: -24vmax; bottom: -26vmax; background: radial-gradient(circle, rgba(255, 170, 110, 0.5), transparent 62%); animation: drift2 19s ease-in-out infinite alternate; }
.amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amb img { position: absolute; bottom: -40px; width: 34px; height: 34px; border-radius: 9px; opacity: 0; will-change: transform, opacity; animation: rise var(--dur, 5s) linear forwards; }
.speed { position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 62%, rgba(0, 117, 222, 0.0) 0 5deg, rgba(0, 117, 222, 0.32) 5deg 6deg, rgba(150, 90, 255, 0.0) 6deg 11deg); -webkit-mask: radial-gradient(circle at 50% 62%, transparent 14%, #000 70%); mask: radial-gradient(circle at 50% 62%, transparent 14%, #000 70%); }
.speed.go { animation: speedgo 0.55s ease-out; }
.is-shake .bw { animation: shake2 0.35s ease; }
.hud-combo.x2 { background: linear-gradient(90deg, #ff6a3d, #f2b01e, #ff6a3d); background-size: 200% 100%; animation: pulse 0.35s ease infinite alternate, flow 1.2s linear infinite; }
.tab.gold-tab { animation: tabin 0.2s var(--ease) both, shine 1.4s ease-in-out infinite alternate; }
.bigtime b { display: inline-block; }
.bigtime b.tick { animation: tickpop 0.28s ease; }

@keyframes glow { from { opacity: 0.85; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vmax, -9vmax) scale(1.1); } }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 12% { opacity: 0.22; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -105vh) rotate(var(--rot, 20deg)); } }
@keyframes speedgo { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes shake2 { 15% { transform: translate(-5px, 2px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, 3px); } 60% { transform: translate(3px, -2px); } 80% { transform: translate(-2px, 1px); } }
@keyframes flow { to { background-position: 200% 0; } }
@keyframes shine { from { filter: brightness(1); } to { filter: brightness(1.12) saturate(1.3); } }
@keyframes floaty { 50% { transform: translateY(0); } }
@keyframes tickpop { 40% { transform: scale(1.15); } }

@media (max-width: 1100px) { .win-res { left: 50%; } }
@media (max-width: 760px) {
  .hide-sm { display: none !important; } .show-sm { display: block; }
  .how { gap: 5px; } .how li { padding: 10px 2px 8px; } .how .ic.big { width: 34px; height: 34px; } .how b { font-size: 13px; } .how small { font-size: 10.5px; }
  .win-res { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto !important; transform: translateY(30px) !important; }
  .win-res.on { transform: none !important; }
  .res-body { padding: 22px 18px 16px; } .res-actions { grid-template-columns: 1fr; } .res-stats { gap: 4px; }
  .win-about { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto !important; max-height: calc(100% - 56px); transform: translateY(30px) !important; z-index: 16; }
  .win-about.on { transform: none !important; }
  .about-shot { display: none; }
  .rambar { left: 8px; right: 8px; bottom: 8px; height: 38px; } .nitro { bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .newtab.beckon, .newtab.beckon::after, .res-glow, .desk::before, .desk::after, .about-shot img, .is-shake .bw, .rambar.full, .tab.gold-tab, .hud-combo.x2 { animation: none; }
  .speed.go { animation: none; opacity: 0; } .amb { display: none; }
}

/* Landing-page type: display face with tight tracking on headlines and big numbers. */
h1, h2, h3, .bigtime, .milestone, .res-score, .res-title, .win-res h2, .win-about h2 { font-family: var(--font-display); letter-spacing: -0.03em; }

/* Calm pass: one accent (blue) on neutrals. Red stays for RAM danger only. */
:root { --gold: #0075de; }
.tab.gold-tab { background: linear-gradient(180deg, #eaf4ff, #d3e8ff); }
.hud-combo.x2, .r-combo, .r-nitro, .nitro-fill, .res-rank.top { background: var(--blue); color: #fff; animation: none; box-shadow: none; }
.plus1.x2 { color: var(--blue); }
.r-gold { background: var(--tint); color: var(--tint-ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.board li:nth-child(1)::before { background: var(--tint); color: var(--tint-ink); }
.cleanstep, .loop { background: var(--tint); color: var(--tint-ink); }
.note-ic { background: var(--blue); }
.pg-logo { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.pg-stars { background: linear-gradient(90deg, #8fa6c9 calc(var(--r) / 5 * 100%), #e3e5e8 0); }
.how li .ic, .board-head .ic { color: var(--blue); }
.board-head .ic { background: var(--tint); }
.board-prize { background: var(--tint); color: var(--tint-ink); }
.rambar-track i { background: linear-gradient(90deg, #4da3ff, var(--blue) 70%, var(--red)); }
.rambar.warn .rambar-n { color: #fff; }
.res-stats .ic, .res-stats li:nth-child(n) .ic { color: #8cc4ff; }
.comeback { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--blue); }

/* Juice: big word callouts and flashes. Heavy display type, stacked glow, spring in. */
.callout { position: absolute; left: 50%; z-index: 7; pointer-events: none; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 7vw, 76px); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; color: #fff; text-shadow: 0 2px 0 var(--blue-d), 0 4px 0 rgba(0, 60, 130, 0.55), 0 0 24px rgba(0, 117, 222, 0.75), 0 0 56px rgba(0, 117, 222, 0.5); }
.callout.hi { color: #fff; text-shadow: 0 2px 0 #0a4fa0, 0 4px 0 rgba(0, 40, 100, 0.6), 0 0 18px #4da3ff, 0 0 48px #4da3ff, 0 0 90px rgba(77, 163, 255, 0.7); }
.callout.bad { color: #fff; text-shadow: 0 2px 0 #b3261e, 0 4px 0 rgba(90, 10, 10, 0.55), 0 0 22px rgba(229, 72, 77, 0.85), 0 0 60px rgba(229, 72, 77, 0.55); }
.flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), rgba(77, 163, 255, 0.45) 55%, transparent 80%); }
.flash.bad { background: radial-gradient(circle at 50% 40%, rgba(255, 120, 120, 0.7), rgba(229, 72, 77, 0.35) 55%, transparent 80%); }
.plus1 { text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 255, 255, 0.9); }
.milestone { color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 #0a4fa0, 0 4px 0 rgba(0, 40, 100, 0.6), 0 0 18px #4da3ff, 0 0 48px #4da3ff, 0 0 90px rgba(77, 163, 255, 0.7); }

/* One popup-text style: heavy blue type on a light blue pill (matches the Figma Times Up). */
.callout, .callout.hi, .milestone, .timesup, .countdown {
  color: #0068d9; text-shadow: none; text-transform: none; letter-spacing: -0.04em; font-weight: 800; line-height: 1;
  background: #e1f0ff; border-radius: 22px; padding: 0.12em 0.32em 0.18em; box-shadow: 0 10px 30px rgba(0, 104, 217, 0.18);
}
.callout.bad { color: #d6293a; background: #ffe4e6; box-shadow: 0 10px 30px rgba(229, 72, 77, 0.2); text-shadow: none; }
.milestone, .timesup { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 92%; }
.timesup { font-size: clamp(44px, 8vw, 96px); }
.countdown { width: max-content; margin: 0 auto; padding: 0.04em 0.26em 0.1em; letter-spacing: -0.05em; }
.countdown.go { color: #fff; background: var(--blue); }
.callout { font-size: clamp(26px, 4.6vw, 52px); border-radius: 18px; }
.milestone { top: 20%; }

/* Fixes: smaller score, inset progress pill, centred new tab, Notion page */
.hud-score { font-size: clamp(44px, 7.5vw, 92px); letter-spacing: -0.04em; }
.hud-label { font-size: 12px; margin-top: 4px; }
.timebar { height: 5px; margin: 8px 14px 0; border-radius: 999px; background: #e9edf2; }
.timebar i { border-radius: 999px; }
.pg-newtab { margin: 0; padding: 0; height: 100%; align-content: center; }
.pg-logo { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.pg-docpage { width: 100%; max-width: 680px; margin: 0 auto; padding: 8px 4px; }
.pg-docpage h3 { font-size: clamp(26px, 4vw, 38px); line-height: 1.12; margin-bottom: 4px; }
.pg-docpage .pg-todo { border-bottom: 1px solid #f0f1f3; }
.how li:nth-child(n) .ic { color: var(--blue); }
.gold { overflow: hidden; }
.gold::after { left: 14px; right: 14px; bottom: 6px; width: auto; height: 4px; background: var(--blue); opacity: 0.8; }
.pg-logo { display: inline-flex; align-items: center; gap: 0.3em; color: #1d1d1f; }
.pg-logo img { width: 1.15em; height: 1.15em; border-radius: 22%; box-shadow: 0 6px 18px rgba(0, 90, 220, 0.3); }
.board-icon { width: 56px; height: 56px; border-radius: 14px; flex: none; box-shadow: 0 6px 16px rgba(0, 90, 220, 0.25); }
.claim-how { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #a9bddb; }
.claim-how a { color: #8cc4ff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.win-res .claim { margin-top: 16px; }
.win-res .claim-how { margin: 14px 8px 0; padding: 0 4px; font-size: 12.5px; line-height: 1.6; text-align: center; text-wrap: balance; }
.win-res .res-actions { margin-top: 22px; }
.traveller { position: absolute; z-index: 7; pointer-events: none; font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; color: #0068d9; background: #e1f0ff; border-radius: 12px; padding: 2px 10px 4px; box-shadow: 0 8px 24px rgba(0, 104, 217, 0.25); }
.hud-score.banked { animation: banked 0.45s ease; }
@keyframes banked { 0% { color: var(--ink); } 25% { color: #0068d9; transform: scale(calc(var(--grow, 1) * 1.12)); } 100% { color: var(--ink); } }

/* Leaderboard stays up on desktop; the pitch panel opens beside it. */
@media (min-width: 1101px) {
  .win-about { right: 394px; width: min(360px, calc(100% - 32px)); }
  #board-x { cursor: default; }
}
#w-board .small { margin: 16px 4px 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--muted); }
#w-board .board-prize { margin-bottom: 14px; }
#w-board .win-body { padding-bottom: 20px; }
@media (min-width: 1101px) { .about-on #w-result { left: calc((100% - 774px) / 2 + 6px); } #w-result { transition: left 0.35s var(--ease), opacity 0.22s ease, transform 0.3s var(--ease); } }