:root { color-scheme: dark; --bg:#050506; --surface:#111114; --surface-2:#19191d; --text:#f7f7f8; --muted:#aaaab3; --line:rgba(255,255,255,.11); --green:#b8ff36; --pink:#ff3f86; --yellow:#ffe443; --cyan:#50e3ff; --purple:#9c7cff; --max:1180px; --radius-xl:36px; --radius-lg:26px; --radius-md:18px; --shadow:0 24px 80px rgba(0,0,0,.42); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
body::selection { background:var(--green); color:#080808; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--green); }
img { display:block; max-width:100%; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.skip-link { position:fixed; z-index:1000; top:12px; left:12px; transform:translateY(-160%); padding:10px 14px; border-radius:999px; background:var(--text); color:#000; font-weight:700; }
.skip-link:focus { transform:translateY(0); }
.container { width:min(calc(100% - 40px),var(--max)); margin:0 auto; }
.site-header { position:sticky; z-index:100; top:0; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(5,5,6,.78); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); }
.nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:18px; font-weight:760; letter-spacing:-.02em; }
.brand-icon { width:40px; height:40px; border-radius:11px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.35); }
.nav-links { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650; color:#c7c7ce; }
.nav-links a { padding:9px 13px; border-radius:999px; }
.nav-links a:hover,.nav-links a[aria-current="page"] { background:var(--surface-2); color:var(--text); }
.hero { position:relative; overflow:hidden; padding:92px 0 74px; }
.hero::before { content:""; position:absolute; width:680px; height:680px; right:-260px; top:-300px; border-radius:50%; background:radial-gradient(circle,rgba(184,255,54,.18),rgba(184,255,54,0) 68%); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:76px; align-items:center; }
.eyebrow { margin:0 0 18px; color:var(--green); font-size:14px; font-weight:760; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width:760px; margin-bottom:24px; font-size:clamp(58px,8.2vw,108px); line-height:.91; letter-spacing:-.075em; }
.hero h1 span { display:block; color:var(--green); }
.hero-copy { max-width:650px; margin-bottom:30px; color:#bdbdc5; font-size:clamp(19px,2vw,23px); line-height:1.5; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.button { min-height:50px; padding:13px 20px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:999px; font-weight:730; }
.button-primary { background:var(--green); color:#070707; }
.button-primary:hover { background:#cbff6e; color:#070707; }
.button-secondary { border-color:var(--line); background:var(--surface); color:var(--text); }
.trust-row { display:flex; flex-wrap:wrap; gap:8px; }
.trust-chip { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:#c9c9d0; font-size:13px; font-weight:650; }
.arcade-stage { position:relative; min-height:590px; display:grid; place-items:center; }
.glow-ring { position:absolute; width:440px; height:440px; border:1px solid rgba(184,255,54,.35); border-radius:50%; box-shadow:0 0 90px rgba(184,255,54,.14),inset 0 0 80px rgba(184,255,54,.07); }
.watch-card { position:relative; z-index:2; width:min(360px,86vw); aspect-ratio:.84; padding:17px; border:1px solid rgba(255,255,255,.22); border-radius:78px; background:linear-gradient(145deg,#2c2c31,#09090b 48%,#2a2a2e); box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.07); transform:rotate(4deg); }
.watch-card::after { content:""; position:absolute; top:122px; right:-13px; width:12px; height:62px; border-radius:0 9px 9px 0; background:#303034; box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.watch-screen { height:100%; padding:28px 24px 24px; overflow:hidden; border-radius:62px; background:radial-gradient(circle at 70% 10%,rgba(80,227,255,.14),transparent 36%),#020203; }
.screen-top,.screen-bottom { display:flex; align-items:center; justify-content:space-between; }
.screen-label,.screen-time { font-size:13px; font-weight:720; }
.screen-label { color:#b9b9c0; }
.screen-score { margin:52px 0 7px; font-size:76px; font-weight:820; line-height:.9; letter-spacing:-.07em; }
.screen-score span { color:var(--yellow); }
.screen-subtitle { color:#aaaab2; font-size:15px; }
.pong-field { position:relative; height:158px; margin:34px 0 24px; border-top:1px dashed rgba(255,255,255,.18); border-bottom:1px dashed rgba(255,255,255,.18); }
.pong-field::before,.pong-field::after { content:""; position:absolute; top:52px; width:8px; height:52px; border-radius:999px; }
.pong-field::before { left:8px; background:var(--green); } .pong-field::after { right:8px; background:var(--pink); }
.ball { position:absolute; top:46%; left:62%; width:15px; height:15px; border-radius:50%; background:var(--text); box-shadow:0 0 20px rgba(255,255,255,.8); }
.screen-bottom { padding:13px 15px; border-radius:18px; background:#17171a; font-size:13px; font-weight:700; }
.crown-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(184,255,54,.7); }
.section { padding:104px 0; }
.section-soft { border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background:#09090b; }
.section-heading { max-width:780px; margin-bottom:52px; }
.section-heading h2 { margin-bottom:18px; font-size:clamp(42px,5.7vw,72px); line-height:.98; letter-spacing:-.055em; }
.section-heading p { color:var(--muted); font-size:19px; }
.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.game-card { min-height:210px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); transition:transform 180ms ease,border-color 180ms ease; }
.game-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.25); }
.game-card:nth-child(1),.game-card:nth-child(6),.game-card:nth-child(11){grid-column:span 2}
.game-number { color:var(--muted); font-size:13px; font-weight:720; }
.game-card h3 { margin-bottom:6px; font-size:24px; letter-spacing:-.035em; }
.game-card p { margin-bottom:0; color:var(--muted); font-size:15px; }
.game-card:nth-child(4n + 1) h3{color:var(--green)} .game-card:nth-child(4n + 2) h3{color:var(--pink)} .game-card:nth-child(4n + 3) h3{color:var(--cyan)} .game-card:nth-child(4n + 4) h3{color:var(--yellow)}
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.feature-card { min-height:360px; padding:clamp(28px,4vw,48px); overflow:hidden; position:relative; border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); }
.feature-card.large { grid-column:1/-1; min-height:430px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.feature-kicker { color:var(--green); font-size:13px; font-weight:780; letter-spacing:.12em; text-transform:uppercase; }
.feature-card h3 { max-width:540px; margin:14px 0 12px; font-size:clamp(32px,4.2vw,54px); line-height:1.02; letter-spacing:-.05em; }
.feature-card p { max-width:580px; color:var(--muted); }
.challenge-list { display:grid; gap:12px; }
.challenge-item { padding:16px 18px; display:flex; justify-content:space-between; gap:18px; border-radius:18px; background:var(--surface-2); font-weight:700; }
.challenge-item span:last-child { color:var(--green); }
.mini-display { min-height:210px; padding:27px; display:flex; flex-direction:column; justify-content:space-between; border-radius:28px; background:linear-gradient(145deg,#26262b,#101012); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.display-route { display:flex; align-items:center; justify-content:center; gap:16px; font-size:14px; font-weight:740; }
.route-node { padding:12px 16px; border:1px solid var(--line); border-radius:15px; background:#0d0d0f; }
.route-line { flex:1; height:2px; background:linear-gradient(90deg,var(--green),var(--cyan)); }
.feature-note { font-size:13px; color:#888891; }
.privacy-band { padding:56px; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; border-radius:var(--radius-xl); background:var(--green); color:#090909; }
.privacy-band h2 { margin-bottom:12px; font-size:clamp(40px,5vw,64px); line-height:.98; letter-spacing:-.055em; }
.privacy-band p { margin-bottom:0; color:rgba(0,0,0,.7); font-weight:560; }
.privacy-points { display:grid; gap:10px; }
.privacy-point { padding:12px 15px; border:1px solid rgba(0,0,0,.15); border-radius:14px; background:rgba(255,255,255,.33); font-size:14px; font-weight:720; }
.support-card { padding:54px; display:flex; align-items:center; justify-content:space-between; gap:36px; border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); }
.support-card h2 { margin-bottom:8px; font-size:clamp(36px,5vw,58px); line-height:1; letter-spacing:-.05em; }
.support-card p { margin-bottom:0; color:var(--muted); }
.site-footer { padding:34px 0 48px; border-top:1px solid var(--line); color:#8f8f98; font-size:13px; }
.footer-row { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.legal-page { background:#09090b; }
.legal-hero { padding:78px 0 38px; }
.legal-hero h1 { max-width:850px; margin-bottom:16px; font-size:clamp(48px,7vw,84px); line-height:.96; letter-spacing:-.06em; }
.legal-intro { max-width:780px; color:var(--muted); font-size:19px; }
.legal-meta { margin-top:24px; display:flex; flex-wrap:wrap; gap:9px; }
.legal-meta span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:#c7c7ce; font-size:12px; font-weight:700; }
.legal-layout { padding:28px 0 110px; display:grid; grid-template-columns:260px minmax(0,790px); gap:70px; align-items:start; }
.legal-toc { position:sticky; top:104px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.legal-toc strong { display:block; margin-bottom:10px; color:#e2e2e7; font-size:13px; }
.legal-toc a { padding:7px 8px; display:block; border-radius:9px; color:#9e9ea7; font-size:13px; line-height:1.35; }
.legal-toc a:hover { background:var(--surface-2); color:var(--text); }
.legal-content { min-width:0; }
.legal-summary { margin-bottom:44px; padding:26px; border:1px solid rgba(184,255,54,.28); border-radius:var(--radius-lg); background:rgba(184,255,54,.07); }
.legal-summary h2 { margin-bottom:8px; color:var(--green); font-size:21px; }
.legal-summary p,.legal-summary ul { margin-bottom:0; }
.legal-section { padding:38px 0; border-top:1px solid var(--line); scroll-margin-top:105px; }
.legal-section h2 { margin-bottom:16px; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.legal-section h3 { margin:27px 0 8px; font-size:19px; }
.legal-section p,.legal-section li { color:#b8b8c0; }
.legal-section ul,.legal-section ol { padding-left:23px; }
.legal-section li + li { margin-top:9px; }
.legal-section a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.data-table { width:100%; margin:22px 0; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; font-size:14px; }
.data-table th,.data-table td { padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.data-table th { background:var(--surface-2); color:var(--text); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.data-table td { color:#b8b8c0; }
.data-table tr:last-child td { border-bottom:0; }
.callout { margin:22px 0; padding:18px 20px; border-left:3px solid var(--green); border-radius:0 14px 14px 0; background:var(--surface); color:#c9c9d0; }
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:26px}.arcade-stage{min-height:520px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card:nth-child(n){grid-column:span 1}.feature-card.large,.privacy-band{grid-template-columns:1fr}.legal-layout{grid-template-columns:1fr;gap:30px}.legal-toc{position:static;columns:2}.legal-toc strong{column-span:all}}
@media(max-width:680px){body{font-size:16px}.container{width:min(calc(100% - 28px),var(--max))}.nav{min-height:66px;align-items:flex-start;padding:14px 0}.nav-links{justify-content:flex-end;flex-wrap:wrap;gap:2px}.nav-links a{padding:7px 9px;font-size:12px}.hero{padding:62px 0 48px}.hero h1{font-size:clamp(54px,18vw,78px)}.section{padding:76px 0}.arcade-stage{min-height:460px}.glow-ring{width:320px;height:320px}.watch-card{width:288px;border-radius:64px}.watch-screen{border-radius:49px}.screen-score{margin-top:34px;font-size:60px}.pong-field{height:122px;margin:26px 0 18px}.game-grid,.feature-grid{grid-template-columns:1fr}.feature-card.large{grid-column:auto;min-height:0}.privacy-band,.support-card{padding:34px 26px}.support-card,.footer-row{align-items:flex-start;flex-direction:column}.legal-hero{padding-top:55px}.legal-toc{columns:1}.data-table,.data-table thead,.data-table tbody,.data-table tr,.data-table th,.data-table td{display:block}.data-table thead{display:none}.data-table td{border-bottom:0}.data-table td+td{padding-top:0}.data-table tr{padding:5px 0;border-bottom:1px solid var(--line)}.data-table tr:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}