:root {
  color-scheme: dark;
  --bg: #12101c;
  --bg-soft: #1a1628;
  --paper: #221e34;
  --ink: #f3eef8;
  --muted: #a79bb8;
  --line: rgba(244,201,93,.18);
  --gold: #f4c95d;
  --accent: #e85d4c;
  --accent-deep: #c43d2e;
  --purple: #7b6cf0;
  --shadow: 0 18px 54px rgba(0,0,0,.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);line-height:1.62}
a{color:var(--gold)}
a:hover{color:#ffe29a}
button{font:inherit}
.skip-link{position:absolute;z-index:30;top:-60px;left:16px;padding:9px 13px;background:var(--paper);border-radius:8px;color:var(--ink)}
.skip-link:focus{top:12px}
.site-header{width:min(1120px,calc(100% - 40px));margin:0 auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-weight:760;letter-spacing:-.03em;text-decoration:none}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#12101c;background:var(--gold);font-size:15px;font-weight:900}
.top-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.top-nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600}
.top-nav a:hover{color:var(--gold)}
.page-frame{width:min(1120px,calc(100% - 40px));max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;gap:18px;padding:0 0 42px}
.content-column{width:min(100%,1120px);min-width:0;margin:0 auto}
.ad-rail{display:none}
.hero{padding:18px 4px 8px}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(232,93,76,.2)}
h1,h2,h3,p{margin-top:0}
h1{max-width:22ch;margin-bottom:12px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,3.4vw,2.45rem);font-weight:500;letter-spacing:-.04em;line-height:1.12}
.lead{font-size:.95rem;line-height:1.55;background:rgba(232,93,76,.12);border-left:4px solid var(--accent);padding:12px 14px;margin:0 0 16px;border-radius:0 10px 10px 0;color:#f0e6ff}
.disclaimer-banner{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(244,201,93,.08);color:var(--muted);font-size:.84rem}
.disclaimer-banner strong{color:var(--gold)}

.game-card{padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.game-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.game-toolbar .meta{color:var(--muted);font-size:.82rem}
.game-actions{display:flex;gap:8px;flex-wrap:wrap}
.button{min-height:40px;padding:8px 14px;border-radius:10px;cursor:pointer;font-size:.85rem;font-weight:740;border:1px solid transparent}
.button-primary{background:var(--accent);color:#fff}
.button-primary:hover{background:var(--accent-deep)}
.button-secondary{border-color:rgba(244,201,93,.35);color:var(--gold);background:transparent}
.button-secondary:hover{background:rgba(244,201,93,.1)}

.stage{position:relative;width:100%;aspect-ratio:16/9;min-height:320px;background:#0b0914;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
@media(min-width:900px){.stage{min-height:520px}}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b0914}
.click-to-play{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:linear-gradient(160deg,rgba(18,16,28,.92),rgba(36,32,53,.88));cursor:pointer;text-align:center}
.click-to-play.hidden{display:none}
.click-to-play h2{margin:0;font-size:clamp(1.35rem,3vw,1.9rem);font-family:Georgia,serif;font-weight:500}
.click-to-play p{margin:0;max-width:36ch;color:var(--muted);font-size:.92rem}
.play-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:999px;background:var(--gold);color:#12101c;font-weight:800;font-size:1rem;border:0;cursor:pointer}
.play-btn:hover{filter:brightness(1.05)}
.credit-line{margin:12px 4px 0;color:var(--muted);font-size:.82rem}
.credit-line a{font-weight:700}

.content-section,.faq-section{padding:46px 6px 0}
.section-kicker{color:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.section-heading h2{margin:0 0 14px;font-family:Georgia,serif;font-size:clamp(1.45rem,3vw,2rem);font-weight:500;letter-spacing:-.03em}
.content-section>p,.faq-section details p{color:var(--muted)}
.tip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tip-card{padding:18px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(34,30,52,.7)}
.tip-number{color:var(--accent);font-size:.74rem;font-weight:850;letter-spacing:.12em}
.tip-card h3{margin:8px 0;font-size:1rem}
.tip-card p{margin:0;color:var(--muted);font-size:.84rem}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.char-grid li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(34,30,52,.65);font-weight:700;font-size:.9rem;text-align:center}
.controls-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.4em 0 1em}
.controls-table th,.controls-table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.controls-table th{background:rgba(244,201,93,.1);color:var(--gold)}
.controls-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:#ffe29a}
.faq-section details{padding:16px 2px;border-top:1px solid var(--line)}
.faq-section details:last-of-type{border-bottom:1px solid var(--line)}
.faq-section summary{cursor:pointer;font-weight:740}
.faq-section details p{margin:12px 0 0;font-size:.92rem}
.disclaimer{margin:32px 4px 10px;padding:14px 16px;border-left:3px solid var(--gold);color:var(--muted);background:rgba(255,255,255,.03);font-size:.83rem}
.site-footer{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:20px 0 34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(244,201,93,.15);color:var(--muted);font-size:.8rem}
.site-footer p{margin:0}
@media(max-width:800px){
  .tip-grid{grid-template-columns:1fr}
  .site-header{width:calc(100% - 28px);min-height:64px}
  .top-nav{gap:12px}
  .page-frame{width:calc(100% - 28px)}
}