:root{
  --bg:#070d1a; --bg2:#0e1a33; --ink:#f4f7fb; --muted:#9fb0cc;
  --gold:#f5c542; --gold2:#ffdd7a; --green:#22c55e; --red:#ef4444; --card-line:rgba(255,255,255,.12);
  --display:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh; color:var(--ink); font-family:var(--body);
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(245,197,66,.14), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  background-attachment:fixed;
}
a{color:inherit}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
.btn{
  appearance:none;border:0;cursor:pointer;font:700 17px/1 var(--body);letter-spacing:.02em;
  padding:15px 26px;border-radius:14px;color:#1a1300;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 6px 0 #b8901a,0 14px 24px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .2s; min-height:52px; touch-action:manipulation;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b8901a,0 6px 12px rgba(0,0,0,.35)}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.btn.ghost:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--card-line)}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}

/* ---------- hub ---------- */
.hero{padding:clamp(28px,7vw,72px) 0 clamp(18px,4vw,36px);text-align:center}
.hero .kicker{font:600 13px var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.hero h1{font:400 clamp(54px,12vw,112px)/.92 var(--display);margin:10px 0 12px;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 30%,#b9c8e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0 auto;max-width:34em;color:var(--muted);font-size:clamp(15px,2.4vw,18px);line-height:1.55}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px;padding:12px 0 64px}
.tile{
  position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;
  background:linear-gradient(160deg,#16294d,#0b1429);border:1px solid var(--card-line);
  box-shadow:0 20px 40px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  animation:tileIn .6s cubic-bezier(.2,.8,.2,1) both;
}
.tile:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 56px rgba(0,0,0,.5),0 0 0 2px rgba(245,197,66,.55)}
.tile-art{position:relative;height:210px;overflow:hidden;background:
  radial-gradient(240px 160px at 70% 30%, rgba(245,197,66,.35), transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 36px,transparent 36px 72px),
  linear-gradient(180deg,#15803d,#0f5c2c)}
.tile-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,13,26,.9))}
.mini-card{position:absolute;left:50%;top:26px;width:112px;aspect-ratio:5/7;margin-left:-98px;border-radius:12px;transform:rotate(-8deg);
  background:radial-gradient(70% 50% at 50% 38%,rgba(96,150,255,.5),transparent 75%),repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,236,170,.16) 0 6deg,transparent 6deg 16deg),linear-gradient(180deg,#1b3a7c,#0a1530);box-shadow:0 14px 24px rgba(0,0,0,.5);overflow:hidden;
  animation:floaty 5s ease-in-out infinite}
.mini-card svg{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.mini-card .mf{position:absolute;left:6px;top:6px;width:30px;aspect-ratio:3/2;border-radius:3px;box-shadow:0 0 0 1.5px #fff;
  background:linear-gradient(90deg,#1d4ed8 33%,#fff 33% 66%,#dc2626 66%)}
.mini-card .mr{position:absolute;left:-4px;right:-4px;bottom:22%;height:16%;background:linear-gradient(#e11d2e,#a5101e);
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%,7px 50%)}
.tile-art .trophy-art{position:absolute;right:calc(50% - 96px);top:18px;height:170px;transform:rotate(7deg);filter:drop-shadow(0 12px 14px rgba(0,0,0,.5));animation:floaty 5s ease-in-out -2s infinite}
.tile-body{padding:18px 22px 24px;display:flex;flex-direction:column;gap:8px}
.tile h2{font:400 38px/1 var(--display);margin:0;letter-spacing:.02em}
.tile p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.tile .go{margin-top:10px;font-weight:700;color:var(--gold);display:inline-flex;gap:8px;align-items:center}
.tile .go span{transition:transform .2s}
.tile:hover .go span{transform:translateX(5px)}
.tile.soon{border-style:dashed;background:rgba(255,255,255,.03);box-shadow:none;animation-delay:.12s;justify-content:center;align-items:center;text-align:center;min-height:260px;color:var(--muted)}
.tile.soon:hover{transform:none;box-shadow:none}
.tile.soon b{font:400 34px var(--display);letter-spacing:.04em;color:#6f82a6}
footer.site{padding:0 0 36px;text-align:center;color:#5f7295;font-size:13px}
@keyframes tileIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}