/* The opening is charcoal; the adventure is warm paper with a world-specific accent. */
:root{--bg:#292c2d;--panel:#343839;--line:#494e4e;--muted:#abb1af;--white:#f7f5ee;--blue:#b2d0dc}
body{background-color:#222526;background-image:radial-gradient(ellipse at 50% 45%,#3c4140 0,transparent 68%)}
.phone{background:var(--bg);border-color:#5b605e;box-shadow:0 30px 90px #15181866,0 0 0 7px #303434,0 0 0 8px #494e4c}
.device-bar{background:var(--bg)}.device-island{background:#1d2021}.desktop-note{color:#a0a9a4}.desktop-footer{color:#99a49d}.desktop-footer>span{color:#b9c5bc}
.sound-button,.icon-button{background:#353a3a;border-color:#4a5250;color:#e2e6df}
.primary{box-shadow:0 4px 0 #6d8e97}.hero-copy p{color:#c3c9c5}.welcome-note{color:#a4afa8}.feature-line{color:#bec9c0}.hero-world{border-color:#798c70;box-shadow:0 10px 30px #161c1b22}.hero-world:after{box-shadow:inset 0 0 30px #21382016}
.name-input{background:#343a39;border-color:#606b62}.name-input::placeholder{color:#aab5ac}.privacy-note{color:#a7b4a9}.character-card{background:#343a38;border-color:#555f57}.character-card.selected{background:#43504b;border-color:#bed7cb;box-shadow:inset 0 0 0 1px #bed7cb33}.character-card>span,.character-help{color:#b6c2b9}
.hero-characters .sprite{width:47px;height:86px}.hero-characters{height:89px;gap:20px;margin-top:-24px}.character-card canvas{width:57px;height:103px}.character-card{min-height:176px}.name-vignette canvas{width:83px;height:150px}.avatar-button canvas{width:19px;height:34px}.profile-hero canvas{width:64px;height:115px}.result-sprite{width:69px;height:124px}
.phone[data-mode=adventure]{color-scheme:light;--bg:#f5f1e5;--white:#354132;--muted:#747e69;--blue:var(--accent);--gold:#a57429;--green:#4e754c;--line:#d5dac8;--panel:#fffdf6;background:var(--bg);color:var(--white)}
.phone[data-mode=adventure] .home-indicator{background:#9ca28f}
.phone[data-mode=adventure] .primary{background:var(--accent);color:#fffdf3;box-shadow:0 4px 0 var(--accent-deep)}
.phone[data-mode=adventure] .secondary{background:#fffdf5;border-color:#d5d8c6;color:var(--accent-deep)}
.phone[data-mode=adventure] .sound-button,.phone[data-mode=adventure] .icon-button{background:#fffdf3;border-color:#d5dac8;color:var(--accent-deep);box-shadow:0 2px 0 #c9cbb944}
.phone[data-mode=adventure] h1,.phone[data-mode=adventure] h2{font-family:var(--body);font-weight:600;letter-spacing:-.5px}
.map-header{padding-top:17px}.map-heading h1{font-size:24px}.greeting{font-size:11px;margin-top:7px}
.phone[data-mode=adventure] .avatar-button{background:#fffdf4;border-color:#d5d9c7;color:#4e5d45}
.phone[data-mode=adventure] .map-progress{color:#758168}.phone[data-mode=adventure] .progress-track{background:#dce1cf}
.phone[data-mode=adventure] .world-tab{background:#eae9da;border-color:#d8dcc8;color:#7c866c;font-family:var(--body);font-weight:600}
.phone[data-mode=adventure] .world-tab.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.phone[data-mode=adventure] .world-tab:disabled{opacity:.65}
.world-banner h2{font-size:21px}.phone[data-mode=adventure] .world-banner p{color:#7d856e}.phone[data-mode=adventure] .world-count{background:#e7e8d7;border-color:#d3d9bf;color:#6c765c;font-family:var(--body);font-size:11px}
.journey-scroll{border:1px solid #c2ceaf;margin:0 14px;border-radius:18px}.journey-map .map-overlay{background:linear-gradient(#fff5cd00,#d9edab08)}
.level-node{font-family:var(--body);font-weight:700;width:48px;height:48px}.level-node.current{background:#fff9df;border-color:#fff6cb;color:var(--accent-deep);box-shadow:0 0 0 6px #ffffe82b,0 4px 0 #647b49}
.level-node.complete{background:#edd49a;border-color:#fff0c3;color:#63522f}.level-node:disabled{background:#6f885d;border-color:#afc38b;color:#e4e9d2;opacity:.85}.level-node svg{width:16px;height:16px}
.node-label{background:#fffbee;border-color:#c7d1b0;color:#576a42;box-shadow:0 2px 6px #3b53352b}.node-stars{color:#fff0bd}.journey-sign{font:600 10px var(--body);letter-spacing:.8px;color:#fbf5dc;background:#708351;border-color:#d4daa5;border-width:1px;border-radius:5px}
.phone[data-mode=adventure] .bottom-nav{background:#faf8ed;border-color:#dce0ce;padding-top:14px}.phone[data-mode=adventure] .nav-item{color:#829077}.phone[data-mode=adventure] .nav-item.active{color:var(--accent-deep);font-weight:700}
.phone[data-mode=adventure] .level-sheet{background:#faf8ed;border-color:#ccd3be;box-shadow:0 -20px 70px #3d483833}.phone[data-mode=adventure] .level-sheet p{color:#747c68}.phone[data-mode=adventure] .sheet-handle{background:#c6ceb8}
/* A white comic panel occupies the top of the scenery, above the characters. */
.play-top{padding:12px 18px 13px}.play-title span{font-size:9px;letter-spacing:1.1px}.play-title h1{font:600 18px/1.3 var(--body);margin-top:4px}
.game-scene,.game-screen.long-text .game-scene{margin:0 14px 17px;display:flex;flex-direction:column;flex:1 0 350px;height:auto;min-height:350px;max-height:none;overflow:hidden;border:1px solid #b1c09b;border-radius:18px;background:var(--scene-ground);box-shadow:0 4px 0 #c7cfb74d}
.dialogue-area,.game-screen.long-text .dialogue-area{position:relative;z-index:2;margin:13px 13px 0;padding:13px 15px 15px;min-height:104px;flex-shrink:0;background:#fffef7;color:#3f4937;border:1px solid #e2dfcd;border-bottom:3px solid #d4d9bf;border-radius:8px;box-shadow:0 4px 12px #3e5b381c;cursor:pointer}
.dialogue-area:after{content:'';position:absolute;bottom:-9px;left:37px;width:14px;height:14px;background:#fffef7;border-right:1px solid #d4d9bf;border-bottom:2px solid #d4d9bf;transform:rotate(45deg)}
.speaker-row{margin-bottom:7px;gap:8px}.speaker,.dialogue-area.player .speaker,.dialogue-area.response .speaker{font:700 12px var(--body);letter-spacing:.2px;color:var(--accent-deep)}
.dialogue-area.player{background:#fff8e9}.dialogue-area.player:after{left:auto;right:38px;background:#fff8e9}
.dialogue,.game-screen.long-text .dialogue{font:400 16px/1.45 var(--body);color:#394434;min-height:46px;overflow-wrap:anywhere}
.game-screen.long-text .dialogue{font-size:14px;line-height:1.5}.listen-button{color:#6d7d62;font-size:9px}.listen-button svg{height:12px;width:12px}
.scene-art{flex:1;min-height:235px;position:relative;container-type:inline-size;overflow:hidden}
.scene-art canvas{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);height:auto;width:100%;object-fit:initial;image-rendering:pixelated}
.building-label{position:absolute;top:calc(50% - 18.36cqw);left:44.14%;transform:translate(-50%,-50%);font:600 9px var(--body);letter-spacing:.1px;color:#fff5d7;text-align:center;white-space:nowrap;pointer-events:none;line-height:1}
.scene-time{font:600 9px var(--body);top:16px;right:12px;background:#f7f7e6d9;color:#5d7052;border:1px solid #c8d1ae;padding:5px 7px;border-radius:6px}
.scene-place{font:500 10px var(--body);left:13px;bottom:13px;color:#4c6243;background:#faf7e9ed;border-color:#d6dcbd;border-radius:6px;box-shadow:0 2px 0 #596c3b22}
.walking-label{background:#fffaf0ec;color:#576e47;border-color:#d4debc;font:500 13px var(--body);box-shadow:0 3px 10px #243c2922}
.choice-area{padding:0 21px 14px;gap:9px}.choice-hint{font-size:9px;color:#7b876d;letter-spacing:1.4px;margin-bottom:3px}
.choice,.game-screen.long-text .choice{background:#fffdf5;border:1px solid #d3d9c4;color:#4b5741;min-height:51px;padding:11px 12px;border-radius:10px;font:400 13px/1.45 var(--body);box-shadow:0 3px 0 #e2e4d4}
.choice-letter{font:600 11px var(--body);background:var(--accent-soft);color:var(--accent-deep);width:25px;height:26px;border:1px solid #d8dfc8;border-radius:6px}
.choice:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.feedback-note{color:#6b7860;font-size:12px}.feedback-note strong{color:var(--accent-deep)}.continue-placeholder{height:155px;color:#7f8a73;font-size:12px}
.play-footer{color:#859075;font-size:9px;padding-bottom:25px;flex-shrink:0}.question-progress span{background:#d9dec9}.question-progress .done{background:var(--accent)}
.phone[data-mode=adventure] .review-card,.phone[data-mode=adventure] .profile-hero,.phone[data-mode=adventure] .stat,.phone[data-mode=adventure] .journal-card{background:#fffdf4;border-color:#d8ddc9;color:#4a5741}
.phone[data-mode=adventure] .review-card .eyebrow,.phone[data-mode=adventure] .review-row,.phone[data-mode=adventure] .journal-card p,.phone[data-mode=adventure] .journal-card small{color:#6d7a60}
.phone[data-mode=adventure] .result-star{color:#dedcca;filter:drop-shadow(0 3px 0 #c4c1ab)}.phone[data-mode=adventure] .result-star.earned{color:#d9aa52;filter:drop-shadow(0 3px 0 #a67f3e)}
.phone[data-mode=adventure] .stat p{color:#7b856c}.phone[data-mode=adventure] .setting-row{border-color:#d7dcc8}.phone[data-mode=adventure] .learning-details{color:#758067;border-color:#d0d8bd;background:#edf0df}.phone[data-mode=adventure] .learning-details summary{color:#4f6543}.phone[data-mode=adventure] .privacy-note,.phone[data-mode=adventure] .empty-message{color:#7d896e}
.phone[data-mode=adventure] .toast{background:#f7f8e8;border-color:#abbc94;color:#46623d}
@media(max-width:520px){body{background:#292c2d}.phone[data-mode=adventure]{background:#f5f1e5}.game-scene{flex-basis:390px;min-height:390px}.play-footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}.hero-copy h1{font-size:43px}.bottom-nav{padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media(max-height:760px){.hero-characters{height:73px}.hero-characters .sprite{height:74px;width:41px}.character-card{min-height:151px}.character-card canvas{width:46px;height:83px}.game-scene,.game-screen.long-text .game-scene{flex-basis:310px;min-height:310px;margin-bottom:14px}.scene-art{min-height:187px}.dialogue-area,.game-screen.long-text .dialogue-area{min-height:91px;padding:10px 13px 12px}.dialogue,.game-screen.long-text .dialogue{font-size:14px;min-height:40px}.choice,.game-screen.long-text .choice{min-height:45px;padding:9px 11px}.choice-area{gap:7px}.result-sprite{height:100px;width:56px}}