:root{--bg:#0d1626;--ink:#fff;--ink-dim:#d7e2ee;--edge:#0d1626;--fire:#ff5a1f;--water:#3d9cf0;--earth:#5fbf3a;--air:#a86bf5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;font-family:Barlow,system-ui,sans-serif;font-weight:500;display:flex}#stage{touch-action:manipulation;width:100%;max-width:480px;height:100%;position:relative;overflow:hidden}#scene{width:100%;height:100%;display:block;position:absolute;inset:0}#hud{pointer-events:none;position:absolute;inset:0}.game{font-family:Lilita One,Arial Rounded MT Bold,sans-serif;font-weight:400}:root{--panel:#0c14248c;--hp:#e8434f}.hud-top{top:calc(env(safe-area-inset-top,0px) + 14px);position:absolute;left:14px;right:14px}.hud-top,.me{background:var(--panel);-webkit-backdrop-filter:blur(3px);border-radius:14px;padding:10px 12px}.row{justify-content:space-between;align-items:baseline;display:flex}.name{letter-spacing:.02em;text-shadow:0 2px 0 var(--edge);font-size:1.15rem}.hp-num{color:var(--ink-dim);font-variant-numeric:tabular-nums;text-shadow:0 1px 0 var(--edge);font-size:.95rem}.bar{border:2px solid var(--edge);background:#1a2133;border-radius:8px;height:14px;margin-top:6px;position:relative;overflow:hidden}.bar .ghost{background:#ffe8c4;width:100%;position:absolute;inset:0 auto 0 0}.bar .fill{background:linear-gradient(#ff6b6f, var(--hp) 55%, #b8283a);width:100%;position:absolute;inset:0 auto 0 0}.pbar{height:12px;margin-top:4px}.chips{justify-content:space-between;gap:6px;margin-top:8px;display:flex}.chip{color:var(--ink-dim);white-space:nowrap;align-items:center;gap:5px;font-size:.8rem;font-weight:600;display:flex}.chip i{border:1px solid #00000059;width:9px;height:9px;display:inline-block;transform:rotate(45deg)}.mine{grid-template-columns:auto auto;gap:2px 12px;margin-top:6px;display:grid}.mine .chip{color:#e9f0f7;font-size:.78rem}.status{pointer-events:none;gap:6px;display:flex;position:absolute;top:calc(100% + 8px);left:0}.status-me{top:auto;bottom:calc(100% - 10px);left:14px}.badge{--tone:255, 138, 61;background:linear-gradient(rgba(var(--tone), .38), rgba(var(--tone), .38)), #0d1626;border:2px solid rgb(var(--tone));color:#fff;text-shadow:0 1px #0009;white-space:nowrap;opacity:0;border-radius:999px;align-items:center;gap:6px;padding:4px 11px;font-size:.9rem;font-weight:600;transition:opacity .25s;display:inline-flex;box-shadow:0 2px 8px #00000073}.badge.on{opacity:1;animation:.25s ease-out badge-in}@keyframes badge-in{0%{transform:translateY(-4px)}}.badge.pulse{animation:.7s ease-out badge-pulse}@keyframes badge-pulse{25%,55%{box-shadow:0 0 0 3px rgba(var(--tone), .6), 0 0 24px rgba(var(--tone), .95);filter:brightness(1.4);transform:scale(1.14)}}.badge.broken{animation:.6s ease-in forwards badge-break}@keyframes badge-break{0%{filter:grayscale(0);transform:none}15%{filter:grayscale()brightness(1.4);transform:scale(1.12)rotate(-3deg)}35%{filter:grayscale();opacity:1;transform:scale(1.08)rotate(2deg)}to{filter:grayscale()blur(3px);opacity:0;transform:scale(1.45)}}.banner{text-align:center;letter-spacing:.06em;color:#fff;opacity:0;text-shadow:0 3px 0 var(--edge), 0 0 16px #ff8c3cb3;font-size:1.9rem;transition:opacity .2s,transform .25s;position:absolute;top:52%;left:0;right:0;transform:scale(.8)}.banner small{letter-spacing:.04em;opacity:.85;font-size:1rem;display:block}.banner.on{opacity:1;transform:none}.banner[data-tone=win]{color:#ffe08a}.hud-bottom{padding:26px 14px calc(env(safe-area-inset-bottom,0px) + 16px);background:linear-gradient(#0a101e00,#0a101ebf 55%);justify-content:space-between;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.me{flex:1;min-width:0;max-width:62%}.actions{pointer-events:auto;align-items:flex-end;gap:8px;display:flex}button{letter-spacing:.03em;color:#fff;text-shadow:0 2px #8a3a0c;cursor:pointer;touch-action:manipulation;background:linear-gradient(#ffb056,#f2731f);border:2px solid #7a320b;border-radius:14px;padding:12px 22px 13px;font-family:Lilita One,Arial Rounded MT Bold,sans-serif;font-size:1.2rem;font-weight:400;transition:transform 60ms,box-shadow 60ms;box-shadow:0 5px #7a320b,0 8px 18px #00000059}button:active{transform:translateY(4px);box-shadow:0 1px #7a320b}button:disabled{filter:grayscale(.7)brightness(.8);cursor:default}button:focus-visible{outline-offset:3px;outline:3px solid #fff}button.speed{text-shadow:0 2px #0d1626;background:linear-gradient(#3a4c6e,#24324d);border-color:#0d1626;min-width:52px;padding:11px 12px 12px;font-size:1rem;box-shadow:0 5px #0d1626,0 8px 18px #00000059}button.speed:active{box-shadow:0 1px #0d1626}.cycle{right:14px;top:calc(env(safe-area-inset-top,0px) + 112px);background:var(--panel);-webkit-backdrop-filter:blur(3px);border-radius:50%;width:76px;height:76px;padding:4px;position:absolute}.cycle svg{width:100%;height:100%;overflow:visible}.cycle .arrow,.mini-cycle .arrow{fill:none;stroke:#aab7c9;stroke-width:5px;stroke-linecap:round}.cycle .arrow-head,.mini-cycle .arrow-head{fill:#aab7c9}.cycle .dot,.mini-cycle .dot{stroke:#0d1626;stroke-width:2.5px}.hud-top,.me{transition:box-shadow .2s}.hud-top.active,.me.active{box-shadow:0 0 0 2px #ffffffd9,0 0 18px #ffffff73}.hidden{display:none!important}#menu{z-index:5;pointer-events:none;position:absolute;inset:0}#menu .screen{pointer-events:auto}#menu .screen-end{pointer-events:none}.screen{padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);background:linear-gradient(#0a101e8c,#0a101e40 40%,#0a101eb3);flex-direction:column;gap:12px;display:flex;position:absolute;inset:0;overflow-y:auto}.screen-center{padding-top:calc(env(safe-area-inset-top,0px) + 72px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}.screen-center:before,.screen-center:after{content:"";flex:1 0 0;margin:-6px 0}.panel{-webkit-backdrop-filter:blur(4px);background:#0c1424d1;border-radius:18px;padding:14px 14px 12px}.panel h2,.screen-title{letter-spacing:.02em;text-shadow:0 2px 0 var(--edge);margin:0 0 4px;font-size:1.5rem}.screen-title{text-align:center;margin-top:6px}.hint{color:var(--ink-dim);margin:4px 0 10px;font-size:.9rem;line-height:1.35}.hint b{color:var(--ink);font-weight:600}button.big{width:100%;margin-top:auto;padding:14px 22px 15px;font-size:1.45rem}button.secondary{text-shadow:0 2px #0d1626;background:linear-gradient(#3a4c6e,#24324d);border-color:#0d1626;font-size:1.05rem;box-shadow:0 5px #0d1626,0 8px 18px #00000059}button.secondary:active{box-shadow:0 1px #0d1626}button.link{box-shadow:none;color:#ffd27a;text-shadow:none;background:0 0;border:none;padding:4px 6px;font-size:.95rem;text-decoration:underline}.screen-home{text-align:center;background:linear-gradient(#0a101e99,#0a101e00 45%,#0a101e8c);justify-content:space-between}.title-block{margin-top:max(0px,12vh - 96px)}.home-logo{filter:drop-shadow(0 6px 14px #00000073);width:88px;height:88px;margin:0 auto 8px;display:block}.title-block h1{letter-spacing:.04em;text-shadow:0 4px 0 var(--edge), 0 0 24px #ff8c3c8c;margin:0;font-size:3.6rem}.title-block p{color:#fff;text-shadow:0 2px 0 var(--edge), 1.5px 0 0 var(--edge), -1.5px 0 0 var(--edge), 0 -1.5px 0 var(--edge), 1px 1px 0 var(--edge), -1px 1px 0 var(--edge), 1px -1px 0 var(--edge), -1px -1px 0 var(--edge), 0 2px 10px #0000008c;margin:8px 0 0;font-size:1.1rem;font-weight:600}.title-block .version{letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-top:4px;font-size:.75rem}.title-block .tap-hint{opacity:.85;margin-top:18px;font-size:.9rem;animation:1.6s ease-in-out infinite tap-hint}.audio-on .tap-hint{display:none}@keyframes tap-hint{50%{opacity:.4}}.rows{flex-direction:column;gap:10px;display:flex}.att-row{grid-template-columns:74px 1fr 40px 56px 40px;align-items:center;gap:8px;display:grid}.att-name{align-items:center;gap:6px;font-weight:600;display:flex}.att-name i{border:1px solid #0006;width:11px;height:11px;display:inline-block;transform:rotate(45deg)}.att-bar{border:1px solid var(--edge);background:#1a2133;border-radius:6px;height:10px;overflow:hidden}.att-fill{height:100%;transition:width .15s}.att-val{text-align:center;font-size:1.15rem}button.step{border-radius:10px;width:40px;padding:4px 0 6px;font-size:1.3rem;box-shadow:0 3px #7a320b}.att-total{color:#7cf08a;justify-content:space-between;align-items:center;margin-top:10px;font-size:1.1rem;display:flex}.att-total .bad{color:#ff6b6b}.focus-line{margin:8px 0 0}button.icon-btn{color:#ffd27a;background:linear-gradient(#3a4c6e,#24324d);border-color:#0d1626;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:inline-flex;box-shadow:0 3px #0d1626}button.icon-btn:active{transform:translateY(2px);box-shadow:0 1px #0d1626}.panel-cycle{align-items:center;gap:12px;display:flex}.panel-cycle .hint{margin:0}.mini-cycle{flex:none;width:64px;height:64px}.mini-cycle svg{width:100%;height:100%;overflow:visible}.cards{flex-direction:column;gap:10px;display:flex}button.card{text-align:left;width:100%;text-shadow:none;background:#0c1424d9;border:2px solid #ffffff1f;border-radius:16px;align-items:center;gap:10px;padding:8px 12px 8px 6px;font-family:Barlow,system-ui,sans-serif;font-size:1rem;display:flex;box-shadow:0 4px #00000073}button.card:active{transform:translateY(3px);box-shadow:0 1px #00000073}.thumb{flex:none}.card-body{flex-direction:column;gap:4px;min-width:0;display:flex}.card-name{font-size:1.15rem}.card-chips{flex-wrap:wrap;gap:4px 10px;display:flex}.card-hp{color:var(--ink-dim);font-size:.85rem;font-weight:600}#stage{--banner-h:84px;--end-gap:18px;--end-a:170px;--end-top:calc(50% - (var(--banner-h) + var(--end-gap) + var(--end-a)) / 2)}.screen-end{pointer-events:none;background:0 0}.end-actions{pointer-events:auto;left:16px;right:16px;top:calc(var(--end-top) + var(--banner-h) + var(--end-gap));flex-direction:column;gap:10px;animation:.6s ease-out both end-in;display:flex;position:absolute}@keyframes end-in{0%{opacity:0;transform:translateY(8px)}}.end-veil{opacity:0;pointer-events:none;background:#080c1a9e;transition:opacity .9s ease-out;position:absolute;inset:0}.end-veil.on{opacity:1}.end-row{gap:10px;display:flex}.end-row button{flex:1}.feedback-link{letter-spacing:.03em;color:#ffe08a;text-shadow:0 1px #0d1626;-webkit-tap-highlight-color:transparent;background:#0d1626c7;border:2px solid #ffe08a8c;border-radius:999px;align-self:center;align-items:center;gap:8px;margin-top:4px;padding:7px 16px 8px 13px;font-family:Lilita One,Arial Rounded MT Bold,sans-serif;font-size:1rem;font-weight:400;text-decoration:none;transition:transform 60ms,box-shadow 60ms;display:inline-flex;box-shadow:0 3px #00000080,0 6px 14px #0000004d}.feedback-link small{letter-spacing:0;color:var(--ink-dim);opacity:.85;font-family:Barlow,system-ui,sans-serif;font-size:.75rem;font-weight:600}.feedback-link:active{transform:translateY(2px);box-shadow:0 1px #00000080}button.mute{width:44px;text-shadow:none;background:linear-gradient(#3a4c6e,#24324d);border-color:#0d1626;border-radius:50%;padding:8px 0 9px;font-size:1.1rem;box-shadow:0 4px #0d1626,0 6px 14px #00000059}button.mute:active{box-shadow:0 1px #0d1626}.vol{display:inline-flex;position:relative}.vol button.mute{margin:0}.screen>.vol{top:calc(env(safe-area-inset-top,0px) + 14px);position:absolute;right:14px}.actions .vol{align-self:flex-end;margin-bottom:1px}.vol button.mute,.vol-track{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.vol-pop{z-index:10;display:none;position:absolute;left:50%;transform:translate(-50%)}.vol-down .vol-pop{padding-top:10px;top:100%}.vol-up .vol-pop{padding-bottom:12px;bottom:100%}.vol.open .vol-pop{display:block}.vol-capsule{background:linear-gradient(#3a4c6e,#24324d);border:2px solid #0d1626;border-radius:24px;padding:14px 6px;display:flex;box-shadow:0 6px 14px #00000059}.vol-track{cursor:pointer;width:44px;height:150px;position:relative}.vol-track:before,.vol-fill{content:"";border-radius:4px;width:8px;margin-left:-4px;position:absolute;bottom:0;left:50%}.vol-track:before{background:#0d1626;top:0}.vol-fill{height:var(--vol,100%);background:#e0b25c}.vol-knob{left:50%;bottom:var(--vol,100%);background:#fff3d6;border:3px solid #e0b25c;border-radius:50%;width:24px;height:24px;margin:0 0 -12px -12px;position:absolute;box-shadow:0 2px 6px #0006}#intro{z-index:6;position:absolute;inset:0}.intro{cursor:pointer;background:#080c1859;position:absolute;inset:0;overflow:hidden}.intro-wrap{position:absolute;left:-12%;right:-12%;transform:rotate(-7deg)}.intro-top{top:16%}.intro-bottom{bottom:22%}.intro-band{background:linear-gradient(var(--band), color-mix(in srgb, var(--band) 75%, #000));border-top:3px solid #ffffff73;border-bottom:3px solid #00000059;align-items:center;gap:4px;height:128px;padding:0 13%;display:flex;box-shadow:0 10px 30px #00000073}.intro-bottom .intro-band{justify-content:flex-end}.intro-portrait{z-index:1;filter:drop-shadow(0 8px 8px #00000080);flex:none;margin:-64px 0 4px;position:relative;transform:rotate(7deg)}.intro-top .intro-portrait{margin-top:-44px;margin-right:8px}.intro-bottom .intro-portrait{margin-left:22px}.intro-text{z-index:2;isolation:isolate;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:12px 18px 12px 20px;display:flex;position:relative;transform:rotate(7deg)}.intro-text:before{content:"";z-index:-1;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);background:#0d1626;position:absolute;inset:-4px -10px}.intro-text:after{content:"";background:var(--band);clip-path:polygon(14px 0,100% 0,calc(100% - 4px) 100%,10px 100%);width:46%;height:4px;position:absolute;top:-4px;left:-10px}.intro-name{color:#fff;text-shadow:0 2px #000;max-width:54vw;font-size:1.35rem;line-height:1.05}.intro-chips{align-items:baseline;gap:calc(8px * var(--fit,1));display:flex}.intro-chips.two-rows{grid-template-columns:repeat(2,auto);justify-content:start;gap:2px 10px;display:grid}.ichip{font-family:Lilita One,Arial Rounded MT Bold,sans-serif;font-weight:400;font-size:calc((.78rem + var(--k) * .5rem) * var(--fit,1));color:color-mix(in srgb, #fff calc(45% + var(--k) * 55%), #6d7a8c);text-shadow:0 2px #000;align-items:center;gap:4px;display:inline-flex}.ichip i{width:calc((7px + var(--k) * 5px) * var(--fit,1));height:calc((7px + var(--k) * 5px) * var(--fit,1));background:var(--c);opacity:calc(.5 + var(--k) * .5);border:1px solid #0006;transform:rotate(45deg)}.ichip.strong i{box-shadow:0 0 8px var(--c)}.intro-vs{text-align:center;color:#fff;text-shadow:0 4px #0d1626,0 0 20px #ffc878cc;font-size:3rem;position:absolute;top:47%;left:0;right:0}.banner[data-tone=win],.banner[data-tone=lose]{top:var(--end-top);height:var(--banner-h);line-height:var(--banner-h);letter-spacing:.16em;filter:blur(4px);padding:0;font-size:3rem;transition:opacity .9s ease-out,transform 1.1s cubic-bezier(.2,.7,.3,1),letter-spacing 1.4s cubic-bezier(.2,.7,.3,1),filter .8s ease-out;transform:translateY(10px)}.banner[data-tone=win].on,.banner[data-tone=lose].on{filter:none;letter-spacing:.08em;transform:none}.banner[data-tone=win]{color:#ffe08a;text-shadow:0 3px 0 var(--edge), 2px 0 0 var(--edge), -2px 0 0 var(--edge), 0 -2px 0 var(--edge), 0 0 22px #ffbe46bf}.banner[data-tone=lose]{color:#ffa3a3;text-shadow:0 3px 0 var(--edge), 2px 0 0 var(--edge), -2px 0 0 var(--edge), 0 -2px 0 var(--edge), 0 0 22px #dc2832bf}@media (height<=620px){#stage{--banner-h:64px;--end-gap:12px;--end-a:178px}.banner[data-tone=win],.banner[data-tone=lose]{font-size:2.4rem}.screen{gap:8px}.screen-center{padding-top:calc(env(safe-area-inset-top,0px) + 64px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}.panel{padding:10px 12px}.panel h2,.screen-title{font-size:1.3rem}.hint{margin:2px 0 6px;font-size:.85rem;line-height:1.3}.rows{gap:6px}button.step{padding:2px 0 4px}.att-total{margin-top:6px}.focus-line{margin:2px 0 0}.mini-cycle{width:52px;height:52px}button.big{padding:11px 22px 12px}.cards{gap:8px}button.card{padding:4px 10px 4px 4px}.card-body{gap:2px}}@media (width<=340px){.att-row{grid-template-columns:62px 1fr 36px 48px 36px;gap:6px}button.step{width:36px}}