:root{--bg:#101628;--panel:#1b233d;--ink:#fff5e4;--muted:#ccd5e8;--accent:#d3b2ff;--gold:#f3d17a;--good:#83e6b1;--danger:#ffb5b2;--scene:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:17px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}button,input,a{font:inherit}button,.button{border:1px solid #7583a3;background:#2b3553;color:var(--ink);padding:10px 17px;border-radius:14px;cursor:pointer;transition:background .15s,transform .15s}button:hover,.button:hover{background:#3b496b}button:active{transform:translateY(1px)}button.primary{background:var(--gold);color:#20243c;border-color:#ffdf93;font-weight:750}button:disabled{opacity:.45;cursor:default;transform:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}h1,h2,h3,p{margin-top:0}p{color:var(--muted)}h1{font-size:clamp(30px,4vw,52px);line-height:1.13}h2{font-size:27px}.shellbar{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:12px 24px;background:#141c31;border-bottom:1px solid #3b4761}.brand{font-weight:850;letter-spacing:.4px;color:var(--gold)}.tools{display:flex;gap:8px;flex-wrap:wrap}.tools button{font-size:14px;padding:8px 12px}.home{max-width:1240px;padding:28px;margin:auto}.intro{position:relative;overflow:hidden;padding:32px;border-radius:26px;min-height:225px;background:linear-gradient(90deg,#18213bed,#192741a8),url('../assets/cover.webp?v=1') center/cover;border:1px solid #766291}.intro p{max-width:750px}.tag{text-transform:uppercase;letter-spacing:2px;color:var(--gold);font-size:13px}.hero-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.hero-choice{position:relative;text-align:center;padding:15px;border:2px solid #3d4a69;background:radial-gradient(ellipse at top,#494969,#1b243d);border-radius:22px}.hero-choice.selected{border-color:var(--gold);box-shadow:0 0 0 3px #f5d38425}.hero-choice img{height:166px;width:154px;object-fit:contain}.hero-choice h3{margin:4px 0}.hero-choice p{font-size:14px;margin:3px 0 10px}.hero-choice button{width:100%}.map{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.map-card{background:linear-gradient(135deg,var(--tint),#1b233e);border:1px solid #4e5d79;border-radius:20px;padding:19px;position:relative}.map-card .map-number{display:inline-grid;place-items:center;border:1px solid var(--gold);color:var(--gold);width:42px;height:42px;border-radius:50%;font-size:23px;font-weight:800;margin-bottom:10px}.map-card h3{font-size:20px;margin-bottom:5px}.map-card p{font-size:14px}.map-card button{width:100%}.map-card.locked{opacity:.6}.progressline{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin:23px 0}.progressbar{height:12px;flex:1;min-width:160px;max-width:600px;border-radius:20px;background:#303b57;overflow:hidden}.progressbar span{display:block;height:100%;background:linear-gradient(90deg,#82d8b7,#ead383)}#gameFrame{width:100%;height:calc(100vh - 70px);min-height:670px;border:0;display:block;background:#101628}body.playing #homeView{display:none}body:not(.playing) #gameFrame{display:none}dialog{max-width:800px;width:calc(100% - 36px);max-height:92vh;overflow:auto;background:#1c2642;color:var(--ink);border:1px solid #98a4c3;border-radius:24px;padding:26px}dialog::backdrop{background:#060b18c9}dialog .dialogtop{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.result-table{width:100%;border-collapse:collapse;font-size:14px}.result-table td,.result-table th{padding:7px;border-bottom:1px solid #435273;text-align:left}.notice{background:#293753;border-left:4px solid var(--gold);padding:12px 16px;border-radius:9px;margin:15px 0}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:14px 20px;border:1px solid #d2bc76;background:#202b43;border-radius:14px;z-index:30;max-width:90%;box-shadow:0 8px 30px #0008}.hidden,[hidden]{display:none!important}.chapter-head{max-width:1280px;margin:auto;padding:13px 22px 9px;display:flex;justify-content:space-between;align-items:center;gap:15px}.chapter-head h1{font-size:24px;margin:0}.chapter-head p{margin:0;font-size:13px}.lesson{max-width:1280px;padding:0 22px 24px;margin:auto}.taskstrip{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 18px;border:1px solid #53617e;background:linear-gradient(110deg,#273451,#1a2542);border-radius:17px;margin:10px 0}.taskstrip h2{margin:0 0 3px;font-size:23px}.taskstrip p{margin:0;font-size:17px;max-width:850px}.taskicon{width:60px;min-width:60px;height:65px}.stage-wrap{position:relative}.stage{position:relative;width:100%;aspect-ratio:25/14;min-height:350px;max-height:calc(100vh - 220px);background-image:linear-gradient(#14203518,#14203533),var(--scene);background-size:cover;background-position:center;border:2px solid #617090;border-radius:22px;overflow:hidden;touch-action:none;user-select:none}.stage canvas.field{width:100%;height:100%;display:block}.stage .hud{position:absolute;top:12px;left:15px;background:#12203ede;border:1px solid #7b90ae;border-radius:14px;padding:8px 14px;font-weight:700;pointer-events:none;z-index:2}.stage .bottomhint{position:absolute;bottom:12px;left:15px;background:#15223ceb;border:1px solid #72839f;border-radius:12px;padding:7px 12px;font-size:14px;pointer-events:none;max-width:70%}.loading{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#121e34ed;z-index:6}.loading .card{max-width:480px;padding:30px}.spark{display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--gold);box-shadow:0 0 25px #f1d484;animation:pulse 1.3s infinite}@keyframes pulse{50%{transform:scale(.6);opacity:.5}}.understage{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-top:10px}.levelbuttons{display:flex;gap:7px}.levelbuttons button{width:39px;padding:7px}.levelbuttons button.current{background:var(--accent);color:#17213a}.levelbuttons button.done{border-color:var(--good)}.companion{display:flex;gap:10px;align-items:center;font-size:14px}.companion canvas{width:90px;height:98px}.companion p{margin:0;max-width:250px}.finishcard{position:absolute;inset:8% 18%;background:#162440f5;border:2px solid var(--gold);border-radius:24px;padding:25px;text-align:center;z-index:5;box-shadow:0 20px 65px #0008;overflow:auto}.finishcard h2{font-size:29px}.finishcard .percent{font-size:55px;font-weight:850;color:var(--gold);line-height:1.2}.finishcard p{margin:8px 0}.finishcard .buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}.stars{letter-spacing:8px;color:var(--gold);font-size:30px}.paperarea{position:absolute;inset:14% 10%;padding:25px;background:#fff4db;color:#3c3027;border:5px solid #a28461;border-radius:18px;box-shadow:0 12px 35px #0007;overflow:auto;user-select:text;cursor:text}.paperarea p{color:#3c3027;font:25px/1.7 Georgia,serif}.paperarea .paper-title{font-size:16px;text-transform:uppercase;letter-spacing:2px;font-family:system-ui;color:#665037}.paperarea .selected-paragraph{background:#c5dcff}.sliderarea{position:absolute;inset:18% 18%;background:#182a42ef;padding:24px;border:3px solid #beab77;border-radius:22px;text-align:center}.slider-track{position:relative;max-width:650px;margin:38px auto 15px}.slider-track .targetband{position:absolute;top:8px;height:24px;background:#70f3a075;border:2px solid #adffc4;border-radius:8px;pointer-events:none}.slider-track input{position:relative;width:100%;height:42px;accent-color:var(--gold);cursor:ew-resize}.power{font-size:40px;color:var(--gold);font-weight:800}.float-window{position:absolute;background:#f9efd8;color:#382f24;border:4px solid #6d7398;border-radius:13px;overflow:hidden;box-shadow:0 12px 35px #0007}.float-window .titlebar{height:40px;background:#38496e;color:#fff3df;padding:8px 14px;cursor:move;font-weight:750}.float-window .wintext{padding:16px;font-size:20px;pointer-events:none}.resize-handle{position:absolute;right:0;bottom:0;width:30px;height:30px;background:linear-gradient(135deg,transparent 30%,#967746 31%,#967746 45%,transparent 46%,transparent 55%,#967746 56%,#967746 70%,transparent 71%);cursor:nwse-resize}.scrollarea{position:absolute;inset:7% 14%;overflow:auto;background:#1d2d45ed;border:3px solid #d8c197;border-radius:18px;overscroll-behavior:contain;scrollbar-color:#d2b47c #1b2b48;scrollbar-width:auto}.floor{min-height:220px;border-bottom:2px dashed #83a6ca;display:flex;gap:20px;align-items:center;justify-content:space-around;padding:22px}.floor .floor-number{font-size:35px;color:var(--gold);min-width:150px}.floor button{background:#233a57;border:2px solid #9cb7d3;padding:8px 24px}.floor img{width:94px;height:92px;object-fit:contain;border-radius:12px;display:block}.menu{position:absolute;z-index:8;width:195px;background:#f3ead5;color:#292e40;border:3px solid #6c6685;border-radius:13px;padding:6px;box-shadow:0 8px 30px #0009}.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#292e40;font-size:17px;padding:10px}.menu button:hover{background:#dad2eb}.demo{position:relative;height:260px;background:radial-gradient(ellipse at center,#34466b,#14213b);border:1px solid #53647e;border-radius:18px;overflow:hidden}.demo svg{width:100%;height:100%;display:block}.demo .hand{animation:demoMove 4s infinite}.demo .left-key{animation:demoPress 4s infinite}@keyframes demoMove{0%,15%{transform:translate(0,0)}50%,85%{transform:translate(185px,-25px)}100%{transform:translate(0,0)}}@keyframes demoPress{0%,50%,85%,100%{fill:#354865}58%,65%{fill:#f5d384}}.footer-small{font-size:13px;color:#b0bfd7;margin-top:20px}.toolbar-left{display:flex;align-items:center;gap:10px}.checkline{display:flex;gap:12px;align-items:center;justify-content:center;color:#d4eddf}.mini-sign{width:25px;height:25px;display:inline-block;vertical-align:middle}#inputNotice{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:50;background:#6a3437;border:2px solid #ffd1b1;color:white;padding:12px 20px;border-radius:14px}@media(max-width:950px){.map{grid-template-columns:repeat(2,1fr)}.stage{min-height:320px}.taskstrip p{font-size:16px}.finishcard{inset:5% 10%;padding:18px}.sliderarea{inset:12% 12%}.chapter-head,.lesson{padding-left:12px;padding-right:12px}}@media(max-width:650px){.home{padding:16px}.intro{padding:22px}.hero-list{gap:8px}.hero-choice{padding:10px 4px}.hero-choice img{width:95px;height:104px}.hero-choice p{display:none}.hero-choice h3{font-size:17px}.hero-choice button{font-size:14px;padding:8px 4px}.map{grid-template-columns:1fr}.shellbar{padding:10px 12px}.brand{font-size:15px}.tools button{font-size:12px}.taskstrip{gap:9px;padding:10px}.taskstrip h2{font-size:19px}.taskicon{width:44px;min-width:44px}.companion{display:none}.stage{min-height:300px}.paperarea{inset:10% 5%;padding:15px}.paperarea p{font-size:20px}.floor .floor-number{font-size:23px;min-width:80px}.scrollarea{inset:7% 5%}.floor{gap:5px}.floor button{padding:8px}.finishcard .percent{font-size:42px}}@media(prefers-reduced-motion:reduce){.spark,.demo .hand,.demo .left-key{animation:none}button{transition:none}}

.scene-row{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:14px}.scene-companion{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:18px 10px;border:1px solid #526487;border-radius:22px;background:radial-gradient(ellipse at bottom,#485a78,#19243b);text-align:center}.scene-companion canvas{width:144px;height:156px;max-width:100%;filter:drop-shadow(0 8px 8px #0006)}.scene-companion p{font-size:14px;margin:12px 0}.scene-companion .tag{font-size:10px}@media(max-width:850px){.scene-row{grid-template-columns:minmax(0,1fr)}.scene-companion{display:none}}

#orientationHint{min-width:76px;text-align:center;font-size:13px;color:#f7dc91}#orientationImage{width:76px;height:64px;object-fit:contain;border-radius:10px;background:#fff1d9;display:block}

.shellbar{position:sticky;top:0;z-index:20}.chapter-head{position:sticky;top:0;z-index:10;background:#101628ee}

/* V2: the scene keeps its geometry at every viewport size. */
html,body{overflow-x:hidden}select{font:inherit;color:var(--ink);background:#273754;border:1px solid #8594b0;border-radius:10px;padding:6px;max-width:185px}.companion-control{font-size:13px;display:flex;align-items:center;gap:6px}.lesson{max-width:1720px;padding-bottom:8px}.chapter-head{max-width:1720px;padding-top:7px;padding-bottom:5px}.chapter-head h1{font-size:21px}.chapter-head p{max-width:850px;font-size:12px}.scene-row{display:block}.stage{width:min(100%,calc((100dvh - 210px)*25/14));min-height:0;max-height:none;aspect-ratio:25/14;margin:auto;border-radius:20px;background-position:center;background-size:cover}.stage canvas.field{position:absolute;inset:0;width:100%;height:100%}.stage-wrap{width:100%}.scene-companion.onstage{display:contents}.onstage canvas{position:absolute;width:15%;height:auto;max-width:none;left:12.5%;top:89%;transform:translate(-50%,-94%);pointer-events:none;z-index:3;filter:drop-shadow(0 8px 7px #0008);transition:opacity .2s}.onstage p,.onstage .tag{display:none}.taskstrip{margin:5px 0 8px;padding:9px 16px;min-height:84px}.taskstrip h2{font-size:22px}.taskstrip p{font-size:16px;max-width:1100px}.taskicon{height:54px;min-width:48px;width:48px}.understage{margin-top:6px;font-size:14px}.stage .hud{font-size:15px;padding:6px 12px}.finishcard{z-index:6}#orientationImage{background:transparent;border-radius:0}#gameFrame{height:calc(100dvh - 65px);min-height:0}body.playing{height:100dvh;overflow:hidden}.shellbar{padding:8px 20px;min-height:60px}.companion-control select{font-size:13px}.sliderarea{inset:12% 17%;padding:14px;background:#15253ac9;backdrop-filter:blur(3px)}.sliderarea h3{margin-bottom:4px}.sliderarea p{margin-bottom:4px}.slider-track{margin:14px auto 0}.power{font-size:28px}.machine{width:140px;height:112px;position:relative;margin:0 auto}.machine-glow{position:absolute;inset:-60px;pointer-events:none;background:radial-gradient(ellipse,#ffe8a8 0%,#fff3b869 30%,transparent 65%);opacity:var(--power,.1);transform:scale(calc(.65 + var(--power,.1)*.65))}.machine-bulb{position:absolute;top:1px;left:39px;width:63px;height:72px;border:4px solid #ead2a2;border-radius:50% 50% 36% 36%;display:grid;place-items:center;font-size:48px;color:#fff4b5;background:rgba(255,225,126,var(--power,.1));box-shadow:0 0 calc(var(--power,.1)*65px) rgba(255,228,145,var(--power,.1));text-shadow:0 0 12px #ffe8a8}.machine-base{position:absolute;bottom:13px;left:50px;width:43px;height:27px;border:3px solid #98856d;border-radius:2px 2px 9px 9px;background:repeating-linear-gradient(#64594c 0 5px,#b99f77 5px 8px)}
.scrollarea{inset:7% 9%;background:linear-gradient(#5d83a870,#9dc5d526);border-color:#bfd9e06b}.floor{position:relative;min-height:240px;background:linear-gradient(180deg,#b3d4f522,#536ea82b);border-bottom-color:#d9edff40;overflow:hidden}.floor-1{background:linear-gradient(160deg,#abc9e227,#ab97d030)}.floor-2{background:linear-gradient(160deg,#e6c6b01f,#88b7d52b)}.floor-number{position:relative;z-index:1;text-shadow:0 3px 5px #17263e}.cloud-shelf{position:relative;width:75%;height:175px}.floor .cloud-chest{position:absolute;top:30px;padding:0;width:110px;height:110px;border:0;background:transparent!important;border-radius:0;box-shadow:none;z-index:2}.floor .cloud-chest img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 7px #1b2c4d77)}.cloud-decor{position:absolute!important;pointer-events:none;opacity:.6;filter:drop-shadow(0 7px 9px #24345055)}.floor .cloud-decor-0{left:2%;top:66px;width:110px;height:95px}.floor .cloud-decor-1{right:0;bottom:-8px;width:190px;height:115px;opacity:.85}.cloud-chest.opening img{animation:chestOpen 1s both}.cloud-chest.opening:after{content:'✦ ✧ ✦';position:absolute;left:-25%;top:-45%;width:150%;color:#fff3ad;font-size:35px;pointer-events:none;animation:treasureDust 1s both;text-shadow:0 0 20px #ffe5aa}.cloud-chest.opening:before{content:'';position:absolute;inset:-40%;background:radial-gradient(ellipse,#fff2b5b0,transparent 65%);animation:treasureDust 1s both}.cloud-shelf:before{content:'';position:absolute;inset:45% 0 -20%;background:radial-gradient(ellipse at 20% 60%,#edf7ff3d,transparent 45%),radial-gradient(ellipse at 90% 80%,#f5edff42,transparent 55%);pointer-events:none;animation:cloudDrift 7s ease-in-out infinite alternate}@keyframes chestOpen{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.06) rotate(-6deg)}55%{transform:scale(1.16) rotate(5deg);filter:drop-shadow(0 -16px 18px #ffe8a8)}100%{transform:scale(1.04)}}@keyframes treasureDust{0%{opacity:0;transform:translateY(20px) scale(.5)}40%{opacity:1}100%{opacity:0;transform:translateY(-35px) scale(1.4)}}@keyframes cloudDrift{to{transform:translateX(22px)}}
@media(max-width:850px){.scene-companion.onstage{display:contents}.chapter-head p{display:none}.companion-control{font-size:12px}.stage{width:min(100%,calc((100dvh - 205px)*25/14))}.tools{gap:5px}.tools button{font-size:12px;padding:6px 9px}.shellbar{padding:6px 10px}.taskstrip h2{font-size:19px}.taskstrip p{font-size:14px}.sliderarea{inset:10% 15%;padding:8px}.machine{height:80px;transform:scale(.8);margin:-7px auto}.sliderarea h3{font-size:17px}.sliderarea p{font-size:13px}.floor .floor-number{font-size:24px;min-width:100px}}@media(prefers-reduced-motion:reduce){.cloud-shelf:before{animation:none}}
.floor .cloud-chest .chest-lid{position:absolute;inset:0;clip-path:inset(0 0 58% 0);visibility:hidden;transform-origin:12% 42%}.cloud-chest.opening>img:first-child{clip-path:inset(42% 0 0 0);animation:none}.cloud-chest.opening .chest-lid{visibility:visible;animation:lidOpen 1s both}@keyframes lidOpen{0%{transform:rotate(0)}45%,100%{transform:rotate(-38deg) translateY(-7px);filter:drop-shadow(0 -6px 12px #ffedac)}}
.stage{background-image:linear-gradient(rgba(255,226,147,var(--restored,0)),rgba(255,226,147,0)),var(--scene);transition:background-color .8s}.cloud-chest img{pointer-events:none}