@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Space+Grotesk:wght@600;700&display=swap');
:root{--cream:#f5eddb;--ink:#241b15;--green:#173f2b;--gold:#d68a20;--red:#a9432f}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif}body{overscroll-behavior:none}
.screen{min-height:100vh;padding:clamp(16px,4vw,48px);display:flex;flex-direction:column;align-items:center;justify-content:center}.hidden{display:none!important}
.brand{font:700 clamp(1.1rem,2.5vw,1.8rem)/1 "Space Grotesk";letter-spacing:.08em;color:var(--green)}.eyebrow{font-weight:700;letter-spacing:.14em;color:#a66013;font-size:.8rem;text-align:center}
h1{font:700 clamp(2.6rem,8vw,6.5rem)/.95 "Space Grotesk";margin:.25em 0;text-align:center;max-width:1000px}h2{font:700 clamp(2rem,6vw,4rem)/1 "Space Grotesk";margin:.25em 0}
.lede{max-width:650px;text-align:center;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.55}form{width:min(430px,100%);display:grid;gap:14px;margin-top:18px}
label{font-weight:700;display:grid;gap:7px}input{font:inherit;padding:14px 15px;border:2px solid #cdbd9f;border-radius:12px;background:#fffaf0}
button{font:700 1rem "DM Sans";border:0;border-radius:999px;padding:15px 22px;background:var(--green);color:white;cursor:pointer;touch-action:manipulation}button:active{transform:scale(.98)}
.ghost{background:transparent;color:var(--green);border:2px solid var(--green);margin-top:14px}.consent{display:grid;grid-template-columns:22px 1fr;align-items:start;font-size:.82rem;font-weight:400}.consent input{width:18px;height:18px;margin-top:2px}.error{color:var(--red);min-height:1.2em}
.hud{width:min(1100px,100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.hud div{display:grid}.hud span{font-size:.65rem;letter-spacing:.12em;font-weight:700;color:#806a52}.hud strong{font:700 1.25rem "Space Grotesk"}.hud .small{padding:9px 15px;font-size:.85rem}
#gameWrap{position:relative;width:min(1100px,100%);height:min(72vh,760px);min-height:390px;overflow:hidden;border-radius:20px;background:#201711;box-shadow:0 15px 50px #2b1e151c;touch-action:none}canvas{display:block;width:100%;height:100%}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#173f2bdd;color:white;text-align:center;padding:25px;font-size:clamp(1.4rem,5vw,3rem);font-weight:700}.overlay button{margin-top:20px;background:#d68a20;color:#241b15}
.legend{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px 18px;margin:12px auto 0;padding:8px 16px;border-radius:999px;background:#f3e8cf;border:1px solid #d7c7a4;color:#5d4b35;font-size:.82rem;font-weight:700;max-width:100%;overflow-x:auto}.legend-item{display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0}.legend-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid #cdbd9f;flex-shrink:0}.legend-swatch.player{background:#173f2b;border-color:#0f2a1c}.legend-swatch.hide{background:#dce9c9;border-color:#2f6d4d}.legend-swatch.key{background:#e0b24d;border-color:#7a5c14;border-radius:5px}.legend-swatch.sleep{background:#6fa8dc;border-color:#3f6f9c}.legend-swatch.scare{background:#b06bd6;border-color:#7a3fa8}.legend-swatch.exit{background:#d68a20;border-color:#b06f14;border-radius:5px}.legend-swatch.guard{background:#a9432f;border-color:#8a3221}.controls{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;margin:12px auto 2px;flex-wrap:nowrap}.controls button{flex:0 0 60px;padding:14px 0;border-radius:15px;font-size:1.3rem}
.tip{font-size:.78rem;text-align:center;color:#6e5b47;max-width:650px;margin:4px auto}#board{justify-content:flex-start;padding-top:8vh}#scores{width:min(650px,100%);padding:0;list-style:none}#scores li{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:15px 5px;border-bottom:1px solid #d9c9ad}#scores li::before{counter-increment:rank;content:counter(rank);font:700 1.2rem "Space Grotesk";color:var(--gold)}
@media(max-width:650px){.screen{padding:16px}#gameWrap{height:62vh;min-height:350px;border-radius:14px}}