@font-face{font-family:Fredoka;font-style:normal;font-weight:400;font-display:swap;src:url('assets/fredoka-400.woff2') format('woff2')}
@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-display:swap;src:url('assets/fredoka-600.woff2') format('woff2')}

:root{
  --wood:#7a4a24;--wood-dark:#4d2c14;--cream:#f7e8c8;--linen:#efe0c4;
  --plum:#3b1f33;--plum-soft:#5a3350;--amber:#ffc061;--amber-deep:#e8903a;--ink:#2a1622;
  --pad:clamp(6px,1.4vmin,14px);
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  --levels-w:312px; /* five 56px controls plus gaps, used for the small-landscape HUD */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Fredoka,system-ui,sans-serif;color:var(--cream);background:var(--plum);overflow:hidden;-webkit-text-size-adjust:100%;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Canonical rune: bottom-LEFT corner, always visible. */
.rune{position:fixed;left:calc(8px + var(--safe-l));bottom:calc(8px + var(--safe-b));width:46px;opacity:.85;pointer-events:none;z-index:60}
dialog .rune{position:static;left:auto;right:auto;bottom:auto;display:block;margin:12px 0 0;width:40px}

/* -------------------------------------------------------------- opening */
#opening{position:fixed;inset:0}
#opening picture{position:absolute;inset:0;display:block}
#openingImg{width:100%;height:100%;object-fit:cover}
.opening-frame{
  position:absolute;left:50%;top:calc(6% + var(--safe-t));transform:translateX(-50%);
  width:min(92vw,860px);padding:12px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,#7a4a24,#4d2c14);
  border:4px solid var(--plum);box-shadow:0 12px 26px #1c0e1acc,inset 0 0 0 2px #ffdca8aa;
}
.opening-title{margin:0;font-weight:600;color:#fff3dc;letter-spacing:.01em;
  font-size:clamp(1.5rem,6.2vw,3.4rem);line-height:1.05;text-shadow:0 2px 8px #2a1622}
.opening-bottom{position:absolute;left:50%;bottom:calc(8% + var(--safe-b));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px}
#play{width:clamp(96px,17vw,140px);aspect-ratio:1;display:grid;place-items:center}
#play img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px #2a1622aa)}
#play:active{transform:translateY(2px) scale(.97)}
.opening-caption{margin:0;font-weight:600;color:#fff3dc;white-space:nowrap;
  font-size:clamp(.9rem,3.2vw,1.35rem);text-shadow:0 2px 8px #2a1622}

/* ------------------------------------------------------------- playfield */
#playfield{
  position:fixed;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--pad);
  padding:calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l));
}
#stage{grid-area:1/1/4/3;position:relative;overflow:hidden;z-index:0}
#bgPicture{position:absolute;inset:0;display:block}
#bg{width:100%;height:100%;object-fit:cover;background:#5c3350}

/* five illustrated controls, ONE row, 56px each (never shrunk) */
#controls{grid-area:1/1;justify-self:start;align-self:start;z-index:45;display:flex;gap:8px;flex-wrap:nowrap}
#controls button{position:relative;flex:0 0 56px;width:56px;height:56px;min-width:56px;border-radius:50%;filter:drop-shadow(0 3px 2px #46301e66)}
#controls button img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#controls button:active{transform:translateY(2px) scale(.96)}
.qmark{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;background:var(--cream);color:var(--plum);font-weight:600;font-size:16px;line-height:24px;text-align:center;box-shadow:0 2px 5px #00000066;pointer-events:none}

#hud{grid-area:1/2;justify-self:end;align-self:start;z-index:4;display:flex;align-items:center;
  gap:6px 10px;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:calc(100vw - 2*var(--pad) - var(--levels-w) - 12px)}
#levelName{margin:0;padding:6px 14px;border-radius:999px;background:#2a162299;font-weight:600;
  font-size:clamp(.82rem,2.3vw,1.18rem);white-space:nowrap;text-shadow:0 2px 6px #2a162288}
#pips{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 8px;max-width:100%;padding:6px;border-radius:14px;background:#3b1f33cc}
#pips ol{display:flex;gap:4px;margin:0;padding:0;list-style:none}
#pips li{position:relative;flex:0 0 auto}
#pips li img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#levelPips li{width:28px;height:28px}
#levelPips li[data-level='todo'] img{filter:grayscale(.5) brightness(.9);opacity:.85}
#levelPips li[data-level='now'] img{filter:drop-shadow(0 0 2px #fff8e6) drop-shadow(0 0 7px var(--amber))}
#levelPips li[data-level='now']::after{content:'';position:absolute;inset:-3px;border:2px solid #fff8e6;border-radius:50%}
#levelPips li[data-level='done']::after{content:'\2713';position:absolute;right:-4px;bottom:-3px;font-size:14px;font-weight:600;line-height:1;color:#9ce89a;text-shadow:0 1px 2px #2a1622}
#starPips li{width:32px;height:32px}
#starPips li[data-star='on'] img{filter:drop-shadow(0 0 5px var(--amber))}

/* --------------------------------------------------------------- stage  */
#bukiWrap{position:absolute;z-index:2;pointer-events:auto}
#buki{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #2a1622aa)}
#previewHat{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 4px 6px #2a162255)}
/* Optional idle loop (VP9 alpha): same slot and shape as the static Buki art. */
#bukiLoop{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0;filter:drop-shadow(0 10px 14px #2a1622aa)}
#buki{position:relative;z-index:1}
img,#bukiLoop{-webkit-user-drag:none;user-drag:none}

#feedback{position:absolute;left:50%;top:calc(var(--safe-t) + 13%);transform:translateX(-50%);z-index:7;
  margin:0;padding:8px 18px;border-radius:999px;background:#2a1622e0;color:var(--amber);font-weight:600;
  font-size:clamp(.85rem,2.4vw,1.1rem);text-align:center;max-width:90%}

/* Ori + bubble; the shell positions this just above the bench so it never
   hides behind the tray. On narrow phones and short landscape it shows Ori
   alone (the hint stays in the aria-label and in Ori's voice). */
#guide{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;max-width:min(46vw,340px);text-align:left;right:8px;bottom:150px}
#guide img{width:var(--ori-w,clamp(48px,6vw,78px));height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 10px #2a1622cc)}
#guide span{display:block;background:var(--linen);color:var(--ink);border-radius:16px;padding:8px 12px;
  font-size:clamp(.72rem,1.6vw,.95rem);line-height:1.3;box-shadow:0 8px 18px #1c0e1a99}
#guide.compact span{display:none}
/* Wide portrait tablet: the hint stacks ABOVE Ori in its own block instead of
   being squeezed into a narrow column beside the sprite. */
/* DOM order is img then span; column-reverse puts the hint ABOVE Ori and leaves
   the bench area under him clean. */
#guide.stacked{flex-direction:column-reverse;align-items:center;gap:6px}
#guide.stacked span{max-width:min(220px,100%);text-align:center}
#guide.compact{max-width:none}
#guide:active img{transform:scale(.96)}

/* Skip practice lives on the bench side, never on the HUD. */
#skipDemo{position:absolute;z-index:8;left:calc(var(--pad) + var(--safe-l));bottom:150px;
  min-height:48px;padding:0 16px;border-radius:14px;background:linear-gradient(#a8622c,#7a4a24);color:#fff6e2;
  font-weight:600;box-shadow:inset 0 2px 0 #ffffff33,0 3px 0 #4d2c14}

#hand{position:fixed;width:60px;pointer-events:none;transform-origin:70% 70%;z-index:130;
  filter:drop-shadow(0 4px 6px #2a1622aa);transition:left .4s ease,top .4s ease,transform .4s ease}
.demo-glide{position:fixed;left:0;top:0;z-index:60;pointer-events:none;object-fit:contain}

.settle{animation:settle .7s ease-out}
@keyframes settle{0%{transform:translateY(0) rotate(-7deg) scale(1)}45%{transform:translateY(-10px) rotate(-5deg) scale(1.03)}100%{transform:translateY(0) rotate(-7deg) scale(1)}}
.shake{animation:shake .5s ease-in-out 2}
@keyframes shake{0%,100%{transform:translateX(0) rotate(-7deg)}25%{transform:translateX(-8px) rotate(-9deg)}75%{transform:translateX(8px) rotate(-5deg)}}
#game[data-state='paused'] #hand,#game[data-state='paused'] #previewHat{animation-play-state:paused!important}

/* ----------------------------------------------------------------- tray */
#tray{
  grid-area:3/1/4/3;justify-self:center;align-self:end;z-index:3;width:min(100%,940px);
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 16px 14px;border-radius:22px;
  background:linear-gradient(#5c3a1ecc,#3a2310e0);
  box-shadow:0 12px 26px #1c0e1acc,inset 0 2px 0 #ffdca833,inset 0 -6px 0 #2a160866;
}
#choices{display:flex;gap:14px;margin:0;padding:0;list-style:none;align-items:flex-end;justify-content:center;flex:1 1 auto;min-width:0}
#choices li{flex:0 0 auto;min-width:56px;min-height:56px;display:flex;align-items:flex-end;justify-content:center}
#choices button{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;
  min-width:56px;min-height:56px;padding:0 0 4px;border-radius:14px;touch-action:none}
.hatArt{display:block;line-height:0;flex:0 0 auto}
.hatArt img{width:100%;height:auto;max-width:none}
#choices button[aria-pressed='true'] .hatArt{filter:drop-shadow(0 0 4px var(--amber)) drop-shadow(0 0 12px var(--amber))}
#choices button[aria-pressed='true']::after{content:'';position:absolute;left:10%;right:10%;bottom:-8px;height:4px;border-radius:2px;background:var(--amber);box-shadow:0 0 10px var(--amber)}

#check{flex:0 0 auto;width:clamp(64px,9vw,84px);height:clamp(64px,9vw,84px);min-width:56px;border-radius:50%;filter:drop-shadow(0 5px 8px #2a162299)}
#check img{width:100%;height:100%;object-fit:contain}
#check:disabled{opacity:.72}
#check.demo-ok img{filter:drop-shadow(0 0 14px #8fe08a)}

/* -------------------------------------------------------------- overlays */
#pauseOverlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#2a1622cc}
#pauseOverlay .panel{background:var(--linen);color:var(--ink);border-radius:22px;padding:20px 26px;text-align:center;
  box-shadow:0 18px 40px #1c0e1acc;max-width:min(90vw,420px)}
#pauseOverlay h2{margin:0 0 6px;color:var(--wood-dark);font-size:clamp(1.2rem,3.4vw,1.7rem)}
#pauseOverlay p{margin:6px 0 14px;line-height:1.35}

dialog{border:0;border-radius:22px;padding:18px;max-width:min(92vw,640px);max-height:88vh;overflow:auto;
  background:var(--linen);color:var(--ink);box-shadow:0 18px 40px #1c0e1acc}
dialog::backdrop{background:#2a1622cc}
dialog h2{margin:0 0 8px;color:var(--wood-dark);font-size:clamp(1.2rem,3.4vw,1.7rem)}
/* Sticky exit header: the heading and the exit control stay at the top of the
   dialog's own scrollport, so on a short screen the child never has to scroll to
   leave a modal (the global controls are inert while a dialog is open). */
.dialog-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  justify-content:space-between;background:var(--linen);padding:2px 0 8px;margin:0 0 4px}
.dialog-heading h2{margin:0}
.icon-btn{flex:0 0 auto;width:56px;height:56px;min-width:56px;min-height:56px;padding:0;
  display:grid;place-items:center;font-size:28px;line-height:1}
.icon-btn img{width:72%;height:72%;object-fit:contain}
dialog p{margin:8px 0;line-height:1.4}
.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wood{min-height:56px;padding:0 18px;border-radius:14px;background:linear-gradient(#a8622c,#7a4a24);color:#fff6e2;
  font-weight:600;box-shadow:inset 0 2px 0 #ffffff33,0 3px 0 #4d2c14}
.wood:active{transform:translateY(2px)}
.wood:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
.level-picker{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%;align-items:center}
.level-picker::before{content:'For parents: jump to a level';flex:1 1 100%;font-size:.74rem;letter-spacing:.02em;opacity:.72;text-transform:uppercase}
.level-pick{min-height:52px;padding:0 12px;font-size:.84rem;opacity:.92;background:linear-gradient(#8a5a34,#63401f)}
.dialog-actions .wood.primary{font-size:1.04em;box-shadow:inset 0 2px 0 #ffffff44,0 4px 0 #4d2c14}

#helpSteps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
#helpSteps li{display:flex;align-items:center;gap:10px}
#helpSteps img{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
#helpSteps .step-hat{width:64px}
#helpSteps .step-buki{height:64px}
.narration{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
#helpText{font-size:.9rem;background:#7a4a2412;padding:10px 12px;border-radius:12px}
#rewardArt{width:100%;max-height:38vh;object-fit:contain;border-radius:14px;background:#7a4a2412}

:is(#play,#controls button,#choices button,#check,#guide,#skipDemo,.wood,#resume):focus-visible{outline:3px solid #fff8e6;outline-offset:3px}

/* ----------------------------------------------------------- responsive */
@media (orientation:portrait){
  #playfield{grid-template-rows:auto auto minmax(0,1fr) auto}
  #stage{grid-area:1/1/5/3}
  #controls{grid-row:1;grid-column:1/3}
  #hud{grid-row:2;grid-column:1/3;justify-self:stretch;max-width:100%;justify-content:space-between;align-items:flex-start}
  #levelName{font-size:clamp(.78rem,3.1vw,1.05rem);white-space:normal;text-align:left;max-width:58%}
  #tray{grid-row:4;grid-column:1/3;justify-self:center;max-width:100%;gap:10px;padding:10px 12px 12px}
  #feedback{top:calc(var(--safe-t) + 11%)}
}
/* Phone portrait: the canonical bottom-left rune lane (46 px rune at x 8..54
   plus an 8 px art gap). Must come AFTER the generic portrait #tray padding so
   the computed left padding really is 56px. */
@media (orientation:portrait) and (max-width:480px){
  #tray{padding:10px 12px 14px calc(56px + var(--safe-l))}
}
@media (max-width:480px){
  #choices{gap:10px}
  #rewardActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #rewardActions .wood{min-height:56px;padding:0 10px;font-size:.86rem;line-height:1.15}
  .level-picker{grid-column:1/-1}
}
/* Short landscape (phones, ~640x360): drop the text pill, keep the controls a
   full 56px row on the left and the combined markers/stars one row on the right. */
@media (orientation:landscape) and (max-height:430px){
  /* The sticky heading + header Home are taller than the old heading, so the
     reward art is capped to keep the Next level target fully on screen at
     scrollTop 0 (object-fit keeps the illustration uncropped). */
  #rewardArt{max-height:24vh}
  #levelName{display:none}
  #hud{max-width:calc(100vw - 2*var(--pad) - var(--levels-w) - 8px);min-width:0}
  #pips{padding:4px;flex-wrap:nowrap;gap:4px 6px}
  #levelPips li{width:26px;height:26px}
  #starPips li{width:28px;height:28px}
  #tray{padding:6px 10px 8px;gap:8px}
  #choices{gap:8px}
  #check{width:56px;height:56px;min-width:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Drag highlight when a hat is carried over Buki. */
#bukiWrap.drop-hot #buki{filter:drop-shadow(0 0 12px var(--amber)) drop-shadow(0 10px 14px #2a1622aa)}
#bukiWrap.drop-hot #bukiLoop{filter:drop-shadow(0 0 12px var(--amber)) drop-shadow(0 10px 14px #2a1622aa)}