:root{color:#453466;background:#bde9ff;font-family:Hiragino Maru Gothic ProN,Yu Gothic,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.hiragana-game{--count:5;--side:clamp(24px,7vw,38px);--unit:calc((100% - var(--side)*2)/var(--count));isolation:isolate;background:#bde9ff url(/assets/games/hiragana-lane-magic/sky-castle-background.png) 50%/cover no-repeat;width:100%;height:100%;min-height:560px;position:relative;overflow:hidden}.game-back{z-index:60;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));color:#514276;background:#ffffffdb;border:2px solid #fff;border-radius:50%;place-items:center;width:48px;height:48px;text-decoration:none;display:grid;position:absolute;box-shadow:0 6px 14px #39407333}.progress{z-index:40;top:max(10px,env(safe-area-inset-top));pointer-events:none;background:linear-gradient(#fffffff2,#e8e1ffe8);border:2px solid #ffffffd9;border-radius:16px;align-items:center;gap:7px;width:min(66%,270px);padding:6px 7px 6px 10px;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 7px 16px #34326f2e,inset 0 2px 4px #fff}.progress__track{background:#5342892b;border:2px solid #694e9747;border-radius:999px;flex:1;height:15px;overflow:hidden;box-shadow:inset 0 2px 4px #392b6333}.progress__fill{border-radius:inherit;background:linear-gradient(90deg,#68d9ff,#9b7cff 72%,#ffd762);width:0;height:100%;transition:width .36s cubic-bezier(.2,.8,.3,1);box-shadow:inset 0 2px 2px #ffffff9e,0 0 8px #74baff9e}[data-phase=boss] .progress{background:linear-gradient(#fffdefef,#ffe1ebe3);border-color:#fff1a4e0}[data-phase=boss] .progress__fill{background:linear-gradient(90deg,#ff8cae,#ffcc5f)}.progress__boss{object-fit:contain;filter:drop-shadow(0 3px 3px #45327742);width:38px;height:31px;transform:scale(1.65)}.field{inset:max(58px,calc(env(safe-area-inset-top) + 56px)) var(--side) calc(max(64px,env(safe-area-inset-bottom)) + clamp(78px,14vw,96px) + 18px);grid-template-columns:repeat(var(--count),1fr);border-radius:24px 24px 9px 9px;display:grid;position:absolute;overflow:hidden;box-shadow:0 0 0 2px #ffffff8f,0 13px 28px #45427038}.lane{background:linear-gradient(180deg,#ffffff38,#ffffff0d),var(--lane-color);min-width:0;box-shadow:inset 0 0 18px #ffffff2b}.lane:nth-child(5n+1){--lane-color:#f8cf4b}.lane:nth-child(5n+2){--lane-color:#ee83ad}.lane:nth-child(5n+3){--lane-color:#64b9ee}.lane:nth-child(5n+4){--lane-color:#75d57a}.lane:nth-child(5n+5){--lane-color:#a376df}.entities,.projectiles,.effects{pointer-events:none;position:absolute;inset:0}.enemy,.boss{object-fit:contain;filter:drop-shadow(0 8px 7px #392a7038);position:absolute;transform:translate(-50%)}.enemy{width:clamp(66px,calc(var(--unit)*1.05),94px)}.enemy.is-defeated{animation:.52s ease-out both enemy-defeat}.boss{width:min(calc(var(--unit)*2.05),174px);aspect-ratio:3/2;transition:left .7s cubic-bezier(.2,.75,.25,1);display:none}[data-phase=boss] .boss{display:block}.boss.is-hit{animation:.42s cubic-bezier(.2,.8,.25,1) boss-hit}.magic{z-index:4;width:clamp(40px,calc(var(--unit)*.72),58px);aspect-ratio:1;color:#285b55;font-size:clamp(28px,calc(var(--unit)*.48),42px);background:radial-gradient(circle at 38% 28%,#fff,#ecfff7f0 48%,#8bffcebd);border:2px solid #ffffffe6;border-radius:50%;place-items:center;font-weight:900;display:grid;position:absolute;transform:translate(-50%);box-shadow:0 0 10px #fff,0 0 24px #a9ffe5,0 0 46px #71ecffa8}.magic:before{content:"";z-index:-1;background:linear-gradient(#0000,#fffffff0);border-radius:999px;width:8px;height:25svh;position:absolute;bottom:46%;box-shadow:0 0 12px #b9ffe9,0 0 30px #75dfff}.burst{z-index:7;width:clamp(76px,calc(var(--unit)*1.45),116px);aspect-ratio:1;background:radial-gradient(circle,#fff 0 7%,#fff5a0 8% 16%,#ff97efc7 22%,#0000 64%);border-radius:50%;animation:.62s cubic-bezier(.16,.8,.25,1) both burst;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 26px #fff,0 0 48px #ffb0f9c7}.burst:after{content:"✦  ✧  ✦";color:#fffbd0;text-shadow:0 0 8px #fff,0 0 14px #ff8feb;font-size:20px;animation:.62s ease-out both stars;position:absolute;inset:18%}.buttons{z-index:30;left:var(--side);right:var(--side);bottom:max(58px,calc(env(safe-area-inset-bottom) + 14px));grid-template-columns:repeat(var(--count),1fr);align-items:center;display:grid;position:absolute}.kana{width:min(calc(var(--unit) - 2px),96px);aspect-ratio:1;filter:drop-shadow(0 7px 7px #432e692e);touch-action:manipulation;background:url(/assets/games/hiragana-lane-magic/button-frame.png) 50%/contain no-repeat;border:0;border-radius:50%;justify-self:center;padding:0;position:relative}.kana:active{filter:drop-shadow(0 3px 4px #432e693b)brightness(1.08);transform:translateY(4px)scale(.96)}.kana span{color:#44244e;width:1.35em;height:1.35em;font-size:clamp(30px,calc(var(--unit)*.54),47px);text-shadow:0 2px #ffffff94;place-items:center;font-weight:900;line-height:1;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.overlay{z-index:70;-webkit-backdrop-filter:blur(3px)saturate(.75);backdrop-filter:blur(3px)saturate(.75);background:#1f1f4494;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.card{text-align:center;background:linear-gradient(165deg,#fffef0,#e9e1ff);border:3px solid #fff3a8;border-radius:30px;width:min(84%,310px);padding:28px 20px;box-shadow:0 18px 48px #19173c59}.card strong{color:#69518c;margin-bottom:18px;font-size:clamp(26px,8vw,40px);display:block}.card button{color:#fff;background:linear-gradient(#9b78e8,#6951b8);border:2px solid #fff;border-radius:999px;min-width:150px;min-height:58px;font-size:22px;font-weight:900;box-shadow:0 7px #473584}.impact{z-index:45;bottom:calc(max(64px,env(safe-area-inset-bottom)) + clamp(78px,14vw,96px) + 13px);background:radial-gradient(#fff 0 18%,#c9ecff 35%,#8da8f26b 65%,#0000 70%);border-radius:50%;width:104px;height:29px;animation:.86s ease-out both impact;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 18px #ffffffd9}@keyframes enemy-defeat{42%{opacity:1;filter:brightness(1.7)drop-shadow(0 0 18px #fff5aa);transform:translate(-50%)translateY(-8px)scale(1.16)}to{opacity:0;filter:brightness(2);transform:translate(-50%)translateY(-22px)scale(.55)}}@keyframes boss-hit{20%{filter:brightness(1.85)drop-shadow(0 0 28px #fff4a0);transform:translate(-50%)translateY(9px)scale(1.13,.84)rotate(-4deg)}48%{transform:translate(-50%)translateY(-7px)scale(.96,1.1)rotate(3deg)}to{transform:translate(-50%)scale(1)}}@keyframes burst{28%{opacity:1;transform:translate(-50%,-50%)scale(1.18)rotate(4deg)}to{opacity:0;transform:translate(-50%,-50%)scale(1.5)rotate(22deg)}}@keyframes stars{32%{opacity:1;transform:scale(1.08)rotate(18deg)}to{opacity:0;transform:scale(1.65)rotate(55deg)}}@keyframes impact{0%{opacity:0;transform:translate(-50%)scale(.45)}28%{opacity:1;transform:translate(-50%)scale(1.18)}to{opacity:0;transform:translate(-50%)scale(1.45)}}@media (height<=680px){.progress{top:max(6px,env(safe-area-inset-top));padding-block:4px}.field{top:max(49px,calc(env(safe-area-inset-top) + 47px))}.buttons{bottom:max(52px,calc(env(safe-area-inset-bottom) + 8px))}}.kana--compound span{width:2.15em;height:1.2em;font-size:clamp(24px,calc(var(--unit)*.4),36px);letter-spacing:-.13em;transform:translate(-53%,-50%)}.magic--compound{width:clamp(48px,calc(var(--unit)*.82),66px);aspect-ratio:1.16;font-size:clamp(22px,calc(var(--unit)*.36),32px);letter-spacing:-.13em;text-indent:-.13em;line-height:1}.magic:before{clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(#fffffff0 0%,#b9ffe9a8 34%,#75dfff42 68%,#0000 100%);width:clamp(5px,1.6vw,8px);height:clamp(34px,9svh,72px);top:72%;bottom:auto;box-shadow:0 4px 12px #b9ffe9b8,0 12px 24px #75dfff70}.boss{transition:left .6s cubic-bezier(.2,.75,.25,1)}.kana{width:min(100% - 2px,96px)}.buttons{bottom:max(82px,calc(env(safe-area-inset-bottom) + 30px))}.boss[hidden]{display:none!important}.failure{background:radial-gradient(circle at 50% 42%,#702a35a8,#260d26dc);animation:.38s ease-out both result-backdrop}.victory{background:radial-gradient(circle at 50% 42%,#fff1a64d,#34206ec7);animation:.42s ease-out both result-backdrop}.failure .card{background:linear-gradient(165deg,#fff2ec,#ffc5bd);border-color:#ffd1c9;box-shadow:0 0 0 8px #ff806f30,0 18px 48px #400d2459}.victory .card{background:linear-gradient(165deg,#fffdea,#e8d5ff);border-color:#fff4a5;box-shadow:0 0 0 8px #ffe36d30,0 18px 48px #26164f59}.result-icon{aspect-ratio:1;border:7px solid;border-radius:50%;place-items:center;width:116px;margin:0 auto 24px;font-size:70px;font-weight:900;line-height:1;display:grid}.failure .result-icon{color:#d84c4c;background:#fff7f0;animation:.6s cubic-bezier(.2,.9,.25,1) both failure-icon;box-shadow:0 0 0 10px #ff5c4c20,0 10px 28px #8b24334f}.victory .result-icon{color:#ffb718;text-shadow:0 3px #fff;background:radial-gradient(circle,#fff 0 30%,#fff2a7 64%,#ffc747);border-color:#fff0a0;animation:.78s cubic-bezier(.16,.9,.24,1) both victory-icon;box-shadow:0 0 0 10px #fff19b2b,0 0 38px #ffe566d9}.failure .card button{background:linear-gradient(#ff8478,#ca414d);box-shadow:0 7px #8f2938}.victory .card button{background:linear-gradient(#83dd7c,#39a95d);box-shadow:0 7px #257842}@keyframes result-backdrop{0%{opacity:0}to{opacity:1}}@keyframes failure-icon{0%{opacity:0;transform:scale(1.5)rotate(-9deg)}45%{opacity:1;transform:scale(.9)rotate(6deg)}70%{transform:scale(1.06)rotate(-3deg)}to{transform:scale(1)rotate(0)}}@keyframes victory-icon{0%{opacity:0;transform:scale(.25)rotate(-35deg)}55%{opacity:1;transform:scale(1.18)rotate(12deg)}75%{transform:scale(.94)rotate(-4deg)}to{transform:scale(1)rotate(0)}}.progress{width:min(52%,220px)}.progress__boss{width:34px;height:29px;transform:scale(1.55)}.level-up{z-index:61;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));color:#51356f;touch-action:manipulation;background:linear-gradient(165deg,#fffef2,#f0dcff);border:2px solid #fff;border-radius:16px;justify-content:center;align-items:center;gap:4px;min-width:58px;height:48px;padding:0 8px;font-size:13px;font-weight:900;line-height:1;display:flex;position:absolute;box-shadow:0 5px #8a65ba,0 9px 16px #34326f30}.level-up span{white-space:nowrap}.level-up b{font-variant-numeric:tabular-nums;font-size:18px}.level-up i{color:#e35d8d;font-size:12px;font-style:normal}.level-up:active{transform:translateY(3px);box-shadow:0 2px #8a65ba}.level-up:disabled{filter:saturate(.45);opacity:.62}.level-up.is-rising{animation:.36s cubic-bezier(.2,.85,.3,1) level-rise}.result-level{color:#67477f;font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:center;align-items:center;gap:11px;min-height:42px;margin:-10px auto 20px;font-size:clamp(22px,7vw,30px);font-weight:900;display:flex}.failure-level{color:#a93845}.victory-level b{color:#e7a719;font-size:.9em}@keyframes level-rise{35%{filter:brightness(1.16);transform:translateY(-5px)scale(1.09)}70%{transform:translateY(1px)scale(.98)}to{transform:none}}@media (height<=680px){.level-up{top:max(5px,env(safe-area-inset-top));height:44px}}.level-up{max-width:86px}.level-up.is-rising{animation-name:level-rise-safe}@keyframes level-rise-safe{35%{filter:brightness(1.16);transform:translateY(-5px)}70%{transform:translateY(1px)}to{transform:none}}[data-phase=boss-impact] .boss{display:block}.boss.is-grounded{animation:.7s cubic-bezier(.18,.82,.28,1) both boss-grounded}.boss.is-rebounding{transition:top .44s cubic-bezier(.16,.84,.28,1),left .6s cubic-bezier(.2,.75,.25,1)}.boss-impact{z-index:46;width:min(calc(var(--unit)*2.7),210px);aspect-ratio:2.4;background:radial-gradient(#fff 0 9%,#ffe58e 16%,#ff9fc5a8 34%,#a988ff52 54%,#0000 72%);border-radius:50%;animation:.74s cubic-bezier(.16,.82,.24,1) both boss-impact-burst;position:absolute;transform:translate(-50%,-62%);box-shadow:0 0 24px #fff4b7,0 0 52px #ff96d6a6}.boss-impact:before,.boss-impact:after{content:"";border:5px solid #fff4b8;border-radius:50%;animation:.7s ease-out both boss-impact-ring;position:absolute;inset:12%;box-shadow:0 0 18px #fff,0 0 28px #ff9fd3}.boss-impact:after{border-width:3px;animation-delay:70ms;inset:25%}.hiragana-game.is-boss-impact{animation:.32s ease-out boss-field-bump}@keyframes boss-grounded{22%{filter:brightness(1.55)drop-shadow(0 0 24px #fff0a6);transform:translate(-50%)translateY(8px)scale(1.16,.78)}58%{transform:translate(-50%)translateY(-5px)scale(.95,1.08)}to{transform:translate(-50%)scale(1)}}@keyframes boss-impact-burst{0%{opacity:0;transform:translate(-50%,-45%)scale(.35)}25%{opacity:1;transform:translate(-50%,-62%)scale(1.05)}to{opacity:0;transform:translate(-50%,-72%)scale(1.45)}}@keyframes boss-impact-ring{0%{opacity:0;transform:scale(.35)}28%{opacity:1}to{opacity:0;transform:scale(1.65)}}@keyframes boss-field-bump{18%{transform:translateY(3px)}36%{transform:translateY(-2px)}58%{transform:translateY(1px)}to{transform:none}}@media (prefers-reduced-motion:reduce){.hiragana-game.is-boss-impact{animation:none}.boss.is-grounded{animation:.36s ease-out both boss-grounded-reduced}.boss.is-rebounding{transition-duration:.22s}@keyframes boss-grounded-reduced{45%{filter:brightness(1.45)}to{filter:none}}}[data-phase=game-over] .boss{display:block}.player-chances{z-index:40;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 5px));pointer-events:none;background:linear-gradient(#51427ac7,#332854d9);border:2px solid #ffffffc7;border-radius:999px;align-items:center;gap:13px;min-height:29px;padding:5px 14px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 6px 14px #241b4938,inset 0 1px 2px #ffffff73}.player-chances[hidden]{display:none}.player-chances i{aspect-ratio:1;background:linear-gradient(135deg,#fffbd0,#ffc761 55%,#ff8fae);border:2px solid #fff;border-radius:4px;width:17px;display:block;transform:rotate(45deg);box-shadow:0 0 8px #fff6b5,0 0 13px #ffbd6c}.player-chances i.is-spent{box-shadow:none;opacity:.42;background:#71677b80;border-color:#c8bfd273}[data-phase=boss-impact] .progress{background:linear-gradient(#fffdefef,#ffe1ebe3);border-color:#fff1a4e0}[data-phase=boss-impact] .progress__fill{background:linear-gradient(90deg,#ff8cae,#ffcc5f)}