/* A single pixel-game interface from the start screen through level 100. */
:root{color-scheme:dark;--body:var(--pixel);--bg:#3e2f2a;--panel:#514039;--line:#8c7059;--white:#f1dfbd;--muted:#c4ac92;--accent:#e7cfaa;--accent-soft:#ecd9b7;--accent-deep:#4b352b;--blue:#e7cfaa;--gold:#e6b967;--green:#ddc79d}
body{font-family:var(--pixel);background:#2e241f;background-image:none;color:var(--white)}
button,input,summary{font-family:var(--pixel);font-weight:400}button{transition:none}h1,h2,h3,strong{font-weight:400}button:focus-visible,a:focus-visible{outline:2px dashed #e7cfaa;outline-offset:4px}
.phone,.phone[data-mode]{color-scheme:dark;--bg:#3e2f2a;--panel:#514039;--line:#8c7059;--white:#f1dfbd;--muted:#c4ac92;--blue:#e7cfaa;--gold:#e6b967;--green:#ddc79d;background:#3e2f2a;color:#f1dfbd;border-color:#98795c;box-shadow:0 0 0 6px #554137,0 0 0 7px #8d6d54}
.device-bar{background:#3e2f2a;color:#f1dfbd;font-weight:400}.device-island{background:#f1dfbd}.phone[data-mode] .home-indicator{background:#ad8f71}
.desktop-note,.desktop-footer{font-family:var(--pixel);color:#bda78e;letter-spacing:1px}.desktop-footer>span{color:#e8d5b3}.tiny-spark{color:#e7cfaa}
.screen{animation:none}.screen .eyebrow{letter-spacing:1px;font-size:12px;font-weight:400}.logo{font-size:24px}.logo-mark:after{color:#3e2f2a}
.phone[data-mode] :is(.sound-button,.icon-button){background:#514039;border:2px solid #8c7059;border-radius:2px;color:#e8d5b3;box-shadow:none}
.phone[data-mode] .primary{border:2px solid #4b352b;border-radius:2px;background:#e7cfaa;color:#514039;font:400 17px var(--pixel);box-shadow:0 3px 0 #4b352b}
.phone[data-mode] .secondary{background:#514039;border:2px solid #96785c;border-radius:2px;color:#e8d5b3;font-size:15px;font-weight:400;box-shadow:none}
.text-button{font-size:14px}.hero-copy .eyebrow{font-size:11px;letter-spacing:1px}.hero-copy h1{font-weight:400;font-size:42px;letter-spacing:-1px}.hero-copy h1 em{color:#e7cfaa}
.hero-copy p{font-size:14px;color:#d0b99a;line-height:1.5;max-width:305px}.hero-world{border:2px solid #a18061;border-radius:2px;box-shadow:none}.hero-world:after{box-shadow:none;border-radius:0}
.world-caption{background:#3e2f2af0;color:#e8d5b3;border:1px solid #a38365;border-radius:1px;font:11px var(--pixel);box-shadow:none}.live-dot{box-shadow:none;background:#e7cfaa}
.feature-line{font-size:12px;color:#d0b99a;gap:9px;margin-bottom:18px}.feature-line i{background:#b29878}.welcome-note{font-size:12px;color:#c4ac92}.hero-characters .sprite{filter:none}
.name-input{background:#514039;border:2px solid #96785c;border-radius:2px;color:#f1dfbd;font:18px var(--pixel)}.name-input:focus{border-color:#e7cfaa;box-shadow:none}.name-input::placeholder{color:#b89e81}
.name-label{font-size:15px;font-weight:400}.privacy-note{font-size:13px;color:#bda78e;line-height:1.5}.name-vignette:before{display:none}.onboard-content>.muted{font-size:15px}.step-dots span{background:#765c49;border-radius:0}.step-dots span.active{background:#e7cfaa}
.character-card{background:#514039;border:2px solid #8c7059;border-radius:2px;box-shadow:none}.character-card.selected{background:#ecd9b7;border-color:#e7cfaa;box-shadow:none}.character-card>span{font-size:12px;color:#c4ac92}.character-card strong{font-weight:400;font-size:19px}.character-help{font-size:13px;color:#c4ac92}
.phone[data-mode] :is(h1,h2,h3){font-family:var(--pixel);font-weight:400}.map-heading h1{font-size:26px}.greeting{font-size:13px;color:#c4ac92;margin-top:6px}
.phone[data-mode] .avatar-button{background:#514039;border:1px solid #8c7059;border-radius:2px}.avatar-button span{font-size:13px;color:#e8d5b3}.phone[data-mode] .map-progress{color:#c4ac92;font-size:12px}.phone[data-mode] .progress-track{background:#765c49;border-radius:0}.progress-track>div{background:#e7cfaa;border-radius:0}.star-count{font-size:12px}
.phone[data-mode] .world-tab{background:#514039;border:1px solid #8c7059;border-radius:2px;color:#c4ac92;font:14px var(--pixel)}.phone[data-mode] .world-tab.active{background:#ecd9b7;border:2px solid #e7cfaa;color:#4b352b}
.world-banner h2{font-size:24px}.phone[data-mode] .world-banner p{font-size:12px;color:#c4ac92}.phone[data-mode] .world-count{background:#514039;border:1px solid #8c7059;border-radius:2px;color:#cfb999;font:13px var(--pixel)}
.journey-scroll{border:2px solid #a38365;border-radius:2px}.journey-map .map-overlay{background:none}.journey-sign{font:12px var(--pixel);border-radius:1px}.level-node{font:22px var(--pixel);border-radius:8px}.level-node.current{box-shadow:0 4px 0 #4b352b}.node-label{background:#f3e3c7;border:1px solid #a38365;border-radius:1px;color:#e8d5b3;box-shadow:none;font:11px var(--pixel)}
.phone[data-mode] .bottom-nav{background:#3e2f2a;border-top:2px solid #8c7059}.phone[data-mode] .nav-item{font-size:12px;font-weight:400;color:#bda78e}.phone[data-mode] .nav-item.active{color:#4b352b}
.phone[data-mode] .level-sheet{background:#3e2f2a;border:2px solid #a38365;border-radius:2px 2px 0 0;box-shadow:none}.phone[data-mode] .level-sheet p{color:#c4ac92;font-size:15px}.sheet-handle{border-radius:0}.sheet-backdrop{backdrop-filter:none;background:#f1dfbd66}
.play-title span{font-size:11px;letter-spacing:.5px}.play-title h1{font:23px/1.2 var(--pixel)}
.game-scene,.game-screen.long-text .game-scene{border:2px solid #a38365;border-radius:2px;box-shadow:none}
.dialogue-area,.game-screen.long-text .dialogue-area{border:2px solid #967454;border-radius:1px;box-shadow:3px 3px 0 #e8d5b355;padding:12px 14px 14px}
.dialogue-area:after{bottom:-8px;width:12px;height:12px;border-right:2px solid #967454;border-bottom:2px solid #967454}
.speaker,.dialogue-area.player .speaker,.dialogue-area.response .speaker{font:15px var(--pixel);letter-spacing:0;color:#e7cfaa}
.dialogue,.game-screen.long-text .dialogue{font:18px/1.4 var(--pixel);color:#4b352b;min-height:48px}.game-screen.long-text .dialogue{font-size:16px}
.listen-button{font:11px var(--pixel)}.building-label{font:11px/1 var(--pixel);letter-spacing:0}.scene-time{font:11px var(--pixel);background:#3e2f2aee;color:#e8d5b3;border:1px solid #a38365;border-radius:1px}.scene-place{font:12px var(--pixel);background:#3e2f2aee;border:1px solid #a38365;border-radius:1px;box-shadow:none}.walking-label{border:2px solid #a38365;border-radius:1px;font:15px var(--pixel);box-shadow:none}
.choice-hint{font-size:11px;letter-spacing:.4px}.choice,.game-screen.long-text .choice{background:#ecd9b7;border:2px solid #ad8d69;color:#4b352b;padding:10px 11px;border-radius:2px;font:15px/1.35 var(--pixel);box-shadow:0 2px 0 #261c18}.choice-letter{font:15px var(--pixel);background:#e7cfaa;color:#514039;border:0;border-radius:1px}.choice:hover:not(:disabled){background:#f6e7ce;border-color:#e7cfaa}
.feedback-note{font-size:14px}.feedback-note strong{font-weight:400}.continue-placeholder{font-size:14px}.play-footer{font-size:11px}.question-progress span{border-radius:0}
.phone[data-mode] :is(.review-card,.profile-hero,.stat,.journal-card){background:#514039;border:2px solid #8c7059;border-radius:2px;box-shadow:none}.review-card .eyebrow{font-size:11px}.review-row,.journal-card p{font-size:14px}.journal-card small{font-size:12px}.result-screen>.muted{font-size:15px}.result-score{font-size:14px}
.profile-hero p,.phone[data-mode] .stat p{font-size:13px;color:#c4ac92}.setting-row{font-size:16px}.phone[data-mode] .learning-details{font-size:14px;line-height:1.5;border:1px solid #8c7059;border-radius:2px;background:#ecd9b7}.empty-message{font-size:14px}.phone[data-mode] .toast{font-size:14px;background:#3e2f2a;border:2px solid #a38365;border-radius:2px;color:#e8d5b3}
@media(max-width:520px){body,.phone[data-mode=adventure]{background:#3e2f2a}.hero-copy h1{font-size:42px}}
@media(max-height:760px){.hero-copy h1{font-size:36px}.hero-copy p{font-size:13px}.feature-line{font-size:11px;margin-bottom:13px}.dialogue,.game-screen.long-text .dialogue{font-size:16px;min-height:40px}.choice,.game-screen.long-text .choice{font-size:14px;padding:8px 10px}}

/* Cream controls and paper dialogue contrast with the cocoa interface. */
.phone[data-mode] .primary{background:#e7cfaa;color:#402d24;border-color:#b5926c;box-shadow:0 3px 0 #261c18}
.device-island{background:#291f1a}.phone[data-mode] .nav-item.active{color:#f1dfbd}
.character-card.selected :is(strong,span){color:#4b352b}.character-card.selected .select-tick{color:#79543b}
.phone[data-mode] .learning-details,.phone[data-mode] .learning-details summary{color:#4b352b}
.dialogue-area,.game-screen.long-text .dialogue-area{background:#f3e3c7;border-color:#9b7959;box-shadow:3px 3px 0 #37271c55}
.dialogue-area:after{background:#f3e3c7;border-color:#9b7959}.dialogue-area.player,.dialogue-area.player:after{background:#e7cfaa}
.dialogue-area :is(.speaker,.dialogue,.listen-button){color:#4b352b}
.speaker,.dialogue-area.player .speaker,.dialogue-area.response .speaker{color:#79543b}
.phone[data-mode] .review-card :is(.eyebrow,.review-row),.phone[data-mode] .journal-card :is(p,small){color:#e4d1b4}
.feedback-note,.continue-placeholder,.play-footer{color:#c4ac92}.feedback-note strong{color:#f1dfbd}
.scene-place{color:#f1dfbd}.walking-label{background:#e7cfaa;color:#4b352b;border-color:#ad8d69}
.scene-art{--door-fade:0}
.game-scene,.game-screen.long-text .game-scene{flex:0 0 auto;min-height:0}
.scene-art{flex:none;aspect-ratio:256 / 208;min-height:0}
.scene-art canvas{top:0;transform:none;width:100%;height:100%}
.game-scene:has(.is-inside){background:#aa8663}
.scene-art::after{content:'';position:absolute;inset:0;background:#332923;opacity:var(--door-fade);pointer-events:none;z-index:5}
.scene-art.is-inside .building-label{display:none}
.scene-reaction{position:absolute;left:9px;right:9px;bottom:9px;padding:8px 10px;background:#f1dfbdf2;color:#49362b;border:2px solid #a38365;font:13px/1.3 var(--pixel);text-align:center;z-index:3;pointer-events:none}
.scene-art:has(.scene-reaction) .scene-place{bottom:61px}
.walking-label{top:auto;bottom:45px;transform:translateX(-50%);font-size:13px;padding:6px 10px}
.sheet-backdrop{background:#211813aa}.journey-scroll,.game-scene,.game-screen.long-text .game-scene{border-color:#a38365}
.phone[data-mode] .level-node.current{background:#e7cfaa;border-color:#f4e3c2;color:#4b352b;box-shadow:0 4px 0 #79543b}
.phone[data-mode] .level-node.complete{background:#d0a772;border-color:#ecd0a0;color:#4b352b}
.phone[data-mode] .level-node:disabled{background:#725943;border-color:#ac8a62;color:#ead6b4}
.journey-sign{background:#725943;border-color:#c8a67b;color:#f4e3c2}

/* All world tabs open a preview; locked terrain stays visible beneath the X lock. */
.phone[data-mode] .world-tab.locked{opacity:.72}
.phone[data-mode] .world-tab.locked.active{opacity:1;background:#786758;border-color:#c8b296;color:#f1dfbd}
.world-tab-lock{position:absolute;right:5px;top:1px;font:13px var(--pixel);line-height:1}
.journey-preview{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;margin:0 14px}
.journey-preview .journey-scroll{margin:0}
.journey-preview.locked .journey-scroll{filter:grayscale(1) brightness(.68);opacity:.78}
.world-lock-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#332e293d;pointer-events:none}
.world-lock-card{display:flex;flex-direction:column;align-items:center;gap:12px;width:250px;max-width:calc(100% - 40px);padding:24px 14px;background:#3e2f2aeb;border:2px solid #c4ae91;color:#f1dfbd;box-shadow:4px 4px 0 #21181388;text-align:center}
.world-lock-number{font:12px var(--pixel);letter-spacing:1px;color:#c4ac92}
.world-lock-icon{height:76px;width:76px;color:#f1dfbd}
.world-lock-card h3{font:26px/1 var(--pixel)}
.world-lock-card p{font:14px/1.4 var(--pixel);color:#d6c0a3}