* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #3a2418;
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: "Baloo 2", "Arial Rounded MT Bold", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
  font-weight: 800;
}
img { -webkit-user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; padding: 0; cursor: pointer; touch-action: none; }

#stage { position: fixed; left: 50%; top: 50%; width: 1024px; height: 768px; transform-origin: center; overflow: hidden; background: #ffe9c7; }
#screen { position: absolute; inset: 0; background-size: cover; background-position: center; overflow: hidden; }
.abs { position: absolute; }

/* generic bits */
.big-btn { position: absolute; border-radius: 50%; background: #ffb703; color: #fff; border: 8px solid #fff; box-shadow: 0 8px 0 #c98400; display: grid; place-items: center; }
.big-btn svg { width: 62%; height: 62%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.big-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #c98400; }
.green { background: #5ed36a; border-color: #2f9e44; box-shadow: 0 8px 0 #1f7a33; color: #fff; }
.back { left: 16px; bottom: 16px; width: 100px; height: 100px; }
.mute { left: 16px; top: 16px; width: 100px; height: 100px; }
.title { position: absolute; left: 0; right: 0; top: 30px; margin: 0; text-align: center; font-size: 110px; line-height: .95; color: #ff5a5f; -webkit-text-stroke: 10px #fff; paint-order: stroke fill; text-shadow: 0 8px 0 rgba(0,0,0,.2); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -12px; } }
@keyframes pulse { 50% { scale: 1.1; } }
@keyframes wobble { 0%,100% { rotate: 0deg; } 25% { rotate: -10deg; } 75% { rotate: 10deg; } }

/* title */
.title-anya { position: absolute; left: 70px; top: 300px; width: 440px; height: 440px; filter: drop-shadow(0 12px 0 rgba(0,0,0,.2)); }
.playbtn { position: absolute; left: 540px; top: 330px; width: 400px; height: 400px; background: none; animation: pulse 1.6s ease-in-out infinite; filter: drop-shadow(0 12px 0 rgba(0,0,0,.2)); }
.playbtn img { position: absolute; inset: 0; width: 100%; height: 100%; }
.playbtn .tri { position: absolute; left: 150px; top: 120px; border-left: 150px solid #fff; border-top: 90px solid transparent; border-bottom: 90px solid transparent; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }

/* map */
.corner { position: absolute; right: 0; top: 0; width: 130px; height: 130px; }
.stickers-btn { right: 16px; bottom: 16px; width: 120px; height: 120px; }
.stickers-btn img { width: 80px; }


.map-path { position: absolute; inset: 0; pointer-events: none; }
.node { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: #fff; border: 8px solid #ffb703; box-shadow: 0 8px 0 #c98400; display: grid; place-items: center; }
.node img { width: 84px; height: 84px; }
.node.locked { opacity: .35; filter: grayscale(.6); box-shadow: none; }
.node.next { animation: pulse 1s ease-in-out infinite; border-color: #5ed36a; box-shadow: 0 8px 0 #2f9e44, 0 0 30px 10px #fff59a; }
.node .num { position: absolute; left: -10px; bottom: -8px; width: 42px; height: 42px; border-radius: 50%; background: #ff5a5f; color: #fff; font-size: 26px; display: grid; place-items: center; border: 4px solid #fff; }
.map-anya { position: absolute; width: 110px; height: 110px; z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
.node .gold { position: absolute; right: -20px; top: -24px; width: 60px; height: 60px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }

/* sticker book */
.book-title { position: absolute; left: 0; right: 0; top: 14px; margin: 0; text-align: center; font-size: 64px; color: #ff5a5f; -webkit-text-stroke: 8px #fff; paint-order: stroke fill; }
.book { position: absolute; left: 60px; right: 60px; top: 110px; bottom: 130px; overflow-y: auto; touch-action: pan-y; display: flex; flex-wrap: wrap; gap: 24px; align-content: flex-start; justify-content: center; padding: 10px; background: rgba(255,255,255,.7); border-radius: 36px; }
.sticker { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #fff; border: 8px solid #ffb703; box-shadow: 0 6px 0 rgba(0,0,0,.2); display: grid; place-items: center; flex: none; }
.sticker img { width: 70%; height: 70%; }
.sticker .num { position: absolute; right: -6px; bottom: -6px; width: 52px; height: 52px; border-radius: 50%; background: #ff5a5f; color: #fff; font-size: 32px; display: grid; place-items: center; border: 4px solid #fff; }
.photo { width: 180px; height: 180px; border-radius: 24px; border: 8px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.2); object-fit: cover; flex: none; pointer-events: auto; background: #fff; }
.zoom { position: absolute; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 50; }
.zoom img { width: 640px; height: 640px; border-radius: 40px; border: 12px solid #fff; pointer-events: none; }

/* make pizza */
.pizza { position: absolute; transition: left .8s cubic-bezier(.3,1.3,.5,1), top .8s cubic-bezier(.3,1.3,.5,1), scale .8s cubic-bezier(.3,1.3,.5,1), opacity .4s; z-index: 1; touch-action: none; }
.pizza.drag { transition: none; }
.pizza.baked { filter: sepia(.35) saturate(1.5) brightness(1.05); }
.layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sauce { position: absolute; border-radius: 50%; }
.picking .topping { pointer-events: auto; touch-action: none; }
.topping { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.customer { position: absolute; left: 10px; top: 300px; width: 240px; height: 240px; transition: left .9s cubic-bezier(.3,1.2,.5,1); }
.bubble { position: absolute; left: 10px; top: 10px; min-width: 150px; padding: 8px 14px; border-radius: 36px; background: #fff; border: 6px solid #ffb703; box-shadow: 0 6px 0 #c98400; display: flex; flex-direction: column; gap: 4px; }
.bubble::after { content: ""; position: absolute; left: 60px; bottom: -34px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 30px solid #ffb703; }
.bubble .row { position: relative; display: flex; align-items: center; gap: 8px; font-size: 52px; color: #6b3e1e; line-height: 1; }
.bubble .row img { width: 68px; height: 68px; }
.bubble .row img.got { opacity: .35; }
.bubble .row .item { position: relative; display: block; width: 76px; height: 76px; }
.bubble .row .item img { width: 76px; height: 76px; }
.bubble .row .item img.mini { position: absolute; right: -8px; bottom: -6px; width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(255,255,255,1)); }
.bubble .row .check { position: absolute; right: 0; top: 4px; width: 52px; height: 52px; border-radius: 50%; background: #5ed36a; color: #fff; padding: 8px; display: none; }
.bubble .row.ok .check { display: block; }
.tray { position: absolute; bottom: 14px; display: flex; gap: 14px; z-index: 5; }
.tray button { width: 112px; height: 112px; border-radius: 32px; background: #fff; border: 6px solid #ffb703; box-shadow: 0 6px 0 #c98400; display: grid; place-items: center; }
.tray button img { width: 84px; height: 84px; }
.drag-clone { position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; z-index: 20; filter: drop-shadow(0 12px 6px rgba(0,0,0,.3)); pointer-events: none; }
.shaker { position: absolute; width: 170px; height: 170px; margin: -85px 0 0 -85px; display: grid; place-items: center; background: none; z-index: 5; }
.shaker img { width: 100%; height: 100%; filter: drop-shadow(0 6px 3px rgba(0,0,0,.3)); }
.oven { position: absolute; width: 400px; height: 400px; z-index: 2; transition: left .8s ease, opacity .5s; }
.oven.hot { animation: glow .5s ease-in-out infinite alternate; }
@keyframes glow { from { filter: drop-shadow(0 0 10px #ff9f1c) brightness(1.05); } to { filter: drop-shadow(0 0 45px #ff3d00) brightness(1.3); } }
.confetti { position: absolute; width: 16px; height: 24px; border-radius: 4px; pointer-events: none; z-index: 30; }
.fly { position: absolute; margin: -30px 0 0 -30px; width: 60px; height: 60px; pointer-events: none; z-index: 30; }
.hand { position: absolute; left: 0; top: 0; width: 140px; height: 140px; margin: -13px 0 0 -75px; pointer-events: none; z-index: 40; filter: drop-shadow(0 6px 3px rgba(0,0,0,.3)); }
.done-btn { right: 24px; top: 320px; width: 130px; height: 130px; animation: pulse 1s ease-in-out infinite; z-index: 6; }
.final-sticker { position: absolute; left: 512px; top: 330px; margin: -140px 0 0 -140px; width: 280px; height: 280px; z-index: 10; }
.final-sticker .num { width: 80px; height: 80px; font-size: 52px; }

/* overlays: gate + settings */
.overlay { position: absolute; inset: 0; background: rgba(40,25,15,.75); display: grid; place-items: center; z-index: 100; }
.panel { position: relative; width: 520px; padding: 20px; border-radius: 36px; background: #fff; border: 8px solid #ffb703; text-align: center; color: #6b3e1e; }
.panel .q { font-size: 56px; margin-bottom: 12px; }
.panel .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.panel .pad button { height: 90px; border-radius: 24px; background: #ffe9c7; font-size: 44px; box-shadow: 0 5px 0 #d9b98a; display: grid; place-items: center; }
.panel .pad button svg { width: 46px; height: 46px; color: #6b3e1e; }
.panel .pad .enter svg { color: #fff; }
.panel .pad button:active { transform: translateY(4px); }
.panel .pad .enter { background: #5ed36a; color: #fff; }
.panel .x { position: absolute; right: -14px; top: -14px; width: 70px; height: 70px; border-radius: 50%; background: #ff5a5f; color: #fff; box-shadow: 0 4px 0 #b0343a; display: grid; place-items: center; }
.panel .x svg { width: 36px; height: 36px; }
.panel.settings { text-align: left; font-size: 22px; width: 640px; }
.panel.settings h3 { margin: 4px 0 8px; font-size: 28px; }
.panel.settings .opts { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.panel.settings .opts button { min-width: 80px; height: 56px; border-radius: 16px; background: #ffe9c7; font-size: 24px; padding: 0 12px; }
.panel.settings .opts button.sel { background: #5ed36a; color: #fff; }
.panel.settings .reset { background: #ff5a5f; color: #fff; height: 56px; border-radius: 16px; padding: 0 18px; font-size: 22px; }
.shake { animation: wobble .4s; }

/* closed */
.dim { position: absolute; inset: 0; background: rgba(10,15,50,.65); }
.shutter { position: absolute; left: 150px; top: 40px; width: 724px; height: 440px; border-radius: 20px; border: 8px solid #6b4a2e; background: repeating-linear-gradient(#b9a58c 0 26px, #9c8870 26px 32px); animation: drop 1.6s cubic-bezier(.5,0,.6,1.2) both; }
@keyframes drop { from { translate: 0 -500px; } }
.moon { position: absolute; right: 60px; top: 60px; width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(#ffd23f calc(var(--p) * 1%), #3b4270 0); display: grid; place-items: center; z-index: 3; }
.moon span { width: 150px; height: 150px; border-radius: 50%; background: #1d2250; display: grid; place-items: center; }
.moon span svg { width: 90px; height: 90px; }
.zzz { position: absolute; left: 430px; top: 160px; font-size: 90px; color: #fff; z-index: 3; animation: float 2s ease-in-out infinite; }
.wave { position: absolute; bottom: 20px; width: 220px; height: 220px; z-index: 3; animation: wobble 1.2s ease-in-out infinite; }
.clock { position: absolute; right: 16px; bottom: 16px; width: 64px; height: 64px; border-radius: 50%; background: #888; opacity: .6; z-index: 4; display: grid; place-items: center; color: #fff; }
.clock svg { width: 36px; height: 36px; }
.veil { position: absolute; inset: 0; background: rgba(255,246,228,.6); }

/* captions */
.caption { position: absolute; left: 50%; top: 12px; translate: -50% 0; max-width: 760px; padding: 6px 30px; border-radius: 48px; background: #fff; color: #5a3217; font-size: 44px; line-height: 1.2; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.2); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 60; }
.caption.on { opacity: 1; }
.caption.big { font-size: 80px; line-height: 1.1; padding: 0 36px; }

/* hints */
.hint-arrow { position: absolute; width: 120px; height: 120px; pointer-events: none; z-index: 39; filter: drop-shadow(0 6px 3px rgba(0,0,0,.35)); }
.hint-arrow svg { display: block; width: 100%; height: 100%; animation: nudge .6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(22px); } }
.hint-ring { position: absolute; border-radius: 50%; border: 10px dashed rgba(255,159,28,.8); pointer-events: none; z-index: 39; animation: pulse 1.2s ease-in-out infinite; }

/* step progress strip */
.steps { position: absolute; right: 16px; top: 96px; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 4; }
.step { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 4px solid #ffb703; display: grid; place-items: center; opacity: .8; transition: all .3s; }
.step img { width: 76%; height: 76%; }
.step .sauce-dot { width: 60%; height: 60%; border-radius: 50%; background: #d8321f; }
.step b { display: none; position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: #5ed36a; color: #fff; padding: 3px; }
.step b svg { display: block; width: 100%; height: 100%; stroke-width: 9; }
.step.done b { display: block; }
.step.cur { width: 72px; height: 72px; opacity: 1; border-color: #ff9f1c; box-shadow: 0 0 0 4px #fff, 0 0 24px 8px #fff59a; }