:root { --ink:#17182e; --night:#101125; --paper:#f7f4ed; --coral:#ff6c61; --lemon:#ffc94f; --mint:#63dcc0; --violet:#8b78ed; --muted:#77778a; --line:rgba(23,24,46,.13); --display:Georgia, 'Times New Roman', serif; --sans:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1140px, calc(100% - 48px)); margin:0 auto; }
.site-header { height:80px; display:flex; align-items:center; justify-content:space-between; gap:28px; width:min(1240px, calc(100% - 48px)); margin:0 auto; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; color:#fff; background:var(--coral); border-radius:9px 9px 13px 9px; font-family:var(--display); font-size:21px; font-weight:700; line-height:1; transform:rotate(-5deg); }
nav { display:flex; gap:28px; font-size:12px; font-weight:700; }
nav a { color:#555568; transition:color .18s; } nav a:hover { color:var(--coral); }
.header-cta { display:inline-flex; gap:7px; padding:10px 14px; border:1px solid var(--ink); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:background .18s,color .18s; }
.header-cta:hover { color:#fff; background:var(--ink); }
.hero { display:grid; grid-template-columns:1fr .9fr; align-items:center; min-height:600px; gap:70px; padding:60px 0 72px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 17px; color:var(--coral); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.eyebrow span { width:24px; height:2px; background:var(--lemon); }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--display); font-weight:700; letter-spacing:0; line-height:.94; } h1 { margin-bottom:24px; font-size:clamp(58px,7vw,94px); } h1 em,h2 em { color:var(--coral); font-style:normal; }
.hero-text { max-width:450px; margin-bottom:31px; color:var(--muted); font-size:16px; }.hero-actions { display:flex; align-items:center; gap:25px; }
.play-button { display:inline-flex; align-items:center; gap:11px; min-width:168px; padding:10px 16px; color:#fff; background:var(--ink); box-shadow:5px 5px 0 var(--lemon); font-size:16px; font-weight:800; line-height:1.03; transition:transform .18s,box-shadow .18s; }.play-button:hover { box-shadow:8px 8px 0 var(--coral); transform:translate(-2px,-2px); }.play-button small { display:block; margin-bottom:3px; font-size:8px; letter-spacing:.1em; }.play-icon { color:var(--lemon); font-size:15px; }.arrow-link { display:inline-flex; align-items:center; gap:9px; color:var(--coral); font-size:12px; font-weight:800; }.arrow-link span { font-size:18px; }
.hero-game { position:relative; display:grid; min-height:440px; place-items:center; }.hero-game::before { content:''; position:absolute; width:390px; height:390px; border-radius:50%; background:var(--lemon); opacity:.54; transform:translate(22px,-6px); }.game-board { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,56px); gap:8px; padding:16px; background:#202247; border:8px solid #fff; box-shadow:0 20px 45px rgba(23,24,46,.22), 12px 12px 0 var(--violet); transform:rotate(5deg); }.gem { display:block; width:56px; height:56px; border-radius:15px 15px 22px 15px; box-shadow:inset 0 -6px 0 rgba(0,0,0,.12), inset 0 5px 0 rgba(255,255,255,.28); }.gem-coral { background:var(--coral); }.gem-lemon { background:var(--lemon); }.gem-mint { background:var(--mint); }.gem-violet { background:var(--violet); }.gem.burst { outline:4px solid #fff; outline-offset:-9px; transform:rotate(45deg) scale(.84); }.score-chip { position:absolute; z-index:2; min-width:94px; padding:10px 12px; background:#fff; box-shadow:4px 4px 0 var(--ink); text-align:center; }.score-chip small { display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.13em; }.score-chip strong { font-family:var(--display); font-size:21px; }.chip-top { top:21px; right:0; transform:rotate(7deg); }.chip-bottom { left:7px; bottom:23px; transform:rotate(-7deg); }.spark { position:absolute; z-index:2; width:14px; height:14px; background:var(--coral); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }.spark-one { top:35px; left:38px; }.spark-two { right:19px; bottom:40px; background:var(--mint); transform:scale(1.6); }.spark-three { bottom:4px; left:110px; background:var(--violet); transform:scale(.7); }
.game-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.game-stats div { display:grid; gap:2px; padding:23px 28px; border-right:1px solid var(--line); }.game-stats div:last-child { border-right:0; }.game-stats strong { font-family:var(--display); font-size:24px; }.game-stats span { color:var(--muted); font-size:12px; }
.play-section { padding:125px 0; background:#fff; }.section-heading { max-width:620px; margin-bottom:52px; }.section-heading h2,.competition h2,.community-band h2,.download h2 { margin-bottom:20px; font-size:clamp(45px,5.2vw,70px); }.section-heading>p:last-child,.competition-copy>p:not(.eyebrow),.community-copy>p:not(.eyebrow) { max-width:500px; margin-bottom:0; color:var(--muted); font-size:15px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.feature-card { position:relative; min-height:285px; padding:25px; border:1px solid #dedde2; background:var(--paper); transition:transform .2s,box-shadow .2s; }.feature-card:hover { box-shadow:0 16px 35px rgba(23,24,46,.12); transform:translateY(-5px); }.feature-card-dark { color:#fff; background:var(--ink); }.feature-number { position:absolute; top:19px; right:20px; color:#9695a6; font-size:11px; font-weight:800; }.feature-card-dark .feature-number { color:var(--mint); }.feature-symbol { display:grid; place-items:center; width:47px; height:47px; margin:43px 0 39px; color:var(--ink); font-size:31px; }.symbol-gem { background:var(--lemon); border-radius:12px 12px 20px 12px; }.symbol-bolt { color:var(--lemon); border:2px solid var(--lemon); border-radius:50%; }.symbol-crown { color:var(--violet); }.feature-card h3 { margin-bottom:9px; font-family:var(--display); font-size:25px; line-height:1; }.feature-card p { margin-bottom:0; color:#6d6d7e; font-size:13px; }.feature-card-dark p { color:#c4c4d1; }
.competition { display:grid; grid-template-columns:1fr .78fr; align-items:center; gap:95px; padding:130px 0; }.competition-copy .arrow-link { margin-top:28px; }.ranking-panel { padding:23px; color:#fff; background:var(--night); box-shadow:10px 10px 0 var(--mint); transform:rotate(2deg); }.ranking-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.18); font-size:10px; font-weight:800; letter-spacing:.12em; }.ranking-top b { padding:4px 7px; color:var(--night); background:var(--mint); font-size:8px; }.ranking-panel ol { display:grid; gap:8px; margin:20px 0; padding:0; list-style:none; }.ranking-panel li { display:grid; grid-template-columns:33px 1fr auto; gap:9px; align-items:center; padding:12px 10px; color:#bdbdcc; font-size:12px; }.ranking-panel li.you { color:var(--night); background:var(--lemon); }.ranking-panel li em { font-family:var(--display); font-size:17px; font-style:normal; }.ranking-panel>p { margin:0; color:var(--mint); font-size:11px; font-weight:700; }
.community-band { padding:96px 0; color:#fff; background:var(--violet); }.community-layout { display:grid; grid-template-columns:1fr .7fr; align-items:center; gap:70px; }.community-copy .eyebrow { color:#fff; }.community-copy .eyebrow span { background:var(--lemon); }.community-copy>p:not(.eyebrow) { color:#e7e3ff; }.community-orbit { position:relative; display:grid; place-items:center; width:255px; height:255px; margin:auto; border:1px solid rgba(255,255,255,.58); border-radius:50%; }.community-orbit::before { content:''; position:absolute; inset:31px; border:1px dashed rgba(255,255,255,.5); border-radius:50%; }.community-orbit strong { display:grid; place-items:center; width:84px; height:84px; color:var(--ink); background:var(--lemon); border-radius:50%; font-family:var(--display); font-size:29px; }.community-orbit span { position:absolute; z-index:1; display:grid; place-items:center; width:35px; height:35px; color:var(--ink); background:#fff; border-radius:50%; font-size:17px; }.community-orbit span:nth-child(1) { top:-14px; left:105px; }.community-orbit span:nth-child(2) { right:9px; bottom:40px; color:#fff; background:var(--coral); }.community-orbit span:nth-child(3) { left:16px; bottom:31px; color:var(--night); background:var(--mint); }
.download { display:grid; grid-template-columns:1fr .7fr; align-items:center; min-height:490px; gap:70px; overflow:hidden; }.download h2 { margin-bottom:29px; }.download-board { position:relative; display:grid; grid-template-columns:repeat(2,90px); gap:13px; padding:24px; transform:rotate(-8deg); }.download-board::before { content:''; position:absolute; z-index:-1; inset:-30px; background:var(--lemon); border-radius:50%; }.download-board span { display:grid; place-items:center; width:90px; height:90px; color:#fff; background:var(--coral); border-radius:21px 21px 32px 21px; box-shadow:inset 0 -7px 0 rgba(0,0,0,.12); font-family:var(--display); font-size:49px; }.download-board span:nth-child(2) { color:var(--ink); background:var(--mint); }.download-board span:nth-child(3) { background:var(--violet); }.download-board span:nth-child(4) { color:var(--ink); background:#fff; }
.site-footer { color:#e2e1e9; background:var(--night); }.footer-layout { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:104px; gap:24px; }.footer-layout .brand-mark { width:27px; height:27px; font-size:17px; }.footer-links { display:flex; gap:18px; font-size:11px; font-weight:700; }.footer-links a:hover { color:var(--mint); }.footer-layout p { margin:0; color:#8b8b9c; font-size:10px; text-align:right; }
.legal { max-width:890px; padding:75px 0 110px; }.legal h1 { margin-bottom:13px; font-size:clamp(54px,7vw,86px); }.effective-date { margin-bottom:45px; color:var(--coral); font-size:12px; font-weight:800; }.legal-copy { max-width:790px; color:#5e5e70; font-size:14px; }.legal-copy h2 { margin:38px 0 12px; color:var(--ink); font-family:var(--display); font-size:31px; line-height:1; }.legal-copy h3 { margin:25px 0 7px; color:var(--ink); font-size:15px; }.legal-copy p { margin-bottom:15px; }.legal-copy ul { margin:0 0 17px; padding-left:22px; }.legal-copy li { margin:7px 0; }.legal-copy a { color:var(--coral); font-weight:700; text-decoration:underline; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }.reveal.is-visible { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } }
@media (max-width:760px) { .shell { width:min(100% - 32px,560px); }.site-header { width:calc(100% - 32px); height:66px; }.site-header nav { display:none; }.header-cta { padding:8px 10px; font-size:9px; }.brand { font-size:13px; }.hero { grid-template-columns:1fr; gap:20px; min-height:0; padding:45px 0 62px; }.hero-copy { order:2; text-align:center; }.hero-copy .eyebrow { justify-content:center; }.hero-text { margin-right:auto; margin-left:auto; }.hero-actions { justify-content:center; flex-wrap:wrap; gap:19px; }.hero-game { min-height:350px; }.hero-game::before { width:290px; height:290px; }.game-board { grid-template-columns:repeat(5,42px); gap:6px; padding:12px; border-width:6px; }.gem { width:42px; height:42px; border-radius:11px 11px 17px 11px; }.score-chip { min-width:78px; padding:7px 8px; }.score-chip strong { font-size:17px; }.chip-top { right:-5px; }.chip-bottom { left:-2px; }.game-stats { grid-template-columns:1fr; }.game-stats div { padding:16px 0; border-right:0; border-bottom:1px solid var(--line); }.game-stats div:last-child { border-bottom:0; }.play-section { padding:78px 0; }.section-heading { margin-bottom:34px; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:220px; }.feature-symbol { margin:30px 0 25px; }.competition { grid-template-columns:1fr; gap:45px; padding:78px 0; }.competition-copy { text-align:center; }.competition-copy .eyebrow { justify-content:center; }.community-band { padding:74px 0; }.community-layout { grid-template-columns:1fr; gap:42px; text-align:center; }.community-copy .eyebrow { justify-content:center; }.community-copy>p:not(.eyebrow) { margin-right:auto; margin-left:auto; }.download { grid-template-columns:1fr; min-height:0; padding:78px 0; text-align:center; }.download-copy .eyebrow { justify-content:center; }.download-board { margin:auto; transform:rotate(-5deg) scale(.86); }.footer-layout { grid-template-columns:1fr; justify-items:start; gap:14px; padding:27px 0; }.footer-layout p { text-align:left; } }