*{box-sizing:border-box}
:root{
  --bg:#120e0c;
  --panel:#1d1714;
  --panel2:#251c18;
  --line:#4a3930;
  --text:#fff6e5;
  --muted:#b9a89c;
  --gold:#ffd66b;
  --green:#3d7556;
}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#241912 0,#120e0c 42%,#0c0908 100%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{padding:18px 14px 32px}
.shell{width:min(620px,100%);margin:0 auto}
.hero{padding:8px 4px 14px}
.eyebrow{font-size:11px;font-weight:1000;letter-spacing:.18em;color:var(--gold)}
.hero h1{margin:5px 0 6px;font-size:34px;letter-spacing:-.05em}
.hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.game-grid{display:grid;gap:12px}
.game-card{display:grid;grid-template-columns:66px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.game-icon{width:66px;height:66px;border-radius:16px;display:grid;place-items:center;font-size:34px;background:#120f0d;border:1px solid #4b3a31}
.game-body{min-width:0}
.game-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.game-title h2{margin:0;font-size:18px;letter-spacing:-.03em}
.badge{font-size:9px;font-weight:1000;padding:4px 7px;border-radius:999px;background:#2f5f45;color:#dbffe8}
.badge.soon{background:#4b392e;color:#e2cfc0}
.game-body p{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.play-btn{min-width:72px;text-align:center;text-decoration:none;color:white;font-size:12px;font-weight:1000;padding:10px 12px;border-radius:12px;background:var(--green);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.play-btn.disabled{pointer-events:none;background:#45372f;color:#9f9087}
.coming-note{margin:12px 0 0;padding:12px 14px;border-radius:14px;border:1px dashed #4b3a31;color:var(--muted);font-size:11px;display:grid;gap:3px}
.coming-note strong{color:#ead8c7}
.youtube-link{display:block;margin-top:12px;text-decoration:none;text-align:center;padding:12px;border-radius:14px;background:#241814;border:1px solid #5b4036;color:#ffe8d7;font-weight:900;font-size:12px}
footer{text-align:center;color:#776a63;font-size:9px;margin-top:16px}
@media(max-width:430px){
  body{padding:12px 10px 26px}
  .hero h1{font-size:30px}
  .game-card{grid-template-columns:58px 1fr auto;padding:11px;gap:9px}
  .game-icon{width:58px;height:58px;font-size:30px}
  .game-title h2{font-size:16px}
  .play-btn{min-width:64px;padding:9px 9px}
}