:root{--ink:#081735;--navy:#0a1b42;--blue:#12376c;--purple:#7044e8;--gold:#ffd02f;--cream:#fff1c7;--paper:#fff2cf;--white:#fff;font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07142f}.game{color:#fff}.game-shell{max-width:520px;min-height:100dvh;margin:auto;position:relative;overflow:hidden;background:#0b2049;padding-bottom:92px}.hud,.quest-hud,.map-top{height:82px;padding:calc(13px + env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;gap:8px;position:relative;z-index:20}.avatar{width:44px;height:44px;border:3px solid var(--gold);border-radius:50%;display:grid;place-items:center;background:#8d4be5;font-weight:1000}.hud-pill{height:40px;border-radius:999px;background:rgba(5,18,48,.78);border:1px solid #ffffff38;padding:0 12px;display:flex;align-items:center;gap:5px;font-size:.82rem}.icon-btn,.round-back{width:42px;height:42px;border:1px solid #ffffff66;background:#102957cc;color:#fff;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:1.2rem}.icon-btn{margin-left:auto}.home-page .game-shell{background:linear-gradient(#081634,#102451)}.home-hero{height:54dvh;min-height:430px;max-height:590px;position:relative;background:radial-gradient(circle at 64% 45%,#ffd741 0 3%,#f5a91c44 4% 13%,transparent 29%),linear-gradient(180deg,#08173b,#142a5d 58%,#3d205c);overflow:hidden}.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 18%,#5d47be66,transparent 25%),radial-gradient(circle at 90% 15%,#315dd566,transparent 22%)}.home-logo{position:absolute;z-index:5;top:12px;left:22px;color:#ffe8a4;text-shadow:0 3px 0 #592e18,0 5px 12px #000}.home-logo small{display:block;font:900 .75rem Georgia;letter-spacing:.15em}.home-logo span{font:900 2.65rem Georgia;display:block;line-height:.88}.shelves{position:absolute;bottom:0;width:31%;height:72%;background:repeating-linear-gradient(0deg,#170f2c 0 7px,#44294b 8px 11px,#1a1130 12px 38px);border:8px solid #2b1734;box-shadow:inset 0 0 40px #000}.shelves-left{left:-5%;transform:skewY(-4deg)}.shelves-right{right:-5%;transform:skewY(4deg)}.magic-door{position:absolute;left:52%;transform:translateX(-50%);bottom:2%;width:34%;height:66%;border:8px solid #f4a922;border-radius:80px 80px 8px 8px;background:radial-gradient(circle,#fff9b1,#ffc62d 25%,#ff9224 46%,#7641e7 70%,#1b1c61);box-shadow:0 0 24px #ffd22d,0 0 70px #f5a52199;display:grid;place-items:center}.door-book{font-size:3rem;color:#fff;text-shadow:0 0 15px #fff}.hero-characters{position:absolute;z-index:6;left:10%;bottom:1%;width:65%;height:50%}.char{position:absolute}.charlotte{left:0;bottom:0;width:125px;height:185px}.charlotte .face{position:absolute;top:20px;left:24px;width:76px;height:78px;background:#f3bd8e;border-radius:48% 52% 46% 54%;display:grid;place-items:center;color:#402019;font-weight:900;font-size:1.25rem}.charlotte .hair{position:absolute;top:2px;left:7px;width:112px;height:110px;border-radius:50% 50% 42% 45%;background:#61301d;box-shadow:-15px 24px 0 #4a261c,12px 28px 0 #6d351e}.charlotte .hoodie{position:absolute;bottom:0;left:8px;width:115px;height:105px;background:#7044e8;border-radius:48px 48px 16px 16px}.jack{right:0;bottom:0;width:105px;height:100px;background:#c8884f;border-radius:55% 55% 42% 42%;box-shadow:inset 0 -12px #a96c3e}.jack .ears{position:absolute;left:-12px;right:-12px;top:8px;height:55px;background:#a76a3d;border-radius:50%}.dogface{position:absolute;inset:18px 0 auto;text-align:center;color:#3b2519;font-weight:900;font-size:1.25rem}.quest-scroll{position:relative;z-index:8;margin:-24px 18px 0;padding:20px 20px 18px;background:linear-gradient(#fff4cf,#f6dca0);border:3px solid #d59d48;border-radius:12px 12px 26px 26px;color:#241a1c;box-shadow:0 12px 30px #0007}.quest-scroll:before,.quest-scroll:after{content:"";position:absolute;left:-7px;right:-7px;height:12px;background:#b77a35;border-radius:8px}.quest-scroll:before{top:-7px}.quest-scroll:after{bottom:-7px}.quest-scroll small{font-weight:900}.quest-scroll h1{font:900 2rem Georgia;margin:1px 0 6px}.quest-scroll p{font-size:.9rem;margin:0 0 10px}.quest-meter{height:9px;border-radius:20px;background:#c8b78f;overflow:hidden}.quest-meter span{display:block;width:10%;height:100%;background:var(--purple)}.quest-count{text-align:right;font-size:.72rem;margin:3px 0 8px}.gold-button{height:52px;border-radius:999px;background:linear-gradient(#ffe65d,#ffc719);color:#102044;text-decoration:none;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 5px 0 #d69c00}.game-nav{position:fixed;z-index:50;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:82px;padding-bottom:env(safe-area-inset-bottom);background:#0a1b42f2;backdrop-filter:blur(15px);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff2e}.game-nav a,.game-nav span{color:#aeb7ce;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.67rem;font-weight:800;gap:4px}.game-nav b{font-size:1.2rem}.game-nav .active{color:#ffe33f}.map-shell{background:linear-gradient(#102e63,#0b2855)}.map-top{height:92px}.map-top div:nth-child(2){flex:1}.map-top small{font-size:.65rem;color:#ffd55b;font-weight:900;letter-spacing:.1em}.map-top h1{margin:0;font:900 1.75rem Georgia}.compact{height:34px}.map-world{height:calc(100dvh - 92px);min-height:720px;position:relative;overflow:hidden;background:linear-gradient(#2f70b7 0,#87c7dd 34%,#477d6a 35%,#183f3a 100%)}.map-sky{position:absolute;inset:0 0 60%}.moon{position:absolute;width:48px;height:48px;border-radius:50%;background:#ffe79b;right:13%;top:12%;box-shadow:0 0 30px #fff1a6}.cloud{position:absolute;width:100px;height:26px;border-radius:30px;background:#ffffff88}.c1{left:7%;top:18%}.c2{right:22%;top:32%}.mountains{position:absolute;left:-10%;right:-10%;top:22%;height:33%;background:#284d65;clip-path:polygon(0 100%,15% 35%,27% 78%,42% 15%,55% 70%,69% 25%,84% 72%,100% 20%,100% 100%)}.forest{position:absolute;left:-8%;right:-8%;height:30%;background:#174c3c;clip-path:polygon(0 100%,0 55%,4% 25%,8% 58%,13% 10%,18% 52%,24% 18%,29% 62%,35% 7%,41% 58%,48% 14%,55% 61%,62% 8%,69% 56%,76% 20%,83% 58%,90% 5%,96% 55%,100% 22%,100% 100%)}.forest-a{bottom:20%}.forest-b{bottom:0;background:#10392f}.castle{position:absolute;z-index:3;top:10%;left:50%;transform:translateX(-50%);width:130px;height:130px}.castle i{position:absolute;bottom:0;width:40px;height:90px;background:#6b3844;border:4px solid #e09c4c}.castle i:before{content:"";position:absolute;left:-10px;top:-30px;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:0;border-top:36px solid #342859}.castle i:nth-child(2){left:45px;height:120px}.castle i:nth-child(3){right:0}.castle b{position:absolute;left:42px;bottom:0;width:48px;height:62px;background:#ffb62e;box-shadow:0 0 35px #ffd246}.map-label{position:absolute;z-index:10;left:16px;top:15px;background:#f7df9e;color:#2c1a16;padding:10px 15px;border-radius:6px;transform:rotate(-2deg);box-shadow:0 5px 0 #a96c33}.map-label small,.map-label span{display:block;font-size:.65rem}.map-label strong{font:900 1.15rem Georgia;display:block}.trail-svg{position:absolute;z-index:4;inset:12% 0 0}.trail-svg svg{width:100%;height:100%}.map-nodes{position:absolute;z-index:12;inset:12% 0 2%}.map-node{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#52627c;border:4px solid #d7dbe4;color:#fff;text-decoration:none;font-weight:1000;box-shadow:0 5px 10px #0007}.map-node.current{width:62px;height:62px;background:#6d44ed;border-color:#ffe041;box-shadow:0 0 0 5px #ffffff99,0 0 26px #ffe041}.map-node.done{background:#f4b925;color:#17203d}.map-node.locked{font-size:.8rem}.world-sign{position:absolute;z-index:10;background:#dbe7f0dd;color:#16304d;border:2px solid #fff;border-radius:9px;padding:7px 9px;font:800 .7rem system-ui;box-shadow:0 4px 10px #0005}.world-sign span{display:block}.sign-2{right:10px;top:43%}.sign-3{right:12px;top:24%}.quest-page .game-shell{background:linear-gradient(#10295b,#251b42 56%,#0b1733)}.quest-hud{height:76px}.quest-progress{flex:1}.quest-progress>div:first-child{display:flex;justify-content:space-between;font-size:.68rem;font-weight:900}.quest-bar{height:9px;background:#ffffff30;border-radius:99px;margin-top:6px;overflow:hidden}.quest-bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#7846ec,#c16cff);border-radius:99px}.book-icon{font-size:1.35rem}.sound-toggle{width:42px;height:42px;flex:0 0 42px;border:1px solid #ffffff66;background:#102957cc;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}.sound-toggle:focus-visible{outline:3px solid #ffd02f;outline-offset:2px}.sound-toggle[aria-pressed="false"]{opacity:.72;background:#081735cc}.quest-name{text-align:center;font:900 1.45rem Georgia;margin:4px 14px 8px}.activity-card{min-height:calc(100dvh - 165px);position:relative;display:flex;flex-direction:column;justify-content:center;padding:12px 18px 25px;background:linear-gradient(#16356c,#172b55 45%,#171e3d)}.activity-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,#6b4fe733,transparent 25%),radial-gradient(circle at 80% 70%,#ffb72b22,transparent 28%)}.activity-card>*{position:relative;z-index:2}.activity-head{text-align:center;margin-bottom:14px}.eyebrow{margin:0 0 5px;color:#91c7ff;font-weight:1000;letter-spacing:.14em;font-size:.7rem;text-transform:uppercase}.activity-head h2,.reward-card h2{font:900 2rem Georgia;margin:0;color:#fff}.activity-sub,.hint,.body-copy{color:#d6e1f2;text-align:center}.comic-wrap{position:relative}.comic-art{height:min(57dvh,470px);border:3px solid #c9863c;border-radius:18px;background:radial-gradient(circle at 73% 42%,#ffd32c 0 3%,#f59c1844 4% 18%,transparent 35%),repeating-linear-gradient(90deg,#26172b 0 14%,#4a2836 14% 17%,#18142a 17% 31%);box-shadow:inset 0 0 80px #000,0 15px 30px #0008;display:flex;align-items:flex-end;padding:18px;overflow:hidden}.comic-art:after{content:"";position:absolute;right:22%;top:6%;bottom:0;width:8px;background:#ffcf30;box-shadow:0 0 25px #ffc72d}.comic-sfx{font:1000 1.65rem system-ui;transform:rotate(-4deg);text-shadow:0 3px 6px #000}.comic-paw{position:absolute;right:10%;bottom:12%;font-size:2.5rem}.speech{background:#fff;color:#17203c;border-radius:18px;padding:14px 16px;margin:-25px 12px 0;font-size:1rem;box-shadow:0 8px 20px #0006}.speech strong{color:#5a38d2}.word-stage{text-align:center}.word-card,.sentence-card,.passage,.build-target{background:linear-gradient(#fff6d9,#ffe8ae);border:5px solid #a86b32;border-radius:13px;color:#0b1c43;box-shadow:inset 0 0 0 3px #e9b95c,0 12px 22px #0006}.word-card{font-size:clamp(4.8rem,24vw,7rem);font-weight:1000;letter-spacing:-.06em;padding:36px 12px;min-height:190px;display:grid;place-items:center}.sentence-card{font-size:2rem;font-weight:900;padding:28px 20px}.passage{font-size:1.22rem;line-height:1.6;padding:22px;font-weight:650}.build-target{height:105px;padding:18px;font-size:2.7rem;font-weight:1000;display:grid;place-items:center;margin-bottom:18px}.tiles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.tile{width:68px;height:68px;border:3px solid #b77a36;border-radius:9px;background:#ffe9b4;color:#102044;font-size:1.8rem;font-weight:1000;box-shadow:0 7px 0 #7c4a25}.tile:disabled{opacity:.35;transform:translateY(5px);box-shadow:none}.mic-wrap{text-align:center;margin-top:16px}.mic-button{width:94px;height:94px;border-radius:50%;border:7px solid #a88cff;background:#6e40e8;color:#fff;margin:auto;box-shadow:0 0 0 7px #ffffff22,0 0 32px #8e62ff;position:relative}.mic-button:before{content:"";position:absolute;width:20px;height:31px;border:4px solid #fff;border-radius:12px;left:30px;top:19px}.mic-button:after{content:"";position:absolute;width:33px;height:22px;border:4px solid #fff;border-top:0;border-radius:0 0 20px 20px;left:23px;top:37px}.practice-note{display:inline-block;background:#ffeaa3;color:#594000;padding:7px 10px;border-radius:999px;font-size:.68rem;font-weight:900}.feedback{text-align:center;color:#ffe041;font-weight:900;min-height:25px}.primary,.secondary,.link-button{width:100%;min-height:54px;border-radius:999px;margin-top:15px;font-weight:1000;font-size:1rem}.primary,.link-button{border:0;background:linear-gradient(#8b52ff,#6133d7);color:#fff;box-shadow:0 5px 0 #351d8e}.secondary{border:2px solid #ffffff66;background:#0b1835;color:#fff}.link-button{display:flex;align-items:center;justify-content:center;text-decoration:none}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice{min-height:110px;border:4px solid #e0b36b;border-radius:13px;background:#fff0c8;color:#17203c;font-weight:900;padding:12px}.choice:last-child:nth-child(odd){grid-column:1/-1}.choice.correct{border-color:#ffe044;box-shadow:0 0 20px #ffe044}.reward-card{text-align:center;background:radial-gradient(circle at 50% 28%,#8f5c1e,#321b27 50%,#111932);border:3px solid #b67939;border-radius:20px;padding:25px 18px;box-shadow:inset 0 0 50px #000}.spark{font-size:7rem;color:#ffd530;text-shadow:0 0 10px #fff,0 0 35px #ffb000}.stars{font-size:3rem;color:#ffd530}.xp-pill{display:inline-block;background:#ffe8a4;color:#422c00;border-radius:999px;padding:7px 12px;font-weight:900}.home-page .hud{position:absolute;top:0;left:0;right:0}.home-page .home-hero{padding-top:82px}@media(max-height:720px){.home-hero{min-height:390px;height:51dvh}.activity-card{justify-content:flex-start}.comic-art{height:360px}.word-card{min-height:155px;padding:22px 12px}}@media(prefers-reduced-motion:no-preference){.magic-door{animation:doorGlow 2s ease-in-out infinite}.map-node.current{animation:nodeGlow 1.8s ease-in-out infinite}.spark{animation:sparkPop .6s ease both}@keyframes doorGlow{50%{box-shadow:0 0 38px #ffd22d,0 0 100px #f5a521cc}}@keyframes nodeGlow{50%{transform:translate(-50%,-50%) scale(1.08)}}@keyframes sparkPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}}
/* Illustrated quest layer */
.quest-char{position:absolute;z-index:4;bottom:0}.quest-charlotte{left:8%;width:150px;height:230px}.qc-hair{position:absolute;left:8px;top:12px;width:126px;height:126px;border-radius:52% 48% 45% 50%;background:#61301d;box-shadow:-18px 31px 0 #472219,17px 30px 0 #71361e}.qc-face{position:absolute;left:31px;top:36px;width:82px;height:84px;border-radius:50%;background:#f2bd8e;color:#3e2019;display:grid;place-items:center;font-size:1.25rem;font-weight:1000}.qc-body{position:absolute;left:16px;bottom:0;width:130px;height:125px;border-radius:55px 55px 8px 8px;background:linear-gradient(135deg,#8051ef,#4d2bb6)}.quest-jack{right:8%;width:120px;height:115px;background:#c9894e;border-radius:58% 58% 38% 38%;box-shadow:inset 0 -15px #a96b3c}.qj-ears{position:absolute;left:-14px;right:-14px;top:9px;height:61px;border-radius:50%;background:#a96b3c}.qj-face{position:absolute;left:0;right:0;top:29px;text-align:center;color:#3d281a;font-size:1.3rem;font-weight:1000}.comic-sfx{z-index:8;margin-left:5%;margin-bottom:5%}.activity-scene{position:relative;padding-top:130px}.activity-scene:before{content:"";position:absolute;inset:0 0 44%;border-radius:24px 24px 0 0;background:linear-gradient(#67bde9,#b9eaff 55%,#eef8db 56%,#72ad64 100%);opacity:.98}.sea{position:absolute;left:0;right:0;top:86px;height:110px;background:repeating-radial-gradient(ellipse at 30% 100%,#65b9df 0 13px,#3898cb 14px 26px);opacity:.95}.sailboat{position:absolute;z-index:1;right:8%;top:32px;font-size:4.5rem;filter:drop-shadow(0 5px 5px #173a6677)}.mini-jack{position:absolute;z-index:2;left:5%;top:75px;font-size:3.5rem;filter:drop-shadow(0 5px 4px #0005)}.harbor-stage .word-card{position:relative;z-index:3}.builder-scene{position:relative;border-radius:24px;padding:22px 14px 26px;background:linear-gradient(#6cc4ee 0 34%,#376f8c 34% 43%,#9a5e31 43% 100%);box-shadow:inset 0 0 50px #0003}.builder-scene:after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;background:repeating-linear-gradient(90deg,#a96d3d 0 44px,#734324 45px 49px);opacity:.5;border-radius:0 0 24px 24px;pointer-events:none}.builder-scene>*{position:relative;z-index:2}.dock-rope{height:8px;border-radius:50%;background:#7a4a2c;margin:0 10% 16px;box-shadow:0 3px #3f291d}.builder-scene .activity-head h2,.builder-scene .activity-sub{color:#102044;text-shadow:0 1px #fff8}.builder-scene .eyebrow{color:#4931a5}.builder-scene .tile{background:linear-gradient(#fff0bd,#edc97e)}.builder-scene .build-target{background:#fff0c8cc}@media(max-width:390px){.quest-charlotte{transform:scale(.9);transform-origin:left bottom}.quest-jack{transform:scale(.88);transform-origin:right bottom}.activity-scene{padding-top:110px}.sailboat{font-size:3.8rem}}

/* Story-rich activity pass */
.sentence-world,.passage-world,.clue-world{position:relative;border-radius:24px;padding:18px 14px 24px;overflow:hidden;background:linear-gradient(180deg,#11275b,#261b48 52%,#351f3e);box-shadow:inset 0 0 60px #0005,0 18px 34px #0005}.night-window{height:170px;margin:-6px -2px 16px;border:7px solid #6f4429;border-radius:80px 80px 12px 12px;background:linear-gradient(#0b1d4a,#31508a 60%,#6a4c83);position:relative;overflow:hidden;box-shadow:inset 0 0 30px #0009}.window-moon{position:absolute;right:15%;top:16%;width:42px;height:42px;border-radius:50%;background:#ffe57a;box-shadow:0 0 25px #ffe57a}.window-stars{position:absolute;left:12%;top:18%;font-size:1.3rem;color:#fff2a0;letter-spacing:1.6rem}.reading-char{position:absolute;left:12%;bottom:-5px;width:88px;height:100px;border-radius:50% 50% 10px 10px;background:#7044e8;border:5px solid #4b2a2a;display:grid;place-items:center;font-size:2rem;font-weight:1000;color:#fff0d2}.reading-dog{position:absolute;right:13%;bottom:-7px;font-size:4.8rem;filter:drop-shadow(0 6px 5px #0007)}.sentence-world .sentence-card{position:relative;background:#fff2c8;border-color:#c7843d}.passage-world{background:linear-gradient(#152f63,#3b2446 47%,#1a1830)}.story-lanterns{height:70px;display:flex;justify-content:space-around;align-items:flex-start}.story-lanterns i{display:block;width:27px;height:38px;border-radius:8px;background:#ffc82f;border:4px solid #704421;box-shadow:0 0 25px #ffc82f}.story-lanterns i:nth-child(2){margin-top:20px}.passage-world .passage{position:relative;background:linear-gradient(#fff7dc,#f6dfaa);max-height:44dvh;overflow:auto}.clue-world{padding-top:145px;background:radial-gradient(circle at 50% 8%,#8d5b29,#362139 32%,#111c3d 70%)}.clue-characters{position:absolute;left:0;right:0;top:10px;height:130px}.clue-c{position:absolute;left:12%;bottom:0;width:86px;height:108px;border-radius:48px 48px 8px 8px;background:#7044e8;border:5px solid #532f27;color:#ffe7c4;display:grid;place-items:center;font-size:2rem;font-weight:1000}.clue-j{position:absolute;right:12%;bottom:0;font-size:5rem;filter:drop-shadow(0 5px 4px #0008)}.clue-world .activity-head{margin-bottom:20px}.clue-world .activity-head h2{font-size:1.8rem}.clue-world .choice-grid{grid-template-columns:repeat(3,1fr);gap:8px}.clue-world .choice,.clue-world .choice:last-child:nth-child(odd){grid-column:auto;min-height:150px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.choice-art{width:62px;height:62px;border-radius:13px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(#9bd9ff,#4f91c4);border:3px solid #fff;box-shadow:0 4px 0 #80532b}.sound-art{background:linear-gradient(#b57cff,#633bd2);color:#fff}.wind-art{background:linear-gradient(#a9dcff,#73b05f)}.quiet-art{background:linear-gradient(#f1c76b,#9b6934)}.clue-world .choice b{font-size:.72rem;line-height:1.1}.reward-card{position:relative;overflow:hidden;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center}.reward-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,#ffd32d22 0 12deg,transparent 12deg 25deg);animation:rewardSpin 16s linear infinite}.reward-friends{position:absolute;left:0;right:0;bottom:4%;height:120px}.reward-friends span:first-child{position:absolute;left:12%;bottom:0;width:82px;height:105px;border-radius:45px 45px 8px 8px;background:#7044e8;border:5px solid #4f2d27;display:grid;place-items:center;color:#ffe8c5;font-size:1.8rem;font-weight:1000}.reward-friends span:last-child{position:absolute;right:10%;bottom:0;font-size:5rem}.reward-card .spark,.reward-card .eyebrow,.reward-card h2,.reward-card .body-copy,.reward-card .xp-pill{position:relative;z-index:2}.reward-card .spark{font-size:8.5rem}.reward-card h2{font-size:2.4rem}.reward-card .body-copy{max-width:300px}.feedback.pop:before{content:"✦";display:inline-block;margin-right:6px;color:#ffe041}@keyframes rewardSpin{to{transform:rotate(360deg)}}@media(max-width:390px){.clue-world{padding-left:9px;padding-right:9px}.clue-world .choice{min-height:135px}.choice-art{width:54px;height:54px}.reward-card{min-height:470px}}

/* Rich art asset integration + mobile viewport fixes */
.home-hero{background:#08173d}
.home-bg-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.home-logo,.hero-characters{z-index:6}
.hero-characters{left:4%;bottom:0;width:72%;height:48%}
.char-img{position:absolute;object-fit:contain;filter:drop-shadow(0 10px 12px #0006)}
.charlotte-img{left:0;bottom:-2%;width:58%;height:100%}
.jack-img{right:0;bottom:-1%;width:46%;height:64%}
.home-page .hud{z-index:30}
.home-logo{top:84px;left:26px}
.home-logo span{font-size:2.4rem}
.quest-char-img{position:absolute;z-index:6;object-fit:contain;filter:drop-shadow(0 8px 10px #0006)}
.quest-charlotte-img{left:4%;bottom:-2%;width:42%;height:60%}
.quest-jack-img{right:3%;bottom:-1%;width:34%;height:36%}
.comic-sfx{position:absolute;left:4%;bottom:20%;z-index:9}
.speech{position:relative;z-index:12;margin:-12px 12px 0}
.harbor-art{background:url('/art/harbor-scene.svg') center/cover no-repeat;padding:145px 12px 8px;border-radius:24px;overflow:hidden}
.harbor-art:before,.harbor-art .sea,.harbor-art .sailboat{display:none!important}
.mini-jack-art{position:absolute;left:2%;top:48px;width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 5px 5px #0005)}
.harbor-art .word-card{margin:0;position:relative;z-index:4}
.practice-note{margin-bottom:calc(28px + env(safe-area-inset-bottom));max-width:92%}
.quest-page .activity-card{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
@supports(height:100svh){.game-shell{min-height:100svh}.activity-card{min-height:calc(100svh - 165px)}}
@media(max-width:430px){
  .home-logo{top:82px}
  .home-logo span{font-size:2.15rem}
  .quest-scroll{margin-top:-10px}
  .quest-charlotte-img{width:45%;height:58%}
  .quest-jack-img{width:36%;height:34%}
  .speech{margin-top:-6px}
}

/* Illustrated overworld map */
.illustrated-map{position:relative;min-height:1120px;overflow:hidden;background:#203a54;border-radius:0 0 30px 30px}
.map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.map-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#06163166 0,#0000 18%,#0000 76%,#08152c99 100%),linear-gradient(90deg,#06152b55,#0000 18%,#0000 82%,#06152b55)}
.illustrated-map .map-label{z-index:7;top:24px;left:22px;right:22px;width:auto;background:linear-gradient(#fff4cc,#efd99d);border:4px solid #a96c30;box-shadow:0 10px 24px #0005;color:#24192d}
.illustrated-map .map-label small{color:#6e3f28}.illustrated-map .map-label strong{display:block;font-family:Georgia,serif;font-size:1.75rem}.illustrated-map .map-label span{color:#493e40}
.illustrated-map .map-nodes{position:absolute;inset:0;z-index:8}
.illustrated-map .map-node{width:54px;height:54px;border:5px solid #fff1aa;background:linear-gradient(#8456f4,#5426c6);box-shadow:0 5px 0 #32146f,0 0 0 5px #ffd43c55,0 0 25px #ffd43c;text-decoration:none}
.illustrated-map .map-node>span{display:grid;place-items:center;width:100%;height:100%}
.illustrated-map .map-node.done{background:linear-gradient(#ffd94d,#d89b16);color:#34250b}
.illustrated-map .map-node.locked{filter:saturate(.45);background:#3b4658;border-color:#9ba7b6;box-shadow:0 4px 0 #212a38}
.illustrated-map .map-node b{position:absolute;top:58px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff1ba;color:#3d2777;border:2px solid #8a63e8;border-radius:999px;padding:4px 8px;font-size:.52rem;letter-spacing:.06em;box-shadow:0 4px 9px #0004}
.travelers{position:absolute;z-index:9;left:32%;bottom:3.2%;width:150px;height:135px;pointer-events:none}
.travelers img{position:absolute;bottom:0;object-fit:contain;filter:drop-shadow(0 7px 5px #0006)}
.travelers img:first-child{left:0;width:88px;height:130px}.travelers img:last-child{right:0;width:77px;height:86px}
.illustrated-map .world-sign{position:absolute;z-index:6;padding:8px 12px;border-radius:9px;background:#5c3821;border:3px solid #c98b45;box-shadow:0 5px 0 #352115;color:#fff3c6;text-shadow:0 2px #3c2314;transform:rotate(-2deg)}
.illustrated-map .world-sign strong,.illustrated-map .world-sign span{display:block}.illustrated-map .world-sign strong{font-size:.82rem}.illustrated-map .world-sign span{font-size:.58rem;opacity:.88;margin-top:2px}
.world-sign-woods{left:4%;top:62%}.world-sign-mountain{right:3%;top:72%;transform:rotate(2deg)!important}
.map-tip{position:absolute;z-index:8;left:50%;bottom:12px;transform:translateX(-50%);width:86%;padding:9px 12px;border-radius:999px;background:#0a1733dd;color:#eaf1ff;text-align:center;font-size:.68rem;font-weight:800;border:1px solid #ffffff33}
.map-page .game-nav{position:sticky;bottom:0;z-index:30}
.map-page .map-shell{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
@media(max-width:430px){.illustrated-map{min-height:980px}.travelers{width:130px;height:115px}.travelers img:first-child{width:78px;height:115px}.travelers img:last-child{width:66px;height:76px}.illustrated-map .map-node{width:49px;height:49px}.illustrated-map .map-label strong{font-size:1.55rem}}

/* Quest polish */
.build-preview,.build-placeholder,.built-word{display:block;text-align:center}.build-preview{font-size:1rem;color:#654b22;font-weight:800;letter-spacing:.01em}.build-placeholder{font-size:.9rem;color:#705a35;font-weight:800}.built-word{font-size:2.6rem;color:#102044;font-weight:1000;letter-spacing:.06em}.built-word.success{color:#27683b}
.comic-art{overflow:hidden}.quest-charlotte-img{bottom:-7%;height:55%}.quest-jack-img{bottom:-5%;height:31%}.comic-sfx{bottom:24%}.speech{margin:-2px 12px 0}
.word-stage .mic-wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.word-stage .hint{margin-bottom:10px}
@media(max-width:430px){.quest-charlotte-img{bottom:-8%;height:53%}.quest-jack-img{bottom:-6%;height:29%}.comic-sfx{bottom:25%}.word-stage .mic-wrap{padding-bottom:calc(116px + env(safe-area-inset-bottom))}}

/* Map viewport correction: start at quest 1 and keep labels clear of nodes */
.map-page .map-top{position:sticky;top:0;z-index:40;background:#173b73;box-shadow:0 5px 18px #07152f55}
.illustrated-map{min-height:1320px;padding-top:0}
.illustrated-map .map-label{position:sticky;top:104px;z-index:22;margin:18px 18px 0;left:auto;right:auto;transform:none}
.map-journey-label{position:absolute;z-index:7;left:50%;top:18%;transform:translateX(-50%);background:#132544cc;border:1px solid #ffffff44;color:#fff4bd;border-radius:999px;padding:6px 12px;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.illustrated-map .map-nodes{z-index:8}
.illustrated-map .map-node{width:50px;height:50px}
.illustrated-map .map-node b{top:54px}
.travelers{bottom:1.7%}
.world-sign-woods{top:60%}.world-sign-mountain{top:70%}
.map-tip{bottom:8px}
@media(max-width:430px){
 .illustrated-map{min-height:1180px}
 .illustrated-map .map-label{top:94px;margin:14px 14px 0;padding:12px 15px}
 .illustrated-map .map-label strong{font-size:1.42rem}
 .illustrated-map .map-label span{font-size:.72rem}
 .map-journey-label{top:17%}
}

/* Mobile-first map progression: the adventure begins at the top */
.illustrated-map .map-label{position:relative;top:auto;margin:16px 18px 0;z-index:22}
.map-journey-label{top:12.5%}
.travelers-start{left:9%;top:13.8%;bottom:auto;width:125px;height:112px}
.travelers-start img:first-child{width:72px;height:108px}.travelers-start img:last-child{width:62px;height:72px}
.world-sign-woods{left:3%;top:43%}.world-sign-mountain{right:3%;top:68%}
.illustrated-map .map-node.current b{top:54px}
.map-tip{position:sticky;bottom:calc(86px + env(safe-area-inset-bottom));margin:0 auto 12px;transform:none;left:auto;width:86%;z-index:25}
.map-page .game-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0a2250}
.map-page .map-shell{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media(max-width:430px){
 .illustrated-map .map-label{top:auto;margin:14px 14px 0}
 .map-journey-label{top:12.7%}
 .travelers-start{left:7%;top:14.2%;width:116px;height:104px}
}

/* Quest road is now generated from the exact same coordinates as the stops */
.quest-road{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible;pointer-events:none}
.quest-road path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.quest-road-shadow{stroke:#5b3a22;stroke-width:56;opacity:.68}
.quest-road-main{stroke:#edcf86;stroke-width:42}
.quest-road-dots{stroke:#fff0bd;stroke-width:6;stroke-dasharray:2 18}
.illustrated-map .map-nodes{z-index:10}
.illustrated-map .map-node{box-shadow:0 5px 0 #32146f,0 0 0 5px #ffd43c55,0 0 18px #ffd43c}

/* Focused Lost Library board — scenery supports the path instead of competing with it */
.illustrated-map{background:linear-gradient(180deg,#142c59 0%,#203d69 42%,#17284d 100%)}
.map-art{display:none}
.library-map-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.library-map-bg:before,.library-map-bg:after{content:"";position:absolute;top:11%;bottom:4%;width:17%;border:5px solid #7d5a45;background:repeating-linear-gradient(180deg,#291f3b 0 105px,#7d5135 106px 115px);box-shadow:inset 0 0 35px #0009}
.library-map-bg:before{left:-5%;border-radius:0 18px 18px 0}.library-map-bg:after{right:-5%;border-radius:18px 0 0 18px}
.library-window{position:absolute;left:31%;top:8%;width:38%;height:9%;border:7px solid #6682ad;border-radius:100px 100px 10px 10px;background:radial-gradient(circle at 50% 55%,#fff7d0 0 12%,#9cc6e8 13% 30%,#14294e 31%);box-shadow:0 0 50px #a9d8ff33}
.shelf{position:absolute;top:27%;width:12%;height:45%;opacity:.7}.shelf-left{left:1%}.shelf-right{right:1%}
.library-lamp{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffe174;box-shadow:0 0 10px 5px #ffe174,0 0 45px 24px #ffd95b55}.lamp-one{left:17%;top:45%}.lamp-two{right:17%;top:66%}
.floor-glow{position:absolute;left:20%;right:20%;bottom:-7%;height:22%;background:radial-gradient(ellipse,#7b62d755 0%,transparent 68%)}
.map-vignette{background:linear-gradient(#07162d77 0,transparent 16%,transparent 86%,#07142c99 100%)}
.quest-road-shadow{stroke:#09152d;stroke-width:34;opacity:.78}
.quest-road-main{stroke:#f3c94f;stroke-width:19;filter:drop-shadow(0 0 7px #ffd84b88)}
.quest-road-dots{display:none}
.illustrated-map .map-node{width:52px;height:52px;border-width:4px;box-shadow:0 4px 0 #32146f,0 0 0 4px #ffd43c44,0 0 14px #ffd43c99}
.travelers-start{left:8%;top:14.5%}
.map-tip{background:#0a1733f2}
@media(max-width:430px){.library-map-bg:before,.library-map-bg:after{width:14%}.quest-road-shadow{stroke-width:30}.quest-road-main{stroke-width:17}}

/* iPhone game HUD/nav: full-width, safe-area aware, no floating half-width panel */
.map-page .game-nav{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;max-width:none!important;margin:0!important;
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  min-height:72px!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
  box-sizing:border-box!important;border-radius:0!important;
  background:rgba(7,29,68,.97)!important;border-top:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 -10px 30px rgba(3,13,35,.3)!important;backdrop-filter:blur(16px);
}
.map-page .game-nav a{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:5px 2px!important;border-radius:14px!important;color:#b9c8e5!important;font-size:1.05rem!important;text-decoration:none!important}
.map-page .game-nav a span{display:block!important;font-size:.67rem!important;font-weight:800!important;line-height:1!important}
.map-page .game-nav a.active{color:#ffe05b!important;background:#ffffff0d!important}
.map-page .map-shell{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
.map-tip{bottom:calc(80px + env(safe-area-inset-bottom))!important}


/* =========================================================
   READER DESIGN SYSTEM v1
   Visual language: magical illustrated adventure, navy/purple/gold,
   parchment surfaces, luminous interaction states, mobile first.
   ========================================================= */
:root{
  --reader-bg:#07152f;
  --reader-bg-2:#0d2856;
  --reader-panel:#101d43;
  --reader-panel-glass:rgba(10,24,58,.92);
  --reader-purple:#6f3fe8;
  --reader-purple-hi:#9b61ff;
  --reader-gold:#ffd84a;
  --reader-gold-deep:#d99216;
  --reader-cream:#fff0c7;
  --reader-paper:#fff4d6;
  --reader-paper-edge:#c88737;
  --reader-ink:#101a40;
  --reader-muted:#a9b6d8;
  --reader-radius-sm:14px;
  --reader-radius-md:22px;
  --reader-radius-lg:30px;
  --reader-shadow:0 16px 38px rgba(0,0,0,.35);
  --reader-glow:0 0 0 3px rgba(255,216,74,.25),0 0 28px rgba(255,216,74,.42);
  --reader-max:520px;
  --reader-nav-h:78px;
}
.game-shell{max-width:var(--reader-max);background:var(--reader-bg);padding-bottom:calc(var(--reader-nav-h) + env(safe-area-inset-bottom))}
.game :where(button,a){-webkit-tap-highlight-color:transparent}
.game :where(button,a):focus-visible{outline:3px solid #fff;outline-offset:3px}
.game-nav{
  position:fixed!important;
  left:50%!important;right:auto!important;bottom:0!important;
  transform:translateX(-50%)!important;
  width:min(var(--reader-max),100%)!important;
  max-width:var(--reader-max)!important;
  height:auto!important;min-height:var(--reader-nav-h)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,rgba(15,30,70,.96),rgba(7,20,48,.99))!important;
  border-top:1px solid rgba(153,177,255,.28)!important;
  box-shadow:0 -14px 36px rgba(1,8,25,.42)!important;
  backdrop-filter:blur(18px);
}
.game-nav a{
  position:relative;min-height:58px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:#aebce1!important;text-decoration:none;border-radius:16px;font-weight:850!important;font-size:.68rem!important;
}
.game-nav a svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
.game-nav a.active{color:#ffe66f!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,216,74,.04))!important}
.game-nav a.active:after{content:"";position:absolute;left:24%;right:24%;bottom:1px;height:3px;border-radius:99px;background:var(--reader-gold);box-shadow:0 0 12px var(--reader-gold)}
.game-nav a.active svg{filter:drop-shadow(0 0 8px rgba(255,216,74,.7))}
.quest-page .game-shell{padding-bottom:calc(var(--reader-nav-h) + 18px + env(safe-area-inset-bottom))}
.quest-page .activity-card{padding-bottom:calc(var(--reader-nav-h) + 34px + env(safe-area-inset-bottom))}
.hud-pill,.quest-progress,.book-icon{
  border-color:rgba(127,166,255,.42);
  background:linear-gradient(180deg,rgba(8,29,70,.96),rgba(11,24,55,.92));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 7px 20px rgba(0,0,0,.23);
}
.icon-btn,.round-back{
  border:2px solid rgba(255,217,77,.75);
  background:linear-gradient(180deg,#182f67,#0c204c);
  box-shadow:0 4px 0 rgba(0,0,0,.25),0 0 12px rgba(255,213,67,.2);
}
.quest-scroll,.word-card,.sentence-card,.passage,.build-target,.speech{
  background:
    radial-gradient(circle at 80% 14%,rgba(255,255,255,.45),transparent 20%),
    linear-gradient(180deg,var(--reader-paper),#f7dda2);
  border-color:var(--reader-paper-edge);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),var(--reader-shadow);
}
.gold-button{
  background:linear-gradient(180deg,#ffed73,#ffc82d);
  border:2px solid #fff1a0;
  box-shadow:0 5px 0 #bd7b08,0 0 24px rgba(255,210,41,.4);
}
.primary,.link-button{
  background:linear-gradient(180deg,var(--reader-purple-hi),var(--reader-purple));
  border:2px solid #d7bcff;
  box-shadow:0 5px 0 #3a188f,0 0 24px rgba(126,75,245,.34);
}
.tile{
  background:linear-gradient(180deg,#fff5d5,#f4d99b);
  border-color:#d1973f;
  box-shadow:0 6px 0 #82511d,0 0 0 2px rgba(255,255,255,.34) inset;
}
.tile:not(:disabled):active,.gold-button:active,.primary:active,.link-button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.32)}
.map-node.current{box-shadow:0 5px 0 #32146f,var(--reader-glow)!important}
.map-node.done{background:linear-gradient(180deg,#ffe46a,#e8ad25)!important}
@media (prefers-reduced-motion:no-preference){
  .game-nav a.active:after{animation:readerNavGlow 2.2s ease-in-out infinite}
  @keyframes readerNavGlow{50%{opacity:.55;transform:scaleX(.85)}}
}
@media(max-width:390px){
  :root{--reader-nav-h:74px}
  .game-nav{padding-left:4px!important;padding-right:4px!important}
  .game-nav a{font-size:.64rem!important}
  .game-nav a svg{width:25px;height:25px}
}


/* =========================================================
   PROTOTYPE MATCH PASS — HOME + MAP + QUEST CHROME
   ========================================================= */
.premium-hud{position:absolute!important;top:0;left:0;right:0;height:86px;padding-left:12px;padding-right:12px;gap:7px}
.premium-hud .avatar{width:50px;height:50px;border:3px solid #ffe66b;background:radial-gradient(circle at 35% 25%,#a66cff,#6d38d8 68%);box-shadow:0 0 0 3px #37216f,0 0 18px #ffd94c66;color:#fff3b7;font-family:Georgia,serif;font-size:1.35rem}
.premium-hud .hud-pill{height:46px;padding:0 14px;font-size:.84rem;border:2px solid #3b67c0;white-space:nowrap}
.premium-hud .hud-symbol{color:#ffe055;font-size:1.2rem;text-shadow:0 0 9px #ffd94f}
.premium-hud .icon-btn{width:46px;height:46px}
.premium-home-hero{height:64dvh;min-height:530px;max-height:680px;padding-top:86px!important;background:#091633}
.premium-home-hero .home-bg-art{filter:saturate(1.18) contrast(1.04)}
.hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(4,12,34,.18),transparent 25%,transparent 72%,rgba(6,14,35,.68)),radial-gradient(circle at 67% 46%,rgba(255,205,56,.18),transparent 26%)}
.premium-logo{top:96px!important;left:50%!important;transform:translateX(-50%);width:92%;text-align:center}
.premium-logo small{font-size:.72rem;letter-spacing:.28em;color:#ffe77f}
.premium-logo span{font-size:clamp(2.65rem,11vw,4rem)!important;line-height:.9!important;color:#ffe06a;text-shadow:0 2px 0 #fff1a7,0 5px 0 #8b4c14,0 10px 22px #000}
.premium-logo i{display:block;width:62%;height:2px;margin:12px auto 0;background:linear-gradient(90deg,transparent,#ffd84a,transparent);box-shadow:0 0 13px #ffd84a}
.premium-characters{left:3%!important;right:2%;width:auto!important;height:55%!important;bottom:-2%!important}
.premium-characters .charlotte-img{left:1%;width:57%!important;height:100%!important;bottom:-1%!important}
.premium-characters .jack-img{right:0;width:53%!important;height:79%!important;bottom:-1%!important}
.premium-quest-card{margin:-36px 16px 0!important;border-radius:20px!important;padding:24px 20px 18px!important;border:3px solid #cf963f!important;background:radial-gradient(circle at 87% 15%,#fff8df 0,transparent 24%),linear-gradient(#fff2c7,#f7d99a)!important;box-shadow:0 16px 36px #0009!important}
.premium-quest-card:before,.premium-quest-card:after{display:none}
.premium-quest-card small{color:#7b471f;letter-spacing:.08em}
.premium-quest-card h1{font-size:2.15rem!important;color:#151c45;margin:2px 0 8px!important}
.premium-quest-card p{font-size:.95rem!important;line-height:1.35;color:#3a3140}
.quest-card-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin:14px 0 12px}
.quest-card-progress .quest-count{margin:0;font-size:.78rem;font-weight:800;color:#2a2540}
.quest-card-progress .quest-meter{height:14px;background:#c8b995;border:1px solid #fff6d8;box-shadow:inset 0 2px 5px #0002}
.quest-card-progress .quest-meter span{width:9.1%;background:linear-gradient(90deg,#7f46f2,#a55dff);box-shadow:0 0 12px #8c52f5}
.premium-continue{height:60px;font-size:1.1rem;border-radius:999px;gap:16px}
.premium-continue b{font-size:1.7rem;line-height:1}

/* illustrated map */
.premium-map-top{height:110px!important;padding-top:calc(18px + env(safe-area-inset-top))!important;background:linear-gradient(180deg,#132f64,#0c2451);border-bottom:1px solid #ffffff18}
.premium-map-top h1{font-size:1.9rem!important;text-shadow:0 2px 8px #0008}.premium-map-top small{letter-spacing:.2em}
.premium-map{min-height:1500px!important;height:auto!important;background:linear-gradient(180deg,#112a5c 0,#173969 32%,#13274f 100%)!important;border-radius:0!important;padding-top:0!important}
.premium-map .library-map-bg{background:radial-gradient(circle at 68% 11%,#7553d866,transparent 18%),linear-gradient(180deg,#102955,#183b6e 48%,#112449)}
.premium-map .library-map-bg:before,.premium-map .library-map-bg:after{top:0!important;bottom:0!important;width:24%!important;background:repeating-linear-gradient(180deg,#231733 0 115px,#734528 116px 126px)!important;border-color:#82502f!important;box-shadow:inset 0 0 45px #000c,0 0 24px #0008}
.premium-map .library-window{top:7%!important;left:53%!important;width:31%!important;height:12%!important;border-color:#c98c35!important;background:radial-gradient(circle at 50% 60%,#fff8a4 0 9%,#9a5cff 10% 25%,#182e67 26% 58%,#111b40 59%);box-shadow:0 0 35px #ffd54888}
.map-balcony{position:absolute;left:20%;right:20%;height:9%;border:12px solid #6e452c;border-top:0;border-radius:0 0 50% 50%;box-shadow:0 16px 25px #0008;opacity:.75}
.balcony-one{top:31%}.balcony-two{top:50%;left:10%;right:30%}.balcony-three{top:69%;left:30%;right:7%}
.premium-map-label{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:16px 16px 0!important;transform:none!important;padding:15px 18px!important;border-radius:16px!important;background:linear-gradient(#fff4d2,#f4d493)!important;border:3px solid #c58837;box-shadow:0 7px 0 #8b5828,0 16px 28px #0007!important}
.premium-map-label small{color:#7c4a25!important;font-weight:950;letter-spacing:.08em}
.premium-map-label strong{font-size:1.9rem!important;color:#151b44}
.premium-map-label span{font-size:.8rem!important;color:#493b3c}
.premium-map .quest-road{z-index:5;top:7%;height:90%}
.premium-map .quest-road-shadow{stroke:#3c241a!important;stroke-width:27!important;opacity:.78}
.premium-map .quest-road-main{stroke:#f5c94b!important;stroke-width:15!important;filter:drop-shadow(0 0 8px #ffd94baa)}
.premium-map .map-node{width:56px!important;height:56px!important;border:4px solid #ffe797!important;background:linear-gradient(#8651f0,#5f2ed5)!important;box-shadow:0 5px 0 #32126e,0 0 0 3px #fff6c455,0 0 18px #ffd74d99!important;font-size:1rem}
.premium-map .map-node.current{width:64px!important;height:64px!important;box-shadow:0 5px 0 #32126e,0 0 0 5px #fff6c4aa,0 0 30px #ffd84a!important}
.premium-map .map-node b{top:67px!important;background:#fff0ac!important;color:#4e2c86!important;border:2px solid #7e4fde!important;font-size:.58rem!important;padding:5px 10px!important}
.travelers-current{position:absolute;z-index:11;left:3%;top:76.5%;width:185px;height:210px;pointer-events:none}
.travelers-current img{position:absolute;bottom:0;object-fit:contain;filter:drop-shadow(0 10px 10px #0007)}
.travelers-current img:first-child{left:0;width:110px;height:205px}.travelers-current img:last-child{right:0;width:110px;height:132px}
.destination-door{position:absolute;right:15%;top:17%;z-index:6;width:98px;height:145px;border:8px solid #e3a437;border-radius:52px 52px 9px 9px;background:radial-gradient(circle,#fff7aa 0 8%,#7d48ef 9% 36%,#311f75 65%,#17133f);box-shadow:0 0 20px #ffd64b,0 0 70px #ffd64b88;display:grid;place-items:center}
.destination-door span{font-size:2rem;color:#ffe76d;text-shadow:0 0 12px #fff}
.premium-map .map-vignette{background:linear-gradient(#06142f44,transparent 15%,transparent 82%,#06142faa 100%),linear-gradient(90deg,#02091855,transparent 18%,transparent 82%,#02091855)}
.map-page .map-shell{padding-bottom:calc(var(--reader-nav-h) + env(safe-area-inset-bottom))!important}
@media(max-width:430px){
 .premium-home-hero{min-height:520px;height:61dvh}
 .premium-logo{top:92px!important}
 .premium-logo span{font-size:2.7rem!important}
 .premium-characters{height:52%!important}
 .premium-quest-card{margin-top:-28px!important}
 .premium-map{min-height:1390px!important}
 .travelers-current{left:1%;top:77%;width:165px;height:190px}
 .travelers-current img:first-child{width:100px;height:188px}.travelers-current img:last-child{width:98px;height:122px}
}

/* prototype quest chrome */
.quest-page .quest-hud{position:sticky;top:0;z-index:60;height:90px;background:linear-gradient(180deg,rgba(8,28,66,.98),rgba(8,24,56,.94));backdrop-filter:blur(14px);border-bottom:1px solid #ffffff14;padding-top:calc(12px + env(safe-area-inset-top))}
.quest-page .quest-progress{padding:10px 14px;border:2px solid #3568bd;border-radius:999px}
.quest-page .quest-progress>div:first-child{font-size:.75rem;color:#fff2cf}
.quest-page .quest-name{font-size:2rem;margin:12px 18px 8px;color:#ffe05c;text-shadow:0 2px 0 #8b4d16,0 5px 15px #000}
.quest-page .book-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem}
.activity-card{background:radial-gradient(circle at 70% 18%,#6d4dcc33,transparent 24%),linear-gradient(180deg,#15366e,#142a56 52%,#111e3e)}
.activity-head .eyebrow{display:inline-block;color:#664114;background:linear-gradient(#fff2cb,#f0cf89);border:2px solid #d39a3c;border-radius:999px;padding:6px 12px;letter-spacing:.08em;box-shadow:0 4px 0 #8a5c27}
.activity-head h2{font-size:2.25rem!important;color:#fff6dd;text-shadow:0 3px 12px #0007}
.activity-sub{font-size:1rem}
.mic-button{width:108px;height:108px;background:radial-gradient(circle at 35% 25%,#a45cff,#6939dd 66%);border-color:#ffdb62;box-shadow:0 0 0 5px #5424b6,0 0 34px #ffd95299}

/* production character art inside secondary quest activities */
.sentence-charlotte,.sentence-jack{position:absolute;bottom:-4%;object-fit:contain;filter:drop-shadow(0 8px 9px #0008);z-index:3}
.sentence-charlotte{left:7%;width:42%;height:78%}.sentence-jack{right:6%;width:38%;height:56%}
.clue-characters{height:150px!important;position:relative!important;overflow:visible!important}
.clue-characters img{position:absolute;bottom:-8px;object-fit:contain;filter:drop-shadow(0 8px 8px #0006)}
.clue-characters img:first-child{left:8%;width:42%;height:150px}.clue-characters img:last-child{right:8%;width:43%;height:125px}
.reward-friends{height:155px!important}
.reward-friends img{position:absolute;bottom:0;object-fit:contain;filter:drop-shadow(0 8px 8px #0007)}
.reward-friends img:first-child{left:4%;width:46%;height:150px}.reward-friends img:last-child{right:3%;width:47%;height:128px}
.reward-friends span{display:none!important}


/* =========================================================
   PRODUCTION ILLUSTRATION PASS — real generated scene art
   ========================================================= */
.production-scene,.production-map-art,.production-comic-art,.production-harbor-art,.production-builder-art{display:block}
.illustrated-home{position:relative;overflow:hidden;background:#08162f!important}
.home-production-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:1}
.illustrated-home .hero-overlay{z-index:2;background:linear-gradient(180deg,rgba(4,10,28,.28) 0%,rgba(4,10,28,.04) 30%,rgba(4,10,28,.03) 68%,rgba(4,10,28,.7) 100%)}
.illustrated-home .premium-logo{z-index:4;top:94px!important}
.illustrated-home .premium-logo span{font-size:clamp(2.7rem,11vw,3.65rem)!important}
.home-page .premium-quest-card{z-index:10}

/* Map image itself defines the world geometry; live nodes only add labels/click targets. */
.premium-map{position:relative!important;width:100%;height:auto!important;min-height:0!important;aspect-ratio:430/764;overflow:hidden!important;background:#0b1f46!important}
.production-map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.premium-map .map-vignette{z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,12,31,.2),transparent 16%,transparent 86%,rgba(4,12,31,.34))}
.premium-map .premium-map-label{position:absolute!important;z-index:18!important;top:14px!important;left:14px!important;right:auto!important;width:min(60%,290px)!important;margin:0!important;padding:10px 13px!important;border-radius:14px!important;box-shadow:0 6px 0 #8b5828,0 12px 24px #0006!important}
.premium-map .premium-map-label strong{font-size:1.25rem!important}
.premium-map .premium-map-label span{font-size:.67rem!important}
.premium-map .map-nodes{position:absolute!important;inset:0!important;z-index:12!important}
.premium-map .map-node{width:54px!important;height:54px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;text-shadow:0 2px 5px #1b0b45,0 0 4px #fff;font-size:1rem!important}
.premium-map .map-node.current{width:60px!important;height:60px!important;background:rgba(119,61,238,.16)!important;border:2px solid rgba(255,239,160,.82)!important;box-shadow:0 0 0 3px rgba(255,213,66,.28),0 0 26px rgba(255,213,66,.8)!important}
.premium-map .map-node.done{background:rgba(255,213,66,.16)!important}
.premium-map .map-node b{top:60px!important;background:#fff0ac!important;color:#4e2c86!important;border:2px solid #7e4fde!important;white-space:nowrap}
.premium-map .quest-road,.premium-map .library-map-bg,.premium-map .destination-door,.premium-map .travelers-current{display:none!important}

/* Story comic: artwork is now the scene, not CSS scenery. */
.comic-art.production-comic{position:relative;height:min(52dvh,455px)!important;padding:0!important;border:3px solid #d39a42!important;background:#15162d!important;overflow:hidden}
.production-comic-art{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.production-comic .comic-sfx{position:absolute;right:7%;top:20%;z-index:3;color:#fff5cf;font-size:clamp(1.35rem,6vw,2rem);text-shadow:0 3px 8px #000,0 0 12px #ffb62b}
.production-comic:after{display:none!important}
.comic-wrap .speech{margin:-18px 14px 0!important;position:relative;z-index:4}

/* Word Power: illustrated harbor on top, live decodable word remains DOM text. */
.harbor-art.production-harbor{position:relative!important;overflow:hidden;border-radius:22px;background:#102958!important;border:1px solid rgba(255,255,255,.18)}
.production-harbor-art{width:100%;height:205px;object-fit:cover;object-position:center 42%}
.production-harbor .word-card{position:relative;margin:-8px 12px 14px;min-height:175px;padding:26px 10px;border-radius:18px}
.production-harbor .mini-jack-art{display:none!important}

/* Word Builder: real illustrated library workspace behind the live controls. */
.production-builder{position:relative;overflow:hidden;border-radius:22px;padding:230px 14px 22px!important;background:#171336!important}
.production-builder-art{position:absolute;z-index:0;left:0;right:0;top:0;width:100%;height:270px;object-fit:cover;object-position:center 38%;mask-image:linear-gradient(#000 0 78%,transparent 100%)}
.production-builder>*:not(.production-builder-art){position:relative;z-index:2}
.production-builder .activity-head{margin-top:-22px}
.production-builder .build-target{background:linear-gradient(#fff8df,#f1d69a)!important}
.production-builder .tiles{padding-top:4px}

/* Keep mobile screens compact enough to feel like a game, not a long webpage. */
.quest-page .activity-card{min-height:calc(100dvh - 90px)!important;justify-content:flex-start;padding-top:14px!important}
.quest-page .quest-name{font-size:1.55rem!important;line-height:1.05;margin:7px 20px 8px!important}
@media(max-width:430px){
  .premium-home-hero{height:60dvh!important;min-height:510px!important}
  .home-production-art{object-position:center 34%}
  .premium-map-top{height:92px!important}
  .premium-map{aspect-ratio:430/764!important}
  .production-comic-art{object-position:center 40%}
  .production-harbor-art{height:190px}
  .production-builder{padding-top:215px!important}
  .production-builder-art{height:252px}
}


/* =========================================================
   MOBILE FIT PASS — keep activities readable and above fixed nav
   ========================================================= */
.quest-page .game-shell{overflow:visible!important}
.quest-page .activity-card{
  min-height:auto!important;
  padding:10px 16px calc(92px + env(safe-area-inset-bottom))!important;
  justify-content:flex-start!important;
}
.quest-page .activity-head{margin-bottom:10px!important}
.quest-page .activity-head h2{font-size:clamp(1.8rem,8vw,2.2rem)!important;line-height:1.02}
.quest-page .activity-sub{margin:6px 0 8px!important}
.quest-page .quest-name{padding:0 10px}

/* Word Power: remove inherited spacer and make the whole activity tighter. */
.harbor-art.production-harbor{
  padding:0!important;
  margin-top:6px!important;
  min-height:0!important;
  overflow:hidden!important;
}
.production-harbor-art{
  height:138px!important;
  object-fit:cover!important;
  object-position:center 38%!important;
}
.production-harbor .word-card{
  min-height:132px!important;
  padding:14px 8px!important;
  margin:-6px 10px 10px!important;
  font-size:clamp(4.2rem,20vw,6rem)!important;
}
.word-stage .mic-wrap{margin-top:10px!important}
.word-stage .mic-button{width:84px!important;height:84px!important;border-width:6px!important}
.word-stage .mic-button:before{left:27px!important;top:16px!important}
.word-stage .mic-button:after{left:20px!important;top:34px!important}
.word-stage .hint{margin:10px 0 6px!important;font-size:.88rem}
.word-stage .practice-note{margin:0 0 6px!important;font-size:.64rem}

/* Word Builder: light text and a compact illustrated workspace. */
.production-builder{
  padding:178px 12px calc(96px + env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,#16183a 0%,#34213d 100%)!important;
}
.production-builder-art{
  height:205px!important;
  object-position:center 34%!important;
  mask-image:linear-gradient(#000 0 72%,transparent 100%)!important;
}
.production-builder .activity-head{
  margin:0 0 10px!important;
  padding:12px 10px!important;
  border-radius:16px!important;
  background:rgba(9,24,58,.88)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
.production-builder .activity-head h2{
  color:#fff7dd!important;
  text-shadow:0 2px 10px #000!important;
  font-size:1.9rem!important;
}
.production-builder .activity-sub{
  color:#dfe8ff!important;
  text-shadow:none!important;
  margin-bottom:0!important;
}
.production-builder .eyebrow{color:#6b431c!important}
.production-builder .dock-rope{display:none!important}
.production-builder .build-target{
  height:92px!important;
  margin:0 0 14px!important;
  padding:14px!important;
  font-size:2.1rem!important;
}
.production-builder .build-placeholder,.production-builder .build-preview{
  font-size:.95rem!important;
  line-height:1.25!important;
}
.production-builder .tiles{gap:8px!important}
.production-builder .tile{width:62px!important;height:62px!important;font-size:1.65rem!important}
.production-builder .primary{margin-top:14px!important;min-height:56px!important}

/* Home: keep Continue visible above the persistent nav on common iPhone heights. */
.home-page .game-shell{padding-bottom:calc(90px + env(safe-area-inset-bottom))!important}
.home-page .premium-home-hero{height:55dvh!important;min-height:470px!important;max-height:600px!important}
.home-page .premium-quest-card{
  margin:-24px 16px 12px!important;
  padding:20px 18px 16px!important;
}
.home-page .premium-quest-card h1{font-size:2rem!important}
.home-page .premium-quest-card p{font-size:.9rem!important}
.home-page .quest-card-progress{margin:10px 0!important}
.home-page .premium-continue{height:54px!important}

@media(max-width:430px){
  .quest-page .quest-hud{height:82px!important}
  .quest-page .quest-name{font-size:1.45rem!important;margin:6px 14px 6px!important}
  .comic-art.production-comic{height:min(45dvh,405px)!important}
  .production-comic .comic-sfx{top:17%!important}
  .home-page .premium-home-hero{height:53dvh!important;min-height:455px!important}
}


/* =========================================================
   MOBILE BUGFIX PASS — map nav/header + quest CTA visibility
   ========================================================= */

/* The map had a high-specificity left:0 rule combined with the shared -50%
   transform, which shifted half the nav off-screen. Center it explicitly. */
.map-page .game-nav{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(var(--reader-max),100%)!important;
  max-width:var(--reader-max)!important;
}

/* Do not pin the map header under Safari's collapsing browser chrome. */
.map-page .premium-map-top{
  position:relative!important;
  top:auto!important;
  height:96px!important;
  padding-top:16px!important;
}

/* Map artwork already contains the purple stop circles; live nodes are
   deliberately just labels/hit-targets so they don't double-draw the art. */
.premium-map .map-node{
  width:48px!important;
  height:48px!important;
}
.premium-map .map-node.current{
  width:56px!important;
  height:56px!important;
}
.premium-map .map-node b{
  top:54px!important;
}

/* Fit Word Power completely above the persistent game nav on iPhone. */
.production-harbor-art{height:118px!important}
.production-harbor .word-card{
  min-height:112px!important;
  padding:10px 8px!important;
  font-size:clamp(3.8rem,18vw,5.4rem)!important;
}
.word-stage .mic-wrap{margin-top:6px!important;padding-bottom:8px!important}
.word-stage .mic-button{width:76px!important;height:76px!important;border-width:5px!important}
.word-stage .mic-button:before{width:17px!important;height:27px!important;left:25px!important;top:14px!important;border-width:3px!important}
.word-stage .mic-button:after{width:29px!important;height:19px!important;left:19px!important;top:31px!important;border-width:3px!important;border-top:0!important}
.word-stage .hint{margin:7px 0 4px!important;font-size:.82rem!important}
.word-stage .practice-note{font-size:.61rem!important;padding:5px 8px!important}

/* Fit Word Builder's Check button above the nav instead of hiding it behind it. */
.production-builder{
  padding:138px 12px calc(88px + env(safe-area-inset-bottom))!important;
}
.production-builder-art{
  height:165px!important;
  object-position:center 32%!important;
}
.production-builder .activity-head{
  padding:9px 8px!important;
  margin:0 0 8px!important;
}
.production-builder .activity-head h2{font-size:1.65rem!important}
.production-builder .activity-sub{font-size:.88rem!important;margin-top:3px!important}
.production-builder .build-target{
  height:76px!important;
  margin-bottom:10px!important;
  padding:10px!important;
}
.production-builder .build-placeholder,.production-builder .build-preview{font-size:.86rem!important}
.production-builder .tiles{gap:7px!important}
.production-builder .tile{
  width:56px!important;
  height:56px!important;
  font-size:1.5rem!important;
  box-shadow:0 5px 0 #82511d!important;
}
.production-builder .primary{
  min-height:52px!important;
  margin-top:10px!important;
}

/* Slightly reduce persistent nav footprint while retaining 44px+ targets. */
.game-nav{
  --reader-nav-h:72px;
}
.game-nav a{min-height:52px!important}

@media(max-width:430px){
  .map-page .premium-map-top{height:88px!important}
  .production-harbor-art{height:108px!important}
  .production-builder{padding-top:128px!important}
  .production-builder-art{height:154px!important}
}


/* =========================================================
   ART CROP + MICROPHONE POLISH
   ========================================================= */

/* Center generated scene artwork on the characters/primary action. */
.production-harbor-art{
  object-position:58% 38%!important;
}
.production-builder-art{
  object-position:50% 30%!important;
}
.production-comic-art{
  object-position:52% 40%!important;
}

/* Replace legacy CSS-drawn mic glyph with a clean inline SVG icon. */
.mic-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
}
.mic-button:before,
.mic-button:after{
  content:none!important;
  display:none!important;
}
.mic-button__inner{
  width:58%!important;
  height:58%!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.mic-icon{
  width:56%!important;
  height:56%!important;
  color:#fff!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.mic-button.recording .mic-button__inner{
  background:rgba(255,255,255,.18)!important;
}


/* =========================================================
   VISUAL ALIGNMENT PASS — exact map coordinates + centered art + real mic icon
   ========================================================= */

/* Map node text now sits on the painted purple circles. */
.premium-map .map-node{
  width:46px!important;
  height:46px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:0 2px 5px #1b0b45,0 0 4px #fff!important;
}
.premium-map .map-node.current{
  width:54px!important;
  height:54px!important;
  background:rgba(119,61,238,.12)!important;
  border:2px solid rgba(255,241,170,.82)!important;
  box-shadow:0 0 0 3px rgba(255,213,66,.18),0 0 22px rgba(255,213,66,.62)!important;
}
.premium-map .map-node.current b{
  top:auto!important;
  bottom:58px!important;
  font-size:.55rem!important;
  padding:5px 9px!important;
}

/* Give the map header breathing room when Safari restores the page at the top. */
.map-page .premium-map-top{
  margin-top:0!important;
  z-index:30!important;
}

/* Better character framing on Word Power. */
.production-harbor-art{
  height:152px!important;
  object-fit:cover!important;
  object-position:42% 31%!important;
}
.production-harbor .word-card{
  min-height:106px!important;
  margin:-5px 10px 10px!important;
  padding:10px 8px!important;
  font-size:clamp(3.6rem,17vw,5rem)!important;
}

/* Real microphone icon; remove all CSS-drawn mic parts. */
.word-stage .mic-button{
  width:88px!important;
  height:88px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:5px solid #ffd84a!important;
  background:radial-gradient(circle at 34% 28%,#aa6cff 0,#7f46ef 44%,#5a2ed1 100%)!important;
  box-shadow:0 0 0 4px rgba(89,43,198,.72),0 10px 24px rgba(0,0,0,.30),0 0 26px rgba(255,216,74,.28)!important;
}
.word-stage .mic-button:before,
.word-stage .mic-button:after{
  content:none!important;
  display:none!important;
}
.word-stage .mic-icon{
  width:38px!important;
  height:38px!important;
  display:block!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.word-stage .hint{margin-top:10px!important}
.word-stage .practice-note{margin-top:2px!important}

/* Keep Word Builder art centered on Charlotte + Jack instead of the table edge. */
.production-builder-art{
  object-position:50% 26%!important;
}

@media(max-width:430px){
  .production-harbor-art{height:145px!important;object-position:40% 29%!important}
  .word-stage .mic-button{width:84px!important;height:84px!important}
  .word-stage .mic-icon{width:36px!important;height:36px!important}
}


/* =========================================================
   QUEST IMMERSIVE PASS — stop bottom-nav overlap and restore art framing
   ========================================================= */

/* During a quest the back button already provides navigation. The persistent
   global nav was covering the instructions and shrinking the art too far. */
.quest-page .game-nav{display:none!important}
.quest-page .game-shell{
  padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
  min-height:100dvh!important;
}
.quest-page .activity-card{
  padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;
}

/* Word Power: give the illustration enough height to show Charlotte + Jack
   instead of cropping their faces to fit around the bottom nav. */
.production-harbor-art{
  height:205px!important;
  object-fit:cover!important;
  object-position:50% 45%!important;
}
.production-harbor .word-card{
  min-height:126px!important;
  margin:-8px 10px 10px!important;
  padding:12px 8px!important;
  font-size:clamp(4rem,18vw,5.7rem)!important;
}
.word-stage .mic-wrap{
  margin-top:8px!important;
  padding-bottom:8px!important;
}
.word-stage .mic-button{
  width:104px!important;
  height:104px!important;
  border:6px solid #ffd84a!important;
  box-shadow:0 0 0 5px rgba(89,43,198,.72),0 12px 28px rgba(0,0,0,.34),0 0 32px rgba(255,216,74,.34)!important;
}
.word-stage .mic-icon{
  width:58px!important;
  height:58px!important;
  stroke:#fff!important;
  stroke-width:5!important;
}
.word-stage .hint{
  margin:10px 0 5px!important;
  font-size:.92rem!important;
}
.word-stage .practice-note{
  margin:0!important;
  font-size:.66rem!important;
  padding:6px 10px!important;
}

/* Word Builder can use the newly available vertical space too. */
.production-builder{
  padding:185px 12px calc(20px + env(safe-area-inset-bottom))!important;
}
.production-builder-art{
  height:218px!important;
  object-position:50% 35%!important;
}
.production-builder .primary{
  margin-bottom:4px!important;
}

@media(max-width:430px){
  .production-harbor-art{height:190px!important;object-position:50% 44%!important}
  .word-stage .mic-button{width:98px!important;height:98px!important}
  .word-stage .mic-icon{width:54px!important;height:54px!important}
  .production-builder{padding-top:172px!important}
  .production-builder-art{height:205px!important}
}


/* =========================================================
   REAL MIC PASS — visible state + HTTP/HTTPS behavior
   ========================================================= */
.word-stage .mic-button .mic-icon{
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  min-height:68px!important;
  stroke-width:5.5!important;
}
.word-stage .mic-button[disabled]{
  opacity:.48!important;
  filter:grayscale(.15);
  cursor:not-allowed!important;
  box-shadow:0 0 0 4px rgba(89,43,198,.38),0 8px 20px rgba(0,0,0,.22)!important;
}
.word-stage .mic-button.recording{
  transform:scale(1.04);
  box-shadow:0 0 0 7px rgba(255,216,74,.22),0 0 38px rgba(255,216,74,.55)!important;
}
.word-stage .mic-button.recording .mic-icon{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.55));
}
.word-stage .mic-wrap{
  padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;
}
@media(max-width:430px){
  .word-stage .mic-button .mic-icon{
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
  }
}


/* Centered Word Power artwork asset */
.production-harbor-art{
  height:190px!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}
@media(max-width:430px){
  .production-harbor-art{
    height:184px!important;
    object-position:center center!important;
  }
}


/* Collection screens: Book, Treasures, Profile */
.collection-shell{padding:20px 16px calc(96px + env(safe-area-inset-bottom));max-width:680px;margin:auto}
.collection-head,.profile-hero{display:flex;gap:14px;align-items:center;padding:14px 4px 20px}
.collection-head small,.profile-hero small,.story-world-number{font-size:.7rem;font-weight:900;letter-spacing:.12em;color:#ffd84a}
.collection-head h1,.profile-hero h1{font-size:2rem;margin:2px 0 4px;color:#fff}
.collection-head p,.profile-hero p{margin:0;color:#b9c4df;line-height:1.35}
.collection-icon,.profile-avatar{width:62px;height:62px;flex:0 0 62px;border-radius:20px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(145deg,#7d4af1,#4b2bb3);border:2px solid #ffd84a;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.profile-avatar{font-weight:900;color:#fff;font-size:1.7rem}
.collection-card,.story-world,.treasure-item,.treasure-summary{background:rgba(17,32,68,.92);border:1px solid rgba(255,255,255,.09);border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.collection-card{padding:18px;margin-bottom:14px}
.collection-stat strong{font-size:2rem;color:#ffd84a;display:block}.collection-stat span{color:#c8d1e6}
.collection-grid{display:grid;gap:12px}.story-world{padding:17px}.story-world h2{margin:5px 0;color:#fff;font-size:1.2rem}.story-world p{margin:0 0 12px;color:#aebbd7;font-size:.9rem;line-height:1.4}.story-world.locked{opacity:.58}
.mini-meter{height:8px;border-radius:99px;background:#07142f;overflow:hidden;margin:12px 0 6px}.mini-meter span{display:block;height:100%;background:linear-gradient(90deg,#8050f4,#ffd84a);border-radius:99px}.story-world small{color:#b9c4df}
.treasure-summary{display:grid;grid-template-columns:repeat(3,1fr);padding:15px 8px;margin-bottom:14px}.treasure-summary div{text-align:center}.treasure-summary strong{display:block;color:#ffd84a;font-size:1.55rem}.treasure-summary span{display:block;color:#b9c4df;font-size:.72rem;margin-top:3px}
.treasure-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.treasure-item{padding:18px 10px;text-align:center;min-height:154px}.treasure-item>span{font-size:2.25rem;display:block}.treasure-item h2{font-size:.95rem;color:#fff;margin:8px 0 3px}.treasure-item strong{color:#ffd84a;display:block}.treasure-item small{color:#aebbd7;display:block;margin-top:4px}.treasure-item.locked{opacity:.56}
.collection-card h2{margin:0 0 12px;color:#fff}.skill-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.08)}.skill-row:first-of-type{border-top:0}.skill-row strong{display:block;color:#fff;font-size:.9rem}.skill-row small{color:#9eaccb;font-size:.72rem}.skill-row>span{color:#ffd84a;font-weight:900}.empty-state{color:#aebbd7}
.parent-link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#fff;background:#6940d8;border-radius:16px;padding:16px 18px;font-weight:800}
.collection-page .game-nav{grid-template-columns:repeat(5,1fr)}.collection-page .game-nav a,.game-nav a{font-size:.62rem}
@media(max-width:390px){.game-nav{grid-template-columns:repeat(5,1fr)!important}.game-nav a{padding-left:2px!important;padding-right:2px!important}.game-nav svg{width:21px!important;height:21px!important}.treasure-grid{gap:9px}}


/* Mobile nav: always one row, five destinations */
.game-nav{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;
  align-items:stretch!important;
  height:calc(76px + env(safe-area-inset-bottom))!important;
  min-height:calc(76px + env(safe-area-inset-bottom))!important;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;
  gap:2px!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
}
.game-nav a{
  width:auto!important;
  min-width:0!important;
  min-height:60px!important;
  height:60px!important;
  padding:6px 2px 5px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  white-space:nowrap!important;
}
.game-nav a svg{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.game-nav a span{
  display:block!important;
  max-width:100%!important;
  font-size:clamp(.56rem,2.6vw,.68rem)!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.game-shell{
  padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;
}
.quest-page .game-shell{
  padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
}
@media(max-width:390px){
  .game-nav{padding-left:5px!important;padding-right:5px!important;gap:0!important}
  .game-nav a{padding-left:0!important;padding-right:0!important}
  .game-nav a svg{width:22px!important;height:22px!important;flex-basis:22px!important}
  .game-nav a span{font-size:.55rem!important}
}


/* =========================================================
   SENTENCE ART FIX — production art must replace, not sit inside,
   the legacy CSS-drawn activity scene.
   ========================================================= */
.sentence-world .activity-scene.production-harbor{
  padding:0!important;
  margin:0 0 12px!important;
  height:220px!important;
  min-height:220px!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#102958!important;
  border:1px solid rgba(255,255,255,.16)!important;
}
.sentence-world .activity-scene.production-harbor:before,
.sentence-world .activity-scene.production-harbor:after{
  content:none!important;
  display:none!important;
}
.sentence-world .production-harbor-art{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 58%!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:430px){
  .sentence-world .activity-scene.production-harbor{
    height:205px!important;
    min-height:205px!important;
  }
  .sentence-world .production-harbor-art{
    object-position:center 58%!important;
  }
}


/* =========================================================
   PRODUCTION SCENE RESET — never layer legacy CSS scenery
   behind generated artwork.
   ========================================================= */
.activity-scene.production-harbor,
.activity-scene.production-comic{
  padding:0!important;
  min-height:0!important;
  overflow:hidden!important;
  position:relative!important;
  background:#102958!important;
}
.activity-scene.production-harbor:before,
.activity-scene.production-harbor:after,
.activity-scene.production-comic:before,
.activity-scene.production-comic:after{
  content:none!important;
  display:none!important;
}
.sentence-world .activity-scene.production-harbor,
.passage-world .activity-scene.production-comic,
.clue-world .activity-scene.production-comic{
  height:220px!important;
  min-height:220px!important;
  margin:0 0 12px!important;
  border-radius:22px!important;
}
.sentence-world .production-harbor-art,
.passage-world .production-comic-art,
.clue-world .production-comic-art{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
}

/* Quest reward now uses the same production illustration language as the quest. */
.production-reward{
  position:relative!important;
  min-height:520px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:#17132d!important;
}
.production-reward .reward-rays,
.production-reward .reward-friends{display:none!important}
.production-reward-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.reward-vignette{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,11,30,.06) 20%,rgba(8,11,30,.22) 48%,rgba(8,11,30,.88) 100%);
}
.reward-content{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:24px;
  text-align:center;
}
.production-reward .reward-content h2,
.production-reward .reward-content .body-copy{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.75)}
@media(max-width:430px){
  .sentence-world .activity-scene.production-harbor,
  .passage-world .activity-scene.production-comic,
  .clue-world .activity-scene.production-comic{
    height:205px!important;
    min-height:205px!important;
  }
  .production-reward{min-height:480px!important}
}


/* =========================================================
   PHASE 2 — VERTICAL SLICE QUEST BRIEFING + STORY CLUES
   ========================================================= */
.quest-intro-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:linear-gradient(180deg,#102b61,#111a3c);
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}
.quest-intro-art{
  height:clamp(260px,48dvh,420px);
  overflow:hidden;
  background:#101d42;
}
.quest-intro-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.quest-intro-copy{
  padding:20px 20px 22px;
}
.quest-intro-copy h1{
  margin:2px 0 10px;
  font:900 clamp(2rem,9vw,2.7rem)/.98 Georgia,serif;
  color:#fff3bf;
  letter-spacing:-.035em;
}
.quest-intro-copy>p:not(.eyebrow){
  margin:0;
  color:#dce8fb;
  font-size:1rem;
  line-height:1.5;
}
.quest-intro-rule{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.quest-intro-rule span{
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  padding:7px 10px;
  color:#fff1c7;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.02em;
}
.quest-start{margin-top:18px}
.story-beat{
  line-height:1.45;
  border:1px solid #f3d797;
}
.choice{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.choice-letter{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#172554;
  color:#fff;
  font-weight:1000;
}
.choice.incorrect{
  border-color:#ffaf77!important;
  box-shadow:0 0 0 3px rgba(255,132,92,.18)!important;
}
.quest-complete h2{max-width:360px;margin-left:auto;margin-right:auto}
@media(max-width:430px){
  .quest-intro-copy{padding:17px 17px 19px}
  .quest-intro-rule{gap:6px}
  .quest-intro-rule span{font-size:.64rem;padding:6px 8px}
}