body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout: full-window scenes. Landing spreads the art across the window; the booth pins curtains to the edges,
   repeats the scallops across the top, and scales the middle controls as one unwarped group. */
:root {
  --page: #ffe9b9;      /* the illustration's own paper colour */
  --ink: #b5543f;       /* crayon brown-red for hint text */
  --cream: #fbf7f5;
  --sky-ink: #5fb3c4;   /* lettering on the blue crayon buttons */
  --sky: #9fd8e3;
  --font-hand: "Gaegu", "Comic Sans MS", "Chalkboard SE", cursive;
  color-scheme: light;
}
html, body { height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-hand);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#app {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--page);
  user-select: none; -webkit-user-select: none; touch-action: none;
  --u: 0.5px;
}
.scene { position: absolute; inset: 0; overflow: hidden; }
.abs { position: absolute; display: block; }
img { -webkit-user-drag: none; }
img.abs { max-width: none; pointer-events: none; }

/* ---------- landing ---------- */
#landing { background: var(--page); }
.float {
  animation: drift var(--d, 7s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(calc(var(--u) * var(--x1)), calc(var(--u) * var(--y1))) rotate(var(--r1)); }
  50% { transform: translate(calc(var(--u) * var(--x2)), calc(var(--u) * var(--y2))) rotate(var(--r2)); }
  75% { transform: translate(calc(var(--u) * var(--x3)), calc(var(--u) * var(--y3))) rotate(var(--r3)); }
}
#cake { cursor: pointer; }
#cake .inner { position: absolute; inset: 0; perspective: calc(var(--u) * 900); }
#door {
  transform-origin: 0% 50%;
  transform: rotateY(0deg);
  backface-visibility: visible;
  transition: transform .8s cubic-bezier(.45,0,.25,1), filter .8s ease;
}
#cake.open #door { transform: rotateY(-124deg); filter: brightness(.93); transition: transform .9s cubic-bezier(.35,.1,.25,1), filter .9s ease; }
#cake:focus-visible { outline: none; }
#cake:focus-visible .inner { filter: drop-shadow(0 0 calc(var(--u)*10) #fff); }

#hint {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: max(15px, calc(var(--u) * 46));
  color: var(--ink);
  opacity: 0;
  animation: hintIn 1.2s ease 2.5s forwards;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes hintIn { to { opacity: .75; } }

/* ---------- booth ---------- */
#booth {
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%));
  visibility: hidden;
  background: var(--page);
  transition: clip-path 1.2s cubic-bezier(.6,0,.3,1), visibility 0s linear 1.2s;
}
#booth.in {
  visibility: visible;
  clip-path: circle(var(--r, 150%) at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path 1.4s cubic-bezier(.6,0,.3,1), visibility 0s;
}
#scallops { position: absolute; left: 0; top: 0; right: 0; height: 0; z-index: 3; pointer-events: none; }
#scallops img.pk { z-index: 2; }
.curtain { position: absolute; top: 0; z-index: 2; cursor: pointer; transform-origin: 50% 0; }
.curtain img { width: 100%; height: 100%; display: block; max-width: none; pointer-events: none; }
.curtain.jiggle { animation: jiggle 1.15s cubic-bezier(.3,.6,.4,1); }
@keyframes jiggle {
  0% { transform: rotate(0) skewX(0); }
  12% { transform: rotate(var(--j, 1.8deg)) skewX(calc(var(--j, 1.8deg) * -1.6)); }
  32% { transform: rotate(calc(var(--j, 1.8deg) * -.8)) skewX(calc(var(--j, 1.8deg) * 1.3)); }
  52% { transform: rotate(calc(var(--j, 1.8deg) * .5)) skewX(calc(var(--j, 1.8deg) * -.8)); }
  72% { transform: rotate(calc(var(--j, 1.8deg) * -.25)) skewX(calc(var(--j, 1.8deg) * .4)); }
  100% { transform: rotate(0) skewX(0); }
}

#bs { position: absolute; z-index: 1; }
#screen {
  border-radius: calc(var(--u) * 22);
  overflow: hidden;
  background: #f4ede9;
}
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#screenMsg {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 0 12%;
  font-size: calc(var(--u) * 46); line-height: 1.1; color: #c0877a;
}
#count {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--u) * 260); font-weight: 700; color: #fff;
  text-shadow: 0 0 calc(var(--u)*30) rgba(181,84,63,.45);
  pointer-events: none;
}
#count span { animation: pop .9s ease-out both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: .85; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

.btn {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.3,1.6,.5,1);
}
.btn img { width: 100%; height: 100%; display: block; pointer-events: none; max-width: none; }
.btn:hover { transform: scale(1.06) rotate(-1.5deg); }
.btn:active { transform: scale(.94); }
.btn:focus-visible { outline: calc(var(--u)*6) dashed var(--sky); outline-offset: calc(var(--u)*6); border-radius: calc(var(--u)*20); }
.dot.on { transform: scale(1.12); }
.dot.on::after {
  content: ""; position: absolute; inset: -14%; border-radius: 50%;
  border: calc(var(--u)*5) solid #e9917f; opacity: .7;
}
#shutter:hover { transform: scale(1.1); }
#back span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 calc(var(--u) * 52)/1 var(--font-hand); color: var(--sky-ink);
  letter-spacing: .04em; padding-bottom: 4%;
}

#strip { position: absolute; }
#stripCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#stripHoles, #stripStickers { position: absolute; inset: 0; }
#stripHoles, #stripStickers { pointer-events: none; }
.placed { pointer-events: auto; }
.hole { position: absolute; cursor: pointer; pointer-events: auto; border-radius: calc(var(--u)*10); padding: 0; border: 0; background: none; }
.hole:hover { background: rgba(255,255,255,.18); }
.hole.sel { outline: calc(var(--u)*6) dashed #e9917f; outline-offset: calc(var(--u)*5); background: rgba(255,255,255,.22); }
.hole:focus-visible { outline: calc(var(--u)*6) dashed var(--sky); outline-offset: calc(var(--u)*5); }
#strip.shake { animation: shake .45s ease; }
@keyframes shake { 20%,60% { transform: translateX(calc(var(--u)*-10)); } 40%,80% { transform: translateX(calc(var(--u)*10)); } }

.sticker { position: absolute; cursor: grab; touch-action: none; }
.sticker img { width: 100%; height: 100%; display: block; pointer-events: none; max-width: none; }
.pal { transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.pal:hover { transform: scale(1.12) rotate(4deg); }
.placed { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
.placed.sel { outline: calc(var(--u)*4) dashed rgba(181,84,63,.55); outline-offset: calc(var(--u)*4); }
.placed .ctl {
  position: absolute; width: calc(var(--u)*44); height: calc(var(--u)*44); border-radius: 50%;
  display: none; place-items: center; border: 0; padding: 0;
  font: 700 calc(var(--u)*34)/1 var(--font-hand); color: #fff;
  transform: scale(calc(1 / var(--sc, 1)));
}
.placed.sel .ctl { display: grid; }
.ctl.del { top: calc(var(--u)*-26); right: calc(var(--u)*-26); background: #ec8e80; cursor: pointer; }
.ctl.rot { bottom: calc(var(--u)*-26); right: calc(var(--u)*-26); background: #7cc6d6; cursor: nwse-resize; }
.ghost { position: absolute; pointer-events: none; z-index: 50; transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); filter: drop-shadow(0 calc(var(--u)*8) calc(var(--u)*8) rgba(120,70,40,.18)); transition: opacity .25s, transform .25s; }
.ghost img { width: 100%; height: 100%; display: block; max-width: none; }
.ghost.gone { opacity: 0; transform: translate(-50%, -50%) scale(.4); }

#toast {
  position: absolute; left: 50%; top: var(--toast-top, 60px); transform: translate(-50%, -20%);
  z-index: 5;
  background: var(--cream); color: var(--ink);
  font-size: max(15px, calc(var(--u) * 42)); line-height: 1.1;
  padding: .3em .8em;
  border-radius: 2em;
  box-shadow: 0 .15em 0 rgba(233,145,127,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#uploadInput { display: none; }

@media (prefers-reduced-motion: reduce) {
  .float, .curtain.jiggle { animation: none; }
  #booth, #booth.in { transition: none; }
  #door, #cake.open #door { transition-duration: .01s; }
}
#cakeBase, #contentBg { inset: 0; width: 100%; height: 100%; }