:root{--cream:#fff5dd;--ink:#422d32;--honey:#ffc761;--orange:#f38a43;--lavender:#7461aa;--rose:#f49c9d;--mint:#72c5a5;--brown:#513442}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;background:#382b39;color:var(--cream)}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible{outline:3px solid #88ecec;outline-offset:3px}#app{position:fixed;inset:0;overflow:hidden;background:#a06641;isolation:isolate}#world{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 45%,transparent 30%,rgba(24,12,30,.19) 100%);pointer-events:none;z-index:1}.hidden{display:none!important}
.hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:14px;pointer-events:none;z-index:4}.hud-left{width:min(260px,39vw);display:flex;flex-direction:column;gap:8px}.energy-panel{padding:10px 14px 12px;border:2px solid rgba(255,244,210,.6);border-radius:17px;background:rgba(58,40,52,.89);box-shadow:0 4px 0 rgba(33,22,30,.28),0 8px 30px rgba(28,18,20,.2)}.energy-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:900;letter-spacing:1.2px}.energy-head strong{font-size:16px;color:#fff}.bolt{font-size:15px;vertical-align:-1px}.energy-track{height:13px;border-radius:20px;background:#392d38;overflow:hidden;border:2px solid #251e27;margin-top:7px}.energy-fill{width:100%;height:100%;border-radius:20px;background:linear-gradient(90deg,#5ecb94,#a8e5b1);transition:width .17s linear,background .2s;box-shadow:inset 0 2px 0 #ffffff30}.energy-fill.warning{background:linear-gradient(90deg,#e7a845,#f9d562)}.energy-fill.danger{background:linear-gradient(90deg,#e65d6b,#f9a259);animation:pulse .75s infinite alternate}.danger-indicator{align-self:flex-start;padding:7px 12px;border-radius:12px;background:rgba(58,40,52,.87);border:1px solid #ffffff66;font-weight:800;font-size:12px;letter-spacing:.1px;box-shadow:0 3px 14px #120b1440}.danger-indicator.close{background:#922e50;border-color:#ffa5ad;animation:pulse .55s infinite alternate}.hud-right{display:flex;align-items:center;gap:8px}.stat-chip,.icon-button{height:43px;background:rgba(58,40,52,.9);border:2px solid #ffeed39c;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 0 #29202a66;color:#fff7dd;font-size:15px;padding:0 13px}.stat-chip span{font-size:19px}.stat-chip b{font-variant-numeric:tabular-nums}.score-chip{min-width:100px}.icon-button{pointer-events:auto;min-width:45px;font-weight:900;font-size:20px}.icon-button:hover{background:#70505d}.toast{position:absolute;z-index:5;top:110px;left:50%;transform:translateX(-50%) translateY(-12px);padding:10px 18px;border:2px solid #fff0c1;border-radius:20px;white-space:nowrap;background:#573b48ed;box-shadow:0 6px 25px #0005;font-size:15px;font-weight:900;opacity:0;transition:transform .3s,opacity .3s;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.action-prompt{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:#fff2cf;color:#644752;padding:10px 18px;border-radius:18px;font-weight:900;z-index:3;box-shadow:0 5px 0 #4d333a55;font-size:12px;letter-spacing:1px}.action-prompt span{font-size:20px;vertical-align:-2px}
.overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;overflow:auto;padding:28px 18px;background:rgba(38,25,39,.65);backdrop-filter:blur(6px)}.start-overlay{background:radial-gradient(ellipse at 50% 37%,rgba(83,47,73,.46),rgba(29,21,39,.82));backdrop-filter:blur(3px)}.start-glow{position:absolute;width:min(750px,94vw);height:min(700px,95vh);background:radial-gradient(ellipse,#e5a15f22 0%,transparent 70%);pointer-events:none}.start-content{width:min(540px,100%);position:relative;text-align:center}.event-pill,.dialog-kicker{display:inline-block;background:#e7b968;color:#54353a;padding:9px 19px;border-radius:100px;border:2px solid #fff3c7;font-weight:900;font-size:11px;letter-spacing:1.7px;box-shadow:0 5px 0 #39273866}.event-sparkle{font-size:15px}.hero-icons{display:flex;align-items:center;justify-content:center;gap:20px;font-size:42px;height:78px;filter:drop-shadow(0 5px 0 #0002)}.hero-icons span:nth-child(2){font-size:24px;transform:translateY(-15px)}h1{margin:-3px 0 3px;line-height:.89;letter-spacing:0.3px;filter:drop-shadow(0 6px 0 #442c43)}h1 span{display:block;font-weight:1000;font-size:clamp(38px,6vw,60px);color:#fff1ce;-webkit-text-stroke:1px #6e4551}h1 strong{display:block;font-weight:1000;font-size:clamp(58px,9vw,100px);color:#ffc96b;-webkit-text-stroke:2px #8d4f4d;letter-spacing:-3px}.start-subtitle{font-weight:900;font-size:clamp(18px,2.7vw,25px);color:#f7dec3;margin:17px 0 6px}.start-description{line-height:1.5;color:#f8e5d9;font-size:14px;max-width:445px;margin:0 auto 20px}.story-strips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 auto 19px}.story-strip{background:#fff1d9e8;color:#5f4050;text-align:left;border-radius:14px;border:2px solid #fff9de;display:flex;gap:9px;align-items:center;padding:12px 9px;box-shadow:0 4px 0 #38233250}.strip-icon{font-size:22px}.story-strip b{display:block;font-size:11px;line-height:1.15}.story-strip small{display:block;font-size:10px;line-height:1.25;margin-top:3px;color:#806471}.big-button{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;border-radius:18px;border:3px solid #ffeaba;color:#643a39;font-size:20px;font-weight:1000;letter-spacing:1px;padding:17px 20px;background:linear-gradient(#ffe39a,#ffba5b);box-shadow:0 7px 0 #bd6748,0 13px 30px #24152255;transition:transform .11s,box-shadow .11s}.big-button span{font-size:27px}.big-button:hover{filter:brightness(1.06);transform:translateY(-2px)}.big-button:active{transform:translateY(5px);box-shadow:0 2px 0 #bd6748}.start-footer{display:flex;justify-content:center;gap:17px;flex-wrap:wrap;margin:20px 0 0;color:#f9e9d6ad;font-weight:700;font-size:11px}
.modal-overlay{background:#2b1a2cc7;backdrop-filter:blur(8px)}.dialog{position:relative;width:min(500px,100%);max-height:min(94vh,850px);overflow-y:auto;overscroll-behavior:contain;padding:25px 26px 28px;background:linear-gradient(160deg,#fff5db,#f7dbb9);border-radius:28px;border:5px solid #fff7e9;color:#563a45;text-align:center;box-shadow:0 11px 0 #9d654f,0 25px 70px #120b1399}.dialog .dialog-kicker{font-size:10px;background:#ead5ff;border:1px solid #d3b5e5;color:#6f4b87;padding:8px 15px}.dialog h2{font-size:clamp(22px,4vw,32px);letter-spacing:-.8px;line-height:1.13;margin:12px 0 8px}.dialog p{line-height:1.5}.discovery-icon{margin:14px auto 3px;font-size:55px;line-height:1;filter:drop-shadow(0 5px 0 #ad7c6455);animation:pop .45s both}.quiz-subline{font-size:12px;color:#846a73;font-weight:700}.quiz-energy{display:inline-flex;align-items:center;gap:5px;font-size:11px;border-radius:18px;background:#d6f3dc;border:1px solid #abd8b7;color:#40724e;font-weight:900;padding:7px 13px;margin:12px 0}.quiz-energy span{font-size:14px}.question-text{font-size:20px;font-weight:900;line-height:1.3;margin:10px auto 18px;max-width:410px}.option-list{display:grid;gap:9px}.option{min-height:53px;display:flex;align-items:center;text-align:left;gap:10px;width:100%;padding:9px 12px;border-radius:15px;background:#fffdfa;border:2px solid #dfbda9;color:#563a45;box-shadow:0 3px 0 #c69d88;font-weight:800;font-size:14px}.option .letter{display:inline-grid;place-items:center;width:29px;min-width:29px;height:29px;border-radius:9px;background:#f2dfce;color:#88646b;font-size:12px}.option:not(:disabled):hover{background:#fff2cf;border-color:#e8a858}.option:disabled{cursor:default}.option.correct{border-color:#6dbf83;background:#e7fae5;color:#317b4a}.option.correct .letter{background:#a5e5a5;color:#25673e}.option.incorrect{border-color:#dd9299;background:#fee9e9;color:#a44955}.option.incorrect .letter{background:#ffc2ca;color:#a44955}.quiz-feedback{padding:12px;border-radius:12px;background:#e0efdb;border:1px solid #a2cba4;color:#47724c;margin-top:12px;font-size:13px;line-height:1.5;font-weight:700}.quiz-feedback.bad{background:#ffead7;border-color:#e6b594;color:#916349}.continue-button{margin-top:16px;padding:12px;font-size:15px}.compact-dialog{max-width:400px}.compact-dialog p{font-size:14px;color:#8a6874;margin-bottom:22px}.settings-row{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:13px;font-weight:800;padding:11px 1px;border-bottom:1px solid #d6bea9}.settings-row:first-of-type{margin-top:20px}.setting-toggle{background:#72bf87;border:2px solid #4b9468;color:#fff;padding:7px 13px;border-radius:10px;font-weight:900;min-width:54px}.setting-toggle.off{background:#ac9c99;border-color:#897c81}.dialog-actions{display:flex;justify-content:space-between;margin-top:15px}.text-button{background:none;color:#7d5969;font-size:13px;font-weight:900;padding:12px}.text-button:hover{text-decoration:underline}.end-dialog{max-width:445px}.end-icon{font-size:58px;margin:-5px 0 5px}.end-dialog h2{margin:10px 0}.big-score{font-size:clamp(45px,10vw,78px);font-weight:1000;color:#b86c43;line-height:1.1;text-shadow:0 3px 0 #fbd59d}.big-score-label{font-size:11px;letter-spacing:2px;font-weight:900;color:#90636a}.record-pill{display:inline-block;padding:7px 12px;border-radius:12px;background:#fff0b6;color:#95652d;font-size:12px;font-weight:900;margin-bottom:8px}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:21px auto}.results-grid>div{border:1px solid #e2bf9e;background:#fffaef;border-radius:13px;padding:11px 8px;display:grid;gap:3px}.results-grid b{font-size:19px}.results-grid span{font-size:11px;color:#956f79;font-weight:800}
.touch-controls{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));z-index:4;pointer-events:none;user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,57px);grid-template-rows:repeat(3,57px);gap:3px;align-items:center;justify-items:center;pointer-events:auto}.pad-btn{height:54px;width:54px;border-radius:17px;background:#fff2d8dc;border:2px solid #fff9e7;color:#5f4255;font-size:19px;font-weight:900;box-shadow:0 4px 0 #3d273b70;touch-action:none;user-select:none;-webkit-user-select:none}.pad-btn.active{background:#ffd179;transform:translateY(3px);box-shadow:0 1px 0 #3d273b70}.pad-up{grid-column:2;grid-row:1}.pad-left{grid-column:1;grid-row:2}.pad-center{grid-column:2;grid-row:2;font-size:24px;opacity:.7}.pad-right{grid-column:3;grid-row:2}.pad-down{grid-column:2;grid-row:3}.touch-tip{text-align:center;font-size:10px;letter-spacing:2px;font-weight:900;text-shadow:0 2px 7px #000;margin-top:4px}.touch-controls.hidden{display:none}.touch-controls:has(.pad-btn.active){opacity:1}@keyframes pulse{from{filter:brightness(1)}to{filter:brightness(1.4)}}@keyframes pop{from{transform:scale(.6) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}
@media(pointer:coarse){.touch-controls:not(.hidden){display:block}.action-prompt{bottom:18px;left:auto;right:20px;transform:none}}
@media(max-width:720px){.hud{left:8px;right:8px;top:max(9px,env(safe-area-inset-top));gap:7px}.hud-left{width:min(176px,40vw)}.energy-panel{padding:7px 10px;border-radius:12px}.energy-head{font-size:9px}.energy-head strong{font-size:13px}.energy-track{height:11px;margin-top:4px}.danger-indicator{font-size:10px;padding:5px 8px}.hud-right{gap:4px}.stat-chip,.icon-button{height:37px;padding:0 8px;font-size:13px;border-radius:11px}.stat-chip span{font-size:15px}.score-chip{min-width:auto}.icon-button{min-width:35px}.start-content{width:min(440px,100%)}.story-strip{flex-direction:column;text-align:center;gap:4px;padding:8px 6px}.story-strip small{font-size:9px}.story-strip b{font-size:10px}.strip-icon{font-size:17px}.start-description{font-size:12px}.hero-icons{height:59px;font-size:33px}.start-subtitle{font-size:18px;margin-top:12px}.big-button{font-size:16px;padding:13px}.start-footer{font-size:10px;gap:8px}.dialog{padding:21px 17px 24px}.dialog h2{font-size:24px}.question-text{font-size:17px}.option{font-size:13px;min-height:47px}}
@media(max-height:700px){.start-overlay{padding:12px 18px}.event-pill{padding:6px 13px;font-size:9px}.hero-icons{height:43px;font-size:27px}.hero-icons span:nth-child(2){font-size:17px}.start-content h1 span{font-size:clamp(28px,5vw,46px)}.start-content h1 strong{font-size:clamp(40px,8vw,73px)}.start-subtitle{margin:10px 0 3px}.start-description{margin-bottom:10px}.story-strips{margin-bottom:11px}.story-strip{padding:7px}.start-footer{margin-top:12px}.dialog{max-height:94vh}}
@media(max-height:520px) and (orientation:landscape){.story-strips{display:none}.start-description{margin-bottom:10px}.hero-icons{height:30px}.event-pill{padding:4px 12px}.start-footer{margin-top:9px}.dialog{padding:12px 20px}.discovery-icon{font-size:26px;margin:2px}.quiz-energy{margin:4px}.dialog h2{font-size:20px;margin:5px}.question-text{font-size:16px;margin:5px auto}.option-list{gap:3px}.option{min-height:36px;padding:5px 10px}}

/* Games integration: compact navigation on title only. */
.games-back{display:inline-block;margin-top:13px;padding:7px 10px;color:#ffe6cf;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}.games-back:hover,.games-back:focus-visible{color:#fff;outline-offset:3px}.quiz-subline{font-size:12px;font-weight:800;line-height:1.4;color:#684b5d}
/* Keep underground motion visible behind the quiz without reducing question contrast. */
#quiz-overlay{background:rgba(36,23,43,.49);backdrop-filter:blur(2px)}
@media(max-height:520px) and (orientation:landscape){.games-back{margin-top:2px;padding:3px 9px;font-size:11px}}
@media(max-width:400px) and (max-height:650px){
 .question-dialog{padding:12px 12px 14px;border-width:3px;max-height:calc(100dvh - 20px)}
 .question-dialog .dialog-kicker{padding:4px 8px}
 .question-dialog .discovery-icon{font-size:30px;margin:5px auto 1px}
 .question-dialog h2{font-size:21px;margin:5px 0 4px}
 .question-dialog .quiz-subline{font-size:10px;line-height:1.3}
 .question-dialog .quiz-energy{padding:4px 9px;margin:6px 0}
 .question-dialog .quiz-energy span{font-size:12px}
 .question-dialog .question-text{font-size:16px;margin:6px auto 10px}
 .question-dialog .option-list{gap:5px}
 .question-dialog .option{min-height:42px;padding:7px 8px;font-size:12.5px;line-height:1.2}
 .question-dialog .quiz-feedback{padding:8px;margin-top:6px;font-size:11px}
 .question-dialog .continue-button{padding:8px;margin-top:9px}
}

/* v2026.10.23.2 — Accessible numbered answers and keyboard selection. */
.question-dialog .option.selected:not(:disabled){background:#ffedc4;border-color:#8255bb;box-shadow:0 0 0 3px rgba(132,78,183,.24),0 3px 0 #c69d88}.question-dialog .option:focus-visible{outline:3px solid #7950ba;outline-offset:2px}.quiz-continue-hint{font-size:12px;font-weight:800;color:#6d4d76;margin:10px 0 0}.quiz-continue-hint.hidden{display:none}@media(max-width:400px) and (max-height:650px){.quiz-continue-hint{font-size:10px;margin:5px 0 0}}
/* Keep feedback and keyboard-return instruction visible on short displays. */
@media(max-width:400px) and (max-height:650px){
 .question-dialog .discovery-icon{font-size:25px;margin:3px auto 1px}
 .question-dialog .quiz-energy{margin:4px 0}
 .question-dialog .continue-button{margin-top:6px;padding:7px}
 .question-dialog .quiz-feedback{padding:7px 8px;margin-top:5px}
 .question-dialog .quiz-continue-hint{margin-top:3px}
}
@media(max-height:520px) and (orientation:landscape){
 .question-dialog{padding:8px 12px 11px;max-height:calc(100dvh - 16px);border-width:3px}
 .question-dialog .discovery-icon,.question-dialog .quiz-energy,.question-dialog .quiz-subline,.question-dialog .dialog-kicker{display:none}
 .question-dialog h2{font-size:16px;margin:2px 0 3px}
 .question-dialog .question-text{font-size:14px;margin:4px auto 6px;line-height:1.2}
 .question-dialog .option-list{gap:3px}
 .question-dialog .option{min-height:31px;padding:3px 8px;font-size:12px}
 .question-dialog .option .letter{height:23px;min-width:23px;width:23px}
 .question-dialog .quiz-feedback{font-size:11px;margin-top:5px;padding:6px;line-height:1.3}
 .question-dialog .continue-button{margin-top:5px;padding:6px;font-size:12px}
 .question-dialog .quiz-continue-hint{font-size:10px;margin-top:2px}
}
