:root{--ink:#16131a;--mute:#5c564f;--cobalt:#1d4ed8;--paper:#fff9f1;--line:#e8dcce}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink)}
.banner{margin:0;padding:.55rem 1rem;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#f5efe6}
main{max-width:520px;margin:0 auto;padding:1.5rem 1rem 3rem}
.eyebrow{margin:0 0 .35rem;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt)}
h1{margin:0;font-family:Georgia,serif;font-size:2rem}
.lede{margin:.5rem 0 0;color:var(--mute);line-height:1.5}
header{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:flex-end}
.hud{margin:0;font-size:.9rem;color:var(--mute)}.hud strong{color:var(--ink);font-size:1.2rem}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.tile{min-height:72px;border:0;border-radius:1rem;background:#1e293b;color:transparent;cursor:pointer;font-size:0}
.tile.on,.tile.got{color:#fff;font-size:1.4rem;font-weight:800}
.tile.s0{background:#1d4ed8}.tile.s1{background:#ff6b4a}.tile.s2{background:#f5c542;color:#16131a}
.tile.s3{background:#16a34a}.tile.s4{background:#7c3aed}.tile.s5{background:#0f766e}
.tile.got{opacity:.55}
button#reset{margin-top:1rem;border:0;background:var(--cobalt);color:#fff;font:inherit;font-weight:700;padding:.7rem 1.1rem;border-radius:999px;cursor:pointer}
footer{text-align:center;padding:0 1rem 2rem;font-size:.8rem;color:var(--mute)}footer a{color:var(--cobalt)}