:root{
  --bg:#0E0F13; --surf:#14151B; --surf2:#1A1D26; --ink:#E3E2E9; --mute:#878CA2;
  --violet:#6A57F5; --gold:#FFD66B; --mint:#8FD891;
  --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.14);
  --bezel:#1b1e28;
  --accent:#6A57F5;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
/* the app's aurora, quietened right down so it reads as atmosphere not decoration */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(60,230,201,.10), transparent 60%),
    radial-gradient(1000px 560px at 88% 4%,  rgba(106,87,245,.16), transparent 62%),
    radial-gradient(900px 520px at 50% 108%, rgba(31,169,223,.09), transparent 60%);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1,h2,h3,.disp{font-family:Fraunces,Georgia,serif; font-weight:600; text-wrap:balance; margin:0}
h1{font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.03; letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12; letter-spacing:-.015em}
h3{font-size:1.16rem; line-height:1.3}
p{margin:0 0 1em}
.lede{font-size:1.12rem; color:#C9C8D4; max-width:62ch}
.eyebrow{
  font-family:Inter,sans-serif; font-size:.73rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.7rem;
}
.mute{color:var(--mute)}

/* nav */
header.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(14,15,19,.82); border-bottom:1px solid var(--hair);
}
.nav-in{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:700;
  font-family:Fraunces,serif; font-size:1.12rem; letter-spacing:-.01em}
.brand img{width:29px; height:29px; border-radius:8px}
.nav-sp{flex:1}
.nav a.lnk{color:var(--mute); text-decoration:none; font-size:.9rem; font-weight:500}
.nav a.lnk:hover{color:var(--ink)}

/* hero */
.hero{padding:74px 0 20px}
.hero-grid{display:grid; grid-template-columns:1.02fr 1.18fr; gap:52px; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--hair2); background:rgba(255,255,255,.04);
  font-size:.79rem; font-weight:600; color:#CFCEDA; margin-bottom:20px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.tv{
  border-radius:16px; overflow:hidden; border:1px solid var(--hair2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
  background:#000;
}
.tv-foot{height:12px;background:linear-gradient(180deg,#1b1e28,#0d0e12)}
/* the hero's television with a phone standing in front of it — the same game on both */
.duo{position:relative; padding:0 10% 9% 0}
.duo .ph{
  position:absolute; right:0; bottom:0; width:22%; border-radius:18px; overflow:hidden;
  border:4px solid var(--bezel); background:#000;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07);
}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:11px;
  text-decoration:none; font-weight:600; font-size:.94rem; border:1px solid transparent;
}
.btn-p{background:var(--violet); color:#fff}
.btn-p:hover{background:#7A69FF}
.btn-s{border-color:var(--hair2); color:var(--ink); background:rgba(255,255,255,.03)}
.btn-s:hover{background:rgba(255,255,255,.07)}
/* Play badge: Google's own asset can't be restyled or recoloured, so this is a plain
   button carrying the store's triangle mark rather than an imitation of the badge. */
.btn-play{padding:11px 22px 11px 18px; gap:12px}
.btn-play svg{width:22px; height:24px; flex:none}
.btn-play .lbl{display:flex; flex-direction:column; line-height:1.18; text-align:left}
.btn-play .lbl small{font-size:.68rem; font-weight:500; opacity:.85; letter-spacing:.04em}
.btn-play .lbl b{font-size:.98rem; font-weight:600}
.getbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--surf); border:1px solid var(--hair); border-radius:16px; padding:30px 34px;
}
.getbar p{margin:0; color:var(--mute); font-size:.94rem; max-width:52ch}
.getbar h2{margin-bottom:6px}

/* stat band */
.stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin:64px 0 0;
  background:var(--hair); border:1px solid var(--hair); border-radius:14px; overflow:hidden;
}
.stat{background:var(--surf); padding:22px 18px; text-align:center}
.stat b{display:block; font-family:Fraunces,serif; font-size:1.85rem; font-weight:600; letter-spacing:-.02em}
.stat span{font-size:.78rem; color:var(--mute); letter-spacing:.03em}

section{padding:76px 0}
.sec-head{max-width:64ch; margin-bottom:40px}

/* every screen: the devices stand on one shelf, bottoms aligned, sized roughly as they are in a room */
.shelf{display:flex; align-items:flex-end; justify-content:center; gap:2.6%; margin:4px 0 34px}
.dev{margin:0; border:5px solid var(--bezel); background:#000; overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06)}
.dev img{width:100%}
.dev-tv{flex:0 0 43%; border-radius:12px; border-width:6px}
.dev-tablet{flex:0 0 28%; border-radius:16px; border-width:7px}
.dev-fold{flex:0 0 14%; border-radius:14px}
.dev-phone{flex:0 0 8.4%; border-radius:14px; border-width:4px}
.tvstand{display:flex; flex-direction:column; align-items:center; flex:0 0 43%}
.tvstand .dev-tv{flex:none; width:100%}
.tvstand::after{content:""; width:26%; height:9px; margin-top:-1px; border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#1b1e28,#0d0e12)}

/* feature cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px}
.card{
  background:var(--surf); border:1px solid var(--hair); border-radius:14px; padding:24px;
}
.card .ic{font-size:1.5rem; margin-bottom:12px}
.card h3{margin-bottom:7px}
.card p{color:var(--mute); font-size:.92rem; margin:0}

/* module shelf */
.mods{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px}
.mod{
  display:block; text-decoration:none; background:var(--surf); border:1px solid var(--hair);
  border-radius:15px; overflow:hidden; transition:border-color .16s, transform .16s;
}
.mod:hover{border-color:var(--ma); transform:translateY(-2px)}
.mod-top{padding:20px 20px 16px; border-bottom:1px solid var(--hair)}
.mod-emoji{font-size:1.75rem; line-height:1}
.mod h3{margin:11px 0 3px; font-size:1.2rem}
.mod .sub{font-size:.79rem; color:var(--ma); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.mod .bl{padding:16px 20px 20px; font-size:.88rem; color:var(--mute)}
.mod .cnt{
  display:inline-block; margin-top:12px; font-size:.76rem; font-weight:600;
  color:var(--ma); border:1px solid var(--ma); border-radius:999px; padding:3px 10px; opacity:.9;
}

/* game entries */
.games{display:flex; flex-direction:column; gap:22px}
.game{
  background:var(--surf); border:1px solid var(--hair); border-radius:16px; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
}
.game figure{margin:0; background:#000; border-right:1px solid var(--hair); position:relative; min-height:380px}
.game figure a{display:block}
/* the same game on a phone, standing in front of the television's picture */
.game figure .ph{
  position:absolute; right:16px; bottom:16px; width:27%; border-radius:14px; overflow:hidden;
  border:3px solid var(--bezel); background:#000;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
}
.game figure .ph img{width:100%}
.game figure .tvl img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.game .body{padding:24px 26px}
.g-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.g-head .em{font-size:1.3rem}
.g-head h3{font-size:1.28rem}
.meta{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px}
.pill{
  font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px;
  border:1px solid var(--hair2); color:var(--mute); background:rgba(255,255,255,.03);
}
.pill.acc{color:var(--ma); border-color:var(--ma); opacity:.92}
.about{color:#C9C8D4; font-size:.96rem; margin-bottom:18px}
.sub-h{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); margin:0 0 8px;
}
.sub-h .how{color:var(--ma); letter-spacing:.08em}
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:16px}
.bens{display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0; list-style:none}
.bens li{
  font-size:.8rem; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.045);
  border:1px solid var(--hair); color:#CFCEDA;
}
ol.steps{margin:0; padding-left:1.1rem; font-size:.87rem; color:#BFBECB}
ol.steps li{margin-bottom:3px}
.fact{
  font-size:.87rem; color:#C9C8D4; border-left:2px solid var(--ma);
  padding:8px 0 8px 14px; background:linear-gradient(90deg,rgba(255,255,255,.03),transparent);
}
.fact b{color:var(--ma); font-weight:600}

/* the controls switch: two radios ahead of the page, so one choice re-words every card below them.
   Visually hidden rather than display:none, so they stay reachable from the keyboard. */
.ctl{position:fixed; top:0; left:0; opacity:0; pointer-events:none}  /* fixed: focusing one never scrolls the page */
.ctlrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 22px;
  font-size:.86rem; color:var(--mute)}
.ctlbar{display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  border:1px solid var(--hair2); background:rgba(255,255,255,.03)}
.ctlbar label{cursor:pointer; font-weight:600; padding:6px 14px; border-radius:999px; color:var(--mute)}
#ctl-tv:checked ~ .wrap label[for=ctl-tv],
#ctl-touch:checked ~ .wrap label[for=ctl-touch]{background:var(--ma); color:#0E0F13}
#ctl-tv:focus-visible ~ .wrap label[for=ctl-tv],
#ctl-touch:focus-visible ~ .wrap label[for=ctl-touch]{outline:2px solid var(--ink); outline-offset:2px}
#ctl-tv:checked ~ .wrap .only-touch,
#ctl-touch:checked ~ .wrap .only-tv{display:none}

/* module page header */
.mhead{padding:56px 0 8px}
.mhead .em{font-size:3rem; line-height:1}
.mhead h1{font-size:clamp(2.1rem,4.6vw,3.2rem); margin:14px 0 8px}
.back{display:inline-flex; align-items:center; gap:7px; color:var(--mute); text-decoration:none;
  font-size:.87rem; font-weight:500; margin-bottom:26px}
.back:hover{color:var(--ink)}
.mnav{display:flex; justify-content:space-between; gap:16px; padding:34px 0 0;
  border-top:1px solid var(--hair); margin-top:44px}
.mnav a{text-decoration:none; color:var(--mute); font-size:.9rem; font-weight:500}
.mnav a:hover{color:var(--ink)}

footer{border-top:1px solid var(--hair); padding:46px 0; color:var(--mute); font-size:.87rem}
footer a{color:#B9B8C6}
.fgrid{display:flex; gap:34px; flex-wrap:wrap; justify-content:space-between}

/* lightbox: a plain :target overlay, no javascript */
.lb{
  position:fixed; inset:0; background:rgba(6,7,10,.94); z-index:100;
  display:none; align-items:center; justify-content:center; padding:26px;
}
.lb:target{display:flex}
.lb img{max-width:min(1280px,94vw); max-height:88vh; border-radius:10px;
  border:1px solid var(--hair2)}
.lb .x{position:absolute; top:20px; right:26px; font-size:1.7rem; color:#fff;
  text-decoration:none; opacity:.75}
.lb .cap{position:absolute; bottom:22px; left:0; right:0; text-align:center;
  color:var(--mute); font-size:.85rem}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  /* five stats over two columns leaves a dead cell — let the last one span it */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:last-child{grid-column:1 / -1}
  .game{grid-template-columns:1fr}
  .game figure{border-right:none; border-bottom:1px solid var(--hair); min-height:0; padding-bottom:22%}
  .game figure .ph{width:24%; right:12px; bottom:12px; border-radius:10px}
  .two{grid-template-columns:1fr; gap:16px}
}
/* Below this the three nav links cannot sit on one line: they wrap inside a fixed-height
   bar and collide with the wordmark. The page is one scroll and every link is repeated
   in the body, so dropping them is better than shrinking them into illegibility. */
@media (max-width:760px){
  .nav a.lnk{display:none}
  .nav-in{height:56px}
  .hero{padding:44px 0 12px}
  .wrap{padding:0 18px}
  section{padding:54px 0}
  /* on a phone the shelf keeps its line-up; thinner bezels keep the smallest screens readable */
  .shelf{gap:2%}
  .dev{border-width:3px}
  .dev-tv{border-width:4px}
  .dev-phone{border-width:2px; border-radius:8px}
  .dev-fold{border-radius:8px}
  .duo .ph{border-width:3px; border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important}
}