:root{
  --night:#0a1021;--panel:#151b31;--stroke:#39405c;--ink:#efe9df;--muted:#b4b9d2;
  --gold:#ecd09a;--cyan:#81e5d2;--display:Georgia,'Times New Roman',serif;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:#0a1021;font-synthesis:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,#283350 0%,transparent 95%),#0a1021;overflow:hidden}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:3px solid #9df2dd;outline-offset:3px}
button:active:not(:disabled){transform:translateY(1px)}
.skip-link{position:absolute;top:-100px;left:20px;z-index:99;background:#ffe1a7;color:#12192c;padding:10px}.skip-link:focus{top:8px}
.app{max-width:1460px;height:100vh;margin:auto;padding:14px 18px 14px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0 10px;border-bottom:1px solid #45445a}
.identity{display:flex;align-items:center;gap:14px}.brand-sigil{width:48px;height:48px;border:1px solid #bda171;box-shadow:inset 0 0 0 4px #192139;border-radius:50%;display:grid;place-items:center;color:#f7d69c;font-size:27px;background:radial-gradient(circle,#27334d,#121829)}
.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.21em;font-size:10px;font-weight:750;color:#bca4dc}.identity h1{font:normal clamp(24px,2.4vw,36px)/1.05 var(--display);margin:0;letter-spacing:.02em}.identity h1 em{font-style:normal;color:var(--gold)}
.chapter{display:flex;flex-direction:column;text-align:right;gap:4px}.chapter-name{color:var(--muted);font-weight:750;letter-spacing:.18em;font-size:10px}.chapter-count{color:var(--gold);font-size:13px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:2px 0 0}.progress-box{display:flex;align-items:center;gap:16px}.progress-box>span{font-size:10px;letter-spacing:.18em;font-weight:750;color:#a2a9c8}.level-dots{display:flex;gap:8px;align-items:center}.level-dot{width:28px;height:8px;border-radius:9px;border:1px solid #5e627d;background:#323951}.level-dot.active{background:#d9b979;border-color:#e7cc9e;box-shadow:0 0 14px #d9b97955}.level-dot.complete{background:#5acbba;border-color:#83e5d1}.preferences{display:flex;gap:16px;flex-wrap:wrap}.tiny-check{color:#c5cbdf;font-size:12px;display:flex;gap:7px;align-items:center;cursor:pointer}.tiny-check input{accent-color:#d4b579;width:16px;height:16px}
.game-shell{min-height:0;display:grid;grid-template-rows:minmax(0,1.45fr) minmax(230px,.95fr);gap:12px}
.story-panel,.bottom-panel{background:linear-gradient(145deg,#19223b,#12192d 70%);border:1px solid #4a4761;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #0004}
.story-panel{display:grid;grid-template-rows:36px minmax(0,1fr) auto;min-height:0}
.scene-topline{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#171b31;border-bottom:1px solid #363c5a}.scene-tag{font-size:10px;color:var(--gold);letter-spacing:.15em;font-weight:750}.state-tag{font-size:10px;color:#9acfc9;text-transform:uppercase;letter-spacing:.11em}
.world{position:relative;width:100%;height:clamp(250px,33vh,380px);background:radial-gradient(ellipse at 68% 50%,#26375a 0%,#111a31 47%,#0c1528 85%);overflow:hidden;isolation:isolate}
.scenery{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.star{position:absolute;z-index:1;height:3px;width:3px;background:#eee2cb;border-radius:50%;box-shadow:0 0 12px #fff;opacity:.8;animation:twinkle 3.8s ease-in-out infinite alternate}.star-1{left:13%;top:13%}.star-2{left:29%;top:28%;animation-delay:-1s}.star-3{left:55%;top:14%;animation-delay:-2s}.star-4{left:89%;top:33%;animation-delay:-3s}.star-5{left:77%;top:13%;animation-delay:-.6s}
@keyframes twinkle{to{opacity:.24;transform:scale(.7)}}
.scene-sprites{position:absolute;inset:0;pointer-events:none;z-index:2}.sprite{position:absolute;display:block;max-width:none;height:auto;user-select:none;object-fit:contain;transform-origin:center center}
.sprite-moon{left:80%;top:5%;width:12%;z-index:1;filter:brightness(.9) drop-shadow(0 0 3px #ecdcb5aa)}
.sprite-bridge{left:6%;top:42%;width:30%;z-index:2;filter:brightness(.85) drop-shadow(0 4px 3px #050e27aa)}
.sprite-gate{left:57.5%;top:14%;width:23%;aspect-ratio:358/449;z-index:3}
.sprite-mei{left:40%;top:43%;width:12.3%;z-index:5;filter:drop-shadow(0 6px 3px rgba(0,0,0,.5))}
.sprite-abby{left:27.2%;top:56%;width:11.8%;z-index:6;filter:drop-shadow(0 6px 3px rgba(0,0,0,.5))}
.sprite-lantern{left:49.1%;top:67%;width:5.9%;z-index:7;filter:drop-shadow(0 3px 7px rgba(255,203,92,.35))}
.sprite-luma{left:47.5%;top:18%;width:10.5%;z-index:8;filter:drop-shadow(0 0 8px rgba(255,232,177,.35))}
.sprite-gate .gate-frame,.sprite-gate .gate-leaf{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;user-select:none}
.gate-portal{position:absolute;left:22%;right:22%;top:11%;bottom:11%;border-radius:120px 120px 18px 18px;background:radial-gradient(circle at 50% 42%,#ecfff8 0%,#b4e8f0 22%,#8cc9e2 43%,#6f7dda 70%,rgba(111,125,218,.05) 100%);opacity:.12;filter:blur(2px);transition:opacity .7s ease, filter .7s ease}
.gate-left{transform-origin:25% 50%;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}.gate-right{transform-origin:75% 50%;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
#bridgeRunes,#lightbeams,#fireworkVectors{opacity:0;transition:opacity .5s}.world-caption{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);margin:0;padding:9px 16px;max-width:min(88%,820px);background:#20334bcf;color:#f5ecd5;border:1px solid #d9b47865;border-radius:28px;text-align:center;font-size:clamp(12px,1.25vw,15px);z-index:5;font-weight:600;line-height:1.25}
.sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:9}.spark{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:0;background:var(--color);clip-path:polygon(50% 0%,61% 36%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 36%);filter:drop-shadow(0 0 4px #f8df9d);animation:sparkBurst var(--duration) ease-out var(--delay) 2 backwards}
@keyframes sparkBurst{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}23%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.9) rotate(170deg)}}
.story-copy{padding:14px 20px 16px}.chapter-index{display:flex;justify-content:space-between;align-items:center;gap:10px;letter-spacing:.14em;color:#c4b0de;font-size:10px;font-weight:750}.luma-name{color:#a8d7d1}.story-copy h2{margin:8px 0 6px;font:normal clamp(24px,3.2vw,34px)/1.05 var(--display);color:#f0d6ad}.story-copy>p:not(.quest-line){margin:0;color:#d4d6e2;line-height:1.48;font-size:clamp(13px,1.3vw,16px)}.quest-line{display:flex;align-items:flex-start;gap:12px;margin:12px 0 0;padding:12px 14px;border:1px solid #555371;background:#252a43;border-radius:8px}.quest-line span{flex:none;color:#b6dbd2;letter-spacing:.14em;font-size:10px;font-weight:800;margin-top:3px}.quest-line strong{font-size:13px;font-weight:600;color:#f4ead8}
.workbench-shell{min-height:0;display:grid;grid-template-columns:1.14fr 1fr .92fr;gap:12px;align-items:stretch}
.bottom-panel{padding:14px 16px;display:flex;flex-direction:column;min-width:0;min-height:0}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-heading h2{font:normal 22px var(--display);margin:2px 0;color:#f0ddbf}.lesson-pill{flex:none;color:#dfc696;border:1px solid #a887507c;border-radius:30px;background:#52442b45;padding:7px 10px;letter-spacing:.1em;font-size:10px;font-weight:700}.instructions{font-size:12px;line-height:1.45;color:#bdc5d5;margin:8px 0 12px}.instructions strong{color:#f5e5c7;font-weight:650}
.section-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px}.section-row h3{font:700 11px system-ui;margin:0;color:#e2c28d;background:#65523744;border:1px solid #b6a47b60;border-radius:50%;width:24px;height:24px;display:inline-grid;place-items:center}.section-row h3 span{font:700 11px system-ui;color:#d8d6e2;letter-spacing:.08em;white-space:nowrap;margin-left:9px}.section-row small{font-size:11px;color:#a6b5c8}
.rune-bank,.spell-slots{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;align-content:flex-start}.rune-bank{flex:1;min-height:0;padding:10px;background:#10172c;border:1px solid #454661;border-radius:10px;overflow:hidden}.spell-slots{flex:1;min-height:0;padding:10px;background:repeating-linear-gradient(90deg,#12182d 0,#12182d 78px,#161d34 79px,#161d34 80px);border:1px dashed #7c7590;border-radius:10px;position:relative;overflow:hidden}.spell-slots.empty::after{content:'✧   Rune marks appear here as you choose them';position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);text-align:center;font-size:12px;color:#838eaa}
.rune-card{position:relative;min-height:96px;width:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 5px 4px;border-radius:8px;background:linear-gradient(#f9ecd0,#ead3a8);border:2px solid #c4a066;color:#493a2c;box-shadow:0 3px 9px #0005;transition:transform .15s,outline-color .15s}.rune-card img{width:52px;height:68px;object-fit:contain;display:block;pointer-events:none;filter:contrast(1.08) saturate(.94) drop-shadow(0 1px 1px rgba(60,44,22,.18))}.rune-card:hover:not(:disabled){outline:2px solid #87e0cf;outline-offset:2px;transform:translateY(-2px)}.rune-card:disabled{opacity:.25;filter:grayscale(.65);box-shadow:none;transform:none}.rune-card.selected{border-color:#78cab5}.rune-card .meaning{display:block;font-size:10px;font-weight:750;text-align:center;line-height:1.1;min-height:12px;max-width:58px;overflow-wrap:break-word}.rune-card .ordinal{position:absolute;top:-6px;right:-6px;background:#212f4b;color:#edd3a0;border:1px solid #a48a6b;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font:700 10px system-ui}
.rune-bank .rune-card{width:70px;min-height:104px}.rune-bank .rune-card img{width:58px;height:80px}.spell-slots .rune-card{width:66px;min-height:101px}.spell-slots .rune-card img{width:55px;height:76px}.spell-slots.solved{border:1px solid #91dec4;box-shadow:inset 0 0 24px #4cbaa01b}
.work-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.btn{border-radius:8px;padding:11px 13px;font-weight:780;letter-spacing:.02em;font-size:12px;border:1px solid #756e86;transition:filter .15s,transform .15s}.btn:not(:disabled):hover{filter:brightness(1.12)}.btn-cast{color:#142436;background:linear-gradient(110deg,#f3d595,#d7ad72);border-color:#ffe4ae;flex:1 1 180px;min-height:43px}.btn-cast:disabled{opacity:.48}.btn-secondary{background:#242b44;color:#cdd5e4}
.message-column{gap:12px;justify-content:flex-start}.guidance{border:1px solid #444b65;border-radius:10px;padding:14px 15px;background:#202842}.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.guide-heading span{font:normal 18px var(--display);color:#b9dfd4}.hint{background:transparent;border:1px solid #779e9a;color:#c3eee6;padding:6px 10px;font-size:11px;border-radius:16px}.hint:disabled{opacity:.4}.feedback{font-size:13px;color:#cbd1df;margin:10px 0 0;line-height:1.55}.feedback.error{color:#ffd9b8}.feedback.positive{color:#c7f2e0}.teacher-note{font-size:11px;color:#aab6d1;margin:9px 0 0}.teacher-note:empty{display:none}
.success-panel{border:1px solid #81d6c2;background:linear-gradient(130deg,#204a4e,#142c3d);border-radius:12px;padding:14px 16px;box-shadow:0 0 24px #56b1a122;margin-top:auto}.success-panel[hidden]{display:none}.success-panel h3{font:normal 26px/1.15 var(--display);margin:8px 0;color:#fff0cd}.success-panel p:not(.eyebrow){font-size:13px;color:#c9e8e5;line-height:1.45}.btn-next{width:100%;color:#17302e;background:#b0eadc;border-color:#a7f5e2;margin-top:8px}
.footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:4px;border-top:1px solid #393c55;color:#8a95b2;letter-spacing:.05em;font-size:10px}
/* magic and sprite animations */
@keyframes bridgeDraw{to{stroke-dashoffset:-96}}@keyframes glimmer{to{opacity:.47}}@keyframes papercutLantern{to{transform:scale(1.08) rotate(3deg);filter:brightness(1.45) drop-shadow(0 0 19px #ffcd5d)}}@keyframes moonPulse{to{filter:brightness(1.38) drop-shadow(0 0 20px #ffe7a9);transform:scale(1.03)}}@keyframes lumaCelebrate{50%{transform:translate(2%,-5%) rotate(-5deg)}100%{transform:translate(24%,-21%) rotate(10deg)}}@keyframes catCrossBridge{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(18%,-43%) rotate(-9deg)}57%{transform:translate(40%,-59%) rotate(5deg)}80%{transform:translate(58%,-20%) rotate(0)}100%{transform:translate(65%,0) rotate(0)}}@keyframes meiCelebrate{50%{transform:translateY(-8%) rotate(-3deg)}}@keyframes vectorFirework{0%,15%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}80%{opacity:.3;transform:scale(1.3)}100%{opacity:0;transform:scale(1.4)}}
.world[data-effect="lantern"] #lightbeams,.world[data-effect="moon"] #lightbeams,.world[data-effect="gate"] #lightbeams{opacity:1;animation:glimmer 2s ease-in-out infinite alternate}
.world[data-effect="bridge"] #bridgeRunes,.world[data-effect="gate"] #bridgeRunes{opacity:1;animation:bridgeDraw 3s linear infinite}
.world[data-effect="gate"] #fireworkVectors{opacity:1;animation:vectorFirework 2s ease-out infinite alternate}
.world[data-effect="lantern"] .sprite-lantern,.world[data-effect="moon"] .sprite-lantern,.world[data-effect="gate"] .sprite-lantern{animation:papercutLantern 2.1s ease-in-out infinite alternate}
.world[data-effect="moon"] .sprite-moon,.world[data-effect="gate"] .sprite-moon{filter:brightness(1.28) drop-shadow(0 0 13px #f3e5b0);animation:moonPulse 2.4s ease-in-out infinite alternate}
.world[data-effect="bridge"] .sprite-bridge,.world[data-effect="gate"] .sprite-bridge{filter:brightness(1.1) drop-shadow(0 0 9px #74e9e0a3)}
.world[data-effect="bridge"] .sprite-abby,.world[data-effect="gate"] .sprite-abby{animation:catCrossBridge 1.8s cubic-bezier(.22,.54,.4,1) forwards}
.world[data-effect="gate"] .gate-portal{opacity:.95;filter:blur(1px) drop-shadow(0 0 14px rgba(184,255,243,.55))}
.world[data-effect="gate"] .gate-left{transform:translateX(-15%) scaleX(.75)}.world[data-effect="gate"] .gate-right{transform:translateX(15%) scaleX(.75)}.world[data-effect="gate"] .sprite-mei{animation:meiCelebrate .7s ease-in-out 3}.world[data-effect="gate"] .sprite-luma{animation:lumaCelebrate 2.3s ease-in-out infinite alternate}
body.reduce-motion .world[data-effect="bridge"] .sprite-abby,body.reduce-motion .world[data-effect="gate"] .sprite-abby{transform:translate(65%,0)}body.reduce-motion .world[data-effect="gate"] .gate-left{transform:translateX(-15%) scaleX(.75)}body.reduce-motion .world[data-effect="gate"] .gate-right{transform:translateX(15%) scaleX(.75)}body.reduce-motion .world[data-effect="gate"] .gate-portal{opacity:.95}
@media(prefers-reduced-motion:reduce){.world[data-effect="bridge"] .sprite-abby,.world[data-effect="gate"] .sprite-abby{transform:translate(65%,0)}}

/* fit more comfortably on medium desktop */
@media (max-width:1280px){
  .world{height:clamp(230px,31vh,330px)}
  .workbench-shell{grid-template-columns:1.08fr .96fr .92fr}
  .rune-bank .rune-card{width:64px;min-height:96px}.rune-bank .rune-card img{width:52px;height:73px}
  .spell-slots .rune-card{width:62px;min-height:96px}.spell-slots .rune-card img{width:51px;height:71px}
  .story-copy h2{font-size:clamp(22px,2.6vw,30px)}
}
@media (max-width:1100px){
  body{overflow:auto;height:auto}
  .app{height:auto;min-height:100vh;padding:14px 14px 18px;grid-template-rows:auto auto auto auto}
  .game-shell{grid-template-rows:auto auto}
  .workbench-shell{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .world{height:auto;aspect-ratio:900/430}
  .footer{padding-bottom:2px}
}
@media (max-width:720px){
  .masthead{padding-bottom:8px}.brand-sigil{width:42px;height:42px;font-size:24px}.identity{gap:10px}.identity h1{font-size:26px}.chapter-name{display:none}.chapter-count{font-size:11px}
  .toolbar{gap:8px}.preferences{gap:10px}.progress-box{gap:10px}
  .story-copy{padding:13px 14px 14px}.story-copy h2{font-size:25px}.quest-line{display:block}.quest-line span{display:block;margin-bottom:5px}
  .bottom-panel{padding:12px}.panel-heading h2{font-size:22px}.guide-heading{flex-wrap:wrap}
  .rune-bank,.spell-slots{gap:7px;padding:8px}.rune-card{padding:4px}.rune-bank .rune-card{width:60px;min-height:90px}.rune-bank .rune-card img{width:50px;height:69px}.spell-slots .rune-card{width:56px;min-height:88px}.spell-slots .rune-card img{width:46px;height:64px}.rune-card .meaning{font-size:9px;max-width:50px}
  .world{aspect-ratio:900/500}.sprite-luma{width:12.5%}.sprite-mei{width:13.5%}.sprite-abby{width:13%;left:26%}.sprite-gate{width:27%;left:55%}.sprite-bridge{width:34%}
}
/* v0.6 geometry repair: actual visible content at 1280x720, 1366x768, 1440x900. */
:root{--rune-card-width:clamp(59px,4.75vw,73px);--rune-gap:clamp(4px,.48vw,7px)}
@media (min-width:1101px){
  body{overflow:hidden}
  .app{padding:8px 14px;gap:6px;max-width:1680px;}
  .masthead{padding:0 0 5px}
  .brand-sigil{width:40px;height:40px;font-size:22px}
  .identity h1{font-size:clamp(23px,2.15vw,31px)}
  .eyebrow{font-size:9px;line-height:1.25}
  .toolbar{min-height:23px;padding:0}
  .tiny-check{font-size:11px}
  .game-shell{grid-template-rows:minmax(0,0.98fr) minmax(0,1.02fr);gap:7px}
  .story-panel{display:grid;grid-template-rows:28px minmax(0,1fr) auto;min-height:0}
  .scene-topline{height:28px;padding:0 13px}
  .world{height:100%;width:100%;min-height:0;aspect-ratio:auto;overflow:hidden}
  .story-copy{display:grid;grid-template-columns:minmax(205px,.75fr) minmax(320px,1.5fr) minmax(235px,.95fr);align-items:center;gap:12px;padding:8px 14px;min-height:0}
  .chapter-index{grid-column:1;align-self:end;font-size:9px}
  .luma-name{display:none}
  .story-copy h2{grid-column:1;align-self:start;font-size:clamp(18px,1.9vw,25px);margin:1px 0 0;line-height:1.07}
  .story-copy>p:not(.quest-line){grid-column:2;grid-row:1/span 2;font-size:clamp(11px,.99vw,14px);line-height:1.42}
  .quest-line{grid-column:3;grid-row:1/span 2;margin:0;padding:8px 10px;align-items:center;gap:8px}
  .quest-line span{font-size:9px;margin:0}
  .quest-line strong{font-size:clamp(11px,1vw,13px);line-height:1.3}
  .workbench-shell{grid-template-columns: minmax(0,1.04fr) minmax(0,1.06fr) minmax(0,.94fr);gap:8px;min-height:0}
  .bottom-panel{padding:10px 11px;min-height:0}
  .panel-heading h2{font-size:clamp(17px,1.65vw,22px)}
  .lesson-pill{padding:4px 7px;font-size:9px}
  .instructions{font-size:11px;line-height:1.33;margin:5px 0 7px}
  .section-row{margin-bottom:6px}
  .section-row h3{height:22px;width:22px;font-size:10px}
  .section-row h3 span{font-size:10px}
  .section-row small{font-size:10px}
  .rune-bank,.spell-slots{flex:1 1 0;gap:var(--rune-gap);padding:8px;align-content:flex-start;overflow:visible;min-height:0}
  .rune-bank .rune-card,.spell-slots .rune-card{flex:none;width:var(--rune-card-width);height:calc(var(--rune-card-width) * 1.34);min-height:0;gap:2px;padding:3px 3px 1px;border-width:1px;border-radius:6px}
  .rune-bank .rune-card img,.spell-slots .rune-card img{width:calc(var(--rune-card-width) - 10px);height:calc(var(--rune-card-width) * 1.02);object-fit:contain;max-width:100%}
  .rune-card .meaning,.spell-slots .rune-card .meaning{font-size:9px;line-height:1;min-height:10px;max-width:100%}
  .rune-card .ordinal{width:16px;height:16px;font-size:9px;top:-4px;right:-4px}
  .spell-column .assembled-heading{margin:0 0 6px}
  .spell-slots.empty::after{font-size:11px}
  .work-actions{gap:6px;margin-top:8px;flex-wrap:nowrap}
  .btn{font-size:11px;padding:8px 9px}
  .btn-cast{min-height:36px;flex:1 1 auto}
  .message-column{gap:7px}
  .guidance{padding:9px 11px;flex:none}
  .guide-heading span{font-size:15px}
  .hint{padding:4px 7px;font-size:10px}
  .feedback{margin:5px 0 0;font-size:11px;line-height:1.35}
  .teacher-note{margin:4px 0 0;font-size:10px;line-height:1.3}
  .success-panel{min-height:0;margin-top:0;padding:9px 11px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:3px}
  .success-panel[hidden]{display:none}
  .success-panel h3{font-size:clamp(15px,1.55vw,20px);line-height:1.15;margin:2px 0}
  .success-panel p:not(.eyebrow){font-size:11px;line-height:1.3;margin:0}
  .btn-next{margin-top:3px;padding:7px 8px;min-height:33px}
  .footer{margin:0;padding:2px 0 0;font-size:9px}
}
/* Sprite composition is sized from scene HEIGHT, never stretched to fill stage width.
   CSS percentages on height preserve each original asset aspect ratio. */
@media(min-width:1101px){
  .scene-sprites{inset:0}
  .sprite{width:auto;height:auto;max-height:none;object-fit:contain}
  .sprite-moon{left:87%;top:3%;height:40%;width:auto}
  .sprite-bridge{left:12%;top:23%;height:73%;width:auto}
  .sprite-gate{left:69%;top:3%;height:91%;width:auto;aspect-ratio:358/449}
  .sprite-mei{left:53%;top:31%;height:64%;width:auto}
  .sprite-abby{left:42%;top:47%;height:51%;width:auto}
  .sprite-lantern{left:64%;top:65%;height:33%;width:auto}
  .sprite-luma{left:60%;top:8%;height:58%;width:auto}
  .world[data-effect="gate"] .gate-left{transform:translateX(-20%)}
  .world[data-effect="gate"] .gate-right{transform:translateX(20%)}
}
/* Small devices: scroll for accessibility, keep scenes legible instead of hiding content. */
@media(max-width:1100px){
  body{overflow-y:auto}
  .rune-bank,.spell-slots{overflow:visible;min-height:max-content}
  .workbench-shell{grid-template-columns:1fr}
  .sprite-bridge{max-height:80%;width:auto}
  .sprite-gate{max-height:88%;width:auto}
  .sprite-mei,.sprite-abby,.sprite-luma,.sprite-moon,.sprite-lantern{max-height:75%;width:auto}
}
/* Correct actual accessible motion mode; no looping or particle animation. */
body.reduce-motion .world *,body.reduce-motion .world *::before,body.reduce-motion .world *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.world *,.world *::before,.world *::after{animation:none!important;transition:none!important}}
body.reduce-motion .world[data-effect="gate"] .gate-left{transform:translateX(-20%)}
body.reduce-motion .world[data-effect="gate"] .gate-right{transform:translateX(20%)}

/* v0.7: layered panoramic illustration. All PNG/WebP layers use intrinsic aspect
   ratios, never an imposed width AND height. SVGs stay reserved for spell effects. */
.world{isolation:isolate;background:#0a1833;}
.scene-backdrop,.sky-haze,.landscape-sprites,.character-sprites{position:absolute;inset:0;pointer-events:none}
.scene-backdrop{z-index:0;overflow:hidden}
.scene-backdrop img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center 48%;filter:brightness(.75) saturate(.94);transform:scale(1.015);}
.sky-haze{z-index:1;background:linear-gradient(180deg,rgba(6,17,46,.06),transparent 42%,rgba(6,14,41,.24) 100%)}
.landscape-sprites{z-index:2}
.landscape-sprites .layer{position:absolute;display:block;width:auto;height:auto;max-height:none;max-width:none;object-fit:contain;user-select:none;transform-origin:center center}
.moon-layer{height:51%!important;left:19.8%;top:0%;filter:brightness(.98) drop-shadow(0 0 7px #e9ecff)}
.bridge-layer{height:95%!important;left:10.5%;top:6%;filter:brightness(.88) drop-shadow(0 4px 6px rgba(3,16,37,.63))}
.portal-layer{height:122%!important;left:73.8%;top:-13%;aspect-ratio:2/3;filter:drop-shadow(0 0 12px rgba(255,204,130,.25))}
.portal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}
.portal-shutters{position:absolute;top:23%;left:30%;width:40%;height:51%;display:flex;overflow:hidden;border-radius:48% 48% 5% 5% / 22% 22% 2% 2%;box-shadow:inset 0 0 12px #090e30;opacity:.97;transition:opacity .7s ease}
.portal-shutter{display:block;width:50%;height:100%;flex:0 0 50%;border:1px solid #b7a27b;background:linear-gradient(90deg,#25264f 0%,#33345e 50%,#222347 100%);box-shadow:inset 0 0 8px rgba(255,224,172,.16);transition:transform 1.5s cubic-bezier(.2,.68,.14,1)}
.portal-shutter.left{border-right:1px solid #e7d49e}
.portal-shutter.right{border-left:1px solid #e7d49e}
.portal-bloom{position:absolute;inset:20% 21% 15%;border-radius:48%;background:radial-gradient(ellipse,rgba(164,251,243,.8),rgba(137,161,254,.12) 60%,transparent 75%);filter:blur(10px);opacity:0;mix-blend-mode:screen;transition:opacity 1.2s ease;pointer-events:none}
.water-layer{height:auto!important;width:100%!important;left:0;bottom:-1%;opacity:.42;mix-blend-mode:screen;filter:brightness(1.1);transform-origin:50% 75%;animation:waterShimmer 5.5s ease-in-out infinite alternate}
.character-sprites{z-index:5}
.character-sprites .sprite{position:absolute;display:block;width:auto!important;height:auto;max-height:none;max-width:none;object-fit:contain;transform-origin:center center;user-select:none}
.character-sprites .sprite-mei{height:72%!important;left:46%;top:31%;filter:drop-shadow(0 5px 5px #0008)}
.character-sprites .sprite-abby{height:55%!important;left:39%;top:49%;filter:drop-shadow(0 5px 4px #0009)}
.character-sprites .sprite-luma{height:54%!important;left:56%;top:3%;filter:drop-shadow(0 0 10px #ffda8c88);animation:fairyFloat 3.1s ease-in-out infinite alternate}
.character-sprites .sprite-lantern{height:32%!important;left:61%;top:67%;filter:drop-shadow(0 0 10px #ffe0a688)}
.foliage-layer{position:absolute;z-index:7;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;user-select:none;opacity:.9}
.magic-svg{position:absolute;display:block;z-index:6;pointer-events:none;overflow:visible}
.magic-bridge{left:11%;top:50%;width:31%;height:24%}
.magic-lantern{left:57%;top:51%;width:11%;height:48%}
.magic-fireworks{left:41%;top:2%;width:44%;height:52%}
#bridgeRunes,#lightbeams,#fireworkVectors{opacity:0;transition:opacity .5s ease}
.world-caption{z-index:11;max-width:min(90%,800px);background:rgba(12,26,53,.82);backdrop-filter:blur(2px)}
.sparks{z-index:10}
.world[data-effect="bridge"] #bridgeRunes,.world[data-effect="gate"] #bridgeRunes{opacity:1;animation:bridgeDraw 2.8s linear infinite}
.world[data-effect="lantern"] #lightbeams,.world[data-effect="moon"] #lightbeams,.world[data-effect="gate"] #lightbeams{opacity:1;animation:glimmer 1.5s ease-in-out infinite alternate}
.world[data-effect="gate"] #fireworkVectors{opacity:1;animation:vectorFirework 2.4s ease-out infinite}
.world[data-effect="gate"] .portal-shutter.left{transform:translateX(-108%)}
.world[data-effect="gate"] .portal-shutter.right{transform:translateX(108%)}
.world[data-effect="gate"] .portal-bloom{opacity:.95;animation:portalGlow 3s ease-in-out infinite alternate}
.world[data-effect="moon"] .moon-layer,.world[data-effect="gate"] .moon-layer{animation:moonPulse 2.6s ease-in-out infinite alternate}
.world[data-effect="bridge"] .bridge-layer,.world[data-effect="gate"] .bridge-layer{filter:brightness(1.15) drop-shadow(0 0 10px rgba(103,242,223,.55))}
.world[data-effect="bridge"] .character-sprites .sprite-abby,.world[data-effect="gate"] .character-sprites .sprite-abby{animation:catCrossBridge 1.8s cubic-bezier(.22,.54,.4,1) forwards}
.world[data-effect="lantern"] .character-sprites .sprite-lantern,.world[data-effect="moon"] .character-sprites .sprite-lantern,.world[data-effect="gate"] .character-sprites .sprite-lantern{animation:papercutLantern 2.2s ease-in-out infinite alternate}
.world[data-effect="gate"] .character-sprites .sprite-mei{animation:meiCelebrate .75s ease-in-out 3}
.world[data-effect="gate"] .character-sprites .sprite-luma{animation:lumaCelebrate 2.3s ease-in-out infinite alternate}
@keyframes fairyFloat{to{transform:translateY(-9%) rotate(4deg)}}
@keyframes waterShimmer{to{opacity:.58;filter:brightness(1.32);transform:translateY(2px) scaleX(1.012)}}
@keyframes portalGlow{to{opacity:.62;filter:blur(13px)}}
/* No squashing the gate doors: each door simply slides behind its opening mask. */
body.reduce-motion .world[data-effect="gate"] .portal-shutter.left{transform:translateX(-108%)}
body.reduce-motion .world[data-effect="gate"] .portal-shutter.right{transform:translateX(108%)}
body.reduce-motion .world[data-effect="gate"] .portal-bloom{opacity:.95}
body.reduce-motion .world[data-effect="bridge"] .character-sprites .sprite-abby,
body.reduce-motion .world[data-effect="gate"] .character-sprites .sprite-abby{transform:translateX(65%)}
@media (prefers-reduced-motion: reduce){
  .world[data-effect="gate"] .portal-shutter.left{transform:translateX(-108%)}
  .world[data-effect="gate"] .portal-shutter.right{transform:translateX(108%)}
  .world[data-effect="bridge"] .character-sprites .sprite-abby,
  .world[data-effect="gate"] .character-sprites .sprite-abby{transform:translateX(65%)}
}
@media(max-width:1100px){
  .world{aspect-ratio:3/1;min-height:200px;}
  .character-sprites .sprite-mei{left:45%;}
  .character-sprites .sprite-abby{left:36%;}
  .portal-layer{left:72%}
}
@media(max-width:720px){
  .world{aspect-ratio:3/1;min-height:155px}
  .foliage-layer{opacity:.65}
  .world-caption{font-size:10px;padding:5px 8px;bottom:3px;max-width:96%}
  .sprite-mei{left:43%!important}
  .character-sprites .sprite-abby{left:35%}
  .character-sprites .sprite-luma{left:55%}
  .portal-layer{left:72%}
}
/* Final composition adjustments after 1440×900 screenshot review: register the
   independent moon with the moon already painted in the panorama; reserve
   the bridge cutout for magical bloom rather than duplicating stonework. */
.moon-layer{left:16.6%;top:-22.5%}
.bridge-layer{opacity:0;mix-blend-mode:screen;filter:blur(10px) brightness(1.45);transition:opacity .7s ease}
.world[data-effect="bridge"] .bridge-layer,.world[data-effect="gate"] .bridge-layer{opacity:.38;filter:blur(9px) brightness(1.7)}
.character-sprites .sprite-abby{left:30%;top:45%}
@media(max-width:1100px){.character-sprites .sprite-abby{left:29%;top:45%}}
@media(max-width:720px){.character-sprites .sprite-abby{left:29%;top:43%}}
/* Keep the moon and arch fully legible in the cropped widescreen banner,
   and confine the water overlay to the water rather than the bridge. */
.moon-layer{height:40%!important;left:17.4%;top:-8%}
.portal-layer{height:107%!important;top:-2%;left:74%}
.water-layer{height:32%!important;width:100%!important;object-fit:cover;object-position:center 53%;bottom:-1%;opacity:.32}
/* The base panorama already contains a moon. Use the separate lunar artwork
   as a soft bloom during its spell rather than showing two solid moons. */
.moon-layer{opacity:0;mix-blend-mode:screen;filter:blur(8px) brightness(1.3);transition:opacity .8s ease}
.world[data-effect="moon"] .moon-layer{opacity:.4;animation:moonPulse 2.8s ease-in-out infinite alternate}
.world[data-effect="gate"] .moon-layer{opacity:0;animation:none}

/* v0.7.1: Place story feedback in the upper-left sky, clear of Mei,
   Abby, Luma, the lantern and gate. Keep caption width compact to avoid
   blocking the artwork and retain the existing no-scroll layout. */
.world .world-caption{
  top:12px;
  bottom:auto;
  left:14px;
  right:auto;
  transform:none;
  width:max-content;
  max-width:min(238px,25%);
  margin:0;
  padding:8px 11px;
  border-radius:11px;
  text-align:left;
  font-size:clamp(11px,.94vw,13px);
  line-height:1.34;
  font-weight:600;
  color:#fff2d9;
  background:rgba(11,24,50,.87);
  border:1px solid rgba(237,205,147,.68);
  box-shadow:0 3px 12px rgba(3,9,23,.36);
  backdrop-filter:blur(3px);
  z-index:11;
}
@media(max-width:1100px){
  .world .world-caption{
    top:9px;
    left:10px;
    bottom:auto;
    max-width:min(215px,32%);
    font-size:clamp(10px,1.1vw,12px);
    padding:6px 9px;
  }
}
@media(max-width:720px){
  .world .world-caption{
    top:6px;
    left:7px;
    bottom:auto;
    max-width:42%;
    padding:5px 6px;
    font-size:9px;
    line-height:1.26;
    border-radius:7px;
  }
}
/* v0.8 — 33-rune navigation: compact, keyboard-accessible controls without page overflow. */
.spell-navigation{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;flex-wrap:wrap}
.mode-chip{border:1px solid #6a6582;border-radius:8px;background:#1c263f;color:#dfdded;font-size:11px;font-weight:700;padding:5px 9px;white-space:nowrap}
.mode-chip.active{border-color:#e9ce94;background:#4a3c30;color:#fff0c6;box-shadow:inset 0 0 0 1px #c6a16a}
.mission-picker-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#c9d5e6;white-space:nowrap}
.mission-picker-label select,.palette-navigation select{max-width:min(260px,23vw);padding:5px 7px;background:#17213b;border:1px solid #65617c;border-radius:7px;color:#fff0d2;font-size:11px}
.mission-picker-label select:disabled{opacity:.45}
.palette-navigation[hidden]{display:none}
.palette-navigation{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:1px 0 7px}
.palette-navigation label{font-size:11px;color:#e9d7ae;display:flex;align-items:center;gap:6px}
.palette-navigation select{max-width:176px}
.palette-pager{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#cfcee2;font-size:11px}
.palette-pager button{background:#283453;color:#f3dec0;border:1px solid #6b7891;border-radius:6px;padding:3px 9px;min-width:29px;min-height:28px}
.palette-pager button:disabled{opacity:.3}
.free-mode .rune-column .instructions{display:none}
.free-mode .spell-slots .rune-card{width:clamp(40px,3.7vw,52px);height:clamp(61px,5.7vw,70px);padding:2px}
.free-mode .spell-slots .rune-card img{width:calc(100% - 3px);height:calc(100% - 15px)}
.free-mode .spell-slots .rune-card .meaning{font-size:7px}
.free-mode .spell-slots{gap:4px}
.world[data-effect="water"] .water-layer{animation:waterShimmer 1.7s ease-in-out infinite alternate;opacity:.68;filter:brightness(1.65) saturate(1.6)}
.world[data-effect="water"] .sky-haze{background:linear-gradient(180deg,transparent,rgba(56,179,226,.25))}
.world[data-effect="flower"] .foliage-layer{filter:brightness(1.25) saturate(1.6) drop-shadow(0 0 7px #edb1e8);animation:flowerBloom 2.7s ease-in-out infinite alternate}
.world[data-effect="flower"] #fireworkVectors{opacity:.8;animation:vectorFirework 3s ease-out infinite}
@keyframes flowerBloom{to{filter:brightness(1.48) saturate(1.9) drop-shadow(0 0 12px #f6a7e1)}}
@media(min-width:1101px){
 .toolbar{gap:5px;flex-wrap:nowrap}
 .progress-box{gap:9px}.progress-box>span{white-space:nowrap}
 .level-dots{gap:6px}.level-dot{width:27px}
 .mission-picker-label select{max-width:clamp(150px,15.6vw,235px)}
 .mode-chip{padding:4px 7px}
 .free-mode .rune-bank .rune-card{width:clamp(51px,4.15vw,61px);height:clamp(69px,5.56vw,82px);padding:2px}
 .free-mode .rune-bank .rune-card img{width:calc(100% - 4px);height:calc(100% - 7px)}
 .free-mode .palette-navigation{margin:0 0 5px}
}
@media(max-width:1100px){
 .spell-navigation{order:3;width:100%;justify-content:flex-start}
 .mission-picker-label select{max-width:min(240px,54vw)}
 .palette-navigation select{max-width:200px}
 .free-mode .rune-bank .rune-card{width:clamp(60px,15vw,77px);min-height:88px}
 .free-mode .spell-slots .rune-card{width:clamp(51px,12.5vw,70px);min-height:77px;height:auto}
 .free-mode .spell-slots .rune-card img{height:59px}
}
/* v0.8 progressive mode affordance */
.mode-chip:disabled{cursor:not-allowed;opacity:.66;border-style:dashed;color:#d0c6c0}
.mission-picker-label option:disabled{color:#a6a6b7}
/* Dense upper level: show nine available marks at 1280×720 without clipping. */
@media (min-width:1101px) and (max-height:750px){
  .rune-bank{gap:4px;padding:5px}
  .rune-bank .rune-card{width:clamp(42px,3.75vw,49px);height:clamp(60px,5.2vw,67px);padding:1px}
  .rune-bank .rune-card img{width:calc(100% - 3px);height:calc(100% - 11px)}
  .rune-bank .rune-card .meaning{font-size:7px}
  .free-mode .rune-bank .rune-card{width:clamp(42px,3.75vw,49px);height:clamp(60px,5.2vw,67px)}
}