html{background:var(--cream)}
body{font-family:var(--font);color:var(--ink);background:
 radial-gradient(circle at 11% 16%,#fff9 0 5%,transparent 5.2%),
 linear-gradient(165deg,#dff1ed 0%,#f5efdc 56%,#f5e5d7 100%);
 user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{cursor:pointer}
.screen{position:relative;width:100%;height:100vh;height:100dvh;height:var(--app-height,100dvh);padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.setup-screen{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.4vh,16px);max-width:980px;margin:auto}
.brand{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;max-width:820px;width:100%;margin:auto}
.brand h1{font-size:clamp(2.25rem,6vh,4rem);line-height:.9;letter-spacing:-.055em;color:#31495b;text-shadow:0 3px 0 #fff}
.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.tagline{font-size:clamp(.82rem,1.8vh,1.05rem);color:var(--muted);font-weight:700;margin-top:6px}
.setup-card{align-self:center;width:min(100%,820px);max-height:100%;overflow:auto;scrollbar-width:none;margin:auto;background:#fffdf5e8;border:2px solid #fff;padding:clamp(14px,2vh,22px);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);display:grid;gap:clamp(12px,2vh,20px)}
.setup-card::-webkit-scrollbar{display:none}
legend{font-size:clamp(.9rem,2vh,1.05rem);font-weight:900;margin-bottom:8px}
.step-dot{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:7px;border-radius:50%;background:#e9dfcb;color:#5b6370;font-size:.75rem}
.setup-footnote{text-align:center;color:#687b82;font-weight:800;font-size:.8rem}
.game-screen{display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(7px,1.2vh,12px);max-width:1500px;margin:auto}
.game-header{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px}
.scoreboard{display:flex;align-items:stretch;justify-content:center;gap:clamp(4px,1vw,12px);min-width:0}
.board-wrap{position:relative;min-height:0;display:grid;place-items:center;padding:2px}
.board{--cols:4;--rows:4;--gap:10px;--card-w:80px;--card-h:100px;display:grid;grid-template-columns:repeat(var(--cols),var(--card-w));grid-template-rows:repeat(var(--rows),var(--card-h));gap:var(--gap);perspective:1000px}
.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#213544a8;backdrop-filter:blur(8px)}
@media(max-width:620px){
 .screen{padding:10px}
 .brand-mascot{transform:scale(.78);margin:-7px}
 .brand{gap:9px}.tagline{display:none}
 .setup-card{border-radius:22px;padding:12px;gap:11px}
 .game-header{grid-template-columns:42px minmax(0,1fr) 42px;gap:5px}
}
@media(max-height:640px){
 .brand-mascot{transform:scale(.72);margin:-10px}
 .brand h1{font-size:2rem}.tagline,.setup-footnote{display:none}
 .setup-card{gap:8px;padding:10px}.setup-screen{gap:5px}
 legend{margin-bottom:5px}
}
@media(max-height:760px) and (min-width:621px){
 .screen{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
 .game-screen{gap:5px}
 .setup-screen{gap:5px}.setup-card{gap:9px;padding:11px}.brand-mascot{transform:scale(.78);margin:-7px}
 .brand h1{font-size:2.25rem}.tagline,.setup-footnote{display:none}
}