/* Owl lives on the Glacier casing, not inside the child's word or map. */
.owl-companion {
 --owl-size:150px;
 display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:start;
 position:relative; min-width:0; gap:4px; background:none; padding:8px 0 0;
 color:#214a73; pointer-events:none;
}
.owl-companion .owl-speech {
 position:relative; margin:0; padding:12px 16px; width:100%; min-width:0;
 font-size:16px; line-height:1.35; font-weight:650; text-align:center;
 color:#214a73; background:#f3fbff; border:1px solid #789caf; border-radius:18px;
 box-shadow:0 3px 0 #567a8d30; overflow-wrap:anywhere;
}
.owl-companion .owl-speech::after {
 content:''; position:absolute; width:14px; height:14px; left:calc(50% - 7px); bottom:-8px;
 background:#f3fbff; border-right:1px solid #789caf; border-bottom:1px solid #789caf;
 transform:rotate(45deg); border-radius:0 0 3px 0;
}
.owl-perch { width:var(--owl-size); height:calc(var(--owl-size)*1.08); position:relative; }
.owl-companion .owl { display:block; width:100%; height:100%; margin:0; transform-origin:50% 85%; }
.owl-companion .owl-speech:empty { visibility:hidden; }
.play:not(.handheld) .guide-rail { min-width:0; display:grid; align-content:start; gap:14px; }
.play:not(.handheld) .guide-rail .panel { margin:0; }
.play:not(.handheld) .owl-companion { --owl-size:170px; }
.test:not(.handheld) > .owl-companion { grid-area:guide; width:260px; --owl-size:170px; justify-self:start; }

/* Compact composition: speech above-left, Owl perched at its lower right. */
.handheld > .owl-companion {
 grid-area:companion; --owl-size:104px; grid-template-columns:minmax(0,1fr) var(--owl-size);
 align-items:start; align-content:center; gap:8px; padding:0; min-height:0; align-self:stretch;
}
.handheld > .owl-companion .owl-perch { align-self:end; }
.handheld > .owl-companion .owl-speech { align-self:start; margin-top:4px; font-size:15px; padding:10px 12px; }
.handheld > .owl-companion .owl-speech::after { left:auto; right:8px; }
.play.handheld .lcd { grid-template-rows:24px auto minmax(0,1fr); }
.play.handheld .viewfinder { border-radius:0 0 9px 9px; }
.test.handheld .test-lcd { grid-template-rows:30px minmax(0,1fr); }
.test.handheld .test-display { border-radius:9px; }

@media(orientation:portrait) {
 .play.handheld:not(.lenny):not(.pad-hidden),.play.handheld.lenny:not(.pad-hidden) {
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,1fr) 128px 176px;
  grid-template-areas:'lcd lcd' 'companion companion' 'move hear';
 }
 .play.handheld.lenny:not(.pad-hidden) { grid-template-columns:216px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 128px 224px; }
 .play.handheld > .owl-companion { --owl-size:116px; }
 .play.handheld .console-signature { display:none; }
 .play.handheld.lenny .console-utility { position:absolute; bottom:max(12px,env(safe-area-inset-bottom)); right:max(12px,env(safe-area-inset-right)); width:84px; padding:0; }
 .play.handheld.pad-hidden { grid-template-rows:minmax(0,1fr) 110px 90px; grid-template-areas:'lcd lcd' 'companion companion' 'utility hear'; }
 .test.handheld { grid-template-rows:minmax(0,1fr) 120px auto 56px; grid-template-areas:'lcd lcd' 'companion companion' 'keys keys' 'back hear'; align-content:stretch; gap:8px 12px; }
 .test.handheld .console-signature { display:none; }
 .test.handheld > .owl-companion { --owl-size:106px; }
}
@media(orientation:portrait) and (max-width:600px) {
 .play.handheld:not(.lenny):not(.pad-hidden) { grid-template-rows:minmax(0,1fr) 88px 152px; }
 .play.handheld.lenny:not(.pad-hidden) { grid-template-rows:minmax(0,1fr) 88px 224px; }
 .play.handheld.pad-hidden { grid-template-rows:minmax(0,1fr) 88px 90px; }
 .handheld > .owl-companion,.play.handheld > .owl-companion,.test.handheld > .owl-companion { --owl-size:76px; }
 .handheld > .owl-companion .owl-speech { font-size:14px; padding:8px 10px; }
 .play.handheld .lcd { grid-template-rows:22px auto minmax(0,1fr); }
 .test.handheld { grid-template-rows:minmax(0,1fr) 88px auto 56px; }
 .test.handheld .test-lcd { grid-template-rows:26px minmax(0,1fr); }
}
@media(orientation:landscape) {
 .play.handheld:not(.pad-hidden),.play.handheld.lenny:not(.pad-hidden) {
  grid-template-rows:minmax(0,1fr) 128px;
  grid-template-areas:'move lcd hear' 'signature companion utility';
 }
 .play.handheld.pad-hidden { grid-template-rows:minmax(0,1fr) 128px; grid-template-areas:'lcd hear' 'companion utility'; }
 .play.handheld > .owl-companion { --owl-size:112px; }
 .test.handheld { grid-template-columns:172px minmax(0,1fr) 64px; grid-template-rows:minmax(0,420px) auto 48px; grid-template-areas:'companion lcd lcd' 'keys keys keys' 'back back hear'; gap:12px; }
 .test.handheld > .owl-companion { --owl-size:130px; display:grid; grid-template-columns:1fr; align-self:center; }
 .test.handheld > .owl-companion .owl-speech { font-size:16px; }
 .test.handheld > .owl-companion .owl-speech::after { right:calc(50% - 7px); }
 .test.handheld .console-signature { display:none; }
 .test.handheld .test-exit { display:flex; flex-direction:row; align-self:center; justify-self:start; gap:12px; }
 .test.handheld .test-speak { align-self:center; width:48px; height:48px; }
}
@media(orientation:landscape) and (max-height:600px) {
 .play.handheld:not(.pad-hidden),.play.handheld.lenny:not(.pad-hidden),.play.handheld.pad-hidden { grid-template-rows:minmax(0,1fr) 84px; }
 .play.handheld > .owl-companion { --owl-size:72px; }
 .play.handheld > .owl-companion .owl-speech { font-size:13px; padding:7px 9px; }
 .play.handheld .lcd,.play.handheld.lenny .lcd { grid-template-rows:20px auto minmax(0,1fr); }
 .test.handheld { grid-template-columns:118px minmax(0,1fr) 48px; grid-template-rows:minmax(0,1fr) auto 44px; gap:6px 8px; }
 .test.handheld > .owl-companion { --owl-size:66px; gap:0; padding:0; }
 .test.handheld > .owl-companion .owl-speech { font-size:13px; padding:7px 8px; margin:0; }
 .test.handheld .test-lcd { grid-template-rows:22px minmax(0,1fr); }
 .test.handheld .test-exit .btn { min-height:44px; }
}
@media(max-width:999px) {
 .play:not(.handheld) .guide-rail { grid-template-columns:minmax(0,1fr) 180px; align-items:start; gap:12px; }
 .play:not(.handheld) .owl-companion { --owl-size:90px; }
}
@media(prefers-reduced-motion:no-preference) {
 .owl-companion[data-reaction=listen] .owl-eyes { animation:owl-blink .65s ease 1; transform-box:fill-box; transform-origin:center; }
 .owl-companion[data-reaction=reassure] .owl { animation:owl-tilt .8s ease 1; }
 .owl-companion[data-reaction=happy] .owl-wing-left { animation:owl-wing-left .7s ease 1; transform-box:fill-box; transform-origin:80% 0; }
 .owl-companion[data-reaction=happy] .owl-wing-right { animation:owl-wing-right .7s ease 1; transform-box:fill-box; transform-origin:20% 0; }
 @keyframes owl-blink { 0%,35%,65%,100% {transform:scaleY(1)} 48%,52% {transform:scaleY(.12)} }
 @keyframes owl-tilt { 0%,100% {transform:rotate(0)} 45% {transform:rotate(-6deg)} }
 @keyframes owl-wing-left { 0%,100% {transform:rotate(0)} 45% {transform:rotate(24deg)} }
 @keyframes owl-wing-right { 0%,100% {transform:rotate(0)} 45% {transform:rotate(-24deg)} }
}

/* Gold keeps the saved coin total visible; the snow trail counts whole words. */
.adventure-hud { display:flex; align-items:center; gap:12px; min-width:0; }
.coin-counter { display:inline-flex; flex:none; align-items:center; gap:3px; padding:2px 9px 2px 3px; border-radius:20px; background:#fff0bc; color:#64450c; border:1px solid #d4a33e; box-shadow:0 2px 0 #8e702b45; font-size:20px; line-height:1; }
.coin-counter svg { width:30px; height:30px; }
.coin-counter b { font-variant-numeric:tabular-nums; }
.journey-meter { flex:1; min-width:0; color:#d3eaf7; }
.journey-meter-label { display:block; font-size:11px; line-height:1.2; font-weight:650; margin-bottom:4px; }
.journey-meter-track { display:block; position:relative; height:10px; background:#456573; border:1px solid #89adbf; border-radius:20px; margin-right:15px; }
.journey-meter-fill { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#7bc9e6,#d2f1fc); }
.journey-meter-marker { position:absolute; top:50%; translate:-50% -50%; font-size:20px; line-height:1; color:#fff4cc; text-shadow:0 1px 2px #1b415c; }
.journey-meter-flag { position:absolute; width:17px; height:21px; right:-17px; bottom:-4px; fill:#f9d26e; stroke:#b28d3e; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.play.handheld .screen-top { padding:0 1px 8px; gap:10px; }
.play.handheld .lcd,.play.handheld.lenny .lcd { grid-template-rows:44px auto minmax(0,1fr); }
.play:not(.handheld) .adventure-hud { flex-wrap:wrap; }
.play:not(.handheld) .journey-meter,.journey-hud .journey-meter { color:#214a73; min-width:90px; }
.play:not(.handheld) .journey-meter { flex-basis:100%; }
.journey-hud { margin-top:12px; max-width:360px; }
.journey-hud .coin-counter { font-size:24px; }
.journey-hud .coin-counter svg { width:36px; height:36px; }
.test .coin-counter { font-size:18px; margin-left:auto; }
.test .coin-counter svg { width:26px; height:26px; }
.test.handheld .test-lcd { grid-template-rows:40px minmax(0,1fr); }
@media(orientation:landscape) and (max-height:600px) {
 .play.handheld .lcd,.play.handheld.lenny .lcd { grid-template-rows:38px auto minmax(0,1fr); }
 .play.handheld .coin-counter { font-size:17px; padding-right:6px; }
 .play.handheld .coin-counter svg { width:25px; height:25px; }
 .play.handheld .screen-top { gap:6px; }
 .test.handheld .test-lcd { grid-template-rows:34px minmax(0,1fr); }
 .test.handheld .test-top { padding-bottom:5px; }
}
@media(orientation:landscape) and (max-height:600px) {
 .test.handheld .test-display .board { padding:4px; gap:3px; }
 .test.handheld .board-title { font-size:16px; }
 .test.handheld .answer .cell { --cell-size:clamp(30px,calc((100cqi - 12px) / var(--word-length,8) - 4px),42px); }
}
@media(orientation:portrait) and (max-width:600px) {
 .test.handheld .test-display { grid-template-rows:max-content minmax(0,1fr); align-content:start; }
 .test.handheld .test-display .board { align-self:start; }
}
@media(orientation:portrait) and (max-width:600px) and (max-height:740px) {
 .test.handheld.is-typing .test-display .scene { height:40px; }
 .test.handheld.is-typing .test-display .raft-float { width:48px; }
}
/* Keep the study/correction board intrinsic-sized; its teaching content must
   never be squeezed upwards by the decorative river's preferred height. */
@media(orientation:landscape) and (min-height:601px) {
 .test.handheld .test-display,.test.handheld:not(.is-typing) .test-display {
  grid-template-columns:minmax(0,1fr) 160px; grid-template-rows:max-content;
  align-content:safe center;
 }
 .test.handheld .test-display .board { grid-area:1 / 1; align-self:center; }
 .test.handheld .test-display .scene { grid-area:1 / 2; height:160px; align-self:center; }
 .test.handheld .test-display .raft-float { width:120px; left:calc(4% + var(--progress)*18%); }
}
.test:not(.handheld) .raft-float { left:calc(30% + var(--progress)*42%); }

/* Separate instructions, letters and the next action without inflating controls. */
.test .board-note:not(:empty) { display:grid; justify-items:center; gap:16px; }
.test .board-note .spelling-explanation { margin:0; }
@media(orientation:portrait) {
 .test.handheld .test-display .board { gap:12px; }
}
@media(orientation:landscape) and (max-height:600px) {
 .test.handheld .test-display .board { gap:6px; }
 .test.handheld .board-note:not(:empty) { gap:12px; }
 .test.handheld.is-typing .test-display .board { gap:3px; }
}