/* A first-adventure scene occupies the viewport: the lab is the world, the dialogue is its HUD. */
.oak-screen { --oak-cream:#fff5d9;--oak-paper:#f0e3bd;--oak-ink:#24434b;--oak-type-color:#8fc1c5;padding:0!important;overflow:hidden!important;isolation:isolate; }
.oak-screen>.box.ui-panel.oak-shell { width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden;background:#0b2935;box-shadow:none; }
.oak-topbar { position:relative;z-index:7;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(28px,env(safe-area-inset-right)) 18px max(28px,env(safe-area-inset-left));background:#0c2835;border-bottom:1px solid #8eaca84d; }
.oak-place { min-width:0; }.oak-brand { display:block;color:#ffe39a;font:700 clamp(23px,2.5vw,31px)/1.05 var(--ui-display); }.oak-location { display:block;margin-top:5px;color:#b9d5d2;font:400 12px/1.4 var(--ui-font); }
.oak-topbar .btn.small { flex:0 0 auto;min-height:44px;font:650 12px/1.2 var(--ui-font);padding:10px 16px; }
.oak-journey { display:flex;list-style:none;gap:22px;margin:0;padding:0;color:#8ea9a9;font:600 11px/1.3 var(--ui-font);counter-reset:oak-step; }
.oak-journey li { display:flex;align-items:center;gap:7px;counter-increment:oak-step;white-space:nowrap; }.oak-journey li::before { content:counter(oak-step);display:grid;place-items:center;width:25px;height:25px;border:1px solid #66838a;border-radius:50%;font-size:10px; }.oak-journey .on { color:#ffe6a2; }.oak-journey .on::before { background:#ffe5a0;color:#203d3d;border-color:#ffe5a0;box-shadow:0 0 0 4px #ffe5a010; }.oak-journey .complete::before { content:'✓';color:#b6ddc8;border-color:#82bca3;background:#214d49; }
.oak-step-mark { display:grid;place-items:center;width:46px;height:36px;flex:0 0 auto;border:1px solid #6e999c;border-radius:8px;color:#c5e5dc;font:700 12px/1 var(--ui-font); }
.oak-body { flex:1;min-height:0;position:relative;overflow:hidden; }
.oak-scene { position:absolute;inset:0;isolation:isolate;overflow:hidden;background:#668b68; }
.oak-scene::before { content:'';position:absolute;inset:-3%;z-index:-2;background:url('../assets/onboarding/oak-lab.webp') center 62%/cover no-repeat;animation:oak-camera-in 2.8s cubic-bezier(.16,1,.3,1) both; }
.oak-scene::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#102b3d22,#102b3d05 45%,#102b3d77),linear-gradient(0deg,#082d34b5,transparent 48%); }
.oak-scene-glow { pointer-events:none;position:absolute;inset:0;background:linear-gradient(115deg,transparent 10%,#ffe7aa26 16%,transparent 22%,#fff9d50c 27%,transparent 30%);mix-blend-mode:screen; }
.oak-scene-kicker { position:absolute;left:4vw;top:28px;color:#fff2c8;font:650 11px/1.4 var(--ui-font);letter-spacing:.08em;text-shadow:0 2px 2px #16373d; }
.oak-character { position:absolute;left:8%;bottom:5%;width:min(41vw,480px);aspect-ratio:1;animation:oak-arrive 1.35s cubic-bezier(.16,1,.3,1) both; }
.oak-professor { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 7px 2px #0b2b3366);animation:oak-breathe 5s 1.4s ease-in-out infinite;transform-origin:50% 90%; }
.oak-character-shadow { position:absolute;left:35%;right:22%;bottom:4%;height:6%;border-radius:50%;background:#0a283733;filter:blur(4px);z-index:-1; }
.oak-reaction { position:absolute;z-index:2;left:54%;top:0;display:grid;place-items:center;width:36px;height:40px;border-radius:12px 12px 12px 3px;background:#fff8dd;color:#24454a;box-shadow:0 4px 0 #132f3f40;font:700 29px/1 var(--ui-display);animation:oak-reaction-in .6s .9s both; }
.oak-companions { position:absolute;bottom:14%;left:2%;width:36%;display:flex;align-items:flex-end;justify-content:space-around;gap:6px; }.oak-companions canvas { width:27%;max-width:112px;height:auto;filter:drop-shadow(0 5px 0 #0f303b44);animation:oak-companion-in .8s .35s both; }.oak-companions canvas:nth-child(2) { animation-delay:.55s; }.oak-companions canvas:nth-child(3) { animation-delay:.75s; }
.oak-scene-label { position:absolute;bottom:20px;left:4vw;max-width:35%;color:#fff2c6;text-shadow:0 2px 2px #12313a;font:700 clamp(19px,2.1vw,28px)/1.1 var(--ui-display); }
.oak-conversation { position:absolute;right:4vw;bottom:5%;width:min(47%,570px);max-height:94%;min-width:0;padding:28px 32px;background:var(--oak-cream);border:2px solid #e2cd93;border-radius:20px 20px 20px 5px;box-shadow:0 7px 0 #173b42aa,0 14px 35px #051f3755,inset 0 0 0 4px #fffaf0;animation:oak-dialog-in .55s .2s both;color:var(--oak-ink); }
.oak-speaker { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;color:#37776f;font:800 13px/1.2 var(--ui-font); }.oak-speaker-light { width:9px;height:9px;flex:0 0 auto;border:2px solid #367063;border-radius:50%;background:#80b998;box-shadow:0 0 0 3px #5ba78714; }.oak-speaker-role { margin-left:auto;color:#6b7b6c;font-size:10px;font-weight:500; }
.oak-conversation h1 { margin:0 0 16px;color:#26464a;font:700 clamp(30px,3.1vw,43px)/1.02 var(--ui-display);text-wrap:balance; }.oak-dialog { margin:0;min-height:7.6em;color:#3b514e;font:400 16px/1.7 var(--ui-font); }.oak-dialog-hint { display:flex;justify-content:space-between;align-items:center;margin:16px 0 0;color:#778470;font:400 10px/1.3 var(--ui-font); }.oak-dialog-hint span { font-size:15px; }.oak-screen[data-speaking=true] .oak-dialog-hint { visibility:hidden; }.oak-screen[data-speaking=true] .oak-speaker-light { background:#4fa585;box-shadow:0 0 0 4px #5ba78720; }
.oak-lesson { position:absolute;top:8%;right:4vw;display:flex;gap:12px;width:min(47%,570px); }.oak-lesson article { display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;padding:15px;background:#102e39ed;border:1px solid #c6d5ae88;border-radius:12px;color:#def1df;box-shadow:0 5px 16px #15363844;animation:oak-dialog-in .5s both; }.oak-lesson-icon { display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid #c4dbb479;background:#456858;border-radius:10px;color:#ffe4a3; }.oak-lesson-icon svg { width:22px;height:22px; }.oak-lesson h3 { margin:0 0 7px;font:700 13px/1.3 var(--ui-font);color:#fff0b9; }.oak-lesson p { margin:0;font:400 11px/1.6 var(--ui-font);color:#d3e8db; }
.oak-footer { flex:0 0 auto;position:relative;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px max(28px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));background:#0c2835;border-top:1px solid #91b2a73d; }.oak-footer>span { max-width:50%;color:#bdd5ce;font:400 12px/1.5 var(--ui-font); }.oak-footer .btn { min-height:48px;padding:10px 24px;font-size:22px; }.oak-footer .btn.gold { margin-left:auto; }.oak-footer .btn.ghost { font:650 13px/1.35 var(--ui-font); }
/* Oak remains present during the questions; only the dialogue choices change. */
.oak-screen[data-phase=question] .oak-conversation { top:50%;bottom:auto;transform:translateY(-50%);animation:none; }.oak-screen[data-phase=question] .oak-scene-label { max-width:30%; }.oak-screen[data-phase=question] .oak-reaction { opacity:0; }.oak-question-count { margin:0 0 8px;color:#6a7c6d;font:700 11px/1.4 var(--ui-font); }.oak-progress { height:5px;background:#d2d6b5;margin:0 0 18px;border-radius:4px;overflow:hidden; }.oak-progress i { display:block;height:100%;background:#599783;transition:width .25s; }.oak-screen .oak-question { margin:0 0 10px;color:#28494b;font:700 clamp(25px,2.5vw,33px)/1.1 var(--ui-display); }.oak-quiz-note { margin:0 0 14px;color:#6a7b69;font:400 11px/1.5 var(--ui-font); }#scr-test .oak-answers { display:flex;flex-direction:column;gap:9px; }#scr-test .oak-answer { display:flex;align-items:center;gap:12px;width:100%;min-height:49px;margin:0;padding:10px 12px;border:1px solid #a6b59a;border-radius:10px;background:#fffdf0;box-shadow:0 2px 0 #d8cbac;text-align:left;color:#2d4b48;cursor:pointer;font:500 13px/1.4 var(--ui-font);transition:background .15s,border-color .15s; }#scr-test .oak-answer:hover { background:#e6efdc;border-color:#5f9a80; }.oak-answer-number { flex:0 0 22px;color:#69927e;font:700 20px/1 var(--ui-display); }
.oak-sr { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
/* The starter catalogue turns pages instead of growing into a long nested scroll. */
.oak-selection-body { flex:1;min-height:0;display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.3fr);gap:clamp(16px,3vw,42px);padding:clamp(16px,3vw,36px);overflow:hidden;background:radial-gradient(ellipse at 16% 35%,#3c6554,#183d48 60%,#102c3c); }
.oak-selection-preview { min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #9bbba97d;border-radius:18px;overflow:hidden;background:#102e3c;box-shadow:0 7px 0 #08273299; }
.oak-preview-stage { flex:1;min-height:100px;max-height:300px;position:relative;isolation:isolate;display:grid;place-items:center;background:linear-gradient(#24564e40,#103c4b33),url('../assets/onboarding/oak-lab.webp') center 65%/cover;border-bottom:1px solid #92b8a45c; }
.oak-preview-stage::after { content:'';position:absolute;z-index:-1;bottom:10%;width:58%;height:13%;border:2px solid #c0dcc4;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--oak-type-color) 70%,#d5e6bb),#608e7b);box-shadow:0 5px 0 #47776b,0 12px 16px #0b28364d; }
#starter-preview { display:block;width:min(95%,280px);height:100%;max-height:280px;object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none;margin:0;image-rendering:pixelated; }.oak-preview-ball { display:grid;place-items:center;color:#d0e6cc;filter:drop-shadow(0 5px 0 #153b4780); }
.oak-preview-copy { flex:0 0 auto;padding:20px 24px; }.oak-preview-label { display:block;margin-bottom:8px;color:#a1c5ba;font:600 10px/1.4 var(--ui-font);letter-spacing:.04em; }.oak-preview-copy h2 { margin:0 0 10px;color:#ffe6a4;font:700 clamp(27px,3.1vw,39px)/1 var(--ui-display);overflow-wrap:anywhere; }.oak-types { display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#c8e5db;font:400 12px/1.4 var(--ui-font); }.oak-types .type { display:inline-block;padding:3px 10px;border:1px solid #ffffff50;border-radius:6px;color:#fff;font:700 11px/1.3 var(--ui-font);text-shadow:0 1px 1px #213a42; }
#oak-starter-description { margin:12px 0 0;color:#cfe3d9;font:400 13px/1.6 var(--ui-font); }.oak-result-move { margin:14px 0 0;padding-top:11px;border-top:1px solid #a4c7b545;color:#add8cc;font:500 11px/1.5 var(--ui-font); }
.oak-selection-advice { display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:8px 18px;background:#31574f;border-top:1px solid #96b99e45; }.oak-selection-advice img { width:58px;height:58px;flex:0 0 auto;object-fit:contain;image-rendering:pixelated; }.oak-selection-advice p { margin:0;color:#e1e8d2;font:400 11px/1.5 var(--ui-font); }
.oak-catalog { min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px; }.oak-catalog-tools { flex:0 0 auto;display:flex;gap:10px; }.oak-catalog .field { min-width:0;min-height:44px;margin:0;background:#0a2a38;color:#e3ede2;border-color:#729d98;font:400 12px/1.3 var(--ui-font); }.oak-catalog-tools input { flex:1;width:0; }.oak-catalog-tools select { width:155px;flex:0 0 auto;cursor:pointer; }
#scr-starters .oak-starter-grid { flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;gap:14px;max-height:none;overflow:visible; }
#scr-starters .oak-starter-card { position:relative;appearance:none;min-width:0;min-height:0;margin:0;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--starter-color) 40%,#567f84);border-radius:14px;background:radial-gradient(ellipse at 50% 34%,color-mix(in srgb,var(--starter-color) 18%,#294f59),#1b3d4d 75%);box-shadow:0 4px 0 #092936;color:#f2f4de;cursor:pointer;transition:background .2s,border-color .2s; }.oak-starter-card::after { content:'';position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--starter-color); }.oak-card-number { align-self:flex-start;color:#a4beb9;font:500 9px/1 var(--ui-font); }.oak-starter-card canvas { display:block;width:100%;height:100%;max-width:140px;max-height:130px;min-height:0;object-fit:contain;flex:1; }.oak-starter-card b { flex:0 0 auto;max-width:100%;margin-top:3px;color:#f5f1db;font:700 15px/1.1 var(--ui-font); }.oak-card-type { display:block;margin-top:5px;color:#b4d3c4;font:400 10px/1.2 var(--ui-font); }
#scr-starters .oak-starter-card.on { border:2px solid #ffe39a;background:radial-gradient(ellipse at 50% 36%,color-mix(in srgb,var(--starter-color) 40%,#4e6753),#36574c 75%);box-shadow:0 4px 0 #9a7939,inset 0 0 0 1px #ffe29a40; }.oak-catalog-pagination { display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:16px; }.oak-catalog-pagination .btn { min-height:36px;min-width:46px;padding:4px 12px;font-size:23px; }.oak-catalog-pagination span { color:#c1dbce;font:500 11px/1.3 var(--ui-font); }.oak-catalog-pagination .btn:disabled { opacity:.35; }.oak-catalog #oak-starter-empty { flex:1;margin:0;display:grid;place-items:center;color:#bdd8c9;font:400 13px/1.6 var(--ui-font);text-align:center; }
/* The reveal uses the entire scene, with Oak's dialogue beside the clearing. */
.oak-reveal-body { flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,64px);padding:clamp(22px,4vw,56px);overflow:hidden;background:linear-gradient(90deg,#092b3380,#0d2b37 70%),url('../assets/encounters/forest-clearing.webp') center/cover; }
#scr-result .oak-reveal-stage.encounter-scene { width:100%;height:100%;min-height:0;max-width:none;max-height:620px;border-radius:20px;border:1px solid #a0c9a65c;box-shadow:0 14px 35px #061e2a50; }
.oak-reveal-professor { position:absolute;left:0;bottom:0;width:160px;height:160px;object-fit:contain;image-rendering:pixelated;opacity:.9; }
.oak-reveal-copy { min-width:0;padding:10px 0; }.oak-reveal-copy .oak-speaker { color:#c6dfc7;margin-bottom:30px; }.oak-reveal-location { width:100%;margin:2px 0 0;color:#9fbdb0;font-size:10px;font-weight:400; }.oak-reveal-copy h2 { margin:0 0 18px;color:#fff1c4;font:700 clamp(33px,4vw,51px)/1.02 var(--ui-display);text-wrap:balance; }.oak-reveal-copy p { color:#c3ddd0;font:400 14px/1.7 var(--ui-font);margin:0 0 20px; }.oak-reveal-copy .btn { min-height:54px;width:100%;font-size:22px;padding:12px 14px; }.oak-reveal-copy .btn:disabled { font:500 13px/1.5 var(--ui-font); }.oak-reveal-copy .oak-preview-label { color:#a3cdb8;font-size:11px;margin-bottom:12px; }
#scr-result #res-name { margin:0 0 16px;color:#ffe69e;font:700 clamp(42px,5vw,67px)/.98 var(--ui-display);overflow-wrap:anywhere; }.oak-reveal-copy .oak-personality { color:#a5cbb6;font:600 11px/1.4 var(--ui-font);margin:0 0 10px; }.oak-reveal-copy #res-text { margin:20px 0 0; }.oak-reveal-copy .oak-result-move { margin:18px 0 0;font-size:12px; }.oak-reveal-copy #oak-preview-note { margin:16px 0 0;padding:10px 12px;border:1px solid #a1bda55c;border-radius:8px;font-size:11px; }.oak-reveal-actions .btn { max-width:320px; }.oak-reveal-footer-copy { margin-right:auto; }
@keyframes oak-camera-in { from { transform:scale(1.09) translateY(7px);filter:brightness(.7); } to { transform:scale(1);filter:brightness(1); } }
@keyframes oak-arrive { from { opacity:0;transform:translateX(-50px) scale(.95); } to { opacity:1;transform:none; } }
@keyframes oak-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.005,1.012); } }
@keyframes oak-reaction-in { from { opacity:0;transform:translateY(12px) scale(.6); } to { opacity:1;transform:none; } }
@keyframes oak-companion-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:none; } }
@keyframes oak-dialog-in { from { opacity:0;scale:.985; } to { opacity:1;scale:1; } }
@keyframes oak-mote { 0%,100% { opacity:0;transform:translateY(12px); } 35%,65% { opacity:.55; } 100% { transform:translateY(-50px); } }
.oak-scene-motes { position:absolute;inset:0;pointer-events:none; }.oak-scene-motes i { position:absolute;left:17%;top:44%;width:3px;height:3px;background:#ffe8af;border-radius:50%;box-shadow:0 0 8px #fff2c9;animation:oak-mote 8s 1s linear infinite; }.oak-scene-motes i:nth-child(2) { left:45%;top:36%;animation-delay:3s; }.oak-scene-motes i:nth-child(3) { left:7%;top:62%;animation-delay:5s; }.oak-scene-motes i:nth-child(4) { left:70%;top:18%;animation-delay:2s; }.oak-scene-motes i:nth-child(5) { left:35%;top:60%;animation-delay:6s; }
@media(max-width:1000px) { .oak-journey { gap:12px; }.oak-journey li { font-size:10px; }.oak-journey li::before { width:22px;height:22px; }.oak-journey li:not(.on) { font-size:0;gap:0; }.oak-conversation { width:49%;right:3vw;padding:24px; }.oak-lesson { width:49%;right:3vw;gap:8px; }.oak-lesson article { padding:12px;gap:7px; }.oak-lesson-icon { width:28px;height:28px;flex-basis:28px; }.oak-lesson p { font-size:10px; }.oak-selection-body { grid-template-columns:minmax(210px,.75fr) minmax(0,1.3fr);gap:20px; }.oak-preview-copy { padding:18px; } }
@media(max-width:1100px) and (orientation:portrait) {
 .oak-topbar { gap:10px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); }.oak-brand { font-size:24px; }.oak-location { font-size:9px;max-width:230px; }.oak-topbar .btn.small { padding:8px 10px;min-height:40px;font-size:10px;max-width:115px; }.oak-journey { display:none; }.oak-step-mark { width:40px;height:32px;font-size:10px; }
 .oak-body { display:flex;flex-direction:column; }.oak-scene { position:relative;flex:1;min-height:155px; }.oak-scene::before { background-position:center 60%; }.oak-scene-kicker { top:12px;left:16px;font-size:9px; }.oak-character { left:auto;right:4%;bottom:0;width:min(64vw,310px);max-height:100%; }.oak-reaction { width:28px;height:31px;top:7%;font-size:24px; }.oak-companions { bottom:13%;left:4%;width:53%; }.oak-companions canvas { max-width:86px; }.oak-scene-label { left:16px;bottom:12px;max-width:48%;font-size:18px; }
 .oak-conversation { position:relative;right:auto;bottom:auto;width:100%;max-height:none;flex:0 0 auto;padding:20px 22px 14px;border-width:2px 0 0;border-radius:0;box-shadow:inset 0 0 0 4px #fffaf0; }.oak-speaker { margin-bottom:12px;font-size:12px; }.oak-speaker-role { font-size:9px; }.oak-conversation h1 { font-size:31px;margin-bottom:12px; }.oak-dialog { min-height:7.4em;font-size:14px;line-height:1.65; }.oak-dialog-hint { margin-top:8px;font-size:9px; }
 .oak-footer { gap:10px;padding:11px max(16px,env(safe-area-inset-right)) max(13px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }.oak-footer>span { font-size:10px;max-width:44%; }.oak-footer .btn { min-height:46px;padding:9px 16px;font-size:20px; }.oak-footer .btn.ghost { font-size:11px;padding-inline:12px; }
 .oak-lesson { top:12px;left:12px;right:auto;width:57%;flex-direction:column;gap:7px; }.oak-lesson article { padding:9px;gap:8px;border-radius:9px;background:#12343aee; }.oak-lesson h3 { font-size:11px;margin-bottom:3px; }.oak-lesson p { font-size:9px;line-height:1.45; }.oak-lesson-icon { width:25px;height:25px;flex-basis:25px;border-radius:7px; }.oak-lesson-icon svg { width:18px;height:18px; }.oak-screen[data-phase=lesson] .oak-companions,.oak-screen[data-phase=lesson] .oak-scene-label,.oak-screen[data-phase=lesson] .oak-scene-kicker { visibility:hidden; }.oak-screen[data-phase=lesson] .oak-character { right:-6%;width:59vw; }
 .oak-screen[data-phase=question] .oak-scene { display:none; }.oak-screen[data-phase=question] .oak-conversation { top:auto;bottom:auto;transform:none;flex:1;display:flex;flex-direction:column;justify-content:center;border:0;padding:20px 24px; }.oak-screen[data-phase=question] .oak-speaker { min-height:45px;padding-right:68px;position:relative; }.oak-screen[data-phase=question] .oak-speaker-role { margin-left:0; }.oak-screen[data-phase=question] .oak-speaker::after { content:'';position:absolute;right:0;bottom:0;width:64px;height:64px;background:url('../assets/onboarding/professor-oak.png') center/contain no-repeat;image-rendering:pixelated; }.oak-screen .oak-question { font-size:28px; }#scr-test .oak-answer { min-height:52px;font-size:13px; }.oak-quiz-note { margin-bottom:16px; }
 .oak-selection-body { display:flex;flex-direction:column;padding:14px;gap:14px; }.oak-selection-preview { flex:0 0 auto;display:grid;grid-template-columns:110px minmax(0,1fr);min-height:134px;max-height:160px;border-radius:13px; }.oak-preview-stage { height:100%;min-height:0;max-height:none;border:0; }.oak-preview-copy { padding:13px; }.oak-preview-label { font-size:8px;margin-bottom:6px; }.oak-preview-copy h2 { font-size:27px;margin-bottom:8px; }.oak-selection-preview .oak-types .type { font-size:9px;padding:2px 7px; }#oak-starter-description { font-size:10px;line-height:1.5;margin-top:8px; }.oak-preview-copy .oak-result-move { font-size:9px;margin-top:8px;padding-top:6px; }.oak-selection-advice { display:none; }.oak-catalog { flex:1;gap:11px; }.oak-catalog-tools { gap:7px; }.oak-catalog .field { min-height:40px;font-size:11px;padding:9px 10px; }.oak-catalog-tools select { width:126px; }#scr-starters .oak-starter-grid { gap:10px; }#scr-starters .oak-starter-card { border-radius:11px;padding:8px 5px; }.oak-card-number { font-size:8px; }.oak-starter-card canvas { max-height:105px; }.oak-starter-card b { font-size:11px; }.oak-card-type { font-size:8px;margin-top:4px; }.oak-catalog-pagination { gap:14px; }.oak-catalog-pagination .btn { min-height:34px; }.oak-catalog-pagination span { font-size:10px; }
 .oak-reveal-body { display:flex;flex-direction:column;gap:0;padding:14px; }.oak-reveal-stage { flex:1; }#scr-result .oak-reveal-stage.encounter-scene { width:100%;height:auto;min-height:130px;max-height:none;border-radius:16px; }.oak-reveal-professor { width:110px;height:110px; }.oak-reveal-copy { flex:0 0 auto;width:100%;padding:18px 10px 4px;text-align:center; }.oak-reveal-copy .oak-speaker { justify-content:center;margin-bottom:12px;font-size:11px; }.oak-reveal-location { display:none; }.oak-reveal-copy .oak-preview-label { font-size:9px;margin-bottom:8px; }.oak-reveal-copy h2 { font-size:32px;margin-bottom:10px; }.oak-reveal-copy p { font-size:12px;line-height:1.55;margin-bottom:14px; }.oak-reveal-copy .btn { min-height:48px;font-size:20px; }.oak-reveal-copy .btn:disabled { font-size:11px; }#scr-result #res-name { font-size:43px;margin-bottom:10px; }.oak-reveal-copy .oak-types { justify-content:center; }.oak-reveal-copy #res-text { margin:12px 0 0; }.oak-reveal-copy .oak-result-move { margin:10px 0 0;padding-top:8px;font-size:10px; }.oak-reveal-copy #oak-preview-note { margin-top:8px;padding:7px 10px;font-size:10px; }.oak-reveal-actions { gap:10px; }.oak-reveal-actions .oak-reveal-footer-copy { display:none; }.oak-reveal-actions .btn { flex:1;max-width:none;padding-inline:9px;font-size:18px; }.oak-reveal-actions .btn.ghost { font-size:10px; }
}
/* Phone landscape keeps its scene and dialogue side by side, with all actions inside the viewport. */
@media(max-height:600px) and (orientation:landscape) {
 .oak-topbar { padding:9px max(16px,env(safe-area-inset-right)) 9px max(16px,env(safe-area-inset-left));gap:12px; }.oak-brand { font-size:23px; }.oak-location { font-size:9px;margin-top:3px; }.oak-topbar .btn.small { min-height:36px;padding:8px 12px;font-size:10px; }.oak-journey { gap:8px; }.oak-journey li { font-size:0;gap:0; }.oak-journey li::before { width:21px;height:21px; }.oak-step-mark { height:29px;width:38px;font-size:10px; }
 .oak-body { display:grid;grid-template-columns:42% 58%; }.oak-scene { position:relative;min-height:0; }.oak-scene::before { background-size:auto 120%;background-position:45% 65%; }.oak-character { width:min(42vw,300px);left:3%;bottom:0;max-height:100%; }.oak-scene-kicker { top:10px;left:14px;font-size:8px;max-width:85%; }.oak-companions { bottom:7%;left:2%;width:52%; }.oak-companions canvas { max-width:63px; }.oak-scene-label { left:14px;bottom:8px;font-size:15px;max-width:52%; }.oak-reaction { width:26px;height:29px;font-size:23px;top:5%; }
 .oak-conversation,.oak-screen[data-phase=question] .oak-conversation { position:relative;inset:auto;width:auto;max-height:none;transform:none;padding:16px 22px;border-width:0 0 0 2px;border-radius:0;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 0 3px #fffaf0;animation:none; }.oak-speaker { margin-bottom:8px;font-size:11px; }.oak-speaker-role { font-size:8px; }.oak-conversation h1 { font-size:29px;margin-bottom:10px; }.oak-dialog { min-height:0;font-size:12px;line-height:1.6; }.oak-dialog-hint { font-size:8px;margin-top:10px; }.oak-footer { padding:8px max(16px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));gap:12px; }.oak-footer>span { font-size:9px; }.oak-footer .btn { min-height:38px;padding:8px 18px;font-size:19px; }.oak-footer .btn.ghost { font-size:10px; }
 .oak-lesson { top:auto;bottom:9px;left:10px;right:10px;width:auto;gap:6px;flex-direction:column; }.oak-lesson article { padding:7px 8px;gap:8px;background:#123039f2; }.oak-lesson h3 { font-size:10px;margin-bottom:2px; }.oak-lesson p { font-size:9px;line-height:1.35; }.oak-lesson-icon { width:26px;height:26px;flex-basis:26px;border-radius:6px; }.oak-lesson-icon svg { width:17px;height:17px; }.oak-screen[data-phase=lesson] .oak-companions,.oak-screen[data-phase=lesson] .oak-scene-label { visibility:hidden; }.oak-screen[data-phase=lesson] .oak-character { opacity:.65;bottom:10%;width:min(30vw,220px);left:10%; }
 .oak-screen[data-phase=question] .oak-speaker { margin-bottom:7px; }.oak-question-count { font-size:9px;margin-bottom:5px; }.oak-progress { margin-bottom:9px;height:4px; }.oak-screen .oak-question { font-size:23px;margin-bottom:7px; }.oak-quiz-note { display:none; }#scr-test .oak-answers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }#scr-test .oak-answer { min-height:48px;padding:8px 10px;font-size:11px;gap:8px;border-radius:8px;text-shadow:none; }.oak-answer-number { font-size:16px;flex-basis:18px; }
 .oak-selection-body { grid-template-columns:minmax(180px,.75fr) minmax(0,1.3fr);gap:14px;padding:12px 16px; }.oak-selection-preview { display:grid;grid-template-columns:92px minmax(0,1fr);border-radius:12px; }.oak-preview-stage { height:100%;max-height:none;min-height:0; }.oak-preview-copy { padding:12px 10px;align-self:center; }.oak-preview-label { font-size:8px;margin-bottom:6px; }.oak-preview-copy h2 { font-size:25px;margin-bottom:8px; }.oak-selection-preview .oak-types .type { font-size:8px;padding:2px 6px; }#oak-starter-description { font-size:10px;line-height:1.45;margin-top:8px; }.oak-preview-copy .oak-result-move { font-size:9px;margin-top:8px;padding-top:7px; }.oak-selection-advice { display:none; }.oak-catalog { gap:8px; }.oak-catalog-tools { gap:7px; }.oak-catalog .field { min-height:34px;padding:6px 9px;font-size:10px; }.oak-catalog-tools select { width:120px; }#scr-starters .oak-starter-grid { gap:8px; }#scr-starters .oak-starter-card { padding:5px;border-radius:9px; }.oak-card-number { font-size:7px; }.oak-starter-card canvas { max-height:88px; }.oak-starter-card b { font-size:10px;margin-top:0; }.oak-card-type { display:none; }.oak-catalog-pagination .btn { min-height:30px;padding:2px 10px;font-size:20px; }.oak-catalog-pagination span { font-size:9px; }
 .oak-reveal-body { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;padding:12px 22px; }#scr-result .oak-reveal-stage.encounter-scene { width:100%;height:100%;min-height:0;max-height:none;border-radius:13px; }.oak-reveal-professor { width:100px;height:100px; }.oak-reveal-copy { padding:0; }.oak-reveal-copy .oak-speaker { font-size:10px;margin-bottom:10px; }.oak-reveal-location { display:none; }.oak-reveal-copy .oak-preview-label { font-size:9px;margin-bottom:6px; }.oak-reveal-copy h2 { font-size:29px;margin-bottom:9px; }.oak-reveal-copy p { font-size:11px;line-height:1.5;margin-bottom:10px; }.oak-reveal-copy .btn { min-height:40px;font-size:18px;padding:8px 12px; }.oak-reveal-copy .btn:disabled { font-size:10px; }#scr-result #res-name { font-size:39px;margin-bottom:10px; }.oak-reveal-copy .oak-personality { font-size:9px;margin-bottom:6px; }.oak-reveal-copy #res-text { margin-top:10px; }.oak-reveal-copy .oak-result-move { margin-top:8px;padding-top:6px;font-size:10px; }.oak-reveal-copy #oak-preview-note { font-size:9px;padding:6px 9px;margin-top:7px; }.oak-reveal-actions .btn { font-size:18px; }.oak-reveal-actions .btn.ghost { font-size:10px; }.oak-reveal-footer-copy { display:none; }
}
@media(min-width:701px) and (orientation:portrait) { .oak-topbar { padding:18px 28px; }.oak-brand { font-size:31px; }.oak-location { font-size:12px;max-width:none; }.oak-journey { display:flex; }.oak-journey li { font-size:11px;gap:7px; }.oak-topbar .btn.small { max-width:none;font-size:12px; }.oak-character { width:min(57vw,440px);right:10%; }.oak-companions { width:47%;left:7%; }.oak-companions canvas { max-width:130px; }.oak-scene-kicker { left:28px;top:24px;font-size:12px; }.oak-scene-label { left:28px;bottom:22px;font-size:26px; }.oak-conversation { padding:28px 36px 22px; }.oak-conversation h1 { font-size:40px; }.oak-dialog { min-height:5.2em;font-size:17px; }.oak-speaker { font-size:14px; }.oak-speaker-role { font-size:11px; }.oak-lesson { left:24px;top:24px;width:48%;gap:12px; }.oak-lesson article { padding:15px;gap:12px; }.oak-lesson h3 { font-size:14px; }.oak-lesson p { font-size:12px; }.oak-lesson-icon { width:36px;height:36px;flex-basis:36px; }.oak-screen[data-phase=lesson] .oak-character { right:0;width:56vw; }.oak-footer { padding:16px 28px 20px; }.oak-footer>span { font-size:12px; }.oak-footer .btn { min-height:52px;font-size:24px; }.oak-footer .btn.ghost { font-size:13px; }.oak-selection-body { padding:24px;gap:20px; }.oak-selection-preview { max-height:200px;min-height:180px;grid-template-columns:180px minmax(0,1fr); }.oak-preview-copy { padding:22px; }.oak-preview-label { font-size:11px; }.oak-preview-copy h2 { font-size:38px; }#oak-starter-description { font-size:13px; }.oak-preview-copy .oak-result-move { font-size:11px; }.oak-catalog { gap:18px; }.oak-catalog .field { min-height:48px;font-size:13px; }.oak-catalog-tools select { width:180px; }#scr-starters .oak-starter-grid { gap:18px; }.oak-starter-card canvas { max-width:190px;max-height:180px; }.oak-starter-card b { font-size:17px; }.oak-card-number { font-size:10px; }.oak-card-type { font-size:11px; }.oak-catalog-pagination span { font-size:12px; }.oak-reveal-body { padding:24px; }.oak-reveal-copy { padding:24px 35px 5px; }.oak-reveal-copy h2 { font-size:42px; }.oak-reveal-copy p { font-size:15px; }#scr-result #res-name { font-size:57px; }.oak-reveal-copy .oak-result-move { font-size:12px; }.oak-reveal-professor { width:180px;height:180px; } }
@media(max-width:380px) and (orientation:portrait) { .oak-brand { font-size:22px; }.oak-topbar { padding:10px 12px; }.oak-location { font-size:8px;max-width:190px; }.oak-topbar .btn.small { max-width:98px;font-size:9px;padding:7px 9px; }.oak-conversation { padding:17px 18px 12px; }.oak-speaker-role { display:none; }.oak-conversation h1 { font-size:28px; }.oak-dialog { font-size:13px;line-height:1.6;min-height:7.8em; }.oak-footer { padding-inline:12px; }.oak-footer .btn { font-size:18px;padding-inline:12px; }.oak-footer>span { font-size:9px; }.oak-selection-body { padding:10px;gap:10px; }.oak-selection-preview { min-height:122px;grid-template-columns:90px minmax(0,1fr); }.oak-preview-copy { padding:10px; }.oak-preview-copy h2 { font-size:24px; }#oak-starter-description { font-size:9px; }.oak-preview-copy .oak-result-move { display:none; }.oak-catalog-tools select { width:112px; }.oak-catalog .field { min-height:36px;font-size:10px; }.oak-starter-card b { font-size:10px; }.oak-card-type { display:none; }.oak-card-number { font-size:7px; }.oak-reveal-copy h2 { font-size:29px; }.oak-reveal-copy { padding:14px 6px 2px; }.oak-reveal-copy p { font-size:11px; }#scr-result #res-name { font-size:39px; } }
@media(max-height:680px) and (orientation:portrait) { .oak-scene { min-height:140px; }.oak-conversation { padding-block:16px 12px; }.oak-conversation h1 { margin-bottom:10px; }.oak-dialog { min-height:7em; }.oak-dialog-hint { display:none; }.oak-speaker { margin-bottom:9px; }.oak-selection-preview { max-height:140px; }.oak-preview-copy { padding-block:10px; }.oak-preview-copy .oak-result-move { display:none; }.oak-catalog { gap:8px; }.oak-starter-card canvas { max-height:84px; }.oak-card-type { display:none; }.oak-reveal-copy .oak-preview-label { display:none; }.oak-reveal-copy .oak-speaker { margin-bottom:9px; }.oak-reveal-copy h2 { font-size:30px; }.oak-reveal-copy .oak-result-move { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .oak-screen *,.oak-screen *::before,.oak-screen *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }.oak-scene-motes { display:none; } }
/* Standalone installs retain the top inset when the browser toolbar disappears. */
.oak-topbar { padding-top:max(var(--oak-top-pad,18px),var(--ui-safe-top,0px)); }
@media(max-width:1100px) and (orientation:portrait) { .oak-topbar { --oak-top-pad:12px; } }
@media(min-width:701px) and (orientation:portrait) { .oak-topbar { --oak-top-pad:18px; } }
@media(max-height:600px) and (orientation:landscape) { .oak-topbar { --oak-top-pad:9px; } }
@media(max-width:380px) and (orientation:portrait) { .oak-topbar { --oak-top-pad:10px; } }

/* Match the native ID-scoped test rules, so the compact quiz truly controls its target sizes. */
#scr-test .oak-answer { text-shadow:none; }
#scr-test .oak-answer::before { content:none; }
@media(max-height:600px) and (orientation:landscape) {
 #scr-test[data-phase=question] .oak-body { grid-template-columns:34% 66%; }
 #scr-test[data-phase=question] .oak-conversation { min-height:0;padding:12px 18px; }
 #scr-test[data-phase=question] .oak-speaker { margin-bottom:7px; }
 #scr-test .oak-answers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
 #scr-test .oak-answer { min-height:48px;padding:8px 10px;font-size:11px;line-height:1.4; }
 #scr-test .oak-question { font-size:23px;margin-bottom:10px; }
}