: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;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)}.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}.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-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}@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}.attack-slash{position:absolute;left:50%;top:50%;width:116px;height:116px;margin:-58px 0 0 -58px;border:7px solid transparent;border-top-color:var(--pc);border-right-color:var(--pc);border-radius:50%;z-index:6;pointer-events:none;animation:slash .22s ease-out forwards}@keyframes slash{0%{opacity:.95;transform:rotate(calc(var(--angle) + 8deg)) scale(.55)}to{opacity:0;transform:rotate(calc(var(--angle) + 55deg)) scale(1.05)}}.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}.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}@keyframes pop{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(.4)}to{transform:translate(-50%,-80%) rotate(-12deg) scale(1.25);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:center;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:6px}.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}.attack-btn,.revive-btn{min-width:110px;height:54px}.attack-btn{position:relative;overflow:hidden}.attack-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{position:relative;z-index:1}.attack-btn.ready{box-shadow:0 0 0 3px #2ecc71a6,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:none}}