:root {
  --cream: #fff5dc;
  --cream-2: #f8e5b8;
  --honey: #f2b84b;
  --gold: #ffd86a;
  --wood: #7a452d;
  --wood-dark: #4f2b22;
  --wood-light: #bd7441;
  --sage: #78875a;
  --plum: #60405f;
  --ink: #402a27;
  --shadow: 0 12px 34px rgba(57, 32, 23, .28);
  --soft-shadow: 0 7px 18px rgba(57, 32, 23, .22);
  font-family: "Trebuchet MS", "Avenir Next", Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #6f5237; user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.art-button { position: relative; display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 7px 6px rgba(58, 31, 20, .28)); transition: transform 120ms ease, filter 120ms ease; }
.art-button img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.art-button:active { transform: translateY(3px) scale(.96); filter: drop-shadow(0 3px 3px rgba(58, 31, 20, .24)); }

#app { position: relative; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; isolation: isolate; }
.world-art, .opening-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.world-art img, .opening-art img { width: 100%; height: 100%; object-fit: cover; }
.world-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(62,37,22,.05), rgba(60,34,24,.2)); }

.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: flex; }
.screen--opening { align-items: flex-end; justify-content: center; z-index: 10; isolation: isolate; }
.opening-art { z-index: 0; }
.screen--opening::after { content: ""; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(44,24,19,.76)); }
.opening-copy { position: relative; z-index: 2; width: min(760px, 90vw); padding: 0 24px max(28px, env(safe-area-inset-bottom)); text-align: center; color: white; text-shadow: 0 3px 15px rgba(45,22,15,.75); }
.opening-copy .eyebrow { margin: 0 0 4px; color: #ffe7a1; font-weight: 900; letter-spacing: .15em; font-size: clamp(.72rem, 1.6vw, .95rem); }
.opening-copy h1 { margin: 0; font-size: clamp(2rem, 5.4vw, 4.5rem); line-height: .98; letter-spacing: -.035em; }
.opening-copy p:not(.eyebrow) { margin: 8px 0 14px; font-size: clamp(.95rem, 2vw, 1.35rem); font-weight: 700; }

.round-button { display: inline-grid; place-items: center; border: 5px solid #fff4d2; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #ffe37c, #e8932e 65%, #b45a29); color: white; box-shadow: 0 9px 0 #7f3f27, 0 15px 28px rgba(50,24,15,.38), inset 0 2px 8px rgba(255,255,255,.65); cursor: pointer; }
.round-button:active { transform: translateY(5px); box-shadow: 0 4px 0 #7f3f27, 0 9px 18px rgba(50,24,15,.34); }
.play-button { width: clamp(82px, 11vw, 112px); height: clamp(82px, 11vw, 112px); animation: breathe 2.4s ease-in-out infinite; }

.screen--game { flex-direction: column; z-index: 2; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.hud { min-height: 62px; display: grid; grid-template-columns: 1fr minmax(210px, 38%) 1fr; align-items: start; gap: 10px; z-index: 5; }
.hud-actions { display: flex; gap: 8px; }
.icon-button { width: 52px; height: 52px; border: 3px solid #fff2cc; border-radius: 18px; color: white; background: linear-gradient(#8c5a3d, #643824); box-shadow: 0 5px 0 #40251c, var(--soft-shadow); font-size: 1.6rem; font-weight: 900; cursor: pointer; }
.icon-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #40251c; }
#soundButton { justify-self: end; }
.level-path { min-height: 54px; padding: 6px 14px 8px; border: 3px solid rgba(255,244,210,.92); border-radius: 0 0 24px 24px; background: linear-gradient(180deg, rgba(91,51,35,.95), rgba(69,38,29,.95)); box-shadow: var(--soft-shadow); text-align: center; }
.path-label { display: block; margin-bottom: 3px; color: #f8dda0; font-size: .68rem; font-weight: 900; letter-spacing: .17em; }
.level-eggs { display: flex; align-items: center; justify-content: center; gap: 7px; }
.level-egg { position: relative; width: 34px; height: 38px; flex: 0 0 auto; transition: transform .25s ease, opacity .25s ease; }
.level-egg img { width: 100%; height: 100%; object-fit: contain; }
.level-egg.done img { filter: drop-shadow(0 0 8px rgba(255,213,77,.78)); }
.level-egg.future:not(.current) { opacity: .38; filter: grayscale(.55) sepia(.12); }
.level-egg.current { transform: translateY(2px) scale(1.2); }
.level-egg.current::after { content: ""; position: absolute; inset: -2px 1px; border: 2px solid #fff2ad; border-radius: 52% 52% 47% 47%; box-shadow: 0 0 0 3px rgba(242,184,75,.3), 0 0 13px rgba(255,216,106,.65); animation: current-egg 1.35s ease-in-out infinite alternate; }

.game-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(175px, .8fr) minmax(400px, 1.8fr) minmax(140px, .6fr); align-items: center; gap: 10px; }
.guide-panel { align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; z-index: 3; }
.ori { width: min(150px, 13vw); max-height: 23vh; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(54,31,21,.24)); }
.speech-bubble { position: relative; width: min(250px, 100%); min-height: 72px; margin-top: -10px; padding: 13px 15px; border: 4px solid #d8aa62; border-radius: 25px; background: rgba(255,248,226,.96); box-shadow: var(--soft-shadow); font-size: clamp(.86rem, 1.35vw, 1.15rem); line-height: 1.18; text-align: center; font-weight: 900; }
.speech-bubble::before { content: ""; position: absolute; left: 50%; top: -16px; width: 22px; height: 22px; transform: translateX(-50%) rotate(45deg); border-left: 4px solid #d8aa62; border-top: 4px solid #d8aa62; background: #fff8e2; }
.speech-bubble.hinting { animation: bubble-pulse .8s ease-in-out 2; border-color: var(--gold); }

.puzzle-panel { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.task-stars { min-height: 42px; flex: 0 0 auto; display: flex; gap: 9px; align-items: center; justify-content: center; margin-bottom: 15px; padding: 3px 13px 5px; border: 2px solid rgba(255,240,190,.82); border-radius: 22px; background: linear-gradient(180deg, rgba(91,51,35,.88), rgba(69,38,29,.9)); box-shadow: 0 5px 13px rgba(57,32,23,.2); z-index: 4; }
.task-star { position: relative; width: 30px; height: 30px; flex: 0 0 auto; transition: transform .22s ease; }
.task-star img { width: 100%; height: 100%; object-fit: contain; }
.task-star.done img { filter: drop-shadow(0 0 7px rgba(255,213,77,.9)); }
.task-star.current { transform: scale(1.17); }
.task-star.current::after { content: ""; position: absolute; inset: -2px; border: 2px solid #fff2ad; border-radius: 50%; box-shadow: 0 0 0 3px rgba(242,184,75,.3); animation: current-star 1.35s ease-in-out infinite alternate; }

.arena { position: relative; width: min(55vw, 650px); aspect-ratio: 1.34; max-height: calc(100dvh - 245px); border: 0; border-radius: 48% 48% 43% 43%; background: radial-gradient(ellipse at center, rgba(230,180,89,.18) 0 52%, rgba(122,75,37,.07) 70%, transparent 74%); box-shadow: inset 0 0 55px rgba(255,226,145,.16); overflow: visible; }
.arena.shape-wide { aspect-ratio: 1.55; border-radius: 42%; }
.arena.shape-egg { aspect-ratio: 1.18; border-radius: 50% 50% 44% 44%; }
.arena-glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,227,124,.16), transparent 68%); }
.hano { position: absolute; left: 50%; top: 50%; width: 31%; height: 64%; object-fit: contain; transform: translate(-50%, -48%); filter: drop-shadow(0 8px 8px rgba(72,43,27,.28)); z-index: 2; transition: .25s; }
.hano.celebrate { animation: hano-happy .72s ease-in-out 3; }
.hano.peek { animation: hano-peek .75s ease-in-out 2; }
.hano-walker { position: absolute; left: 46%; top: 42%; width: 17%; height: 38%; object-fit: contain; opacity: 0; z-index: 7; filter: drop-shadow(0 5px 5px rgba(72,43,27,.25)); offset-path: ellipse(39% 34% at 50% 50%); offset-rotate: 0deg; pointer-events: none; }
.hano-walker.walking { opacity: 1; animation: walk-loop 2.3s ease-in-out forwards; }
.arena.proving .hano { opacity: 0; }
.proof-ring { position: absolute; inset: 3%; width: 94%; height: 94%; overflow: visible; z-index: 1; }
.proof-ring ellipse { fill: none; stroke: #ffdd62; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 5; filter: drop-shadow(0 0 3px #ffb436); opacity: 0; }
.proof-ring.active ellipse { opacity: 1; animation: proof-draw 2.25s ease-in-out forwards; }

.fence-slots { position: absolute; inset: 0; z-index: 5; }
.fence-slot { position: absolute; width: 24%; height: 21%; display: grid; place-items: center; border: 0; background: transparent; padding: 0; cursor: default; transform: translate(-50%, -50%); }
.fence-slot.is-gap { cursor: pointer; }
.fence-slot.is-gap::before { content: ""; position: absolute; width: 100%; aspect-ratio: 2 / 1; opacity: .38; background: url("assets/props/prop-barnyard-fence-panel-premium.webp") center / contain no-repeat; transform: rotate(var(--angle)); filter: saturate(.32) brightness(1.72) sepia(.26) drop-shadow(0 0 9px rgba(255,218,95,.9)); pointer-events: none; }
.fence-slot.is-gap::after { content: ""; position: absolute; width: 88%; height: 58%; border: 4px dashed rgba(255,247,205,.98); border-radius: 12px; background: linear-gradient(180deg, rgba(255,235,145,.2), rgba(255,208,83,.13)); box-shadow: 0 0 0 5px rgba(255,209,87,.12), 0 0 22px rgba(255,218,95,.58); transform: rotate(var(--angle)); animation: gap-glow 1.65s ease-in-out infinite; }
.fence-slot.has-piece::after { display: none; }
.fence-slot.has-piece::before { display: none; }
.fence-slot.alert::after { border-color: #ffd467; background: rgba(255,170,72,.25); animation: gap-alert .42s ease-in-out 3; }
.fence-slot.hint-target::after { border-color: #fff7ba; box-shadow: 0 0 0 6px rgba(255,212,79,.38), 0 0 25px #ffd45a; }

.slot-0 { left: 50%; top: 4%; --angle: 0deg; }
.slot-1 { left: 79%; top: 17%; --angle: 33deg; }
.slot-2 { left: 90%; top: 42%; --angle: 90deg; }
.slot-3 { left: 88%; top: 70%; --angle: 90deg; }
.slot-4 { left: 72%; top: 82%; --angle: -28deg; }
.slot-5 { left: 42%; top: 88%; --angle: 0deg; }
.slot-6 { left: 15%; top: 82%; --angle: 31deg; }
.slot-7 { left: 10%; top: 55%; --angle: 90deg; }
.slot-8 { left: 14%; top: 27%; --angle: 90deg; }
.slot-9 { left: 30%; top: 8%; --angle: -31deg; }
.shape-wide .slot-1 { left: 81%; top: 19%; }
.shape-wide .slot-4 { left: 75%; top: 82%; }
.shape-wide .slot-6 { left: 12%; top: 81%; }
.shape-egg .slot-2 { left: 89%; top: 39%; }
.shape-egg .slot-3 { left: 88%; top: 67%; }

.fence-piece { position: relative; display: block; width: 106%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; border: 0; user-select: none; pointer-events: none; filter: drop-shadow(0 5px 4px rgba(55,30,18,.34)); transform: rotate(var(--piece-angle)); transform-origin: center; }
.piece-h { --piece-angle: 0deg; }
.piece-v { --piece-angle: 90deg; }
.piece-d1 { --piece-angle: 31deg; }
.piece-d2 { --piece-angle: -31deg; }
.fence-slot.is-fixed .fence-piece { opacity: .96; }
.fence-slot.has-piece .fence-piece { animation: piece-land .35s cubic-bezier(.2,1.4,.5,1); }
.fence-slot.retry .fence-piece { filter: saturate(.7); animation: piece-wobble .42s ease-in-out 2; }

.workbench { flex: 0 0 auto; min-height: 112px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; width: min(760px, 80vw); margin: 0 auto; padding: 8px 14px 10px; border: 4px solid rgba(255,239,204,.9); border-radius: 30px; background: linear-gradient(180deg, rgba(95,53,35,.96), rgba(65,34,27,.97)); box-shadow: var(--shadow); z-index: 8; }
.workbench-label { display: block; margin-bottom: 1px; color: #ffe6a3; font-weight: 1000; font-size: .66rem; letter-spacing: .14em; text-align: center; }
.piece-tray { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.piece-choice { width: clamp(78px, 8vw, 104px); height: 68px; display: grid; place-items: center; border: 3px solid #e8bd73; border-radius: 20px; background: linear-gradient(#fff3cf, #ebcc8c); box-shadow: 0 5px 0 #9d623c, inset 0 2px 5px rgba(255,255,255,.7); cursor: pointer; transition: .2s ease; }
.piece-choice .fence-piece { width: 108%; height: auto; }
.piece-choice.selected { transform: translateY(-8px) scale(1.05); border-color: white; background: linear-gradient(#fff9df, #ffd76b); box-shadow: 0 6px 0 #b36b33, 0 0 0 5px rgba(255,218,100,.35), 0 0 22px #ffcf54; }
.piece-choice.used { opacity: .15; pointer-events: none; transform: scale(.88); }
.piece-choice.hint-piece { animation: choice-hint .7s ease-in-out infinite alternate; }
.check-button { width: 82px; height: 72px; border: 4px solid #fff0b9; border-radius: 25px; background: linear-gradient(#e7a536, #bb642c); color: white; font-size: 1.45rem; font-weight: 1000; box-shadow: 0 7px 0 #71371f, inset 0 3px 7px rgba(255,255,255,.42); cursor: pointer; }
.check-button:disabled { cursor: default; filter: grayscale(.65); opacity: .52; box-shadow: 0 3px 0 #5b4034; transform: translateY(4px); }
.check-button:not(:disabled) { animation: ok-ready 1.25s ease-in-out infinite alternate; }
.skip-demo { position: absolute; right: 14px; bottom: 130px; z-index: 20; width: 52px; height: 48px; border: 3px solid #fff0c8; border-radius: 18px; background: #704732; color: white; box-shadow: var(--soft-shadow); font-weight: 900; }

.screen--overlay { z-index: 30; align-items: center; justify-content: center; padding: 22px; background: rgba(54,31,25,.46); backdrop-filter: blur(5px); }
.reward-card, .finale-card { position: relative; width: min(650px, 92vw); max-height: 92dvh; overflow: hidden; padding: 24px 26px; border: 6px solid #fff1bd; border-radius: 44px; background: linear-gradient(160deg, #fff8df, #f3d99c); box-shadow: 0 24px 70px rgba(46,25,17,.48), inset 0 0 40px rgba(255,255,255,.65); text-align: center; }
.reward-card h2, .finale-card h2 { position: relative; margin: -6px 0 4px; color: var(--wood); font-size: clamp(1.8rem, 4.8vw, 3.4rem); line-height: 1; }
.reward-card p, .finale-card p { position: relative; margin: 6px 0 14px; font-size: clamp(.95rem, 2vw, 1.2rem); font-weight: 800; }
.highfive { position: relative; width: min(420px, 68vw); max-height: 50dvh; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(80,44,27,.22)); animation: reward-pop .6s cubic-bezier(.2,1.4,.4,1); }
.reward-progress { position: relative; min-height: 100px; display: grid; grid-template-columns: 76px auto; align-items: center; justify-content: center; gap: 12px; }
.reward-egg { width: 76px; height: 84px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(126,69,24,.25)); animation: egg-in .55s both; }
.reward-task-stars { display: grid; grid-template-columns: repeat(2, 34px); gap: 3px; padding: 6px 8px; border: 2px solid rgba(181,119,54,.3); border-radius: 18px; background: rgba(255,249,224,.52); }
.reward-task-stars img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(126,69,24,.22)); animation: star-in .48s both; }
.reward-actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; }
.reward-action { width: 58px; height: 58px; }
.next-button { width: 76px; height: 76px; }
.overlay-sound { position: absolute; z-index: 5; top: 12px; right: 12px; width: 52px; height: 52px; }
.reward-rays { position: absolute; width: 640px; aspect-ratio: 1; left: 50%; top: 32%; transform: translate(-50%,-50%); background: repeating-conic-gradient(from 0deg, rgba(255,213,95,.24) 0 8deg, transparent 8deg 18deg); animation: slow-spin 28s linear infinite; pointer-events: none; }

.finale-screen { background: radial-gradient(circle at 50% 40%, rgba(255,223,122,.35), rgba(54,31,25,.65)); }
.finale-card { background: linear-gradient(155deg, #fff7d9, #f2c76f); }
.finale-hano { width: min(220px, 42vw); max-height: 40dvh; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(74,40,23,.25)); animation: finale-bounce .8s ease-in-out 3; }
.medal { width: 86px; height: 86px; display: block; margin: 6px auto; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(126, 69, 24, .28)); }
.finale-eggs { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 2px auto 8px; }
.finale-egg { width: 38px; height: 44px; display: block; }
.finale-egg img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(103,57,25,.23)); }
.finale-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.menu-button { min-height: 54px; border: 3px solid #fff0bf; border-radius: 20px; background: linear-gradient(#8c5a3d, #633623); color: white; box-shadow: 0 5px 0 #40241b; font-weight: 900; cursor: pointer; }
.menu-sound-icon { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; }
#soundButton { display: flex; align-items: center; justify-content: center; gap: 10px; }
.finale-art-button { width: 58px; height: 58px; }

.menu-dialog { border: 0; padding: 0; background: transparent; overflow: visible; }
.menu-dialog::backdrop { background: rgba(54,31,25,.58); backdrop-filter: blur(6px); }
.menu-card { position: relative; width: min(420px, 88vw); padding: 26px; border: 5px solid #fff0bd; border-radius: 34px; background: linear-gradient(#fff8de, #efcf8b); box-shadow: var(--shadow); text-align: center; }
.menu-card h2 { margin: 0 0 18px; color: var(--wood); font-size: 2rem; }
.menu-button { width: 100%; margin: 6px 0; }
.dialog-close { position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; border: 3px solid #f5dba5; border-radius: 17px; background: var(--plum); color: white; font-size: 1.8rem; }
.level-buttons { display: grid; grid-template-columns: repeat(5, 58px); gap: 10px; justify-content: center; }
.level-select { position: relative; width: 68px; height: 74px; border: 0; border-radius: 50% 50% 45% 45%; background: transparent; filter: drop-shadow(0 5px 4px rgba(91,48,24,.28)); color: var(--wood-dark); font-size: 1.05rem; font-weight: 1000; }
.level-select-egg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.level-select-number { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 13px auto 0; border: 2px solid rgba(255,245,211,.88); border-radius: 50%; background: rgba(102,59,36,.78); color: #fff4cf; text-shadow: 0 2px 2px rgba(57,30,20,.45); }
.level-select.locked { filter: grayscale(1); opacity: .5; }
.level-select.active { filter: drop-shadow(0 0 10px rgba(255,216,106,.95)) drop-shadow(0 6px 4px rgba(91,48,24,.28)); transform: scale(1.08); }
.level-select.completed::after { content: ""; position: absolute; inset: 4px 7px; border: 3px solid rgba(255,226,133,.88); border-radius: 52% 52% 46% 46%; box-shadow: 0 0 9px rgba(255,216,106,.7); }
.is-paused .arena *, .is-paused .workbench *, .is-paused .guide-panel * { animation-play-state: paused !important; }

.corner-rune { position: fixed; left: max(6px, env(safe-area-inset-left)); bottom: max(5px, env(safe-area-inset-bottom)); width: clamp(38px, 5.8vw, 66px); height: auto; z-index: 100; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(54,30,20,.35)); }
#fx-layer { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; contain: strict; }
#fx-layer::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 44%, rgba(255,244,180,.34), rgba(242,193,65,.12) 38%, rgba(61,50,38,.17) 100%); pointer-events: none; }
#fx-layer.juice-bloom::before { animation: juice-bloom 1.35s ease-in-out both; }
.fx-particle, .fx-ambient, .fx-flying-star, .fx-flying-egg, .fx-thought { position: fixed; display: block; pointer-events: none; will-change: transform, opacity; }
.fx-particle { left: 0; top: 0; width: var(--size, 9px); height: var(--size, 9px); background: var(--particle-color, #f2c141); box-shadow: 0 0 8px rgba(255,226,119,.72); animation: juice-burst var(--life, 720ms) cubic-bezier(.16,.72,.28,1) forwards; }
.fx-particle.fx-straw { width: calc(var(--size, 8px) * 1.9); height: calc(var(--size, 8px) * .38); border-radius: 999px; box-shadow: 0 0 5px rgba(255,225,139,.42); }
.fx-particle.fx-petal { border-radius: 70% 30% 68% 32%; }
.fx-particle.fx-glint { border-radius: 2px; transform: rotate(45deg); }
.fx-ambient { z-index: -1; opacity: .34; }
.fx-ambient.fx-ambient-straw { width: 17px; height: 4px; border-radius: 99px; background: #e8c56b; box-shadow: 0 0 5px rgba(255,230,151,.35); animation: ambient-straw var(--ambient-life, 14s) linear infinite; animation-delay: var(--ambient-delay, 0s); }
.fx-ambient.fx-ambient-feather { width: 9px; height: 24px; border-radius: 80% 20% 75% 25%; background: linear-gradient(90deg, rgba(255,248,220,.25), rgba(255,248,220,.78), rgba(229,203,146,.28)); animation: ambient-feather var(--ambient-life, 16s) ease-in-out infinite; animation-delay: var(--ambient-delay, 0s); }
#fx-layer:not(.is-ambient) .fx-ambient { display: none; }
.fx-flying-star { left: 0; top: 0; z-index: 24; width: var(--star-size, 76px); height: var(--star-size, 76px); overflow: visible; isolation: isolate; }
.fx-flying-star img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255,210,62,.98)) drop-shadow(0 9px 7px rgba(98,54,24,.25)); animation: flying-star-heartbeat .46s ease-in-out infinite alternate; }
.fx-flying-star::before { content: ""; position: absolute; inset: -36%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,253,213,.92) 0 13%, rgba(255,218,79,.55) 31%, rgba(242,193,65,.16) 53%, transparent 72%); animation: flying-star-halo .66s ease-in-out infinite alternate; }
.fx-flying-star::after { content: ""; position: absolute; left: 39%; top: 62%; z-index: -1; width: 22%; height: 118%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,245,169,.88), rgba(255,207,64,.4) 38%, transparent 92%); filter: blur(4px); transform-origin: 50% 0; animation: flying-star-tail .5s ease-in-out infinite alternate; }
.fx-star-spark { position: absolute; z-index: 3; width: 14%; height: 14%; background: #fffbe1; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); filter: drop-shadow(0 0 4px rgba(255,216,74,.95)); animation: flying-star-spark .58s ease-in-out infinite; }
.fx-star-spark.spark-a { left: -8%; top: 15%; animation-delay: -.12s; }
.fx-star-spark.spark-b { right: -14%; top: 42%; animation-delay: -.38s; }
.fx-star-spark.spark-c { left: 12%; bottom: -13%; animation-delay: -.25s; }
.fx-flying-egg { left: 0; top: 0; width: 48px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,221,128,.8)) drop-shadow(0 7px 6px rgba(98,54,24,.22)); }
.fx-thought { width: 10px; height: 10px; border-radius: 50%; background: #fff4c5; box-shadow: 15px -9px 0 -1px #f5d788, 31px -3px 0 1px #fff4c5, 0 0 9px rgba(242,193,65,.55); animation: thought-drift 1.25s ease-in-out forwards; }
.piece-choice.juice-touch { animation: juice-touch 190ms cubic-bezier(.22,.9,.3,1.2); }
.fence-slot.juice-touch { animation: juice-slot-touch 190ms cubic-bezier(.22,.9,.3,1.2); }
.fence-piece.juice-gold-flash { animation: juice-gold-flash 330ms ease-out both !important; }
.fence-slot.juice-gag .fence-piece { animation: juice-panel-gag 1.25s cubic-bezier(.22,.8,.3,1) both; }
.hano.juice-ma08 { animation: juice-breath 2s ease-in-out both; }
.hano.juice-ma18 { animation: juice-think 2s ease-in-out both; }
.hano.juice-ma43 { animation: juice-sneeze 2.05s ease-in-out both; }
.hano.juice-ma52 { animation: juice-feather-shake 1.9s ease-in-out both; }
.hano.juice-ma53 { animation: juice-wing-fan 1.95s ease-in-out both; }
.piece-choice.juice-idle, .check-button.juice-idle { animation: juice-idle 2s ease-in-out infinite !important; }
.fence-slot.juice-idle { animation: juice-slot-idle 2s ease-in-out infinite !important; }
.task-star.juice-task-land { animation: juice-task-land .78s cubic-bezier(.22,.9,.3,1.2) both; }
.task-star.juice-task-land::before { content: ""; position: absolute; inset: -10px; z-index: -1; border: 3px solid rgba(255,239,145,.96); border-radius: 50%; box-shadow: 0 0 15px rgba(242,193,65,.82); animation: juice-star-ring .78s ease-out both; }
.task-star img.juice-star-land { animation: juice-star-land .72s cubic-bezier(.22,.9,.3,1.2) both; }
.finale-egg img.juice-egg-await { opacity: .14; transform: scale(.35); }
.finale-egg img.juice-egg-land { animation: juice-egg-land .55s cubic-bezier(.22,.9,.3,1.2) both; }
.juice-paused #fx-layer * { animation-play-state: paused !important; }
.fx-rare-feather { position: fixed; left: 0; top: 0; width: 13px; height: 34px; border-radius: 80% 20% 75% 25%; background: linear-gradient(90deg, rgba(255,248,220,.18), rgba(255,248,220,.9), rgba(218,185,119,.3)); filter: drop-shadow(0 2px 5px rgba(87,52,28,.2)); pointer-events: none; animation: rare-feather 3.4s ease-in-out forwards; }
.sparkles i, .confetti i { position: absolute; pointer-events: none; }
.sparkles i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px #fff4a6; animation: sparkle-out .9s ease-out forwards; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { top: -10%; width: 10px; height: 18px; border-radius: 6px; animation: confetti-fall 3.6s linear infinite; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes bubble-pulse { 50% { transform: scale(1.035); } }
@keyframes gap-glow { 50% { opacity: .62; transform: rotate(var(--angle)) scale(1.07); } }
@keyframes gap-alert { 35% { transform: rotate(var(--angle)) scale(1.12); } }
@keyframes piece-land { from { transform: rotate(var(--piece-angle)) scale(.25); opacity: 0; } }
@keyframes piece-wobble { 25% { transform: rotate(calc(var(--piece-angle) - 7deg)); } 75% { transform: rotate(calc(var(--piece-angle) + 7deg)); } }
@keyframes choice-hint { to { transform: translateY(-8px) scale(1.06); box-shadow: 0 7px 0 #a55c2d, 0 0 24px #ffe17a; } }
@keyframes ok-ready { to { filter: brightness(1.12); transform: translateY(-2px); } }
@keyframes hano-happy { 50% { transform: translate(-50%, -55%) rotate(-3deg) scale(1.05); } }
@keyframes finale-bounce { 50% { transform: translateY(-7px) rotate(-3deg) scale(1.035); } }
@keyframes hano-peek { 45% { transform: translate(-45%, -48%) rotate(6deg); } }
@keyframes walk-loop { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes proof-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sparkle-out { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
@keyframes reward-pop { from { opacity: 0; transform: scale(.72); } }
@keyframes star-in { from { opacity: 0; transform: translateY(20px) scale(.3) rotate(-20deg); } }
@keyframes egg-in { from { opacity: 0; transform: translateY(18px) scale(.45) rotate(-8deg); } }
@keyframes slow-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes confetti-fall { to { transform: translate(var(--drift), 115dvh) rotate(540deg); } }
@keyframes current-star { to { opacity: .55; transform: scale(1.08); } }
@keyframes current-egg { to { opacity: .6; transform: scale(1.05); } }
@keyframes juice-touch { 45% { transform: scale(1.18); } }
@keyframes juice-slot-touch { 45% { transform: translate(-50%,-50%) scale(1.16); } }
@keyframes juice-gold-flash { 38% { filter: brightness(1.62) saturate(1.18) drop-shadow(0 0 15px #f2c141); transform: rotate(var(--piece-angle)) scale(1.08); } }
@keyframes juice-panel-gag { 22% { transform: rotate(calc(var(--piece-angle) - 8deg)) translateY(-7px); } 48% { transform: rotate(calc(var(--piece-angle) + 7deg)) translateY(-2px); } 72% { transform: rotate(calc(var(--piece-angle) - 3deg)); } }
@keyframes juice-breath { 45% { transform: translate(-50%,-50%) scale(1.055, .96); } }
@keyframes juice-think { 35% { transform: translate(-50%,-51%) rotate(-4deg); } 70% { transform: translate(-50%,-51%) rotate(4deg); } }
@keyframes juice-sneeze { 35% { transform: translate(-50%,-48%) scale(1.04) rotate(-4deg); } 48% { transform: translate(-47%,-48%) scale(.94) rotate(7deg); } 68% { transform: translate(-50%,-50%) scale(1.03); } }
@keyframes juice-feather-shake { 18%, 42%, 66% { transform: translate(-52%,-48%) rotate(-4deg); } 30%, 54%, 78% { transform: translate(-48%,-48%) rotate(4deg); } }
@keyframes juice-wing-fan { 28% { transform: translate(-50%,-50%) rotate(-4deg) scale(1.025); } 56% { transform: translate(-50%,-48%) rotate(4deg) scale(.985); } }
@keyframes juice-idle { 50% { transform: scale(1.045); filter: brightness(1.06) drop-shadow(0 0 8px rgba(242,193,65,.45)); } }
@keyframes juice-slot-idle { 50% { transform: translate(-50%,-50%) scale(1.045); filter: brightness(1.06) drop-shadow(0 0 8px rgba(242,193,65,.45)); } }
@keyframes juice-burst { from { opacity: .98; transform: translate3d(var(--ox),var(--oy),0) rotate(var(--rot,0deg)) scale(.55); } 55% { opacity: 1; } to { opacity: 0; transform: translate3d(calc(var(--ox) + var(--dx)),calc(var(--oy) + var(--dy)),0) rotate(calc(var(--rot,0deg) + 150deg)) scale(.16); } }
@keyframes ambient-straw { from { transform: translate3d(var(--ambient-x), -8vh, 0) rotate(0deg); } to { transform: translate3d(calc(var(--ambient-x) + var(--ambient-drift)), 108vh, 0) rotate(310deg); } }
@keyframes ambient-feather { 0% { transform: translate3d(var(--ambient-x), -10vh, 0) rotate(-12deg); } 48% { transform: translate3d(calc(var(--ambient-x) + 28px), 48vh, 0) rotate(18deg); } 100% { transform: translate3d(calc(var(--ambient-x) - 8px), 108vh, 0) rotate(-20deg); } }
@keyframes thought-drift { 0% { opacity: 0; transform: translate3d(var(--tx),var(--ty),0) scale(.45); } 25%, 72% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--tx),calc(var(--ty) - 34px),0) scale(1); } }
@keyframes juice-star-land { from { opacity: .25; transform: scale(.3) rotate(-18deg); } 60% { opacity: 1; transform: scale(1.28) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes flying-star-heartbeat { to { transform: scale(1.1) rotate(3deg); } }
@keyframes flying-star-halo { from { opacity: .6; transform: scale(.82); } to { opacity: 1; transform: scale(1.08); } }
@keyframes flying-star-tail { from { opacity: .52; transform: scaleY(.76); } to { opacity: .88; transform: scaleY(1.08); } }
@keyframes flying-star-spark { 0%, 100% { opacity: .18; transform: scale(.35) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(90deg); } }
@keyframes juice-task-land { 48% { transform: scale(1.42) rotate(-5deg); } 72% { transform: scale(.92) rotate(3deg); } }
@keyframes juice-star-ring { from { opacity: .95; transform: scale(.32); } to { opacity: 0; transform: scale(1.42); } }
@keyframes juice-egg-land { from { opacity: .25; transform: scale(.3) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.2) rotate(5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes juice-bloom { 0% { opacity: 0; } 48% { opacity: .25; } 100% { opacity: 0; } }
@keyframes rare-feather { 0% { opacity: 0; transform: translate3d(-24px,18vh,0) rotate(-18deg); } 22%, 78% { opacity: .72; } 52% { transform: translate3d(38px,29vh,0) rotate(24deg); } 100% { opacity: 0; transform: translate3d(-8px,42vh,0) rotate(-12deg); } }

/* 2026-09 clarity pass: direct controls, explicit stars, and readable fence panels. */
.screen--game { padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.hud { position: absolute; inset: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto max(12px, env(safe-area-inset-left)); min-height: 76px; grid-template-columns: auto 1fr minmax(250px, 340px); align-items: start; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-controls { display: flex; align-items: flex-start; gap: 8px; }
.icon-art-button { width: 64px; height: 64px; }
.level-path { justify-self: center; width: min(350px, 40vw); min-height: 54px; padding: 7px 12px 8px; border-radius: 0 0 26px 26px; }
.level-eggs { gap: clamp(3px, .55vw, 7px); }
.level-egg { width: clamp(30px, 3.15vw, 40px); height: clamp(34px, 3.55vw, 45px); }
.guide-panel { align-self: start; min-width: 0; display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: flex-start; gap: 4px; }
.ori-button { flex: 0 0 auto; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ori { width: 88px; height: 88px; max-height: none; object-fit: contain; transition: transform .2s ease; }
.ori-button:active .ori { transform: scale(.94); }
.ori-button.replaying .ori { animation: ori-listen .55s ease-in-out 2; }
.speech-bubble { width: min(240px, 21vw); min-height: 62px; margin: 8px 0 0; padding: 11px 13px; border-width: 3px; border-radius: 21px; font-size: clamp(.76rem, 1.15vw, 1rem); display: grid; place-items: center; }
.speech-bubble::before { left: auto; right: -9px; top: 25px; width: 16px; height: 16px; transform: rotate(135deg); border-width: 3px; }
.game-layout { width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 74px 84px 142px; }
.puzzle-panel { width: 100%; justify-content: flex-start; }
.arena { width: min(64vw, 720px); max-height: calc(100dvh - 342px); }
.arena.shape-kite { aspect-ratio: 1.26; border-radius: 35% 48% 38% 52%; transform: rotate(-1deg); }
.arena.shape-kite > * { transform-origin: center; }
.helper-panel { display: none !important; }
.workbench { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100vw - 190px)); min-height: 104px; margin: 0; padding: 7px 14px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 28px; }
.piece-tray { min-height: 58px; flex-wrap: wrap; gap: 7px; }
.piece-choice { width: clamp(68px, 7vw, 92px); height: 58px; border-radius: 18px; }
.check-button { width: 72px; height: 72px; border: 0; border-radius: 50%; background: transparent url("assets/ui/button-check-normal.webp") center / contain no-repeat; color: transparent; cursor: pointer; filter: drop-shadow(0 8px 6px rgba(25, 95, 30, .34)); }
.check-button:disabled { background-image: url("assets/ui/button-check-disabled.webp"); filter: grayscale(1) sepia(.12) brightness(.78) drop-shadow(0 4px 4px rgba(58, 45, 35, .2)); opacity: .68; box-shadow: none; transform: none; }
.skip-demo { right: 104px; bottom: 24px; }
.level-buttons { grid-template-columns: repeat(3, 68px); gap: 10px 14px; }
@keyframes ori-listen { 50% { transform: rotate(-5deg) scale(1.05); } }

@media (orientation: portrait), (max-width: 760px) {
  .screen--opening::after { inset: 50% 0 0; }
  .opening-copy { padding-bottom: max(34px, env(safe-area-inset-bottom)); }
  .opening-copy h1 { font-size: clamp(2rem, 10vw, 3.1rem); }
  .opening-copy p:not(.eyebrow) { font-size: clamp(.9rem, 4vw, 1.1rem); }
  .play-button { width: 82px; height: 82px; }
  .screen--game { padding-inline: max(7px, env(safe-area-inset-left)); }
  .hud { inset: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) auto max(7px, env(safe-area-inset-left)); min-height: 122px; grid-template-columns: auto 1fr; gap: 8px; }
  .hud-controls { gap: 4px; }
  .icon-art-button { width: 48px; height: 48px; }
  .level-path { justify-self: end; width: min(230px, calc(100vw - 172px)); min-width: 0; min-height: 46px; padding: 4px 6px 5px; border-radius: 0 0 20px 20px; }
  .level-eggs { gap: 2px; }
  .level-egg { width: clamp(24px, 6.5vw, 29px); height: clamp(28px, 7.2vw, 33px); }
  .guide-panel { position: absolute; top: 54px; right: 0; width: min(330px, calc(100vw - 18px)); flex-direction: row-reverse; }
  .ori-button, .ori { width: 67px; height: 67px; }
  .speech-bubble { width: min(252px, calc(100vw - 96px)); min-height: 52px; margin-top: 5px; padding: 8px 10px; border-radius: 18px; font-size: clamp(.7rem, 3vw, .86rem); }
  .speech-bubble::before { top: 20px; }
  .game-layout { display: flex; padding: 118px 0 142px; }
  .puzzle-panel { height: 100%; justify-content: flex-start; }
  .task-stars { min-height: 38px; gap: 7px; margin-bottom: 15px; padding: 2px 11px 4px; }
  .task-star { width: 27px; height: 27px; }
  .arena { width: min(94vw, 510px); height: min(calc(100dvh - 414px), 436px); max-height: none; aspect-ratio: auto; }
  .fence-piece { width: 128%; }
  .fence-slot.is-gap::before { width: 120%; }
  .fence-slot.is-gap::after { width: 112%; }
  .arena.shape-wide, .arena.shape-egg, .arena.shape-kite { aspect-ratio: auto; }
  .hano { width: 35%; height: 61%; }
  .hano-walker { width: 18%; height: 33%; }
  .workbench { width: min(292px, calc(100vw - 102px)); min-height: 126px; padding: 6px 7px 7px; border-width: 3px; border-radius: 22px; gap: 2px; }
  .piece-tray { min-height: 54px; gap: 4px; }
  .piece-choice { width: clamp(52px, 13vw, 62px); height: 52px; border-radius: 14px; border-width: 2px; }
  .check-button { width: 62px; height: 62px; border-radius: 50%; }
  .skip-demo { right: 8px; bottom: 112px; }
  .highfive { max-height: 43dvh; width: min(430px, 82vw); }
  .reward-card, .finale-card { padding: 18px 16px; border-radius: 34px; }
  .reward-card h2, .finale-card h2 { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .level-buttons { grid-template-columns: repeat(3, 68px); }
  .reward-progress { min-height: 88px; grid-template-columns: 66px auto; gap: 9px; }
  .reward-egg { width: 66px; height: 72px; }
  .reward-task-stars { grid-template-columns: repeat(2, 30px); }
  .reward-task-stars img { width: 30px; height: 30px; }
  .finale-eggs { min-height: 40px; gap: 3px; margin-bottom: 6px; }
  .finale-egg { width: 31px; height: 37px; }
}

@media (min-width: 480px) and (max-width: 760px) and (orientation: portrait) {
  .hud { min-height: 132px; gap: 8px; }
  .hud-controls { gap: 7px; }
  .icon-art-button { width: 56px; height: 56px; }
  .level-path { width: min(272px, calc(100vw - 198px)); padding: 5px 7px 6px; }
  .level-egg { width: 32px; height: 36px; }
  .guide-panel { top: 66px; right: 8px; width: min(360px, calc(100vw - 24px)); }
  .ori-button, .ori { width: 72px; height: 72px; }
  .speech-bubble { width: min(270px, calc(100vw - 112px)); }
  .game-layout { padding: 136px 0 176px; }
  .arena { width: min(72vw, 460px); height: min(calc(100dvh - 360px), 480px); }
  .fence-slot { width: 20%; height: 17%; }
  .fence-piece { width: 145%; height: auto; }
  .fence-slot.is-gap::before { width: 136%; }
  .fence-slot.is-gap::after { width: 124%; }
  .hano { width: 29%; height: 55%; }
  .workbench { width: min(360px, calc(100vw - 90px)); min-height: 142px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .piece-choice { width: 62px; height: 58px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  .guide-panel { top: 52px; }
  .ori-button, .ori { width: 58px; height: 58px; }
  .speech-bubble { min-height: 44px; font-size: .68rem; }
  .task-stars { min-height: 34px; }
  .task-star { width: 24px; height: 24px; }
  /* Keep every lower fence target fully above the fixed workbench at 360x640. */
  .arena { height: clamp(250px, calc(100dvh - 390px), 310px); max-height: none; }
  .workbench { min-height: 112px; }
  .piece-tray { min-height: 50px; }
  .piece-choice { min-height: 50px; height: 50px; }
  .check-button { width: 54px; height: 54px; }
  .highfive { max-height: 37dvh; }
  .finale-hano { max-height: 31dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #fx-layer .fx-particle, #fx-layer .fx-ambient, #fx-layer .fx-flying-star, #fx-layer .fx-flying-egg, #fx-layer .fx-thought, #fx-layer .fx-rare-feather { display: none !important; }
  .fence-piece.juice-gold-flash { filter: brightness(1.2) drop-shadow(0 0 7px #f2c141); }
}