html,body{-webkit-user-select:none;user-select:none;width:100%;height:100%;margin:0}body{background:#20242a;font-family:system-ui,sans-serif;overflow:hidden}button,select{font:inherit}label{color:#fff;font-size:13px}#game-shell{width:100vw;height:100vh;position:relative;overflow:hidden}#game-root{z-index:0;width:100%;height:100%;position:absolute;inset:0}#game-root canvas{width:100%;height:100%;display:block}#ui-root{z-index:10;pointer-events:none;position:absolute;inset:0}.placeholder-view{color:#111;background:#87ceeb;place-items:center;width:100%;height:100%;font-size:24px;display:grid}.settings-overlay{z-index:40;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:auto;background:linear-gradient(#181c26eb,#0a0c12f0);border:1px solid #ffffff1a;border-radius:18px;align-items:center;gap:14px;padding:10px 16px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #00000073,0 0 24px #ffcc330d}.settings-overlay label{color:#ffffffb8;letter-spacing:.4px;text-transform:uppercase;font-size:13px;font-weight:700}.settings-overlay select{color:#fff;cursor:pointer;appearance:none;background:linear-gradient(#ffffff0f,#ffffff05);border:1px solid #ffffff1f;border-radius:12px;outline:none;height:38px;padding:0 36px 0 14px;font-size:14px;font-weight:700;transition:border-color .14s,background .14s,box-shadow .14s;box-shadow:inset 0 1px #ffffff0f,0 4px 14px #0000003d}.settings-overlay select:hover,.settings-overlay select:focus{background:linear-gradient(#ffcc3314,#ffcc3308);border-color:#fc39;box-shadow:0 0 18px #ffcc331f,0 6px 18px #0000004d}#engine-select{width:170px}.locale-flags{align-items:center;gap:8px;display:flex}.locale-flag{cursor:pointer;background:linear-gradient(#ffffff14,#ffffff08);border:1px solid #ffffff24;border-radius:10px;place-items:center;width:38px;height:32px;padding:0;font-size:20px;line-height:1;transition:transform .12s,border-color .14s,background .14s,box-shadow .14s;display:grid;box-shadow:inset 0 1px #ffffff0f,0 4px 14px #00000038}.locale-flag:hover{background:linear-gradient(#ffcc331a,#ffcc330a);border-color:#ffcc3373;transform:translateY(-1px);box-shadow:0 0 16px #ffcc331a,0 6px 18px #00000047}.locale-flag.active{background:linear-gradient(#fc33,#ffcc3312);border-color:#ffcc33bf;box-shadow:0 0 18px #ffcc3329,0 6px 18px #0000004d}.audio-toggles{align-items:center;gap:8px;display:flex}.audio-toggle{cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:transform .12s,background .12s,border-color .12s;display:flex;position:relative}.audio-toggle:hover{background:#ffffff1f;border-color:#fff3;transform:translateY(-1px)}.audio-toggle:active{transform:translateY(0)}.audio-icon{-webkit-user-select:none;user-select:none;pointer-events:none;font-size:18px;line-height:1}.audio-cross{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:10px;line-height:1;transition:opacity .12s,transform .12s;position:absolute;bottom:1px;right:2px;transform:scale(.7)}.audio-toggle.muted .audio-cross{opacity:1;transform:scale(1)}.audio-toggle.muted{opacity:.7}.hud{z-index:15;pointer-events:none;flex-wrap:wrap;gap:12px;display:flex;position:absolute;top:18px;left:18px;right:18px}.hud-player{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto;background:linear-gradient(#181c26db,#080a10e6);border:1px solid #ffffff1f;border-radius:18px;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:12px;width:min(240px,100vw - 36px);padding:10px 12px;display:grid;box-shadow:0 12px 34px #0000006b,0 0 24px #ffcc330a}.hud-player-local{border-color:#ffcc33b3;box-shadow:0 12px 34px #0000006b,0 0 24px #ffcc3324}.hud-player-portrait{object-fit:contain;width:58px;height:58px}.hud-player-content{gap:8px;min-width:0;display:grid}.hud-player-top{justify-content:space-between;align-items:center;gap:10px;min-width:0;display:flex}.hud-player-top strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;font-size:15px;font-weight:900;overflow:hidden}.hud-player-score{color:#fc3;text-shadow:0 0 12px #ffcc333d;flex:none;font-size:14px;font-weight:900}.hud-hp-row{grid-template-columns:auto 120px;align-items:center;gap:8px;display:grid}.hud-hp-icon{filter:drop-shadow(0 0 8px #ff506466);font-size:16px}.hud-hp-segments{gap:4px;width:120px;height:12px;display:grid}.hud-hp-segment{background:#00000059;border:1px solid #ffffff14;border-radius:5px;min-width:0;height:100%}.hud-hp-segment-active{background:linear-gradient(90deg,#ff475f,#fc3);border-color:#ffcc3352;box-shadow:0 0 10px #ff506459}.character-select{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;background:radial-gradient(circle at 50% 20%,#ffcc331f,#0000 34%),linear-gradient(#060a10eb,#020408fa);place-items:center;padding:clamp(12px,2vw,24px) clamp(16px,3vw,32px) 96px;display:grid;position:fixed;inset:0;overflow:auto}.character-select[hidden]{display:none}.character-select-panel{width:min(920px,100vw - 32px)}.character-select-title{color:#fff;text-align:center;letter-spacing:1px;text-shadow:0 4px 18px #00000073,0 0 24px #ffcc331f;margin:0 0 clamp(10px,2vh,18px);font-size:clamp(32px,5vw,54px);font-weight:900;line-height:1}.character-carousel{grid-template-columns:clamp(48px,7vw,72px) minmax(0,1fr) clamp(48px,7vw,72px);align-items:center;gap:clamp(10px,2vw,24px);display:grid}.character-carousel-arrow{color:#fc3;cursor:pointer;pointer-events:auto;background:linear-gradient(#ffffff14,#ffffff05);border:1px solid #ffcc3347;border-radius:999px;justify-content:center;align-items:center;width:clamp(48px,7vw,72px);height:clamp(48px,7vw,72px);padding:0 0 6px;font-size:clamp(40px,6vw,58px);line-height:1;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s;display:flex;box-shadow:0 16px 36px #0000006b,0 0 24px #ffcc3314}.character-carousel-arrow span{transform:translateY(-3px)}.character-carousel-arrow:hover,.character-carousel-arrow:focus-visible{background:#ffcc3314;border-color:#ffcc33e6;outline:none;transform:scale(1.06);box-shadow:0 20px 44px #00000085,0 0 32px #ffcc332e}.character-card{color:#fff;cursor:pointer;text-align:center;pointer-events:auto;background:radial-gradient(circle at 50% 14%,#ffcc3329,#0000 32%),linear-gradient(#ffffff0f,#ffffff04);border:1px solid #ffcc3359;border-radius:clamp(22px,3vw,34px);gap:clamp(8px,1.6vh,16px);padding:clamp(16px,3vw,30px) clamp(16px,3vw,34px);transition:transform .16s,border-color .16s,box-shadow .16s;display:grid;overflow:hidden;box-shadow:0 34px 90px #0000008f,0 0 44px #ffcc3314}.character-card:hover,.character-card:focus-visible{border-color:#fc3;outline:none;box-shadow:0 40px 100px #0000009e,0 0 54px #ffcc3329}.character-card-image{object-fit:contain;filter:drop-shadow(0 24px 30px #0000007a)drop-shadow(0 0 34px #ffcc331a);justify-self:center;width:clamp(140px,24vh,250px);height:clamp(140px,24vh,250px)}.character-card strong{letter-spacing:1px;text-shadow:0 4px 14px #00000073,0 0 20px #ffffff14;font-size:clamp(34px,5vh,54px);font-weight:900;line-height:1}.character-divider{align-items:center;gap:12px;display:flex}.character-divider span{background:linear-gradient(90deg,#0000,#ffcc3373,#0000);flex:1;height:1px}.character-divider-paw{color:#fc3;filter:drop-shadow(0 0 8px #ffcc3359);font-size:clamp(16px,2vw,20px)}.character-card dl{text-align:left;gap:clamp(8px,1.5vh,14px);margin:0;display:grid}.character-card dl div{background:linear-gradient(90deg,#ffffff0a,#ffffff03);border:1px solid #ffffff14;border-radius:18px;grid-template-columns:minmax(110px,160px) 1fr;align-items:center;gap:clamp(10px,2vw,16px);padding:clamp(10px,1.6vh,16px) clamp(12px,2vw,18px);display:grid}.character-card dt{color:#fff;align-items:center;font-size:clamp(15px,2vw,18px);font-weight:800;display:flex}.character-stat-icon{justify-content:center;align-items:center;width:clamp(22px,3vw,28px);margin-right:12px;font-size:clamp(18px,3vw,24px);display:inline-flex}.character-card dd{color:#fc3;letter-spacing:clamp(2px,.5vw,4px);text-shadow:0 0 14px #ffcc334d;margin:0;font-size:clamp(20px,3vw,28px);font-weight:900}.character-controls-hint{opacity:.72;justify-content:center;align-items:center;gap:clamp(12px,2vw,22px);margin-top:4px;display:flex}.character-control-group{color:#ffffffd1;align-items:center;gap:10px;font-size:clamp(13px,1.8vw,15px);font-weight:700;display:flex}.character-control-separator{background:#ffffff1f;width:1px;height:28px}.character-controls-hint kbd{color:#fff;background:linear-gradient(#ffffff14,#ffffff08);border:1px solid #ffffff24;border-radius:10px;padding:6px 12px;font-size:clamp(12px,1.7vw,14px);font-weight:800;box-shadow:inset 0 1px #ffffff14,0 6px 18px #00000057}@media (width<=720px){.character-carousel{grid-template-columns:48px minmax(0,1fr) 48px}.character-controls-hint{flex-direction:column;gap:10px}.character-control-separator{display:none}.character-card dl div{grid-template-columns:1fr;gap:6px}}@media (height<=720px){.character-select{padding-bottom:82px}.character-card{gap:8px}.character-card-image{width:clamp(120px,20vh,180px);height:clamp(120px,20vh,180px)}.character-card strong{font-size:clamp(28px,4vh,42px)}.character-controls-hint{margin-top:0}}@media (height<=580px) and (orientation:landscape){.character-select{place-items:start center;padding-top:10px;padding-bottom:82px}.character-select-title{margin-bottom:8px;font-size:clamp(24px,6vh,36px)}.character-carousel{grid-template-columns:54px minmax(0,1fr) 54px}.character-card{grid-template-columns:minmax(140px,220px) minmax(260px,1fr);grid-template-areas:"image name""image stats""image controls";align-items:center;gap:10px 18px;padding:14px 18px}.character-card-image{grid-area:image;width:min(24vw,180px);height:min(32vh,180px)}.character-card strong{text-align:left;grid-area:name;align-self:end;font-size:clamp(28px,7vh,40px)}.character-divider{display:none}.character-card dl{grid-area:stats}.character-controls-hint{grid-area:controls;justify-content:flex-start}.character-card dl div{grid-template-columns:120px 1fr;padding:8px 12px}}.game-over-popup{z-index:30;pointer-events:auto;background:#0000007a;place-items:center;display:grid;position:absolute;inset:0}.game-over-popup[hidden]{display:none!important}.game-over-card{background:linear-gradient(#232734f5,#10121af5);border:1px solid #ffffff2e;border-radius:28px;justify-items:center;gap:18px;width:min(360px,100vw - 32px);padding:28px;display:grid;box-shadow:0 24px 80px #00000073}.game-over-card h2{color:#fff;text-align:center;margin:0;font-size:28px}.game-over-cat{object-fit:contain;image-rendering:auto;width:180px;height:180px}.game-over-score{color:#fff;font-size:22px;font-weight:700}.game-over-restart{color:#151515;cursor:pointer;background:#ffd166;border:0;border-radius:999px;min-width:160px;padding:12px 20px;font-size:16px;font-weight:800}.game-over-restart:hover{filter:brightness(1.08);transform:translateY(-1px)}
