:root{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;color:#222b26;background:#f9fbf3;font-weight:650;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #559a2b;outline-offset:4px}button{border:0}button:active:not(:disabled){transform:scale(.97)}[hidden]{display:none!important}#app{max-width:480px;margin:auto;padding:16px 22px max(20px,env(safe-area-inset-bottom));min-height:100dvh}header{height:54px;display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:18px}.wordmark{text-decoration:none;font-size:19px;font-weight:950;letter-spacing:-.9px;line-height:1;color:#222b26}.wordmark span{display:block;font-size:24px;letter-spacing:-1px}.close{width:40px;height:40px;border-radius:12px;background:white;box-shadow:0 3px 8px #222b2620;display:grid;place-items:center}.close img{width:20px;height:20px}.sound{background:#eaf0e2;border-radius:20px;padding:9px 12px;font-size:12px}.panel{text-align:center}.hero{height:200px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#c2f888 0,transparent 65%);margin:10px -20px 12px}.hero img{width:180px;height:180px;object-fit:contain;transform:rotate(-9deg)}.hero img+img{width:150px;height:150px;margin-left:-45px;transform:rotate(10deg) translateY(24px)}h1{font-size:34px;letter-spacing:-1.1px;line-height:1.04;margin:8px 0 13px;font-weight:900}h2{font-size:27px}.eyebrow{font-size:11px;font-weight:850;letter-spacing:2px;margin:18px 0 8px;color:#607454}.subtitle{font-size:15px;color:#657369;line-height:1.5;margin:0 0 23px}form{text-align:left}label,legend{font-size:14px;font-weight:800}input{width:100%;background:white;border:2px solid #dce4d5;border-radius:15px;padding:15px;margin:8px 0 18px;outline:none}input:focus{border-color:#222b26}fieldset{border:0;margin:0 0 24px;padding:0}.avatars{display:flex;gap:10px;margin-top:10px}.avatar{width:calc((100% - 30px)/4);aspect-ratio:1;background:white;border-radius:18px;border:3px solid transparent;box-shadow:0 4px 12px #222b260b}.avatar[aria-checked=true]{border-color:#222b26;background:#d9fbbd}.avatar img{width:100%;height:100%;object-fit:contain}.primary,.secondary{width:100%;min-height:60px;padding:13px 18px;border-radius:20px;font-size:20px;font-weight:850;margin-top:12px}.primary{background:#222b26;color:white}.secondary{background:white;border:3px solid #222b26}.fine{font-size:12px;color:#657369;line-height:1.5;margin:18px 0;text-align:center}#lobby,#results{text-align:center}.seats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.seat{border-radius:24px;background:white;box-shadow:0 4px 14px #222b2610;min-height:170px;padding:10px;position:relative}.seat img{width:100px;height:105px;object-fit:contain}.seat strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}.seat small{color:#657369}.seat.empty{background:transparent;border:2px dashed #cbd4c2;color:#9eac96;display:grid;place-content:center;font-size:30px}.seat .badge{position:absolute;right:10px;top:10px;border-radius:15px;background:#82f33c;padding:4px 7px;font-size:10px}.seat.ready{box-shadow:0 0 0 2px #82f33c}.seat.counting img{animation:happy 850ms ease-in-out infinite alternate}.seat .chosen{width:30px;height:30px;position:absolute;bottom:50px;right:14px}#lobby-countdown{font-size:26px;margin-bottom:12px}.game-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}#timer{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}.tag{font-size:10px;letter-spacing:1px;background:#e8efdf;border-radius:15px;padding:7px 11px}.roster{display:flex;gap:5px;justify-content:space-around;margin:10px 0}.roster .player{min-width:0;text-align:center;flex:1}.player img{height:40px;width:42px;object-fit:contain}.player span{display:block;font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.player.out{opacity:.4}canvas{display:block;width:100%;aspect-ratio:5/6;border-radius:13px;touch-action:none}#controls{display:flex;justify-content:space-around;align-items:center;height:174px;gap:16px;padding-top:12px;touch-action:none;user-select:none;-webkit-user-select:none}.dpad{display:grid;width:150px;height:150px;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:0;filter:drop-shadow(0 3px 0 #222b2640)}.dpad button,.dpad span{background:#3c4442;color:#f9fbf3;font-size:38px;font-weight:900;line-height:1;padding:0}.dpad button:nth-child(1){grid-column:2;border-radius:12px 12px 0 0}.dpad button:nth-child(2){grid-column:1;grid-row:2;border-radius:12px 0 0 12px}.dpad span{grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2;border-radius:0 12px 12px 0}.dpad button:nth-child(5){grid-column:2;grid-row:3;border-radius:0 0 12px 12px}.weapons{display:flex;gap:13px;align-items:center}.weapon{position:relative;border-radius:50%;width:76px;height:76px;outline:2px solid #cbd4c2;border:3px solid white;padding:10px;background:#d6d5ff;box-shadow:0 2px 5px #222b2614}.weapon.bomb{background:#82f33c;width:86px;height:86px;align-self:flex-start}.weapon img{width:100%;height:100%;object-fit:contain}.special{margin-top:55px}#charges,#reserve{position:absolute;left:-7px;top:-9px;min-width:26px;height:26px;display:grid;place-items:center;background:#fff;border-radius:50%;border:2px solid #222b26;font-size:14px}#reserve{left:14px;top:-28px;width:33px;height:33px;padding:2px}.keyboard{text-align:center;font-size:11px;color:#7a8479;margin:12px 0 0}#spectating{font-size:14px;text-align:center}.rank{display:flex;gap:13px;align-items:center;background:white;box-shadow:0 3px 10px #222b2612;border-radius:17px;padding:10px 16px;margin:12px 0}.rank img{width:65px;height:65px;object-fit:contain}.rank .place{font-size:25px}.rank div{flex:1;text-align:left}.rank small{display:block;color:#657369;font-size:12px}.rank.you{outline:2px solid #82f33c}#connection,#error{border-radius:15px;padding:12px 16px;background:#fff1c7;font-size:13px;line-height:1.5}#error{background:#ffe3df}dialog{border:0;border-radius:24px;padding:26px;max-width:360px;background:#f9fbf3;box-shadow:0 14px 60px #0004}dialog::backdrop{background:#222b2680}@keyframes happy{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-5px) rotate(3deg)}}@media(min-width:700px){#app{padding-top:28px}.hero{height:230px}.hero img{width:210px;height:210px}#game{max-width:390px;margin:auto}}@media(max-width:370px){#app{padding:12px 14px}.dpad{width:130px;height:130px}.weapon{width:65px;height:65px}.weapon.bomb{width:74px;height:74px}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Same 32 pt clipped slot, border and vertical transition as the solo lobby. */
.seat .roulette-slot{position:absolute;top:20px;right:16px;width:32px;height:32px;overflow:hidden;background:#f9fbf3;border:1.8px solid #a4a4a1;border-radius:10px}
.seat .roulette-slot img{position:absolute;inset:0;width:100%;height:100%;padding:4px;object-fit:contain}
.seat .roulette-slot .incoming{animation:roulette-in .1s ease-out both}
.seat .roulette-slot .outgoing{animation:roulette-out .1s ease-out both}
@keyframes roulette-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes roulette-out{from{transform:translateY(0)}to{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){.seat .roulette-slot img{animation:none}.seat .roulette-slot .outgoing{display:none}}