:root {
  --bg: #070a12;
  --bg-soft: #0d1220;
  --panel: #111827;
  --panel-raised: #151d2e;
  --text: #f4f6fb;
  --muted: #91a0b8;
  --muted-strong: #b8c2d4;
  --line: rgba(173, 192, 224, .18);
  --lime: #baff28;
  --violet: #985cff;
  --cyan: #43e6ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.45; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .13; background-image: radial-gradient(rgba(255,255,255,.4) .6px, transparent .6px); background-size: 5px 5px; mix-blend-mode: screen; z-index: 4; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.site-shell { min-height: 100vh; overflow: hidden; }
.topbar { height: 74px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--line); background: rgba(7,10,18,.9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 8; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .1em; font-size: 1.05rem; white-space: nowrap; }
.brand-mark { position: relative; display: inline-block; width: 22px; height: 22px; }
.brand-play { position: absolute; inset: 3px 6px 3px 1px; background: var(--lime); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 7px rgba(186,255,40,.45)); }
.brand-spark { position: absolute; right: -2px; top: -8px; color: var(--cyan); font-size: .85rem; }
.brand-divider { margin: 0 2px; color: var(--violet); }
.main-nav { display: flex; gap: 26px; height: 100%; align-items: center; }
.nav-link { position: relative; color: var(--muted); font-size: .86rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.nav-link:hover, .nav-link.is-active { color: var(--lime); }
.nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -27px; height: 3px; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.search-wrap { display: flex; align-items: center; gap: 9px; min-width: 210px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #11192a; }
.search-wrap span { font-size: 1.55rem; line-height: 0; transform: rotate(-20deg); }
.search-wrap input { min-width: 0; width: 100%; outline: none; border: 0; background: transparent; color: var(--text); font-size: .83rem; }
.search-wrap input::placeholder { color: #75839c; }
.android-button { height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cyan); border-radius: 8px; color: var(--cyan); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.android-button:hover { background: rgba(67,230,255,.12); }
.menu-button { display: none; border: 0; background: transparent; padding: 7px; }
.menu-button span { display: block; width: 24px; height: 2px; margin: 5px; background: var(--text); }
.view { width: min(1440px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 64px) 68px; }
.is-hidden { display: none !important; }
.hero-grid { min-height: 475px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, .95fr) minmax(220px, .58fr); grid-template-rows: 1fr auto; gap: 18px; align-items: stretch; padding-top: 42px; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 16px 0 24px; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 12px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; line-height: .92; }
.hero-copy h1 { max-width: 610px; margin: 0; font-size: clamp(4.4rem, 8vw, 8rem); letter-spacing: -.025em; }
.hero-copy h1 em { color: var(--lime); font-style: normal; text-shadow: 0 0 28px rgba(186,255,40,.18); }
.hero-lede { max-width: 430px; margin: 23px 0 27px; color: var(--muted-strong); font-size: 1rem; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 10px; cursor: pointer; font-size: .88rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { min-height: 51px; padding: 0 27px; background: var(--lime); color: #0a0e10; box-shadow: 0 12px 28px rgba(186,255,40,.14); }
.button-primary:hover { box-shadow: 0 14px 38px rgba(186,255,40,.3); }
.play-icon { font-size: .84rem; }
.text-link, .section-link { color: var(--text); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; border-bottom: 1px solid var(--violet); padding-bottom: 5px; }
.text-link:hover, .section-link:hover { color: var(--lime); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 42px; color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hero-proof span { display: inline-flex; gap: 7px; align-items: center; }
.hero-proof strong { color: var(--lime); font-size: 1.15rem; }
.hero-art { min-height: 340px; position: relative; overflow: hidden; border: 1px solid rgba(152,92,255,.35); border-radius: 12px; background: radial-gradient(circle at 60% 25%, #6121ae 0, #24103e 32%, #0c1020 72%); box-shadow: var(--shadow); }
.hero-art::before { content: ""; position: absolute; inset: 0; opacity: .38; background: linear-gradient(130deg, transparent 14%, rgba(67,230,255,.55) 14.4%, transparent 15%, transparent 64%, rgba(186,255,40,.35) 64.3%, transparent 65%), repeating-linear-gradient(170deg, transparent 0 30px, rgba(255,255,255,.08) 31px 32px); }
.art-glow { position: absolute; width: 240px; height: 240px; top: 40px; left: 38%; border-radius: 50%; background: #b044ff; filter: blur(60px); opacity: .5; }
.hero-orbit { position: absolute; border: 1px solid rgba(67,230,255,.58); border-radius: 50%; transform: rotate(-32deg); }
.orbit-one { width: 410px; height: 124px; top: 126px; left: -36px; }
.orbit-two { width: 470px; height: 210px; top: 75px; left: -20px; border-color: rgba(186,255,40,.4); }
.hero-rider { position: absolute; width: 100px; height: 170px; left: 49%; top: 88px; transform: rotate(17deg); filter: drop-shadow(0 0 18px rgba(186,255,40,.45)); }
.rider-helmet { position: absolute; width: 42px; height: 42px; left: 32px; top: 5px; border-radius: 45% 45% 40% 40%; background: #141829; border: 7px solid var(--lime); }
.rider-body { position: absolute; width: 30px; height: 92px; left: 38px; top: 40px; border-radius: 18px; background: linear-gradient(135deg, #11182c, #4b19a3); transform: rotate(-30deg); }
.rider-board { position: absolute; width: 112px; height: 10px; left: 4px; top: 144px; border-radius: 80%; background: var(--lime); box-shadow: 0 0 18px var(--lime); transform: rotate(-7deg); }
.hero-spark { position: absolute; color: var(--lime); font-size: 1.6rem; }
.spark-one { top: 33px; right: 34px; }.spark-two { bottom: 40px; left: 28px; color: var(--cyan); }
.hero-art-label { position: absolute; top: 22px; left: 23px; padding: 7px 11px; background: var(--lime); color: #0a0e10; font-family: var(--display); font-size: 1.2rem; line-height: .82; transform: rotate(-5deg); }
.hero-art-caption { position: absolute; right: 20px; bottom: 16px; color: var(--muted); font-size: .62rem; letter-spacing: .14em; }
.hero-art-ui { position: absolute; right: 21px; bottom: 33px; z-index: 2; display: grid; gap: 5px; max-width: 185px; padding: 13px 15px; border-left: 2px solid var(--lime); background: rgba(7,10,18,.72); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.hero-art-ui strong { font-family: var(--display); font-size: 2.15rem; line-height: .84; letter-spacing: .02em; }
.hero-art-ui span:last-child { color: var(--muted-strong); font-size: .67rem; }
.hero-art-kicker { color: var(--lime); font-size: .57rem; font-weight: 800; letter-spacing: .1em; }
.sprint-panel { min-height: 340px; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(186,255,40,.34); border-radius: 12px; background: linear-gradient(155deg, rgba(27,41,38,.98), rgba(12,24,29,.98) 58%, rgba(15,17,35,.98)); box-shadow: var(--shadow); }
.sprint-panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.sprint-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: var(--lime); color: #09100c; font-size: 1.1rem; box-shadow: 0 0 24px rgba(186,255,40,.22); }
.sprint-live { color: var(--lime); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sprint-panel .eyebrow { margin-bottom: 6px; }
.sprint-panel h2 { margin: 0 0 10px; font-size: clamp(2.4rem, 4vw, 3.5rem); }
.sprint-panel > p:not(.eyebrow) { min-height: 48px; margin-bottom: 22px; color: var(--muted-strong); font-size: .82rem; }
.sprint-stats { display: grid; grid-template-columns: 1fr; gap: 11px; margin-bottom: auto; }
.sprint-stats span { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid rgba(173,192,224,.16); }
.sprint-stats small { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sprint-stats strong { font-size: .78rem; }
.button-secondary { min-height: 44px; margin-top: 21px; padding: 0 16px; border: 1px solid rgba(67,230,255,.56); background: rgba(67,230,255,.08); color: var(--cyan); font-size: .72rem; }
.button-secondary:hover { background: var(--cyan); color: #071018; box-shadow: 0 10px 25px rgba(67,230,255,.18); }
.ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed rgba(165,184,218,.4); color: #71819e; background: rgba(19,29,47,.6); border-radius: 7px; text-align: center; text-transform: uppercase; }
.hero-ad { min-height: 76px; margin: 0; grid-column: 1 / -1; grid-row: 2; }
.ad-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; }.ad-size { margin-top: 7px; font-size: .63rem; }.ad-copy { margin-top: 9px; font-size: .58rem; color: #53627c; }
.catalog-section { padding-top: 56px; }.compact-section { padding-top: 44px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }.section-heading .eyebrow { margin-bottom: 5px; }.section-heading h2, .page-heading h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.5rem); }.section-link { margin-bottom: 5px; color: var(--muted-strong); }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }.game-grid-featured { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.game-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: linear-gradient(150deg, rgba(20,29,47,.98), rgba(11,15,26,.98)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }.game-card:hover { transform: translateY(-5px); border-color: rgba(186,255,40,.5); box-shadow: 0 18px 40px rgba(0,0,0,.22); }.game-card-link { display: block; height: 100%; }.game-card-body { padding: 14px; }.game-card h3 { margin: 9px 0 4px; font-size: 1.7rem; letter-spacing: .03em; }.game-card p { min-height: 21px; margin-bottom: 14px; color: var(--muted); font-size: .74rem; }.game-card .button-card { width: 100%; min-height: 40px; padding: 0 10px; background: var(--violet); color: white; font-size: .71rem; }.game-card:nth-child(odd) .button-card { background: var(--lime); color: #0a0e10; }
.game-art { position: relative; height: 152px; overflow: hidden; background: #19243b; }.game-art::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(5,9,15,.7)); }.game-art.mini { width: 72px; height: 48px; flex: 0 0 72px; border-radius: 6px; }.game-art.mini::after { height: 100%; background: linear-gradient(90deg, transparent, rgba(5,9,15,.25)); }.art-noise { position: absolute; inset: 0; opacity: .33; background: radial-gradient(circle at 20% 30%, white 1px, transparent 1.5px), radial-gradient(circle at 70% 20%, white 1px, transparent 1.5px), radial-gradient(circle at 40% 70%, white 1px, transparent 1.5px); background-size: 52px 44px, 73px 61px, 46px 75px; }
.art-racing { background: linear-gradient(145deg, #082c4a, #3b0a71 58%, #f82fbb); }.art-racing::before { content: ""; position: absolute; width: 140%; height: 50%; left: -20%; bottom: 7%; transform: rotate(-9deg); background: repeating-linear-gradient(160deg, rgba(67,230,255,.85) 0 2px, transparent 2px 16px); opacity: .75; }.art-space { background: radial-gradient(circle at 72% 35%, #b5e9ff 0 10%, #334e9a 12% 25%, transparent 26%), linear-gradient(140deg, #061e4a, #321174 80%); }.art-pixel { background: linear-gradient(135deg, #182a42, #b24224); }.art-stealth { background: linear-gradient(150deg, #101b36, #265387 55%, #0c121b); }.art-action { background: linear-gradient(145deg, #61223e, #ed4059 60%, #ffcf7b); }.art-puzzle { background: linear-gradient(145deg, #102f5e, #641fb5 60%, #2de6d8); }
.motif-car { position: absolute; z-index: 2; left: 22%; top: 46%; font-size: 4.3rem; color: #f536e7; text-shadow: 12px 10px 0 #1aebff, 0 0 14px white; transform: rotate(-8deg); }.motif-road { position: absolute; width: 130%; height: 18px; left: -10%; bottom: 24%; transform: rotate(-9deg); background: rgba(3,8,18,.72); border-top: 2px solid var(--cyan); }.motif-sun { position: absolute; width: 78px; height: 78px; right: 16%; top: 17%; border-radius: 50%; background: #ffaf70; box-shadow: 0 0 28px #f82fbb; opacity: .8; }.motif-planet { position: absolute; width: 72px; height: 72px; right: 17%; top: 15%; border-radius: 50%; background: linear-gradient(135deg, #ddeeff, #667cf8 70%); box-shadow: 0 0 25px #6ef4ff; }.motif-ship { position: absolute; z-index: 2; left: 38%; top: 38%; color: #baff28; font-size: 3rem; filter: drop-shadow(0 0 12px #42eaff); transform: rotate(-25deg); }.motif-stars { position: absolute; left: 16%; top: 18%; color: #d9dcff; letter-spacing: 12px; }.motif-pixel-grid { position: absolute; left: 22%; top: 22%; display: grid; grid-template-columns: repeat(3, 26px); gap: 6px; }.motif-pixel-grid i { width: 26px; height: 26px; border-radius: 5px; background: #31d9ff; box-shadow: 0 0 12px #31d9ff; }.motif-pixel-grid i:nth-child(2), .motif-pixel-grid i:nth-child(5) { background: #ffb52e; box-shadow: 0 0 12px #ffb52e; }.motif-pixel-grid i:nth-child(3), .motif-pixel-grid i:nth-child(6) { background: #f64b45; box-shadow: 0 0 12px #f64b45; }.motif-blast { position: absolute; right: 18%; top: 20%; color: #fff3a6; font-size: 4rem; }.motif-moon { position: absolute; right: 18%; top: 15%; width: 78px; height: 78px; border-radius: 50%; background: #b9d1f8; box-shadow: 0 0 24px rgba(193,222,255,.7); }.motif-city { position: absolute; inset: auto 15% 0 12%; height: 55%; background: repeating-linear-gradient(90deg, #0a1425 0 18px, transparent 18px 24px), linear-gradient(#142744, #060b13); clip-path: polygon(0 22%, 15% 22%, 15% 6%, 24% 6%, 24% 32%, 42% 32%, 42% 0, 54% 0, 54% 18%, 68% 18%, 68% 10%, 80% 10%, 80% 28%, 100% 28%, 100% 100%, 0 100%); }.motif-shadow { position: absolute; z-index: 2; left: 40%; top: 31%; color: #080c15; font-size: 5rem; transform: rotate(15deg); }.motif-blade { position: absolute; z-index: 2; left: 43%; top: 22%; color: #f6f3cf; font-size: 7.2rem; transform: rotate(22deg); text-shadow: 0 0 22px #ffe17d; }.motif-action-grid { position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.2) 28px 29px), repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.2) 28px 29px); }.motif-gems { display: grid; grid-template-columns: repeat(3, 38px); gap: 8px; position: absolute; left: 22%; top: 22%; }.motif-gems i { width: 38px; height: 38px; background: #41e9ef; clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%); box-shadow: 0 0 20px #41e9ef; }.motif-gems i:nth-child(2), .motif-gems i:nth-child(5) { background: #ff468c; box-shadow: 0 0 20px #ff468c; }.motif-gems i:nth-child(3), .motif-gems i:nth-child(4) { background: #f7d233; box-shadow: 0 0 20px #f7d233; }
.card-meta { display: flex; align-items: center; gap: 7px; min-height: 18px; }.tag, .new-tag { display: inline-flex; padding: 3px 7px; border: 1px solid currentColor; border-radius: 5px; color: var(--muted-strong); font-size: .61rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.tag-lime { color: var(--lime); }.tag-violet { color: #b58aff; }.tag-cyan { color: var(--cyan); }.new-tag { border: 0; background: rgba(186,255,40,.14); color: var(--lime); }
.android-banner { min-height: 146px; margin-top: 50px; padding: 23px 30px; display: flex; align-items: center; gap: 27px; border: 1px solid rgba(67,230,255,.2); border-radius: 12px; background: linear-gradient(110deg, #0d232e, #12213b 58%, #1d1237); }.android-banner h2 { margin: 0 0 4px; font-size: 2.3rem; }.android-banner p:not(.eyebrow) { max-width: 500px; margin: 0; color: var(--muted); font-size: .86rem; }.android-device { width: 70px; height: 101px; padding: 6px; flex: 0 0 auto; border: 3px solid #222c42; border-radius: 15px; transform: rotate(-10deg); background: #07101e; box-shadow: 0 10px 25px rgba(0,0,0,.24); }.android-screen { display: grid; place-items: center; height: 100%; border-radius: 10px; background: #65d92d; color: #0b2810; font-size: 2.2rem; }.qr-panel { margin-left: auto; display: flex; align-items: center; gap: 13px; }.qr-panel img { width: 82px; height: 82px; padding: 5px; border-radius: 8px; background: white; }.qr-panel span { max-width: 72px; color: var(--text); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 55px 0 24px; }.filter-row { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }.filter-button { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .76rem; font-weight: 700; }.filter-button:hover, .filter-button.is-selected { border-color: var(--lime); color: var(--lime); background: rgba(186,255,40,.08); }.empty-state, .load-error { padding: 38px 0; color: var(--muted); }
.player-breadcrumb { display: flex; gap: 9px; padding: 38px 0 23px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }.player-breadcrumb a:hover { color: var(--lime); }.player-breadcrumb strong { color: var(--text); }.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }.player-heading { display: flex; align-items: start; justify-content: space-between; }.player-heading h1 { margin: 0; font-size: clamp(3rem, 6vw, 5.2rem); }.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }.icon-button:hover { color: var(--lime); border-color: var(--lime); }.player-ad { height: 74px; margin: 22px 0 13px; }.player-ad .ad-size { display: none; }.game-stage { min-height: 510px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(67,230,255,.34); border-radius: 12px; background: radial-gradient(circle at 68% 34%, rgba(210,49,211,.7), transparent 26%), linear-gradient(145deg, #071a39, #0a1630 42%, #41145d 74%, #e33a92); box-shadow: var(--shadow); }.stage-grid { position: absolute; inset: 0; opacity: .5; background: linear-gradient(transparent 96%, rgba(67,230,255,.5) 97%), linear-gradient(90deg, transparent 96%, rgba(67,230,255,.4) 97%); background-size: 44px 44px; transform: perspective(400px) rotateX(58deg) scale(1.5) translateY(20%); transform-origin: center bottom; }.stage-lines { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 45%, rgba(67,230,255,.45) 45.2%, transparent 45.8%), linear-gradient(68deg, transparent 60%, rgba(186,255,40,.5) 60.2%, transparent 61%); }.stage-copy { position: relative; z-index: 2; margin-top: -80px; text-align: center; text-shadow: 0 4px 20px rgba(0,0,0,.4); }.stage-copy p { margin: 0 0 8px; color: rgba(255,255,255,.72); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; }.stage-copy h2 { margin: 0 0 10px; font-size: clamp(3.6rem, 8vw, 7rem); letter-spacing: .02em; }.stage-copy p:last-child { max-width: 400px; margin: auto; font-size: .85rem; text-transform: none; letter-spacing: 0; }.stage-play { position: absolute; z-index: 3; bottom: 95px; min-width: 190px; }.stage-status { position: absolute; z-index: 2; bottom: 49px; color: rgba(255,255,255,.65); font-size: .72rem; }.stage-badge { position: absolute; z-index: 2; left: 18px; top: 18px; padding: 7px 10px; border: 1px solid rgba(186,255,40,.5); border-radius: 7px; color: var(--lime); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.game-stage.is-playing::after { content: "DEMO PLAYING"; position: absolute; inset: 17px 18px auto auto; padding: 7px 10px; border-radius: 7px; background: rgba(186,255,40,.9); color: #081006; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }.loading-ring { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.28); border-top-color: #0a0e10; border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.player-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 5px; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }.player-toolbar div { display: flex; gap: 18px; }.player-toolbar button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }.player-toolbar button:hover { color: var(--lime); }
.game-guide { margin: 4px 0 2px; padding: 20px; border: 1px solid rgba(67,230,255,.2); border-radius: 12px; background: linear-gradient(145deg, rgba(17,24,39,.98), rgba(13,18,32,.98)); }.guide-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 17px; }.guide-heading .eyebrow { margin-bottom: 3px; }.guide-heading h2 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: .02em; text-transform: uppercase; }.guide-badge { padding: 7px 9px; border: 1px solid rgba(186,255,40,.35); border-radius: 999px; color: var(--lime); font-size: .62rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; white-space: nowrap; }.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.guide-item { min-height: 90px; padding: 13px; border: 1px solid rgba(173,192,224,.12); border-radius: 9px; background: rgba(7,10,18,.42); }.guide-label { display: block; margin-bottom: 7px; color: var(--cyan); font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.guide-item p { margin: 0; color: var(--muted-strong); font-size: .78rem; line-height: 1.5; }
.player-aside { display: flex; flex-direction: column; gap: 16px; }.download-card, .related-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.download-card { display: flex; align-items: center; gap: 14px; justify-content: space-between; }.download-card h2, .related-card h2 { margin: 0 0 8px; font-size: 1.8rem; }.download-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .82rem; }.download-card img { width: 93px; height: 93px; padding: 5px; flex: 0 0 auto; border-radius: 8px; background: white; }.aside-heading { margin-bottom: 12px; }.aside-heading .eyebrow { margin-bottom: 4px; }.related-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }.related-item:hover strong { color: var(--lime); }.related-item strong { display: block; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }.related-item small { color: var(--muted); font-size: .67rem; text-transform: uppercase; }.related-arrow { margin-left: auto; color: var(--violet); font-size: 1.3rem; }.footer { width: min(1440px, 100%); margin: 0 auto; padding: 22px clamp(18px, 4vw, 64px) 34px; display: flex; justify-content: space-between; gap: 20px; color: #62708a; border-top: 1px solid var(--line); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1100px) { .topbar { gap: 24px; }.main-nav { gap: 18px; }.game-grid-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }.hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }.sprint-panel { grid-column: 1 / -1; min-height: 240px; }.sprint-stats { grid-template-columns: 1fr 1fr; gap: 18px; }.hero-ad { grid-column: 1 / -1; grid-row: 3; min-height: 76px; margin: 0; }.hero-art { min-height: 360px; }.player-layout { grid-template-columns: 1fr; }.player-aside { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .topbar { height: 66px; padding: 0 18px; }.main-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; height: auto; padding: 16px 18px 20px; flex-direction: column; align-items: start; gap: 15px; border-bottom: 1px solid var(--line); background: rgba(7,10,18,.97); }.main-nav.is-open { display: flex; }.nav-link.is-active::after { display: none; }.topbar-actions { gap: 7px; }.search-wrap { min-width: 0; width: 40px; padding: 0 11px; border: 0; background: transparent; }.search-wrap input { display: none; }.android-button { display: none; }.menu-button { display: block; }.view { padding-left: 18px; padding-right: 18px; }.hero-grid { display: flex; flex-direction: column; gap: 16px; padding-top: 30px; }.hero-copy { padding-top: 12px; }.hero-copy h1 { font-size: clamp(4.25rem, 18vw, 6rem); }.hero-lede { margin: 18px 0 23px; }.hero-proof { margin-top: 28px; gap: 11px 18px; font-size: .65rem; }.hero-art { order: -1; min-height: 235px; }.hero-art-ui { right: 14px; bottom: 25px; max-width: 160px; padding: 10px 12px; }.hero-art-ui strong { font-size: 1.8rem; }.hero-rider { top: 46px; }.sprint-panel { order: 2; min-height: 255px; }.sprint-panel-top { margin-bottom: 22px; }.sprint-stats { grid-template-columns: 1fr 1fr; }.hero-ad { order: 3; min-height: 68px; }.catalog-section { padding-top: 40px; }.section-heading { align-items: start; flex-direction: column; gap: 9px; }.section-heading .section-link { align-self: flex-start; }.game-grid, .game-grid-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.game-art { height: 118px; }.game-card-body { padding: 10px; }.game-card h3 { font-size: 1.4rem; }.game-card p { font-size: .67rem; }.game-card .button-card { min-height: 38px; font-size: .64rem; }.android-banner { align-items: start; padding: 20px 17px; gap: 15px; }.android-device { display: none; }.android-banner h2 { font-size: 2rem; }.android-banner p:not(.eyebrow) { font-size: .75rem; }.qr-panel { flex-direction: column; gap: 6px; }.qr-panel img { width: 68px; height: 68px; }.qr-panel span { max-width: 68px; font-size: .55rem; }.page-heading { align-items: start; flex-direction: column; padding-top: 36px; }.filter-row { justify-content: start; }.player-breadcrumb { padding-top: 28px; font-size: .66rem; }.player-layout { display: block; }.player-aside { display: flex; margin-top: 14px; }.game-stage { min-height: 420px; }.stage-copy h2 { font-size: 4rem; }.player-toolbar { align-items: start; flex-direction: column; gap: 11px; }.player-toolbar div { flex-wrap: wrap; gap: 12px; }.guide-grid { grid-template-columns: 1fr; gap: 8px; }.guide-item { min-height: auto; }.guide-heading h2 { font-size: 1.8rem; }.guide-badge { font-size: .56rem; }.footer { flex-direction: column; padding-top: 18px; font-size: .6rem; } }
@media (max-width: 430px) { .game-card h3 { font-size: 1.2rem; }.game-card p { min-height: 36px; }.hero-actions { align-items: start; flex-direction: column; gap: 15px; }.hero-proof span:nth-child(3) { display: none; }.player-heading h1 { font-size: 3rem; }.download-card img { width: 75px; height: 75px; } }
.game-embed { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; border: 0; background: #05070c; }
.pixi-mount { position: absolute; inset: 0; z-index: 7; overflow: hidden; opacity: 0; pointer-events: none; }
.pixi-mount canvas { display: block; width: 100%; height: 100%; }
.game-stage.is-live .pixi-mount { opacity: 1; pointer-events: auto; }
.game-stage.is-live .stage-grid, .game-stage.is-live .stage-lines, .game-stage.is-live .stage-copy, .game-stage.is-live .stage-play, .game-stage.is-live .stage-status, .game-stage.is-live .stage-badge { opacity: 0; pointer-events: none; }
.game-stage.is-loading .stage-play { opacity: .7; pointer-events: none; }
.game-stage:fullscreen { min-height: 100vh; border-radius: 0; }
.game-stage:fullscreen .pixi-mount { position: fixed; }
.player-main:fullscreen { min-height: 100vh; overflow: auto; padding: 24px; background: var(--bg); }
.player-main:fullscreen .game-stage { min-height: calc(100vh - 300px); }
.game-stage:focus-visible, .game-stage button:focus-visible, .game-stage canvas:focus-visible, .player-toolbar button:focus-visible, .button:focus-visible, .filter-button:focus-visible, .game-card-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ad-slot[data-ad-state="requested"] .ad-copy { display: none; }
.ad-slot[data-ad-state="fallback"] { border-style: solid; border-color: rgba(67,230,255,.28); background: linear-gradient(110deg, rgba(14,35,47,.82), rgba(29,18,55,.82)); }
.ad-slot[data-ad-state="fallback"] .ad-copy { max-width: 260px; margin: 7px 14px 10px; color: var(--muted-strong); font-size: .67rem; line-height: 1.35; text-transform: none; }
.ad-cta { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ad-cta:hover { color: var(--cyan); }
.ad-slot[data-ad-viewable="true"] { border-color: rgba(186,255,40,.32); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }