@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;--plum:#3b1f33;
  --amber:#ffc061;--amber-deep:#e8903a;--ink:#2a1622;--radius:18px;
  --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);
}
*{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}

/* Canonical rune: bottom-LEFT corner on every screen and in every dialog. */
.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}
#opening img{width:100%;height:100%;object-fit:cover}
.opening-title{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:min(94vw,900px);text-align:center;text-shadow:0 3px 14px #2a1622dd,0 1px 3px #2a1622cc}
.opening-title h1{margin:0;font-size:clamp(2rem,7vw,4.2rem);line-height:1.04;letter-spacing:.01em}
#play{position:absolute;left:50%;bottom:calc(9% + var(--safe-b));transform:translateX(-50%);width:clamp(96px,18vw,148px);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:focus-visible{outline:4px solid #fff8e6;outline-offset:4px;border-radius:50%}

/* ------------------------------------------------------------- playfield
 * One full-bleed stage: the theatre photograph is the background and the
 * controls, HUD and tray float on top of it, so no blank sidebar is left. */
#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;border-radius:0;box-shadow:none}
#bgPicture{position:absolute;inset:0;display:block}
#bg{width:100%;height:100%;object-fit:cover;background:#5c3350}

#controls{grid-area:1/1;justify-self:start;align-self:start;z-index:3;display:flex;gap:8px}
#controls button{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)}
#controls button:focus-visible,#screen:focus-visible,#check:focus-visible,.tool-row button:focus-visible,#palette button:focus-visible,#guide:focus-visible,.wood:focus-visible{outline:3px solid #fff8e6;outline-offset:2px}

#hud{grid-area:1/2;justify-self:end;align-self:start;z-index:3;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 12px;min-width:0;max-width:calc(100vw - 2*var(--pad) - 320px)}
#levelName{margin:0;padding:6px 14px;border-radius:999px;background:#2a162299;font-size:clamp(.9rem,2.4vw,1.3rem);font-weight:600;text-shadow:0 2px 6px #2a162288;white-space:nowrap}
/* Two marker groups, never dots: five purple hats for the stages and four
 * brand stars for the tasks of the stage on show. */
#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}
#stagePips li{width:28px;height:28px}
#stagePips li[data-stage='todo'] img{filter:grayscale(.45) brightness(.9);opacity:.85}
#stagePips li[data-stage='now'] img{filter:drop-shadow(0 0 2px #fff8e6) drop-shadow(0 0 7px var(--amber))}
#stagePips li[data-stage='now']::after{content:'';position:absolute;inset:-3px;border:2px solid #fff8e6;border-radius:50%}
#stagePips li[data-stage='done'] img{filter:saturate(1.15)}
#stagePips li[data-stage='done']::after{content:'✓';position:absolute;right:-4px;bottom:-3px;font-size:14px;font-weight:600;line-height:1;color:#9ce89a;text-shadow:0 1px 2px #2a1622}
#roundPips li{width:36px;height:36px}
#roundPips li[data-star='off'] img{opacity:1}
#roundPips li[data-star='on'] img{filter:drop-shadow(0 0 5px var(--amber))}

/* ---------------------------------------------------------------- stage */
/* The theatre cloth already is the screen: a soft amber vignette marks the
 * play area, but there is no fake nested box and no dashed rectangle. */
#screen{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(60vw,600px);aspect-ratio:4/3;border-radius:26px;cursor:pointer;
  box-shadow:inset 0 0 70px 14px #ffc06133;
}
.shadow{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}
.shadow img{width:100%;height:100%;object-fit:contain}
/* Genuine silhouette: the target is the prop's own alpha with a warm contour,
 * drawn under the live shadow so the child can compare the two shapes. */
#targetImg{filter:brightness(0) opacity(.3) drop-shadow(0 0 3px #ffbf5e) drop-shadow(0 0 8px #ffbf5e)}
#liveImg{filter:brightness(0) opacity(.85);transition:transform .22s ease-out}

#buki{position:absolute;left:1%;bottom:calc(15% + var(--safe-b));width:clamp(140px,20vw,230px);z-index:2;pointer-events:none;filter:drop-shadow(0 8px 12px #2a1622cc)}

#guide{position:absolute;right:1.5%;bottom:calc(15% + var(--safe-b));z-index:4;display:flex;align-items:center;gap:8px;max-width:min(46vw,400px);text-align:left}
#guide img{width:clamp(52px,6.4vw,88px);height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 10px #2a1622cc)}
#guide span{display:block;background:var(--cream);color:var(--ink);border-radius:18px;padding:10px 14px;font-size:clamp(.78rem,1.7vw,1rem);line-height:1.32;box-shadow:0 8px 18px #1c0e1a99}
#guide:active img{transform:scale(.96)}

#hint{position:absolute;left:50%;top:calc(var(--safe-t) + 15%);transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:999px;background:#2a1622dd;color:var(--amber);font-size:clamp(.82rem,2.2vw,1.02rem);text-align:center;max-width:90%;z-index:5}

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

.shake{animation:shake .5s ease-in-out 2}
@keyframes shake{0%,100%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}
25%{transform:translate(-58%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}
75%{transform:translate(-42%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}}
.parade{animation:parade 1.1s ease-in-out forwards}
@keyframes parade{
0%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}
45%{transform:translate(-50%,-78%) rotate(var(--r,0deg)) scale(var(--s,1))}
100%{transform:translate(210%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))}}

/* Pausing freezes CSS motion as well as the JS timers. */
#game[data-state='paused'] #stage .shadow,#game[data-state='paused'] #hand{animation-play-state:paused!important}

#check.demo-ok{filter:drop-shadow(0 0 14px #8fe08a) drop-shadow(0 4px 6px #2a162299)}

/* ----------------------------------------------------------------- tray */
#tray{
  grid-area:3/1/4/3;justify-self:center;align-self:end;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:100%;padding:10px 12px;border-radius:24px;
  background:#2a1622a6;box-shadow:0 10px 24px #1c0e1acc;
}
#palette{display:flex;gap:10px;margin:0;padding:0;list-style:none;min-width:0}
#palette button{
  min-width:80px;min-height:80px;padding:4px;border-radius:16px;background:#f7e8c814;
  box-shadow:inset 0 0 0 3px #b8792f88;display:grid;place-items:center;
}
#palette img{height:64px;width:auto;object-fit:contain}
#palette button[aria-pressed='true']{background:#ffc06133;box-shadow:inset 0 0 0 3px var(--amber),0 0 16px #ffc06199}
#palette button:disabled{opacity:.6}
.tool-row{display:flex;gap:8px}
.tool-row button{
  width:56px;height:56px;min-width:56px;border-radius:16px;background:#f7e8c814;
  box-shadow:inset 0 0 0 3px #b8792f88;display:grid;place-items:center;font-size:1.7rem;color:var(--amber);
}
.tool-row img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
#sizeTools button{place-items:end center;padding-bottom:6px}
#sizeTools img{filter:brightness(0) opacity(.75)}
/* Three visibly different sizes, identical hit area. */
#sizeTools button[data-size='small'] img{height:20px;width:20px}
#sizeTools button[data-size='medium'] img{height:32px;width:32px}
#sizeTools button[data-size='large'] img{height:46px;width:46px}
#turnTools button{color:var(--amber);font-weight:600}
.tool-row button[aria-pressed='true']{background:#ffc06133;box-shadow:inset 0 0 0 3px var(--amber),0 0 14px #ffc06199}
.tool-row button:disabled{opacity:.4}
#check{width:76px;height:76px;min-width:76px;border-radius:50%;filter:drop-shadow(0 4px 6px #2a162299)}
#check img{width:100%;height:100%;object-fit:contain}
#check:disabled{opacity:.75}

/* -------------------------------------------------------------- dialogs */
dialog{border:0;border-radius:22px;padding:18px;max-width:min(92vw,620px);max-height:88vh;overflow:auto;background:var(--cream);color:var(--ink);box-shadow:0 18px 40px #1c0e1acc}
dialog::backdrop{background:#2a1622cc}
dialog h2{margin:0 0 8px;font-size:clamp(1.2rem,3.4vw,1.7rem);color:var(--wood-dark)}
dialog p{margin:8px 0;line-height:1.4}
.menu-label{margin:14px 0 6px;font-weight:600;color:var(--wood-dark)}
.level-menu{display:flex;flex-wrap:wrap;gap:8px}
.stage-btn{min-width:96px}
.stage-btn:disabled{opacity:.45;filter:grayscale(.4)}
.stage-btn.is-current{box-shadow:inset 0 0 0 3px var(--amber),0 3px 0 #4d2c14}
.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)}
#helpSteps{margin:0;padding:0;list-style:none;display:flex;gap:12px;flex-wrap:wrap}
#helpSteps li{display:flex;align-items:center;gap:8px;min-width:180px}
#helpSteps img{width:44px;height:44px;object-fit:contain}
.mini-screen{width:56px;height:44px;border-radius:10px;background:var(--cream);box-shadow:inset 0 0 0 3px #b8792f;display:grid;place-items:center}
.mini-screen img{width:26px;height:26px;filter:brightness(0) opacity(.32)}
.size-demo,.turn-demo{display:flex;align-items:flex-end;gap:3px;width:56px;height:44px;justify-content:center}
.size-demo img{filter:brightness(0) opacity(.55)}
.size-demo img:nth-child(1){width:14px;height:14px}
.size-demo img:nth-child(2){width:22px;height:22px}
.size-demo img:nth-child(3){width:32px;height:32px}
.turn-demo img{width:30px;height:30px;filter:brightness(0) opacity(.55)}
.turn-demo span{font-size:1.5rem;color:var(--wood);font-weight:600}
.narration{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
#helpText{font-size:.92rem;background:#7a4a2412;padding:10px 12px;border-radius:12px}
#rewardArt{width:100%;max-height:40vh;object-fit:contain;border-radius:14px;background:#7a4a2412}

/* ----------------------------------------------------------- responsive */
@media (orientation:portrait){
  /* Header stacks so the five round controls always fit a phone width. */
  #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:end;min-width:0;max-width:100%;flex-direction:row;align-items:center;gap:8px}
  #levelName{font-size:clamp(.8rem,3.2vw,1.05rem);white-space:normal;text-align:right}
  #tray{grid-row:4;grid-column:1/3}
  #screen{width:min(66vw,460px);top:37%}
  #buki{left:0;bottom:calc(40% + var(--safe-b));width:clamp(110px,42vw,150px)}
  #guide{bottom:calc(40% + var(--safe-b));right:1%;max-width:min(60vw,280px)}
  #guide img{width:clamp(46px,13vw,70px)}
  #guide span{font-size:clamp(.76rem,3.3vw,.95rem);padding:8px 11px}
  #hint{top:calc(var(--safe-t) + 14%)}
  #tray{flex-wrap:wrap;gap:8px;padding:8px 10px 8px calc(52px + var(--safe-l))}
  #palette{flex:1 1 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #palette li{min-width:0}
  #palette button{min-width:0;min-height:76px;width:100%}
  #palette img{height:56px}
  #tools,#check{margin:0}
}
@media (orientation:portrait) and (max-height:620px){
  #palette button{min-height:64px}
  #palette img{height:48px}
  #buki,#guide{bottom:calc(37% + var(--safe-b))}
}
@media (orientation:landscape) and (max-height:420px){
  #palette button{min-height:64px}
  #palette img{height:48px}
  #stagePips li{width:28px;height:28px}
  #roundPips li{width:36px;height:36px}
  #check{width:64px;height:64px;min-width:64px}
  #guide{top:114px;bottom:auto;right:8px;max-width:280px}
  #screen{width:min(48vw,300px);top:46%}
}
@media (max-width:480px){
  #rewardArt{max-height:140px}
  #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}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}