/* ════════════════════════════════════════════════════════════════
   LI Hockey arcade — landing page (/arcade). Pairs with /js/arcade-hub.js.
   A site page (the normal nav sits on top) with the arcade's personality:
   a neon sign, your coins lying on the ice, and the cabinets on the floor to walk up to.
   Mobile-first: the cabinets are a swipeable row on a phone and a single row across from 900px, each capped at 420px so a
   short floor (three cabinets today) stays centred and none is ever stretched.
   ════════════════════════════════════════════════════════════════ */
:root {
    --hub-bg: #050a18;
    --hub-panel: #0c142e;
    --hub-line: rgba(255, 255, 255, 0.10);
    --hub-text: #f3f7ff;
    --hub-dim: rgba(226, 236, 255, 0.68);
    --hub-faint: rgba(226, 236, 255, 0.40);
    --hub-cyan: #3fd0ff;
    --hub-red: #ff3b5c;
    --hub-gold: #ffd75e;
    --hub-good: #3dffa2;
    --hub-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
    --hub-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.hub-body { margin: 0; background: var(--hub-bg); color: var(--hub-text); font-family: var(--hub-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }

.hub { position: relative; isolation: isolate; min-height: 100vh; padding: 12px 0 72px; overflow: hidden; }
.hub-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hub-glow { position: absolute; inset: 0; background:
    radial-gradient(70% 38% at 50% 0%, rgba(63, 208, 255, 0.20), transparent 70%),
    radial-gradient(50% 30% at 85% 12%, rgba(255, 59, 92, 0.13), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(255, 215, 94, 0.06), transparent 70%); }
/* a rink-blue floor grid running off to the horizon */
.hub-grid { position: absolute; left: -30%; right: -30%; top: 300px; height: 520px; opacity: 0.55;
    background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(63, 208, 255, 0.16) 46px 47px), repeating-linear-gradient(90deg, transparent 0 86px, rgba(63, 208, 255, 0.12) 86px 87px);
    transform: perspective(520px) rotateX(62deg); transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent, #000 22%, transparent 92%); mask-image: linear-gradient(transparent, #000 22%, transparent 92%); }

/* ── hero ─────────────────────────────────────────────────────── */
.hub-hero { width: min(1180px, 100%); margin: 0 auto; padding: 18px 20px 6px; display: grid; gap: 18px; }
.hub-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--hub-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--hub-cyan); }
.hub-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hub-cyan); box-shadow: 0 0 12px var(--hub-cyan); animation: hub-blink 1.6s ease-in-out infinite; }
.hub-title { margin: 6px 0 0; font: 800 clamp(84px, 25vw, 176px)/0.84 var(--hub-display); letter-spacing: 0.01em; text-transform: uppercase; transform: skewX(-8deg); transform-origin: 0 100%; white-space: nowrap; }
.hub-title span { display: inline-block; color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 22px rgba(63, 208, 255, 0.85), 0 0 60px rgba(63, 208, 255, 0.55), 0 6px 0 rgba(0, 0, 0, 0.4); }
.hub-title span:nth-child(odd) { text-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 59, 92, 0.85), 0 0 60px rgba(255, 59, 92, 0.5), 0 6px 0 rgba(0, 0, 0, 0.4); }
.hub-title .hub-flicker { animation: hub-flicker 7s linear infinite; }           /* one tube that never quite behaves */
.hub-tagline { margin: 14px 0 0; font: 600 clamp(19px, 5vw, 24px)/1.2 var(--hub-display); letter-spacing: 0.02em; color: var(--hub-dim); }
.hub-tagline b { color: var(--hub-text); font-weight: 700; }

/* wallet */
.hub-wallet { margin-top: 18px; max-width: 520px; }
.hub-wallet-skeleton { height: 92px; border-radius: 18px; background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 70%); background-size: 300% 100%; animation: hub-shimmer 1.4s linear infinite; }
.hub-wallet-card { border-radius: 18px; padding: 14px 16px 15px; border: 1px solid rgba(255, 215, 94, 0.34); background: linear-gradient(180deg, rgba(74, 52, 6, 0.55), rgba(24, 16, 2, 0.62)); box-shadow: inset 0 1px 0 rgba(255, 233, 173, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35); }
.hub-wallet-row { display: flex; align-items: center; gap: 12px; }
.hub-wallet-count { font: 800 46px/1 var(--hub-display); color: #ffe9ad; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.hub-wallet-count small { font: 700 18px var(--hub-display); color: rgba(255, 233, 173, 0.55); letter-spacing: 0.06em; margin-left: 4px; }
.hub-wallet-count.is-bump { animation: hub-bump 0.4s cubic-bezier(0.2, 1.7, 0.4, 1); }
.hub-wallet-label { margin-left: auto; text-align: right; font: 700 13px/1.25 var(--hub-display); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 233, 173, 0.6); }
.hub-wallet-label b { display: block; font-size: 15px; letter-spacing: 0.1em; color: var(--hub-good); }
.hub-wallet-label b.is-none { color: rgba(255, 233, 173, 0.6); }
.hub-wallet-label [data-countdown] { color: rgba(255, 233, 173, 0.9); letter-spacing: 0.04em; }
.hub-wallet-bar { margin-top: 12px; height: 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 215, 94, 0.22); overflow: hidden; }
.hub-wallet-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #c98d14, #ffd75e); box-shadow: 0 0 14px rgba(255, 200, 60, 0.6); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hub-wallet-note { margin: 10px 0 0; font: 500 13.5px/1.45 var(--hub-body); color: rgba(255, 233, 173, 0.72); }
.hub-wallet-note b { color: #ffe9ad; font-weight: 700; }
.hub-wallet-card.is-plain { border-color: var(--hub-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); }
.hub-rival { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--hub-line); background: rgba(255, 255, 255, 0.04); cursor: pointer; text-align: left; font: 500 13px/1.35 var(--hub-body); color: var(--hub-dim); }
.hub-rival b { display: block; font: 700 14px var(--hub-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hub-text); }
.hub-rival i { position: relative; flex: 0 0 40px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); }
.hub-rival i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.hub-rival.is-on i { background: var(--hub-good); } .hub-rival.is-on i::after { left: 19px; }
.hub-rival:disabled { opacity: 0.6; cursor: default; }
.hub-rival:focus-visible { outline: 2px solid var(--hub-cyan); outline-offset: 2px; }
.hub-wallet-card.is-plain .hub-wallet-note { color: var(--hub-dim); margin-top: 0; font-size: 15px; }
.hub-wallet-card.is-plain .hub-wallet-note b { color: var(--hub-text); }
.hub-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 18px; border-radius: 13px; text-decoration: none;
    font: 800 19px var(--hub-display); letter-spacing: 0.1em; text-transform: uppercase; color: #04101f; background: linear-gradient(180deg, #8fe6ff, var(--hub-cyan) 55%, #1fa6d6); box-shadow: 0 10px 28px rgba(63, 208, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* the ice: js/arcade-coin-toss.js draws into .hub-stage */
.hub-stage-wrap { position: relative; margin: 0 -20px; }
.hub-stage { position: relative; height: 230px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 12%, #000 86%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 12%, #000 86%, transparent); mask-composite: intersect; }
.hub-stage-caption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 12px var(--hub-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hub-faint); pointer-events: none; }
.hub-toasts { position: absolute; left: 0; right: 0; top: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 2; }
.hub-toast { display: inline-flex; align-items: center; gap: 9px; max-width: calc(100% - 32px); padding: 6px 15px 6px 7px; border-radius: 99px; background: linear-gradient(180deg, #4a3406, #261a02); border: 1px solid rgba(255, 215, 94, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 190, 40, 0.25); font: 600 16px var(--hub-display); letter-spacing: 0.03em; color: #ffe9ad; animation: hub-toast-in 0.5s cubic-bezier(0.2, 1.5, 0.35, 1) both; }
.hub-toast b { font: 800 23px/1 var(--hub-display); color: #fff3c4; }
.hub-toast span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-toast.is-out { animation: hub-toast-out 0.3s ease-in both; }
.hub-coin { display: inline-block; flex: 0 0 auto; width: 32px; height: 32px; background: var(--ak-coin-img) center / 100% 100% no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; vertical-align: middle; }
.hub-coin[data-size="16"] { width: 16px; height: 16px; }
.hub-coin[data-size="48"] { width: 48px; height: 48px; }

/* ── sections ─────────────────────────────────────────────────── */
.hub-section { width: min(1180px, 100%); margin: 34px auto 0; }
.hub-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 20px; margin-bottom: 14px; }
.hub-section-head h2 { margin: 0; font: 800 30px/1 var(--hub-display); letter-spacing: 0.04em; text-transform: uppercase; transform: skewX(-8deg); transform-origin: 0 100%; }
.hub-swipe-hint { font: 700 12px var(--hub-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hub-faint); }

/* ── cabinets ─────────────────────────────────────────────────── */
.hub-cabs { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 310px); gap: 16px; padding: 6px 20px 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hub-cabs::-webkit-scrollbar { display: none; }
.hub-cab { --accent: var(--hub-cyan); --accent-ink: #04101f; position: relative; scroll-snap-align: center; display: flex; flex-direction: column; border-radius: 22px 22px 16px 16px; overflow: hidden;
    background: linear-gradient(180deg, #151e3a 0%, #0c1329 46%, #080d1d 100%); border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6) inset, 0 0 46px color-mix(in srgb, var(--accent) 16%, transparent); }
.hub-cab-marquee { position: relative; min-height: 66px; padding: 8px 12px; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, #05070f), #05070f 120%); border-bottom: 2px solid var(--accent); box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 30%, transparent); }
.hub-cab-marquee h3 { margin: 0; font: 800 31px/0.92 var(--hub-display); letter-spacing: 0.03em; text-transform: uppercase; transform: skewX(-8deg); color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 18px var(--accent), 0 0 38px var(--accent); }
.hub-cab-marquee h3 small { display: block; font-size: 0.4em; letter-spacing: 0.26em; color: color-mix(in srgb, var(--accent) 60%, #fff); text-shadow: none; margin-bottom: 3px; }
/* NEW! on the newest cabinet — a stuck-on sticker, angled against the marquee's skew so it reads as applied, not printed.
   It is the one thing on the floor allowed to move, so the eye lands there first. Kept fully INSIDE the cabinet: .hub-cab
   is overflow:hidden for its rounded corners, so a sticker hung off the edge gets its corner sliced off. */
.hub-cab-new { position: absolute; top: 7px; left: 7px; z-index: 3; padding: 4px 11px 5px; border-radius: 4px;
  font: 900 15px/1 var(--hub-display); letter-spacing: 0.08em; text-transform: uppercase; color: #2a1200; white-space: nowrap;
  background: linear-gradient(180deg, #ffe066, #ffab0f); border: 2px solid #2a1200;
  box-shadow: 0 3px 0 #2a1200, 0 6px 16px rgba(0, 0, 0, 0.55); transform: rotate(-11deg);
  animation: hub-new-pop 2.4s ease-in-out infinite; }
@keyframes hub-new-pop { 0%, 62%, 100% { transform: rotate(-11deg) scale(1); } 72% { transform: rotate(-11deg) scale(1.13); } 82% { transform: rotate(-11deg) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .hub-cab-new { animation: none; } }
.hub-cab-screen { position: relative; margin: 14px 14px 0; border-radius: 12px; border: 6px solid #04060c; aspect-ratio: 2 / 3; overflow: hidden; background: #02040a; box-shadow: 0 0 0 2px #1c2748, inset 0 0 40px #000; display: block; }
.hub-cab-screen img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) contrast(1.06); animation: hub-attract 14s ease-in-out infinite alternate; }
.hub-cab-screen::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.hub-cab-screen::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.13), transparent 28%), radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.6)); }
/* a cabinet that isn't plugged in yet: "Game 2", "Game 3" — no name, no picture, no link. Just static and a padlock. */
.hub-cab.is-locked { --accent: #8e9ab8; box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6) inset; }
.hub-cab.is-locked .hub-cab-marquee { background: linear-gradient(180deg, #1a2138, #05070f 120%); border-bottom-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.hub-cab.is-locked .hub-cab-marquee h3 { color: rgba(255, 255, 255, 0.5); text-shadow: none; }
.hub-cab.is-locked .hub-cab-marquee h3 small { color: rgba(255, 255, 255, 0.35); }
.hub-cab.is-locked .hub-cab-blurb { color: var(--hub-faint); }
.hub-cab-static { position: absolute; inset: 0; opacity: 0.42; background-color: #0a0f1f; background-size: 220px 220px; animation: hub-static 0.42s steps(5, end) infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.75  0 0 0 0 0.8  0 0 0 0 0.95  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hub-cab-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.82); }
.hub-cab-lock svg { width: 74px; height: 74px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(160, 180, 230, 0.35)); animation: hub-lock 3.2s ease-in-out infinite; }
.hub-cab-lock b { font: 800 22px var(--hub-display); letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; text-shadow: 0 2px 0 #000; }
.hub-play.is-off svg { width: 17px; height: 17px; opacity: 0.8; }
/* the line every cabinet flashes at you: what the next run costs */
.hub-cab-screen > .hub-cab-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, rgba(2, 4, 10, 0.86)); }
.hub-cab-insert { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; text-align: center; font: 800 17px var(--hub-display); letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.9); animation: hub-insert 1.25s steps(1, end) infinite; }
.hub-cab-insert.is-free { color: var(--hub-good); text-shadow: 0 2px 0 #000, 0 0 14px rgba(61, 255, 162, 0.7); }
.hub-cab-insert.is-coin { color: var(--hub-gold); text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 200, 60, 0.7); }
.hub-cab-insert .hub-coin { width: 16px; height: 16px; margin: -3px 5px 0 0; }
.hub-cab-body { padding: 13px 16px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; }
.hub-cab-blurb { margin: 0; font: 500 14.5px/1.4 var(--hub-body); color: var(--hub-dim); min-height: 2.8em; }
.hub-cab-me { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 11px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--hub-line); font: 700 13px var(--hub-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hub-faint); }
.hub-cab-me b { font: 800 21px var(--hub-display); letter-spacing: 0.02em; color: var(--hub-gold); font-variant-numeric: tabular-nums; }
.hub-cab-me em { font-style: normal; color: var(--hub-dim); }
.hub-play { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 15px; text-decoration: none; border: 0; cursor: pointer; width: 100%;
    font: 800 24px var(--hub-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 76%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18); transition: transform 0.12s ease, filter 0.2s ease; }
.hub-play:active { transform: scale(0.97); }
.hub-play svg { width: 18px; height: 18px; }
.hub-play.is-off { color: var(--hub-faint); background: rgba(255, 255, 255, 0.06); box-shadow: none; border: 1px solid var(--hub-line); cursor: default; }
.hub-board { list-style: none; margin: 0; padding: 0; border-radius: 12px; border: 1px solid var(--hub-line); overflow: hidden; background: rgba(0, 0, 0, 0.22); }
.hub-board-title { font: 700 12px var(--hub-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--hub-faint); margin: 2px 0 -4px; }
.hub-board li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font: 600 15px var(--hub-display); letter-spacing: 0.02em; }
.hub-board li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.hub-board .r { flex: 0 0 18px; font-weight: 800; color: var(--hub-faint); text-align: center; }
.hub-board li:nth-child(1) .r { color: #ffd166; } .hub-board li:nth-child(2) .r { color: #cfd8e6; } .hub-board li:nth-child(3) .r { color: #e0955a; }
.hub-board .n { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hub-text); text-decoration: none; }
.hub-board .s { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hub-text); }
.hub-board li.is-me { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* the weekly race: prize, leader, clock */
.hub-race { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px 12px; border-radius: 13px; border: 1px solid var(--hub-line); background: rgba(255, 255, 255, 0.04); }
.hub-race.has-prize { border-color: rgba(255, 215, 94, 0.38); background: linear-gradient(180deg, rgba(74, 52, 6, 0.5), rgba(24, 16, 2, 0.55)); box-shadow: inset 0 1px 0 rgba(255, 233, 173, 0.1), 0 0 30px rgba(255, 190, 40, 0.08); }
.hub-race-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 700 12px var(--hub-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hub-faint); }
.hub-race-top em { font-style: normal; letter-spacing: 0.12em; white-space: nowrap; }
[data-countdown] { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--hub-text); }
[data-countdown].is-close { color: var(--hub-red); }
.hub-race-prize { font: 700 15px var(--hub-display); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 233, 173, 0.75); }
.hub-soz { display: inline-block; image-rendering: pixelated; width: 1.15em; height: 1.15em; margin-right: 0.3em; vertical-align: -0.2em; object-fit: contain; }
.hub-race-prize { display: flex; align-items: baseline; gap: 8px; }
.hub-race-prize .hub-soz { width: 26px; height: 26px; margin-right: 0; align-self: center; filter: drop-shadow(0 0 10px rgba(255, 200, 60, 0.45)); }
.hub-race-prize b { font: 800 27px/1 var(--hub-display); letter-spacing: 0.02em; color: var(--hub-gold); text-shadow: 0 0 18px rgba(255, 200, 60, 0.45); }
.hub-race-lead { display: flex; align-items: center; gap: 8px; font: 700 18px var(--hub-display); letter-spacing: 0.02em; color: var(--hub-text); }
.hub-race-lead i { font-style: normal; font-size: 16px; }
.hub-race-lead .n { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-race-lead .n.is-open { color: var(--hub-dim); font-weight: 600; }
.hub-race-lead .s { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hub-gold); }
.hub-race-last { font: 500 12.5px var(--hub-body); color: var(--hub-faint); }
.hub-race-last b { color: var(--hub-dim); font-weight: 600; }
.hub-sheet-race { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: -4px 16px 10px; padding: 8px 12px; border-radius: 11px; border: 1px solid rgba(255, 215, 94, 0.3); background: rgba(74, 52, 6, 0.35); font: 700 13px var(--hub-display); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 233, 173, 0.75); }
.hub-sheet-race b { color: var(--hub-gold); } .hub-sheet-race em { font-style: normal; white-space: nowrap; } .hub-sheet-race em b { color: var(--hub-text); }
.hub-board-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-top: -3px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--hub-line); background: rgba(255, 255, 255, 0.045); cursor: pointer;
    font: 700 13px var(--hub-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hub-dim); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.hub-board-more:hover, .hub-board-more:focus-visible { color: var(--hub-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.hub-board-more span { color: var(--accent); }
.hub-board-empty { padding: 12px; text-align: center; font: 600 14px var(--hub-display); letter-spacing: 0.06em; color: var(--hub-faint); }
.hub-dots { display: flex; justify-content: center; gap: 8px; margin-top: -6px; }
.hub-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.2s, transform 0.2s; }
.hub-dots i.is-on { background: var(--hub-cyan); transform: scale(1.3); box-shadow: 0 0 10px var(--hub-cyan); }

/* ── how it works ─────────────────────────────────────────────── */
.hub-how { list-style: none; margin: 0; padding: 0 20px; display: grid; gap: 10px; counter-reset: how; }
.hub-how li { counter-increment: how; position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--hub-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); }
.hub-how .ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; background: rgba(255, 215, 94, 0.10); border: 1px solid rgba(255, 215, 94, 0.28); }
.hub-how h4 { margin: 0 0 3px; font: 800 20px/1.05 var(--hub-display); letter-spacing: 0.04em; text-transform: uppercase; }
.hub-how p { margin: 0; font: 500 14px/1.45 var(--hub-body); color: var(--hub-dim); }
.hub-how p b { color: var(--hub-text); font-weight: 700; }

@keyframes hub-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes hub-flicker { 0%, 40%, 43%, 46%, 100% { opacity: 1; } 41%, 45% { opacity: 0.25; } 71% { opacity: 1; } 72% { opacity: 0.4; } 73% { opacity: 1; } }
@keyframes hub-shimmer { to { background-position: -300% 0; } }
@keyframes hub-bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes hub-attract { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-2.5%); } }
@keyframes hub-insert { 0%, 100% { opacity: 1; } 62% { opacity: 0.15; } }
@keyframes hub-static { 0% { background-position: 0 0; } 20% { background-position: -37px 61px; } 40% { background-position: 83px -29px; } 60% { background-position: -71px -53px; } 80% { background-position: 41px 97px; } 100% { background-position: 0 0; } }
@keyframes hub-lock { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hub-toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes hub-toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.95); } }

/* ── wider screens: hero side by side; the cabinets go one row across, each capped so none is ever stretched ── */
@media (min-width: 900px) {
    .hub { padding-top: 26px; }
    .hub-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 36px; padding: 30px 32px 10px; }
    .hub-stage-wrap { margin: 0; }
    .hub-stage { height: 400px; }
    .hub-title { font-size: clamp(104px, 11.4vw, 164px); }
    .hub-section { margin-top: 46px; }
    .hub-section-head { padding: 0 32px; }
    .hub-section-head h2 { font-size: 36px; }
    .hub-swipe-hint, .hub-dots { display: none; }
    /* one row, one column per cabinet — tracks share the width but never exceed 420px, so the floor stays centred
       whether there are three cabinets or five, and nothing is squashed on a 900px laptop. */
    .hub-cabs { grid-auto-flow: row; grid-template-columns: repeat(var(--hub-cab-cols, 3), minmax(0, 420px)); grid-auto-columns: auto; justify-content: center; gap: 22px; padding: 6px 32px 10px; overflow: visible; }
    .hub-cab { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease; }
    .hub-cab.is-locked:hover { transform: none; box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6) inset; }
    .hub-cab:not(.is-locked):hover { transform: translateY(-6px); box-shadow: 0 34px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6) inset, 0 0 70px color-mix(in srgb, var(--accent) 30%, transparent); }
    .hub-how { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 32px; gap: 16px; }
    .hub-how li { flex-direction: column; gap: 12px; }
}
@media (min-width: 1240px) {
    .hub-cabs { gap: 26px; }
}
@media (max-width: 360px) {
    .hub-hero { padding-inline: 16px; }
    .hub-stage-wrap { margin: 0 -16px; }
    .hub-wallet-count { font-size: 40px; }
    .hub-wallet-label { font-size: 12px; letter-spacing: 0.1em; } .hub-wallet-label b { font-size: 13px; }
}
/* ── the full board: a bottom sheet on a phone, a centred panel on a desk ── */
html.hub-sheet-open { overflow: hidden; }
.hub-sheet { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; }
.hub-sheet-scrim { position: absolute; inset: 0; background: rgba(2, 5, 14, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: hub-sheet-fade 0.2s ease both; }
.hub-sheet-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: min(88vh, 88dvh); border-radius: 22px 22px 0 0; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--hub-panel)) 0%, var(--hub-panel) 140px); border: 1px solid var(--hub-line); border-bottom: 0;
    box-shadow: 0 -20px 70px rgba(0, 0, 0, 0.6), 0 0 80px color-mix(in srgb, var(--accent) 16%, transparent); padding-bottom: env(safe-area-inset-bottom); animation: hub-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hub-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 20px; }
.hub-sheet-head small { display: block; font: 700 12px var(--hub-display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.hub-sheet-head h3 { margin: 2px 0 0; font: 800 30px/1 var(--hub-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--hub-text); }
.hub-sheet-close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hub-line); background: rgba(255, 255, 255, 0.06); color: var(--hub-dim); font: 400 26px/1 var(--hub-body); cursor: pointer; }
.hub-sheet-close:hover, .hub-sheet-close:focus-visible { color: var(--hub-text); border-color: var(--accent); outline: none; }
.hub-sheet-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 2px 16px 12px; padding: 4px; border-radius: 13px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--hub-line); }
.hub-sheet-tabs button { min-height: 36px; border: 0; border-radius: 9px; background: none; cursor: pointer; font: 700 14px var(--hub-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hub-faint); }
.hub-sheet-tabs button.is-on { background: var(--accent); color: var(--accent-ink, #04101f); }
.hub-sheet-list { flex: 1 1 auto; min-height: 180px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; position: relative; }
.hub-board.is-full li { padding: 8px 12px; min-height: 46px; font-size: 17px; gap: 10px; }
.hub-board.is-full .r { flex-basis: 28px; font-variant-numeric: tabular-nums; }
.hub-board.is-full .a { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #24376f, #15224a); border: 1px solid rgba(255, 255, 255, 0.16); }
.hub-board.is-full .a i { font: 800 12px var(--hub-display); font-style: normal; color: var(--hub-dim); }
.hub-board.is-full .a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-board.is-full li.is-me { box-shadow: inset 3px 0 0 var(--accent); }
.hub-sheet-foot:empty { display: none; }
.hub-sheet-foot { display: flex; align-items: baseline; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--hub-line); background: color-mix(in srgb, var(--accent) 12%, var(--hub-panel)); font: 700 13px var(--hub-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hub-dim); }
.hub-sheet-foot b { font: 800 22px var(--hub-display); letter-spacing: 0.02em; color: var(--hub-text); }
.hub-sheet-foot em { font-style: normal; color: var(--hub-faint); }
.hub-sheet-foot strong { margin-left: auto; font: 800 22px var(--hub-display); letter-spacing: 0.02em; color: var(--hub-gold); font-variant-numeric: tabular-nums; }
@keyframes hub-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hub-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 700px) {
    .hub-sheet { align-items: center; padding: 24px; }
    .hub-sheet-panel { border-radius: 22px; border-bottom: 1px solid var(--hub-line); max-height: min(80vh, 760px); }
}
/* ── the coin shop ── */
.hub-shop-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; min-height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid rgba(255, 215, 94, 0.6); cursor: pointer;
    font: 800 17px var(--hub-display); letter-spacing: 0.12em; text-transform: uppercase; color: #231800; background: linear-gradient(180deg, #ffe39a, #ffd75e 55%, #d9a92c); box-shadow: 0 10px 28px rgba(255, 200, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.15); transition: transform 0.12s ease; }
.hub-shop-btn:active { transform: scale(0.97); }
.hub-shop-btn .hub-coin { width: 24px; height: 24px; }
.hub-shop-btn small { margin-left: auto; display: inline-flex; align-items: center; font: 700 12px var(--hub-display); letter-spacing: 0.1em; color: rgba(35, 24, 0, 0.7); }
.hub-shop-btn small .hub-soz { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.hub-shop-btn:disabled { color: var(--hub-faint); background: rgba(255, 255, 255, 0.06); border-color: var(--hub-line); box-shadow: none; cursor: default; }
.hub-shop-btn:disabled .hub-coin { opacity: 0.5; }
.hub-shop .hub-sheet-panel { --accent: var(--hub-gold); --accent-ink: #231800; }
.hub-shop-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.hub-shop-price { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font: 600 15px var(--hub-display); letter-spacing: 0.04em; color: var(--hub-dim); text-align: center; }
.hub-shop-price b { color: var(--hub-text); font-weight: 800; } .hub-shop-price .hub-coin { width: 20px; height: 20px; } .hub-shop-price .hub-soz { margin-right: 2px; }
.hub-shop-qty { position: relative; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; height: 150px; border-radius: 18px; border: 1px solid rgba(255, 215, 94, 0.3); background: radial-gradient(60% 80% at 50% 60%, rgba(255, 200, 60, 0.16), transparent 70%), rgba(0, 0, 0, 0.3); overflow: hidden; }
.hub-shop-qty > b { position: relative; z-index: 2; text-align: center; font: 800 76px/1 var(--hub-display); color: #ffe9ad; text-shadow: 0 0 30px rgba(255, 200, 60, 0.6), 0 4px 0 rgba(0, 0, 0, 0.4); font-variant-numeric: tabular-nums; pointer-events: none; }
.hub-shop-qty > button { z-index: 2; height: 100%; border: 0; background: rgba(255, 255, 255, 0.05); color: var(--hub-text); font: 300 44px/1 var(--hub-body); cursor: pointer; }
.hub-shop-qty > button:hover { background: rgba(255, 215, 94, 0.14); } .hub-shop-qty > button:disabled { color: var(--hub-faint); background: rgba(255, 255, 255, 0.02); cursor: default; }
.hub-shop-stack { position: absolute; inset: 0; z-index: 1; opacity: 0.35; background: var(--ak-coin-img) center 58% / 88px no-repeat; image-rendering: pixelated; filter: blur(0.5px); }
.hub-shop-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hub-shop-picks button { min-height: 38px; border-radius: 10px; border: 1px solid var(--hub-line); background: rgba(255, 255, 255, 0.05); color: var(--hub-dim); font: 700 15px var(--hub-display); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.hub-shop-picks button.is-on { border-color: var(--hub-gold); color: #231800; background: var(--hub-gold); }
.hub-shop-picks button:disabled { opacity: 0.35; cursor: default; }
.hub-shop-cost { display: flex; align-items: baseline; justify-content: center; gap: 6px; font: 700 18px var(--hub-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hub-dim); }
.hub-shop-cost b { font: 800 40px/1 var(--hub-display); color: #ff8c7a; text-shadow: 0 0 22px rgba(255, 90, 80, 0.45); font-variant-numeric: tabular-nums; }
.hub-shop-cost .hub-soz { width: 26px; height: 26px; align-self: center; }
.hub-shop-after { display: flex; justify-content: space-between; gap: 10px; font: 600 14px var(--hub-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hub-faint); }
.hub-shop-after b { color: var(--hub-text); } .hub-shop-after .hub-coin { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
.hub-shop-bar { position: relative; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 215, 94, 0.22); overflow: hidden; }
.hub-shop-bar i, .hub-shop-bar em { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width 0.25s ease; }
.hub-shop-bar i { background: repeating-linear-gradient(135deg, #ffd75e 0 6px, #c98d14 6px 12px); opacity: 0.85; }
.hub-shop-bar em { background: linear-gradient(90deg, #c98d14, #ffd75e); z-index: 1; }
.hub-shop-cap { margin-top: -6px; font: 600 12px var(--hub-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hub-faint); text-align: right; }
.hub-shop-buy { min-height: 56px; border-radius: 15px; border: 0; cursor: pointer; font: 800 22px var(--hub-display); letter-spacing: 0.08em; text-transform: uppercase; color: #231800;
    background: linear-gradient(180deg, #ffe39a, #ffd75e 55%, #d9a92c); box-shadow: 0 10px 30px rgba(255, 200, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.15); transition: transform 0.12s ease; }
.hub-shop-buy:active { transform: scale(0.97); }
.hub-shop-buy:disabled { color: var(--hub-faint); background: rgba(255, 255, 255, 0.06); box-shadow: none; border: 1px solid var(--hub-line); cursor: default; }
.hub-shop-why { min-height: 18px; text-align: center; font: 500 13px var(--hub-body); color: var(--hub-dim); }
/* the purchase lands */
.hub-wallet-card.is-cash { animation: hub-cash 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes hub-cash { 0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 233, 173, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35); } 30% { transform: scale(1.03); box-shadow: inset 0 1px 0 rgba(255, 233, 173, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 60px rgba(255, 200, 60, 0.55); } 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 233, 173, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35); } }
.hub-fly-soz { position: absolute; left: 50%; top: 45%; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: rgba(60, 8, 12, 0.9); border: 1px solid rgba(255, 120, 110, 0.7); font: 800 24px var(--hub-display); color: #ff9a8c; pointer-events: none; animation: hub-fly 1.4s ease-out both; }
.hub-fly-soz .hub-soz { width: 22px; height: 22px; margin: 0; }
@keyframes hub-fly { 0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -120px) scale(0.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hub-title .hub-flicker, .hub-kicker::before, .hub-cab-screen img, .hub-cab-insert, .hub-wallet-skeleton, .hub-cab-static, .hub-cab-lock svg { animation: none; }
    .hub-toast, .hub-sheet-panel, .hub-sheet-scrim, .hub-wallet-card.is-cash, .hub-fly-soz { animation: none; }
}