:root{color-scheme:dark;--ink:#191824;--gold:#f5c261;--paper:#f0dec1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#413047,transparent 48%),#12131e;color:var(--paper);font:16px/1.5 system-ui,sans-serif}main{max-width:1050px;margin:auto;padding:24px}header{position:relative;padding:15px 0 26px}a{color:#f7cf83;text-underline-offset:4px}header>a{display:block;margin-bottom:25px}.eyebrow{font-size:.75rem;letter-spacing:.18em;color:#d7b078}h1{font-size:clamp(2.8rem,7vw,5rem);line-height:1;margin:14px 0;letter-spacing:-.055em}h1 em{font-style:normal;color:var(--gold)}header p{color:#d3c2b3}.game{position:relative;background:#1c1b29;border:1px solid #6d5444;border-radius:24px;overflow:hidden;box-shadow:0 24px 70px #0005}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 18px;background:#292433}.toolbar strong{margin-right:auto}.toolbar span{font-size:.85rem;color:#f7cf83}.brief{padding:0 18px;min-height:24px;color:#ddcbb7}button{font:inherit;cursor:pointer;border:1px solid #977346;background:#332b2b;color:#ffe3ad;padding:10px 15px;border-radius:12px;min-height:44px}button:hover:not(:disabled){background:#514032}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #f4b953;outline-offset:3px}canvas{display:block;width:100%;height:auto;touch-action:manipulation;background:#211e29}#status{min-height:48px;margin:0;padding:14px 18px;background:#292433;color:#ffe2a5}.play-controls{display:flex;justify-content:space-evenly;gap:24px;align-items:center;padding:20px}.dpad{display:grid;grid-template-columns:repeat(3,60px);gap:5px}.dpad button{font-weight:800;font-size:1.15rem}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:nth-child(5){grid-column:2}.actions{display:grid;gap:10px;max-width:260px}.actions label{font-size:.85rem}.overlay{position:absolute;z-index:2;inset:0;background:#201c2bf5;padding:30px;overflow:auto;backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.overlay h2{font-size:2rem;line-height:1.15;color:var(--gold)}#room-list{display:grid;gap:12px;margin:22px 0}#room-list button{text-align:left;padding:15px}.result-actions{display:flex;gap:10px;flex-wrap:wrap}#share-url{width:100%;margin-top:16px;padding:12px;background:#15131b;color:white;border:1px solid var(--gold);border-radius:8px}.guide{padding:30px 10px;max-width:850px}.guide li{padding-bottom:12px}.guide p,footer{font-size:.9rem;color:#c6b9ad}footer{border-top:1px solid #594336;padding:20px 0}footer a{margin-left:15px}@media(max-width:560px){main{padding:10px}.toolbar{padding:10px}.toolbar strong{width:100%}.toolbar button{padding:7px 10px}.play-controls{gap:12px;padding:12px}.dpad{grid-template-columns:repeat(3,46px)}.dpad button{padding:6px}.actions{max-width:170px}.actions button{font-size:.85rem;padding:8px}.overlay{padding:18px}.overlay h2{font-size:1.5rem}.brief{font-size:.85rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep the tactical board and controls together on ordinary landscape desktops. */
.game{scroll-margin-top:8px}
@media(min-width:800px) and (min-height:580px){
 .game{display:grid;grid-template-columns:minmax(0,1fr) 230px}
 .toolbar,.brief,#status{grid-column:1 / -1}
 .toolbar{grid-row:1}.brief{grid-row:2;margin:10px 18px}
 canvas{grid-column:1;grid-row:3;width:min(100%,calc((100dvh - 235px)*1.42857));height:auto;max-width:100%;margin:auto}
 .play-controls{grid-column:2;grid-row:3;flex-direction:column;justify-content:center;gap:18px;padding:12px}
 #status{grid-row:4}.actions{width:100%;max-width:205px}
}

/* A hidden menu stays hidden even when its normal layout is grid or flex. */
[hidden]{display:none!important}

.challenge-choice{display:block;margin:12px 0;font-weight:700}.challenge-choice select{font:inherit;padding:10px;max-width:100%;color:#292334;background:#fff0d4;border:2px solid #b59067;border-radius:8px}.challenge-note{font-size:.9rem;line-height:1.5;max-width:58ch;margin:10px auto}