/* Original, handheld-inspired exploration game. */
body{background:#f5f1e6}main{max-width:1120px}.game-kicker{font-size:11px;letter-spacing:1.5px;font-weight:bold;color:#f2dba1}.adventure-banner{display:flex;align-items:center;gap:20px;border:3px solid #284b43;border-radius:18px;overflow:hidden;background:#284b43;color:#fcf4dc;padding:25px 28px;margin-bottom:24px;box-shadow:0 7px 0 #dbd6c8}.adventure-banner h1{font-size:43px;line-height:1.1;letter-spacing:-1px;margin-bottom:12px}.adventure-banner p:not(.game-kicker){font-size:14px;line-height:1.6;margin:0;color:#d5e2cf}.adventure-banner canvas{width:48%;margin-left:auto;border:6px solid #476c5b;border-radius:12px;image-rendering:pixelated;transform:rotate(-2deg)}.mode-picker{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}.mode-picker legend,.avatar-picker legend{margin-bottom:12px}.mode-picker label{display:flex;align-items:center;gap:10px;border:2px solid #d6dcca;background:#fff;padding:10px 17px;border-radius:10px;cursor:pointer;font-size:14px}.mode-picker label:has(:checked){border-color:#416d56;background:#e7eee1}.mode-picker input,.avatar-picker input{accent-color:#31654c;width:18px;height:18px}.avatar-picker{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:25px}.avatar-picker label{display:flex;align-items:center;gap:6px;border:2px solid #d6dcca;border-radius:10px;background:#fff;padding:0 10px 0 5px;cursor:pointer;font-size:13px}.avatar-picker label:has(:checked){border-color:#416d56;background:#e7eee1}.avatar-picker canvas{width:36px;height:48px;image-rendering:pixelated}.world-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.world-heading h1{font-size:30px;margin:0}.world-heading .eyebrow{margin-bottom:6px}.world-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.world-stats span{background:#e2e8d7;color:#3c5d49;padding:6px 14px;border:1px solid #c7d2ba;border-radius:8px;font-size:13px;font-weight:bold}.world-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}.map-frame{border:3px solid #3c5948;border-radius:14px;overflow:hidden;background:#eee8d4;box-shadow:0 6px 0 #d5d4bf}.map-top{display:flex;align-items:center;gap:10px;padding:10px 15px;background:#294c3e;color:#f7efd7;font-size:14px}.map-top>span:last-child{margin-left:auto;color:#e0c17c}.live-dot{width:7px;height:7px;background:#8fb873;border-radius:50%}#world-canvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:crosshair;touch-action:none}#world-canvas:focus-visible{outline-offset:-5px;outline:3px solid #f5dc92}.map-message{min-height:76px;font-size:14px;margin:0;padding:13px 17px;background:#fff9e9;border-top:3px solid #3c5948;line-height:1.6}.map-controls{padding:10px 16px 5px;display:flex;justify-content:space-between;align-items:center;gap:15px}.d-pad{display:grid;grid-template-columns:46px 46px 46px;grid-template-rows:46px 46px;gap:3px;flex:none}.d-pad button{border:2px solid #4e654e;background:#d5dcc6;color:#304938;border-radius:7px;box-shadow:0 3px 0 #a4b094;font-size:18px;padding:0;touch-action:none;user-select:none}.d-pad button:active{background:#b2c39c;transform:translateY(2px);box-shadow:none}.d-pad .up{grid-column:2;grid-row:1}.d-pad .left{grid-column:1;grid-row:2}.d-pad .down{grid-column:2;grid-row:2}.d-pad .right{grid-column:3;grid-row:2}.interact{font-size:14px;max-width:210px;border-radius:30px;padding:13px 18px;box-shadow:0 4px 0 #193d31}.map-tip{font-size:11px;color:#67775e;margin:12px 17px 14px}.travel-journal{background:#fffaf0;border:1px solid #d8d6c2;border-radius:14px;padding:20px}.travel-journal h2{font-size:23px;line-height:1.3;margin:0 0 12px;letter-spacing:-.6px}.travel-journal p{font-size:13px;color:#62735f}.travel-journal h3{font-size:14px;margin-top:25px}#badge-list{display:flex;flex-direction:column;gap:7px}.earned-badge{display:flex;gap:10px;align-items:center;font-size:13px;color:#4d654a}.earned-badge svg{width:33px;height:36px}.earned-badge.locked{filter:grayscale(1);opacity:.45}#companion-list>span{display:flex;align-items:center;font-size:13px;gap:5px}#companion-list canvas{width:54px;height:48px;image-rendering:pixelated}.travel-journal details{font-size:13px;border-top:1px solid #d8d6c2;padding-top:15px;margin-top:20px}.travel-journal summary{cursor:pointer;font-weight:bold}#battle-panel{border:3px solid #3c5948;border-radius:14px;overflow:hidden;background:#fff7e3;margin-bottom:22px;box-shadow:0 5px 0 #d9d5c5}.battle-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#294c3e;padding:2px 15px;color:#f7efd7}.battle-label{font-size:11px;letter-spacing:1px;font-weight:bold}.battle-top button{color:#f7efd7;font-size:12px}.battle-scene{position:relative;min-height:200px;background:#dfecc9}.battle-scene>canvas{display:block;width:100%;height:auto;object-fit:contain;image-rendering:pixelated}.opponent-card,.hero-card{position:absolute;background:#fffcef;border:2px solid #566a46;border-radius:5px 15px 5px 15px;padding:11px 14px;box-shadow:3px 3px 0 #3c594828;width:44%;max-width:300px}.opponent-card{left:15px;top:14px}.hero-card{right:15px;bottom:14px}.opponent-card strong,.hero-card strong{display:block;font-size:18px}.opponent-card>span{display:block;font-size:11px;color:#69805a}.hp-row{display:flex;gap:7px;align-items:center;font-size:11px;margin-top:4px}.hp-row meter{height:13px;min-width:35px;flex:1;width:100%;accent-color:#56895b}.hp-row meter::-webkit-meter-bar{background:#dfdfc5;border:0;border-radius:3px}.hp-row meter::-webkit-meter-optimum-value{background:#5d995e;border-radius:3px}.hp-row>span{white-space:nowrap;font-size:11px;font-weight:bold}#battle-status{font-size:14px;margin:0;padding:12px 17px;border-top:2px solid #3c5948;background:#fff9e9}#battle-panel[data-status="won"] #battle-status{background:#dceccb;font-weight:bold}#battle-panel[data-status="rest"] #battle-status{background:#f3e6cb}.adventure-results{background:#e4edda;border:1px solid #c2d1b1;border-radius:12px;padding:14px;font-weight:bold}#play:has(#battle-panel:not([hidden])) .question-card{padding:22px 26px;border:2px solid #687959;border-radius:10px;background:#fffdf4}#play:has(#battle-panel:not([hidden])) .question-card h1{font-size:25px}#play:has(#battle-panel:not([hidden])) #choices{margin-top:14px}#play:has(#battle-panel:not([hidden])) .option{min-height:51px;padding:9px 13px;background:#fffdf7}#play:has(#battle-panel:not([hidden])) .visual{max-width:280px}#play:has(#battle-panel:not([hidden])) #progress{margin-bottom:15px}#battle-panel[data-status="won"] .battle-scene canvas{animation:battle-victory 450ms ease-out}@keyframes battle-victory{50%{filter:brightness(1.12)}}@media(prefers-reduced-motion:reduce){#battle-panel *{animation:none!important}}@media(max-width:850px){.world-layout{grid-template-columns:minmax(0,1fr)}.travel-journal{display:block}.travel-journal h2 br{display:none}#badge-list{flex-direction:row;flex-wrap:wrap;gap:18px}#companion-list{display:flex;gap:10px;flex-wrap:wrap}.travel-journal h3{margin-top:16px}}@media(max-width:650px){.adventure-banner{padding:23px 20px;display:block;position:relative}.adventure-banner h1{font-size:36px;position:relative;z-index:1}.adventure-banner canvas{width:160px;position:absolute;right:-30px;bottom:8px;opacity:.8;transform:rotate(-6deg);border-width:4px}.adventure-banner p:not(.game-kicker){max-width:205px;font-size:12px;position:relative;z-index:1}.game-kicker{font-size:9px}.world-heading{align-items:start}.world-heading h1{font-size:25px}.world-heading .text-button{max-width:110px;font-size:12px;text-align:right;padding-top:0}.world-stats{gap:5px}.world-stats span{font-size:11px;padding:5px 8px}.map-controls{padding:10px}.d-pad{grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px}.interact{font-size:12px;padding:12px;max-width:150px}.map-message{font-size:12px;min-height:83px;padding:11px 13px}.map-tip{font-size:10px;margin:10px 12px 12px}.map-top{font-size:12px}.battle-scene>canvas{height:auto}.battle-scene{min-height:175px}.opponent-card,.hero-card{padding:7px 9px;width:48%}.opponent-card{left:7px;top:7px}.hero-card{right:7px;bottom:7px}.opponent-card strong,.hero-card strong{font-size:13px}.opponent-card>span{font-size:9px}.hp-row{gap:4px;font-size:9px}.hp-row>span{font-size:9px}#battle-status{font-size:12px;padding:10px 12px}.battle-top{padding-left:9px;padding-right:9px}.battle-label{font-size:9px}.battle-top button{font-size:10px}#play:has(#battle-panel:not([hidden])) .question-card{padding:19px 15px}#play:has(#battle-panel:not([hidden])) .question-card h1{font-size:21px}.avatar-picker{gap:6px}.avatar-picker label{gap:4px;padding:0 5px}.avatar-picker label>span{font-size:11px}.avatar-picker canvas{width:28px;height:40px}.avatar-picker input{width:15px;height:15px}.mode-picker{gap:7px}.mode-picker label{font-size:12px;padding:9px 11px}}

.region-map canvas{display:block;width:100%;height:auto;image-rendering:pixelated;margin-top:12px;border:2px solid #62765b;border-radius:6px}.region-map p{font-size:11px;line-height:1.7}.travel-journal .region-map{margin-top:16px;padding-top:12px}

/* One stable screen for exploration and battles, including the questions. */
#game-layout.adventure-active{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}
.adventure-active #game-screen{height:clamp(420px,calc(100svh - 155px),740px);min-width:0;border:3px solid #3c5948;border-radius:14px;background:#fff9e9;overflow:hidden;box-shadow:0 6px 0 #d5d4bf;scroll-margin-top:16px}
.adventure-active #world,.adventure-active #play{height:100%;min-height:0;display:flex;flex-direction:column}
.adventure-active .world-heading{padding:9px 13px;margin:0;gap:10px;background:#eee8d4;flex:none}
.adventure-active .world-heading h1{font-size:19px}.adventure-active .world-heading .eyebrow{display:none}.adventure-active .world-heading .text-button{font-size:11px;min-height:34px;padding:3px}
.adventure-active .world-stats{margin:0;padding:0 12px 8px;gap:7px;background:#eee8d4;flex:none}.adventure-active .world-stats span{font-size:11px;padding:3px 8px}
.adventure-active .map-frame{flex:1;min-height:0;border:0;border-radius:0;box-shadow:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto}
.adventure-active #world-canvas{height:100%;width:100%;min-height:0;object-fit:fill}
.adventure-active .map-message{min-height:58px;padding:9px 13px;font-size:12px}.adventure-active .map-controls{padding:7px 13px 4px}.adventure-active .map-tip{margin:6px 13px 9px;font-size:10px}
.adventure-active #battle-panel{flex:none;border:0;border-radius:0;box-shadow:none;margin:0}
.adventure-active .battle-scene{height:clamp(120px,23svh,190px);min-height:0;overflow:hidden}
.adventure-active .battle-scene>canvas{height:100%;width:100%;object-fit:cover}
.adventure-active .opponent-card,.adventure-active .hero-card{padding:7px 10px;max-width:245px}.adventure-active .opponent-card strong,.adventure-active .hero-card strong{font-size:14px}
.adventure-active #battle-status{font-size:12px;padding:8px 13px;line-height:1.4}
.adventure-active .battle-question-area{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:12px 15px;background:#fffdf4}
.adventure-active .mission-meta{font-size:12px;gap:12px}.adventure-active .tag{padding:3px 9px}
.adventure-active #progress{margin:8px 0 12px;height:5px}
.adventure-active #play .question-card{padding:0;border:0;border-radius:0;background:transparent}
.adventure-active #play .question-card .eyebrow{font-size:10px;margin-bottom:6px}
.adventure-active #play .question-card h1{font-size:21px;line-height:1.4;margin-bottom:3px}
.adventure-active #play #choices{margin:10px 0;gap:7px}.adventure-active #play .option{padding:8px 11px;min-height:46px;font-size:14px}
.adventure-active #play .visual{max-width:210px;margin:8px auto}
.adventure-active #blank-wrap{margin:10px 0}.adventure-active #blank-wrap label{font-size:13px}.adventure-active #blank{font-size:20px;min-height:46px;margin-top:5px}.adventure-active #blank-help{font-size:11px}
.adventure-active #read{font-size:12px;min-height:34px;padding:4px 2px}.adventure-active #voice-status{font-size:11px}
.adventure-active #play .actions{position:sticky;bottom:-12px;z-index:2;background:#fffdf4;padding:9px 0 12px;margin-top:9px;gap:8px;border-top:1px solid #e4e6d7}
.adventure-active #play .actions .primary,.adventure-active #play .actions .secondary{padding:10px 14px;min-height:44px;font-size:13px}
.adventure-active #feedback{margin-top:10px;padding:11px 13px;font-size:13px}.adventure-active #hint{font-size:12px;padding:9px 12px}
.adventure-active .below-card{font-size:11px;margin-top:5px}.adventure-active .below-card button{font-size:11px}
@media(max-width:850px){#game-layout.adventure-active{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.adventure-active #game-screen{height:clamp(420px,calc(100svh - 135px),720px)}.adventure-active .world-heading h1{font-size:17px}.adventure-active .world-heading .text-button{max-width:120px}.adventure-active .world-stats{gap:5px}.adventure-active .world-stats span{font-size:10px;padding:3px 6px}.adventure-active .map-message{min-height:61px;font-size:11px}.adventure-active .map-controls{padding:7px 10px 3px}.adventure-active .map-tip{font-size:9px;margin:5px 10px 8px}.adventure-active .battle-scene{height:145px}.adventure-active .opponent-card,.adventure-active .hero-card{padding:6px 8px}.adventure-active .opponent-card strong,.adventure-active .hero-card strong{font-size:12px}.adventure-active #battle-status{font-size:11px;padding:7px 10px}.adventure-active .battle-question-area{padding:10px 11px}.adventure-active #play .question-card h1{font-size:19px}.adventure-active #play .actions{bottom:-10px}.adventure-active #play .option{font-size:13px}.adventure-active .battle-label{font-size:8px}}

.adventure-options{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 12px}.adventure-options label{font-size:14px;font-weight:bold;flex:1;min-width:230px}.adventure-options select{width:100%;font-size:13px}.screen-toolbar{display:none}.adventure-active #game-screen{display:flex;flex-direction:column}.adventure-active #world,.adventure-active #play{height:auto;flex:1;min-height:0}.adventure-active .screen-toolbar{display:flex;align-items:center;gap:12px;padding:7px 11px;background:#1e3c34;color:#f6edce;flex:none;font-size:11px}.screen-toolbar>span{flex:1}.screen-toolbar button{font:inherit;border:1px solid #779481;background:#345546;color:#fff7dd;min-height:34px;border-radius:6px;padding:5px 9px;cursor:pointer;white-space:nowrap}.adventure-active[data-level="2"] #game-screen{border-color:#5d627e}.adventure-active[data-level="2"] .screen-toolbar,.adventure-active[data-level="2"] .map-top,.adventure-active[data-level="2"] .battle-top{background:#3d4464}.adventure-active[data-level="2"] .map-frame{background:#e2e5ed}.game-fullscreen{padding:12px!important;margin:0!important;background:#f5f1e6;box-sizing:border-box;width:100%!important;height:100%!important;overflow:auto}.game-fullscreen #game-screen{height:calc(100dvh - 24px)!important;max-height:none!important}.game-fullscreen .travel-journal{max-height:calc(100dvh - 24px);overflow:auto}.game-expanded{overflow:hidden}.game-expanded #game-layout{position:fixed;inset:0;z-index:1000;height:100dvh!important}.adventure-active.game-fullscreen{grid-template-columns:minmax(0,1fr) 240px!important;gap:12px!important}.adventure-active.game-fullscreen .battle-scene{height:clamp(150px,30dvh,300px)}@media(max-width:850px){.adventure-active.game-fullscreen{grid-template-columns:minmax(0,1fr)!important}.game-fullscreen .travel-journal{display:none}.game-fullscreen{padding:6px!important}.game-fullscreen #game-screen{height:calc(100dvh - 12px)!important}}@media(max-width:650px){.adventure-options{gap:12px}.adventure-options label{min-width:100%}.adventure-active .screen-toolbar{font-size:10px;padding:5px 8px;gap:7px}.screen-toolbar button{font-size:10px;min-height:32px;padding:5px 7px}.adventure-active.game-fullscreen .battle-scene{height:170px}}
#avatar-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%}#avatar-list label{min-width:0;padding:3px 7px;gap:4px}#avatar-list span{font-size:12px}#avatar-list canvas{flex:none}@media(max-width:850px){#avatar-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){#avatar-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#avatar-list label{padding:3px 5px;gap:3px}#avatar-list span{font-size:11px}}
.adventure-active #play:has(#battle-panel:not([hidden])) .visual:has(.generated-learning-visual){max-width:440px}.adventure-active .generated-learning-visual figcaption{font-size:11px}.collection-count{width:100%;font-size:12px;font-weight:bold}