@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Shippori+Mincho:wght@700;800&display=swap";:root{color-scheme:dark;font-family:Noto Sans JP,sans-serif;background:#151e25}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app,#render-root{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}body{background:radial-gradient(circle at 50% 35%,#46604c,#151e25 76%);touch-action:none;user-select:none}canvas{display:block;width:100%;height:100%}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 66%,rgba(3,8,8,.12) 88%,rgba(0,0,0,.28));box-shadow:inset 0 0 54px #00000047}#hud{position:fixed;z-index:10;inset:max(14px,env(safe-area-inset-top)) 18px auto;height:76px;display:grid;grid-template-columns:260px minmax(260px,540px) 110px;align-items:center;gap:18px;pointer-events:none;filter:drop-shadow(0 4px 10px #000b)}.identity{display:flex;align-items:center;gap:11px;min-width:0;text-shadow:0 2px 3px #000}.identity .crest{display:grid;place-items:center;width:54px;height:54px;border-radius:17px 4px;color:#182311;font:900 25px Shippori Mincho;background:linear-gradient(140deg,#eeff9b,#74a13a 56%,#304713);border:2px solid #efffb0;box-shadow:0 0 20px #baff5a55,inset 0 0 0 3px #273611;transform:rotate(-3deg)}.identity b{display:block;font:800 18px Shippori Mincho;letter-spacing:.06em}.identity small{color:#d8e5c0;font-size:11px;letter-spacing:.16em}.bars{display:grid;gap:7px}.bar{height:16px;position:relative;overflow:hidden;border:2px solid #e8ddad;background:#1d0b0cdd;clip-path:polygon(0 0,100% 0,97% 100%,2% 100%);box-shadow:inset 0 0 0 2px #2b1b17}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#8b1519,#ea3d32 65%,#ffb56b);box-shadow:0 0 14px #ff5c43;transition:width .15s}.bar.spirit{height:11px;border-color:#bfe78a;background:#071a11dd}.bar.spirit i{background:linear-gradient(90deg,#2f6e38,#a8eb55,#f0ff9a);box-shadow:0 0 12px #aaff64}.bar span{position:absolute;left:10px;top:-2px;font-size:9px;font-weight:900;text-shadow:0 1px #000}.battle-count{text-align:center;background:linear-gradient(#17140edb,#070805ee);border:1px solid #c8b778;padding:7px 12px 8px;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}.battle-count b{display:block;color:#fff4b4;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}.battle-count small{font-size:9px;letter-spacing:.24em;color:#d6c998}#mission{position:fixed;z-index:10;left:22px;top:105px;display:grid;padding:9px 15px 10px 13px;min-width:190px;background:linear-gradient(90deg,#07100de8,#07100d99,transparent);border-left:3px solid #c5e86e;text-shadow:0 2px 3px #000;pointer-events:none}#mission-kicker{color:#d9f28f;font-size:9px;letter-spacing:.34em;font-weight:900}#mission b{font:700 16px Shippori Mincho}#mission small{color:#bdc7af;font-size:11px}#combo{position:fixed;z-index:10;right:30px;top:112px;display:flex;align-items:baseline;gap:7px;opacity:0;transform:scale(.84) rotate(2deg);transition:opacity .15s,transform .15s;text-shadow:0 3px 2px #000,0 0 18px #d8ff55}#combo.active{opacity:1;transform:scale(1) rotate(-2deg)}#combo b{font:900 54px/1 Shippori Mincho;color:#f4ffb0;-webkit-text-stroke:1px #3b4e16}#combo span{font:800 16px Shippori Mincho;color:#fff}#announcement{position:fixed;z-index:20;left:50%;top:24%;transform:translate(-50%,-50%) scale(.7);opacity:0;white-space:nowrap;font:800 42px Shippori Mincho;letter-spacing:.12em;color:#fff9ce;text-shadow:0 4px 0 #402c14,0 0 30px #f6ff9c;transition:opacity .18s,transform .28s cubic-bezier(.2,1.6,.4,1);pointer-events:none}#announcement.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#skills{position:fixed;z-index:12;left:50%;bottom:max(17px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:7px;pointer-events:none;filter:drop-shadow(0 4px 8px #000c)}.skill{--ready:1;position:relative;width:94px;height:60px;padding:9px 6px 5px 42px;overflow:hidden;background:linear-gradient(155deg,#263221e8,#0a0e0be8);border:1px solid #8fa36d;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}.skill:after{content:"";position:absolute;inset:0;background:#030604d9;transform-origin:bottom;transform:scaleY(calc(1 - var(--ready)))}.skill.ready{border-color:#d9f69a;box-shadow:inset 0 0 16px #cfff6733}.skill .key{position:absolute;left:9px;top:10px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border:1px solid #e5efc7;border-radius:50%;font-size:10px;font-weight:900;background:#151b13}.skill b{position:relative;z-index:2;display:block;font:700 12px Shippori Mincho;white-space:nowrap}.skill small{position:relative;z-index:2;color:#a9b39c;font-size:8px;white-space:nowrap}.panel{position:fixed;z-index:40;inset:0;display:flex;visibility:hidden;opacity:0;flex-direction:column;align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle at 50% 30%,#1e3623f0,#030705fa 68%),linear-gradient(#000,#000);transition:opacity .35s,visibility .35s}.panel.visible{visibility:visible;opacity:1}.panel:before{content:"";position:absolute;inset:18px;border:1px solid #d7e89666;box-shadow:inset 0 0 70px #000;pointer-events:none}.eyebrow{margin:0 0 8px;color:#bada72;font-size:10px;letter-spacing:.55em}h1,h2{margin:0;font:800 clamp(38px,6vw,82px)/1 "Shippori Mincho";text-shadow:0 4px 0 #263318,0 0 40px #96ca4150}h1 span{display:block;font:900 clamp(12px,1.6vw,22px) "Noto Sans JP";letter-spacing:.7em;color:#ccdf90}.panel>p:not(.eyebrow){color:#d4dac9;margin:18px 0 24px}#stage-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,190px));gap:9px;width:min(820px,92vw);margin-bottom:18px}.stage-card{position:relative;min-height:110px;padding:16px 12px;text-align:left;color:#e9eedf;background:linear-gradient(160deg,var(--tone),#070907 75%);border:1px solid #8a9670;cursor:pointer;transition:transform .16s,border-color .16s}.stage-card:hover,.stage-card.selected{transform:translateY(-4px);border-color:#e1f7a0;box-shadow:0 8px 24px #000b,inset 0 0 28px #c8ff4930}.stage-card small,.stage-card b,.stage-card span{display:block}.stage-card small{color:#bacf81;font-size:9px;letter-spacing:.12em}.stage-card b{margin-top:5px;font:700 17px Shippori Mincho}.stage-card span{margin-top:9px;font-size:9px;color:#aeb5a8;line-height:1.5}button{appearance:none;color:#e8eddc;background:#151b14;border:1px solid #778466;padding:12px 25px;font:700 13px Noto Sans JP;letter-spacing:.12em;cursor:pointer}button:hover{border-color:#e8f7ac;color:#fff}button.primary{color:#19200f;background:linear-gradient(135deg,#efffa6,#7faf42);border-color:#f6ffc8;box-shadow:0 0 26px #9dd55144}.panel>small{margin-top:14px;color:#75806e;font-size:10px}#result-stats{display:flex;gap:42px;margin:28px 0}#result-stats div{min-width:100px;text-align:center}#result-stats b{display:block;font-size:31px;color:#eeffad}#result-stats small{color:#9daa8c}.result-actions{display:flex;gap:8px}#audio-toggle{position:fixed;z-index:30;right:18px;bottom:18px;padding:7px 10px;font-size:9px;opacity:.65}#mobile-controls{display:none}@media(pointer:coarse),(max-width:900px){#hud{grid-template-columns:minmax(142px,1.2fr) minmax(86px,1fr) 68px;height:54px;gap:6px;inset:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) auto max(7px,env(safe-area-inset-left));filter:drop-shadow(0 5px 10px #02061788)}.identity,.bars,.battle-count{min-height:52px;border:1px solid rgba(210,255,231,.28);background:linear-gradient(145deg,#0a1730e0,#050c1fbd);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 1px #ffffff21,0 4px #04081975}.identity{padding:5px 8px 5px 5px;border-radius:20px 9px}.identity .crest{flex:0 0 auto;width:40px;height:40px;font-size:18px;border-radius:14px 6px}.identity div{min-width:0}.identity b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.identity small{display:block;overflow:hidden;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.battle-count b{font-size:20px}.bars{justify-content:center;padding:8px 7px;border-radius:14px}.bar{height:14px}.bar.spirit{height:9px}.bar span{display:none}.battle-count{display:grid;place-content:center;padding:4px;border-radius:9px 20px;clip-path:none}#mission{top:calc(max(7px,env(safe-area-inset-top)) + 60px);left:7px;min-width:142px;padding:7px 11px 8px;border:1px solid rgba(210,255,231,.2);border-left:3px solid #bfff68;border-radius:4px 15px 15px 4px;background:linear-gradient(120deg,#08142be0,#0710229e);backdrop-filter:blur(10px);transform:none}#mission-kicker{font-size:7px}#mission b{font-size:13px}#mission small{font-size:9px}#skills{display:none}#audio-toggle{bottom:132px}#mobile-controls{position:fixed;z-index:16;inset:auto 0 max(9px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none}#stick{position:relative;flex:0 0 auto;width:116px;height:116px;touch-action:none;border:2px solid rgba(189,255,226,.62);border-radius:50%;background:radial-gradient(circle at 40% 36%,#65e4c833,#08122ed9 58%,#03091bf0);box-shadow:0 5px #040819c7,0 0 24px #68f5cb2e,inset 0 1px #fff3;pointer-events:auto}#stick:before{content:"";position:absolute;inset:17px;border:1px dashed rgba(202,255,231,.24);border-radius:50%}#stick:after{content:"";position:absolute;inset:36px;border-radius:50%;background:linear-gradient(145deg,#eaffaa,#8bcf72);border:2px solid #f4ffd0;box-shadow:0 3px #243d31,0 0 16px #aaff7b55;opacity:.38}#stick i{position:absolute;z-index:2;left:36px;top:36px;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#f1ffbd,#8fca6f);border:2px solid #fbffe6;box-shadow:0 4px #243d31,0 0 18px #caff8b66}#touch-skills{display:grid;grid-template-columns:repeat(3,62px);gap:7px 6px;pointer-events:auto}.touch-skill{--action:#9ef4d7;position:relative;display:grid;grid-template-rows:24px 13px 9px;place-items:center;width:62px;height:62px;padding:5px 3px 4px;touch-action:none;overflow:hidden;border:2px solid color-mix(in srgb,var(--action) 76%,white);border-radius:19px;background:linear-gradient(155deg,color-mix(in srgb,var(--action) 28%,#102044),#070f27f0 64%);color:#fff;box-shadow:0 5px #070d25,0 0 15px color-mix(in srgb,var(--action) 25%,transparent),inset 0 1px #ffffff61;text-shadow:0 2px 2px #020617;transition:transform .06s,box-shadow .06s,filter .06s}.touch-skill:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.18),transparent 34%);pointer-events:none}.touch-skill:active{transform:translateY(4px) scale(.96);filter:brightness(1.22);box-shadow:0 1px #070d25,0 0 22px color-mix(in srgb,var(--action) 42%,transparent)}.touch-skill .touch-glyph{z-index:1;color:var(--action);font:900 19px/1 Shippori Mincho}.touch-skill b{z-index:1;font:800 9px/1 Noto Sans JP;white-space:nowrap}.touch-skill small{z-index:1;color:color-mix(in srgb,var(--action) 76%,white);font-size:7px;font-weight:900;line-height:1}.touch-weak{--action:#8ff5d4}.touch-mid{--action:#ffd46f}.touch-long{--action:#72eaff}.touch-area{--action:#ff91df}.touch-engage{--action:#d7ff72}.touch-disengage{--action:#c0a8ff}.touch-area,.touch-engage{box-shadow:0 5px #070d25,0 0 20px color-mix(in srgb,var(--action) 36%,transparent),inset 0 1px #ffffff73}#stage-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}.panel{padding:20px}.panel>p:not(.eyebrow){margin:10px 0 14px}.stage-card{min-height:83px;padding:10px}.stage-card span{display:none}}@media(pointer:coarse)and (max-width:350px){#hud{grid-template-columns:132px minmax(72px,1fr) 60px;gap:4px}.identity{padding-right:4px}.identity b{font-size:11px}.identity .crest{width:36px;height:36px}#mission{min-width:132px}#mobile-controls{padding-right:6px;padding-left:6px;gap:5px}#stick{width:98px;height:98px}#stick:after{inset:30px}#stick i{left:30px;top:30px;width:36px;height:36px}#touch-skills{grid-template-columns:repeat(3,58px);gap:6px 4px}.touch-skill{width:58px;height:58px;border-radius:17px}}@media(max-height:610px){#stage-grid{margin-bottom:8px}.stage-card{min-height:74px;padding:8px}.panel>small{display:none}h1{font-size:37px}.panel>p:not(.eyebrow){margin:8px 0 12px}}