html,body{-webkit-user-select:none;user-select:none;overscroll-behavior:none;width:100%;min-width:320px;height:100%;margin:0}body{touch-action:none;background:#20242a;font-family:system-ui,sans-serif;overflow:hidden}button,select{font:inherit}button{-webkit-tap-highlight-color:transparent}label{color:#fff;font-size:13px}:root{--ui-scale:clamp(.62, min(1vw, 1.8vh), 1)}#game-shell{width:100vw;height:100dvh;position:relative;overflow:hidden}#game-root{z-index:0;width:100%;height:100%;position:absolute;inset:0}#game-root canvas{touch-action:none;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:clamp(18px,4vw,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}.settings-overlay button.active{border-color:#fc3c;box-shadow:0 0 16px #ffcc3359,inset 0 0 12px #ffcc3326}.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}@media (width<=760px){.hud{top:calc(10px + env(safe-area-inset-top));gap:8px;left:10px;right:10px}.hud-player{border-radius:15px;grid-template-columns:44px minmax(0,1fr);gap:8px;width:min(210px,100vw - 20px);padding:8px 10px}.hud-player-portrait{width:44px;height:44px}.hud-player-content{gap:6px}.hud-player-top strong{font-size:13px}.hud-player-score{font-size:12px}.hud-hp-row{grid-template-columns:auto minmax(72px,1fr)}.hud-hp-segments{gap:3px;width:100%;height:10px}}@media (width<=420px){.hud-player{width:calc(50vw - 14px);min-width:0}.hud-player-top{gap:6px}}@media (height<=520px) and (orientation:landscape){.hud{max-width:52vw;top:8px;left:8px;right:auto}.hud-player{grid-template-columns:38px minmax(0,1fr);width:180px;padding:6px 8px}.hud-player-portrait{width:38px;height:38px}}.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(980px,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,110px) minmax(0,1fr) clamp(48px,7vw,110px);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:24px;justify-content:center;align-items:center;width:clamp(48px,7vw,110px);height:clamp(48px,7vw,140px);padding:0 0 6px;font-size:clamp(40px,6vw,90px);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}}.touch-controls{z-index:10;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none;display:none;position:fixed;inset:0}.touch-zone{pointer-events:auto;touch-action:none;position:absolute}.touch-zone-jump{width:100%;height:50%;top:0;left:0}.touch-zone-left{width:50%;height:50%;bottom:0;left:0}.touch-zone-right{width:50%;height:50%;bottom:0;right:0}.touch-hint{color:#ffffff2e;text-shadow:0 0 12px #ffffff26,0 0 24px #ffffff14;pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:120px;font-weight:700;display:flex;position:absolute}.touch-hint-jump{top:18%;left:50%;transform:translate(-50%)}.touch-hint-left{bottom:18%;left:20%}.touch-hint-right{bottom:18%;right:20%}@media (pointer:coarse){.touch-controls{display:block}}.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)}@media (width<=520px){.game-over-popup{box-sizing:border-box;padding:16px}.game-over-card{border-radius:24px;gap:14px;width:100%;max-width:340px;padding:22px}.game-over-card h2{font-size:24px}.game-over-cat{width:min(160px,42vw);height:min(160px,42vw)}.game-over-score{font-size:19px}.game-over-restart{width:100%}}@media (height<=520px) and (orientation:landscape){.game-over-card{grid-template-columns:auto 1fr;grid-template-areas:"cat title""cat score""cat button";justify-items:start;width:min(520px,100vw - 32px);padding:18px 22px}.game-over-card h2{grid-area:title}.game-over-cat{grid-area:cat;width:min(140px,28vh);height:min(140px,28vh)}.game-over-score{grid-area:score}.game-over-restart{grid-area:button}}.pause-overlay{z-index:30;pointer-events:none;letter-spacing:.18em;color:#ffffffe6;text-shadow:0 4px #00000073,0 0 28px #ffdc788c;place-items:center;font-size:clamp(48px,10vw,140px);font-weight:900;display:grid;position:fixed;inset:0}.pause-overlay[hidden]{display:none}@media (width<=520px){.pause-overlay{letter-spacing:.1em;font-size:clamp(42px,15vw,72px)}}@media (height<=520px) and (orientation:landscape){.pause-overlay{font-size:clamp(42px,14vh,76px)}}.orientation-overlay{z-index:50;color:#fff;pointer-events:auto;background:radial-gradient(circle at 50% 20%,#ffcc3338,#0000 36%),linear-gradient(#04060cfb,#020408);place-items:center;padding:24px;display:none;position:fixed;inset:0}.orientation-card{text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#ffffff1a,#ffffff0a);border:2px solid #ffcc3352;border-radius:36px;justify-items:center;gap:20px;width:min(600px,100vw - 32px);padding:48px 40px;display:grid;box-shadow:0 30px 100px #0009,0 0 50px #ffcc3324}.orientation-icon{font-size:clamp(84px,16vw,160px);line-height:1;animation:2s ease-in-out infinite orientation-float}.orientation-card strong{text-wrap:balance;font-size:clamp(34px,7vw,56px);font-weight:900;line-height:1.05}.orientation-card span{color:#ffffffc7;text-wrap:balance;max-width:100%;font-size:clamp(18px,3.8vw,28px);font-weight:700;line-height:1.35}@keyframes orientation-float{0%{transform:translateY(0)rotate(-6deg)}50%{transform:translateY(-10px)rotate(6deg)}to{transform:translateY(0)rotate(-6deg)}}@media screen and (orientation:portrait){.orientation-overlay{display:grid}}
