:root { --stage:#120f0d; --paper:#f2eadc; --gold:#d9a441; --red:#cb3b2f; --body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --display:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--stage); }
body { margin:0; min-width:320px; min-height:100vh; color:var(--paper); background:radial-gradient(circle at 74% 30%,#362018 0%,var(--stage) 56%); font-family:var(--body); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
.shell { max-width:1180px; margin:auto; padding:24px clamp(18px,4vw,44px) 52px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:22px; border-bottom:1px solid #51483c; }
.brand { font-family:var(--display); font-size:1.7rem; letter-spacing:.01em; text-decoration:none; }
.brand span { color:var(--gold); }
.secret,.eyebrow,.scoreboard span,.overlay-kicker { font-size:.875rem; font-weight:850; letter-spacing:.12em; }
.secret { color:var(--gold); }
.game-layout { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(24px,6vw,88px); align-items:center; padding-top:clamp(28px,6vw,70px); }
.eyebrow { margin:0 0 16px; color:var(--gold); text-transform:uppercase; }
h1,h2 { font-family:var(--display); font-weight:900; line-height:.9; }
h1 { margin:0 0 26px; font-size:clamp(5.5rem,13vw,11rem); }
.intro h1 { font-size:clamp(3.45rem,5.5vw,5.2rem); line-height:.93; }
.period { color:var(--red); }
.intro > p:not(.eyebrow) { max-width:360px; font-size:1rem; line-height:1.6; color:#dfd2c0; }
.scoreboard { display:flex; flex-wrap:wrap; gap:16px 34px; margin:34px 0 20px; }
.scoreboard div { display:flex; flex-direction:column; gap:7px; }
.scoreboard span { color:var(--gold); }
.scoreboard strong { font-family:var(--display); font-size:3rem; font-weight:400; }
.instructions { color:#c7bbae !important; }
.back { display:inline-block; margin-top:18px; padding-block:12px; font-weight:700; text-underline-offset:5px; }
.game-column { min-width:0; }
.board-frame { padding:10px; background:var(--paper); box-shadow:13px 13px 0 var(--red); }
.board-wrap { position:relative; width:100%; aspect-ratio:1; touch-action:none; background:#201a16; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; color:var(--paper); background:rgba(18,15,13,.88); text-align:center; }
.overlay[hidden] { display:none; }
.overlay-kicker { margin:0 0 12px; color:var(--gold); }
.overlay h2 { margin:0; font-size:clamp(3.25rem,8vw,6rem); }
.overlay p:not(.overlay-kicker) { max-width:260px; margin:20px 0; line-height:1.5; }
#start { min-height:50px; padding:12px 20px; border:0; color:var(--stage); background:var(--gold); font-weight:850; }
#start span { margin-left:15px; }
.board-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:48px; padding:4px 4px 0; color:var(--stage); font-size:.875rem; font-weight:780; }
#pause { min-width:70px; min-height:38px; border:1px solid var(--stage); background:transparent; font-weight:800; }
#pause:disabled { opacity:.35; cursor:default; }
.pad { display:grid; justify-items:center; gap:8px; margin:25px auto 0; }
.pad-bottom { display:flex; gap:8px; }
.pad button { width:60px; height:56px; border:1px solid #766454; color:var(--paper); background:#2e241e; font-size:1.65rem; line-height:1; touch-action:manipulation; }
.pad button:active { background:var(--red); }
button:focus-visible,a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (max-width:790px) { .game-layout { grid-template-columns:1fr; gap:20px; } .intro h1 { font-size:clamp(3.4rem,10vw,5.2rem); margin-bottom:12px; } .intro > p:not(.eyebrow) { max-width:560px; } .scoreboard { margin:16px 0 4px; } .back { display:none; } .game-column { width:min(100%,520px); margin:0 auto; } }
@media (max-width:420px) { .secret { display:none; } .shell { padding-top:15px; } .game-layout { padding-top:22px; } .intro > p:not(.eyebrow) { margin:10px 0; } .intro .instructions { font-size:.875rem !important; } .scoreboard strong { font-size:2.2rem; } .pad { margin-top:14px; } }