/* Companion playroom, new palettes and compact learning layouts. */
[data-theme=ocean]{--ink:#31576a;--muted:#6f8795;--green:#397e9c;--green-dark:#286079;--mint:#e2f1f5;--surface:#fcfefe;--canvas:#eff7fa;--border:#d7e8ef;--map:#dceff5;--skin-glow:#c8e9f0}
[data-theme=sakura]{--ink:#654952;--muted:#997a86;--green:#ac647e;--green-dark:#86495f;--mint:#f9e9ef;--surface:#fffafc;--canvas:#fcf3f5;--border:#efdae2;--map:#f6e4ec;--skin-glow:#f7cbdc}
[data-theme=lavender]{--ink:#514b71;--muted:#87809d;--green:#8071ad;--green-dark:#5e5285;--mint:#eeebf9;--surface:#fdfbff;--canvas:#f4f1fa;--border:#e4def0;--map:#eae4f6;--skin-glow:#dbd0f4}
[data-theme=peach]{--ink:#705143;--muted:#9c8073;--green:#b67554;--green-dark:#8f563a;--mint:#fbecdf;--surface:#fffcf7;--canvas:#fcf4eb;--border:#efddcb;--map:#f9e9d4;--skin-glow:#f8d4b5}
.app-shell[data-theme]{color:var(--ink)}
.app-shell:is([data-theme=ocean],[data-theme=sakura],[data-theme=lavender],[data-theme=peach]) .button.primary{background:linear-gradient(145deg,var(--green),var(--green-dark));border-color:var(--green-dark);box-shadow:inset 0 2px 0 #ffffff40,0 4px 0 var(--green-dark),0 8px 15px #46364f19}
.app-shell:is([data-theme=ocean],[data-theme=sakura],[data-theme=lavender],[data-theme=peach]) :is(.sidebar nav button.active,.chapter-card.selected,.answer-option.selected,.type-chip){background:var(--mint);color:var(--green-dark);border-color:var(--green)}
.app-shell:is([data-theme=ocean],[data-theme=sakura],[data-theme=lavender],[data-theme=peach]) :is(.question-prompt,.map-top h2,.brand,.companion-bubble strong){color:var(--ink)}
.app-shell:is([data-theme=ocean],[data-theme=sakura],[data-theme=lavender],[data-theme=peach]) .world-map{background:radial-gradient(ellipse at 70% 0,var(--skin-glow),transparent 65%),var(--map);border-color:var(--border)}
.app-shell:is([data-theme=ocean],[data-theme=sakura],[data-theme=lavender],[data-theme=peach]) .question-card{border-color:var(--border)}
.theme-picker{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.theme-picker>button{position:relative;overflow:hidden;border-top:5px solid var(--swatch,#a9c598)}
.theme-picker>button:nth-child(2){--swatch:#9b91bf}.theme-picker>button:nth-child(3){--swatch:#d2ae82}.theme-picker>button:nth-child(4){--swatch:#83c7da}.theme-picker>button:nth-child(5){--swatch:#e9afc5}.theme-picker>button:nth-child(6){--swatch:#b8a1df}.theme-picker>button:nth-child(7){--swatch:#efb58b}
.question-actions .hint-button{font-size:14px;font-weight:700;min-height:46px;padding:11px 15px;background:#fff1cb;border:1.5px solid #ce9c36;border-radius:12px;color:#775213;box-shadow:0 3px 0 #e4c786;gap:8px}
.question-actions .hint-button span{color:#805b22;background:#fffaf0;border-radius:7px;padding:4px 6px;font-size:11px;margin-left:0}
.question-actions .hint-button:hover{background:#ffe7a5;transform:translateY(-2px)}
.companion-touch{animation:companion-drift 8s ease-in-out infinite}
.companion-touch:hover,.companion-touch:focus-visible{animation-play-state:paused}
.companion-name{min-height:38px;cursor:pointer}.companion-name:hover,.mobile-companion-name:hover{color:var(--green);background:var(--mint)}
.mobile-companion-name{font-weight:700;font-size:12px;padding:5px 0;min-height:32px;text-align:left}
@keyframes companion-drift{0%,100%{translate:0 0}25%{translate:8px -7px}50%{translate:-5px -11px}75%{translate:-8px 3px}}
.camp-scene-link{font:inherit;line-height:1.5;color:var(--green-dark);border-radius:14px;padding:10px 16px;background:var(--mint);border:1px dashed var(--green);width:100%}
.camp-scene-link:hover{box-shadow:0 4px 14px #57634320;translate:0 -2px}.camp-scene-link small{display:block;font-size:12px;font-weight:500;margin-top:6px}
.mini-quota{display:block;margin-top:12px;font-size:11px;line-height:1.6;color:var(--ink)}
.pet-backdrop{z-index:100}.pet-modal{width:min(880px,100%);max-width:880px;padding:27px 30px 24px;overflow:auto;background:var(--surface)}
.pet-room-heading{padding-right:30px}.pet-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--green)}
.pet-room-heading h2{font-size:25px;line-height:1.4;margin:9px 0}.pet-room-heading p{font-size:12px;line-height:1.8;color:var(--muted)}.pet-mobile-break{display:none}
.pet-playground{height:clamp(230px,42dvh,390px);position:relative;isolation:isolate;overflow:hidden;border-radius:22px;margin:20px 0 0;background:linear-gradient(#cfe9f4 0%,#e7f4f9 60%,#fff5df);border:1px solid #d7e9ec}
.pet-playground.scene-hello{background:linear-gradient(145deg,var(--mint),#fff3df)}
.pet-sun{position:absolute;width:63px;height:63px;border-radius:50%;background:#ffe6a0;top:25px;right:14%;box-shadow:0 0 0 13px #fff5c850,0 0 55px #fff2be}
.pet-cloud{position:absolute;width:135px;height:32px;border-radius:50px;background:#ffffffcc;top:28%;left:11%;animation:play-cloud 14s ease-in-out infinite}
.pet-cloud:before,.pet-cloud:after{content:'';position:absolute;width:57px;height:57px;border-radius:50%;background:inherit;bottom:0;left:19px}.pet-cloud:after{width:72px;height:72px;left:52px}
.cloud-near{top:48%;left:76%;scale:.7;animation-delay:-7s}.cloud-far{scale:.7;opacity:.8}
.pet-horizon{position:absolute;border-radius:50%;width:110%;height:40%;left:-5%;bottom:-6%;background:#c4e0e8;opacity:.5}
.pet-cloud-floor{position:absolute;width:125%;height:39%;left:-12%;bottom:-10%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0,#fff 40%,#f2f5f9 80%);box-shadow:0 -14px 0 #ffffff70}
.pet-position{position:absolute;width:clamp(140px,30%,235px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:2}
.pet-wander{width:100%;height:100%}.pet-actor{position:relative;display:block;width:100%;height:100%;padding:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:40%;filter:drop-shadow(0 15px 7px #415d6c18)}
.pet-actor.is-dragging{cursor:grabbing}.pet-actor .island-art{width:100%;height:100%;pointer-events:none;filter:none;transform:none!important}
.pet-only .floating-land{animation:none}.pet-only .island-ground-shadow,.pet-only .floating-land>:not(.pet-habitat){display:none}
.pet-only:not(.theme-mushroom):not(.theme-party) .pet-habitat>:not(.little-creature):not(.flying-bee){display:none}
.pet-only :is(.little-creature,.flying-bee){animation:pet-breathe 3s ease-in-out infinite}
.pet-only.mood-running :is(.little-creature,.flying-bee){animation:pet-jog .45s ease-in-out infinite}.pet-only.mood-running .dino-feet{animation:pet-feet .24s ease-in-out infinite;transform-box:fill-box;transform-origin:center top}
.is-running .pet-wander{animation:pet-wander 5s ease-in-out infinite}.is-running .pet-only:is(.theme-mushroom,.theme-party) .pet-habitat{animation:pet-jog .6s ease-in-out infinite}
.pet-actor.reaction-jump{animation:pet-jump .65s ease-in-out}.pet-actor.reaction-happy{animation:pet-jump .55s ease-in-out}.pet-actor.reaction-soothed{rotate:-5deg}
.pet-hearts{position:absolute;top:-12px;left:15%;right:15%;color:#d7869f;font-size:35px;word-spacing:15px;animation:pet-hearts 1.7s ease-out}
.pet-scene-label{position:absolute;bottom:17px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;color:#6c8894}
.pet-dialogue{text-align:center;font-size:14px;font-weight:600;line-height:1.6;min-height:42px;padding:12px 0 5px}
.pet-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 18px}.pet-controls .button{min-height:42px;padding:10px 17px;font-size:13px}
.pet-room-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--border);padding-top:16px}.pet-room-footer>span{font-size:11px;line-height:1.7;color:var(--muted)}
.is-paused *{animation-play-state:paused!important}
@keyframes pet-breathe{50%{translate:0 -3px}}@keyframes pet-jog{50%{translate:0 -9px;rotate:3deg}}
@keyframes pet-feet{50%{transform:rotate(-12deg)}}@keyframes pet-wander{0%,100%{translate:-20px 0}50%{translate:20px 0}}
@keyframes pet-jump{45%{translate:0 -35px;rotate:5deg}}@keyframes pet-hearts{0%{opacity:0;translate:0 10px}30%{opacity:1}100%{opacity:0;translate:0 -30px}}
@keyframes play-cloud{50%{translate:35px 0}}
/* Fit common laptop heights while retaining natural scrolling for long questions. */
@media(min-width:1021px) and (max-height:900px){
  .is-map .topbar{height:62px;flex-shrink:0}.is-map main{padding:18px 28px 12px}.is-map .page-heading{margin-bottom:17px}.is-map .page-heading h1{font-size:24px;margin:6px 0}
  .is-map .map-top{padding:20px 23px 0}.is-map .map-top h2{font-size:20px;margin:8px 0 5px}.is-map .map-sky{height:clamp(230px,calc(100dvh - 485px),370px)}
  .is-map .island-point{width:25%;max-width:195px}.is-map .island-position-3{width:22%;top:30%}.is-map .island-position-1{top:33%}
  .is-map .chapter-section{margin-top:16px}.is-map .section-title{margin-bottom:10px}.is-map .chapter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .is-map .chapter-card{padding:10px 8px;gap:6px}.is-map .chapter-icon{font-size:24px;width:27px}.is-map .chapter-card strong{font-size:10px;white-space:normal}.is-map .page-footer{display:none}
  .is-map .adventure-layout{gap:20px;grid-template-columns:minmax(0,1fr) 240px}.is-map .journey-card,.is-map .badge-preview{padding:20px}
}
@media(min-width:1021px){
  .is-playing .topbar{height:62px;flex-shrink:0}.is-playing main{padding:20px 28px 10px}.is-playing .page-footer{display:none}
  .is-playing .game-heading{margin-bottom:14px}.is-playing .game-layout{gap:26px;grid-template-columns:minmax(0,1fr) 225px;padding-top:0}
  .is-playing .checkpoint-row{margin:10px 0 16px}.is-playing .question-card{padding:23px 25px}.is-playing .question-card>h2{margin:18px 0 10px}
  .is-playing .question-prompt{margin:17px 0 22px}.is-playing .answer-grid{gap:11px;margin:18px 0}.is-playing .answer-option{min-height:58px;padding:13px}
  .is-playing .question-actions{margin-top:20px;padding-top:17px}.is-playing .game-footnote{margin-top:13px}.is-playing .game-companion{padding-top:36px}
}
@media(min-width:1021px) and (max-height:820px){
  .sidebar{padding-top:20px}.sidebar .brand{margin-bottom:23px}.sidebar nav{gap:5px}.sidebar-bottom{padding-top:10px}.buddy-card{padding:12px 8px;margin-bottom:8px}
  .is-playing main{padding-top:13px}.is-playing .game-heading h2{font-size:20px}.is-playing .game-heading{margin-bottom:10px}
  .is-playing .question-card{padding:18px 22px}.is-playing .question-card>h2{margin:13px 0 8px;font-size:18px}.is-playing .question-prompt{font-size:27px;margin:13px 0 17px}
  .is-playing .answer-option{min-height:51px;padding:10px 13px}.is-playing .answer-grid{margin:13px 0;gap:10px}.is-playing .question-actions{margin-top:14px;padding-top:13px}
  .is-playing .feedback{margin-top:13px;padding:11px 13px}.is-playing .listen-orb{width:65px;height:65px;margin:12px auto}.is-playing .game-footnote{display:none}
  .is-playing .break-card{padding:20px}.is-playing .break-card>h2{margin:12px 0}.is-playing .checkpoint-loot{margin-top:16px;padding-top:14px}.is-playing .break-card>p{margin:10px 0}
  .is-playing .companion-stage{min-height:240px}.is-playing .companion-bubble{margin-top:0}
}
@media(min-width:1021px) and (max-height:690px){
  .is-playing .topbar{height:52px}.is-playing main{padding-top:10px}.is-playing .checkpoint-row{margin:7px 0 11px}.is-playing .question-card{padding:15px 20px}
  .is-playing .question-prompt{margin:10px 0 13px;font-size:25px}.is-playing .question-card>h2{margin:10px 0 6px}.is-playing .answer-option{min-height:47px;padding:8px 12px}
  .is-playing .question-actions{margin-top:11px;padding-top:10px}.is-playing .answer-controls{gap:10px}.is-playing .feedback small{margin-top:3px}
}
@media(min-width:761px) and (max-width:1020px){
  .is-playing main{padding:20px 28px 12px}.is-playing .topbar{height:64px}.is-playing .mobile-companion{margin-bottom:12px}.is-playing .game-heading{margin-bottom:13px}
  .is-playing .question-card{padding:22px 25px}.is-playing .page-footer{display:none}.is-playing .checkpoint-row{margin:12px 0 18px}
}
@media(max-width:760px){
  .pet-modal{padding:22px 16px 18px;border-radius:22px}.pet-room-heading h2{font-size:20px}.pet-room-heading p{font-size:11px}.pet-eyebrow{font-size:8px;letter-spacing:1px}
  .pet-mobile-break{display:block}.pet-playground{margin-top:14px;height:clamp(220px,35dvh,340px)}.pet-dialogue{font-size:12px;min-height:47px}
  .pet-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.pet-controls .button{padding:10px;font-size:12px}
  .pet-room-footer>span{max-width:47%;font-size:10px}.pet-room-footer .button{padding:10px 14px;font-size:12px}
  .is-playing main{padding-top:17px}.is-playing .game-heading{margin-bottom:16px}.is-playing .page-footer{display:none}.theme-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){.question-actions .hint-button{font-size:13px;min-height:44px;padding:10px 13px}.camp-scene-link{font-size:18px;padding:10px}.mini-quota{font-size:10px}.pet-position{width:140px}}
@media(max-height:600px) and (orientation:landscape){.pet-modal{padding:18px 22px}.pet-playground{height:210px;margin-top:10px}.pet-room-heading h2{font-size:20px;margin:5px 0}.pet-controls{display:flex;margin:4px 0 10px}.pet-room-footer{padding-top:10px}}
@media(prefers-reduced-motion:reduce){.companion-touch,.pet-playground *{animation:none!important;transition:none!important}}