@font-face{font-family:Yoster;src:local("Yoster"),local("Yoster Island"),url(../fonts/yoster.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--font-hud: "Yoster", system-ui, sans-serif}body{margin:0;background:black;overflow:hidden;font-family:var(--font-hud)}canvas{display:block;position:relative;z-index:0;touch-action:none}#game{display:block;width:min(100vw,100vh * 16 / 9);height:min(100vh,100vw * 9 / 16);width:min(100vw,100dvh * 16 / 9);height:min(100dvh,100vw * 9 / 16);margin-left:auto;margin-right:auto;touch-action:none}.mobile-controls{position:fixed;inset:0;z-index:15;pointer-events:none;touch-action:none}.mobile-controls.is-hidden{display:none}.mobile-magic-btn{position:absolute;left:max(10px,env(safe-area-inset-left,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:2;width:min(112px,26vw);height:min(112px,26vw);min-width:88px;min-height:88px;padding:0;border-radius:18px;border:3px solid rgba(255,224,120,.6);background:rgba(90,40,20,.92);color:#ffe89a;font-size:clamp(32px,9vw,44px);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;touch-action:manipulation;box-shadow:0 6px 20px #00000080;font-family:var(--font-hud)}.mobile-magic-btn:active{transform:scale(.96)}.mobile-stick-zone{position:absolute;right:max(8px,env(safe-area-inset-right,0px));bottom:max(8px,env(safe-area-inset-bottom,0px));width:184px;height:184px;z-index:1;pointer-events:auto;touch-action:none}.mobile-stick-base{position:absolute;left:50%;top:50%;width:142px;height:142px;margin-left:-71px;margin-top:-71px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.26);box-shadow:inset 0 1px #ffffff1f}.mobile-stick-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin-left:-31px;margin-top:-31px;border-radius:50%;background:rgba(248,248,255,.92);border:1px solid rgba(0,0,0,.12);box-shadow:0 4px 12px #0000006b;transform:translate(0);pointer-events:none}#ui{position:fixed;top:10px;left:10px;z-index:10;color:#fff;font-family:var(--font-hud);font-size:14px;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.85);max-width:min(280px,calc(100vw - 24px));pointer-events:none}.hud-magic-top{position:fixed;left:50%;top:8px;transform:translate(-50%);z-index:11;display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:14px;color:#fff;font-family:var(--font-hud);pointer-events:none}#hudMagic{font-size:clamp(32px,5vw,44px);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.02em;text-shadow:0 2px 6px rgba(0,0,0,.9)}.hud-press-f{font-size:clamp(13px,2vw,15px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff8c8;text-shadow:0 1px 4px rgba(0,0,0,.9);white-space:nowrap}.hud-press-f.is-hidden{display:none}.hud-deaths-top{position:fixed;top:10px;right:12px;z-index:11;color:#fff;font-family:var(--font-hud);font-size:13px;line-height:1.3;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none}.hud-deaths-top .hud-deaths-label{display:block;font-weight:600;opacity:.9}.hud-deaths-top .hud-deaths-num{display:block;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:2px}@media (orientation: portrait){.hud-magic-top{top:calc(min(100vh,100vw * 9 / 16) + max(6px,env(safe-area-inset-top,0px)));top:calc(min(100dvh,100vw * 9 / 16) + max(6px,env(safe-area-inset-top,0px)));left:max(10px,env(safe-area-inset-left,0px));right:auto;transform:none;justify-content:flex-start;gap:10px}#hudMagic{font-size:clamp(22px,6.5vw,34px)}.hud-deaths-top{top:calc(min(100vh,100vw * 9 / 16) + max(6px,env(safe-area-inset-top,0px)));top:calc(min(100dvh,100vw * 9 / 16) + max(6px,env(safe-area-inset-top,0px)))}#ui{top:calc(min(100vh,100vw * 9 / 16) + max(50px,env(safe-area-inset-top,0px)));top:calc(min(100dvh,100vw * 9 / 16) + max(50px,env(safe-area-inset-top,0px)));left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));max-width:none;font-size:11.5px;line-height:1.28}.hud-stats{row-gap:3px;column-gap:8px}.private-code-hud{top:calc(min(100vh,100vw * 9 / 16) + max(6px,env(safe-area-inset-top,0px)));top:calc(min(100dvh,100vw * 9 / 16) + max(6px,env(safe-area-inset-top,0px)))}}.hud-stats{display:grid;grid-template-columns:1fr minmax(5.5ch,max-content);column-gap:10px;row-gap:5px;align-items:baseline}.hud-stat-label{text-align:right;font-weight:600;opacity:.92}.hud-stat-num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}.hud-stat-text{font-weight:600;font-variant-numeric:normal}.hud-hint-wrap{margin-top:10px;pointer-events:auto}.hud-row{margin-bottom:6px}.magic-rows{display:flex;flex-direction:column;gap:4px}.magic-row{display:flex;align-items:center;gap:8px}.magic-label{width:72px;font-size:12px;opacity:.9}.magic-num{width:44px;font-size:12px;text-align:right;opacity:.95}.magic-track{flex:1;height:10px;background:rgba(40,40,40,.85);border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.magic-fill{height:100%;border-radius:4px;transition:width .08s linear}.magic-fill.priest{background:linear-gradient(90deg,#2a7fff,#9fd0ff);box-shadow:0 0 8px #64b4ff73}.magic-fill.brawler{background:linear-gradient(90deg,#ff8a2b,#ffd18a);box-shadow:0 0 8px #ffa03c66}.magic-fill.witch{background:linear-gradient(90deg,#7abf6a,#d8f0c8);box-shadow:0 0 8px #78c86466}.magic-fill.charmer{background:linear-gradient(90deg,#c060a0,#f8c0e0);box-shadow:0 0 8px #dc78b473}.hud-hint{margin-top:8px;padding:4px 10px;display:inline-block;font-weight:700;letter-spacing:.04em;color:#fff8c8;background:rgba(80,120,200,.35);border:1px solid rgba(180,220,255,.45);border-radius:6px;animation:hud-hint-pulse 1.1s ease-in-out infinite}@keyframes hud-hint-pulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.lobby-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);z-index:60;padding:20px;box-sizing:border-box}.lobby-overlay.is-hidden{display:none}.lobby-panel{width:min(440px,100%);padding:22px 20px;border-radius:10px;border:2px solid rgba(100,140,220,.4);background:linear-gradient(165deg,#0a0c18 0%,#060812 100%);color:#e8ecff;font-family:var(--font-hud);box-shadow:0 0 0 1px #0009,0 12px 40px #0000008c}.lobby-panel button{font-family:var(--font-hud)}.lobby-title{margin:0 0 18px;font-size:1.5rem;font-weight:800;letter-spacing:.04em;color:#ffd88a;text-shadow:0 0 14px rgba(255,180,80,.35)}.lobby-actions{display:flex;flex-direction:column;gap:10px}.lobby-btn{padding:12px 16px;border-radius:8px;border:1px solid rgba(180,200,255,.35);background:rgba(40,60,120,.55);color:#f4f6ff;font-family:var(--font-hud);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}.lobby-btn:hover:not(:disabled){background:rgba(60,90,160,.75);border-color:#ffdc8c73}.lobby-btn:disabled{cursor:not-allowed;opacity:.45;border-color:#7882a040;background:rgba(25,30,50,.45)}.lobby-btn-secondary{background:rgba(30,40,70,.5)}.lobby-btn-small{padding:10px 14px;font-size:.88rem;flex-shrink:0}.lobby-private-row{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}.lobby-private-row.is-hidden{display:none}.lobby-start-level-row{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.lobby-start-level-select{width:100%;max-width:200px;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);color:#fff;font-size:1rem;font-family:inherit}.lobby-start-level-hint{margin:8px 0 0;font-size:.72rem;line-height:1.35;opacity:.72;max-width:320px}.lobby-label{display:block;font-size:.8rem;margin-bottom:8px;opacity:.85}.lobby-private-fields{display:flex;gap:10px;align-items:center}.lobby-code-input{flex:1;min-width:0;padding:10px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);color:#fff;font-size:1.1rem;font-family:ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.private-code-hud{position:fixed;top:12px;right:12px;z-index:45;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,200,100,.5);background:rgba(20,12,8,.92);color:#ffe8c8;font-family:var(--font-hud);display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.private-code-hud-row{display:flex;align-items:center;gap:10px}.private-code-hud-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}.private-code-hud-value{font-size:1.25rem;font-weight:800;font-family:var(--font-hud);letter-spacing:.2em}.private-code-hud-copy{pointer-events:auto;padding:6px 12px;border-radius:6px;border:1px solid rgba(255,210,140,.45);background:rgba(80,55,30,.9);color:#fff0d0;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit}.private-code-hud-copy:hover{background:rgba(110,75,40,.95);border-color:#ffe6b48c}.private-code-hud-copy:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}.lobby-error{margin:14px 0 0;padding:10px 12px;border-radius:6px;background:rgba(120,20,40,.45);border:1px solid rgba(255,120,120,.35);color:#ffc8c8;font-size:.88rem;line-height:1.4}.lobby-error.is-hidden{display:none}.is-hidden{display:none!important}.role-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);z-index:50;padding:16px;box-sizing:border-box}.role-picker-panel{width:min(520px,calc(100vw - 32px));max-height:min(92vh,720px);overflow:auto;border:2px solid rgba(80,120,255,.35);border-radius:6px;box-shadow:0 0 0 1px #00000080,inset 0 0 40px #283c8c1f;padding:18px 16px 14px;color:#f0f4ff;font-family:var(--font-hud);background-color:#04060efa;background-image:linear-gradient(165deg,rgba(12,14,28,.96) 0%,transparent 58%),radial-gradient(circle at 20% 30%,rgba(255,255,200,.04) 0%,transparent 45%),repeating-linear-gradient(0deg,transparent,transparent 11px,rgba(80,100,180,.06) 11px,rgba(80,100,180,.06) 12px),repeating-linear-gradient(90deg,transparent,transparent 11px,rgba(80,100,180,.06) 11px,rgba(80,100,180,.06) 12px)}.role-picker-title{margin:0 0 14px;font-size:clamp(1.05rem,3.5vw,1.35rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#ffe08a;text-shadow:0 0 12px rgba(255,200,80,.35),0 2px 0 rgba(0,0,0,.85)}.role-picker-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}.role-card{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:10px 8px 12px;border-radius:4px;border:2px solid rgba(140,180,255,.28);background:rgba(0,0,0,.42);color:inherit;cursor:pointer;text-align:center;transition:border-color .15s ease,background .15s ease,transform .12s ease}.role-card:hover{border-color:#ffdc788c;background:rgba(30,40,80,.45);transform:scale(1.02)}.role-card:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}.role-demo-canvas{display:block;border-radius:3px;border:1px solid rgba(255,255,255,.1);background:#050508}.role-card-name{font-weight:800;font-size:.95rem;letter-spacing:.02em}.role-card-tag{font-size:.78rem;line-height:1.35;opacity:.88;max-width:11em}.role-picker-footnote{margin:12px 0 0;font-size:.72rem;line-height:1.45;opacity:.72;text-align:center}.audio-settings-wrap{position:fixed;bottom:12px;right:12px;top:auto;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:sans-serif}.audio-settings-gear{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(20,22,35,.82);color:#e6ebffeb;cursor:pointer;box-shadow:0 2px 10px #00000073;transition:background .15s ease,border-color .15s ease,transform .12s ease}.audio-settings-gear:hover{background:rgba(40,48,80,.9);border-color:#c8d2ff73}.audio-settings-gear:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}.audio-settings-gear-icon{width:22px;height:22px;display:block}.audio-settings-panel{min-width:220px;padding:12px 14px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(12,14,24,.94);color:#e8ecff;box-shadow:0 8px 28px #0000008c}.audio-settings-panel.is-hidden{display:none}.audio-settings-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:10px}.audio-settings-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}.audio-settings-row:last-child{margin-bottom:0}.audio-settings-label{flex:0 0 52px;opacity:.9}.audio-settings-row input[type=range]{flex:1;min-width:0;accent-color:#8ab4ff}