:root{--ink:#f0eaff;--gold:#ffdf9a;--sky:#0f184b;--purple:#baa0f4;--luma:#ffe3a9}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(ellipse at 17% -14%,#6552aa 0%,transparent 40%),radial-gradient(ellipse at 87% 55%,#244b8d 0%,transparent 49%),linear-gradient(150deg,#0c0e30,#131543 59%,#0a1936);overflow-x:hidden;min-height:100svh}
button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffde90;outline-offset:3px}a{color:inherit;text-decoration:none}
.topnav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1220px;margin:auto;padding:17px 22px;position:relative;z-index:5}
.topnav a{color:#ffedc6;font-weight:800;font-size:14px}.topnav a:hover{text-decoration:underline}.topnav .brand{font:900 21px Georgia,serif;letter-spacing:.04em;color:#ffe5a9}
main{max-width:1220px;margin:0 auto;padding:0 clamp(12px,2.5vw,28px) 35px}
.intro{text-align:center;margin:3px auto 23px;position:relative}
.eyebrow{display:inline-block;padding:7px 17px;border-radius:40px;border:1px solid #dec9fa5c;background:#9881c02d;letter-spacing:.13em;font-size:11px;font-weight:900;color:#ffe2a5}
.intro h1{font:900 clamp(30px,5.2vw,55px)/1.13 Georgia,serif;letter-spacing:-.03em;color:#ffe7b3;margin:12px 0}
.intro h1 em{font-style:normal;background:linear-gradient(115deg,#e6baff,#b7cfff 55%,#ffe8b8);color:transparent;-webkit-background-clip:text;background-clip:text}
.intro p{max-width:700px;margin:0 auto;color:#e1dcfa;line-height:1.6;font-size:clamp(13px,1.6vw,16px)}
.scene{position:relative;display:grid;grid-template-columns:minmax(235px,.75fr) minmax(400px,1.32fr);gap:clamp(12px,2.5vw,30px);padding:clamp(16px,2.6vw,30px);border:1.5px solid #c4c0ff8a;border-radius:33px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 20% 18%,#9f77ea40,transparent 35%),radial-gradient(circle at 90% 85%,#1cb8cc27,transparent 38%),linear-gradient(145deg,#2f2a79,#111950 55%,#081e47);box-shadow:0 25px 65px #03081ecb,inset 0 2px #ffffff30}
.sky-glow{position:absolute;inset:0;z-index:-1;opacity:.7;pointer-events:none;background:repeating-conic-gradient(from 270deg at 48% -37%,transparent 0deg 9deg,#9eceff12 11deg 13deg,transparent 15deg 26deg)}
.space-dust{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 8% 11%,#fff 0 1px,transparent 2px),radial-gradient(circle at 22% 75%,#ffd7ad 0 1.7px,transparent 3px),radial-gradient(circle at 86% 14%,#fff 0 2px,transparent 3px),radial-gradient(circle at 58% 59%,#f8cdff 0 1px,transparent 2px);background-size:170px 170px,257px 225px,303px 191px,144px 233px}
.tavi-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:16px;z-index:1}
.art-frame{position:relative;width:min(100%,405px);aspect-ratio:3/4;border-radius:47% 47% 24% 24% / 31% 31% 17% 17%;border:2px solid #e9d7ff9c;overflow:hidden;box-shadow:0 0 0 9px #abbbff0b,0 22px 42px #0611389c;background:#383084}
.art-frame:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,#25216780,transparent 36%),radial-gradient(ellipse at 50% 19%,transparent 30%,#5c3a9e18 76%)}
.art-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;animation:floatArt 8s ease-in-out infinite alternate}
@keyframes floatArt{to{transform:scale(1.055) translateY(-5px)}}
.star-luma{position:absolute;z-index:3;right:7%;top:8%;font-size:clamp(40px,5vw,60px);color:#fff0a7;text-shadow:0 0 12px #fff,0 0 38px #fff09a;animation:lumaGlow 2.5s ease-in-out infinite alternate;pointer-events:none}
@keyframes lumaGlow{to{transform:rotate(15deg) scale(1.13);text-shadow:0 0 18px #fff,0 0 50px #ffc85c}}
.speech{width:min(100%,395px);padding:17px 20px;border:2px solid #ffebc7b0;border-radius:18px 23px 20px 14px;transform:rotate(-1deg);background:linear-gradient(140deg,#fff6f0ed,#ebdefcf0);color:#4a3874;box-shadow:0 13px 28px #040f3390}
.speech span{color:#8d619d;font-weight:900;font-size:12px;letter-spacing:.05em}
.speech p{font-size:clamp(14px,1.4vw,16px);font-weight:700;line-height:1.45;margin:6px 0 0}
.story-tag{font-size:12px;color:#dcd6ff;text-align:center}
.game-panel{position:relative;z-index:2;align-self:center;padding:clamp(15px,2.1vw,23px);border:2px solid #cfc0ffd6;border-radius:27px;background:linear-gradient(155deg,#101b50f7,#121b50ed 57%,#221950f5);box-shadow:0 15px 40px #040b339c,inset 0 1px #ffffff2f}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.stage-label{color:#ffda9c;font-weight:900;letter-spacing:.15em;font-size:12px}.milestones{display:flex;gap:10px}.milestone{width:25px;height:25px;display:grid;place-items:center;border:1px solid #d8d7ff73;border-radius:50%;color:#857ab5;background:#6b5f9869;font-size:15px;transition:background .3s,box-shadow .3s}.milestone.done{color:#fff5ce;background:#c39453;box-shadow:0 0 14px #f9dc88db}
.game-panel h2{text-align:center;font:900 clamp(23px,3.1vw,32px)/1.2 Georgia,serif;color:#ffecb8;margin:12px 0 5px}
.mission{text-align:center;color:#d6d4fb;line-height:1.5;font-size:13px;min-height:20px;margin:0 auto 13px}
.sky{position:relative;aspect-ratio:1000/740;width:100%;max-width:690px;margin:0 auto;overflow:hidden;border-radius:23px;border:2px solid #c7c9ff95;background:radial-gradient(ellipse at 53% 47%,#48347c 0,#25346d 48%,#101d51 82%);box-shadow:0 6px 29px #030b3294,inset 0 0 55px #081132;touch-action:none;user-select:none}
.sky:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.58;background:radial-gradient(ellipse at 50% 50%,transparent 0 20%,#af95fc19 40%,transparent 56%);filter:blur(7px)}
.sky-specks{position:absolute;inset:0;pointer-events:none;opacity:.62;background:radial-gradient(circle at 6% 12%,#fff 0 1px,transparent 2px),radial-gradient(circle at 69% 19%,#ffe8ac 0 1px,transparent 2px),radial-gradient(circle at 19% 73%,#c7d9ff 0 1px,transparent 2px),radial-gradient(circle at 85% 81%,#fff 0 1px,transparent 2px);background-size:127px 133px,181px 131px,162px 163px,93px 111px}
.sky-orbit{position:absolute;border:1px solid #c9bcfa1a;border-radius:50%;pointer-events:none;transform:rotate(-18deg)}.orbit-a{width:86%;height:68%;top:17%;left:9%}.orbit-b{width:67%;height:88%;top:5%;left:18%;transform:rotate(22deg)}
.constellation-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.constellation-lines line{stroke:#fff0b1;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 10px #ffdb82);stroke-dasharray:1100;stroke-dashoffset:1100;animation:drawPath .55s ease-out forwards}
.constellation-lines line.line-halo{stroke:#b69dff;stroke-width:26;opacity:.25;filter:blur(9px)}
@keyframes drawPath{to{stroke-dashoffset:0}}
#starButtons{position:absolute;inset:0;z-index:5}
.star{position:absolute;left:var(--x);top:var(--y);width:clamp(39px,5vw,53px);height:clamp(39px,5vw,53px);display:grid;place-items:center;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:#abc1ff1a;color:#d4d5ff;box-shadow:0 0 0 1px #d9d9ff54,inset 0 0 14px #acb1ff36;transition:box-shadow .2s,background .2s,color .2s;touch-action:none}
.star span{font-size:29px;line-height:1;filter:drop-shadow(0 0 9px currentColor);pointer-events:none}
.star.next{background:radial-gradient(circle,#fff9db 0%,#e8bb79 30%,#ac8dfc51 78%);color:#fff8cb;box-shadow:0 0 0 5px #fff2bd30,0 0 22px #fff5b7,0 0 45px #c0a0ff;animation:callStar 1.25s ease-in-out infinite alternate}
.star.next span{filter:drop-shadow(0 0 10px #fff)}
@keyframes callStar{to{box-shadow:0 0 0 13px #fff2bd0b,0 0 32px #fff2bf,0 0 54px #ddadff;transform:translate(-50%,-50%) scale(1.12)}}
.star.lit{color:#ffe8a7;background:radial-gradient(circle,#fff5db 0%,#ffda91b0 42%,#684eb366 80%);box-shadow:0 0 20px #ffde99cb,0 0 42px #b7abffa6}
.star.lit::after{content:"✧";position:absolute;right:0;top:-11px;font-size:18px;color:#fff9d4;animation:starTwinkle .6s both}
@keyframes starTwinkle{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.star:focus-visible{outline:3px solid #ffeb9d;outline-offset:5px}
.message-area{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:9px 2px 6px;min-height:40px}
.status{font-size:13px;font-weight:800;color:#ffe6b7;margin:0}.counter{font-size:12px;color:#c4b8f1;font-weight:700}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:11px}
.button{display:inline-grid;place-items:center;border:0;border-radius:100px;padding:11px 16px;font-size:12px;font-weight:900;text-align:center;box-shadow:0 5px 0 #7b569f,0 8px 17px #0005;transition:transform .15s,box-shadow .15s}
.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(2px);box-shadow:0 2px 0 #7b569f,0 5px 9px #0005}
.button.pale{color:#463875;background:linear-gradient(140deg,#f2e6ff,#d4cbfa)}.button.primary{color:#594077;background:linear-gradient(150deg,#ffefb6,#ffca81);box-shadow:0 5px 0 #b97858,0 9px 15px #0004}
.celebration{position:absolute;z-index:6;inset:0;pointer-events:none}.comet{position:absolute;left:var(--x);top:var(--y);font-size:24px;color:#ffe9a8;text-shadow:0 0 12px #ffe18f;animation:cometBurst 1.15s ease-out forwards}
@keyframes cometBurst{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(90deg) scale(.9)}}
.finish{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:clamp(15px,3vw,27px);border-radius:24px;background:radial-gradient(circle at 50% 5%,#edc2ffb0,transparent 35%),linear-gradient(150deg,#1d3279f7,#2e246bea);box-shadow:inset 0 0 0 2px #f9da9eba;text-align:center}
.finish-stars{font-size:21px;letter-spacing:.6em;color:#ffe4a8;animation:lumaGlow 2s ease-in-out infinite alternate}
.finish img{width:min(100%,320px);height:min(20vh,146px);min-height:65px;object-fit:cover;object-position:center 47%;border-radius:18px;border:2px solid #fff2ca;box-shadow:0 12px 27px #050f4288}
.finish-inner{max-width:405px}.finish-kicker{font-size:11px;letter-spacing:.11em;color:#ffe7b7;font-weight:900}
.finish h2{margin:6px 0 10px;font:900 clamp(25px,3vw,32px)/1.15 Georgia,serif;color:#fff3c1}
.finish p{font-size:clamp(12px,1.5vw,14px);line-height:1.5;color:#e6e4ff;margin:0 0 17px}
.finish-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
[hidden]{display:none!important}
.footnote{text-align:center;color:#cec8f6;font-size:12px;line-height:1.7;margin:19px auto}
@media(max-width:900px){.scene{grid-template-columns:1fr;gap:15px}.tavi-panel{display:grid;grid-template-columns:minmax(100px,145px) 1fr;gap:11px}.art-frame{width:145px;aspect-ratio:4/3;border-radius:29px}.speech{width:100%;transform:none}.story-tag{display:none}.star-luma{font-size:28px}.game-panel{width:min(100%,700px);margin:auto}}
@media(max-width:500px){.topnav{padding:12px;justify-content:center;gap:10px}.topnav a{font-size:12px}.topnav .brand{font-size:17px}.intro{margin-bottom:13px}.intro h1{font-size:29px}.intro p{font-size:13px}.scene{padding:11px;border-radius:22px}.tavi-panel{grid-template-columns:95px 1fr}.art-frame{width:95px;height:115px;aspect-ratio:auto;border-radius:18px}.speech{padding:10px 13px}.speech span{font-size:10px}.speech p{font-size:12px}.game-panel{padding:13px;border-radius:22px}.game-panel h2{font-size:24px}.mission{font-size:12px}.sky{border-radius:17px}.star{width:41px;height:41px}.star span{font-size:25px}.controls{gap:7px}.button{padding:10px 12px;font-size:11px}.finish{padding:9px}.finish img{height:88px}.finish p{font-size:12px;line-height:1.4}.finish h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}