:root{--bg: #f7f0dc;--paper: #fff8e7;--ink: #241f1c;--muted: #746b60;--line: #241f1c;--accent: #ef476f;--blue: #3a86ff;--danger: #111}*{box-sizing:border-box}body{margin:0;font-family:Comic Sans MS,Segoe UI,system-ui,sans-serif;background:linear-gradient(rgba(36,31,28,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(36,31,28,.035) 1px,transparent 1px),var(--bg);background-size:24px 24px;color:var(--ink)}.app{max-width:980px;margin:0 auto;padding:16px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 18px}.logo{font-size:24px;font-weight:900;letter-spacing:.5px}.conn{font-size:12px;text-transform:uppercase;letter-spacing:1px;border:2px solid var(--line);border-radius:999px;padding:3px 9px;background:var(--paper)}.conn-open{color:#168a48}.conn-connecting{color:#9f6b00}.conn-closed{color:#b00020}.card{background:var(--paper);border:3px solid var(--line);border-radius:18px;padding:24px;box-shadow:8px 8px #241f1c38}h1{margin:0 0 8px}.muted{color:var(--muted);font-size:14px}.error{color:#b00020;font-weight:700}.field{display:block;margin:18px 0}.field>span{display:block;margin-bottom:8px;font-weight:700}input,button{font:inherit}input{background:#fffdf5;border:2px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font-size:16px;width:100%}.code-input{text-transform:uppercase;letter-spacing:4px;text-align:center;width:120px}button{cursor:pointer;touch-action:manipulation;border:2px solid var(--line);border-radius:10px;background:#fffdf5;color:var(--ink);padding:10px 16px;font-size:15px;font-weight:800;box-shadow:3px 3px #241f1c2e}button:hover:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px #241f1c2e}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--line);color:#fff}button.ghost{background:transparent;box-shadow:none}.actions{display:flex;flex-direction:column;gap:14px;margin-top:12px}.join-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.char-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.char-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid var(--line)}.tagline{font-size:15px;margin:0 0 6px}.step{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:12px}.home-card .field>span.step{margin-bottom:10px}.start-choices{display:flex;flex-direction:column;gap:14px}.choice{display:flex;flex-direction:column;gap:6px}.choice .muted{margin:0}button.big{padding:14px 18px;font-size:17px}.connecting{text-align:center}.char-card{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:12px 8px;border-color:var(--pc);border-width:3px;transition:transform .08s ease}.char-card:hover:not(:disabled){transform:rotate(-1deg) translate(1px,1px)}.char-card .char-face{font-size:24px;line-height:1.2;color:var(--pc);font-weight:900}.char-card .char-name{font-weight:900}.char-card .char-blurb{font-size:12px;color:var(--muted);font-weight:700}.char-selected{background:#fff0f4;box-shadow:inset 0 0 0 3px var(--pc),3px 3px #241f1c2e}.char-chip{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--pc);border:2px solid var(--line);color:#fff;font-weight:900;font-size:14px}.pl-name{font-weight:900}.copy-btn{padding:3px 10px;font-size:12px;margin-left:8px}.waiting{text-align:center;font-size:15px}.room-code{font-size:18px;margin-bottom:8px}.room-code strong{letter-spacing:4px;color:var(--accent)}.invite-link{margin:8px 0 4px;font-size:13px;color:var(--muted);background:#fffdf5}.revive-btn.holding{background:#fff0ba;box-shadow:inset 0 0 0 3px var(--accent),3px 3px #241f1c2e}.player-list{list-style:none;padding:0;margin:0}.player-list li{display:flex;align-items:center;gap:10px;padding:10px;border:2px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fffdf5;flex-wrap:wrap}.badge{font-size:11px;text-transform:uppercase;background:#ede2c8;padding:2px 8px;border-radius:12px;border:1px solid var(--line)}.badge.you{background:var(--blue);color:#fff}.level-row{display:flex;gap:10px;flex-wrap:wrap}.level{display:flex;flex-direction:column;gap:5px;text-align:left;flex:1 1 190px;max-width:260px}.level-selected{background:#fff0ba;box-shadow:inset 0 0 0 3px var(--accent),3px 3px #241f1c2e}.level-top{display:flex;align-items:center;gap:8px}.level-name{font-weight:900}.tier{font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:999px;border:2px solid var(--line);color:#fff}.tier-easy{background:#2ecc71}.tier-normal{background:#f1a208}.tier-hard{background:#ef476f}.arena-card{padding:16px}.arena-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.boss-panel{margin:10px 0 12px}.boss-name{font-weight:900;margin-bottom:5px}.boss-status{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}.boss-status strong{color:var(--ink)}.boss-tip{margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pattern-pill{display:inline-block;margin-right:8px;border:2px solid var(--line);border-radius:999px;padding:3px 10px;background:#fff0ba;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.range-hint{border:2px solid var(--line);border-radius:999px;padding:3px 10px;background:#fffdf5;font-weight:900}.range-ok{background:#d8ffe7;color:#0f6b38}.range-danger{background:#ffd5df;color:#9b102e;animation:dangerBlink .42s ease-in-out infinite alternate}.range-far{background:#e9f1ff;color:#1b5fb8}.range-down{background:#eee;color:#666}@keyframes dangerBlink{0%{transform:rotate(-1deg)}to{transform:rotate(1deg) scale(1.03)}}.hpbar{background:#fffdf5;border:3px solid var(--line);border-radius:999px;height:24px;overflow:hidden}.hpbar-fill{background:repeating-linear-gradient(45deg,#2ecc71,#2ecc71 14px,#f1c40f 14px,#f1c40f 28px,#ef476f 28px,#ef476f 42px);height:100%;transition:width .12s linear}.arena-stage{position:relative;width:100%;max-height:68vh;overflow:hidden;border:4px solid var(--line);border-radius:16px;background:radial-gradient(circle at 50% 28%,rgba(239,71,111,.08),transparent 28%),linear-gradient(rgba(36,31,28,.08) 2px,transparent 2px),linear-gradient(90deg,rgba(36,31,28,.06) 2px,transparent 2px),#fffdf5;background-size:auto,42px 42px,42px 42px,auto}.boss-zone{position:absolute;border-radius:50%;transform:none;pointer-events:none;z-index:1}.contact-zone{border:3px solid rgba(239,71,111,.62);background:#ef476f14;animation:contactPulse .7s ease-in-out infinite}@keyframes contactPulse{0%,to{opacity:.55}50%{opacity:.95}}.boss-sprite{position:absolute;transform:translate(-50%,-50%);width:130px;height:100px;display:grid;place-items:center;z-index:4}.boss-face{position:relative;z-index:2;font-size:clamp(22px,4vw,42px);font-weight:900;border:4px solid var(--line);background:#d9d2ff;border-radius:46% 54% 45% 55%;padding:20px 16px;transform:rotate(-2deg);animation:bossIdle 2.6s ease-in-out infinite}@keyframes bossIdle{0%,to{transform:rotate(-2deg) scale(1)}50%{transform:rotate(1.5deg) scale(1.03)}}.boss-shadow{position:absolute;bottom:4px;width:105px;height:20px;background:#241f1c29;border-radius:50%}.boss-sprite.boss-hit .boss-face{background:#ffd0d8;animation:bossHit .2s ease-out}.boss-sprite.boss-enraged .boss-face{background:#ffb5c5;border-style:dashed;box-shadow:0 0 0 7px #ef476f2e}@keyframes bossHit{0%{transform:rotate(-2deg)}30%{transform:rotate(4deg) translate(-5px,3px)}60%{transform:rotate(-5deg) translate(5px,-2px)}to{transform:rotate(-2deg)}}.player-token{position:absolute;transform:translate(-50%,-50%);z-index:5;text-align:center;min-width:78px;pointer-events:none}.player-body{margin:0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pc);border:3px solid var(--line);color:#fff;font-weight:900}.player-label{margin-top:2px;font-size:12px;font-weight:900;text-shadow:1px 1px #fffdf5;white-space:nowrap}.player-token.dead{filter:grayscale(.95);opacity:.8}.player-token.blink .player-body{animation:blink .35s alternate infinite}.muzzle-flash{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;z-index:6;pointer-events:none;border:3px solid var(--line);background:#fff0ba;opacity:.95;animation:muzzlePop .14s ease-out forwards}.muzzle-flash.shotgun{width:38px;height:24px;margin:-12px 0 0 -19px;border-radius:999px;background:#dff0ff}.muzzle-flash.assault{width:22px;height:22px;background:#d8ffe7}.muzzle-flash.sniper{width:44px;height:9px;margin:-5px 0 0 -22px;border-radius:999px;background:#fff0ba}@keyframes muzzlePop{0%{opacity:.95;transform:scale(.45) rotate(-8deg)}to{opacity:0;transform:scale(1.5) rotate(9deg)}}.bullet{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border:2px solid var(--line);border-radius:50%;background:var(--bc);z-index:3;pointer-events:none;box-shadow:2px 2px #241f1c2e}.bullet-shotgun{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}.bullet-assault{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}.bullet-sniper{width:24px;height:7px;margin:-3.5px 0 0 -12px;border-radius:999px;background:linear-gradient(90deg,#fffdf5,var(--bc))}.enemy-shot{position:absolute;transform:translate(-50%,-50%);border:3px solid var(--line);border-radius:50%;background:#241f1c;z-index:3;pointer-events:none;box-shadow:0 0 0 5px #ef476f24,2px 2px #241f1c33}.enemy-shot:after{content:"";position:absolute;top:25%;right:25%;bottom:25%;left:25%;border-radius:50%;background:#fffdf5;opacity:.35}.aim-mark{border-style:dashed}.corner-curse{box-shadow:inset 0 0 0 4px #ef476f38}.quake-ring{border-style:double}.minihp,.revive-meter{width:54px;height:6px;margin:2px auto 0;border:1px solid var(--line);background:#fffdf5}.minihp span{display:block;height:100%;background:#2ecc71}.revive-meter span{display:block;height:100%;background:var(--blue)}@keyframes blink{0%{opacity:.45}to{opacity:1}}.hazard{position:absolute;z-index:2;pointer-events:none}.ring,.ring-telegraph{transform:none;border-style:solid;border-radius:50%;background:transparent}.ring{border-color:#111111d1;box-shadow:0 0 0 999px #11111104}.ring-telegraph{border-color:#ef476fb3;border-style:dashed}.lane,.lane-telegraph{border-radius:8px}.vertical-lane{border-radius:14px}.phase-ring{box-shadow:0 0 0 8px #ef476f1f}.spiral-dot{border-style:dotted}.lane{background:#111111b8;border:2px solid var(--line)}.lane-telegraph{background:#ef476f47;border:3px dashed var(--accent)}.circle,.circle-telegraph{border-radius:50%}.circle{background:#111111b8;border:2px solid var(--line)}.circle-telegraph{background:#ef476f3d;border:3px dashed var(--accent)}.ring-telegraph,.lane-telegraph,.circle-telegraph{animation:telegraph .5s ease-in-out infinite}@keyframes telegraph{0%,to{opacity:.55}50%{opacity:1}}.warn-banner{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:15;display:flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:3px solid var(--line);border-radius:999px;padding:7px 18px;font-weight:900;font-size:clamp(13px,2.4vw,17px);box-shadow:3px 3px #241f1c47;white-space:nowrap;animation:warnPulse .5s ease-in-out infinite}.warn-bang{font-size:1.25em}@keyframes warnPulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.06)}}.effect{position:absolute;transform:translate(-50%,-50%) rotate(-10deg);z-index:9;font-weight:900;font-size:22px;color:var(--accent);text-shadow:2px 2px #fffdf5;pointer-events:none}.effect.hit{font-size:30px;animation:pop .22s ease-out forwards}.effect.phase{font-size:34px;color:#ef476f;animation:phasePop 1.05s ease-out forwards}.effect.pellet-poof{font-size:22px;color:var(--muted);animation:poof .12s ease-out forwards}.effect[class*=muzzle-]{width:18px;height:18px;border-radius:50%;background:#fff0ba;border:2px solid var(--line);animation:poof .12s ease-out forwards}@keyframes pop{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(.4)}to{transform:translate(-50%,-80%) rotate(-12deg) scale(1.25);opacity:0}}@keyframes phasePop{0%{transform:translate(-50%,-50%) rotate(-6deg) scale(.65)}to{transform:translate(-50%,-95%) rotate(8deg) scale(1.8);opacity:0}}@keyframes poof{0%{transform:translate(-50%,-50%) scale(.35);opacity:1}to{transform:translate(-50%,-50%) scale(1.4);opacity:0}}.effect.revive{color:var(--blue)}.effect.zap{color:#d97b00;font-size:26px}.effect.whiff{color:var(--muted);font-size:14px}.end-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-content:center;text-align:center;background:#fff8e7e0;padding:20px}.end-overlay h2{font-size:clamp(32px,7vw,70px);margin:0 0 6px}.arena-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;user-select:none;-webkit-user-select:none;touch-action:none}.arena-controls button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:8px;flex:0 0 auto}.dpad button{width:58px;height:58px;padding:0;font-size:22px;font-weight:900}.dpad button.held,.dpad button:active{background:#fff0ba;transform:translate(1px,1px);box-shadow:inset 0 0 0 3px var(--accent),2px 2px #241f1c2e}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.action-cluster{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto}.attack-btn,.dash-btn,.revive-btn{min-width:112px;min-height:64px;height:64px;font-size:16px}.attack-btn,.dash-btn{position:relative;overflow:hidden}.attack-btn .cooldown-fill,.dash-btn .cooldown-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#241f1c52;transform-origin:right center;transition:transform .08s linear;pointer-events:none}.attack-btn .btn-label,.dash-btn .btn-label{position:relative;z-index:1}.attack-btn.ready,.dash-btn.ready{box-shadow:0 0 0 3px #2ecc71a6,3px 3px #241f1c2e}.attack-btn.holding,.dash-btn.holding{background:#fff0ba;box-shadow:inset 0 0 0 3px var(--accent),3px 3px #241f1c2e}.party-strip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px;font-size:13px;font-weight:800}.party-strip span{border:2px solid var(--line);border-radius:999px;padding:4px 10px;background:#fffdf5}.party-strip .down{background:#eee;color:#777}.status-footer{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:14px;padding-top:10px;border-top:2px dashed var(--line);font-size:12px;font-weight:800;color:var(--muted)}.status-footer strong{color:var(--accent);letter-spacing:2px}.status-footer .phase{text-transform:uppercase;border:2px solid var(--line);border-radius:999px;padding:1px 8px;background:#fffdf5;color:var(--ink)}.status-footer .dim{color:#9a9086;font-weight:700}@media (max-width: 640px){.app{padding:10px}.card{padding:16px;box-shadow:4px 4px #241f1c38}.char-grid{grid-template-columns:1fr}.arena-stage{max-height:46vh}.arena-card{padding:12px}.arena-head p.muted{display:none}.arena-controls{position:sticky;bottom:0;z-index:5;margin-top:10px;padding:8px 0 4px;background:linear-gradient(180deg,rgba(255,248,231,0),rgba(255,248,231,.95) 28%,var(--paper))}.dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px)}.dpad button{width:64px;height:64px;font-size:24px}.attack-btn,.dash-btn,.revive-btn{min-width:104px;min-height:68px;height:68px}.status-footer .controls-hint{display:none}}.ready-row{display:flex;gap:12px;align-items:center;margin:18px 0;flex-wrap:wrap}.badge.ready{background:#d8ffe7;border-color:#168a48;color:#0f6b38}button:disabled.primary{opacity:.55;transform:none;box-shadow:3px 3px #241f1c2e}.tiny-link{border:0;background:transparent;color:#6c5ce7;text-decoration:underline;cursor:pointer;font:inherit;padding:0}