html,body,#root{-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;background:#ffd58f;height:100%;margin:0;font-family:Fredoka Variable,Comic Sans MS,system-ui,sans-serif;overflow:hidden}.stage{touch-action:none;position:fixed;inset:0}.hud{pointer-events:none;color:#fff;paint-order:stroke fill;-webkit-text-stroke:6px #2a2f45;text-shadow:0 4px #2a2f4559;font-weight:600;position:fixed;inset:0}.player{flex-direction:column;gap:4px;display:flex;position:absolute;top:18px}.player.police{align-items:flex-start;left:24px}.player.robber{align-items:flex-end;right:24px}.score{align-items:center;gap:10px;font-size:clamp(36px,5vw,72px);line-height:1;display:flex}.player.robber .score{flex-direction:row-reverse}.score svg{filter:drop-shadow(0 3px #2a2f4559)}.bolts{-webkit-text-stroke:0;text-shadow:0 3px #2a2f4559;gap:2px;font-size:clamp(22px,2.6vw,40px);line-height:1;display:flex}.bolts span{filter:grayscale()brightness(.55);transition:filter .2s}.bolts span.lit{filter:none}.bolts.is-on span.lit{animation:.25s ease-in-out infinite alternate flare}@keyframes flare{0%{transform:scale(1)}to{transform:scale(1.25)}}.pedals{pointer-events:none;gap:12px;display:flex;position:absolute;bottom:18px}.pedals.police{left:20px}.pedals.robber{right:20px}.pedals .pedal{pointer-events:auto;width:clamp(60px,8vw,100px);height:clamp(60px,8vw,100px);font:inherit;color:#2a2f45;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffffb8;border:0;border-radius:50%;font-size:clamp(24px,3.2vw,44px);box-shadow:0 6px #2a2f4559}.pedals.police .pedal{background:#c8dcffcc}.pedals.robber .pedal{background:#e6d2ffcc}.pedals .pedal:active{background:#ffd23f;transform:translateY(4px);box-shadow:0 2px #2a2f4559}.hint .sep{opacity:.6;padding:0 .3em}.card{text-align:center;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.card h1{letter-spacing:.02em;color:#ffd23f;margin:0;font-size:clamp(48px,9vw,140px);line-height:1}.card p{margin:.5em 0 0;font-size:clamp(24px,3.6vw,56px);animation:.9s ease-in-out infinite bounce}.card p.small{-webkit-text-stroke:4px #2a2f45;font-size:clamp(16px,2vw,30px);animation:none}.keys{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.keys .who{background:#2a2f4559;border-radius:20px;flex-direction:column;align-items:center;padding:.4em .9em;display:flex}.keys .who b{font-size:clamp(22px,3vw,44px)}.keys .who.police b{color:#9ec2ff}.keys .who.robber b{color:#d9b8ff}.keys .who p{margin-top:.3em;font-size:clamp(18px,2.4vw,36px);animation:none}.keys .who p.small{opacity:.85;margin-top:.2em}.hud:has(.menu:not(.start)){background:#2a2f4573}.menu{pointer-events:auto;flex-direction:column;align-items:center;gap:14px;display:flex}.menu h1{margin-bottom:.2em}.menu button{font:inherit;color:#2a2f45;-webkit-text-stroke:0;text-shadow:none;cursor:pointer;background:#fff;border:0;border-radius:999px;padding:.35em 1.1em;font-size:clamp(18px,2.2vw,34px);font-weight:600;box-shadow:0 6px #2a2f4559}.menu button.big{background:#ffd23f;padding:.3em 1.2em;font-size:clamp(28px,4.2vw,64px);box-shadow:0 8px #b8860b}.menu button:active{transform:translateY(4px);box-shadow:0 2px #2a2f4559}.menu .row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.menu p.small{margin-top:.4em}kbd{font:inherit;color:#2a2f45;-webkit-text-stroke:0;text-shadow:none;background:#ffd23f;border-radius:.25em;padding:0 .3em;box-shadow:0 4px #b8860b}.shout{white-space:nowrap;font-size:clamp(56px,11vw,180px);line-height:1;animation:.5s cubic-bezier(.2,1.6,.4,1) both pop;position:absolute;top:24%;left:50%;transform:translate(-50%,-50%)}.shout.win{color:#ffd23f}.shout.turbo{color:#c084fc;font-size:clamp(40px,7vw,110px)}.shout.side{font-size:clamp(34px,6vw,96px);top:42%}.shout.side.police{left:27%}.shout.side.robber{left:73%}.shout.bonk{color:#ff6b6b;animation:.35s cubic-bezier(.2,1.6,.4,1) both pop,.15s ease-in-out 4 wiggle}.shout.eek{color:#ff9ecb;animation:.35s cubic-bezier(.2,1.6,.4,1) both pop,.12s ease-in-out 6 wiggle}.shout.got{color:#ffd23f}.hint{-webkit-text-stroke:4px #2a2f45;opacity:.9;white-space:nowrap;font-size:clamp(16px,2vw,30px);position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.corner{pointer-events:auto;gap:12px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}.corner button{cursor:pointer;background:#ffffffb3;border:0;border-radius:50%;width:56px;height:56px;font-size:28px;box-shadow:0 4px #2a2f4559}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)rotate(-8deg)}to{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-4deg)}}@keyframes wiggle{0%,to{margin-left:0}50%{margin-left:12px}}
