*{box-sizing:border-box}:root{--night:#11133b;--ink:#17162d;--paper:#fff9e8;--muted:#756f82;--gold:#ffc247;--mint:#39d98a}[hidden]{display:none!important}html,body{margin:0;min-height:100%;overflow:hidden}body{font-family:ui-rounded,"Avenir Next",Nunito,system-ui,sans-serif;background:#090b2b;color:var(--ink);user-select:none;-webkit-tap-highlight-color:transparent}button,a{font:inherit}.game-shell{position:relative;width:100vw;height:100dvh;min-height:580px;overflow:hidden;background:radial-gradient(circle at 50% 24%,#29336d 0,#151743 36%,#090b2b 72%)}#skyCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.topbar{position:absolute;z-index:10;top:max(9px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(7,9,38,.72);box-shadow:0 12px 35px rgba(0,0,0,.24);backdrop-filter:blur(13px);color:#fff}.back,.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-size:27px;cursor:pointer}.icon-btn{font-size:15px}.brand{display:flex;flex-direction:column;line-height:.95;margin-right:auto}.brand small,.stat small{font-size:8px;letter-spacing:.16em;color:#b8a8ff}.brand b{font-family:Georgia,serif;font-size:18px}.stat{min-width:48px;display:flex;flex-direction:column;align-items:center;border-left:1px solid rgba(255,255,255,.12)}.stat b{font-size:14px}.hearts{font-size:14px;letter-spacing:1px;color:#ff738e;text-shadow:0 2px #631d45}
.mission-card{position:absolute;z-index:6;top:67px;left:50%;transform:translateX(-50%);width:min(660px,calc(100% - 22px));display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(18,21,64,.8);color:#fff;backdrop-filter:blur(10px)}.chapter-gem{width:50px;height:50px;display:grid;place-items:center;border-radius:50% 50% 46% 54%;background:radial-gradient(circle at 35% 25%,#fff3b0,#ffc247 35%,#d2731c 80%);box-shadow:0 0 20px rgba(255,194,71,.35),inset 0 1px #fff9d3;color:#4f2a0b;font-size:9px;font-weight:950}.mission-copy{min-width:0}.mission-copy small{font-size:8px;letter-spacing:.17em;color:#b8a8ff;font-weight:900}.mission-copy h1{margin:1px 0;font-family:Georgia,serif;font-size:19px}.mission-copy p{margin:0;color:#c9c8e9;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.combo{min-width:49px;text-align:center}.combo small{display:block;font-size:7px;letter-spacing:.12em;color:#ffc247}.combo b{font-size:19px;color:#fff}.round-progress{grid-column:1/-1;height:4px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden}.round-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#5fdcb1,#ffc247);transition:width .25s ease}
.arena{position:absolute;z-index:3;top:148px;bottom:82px;left:50%;transform:translateX(-50%);width:min(660px,calc(100% - 22px));border:1px solid rgba(255,255,255,.12);border-radius:28px;background:radial-gradient(circle at 50% 48%,rgba(116,100,225,.18),transparent 44%),linear-gradient(rgba(17,19,59,.76),rgba(7,10,37,.9));box-shadow:inset 0 0 70px rgba(106,98,225,.12),0 22px 50px rgba(0,0,0,.28);overflow:hidden}.moon{position:absolute;right:5%;top:6%;width:65px;height:65px;border-radius:50%;background:#fff1b0;box-shadow:0 0 35px #f6d66a}.moon i{display:block;width:65px;height:65px;border-radius:50%;transform:translate(-15px,-8px);background:#25265f}.status{position:absolute;z-index:5;top:17px;left:50%;transform:translateX(-50%);min-width:230px;padding:7px 12px;border-radius:99px;background:rgba(5,8,32,.62);color:#d9d8f9;text-align:center;font-size:11px;font-weight:850}.status.watch{color:#ffe18a}.status.turn{color:#8cf2c9}.status.error{color:#ff92a7}
.lantern-ring{position:absolute;left:50%;top:53%;width:min(430px,90vw);aspect-ratio:1;transform:translate(-50%,-50%)}.lantern{position:absolute;width:clamp(86px,21vw,112px);height:clamp(105px,25vw,137px);border:0;border-radius:44% 44% 36% 36%;background:linear-gradient(145deg,color-mix(in srgb,var(--c),white 20%),color-mix(in srgb,var(--c),black 35%));box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),inset 0 -12px 25px rgba(0,0,0,.22),0 10px 18px rgba(0,0,0,.28),0 0 0 rgba(0,0,0,0);color:#fff;cursor:pointer;touch-action:manipulation;transition:transform .13s cubic-bezier(.2,.9,.3,1.35),filter .13s,box-shadow .13s}.lantern:before,.lantern:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:48%;height:9px;border-radius:5px;background:#302344;box-shadow:inset 0 2px #6e587f}.lantern:before{top:-5px}.lantern:after{bottom:-5px}.lantern i{position:absolute;left:50%;top:-24px;width:25px;height:25px;border:4px solid #4d3c62;border-bottom:0;border-radius:50% 50% 0 0;transform:translateX(-50%)}.lantern span{display:block;font-size:34px;text-shadow:0 3px rgba(0,0,0,.2)}.lantern b{display:block;margin-top:5px;font-size:11px}.lantern:active{transform:scale(.92)}.lantern.lit{z-index:4;transform:scale(1.11);filter:brightness(1.45);box-shadow:inset 0 0 0 4px #fff,0 0 25px var(--c),0 0 65px var(--c)}.lantern.echo:after{box-shadow:0 0 0 4px #fff2a8,0 0 0 8px rgba(255,210,87,.38)}.lantern.disabled{display:none}.lantern-0{--c:#21bd76;left:50%;top:0;transform:translateX(-50%)}.lantern-1{--c:#e6a627;right:0;top:26%}.lantern-2{--c:#2d83db;right:15%;bottom:0}.lantern-3{--c:#d83e67;left:15%;bottom:0}.lantern-4{--c:#8159d4;left:0;top:26%}.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;display:grid;place-content:center;border-radius:50%;background:radial-gradient(circle,#3e397b,#171844 67%);border:3px solid rgba(255,255,255,.18);box-shadow:0 0 30px rgba(154,126,255,.25);color:#fff;text-align:center}.core span{font-size:20px;font-weight:950}.core small{font-size:7px;letter-spacing:.14em;color:#b9afe7}.sequence-dots{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex;justify-content:center;gap:5px;max-width:90%;flex-wrap:wrap}.sequence-dots i{width:8px;height:8px;border-radius:50%;background:#4b4c7b;border:1px solid #7b7dab}.sequence-dots i.done{background:#62e0b2;box-shadow:0 0 8px #62e0b2}.sequence-dots i.wrong{background:#ff6685}
.actionbar{position:absolute;z-index:7;left:50%;bottom:max(9px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(660px,calc(100% - 22px));height:64px;display:grid;grid-template-columns:145px 1fr;gap:7px}.actionbar button,.rule-chip{border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(24,27,78,.88);color:#fff}.actionbar button{cursor:pointer}.actionbar button:disabled{opacity:.38}.actionbar button span,.actionbar button b,.actionbar button small{display:block}.actionbar button span{float:left;margin:4px 8px 0 10px;font-size:24px}.actionbar button b{font-size:10px;margin-top:5px}.actionbar button small{font-size:8px;color:#bbb8df}.rule-chip{display:flex;align-items:center;justify-content:center;gap:10px}.rule-chip span{font-size:25px;color:#ffc247}.rule-chip b{font-size:11px}.toast{position:absolute;z-index:30;left:50%;top:47%;transform:translate(-50%,-50%) scale(.75);padding:11px 17px;border-radius:15px;background:#176e56;color:#fff;font-weight:900;opacity:0;pointer-events:none;box-shadow:0 15px 40px rgba(0,0,0,.35)}.toast.show{animation:toast 1.05s ease both}.toast.bad{background:#a83c58}
.screen{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:max(70px,env(safe-area-inset-top)) 13px max(15px,env(safe-area-inset-bottom));overflow:auto;background:rgba(5,6,29,.74);backdrop-filter:blur(10px)}.panel{width:min(620px,100%);padding:25px;border:1px solid rgba(255,255,255,.5);border-radius:27px;background:linear-gradient(145deg,#fffbed,#e5ddff);box-shadow:0 25px 75px rgba(0,0,0,.46);text-align:center}.eyebrow{font-size:9px;font-weight:950;letter-spacing:.17em;color:#6d50bd}.panel h2{margin:5px 0 9px;font-family:Georgia,serif;font-size:clamp(32px,8vw,52px);line-height:.96}.panel h2 em{color:#8159d4;font-style:normal}.panel p{max-width:500px;margin:0 auto 13px;color:var(--muted);font-size:13px;line-height:1.45}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.feature-grid span{padding:10px 5px;border:1px solid rgba(61,47,112,.13);border-radius:14px;background:rgba(255,255,255,.55)}.feature-grid i,.feature-grid b,.feature-grid small{display:block}.feature-grid i{font-size:25px;font-style:normal}.feature-grid b{font-size:11px}.feature-grid small{font-size:9px;color:var(--muted)}.chapter-map{display:flex;justify-content:center;gap:6px;margin:13px 0}.chapter-dot{width:47px;height:31px;border:0;border-radius:9px;background:#c5bfd8;color:#716a83;font-size:10px;font-weight:900}.chapter-dot.open{background:#7455bd;color:#fff}.chapter-dot.current{outline:3px solid #f1b936}.primary{width:100%;min-height:50px;border:0;border-bottom:4px solid #3c2a75;border-radius:15px;background:linear-gradient(#9575dc,#6547ae);color:#fff;font-weight:950;letter-spacing:.04em;cursor:pointer}.primary:active{transform:translateY(2px);border-bottom-width:2px}.primary span{float:right;margin-right:15px}.save-note{display:block;margin-top:9px;color:var(--muted)}.intro-panel,.small-panel{max-width:430px}.intro-icon,.result-icon{display:block;font-size:59px}.intro-panel h2,.small-panel h2{font-size:34px}.rule-demo{margin:10px 0;padding:12px;border-radius:14px;background:#252251;color:#ffe494;font-size:24px;letter-spacing:7px}.secondary{width:100%;padding:11px;border:0;background:transparent;color:#6547ae;font-weight:900;cursor:pointer}.result-stars{font-size:40px;letter-spacing:3px;color:#c6bb9f}.result-stars[data-stars="1"]{background:linear-gradient(90deg,#f4b932 0 32%,#c6bb9f 32%);background-clip:text;color:transparent}.result-stars[data-stars="2"]{background:linear-gradient(90deg,#f4b932 0 65%,#c6bb9f 65%);background-clip:text;color:transparent}.result-stars[data-stars="3"]{color:#f4b932}.result-stats{display:flex;justify-content:center;gap:8px;margin:9px 0}.result-stats span{min-width:105px;padding:7px;border:1px solid rgba(62,46,117,.15);border-radius:11px;background:#fff}.result-stats small,.result-stats b{display:block}.result-stats small{font-size:9px;color:var(--muted)}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%,74%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-65%) scale(.95)}}
@media(max-width:580px){.brand{display:none}.topbar{gap:4px}.stat{min-width:42px}.hearts{font-size:11px}.mission-card{top:63px}.arena{top:142px}.lantern-ring{width:min(390px,94vw)}.lantern{width:82px;height:103px}.lantern span{font-size:29px}.feature-grid{grid-template-columns:1fr}.feature-grid span{display:grid;grid-template-columns:34px 1fr;column-gap:5px;text-align:left;padding:6px 9px}.feature-grid i{grid-row:1/3}.panel{padding:18px 14px}.panel h2{font-size:36px}}
@media(max-height:700px){.topbar{top:4px}.mission-card{top:56px;padding:5px 10px}.chapter-gem{width:42px;height:42px}.mission-card{grid-template-columns:44px 1fr auto}.mission-copy p{display:none}.arena{top:111px;bottom:72px}.actionbar{bottom:4px;height:61px}.moon{display:none}.status{top:7px}.lantern-ring{top:52%;width:min(365px,85vh)}.lantern{width:75px;height:91px}.lantern span{font-size:26px}.hero-panel p{margin-bottom:6px}.feature-grid span{padding:5px}.chapter-map{margin:7px 0}.panel{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}