/* Hallmark · shape: app screen (game scenes on /main) · genre: playful · theme: custom (kampung sticker, kept from v1) · posture: full-palette
 * nav: none (shell bottom bar) · signature: the sticker kid acting out your pick on a drawn kampung map · states: hover, focus, active, disabled, picked
 * paper: --paper over --cream-d · accent: chili for the one save action, leaf for a picked spot, turmeric for you · display: Plus Jakarta Sans 800 · contrast: pass · v2.0.0
 * pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, ambient loops are many, so the loud ones (marble shot, payoff pop, save nudge, live dot) are finite and the rest stay under 4deg or 40px
 */
/* Hallmark · answered F7 · the pill radius on the live count chip is a status tag, and the other pill selectors in that finding belong to style.css · the chip is a tag, not a container */
/* Hallmark · answered F15 · nested radii step 16, 12, 8: scene shell, then cards and buttons, then payoff chips · one primary (save) per view, everything else is paper */
/* Hallmark · answered F4 · option buttons and the two team buttons are one choice group in paper, the picked one fills leaf · not competing primaries, the single chili fill is save */

/* =====================================================================
   Scene art tokens. Declared once, here; the scene code reads them through var(--art-*) so no colour literal lives in JS.
   Everything that has a twin in style.css points at it.
   ===================================================================== */
:root {
  --art-sky: var(--scene-sky-3);
  --art-sky-lo: #E6F6FD;
  --art-grass: #93CF6E;
  --art-grass-d: #6CB04F;
  --art-dirt: #EBCB9B;
  --art-dirt-d: #D3AC77;
  --art-wood: #B9824A;
  --art-wood-d: #8D5F34;
  --art-trunk: #9A6A3C;
  --art-roof: #C8553B;
  --art-roof-d: #8E3322;
  --art-roof-2: #B04830;
  --art-roof-3: #D18A2B;
  --art-dark: #2B2724;
  --art-skin-1: #F4CFA4;
  --art-skin-2: #DCA876;
  --art-skin-3: #BC7F4F;
  --art-skin-4: #8E5C3A;
  --art-hair-2: #5A3A22;
  --art-shorts: #3E5C8A;
  --art-sarong: #7A5C8F;
  --art-leaf-lo: #B7D98F;
  --art-far: #4F6B45;
  --art-rope: #E8BC72;
  --art-rope-d: #B98A44;
  --art-pebble: #9AA1A6;
  --art-chalk: var(--paper-a-40);
  --art-chalk-pick: rgba(246, 184, 0, .72);
  --art-shine: var(--paper-a-85);
  --art-shadow: var(--ink-a-20);
  --art-note: var(--turmeric-soft);
}

/* ---------- /main page bits around the scene ---------- */
.night-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-3); }
.night-meta div { display: flex; align-items: baseline; gap: var(--s-1); }
.night-meta dt { color: var(--muted); font-size: var(--t-sm); font-weight: var(--w-label); }
.night-meta dd { margin: 0; font-weight: var(--w-display); font-variant-numeric: tabular-nums; }
.lock-box > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.urgency-name { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); font-weight: var(--w-display); }
.safe-box b { display: inline-flex; align-items: center; gap: var(--s-1); }

/* ---------- shell ---------- */
.scene:not(.is-ready) { display: none; }
.scene-on > .picker { display: none; }
.scene {
  position: relative; max-width: 480px; margin: var(--s-4) auto var(--s-2); overflow: hidden; overflow: clip; touch-action: manipulation;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh);
}
.scene-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--cream-d); border-bottom: var(--bw) solid var(--ink); min-height: var(--s-14); }
.scene-live { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); font-weight: var(--w-display); font-size: var(--t-sm); line-height: 1.3; background: var(--paper); border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); }
.scene-live.bump { animation: lm-bump var(--dur-short) var(--ease-out); }
.scene-live b { font-family: var(--font-d); font-variant-numeric: tabular-nums; }
.scene-live-dot { flex: none; width: var(--s-3); height: var(--s-3); border-radius: 50%; background: var(--leaf); border: var(--bw-s) solid var(--ink); animation: lm-live 2.4s var(--ease-in-out) 6; }
.scene-snd {
  flex: none; display: grid; place-items: center; width: var(--s-11); height: var(--s-11); padding: 0; color: var(--ink);
  background: var(--paper); border: var(--bw-s) solid var(--ink); border-radius: var(--r-2); box-shadow: var(--sh-s); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}
.scene-snd { margin-inline-start: auto; }
.scene-snd .ic { width: var(--s-6); height: var(--s-6); }
@media (hover: hover) {
  .scene-snd:hover { background: var(--turmeric-soft); }
  .scene-snd[aria-pressed="true"]:hover { background: var(--turmeric); }
}
.scene-snd:active { transform: translate(2px, 2px); box-shadow: none; }
.scene-snd[aria-pressed="true"] { background: var(--turmeric); --ic-a: var(--paper); }
.scene-stage { position: relative; background: var(--art-sky); }
.scene-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.scene-cap { margin: 0; padding: var(--s-3) var(--s-4); min-height: calc(4.2em + var(--s-6)); background: var(--paper); border-top: var(--bw) solid var(--ink); font-weight: var(--w-label); font-size: var(--t-base); line-height: 1.4; }
.scene-cap b { font-family: var(--font-d); font-weight: var(--w-display); }
.cap-hint { display: block; font-weight: var(--w-body); color: var(--ink-3); }
.scene-gobar { padding: var(--s-2) var(--s-3) var(--s-4); background: var(--paper); }
.scene-go { width: 100%; }
.scene-go.is-ready { animation: lm-nudge 1.6s var(--ease-in-out) 3; }
.scene.is-locking .scene-stage { animation: lm-lock var(--dur-long) var(--ease-out); }
.scene.is-off *, .scene.is-off *::before { animation-play-state: paused !important; }
@media (min-width: 560px) { .scene-bar { padding-inline: var(--s-4); } }
@media (max-width: 520px) { .scene { margin-inline: calc(-1 * var(--s-4)); } }

/* ---------- shared svg bits ---------- */
.ink { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.svg-txt { font-family: var(--font-d); font-weight: var(--w-display); fill: var(--ink); pointer-events: none; }
.kid .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kid .f { display: none; }
.kid[data-face="idle"] .f-idle, .kid[data-face="ssst"] .f-ssst, .kid[data-face="wink"] .f-wink,
.kid[data-face="strain"] .f-strain, .kid[data-face="happy"] .f-happy { display: inline; }
.kid-shadow { fill: var(--art-shadow); }
.kid-flip { transition: transform var(--dur-spring) var(--spring), opacity var(--dur-short) var(--ease-out); }
.arm { transition: transform var(--dur-spring) var(--spring); }
.kid.is-gone .kid-flip, .kid.is-gone .kid-shadow, .kid.is-gone .you-tag { opacity: 0; }
.kid-body, .leg, .eye { transform-box: fill-box; }
.kid-body { transform-origin: 50% 100%; }
.leg { transform-origin: 50% 0; }
.eye { transform-origin: 50% 50%; animation: lm-blink 4.6s infinite; }
.kid:not(.is-run):not(.is-hiding) .kid-body { animation: lm-breathe 2.6s ease-in-out infinite; }
.kid.is-run .kid-body { animation: lm-hop .26s ease-in-out infinite; }
.kid.is-run .leg-a { animation: lm-step .26s ease-in-out infinite alternate; }
.kid.is-run .leg-b { animation: lm-step .26s ease-in-out infinite alternate-reverse; }
.you-tag { pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.kid.is-hiding .you-tag { opacity: 0; }
.bubble { pointer-events: none; }
.pop-in { transform-box: fill-box; transform-origin: 50% 100%; animation: lm-pop var(--dur-spring) var(--spring) both; }
.chat-in { animation: lm-chat 2.5s ease-out both; }
.chat-layer { pointer-events: none; }
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: lm-sway 3.8s ease-in-out infinite alternate; }
.sway-b { animation-delay: -1.7s; animation-duration: 4.6s; }
.swing { transform-box: fill-box; transform-origin: 50% 0; animation: lm-swing 2.9s ease-in-out infinite alternate; }
.cloud { animation: lm-cloud 80s linear infinite; }
.sun-rays { transform-box: fill-box; transform-origin: 50% 50%; animation: lm-spin 50s linear infinite; }
.kite { transform-box: fill-box; transform-origin: 50% 0; animation: lm-kite 4.4s ease-in-out infinite alternate; }
.shuffle { animation: lm-shuf 4.6s ease-in-out infinite alternate; }
.shuffle.s2 { animation-duration: 5.7s; animation-delay: -2s; }
.shuffle.s3 { animation-duration: 3.8s; animation-delay: -1s; }
.hen-walk { animation: lm-hen 16s linear infinite; }
.hen-peck { transform-box: fill-box; transform-origin: 40% 100%; animation: lm-peck 1.7s ease-in-out infinite; }
/* labels drawn inside the art: a rounded pill that fills leaf when its spot is picked */
.pill-bg, .chip-bg { fill: var(--paper); }

/* ---------- petak umpet ---------- */
.spot { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.spot.is-static { cursor: default; pointer-events: none; }
.spot-hit { pointer-events: all; }
.spot-ring { stroke: var(--ink); stroke-width: 3.5; stroke-dasharray: 7 6; opacity: 0; pointer-events: none; }
.spot:focus-visible .spot-ring { opacity: 1; }
.spot-in { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) {
  .spot:not(.is-static):hover .spot-in { transform: translateY(-2px); }
}
.spot:active .spot-in { transform: scale(.95); }
.spot.wiggle .spot-in { animation: lm-wig .55s ease-out; }
.spot.is-picked .pill-bg { fill: var(--leaf-d); }
.spot.is-picked .pill-tx { fill: var(--on-color); }
.count-b { pointer-events: none; }

/* ---------- tarik tambang ---------- */
.tt-svg { touch-action: pan-y; cursor: grab; }
.kid.team-kid:not(.is-run):not(.is-hiding) .kid-body { animation: lm-strain 1.1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.tug.is-tugging { animation: lm-tug .9s ease-in-out infinite alternate; }
.tug.is-tugging.to-r { animation-direction: alternate-reverse; }
.tt-flag { transform-box: fill-box; transform-origin: 50% 0; animation: lm-flag 1.4s ease-in-out infinite alternate; }
.tt-chip.is-picked .chip-bg { fill: var(--leaf-d); }
.tt-chip.is-picked .chip-tx { fill: var(--on-color); }
.tt-chip.is-hover .chip-bg { fill: var(--turmeric); }
.tt-sides { display: flex; gap: var(--s-3); padding: var(--s-3); background: var(--cream-d); border-top: var(--bw) solid var(--ink); }
.tt-side { flex: 1; min-height: var(--s-14); font-size: var(--t-base); padding-inline: var(--s-2); }
.tt-side.is-on { --bg: var(--leaf-d); --fg: var(--on-color); }

/* ---------- kelereng ---------- */
.kl-shot { animation: lm-shot 5s ease-in 4; }
.kl-hit { animation: lm-hit 5s ease-out 4; }
.kl-tak { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: lm-tak 5s ease-out 4; }
.kl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-3); perspective: 900px; background: var(--cream-d); border-top: var(--bw) solid var(--ink); }
.kl-card { position: relative; display: block; min-height: 11rem; padding: 0; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.kl-card[aria-disabled="true"] { cursor: not-allowed; }
.kl-card:active:not([aria-disabled="true"]) { transform: scale(.97); }
.kl-card:focus-visible { outline: 3px solid var(--focus); outline-offset: var(--s-1); border-radius: var(--r-2); }
.kl-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform var(--dur-long) var(--ease-out); }
.kl-card.is-flipped .kl-inner { transform: rotateY(180deg); }
.kl-card.no-anim .kl-inner { transition: none; }
.kl-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); padding: var(--s-3); text-align: center; border: var(--bw) solid var(--ink); border-radius: var(--r-2); box-shadow: var(--sh); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kl-front { background: var(--paper); }
.kl-back { background: var(--turmeric); transform: rotateY(180deg); }
.kl-card.is-dim .kl-front { background: var(--cream); }
.kl-card.is-dim { transform: translateY(var(--s-1)) scale(.96); }
.kl-mark { display: block; width: var(--s-12); height: var(--s-12); }
.kl-label { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); line-height: 1.1; }
.kl-sub { font-size: var(--t-sm); font-weight: var(--w-label); color: var(--muted); line-height: 1.2; }
.kl-seal { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-sm); color: var(--turmeric); background: var(--ink); padding: var(--s-1) var(--s-2); border-radius: var(--r-1); transform: rotate(-4deg); }
.kl-head { display: block; width: 34px; height: 32px; }
.kl-head.kl-bighead { width: 88px; height: 84px; }
.kl-payoff { padding: var(--s-3) var(--s-3) var(--s-2); background: var(--paper); border-top: var(--bw) solid var(--ink); }
.kl-pay-title { margin: 0 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-display); color: var(--muted); }
.kl-pays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.kl-pay { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-1); background: var(--cream); border: var(--bw-s) solid var(--ink); border-radius: var(--r-1); }
.kl-pay-heads { display: flex; gap: 2px; }
.kl-pay-n { display: inline-block; font-family: var(--font-d); font-size: var(--t-lg); font-variant-numeric: tabular-nums; animation: lm-numpop 3.2s ease-in-out 3; animation-delay: var(--d, 0s); }
.kl-pay-l { font-size: var(--t-xs); font-weight: var(--w-display); line-height: 1.15; text-align: center; }
.kl-rt { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-4); background: var(--art-note); border-top: var(--bw-s) dashed var(--ink); }
.kl-rt p { margin: 0; font-size: var(--t-sm); line-height: 1.4; }
.kl-rt-ico { flex: none; width: 46px; height: 44px; }

/* ---------- engklek ---------- */
.sq-num { font-family: var(--font-d); font-weight: var(--w-display); fill: var(--paper); stroke: var(--ink); stroke-width: 4.5px; paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.sq-fill { fill: var(--art-chalk); }
.sq-glow { fill: var(--art-chalk-pick); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.sq.is-picked .sq-glow { opacity: 1; }
@media (hover: hover) {
  .sq:not(.is-picked):not(.is-static):hover .sq-glow { opacity: .45; }
}
.sq.is-picked .pill-bg { fill: var(--leaf-d); }
.sq.is-picked .pill-tx { fill: var(--on-color); }
.hop-trail { transition: opacity var(--dur-short) var(--ease-out); pointer-events: none; }
.hop-peb { fill: var(--art-pebble); }
.scene-dock { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--bar-h, 0px) + env(safe-area-inset-bottom, 0px) + var(--s-8)); z-index: var(--z-sticky); max-width: 456px; margin: 0 auto; animation: lm-rise var(--dur-short) var(--ease-out); }
@media (min-width: 900px) { .scene-dock { bottom: var(--s-4); } }

/* ---------- reduced motion: nothing loops, nothing flies; state changes still show ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene-dock { animation: none !important; transition: none !important; }
}

/* ---------- keyframes ---------- */
@keyframes lm-shot { 0%, 72% { transform: translate(0, 0); opacity: 1; } 79% { transform: translate(58px, -6px); } 92% { transform: translate(58px, -6px); opacity: 1; } 96% { transform: translate(58px, -6px); opacity: 0; } 97% { transform: translate(0, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes lm-hit { 0%, 78% { transform: translate(0, 0); } 83% { transform: translate(12px, -5px); } 93% { transform: translate(12px, -5px); } 100% { transform: translate(0, 0); } }
@keyframes lm-tak { 0%, 78% { opacity: 0; transform: scale(.4); } 82% { opacity: 1; transform: scale(1.1); } 90% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes lm-numpop { 0%, 55%, 100% { transform: scale(1); } 66% { transform: scale(1.32); } 78% { transform: scale(1.05); } }
@keyframes lm-strain { from { transform: rotate(-1.8deg) scaleY(1); } to { transform: rotate(1.8deg) scaleY(1.035); } }
@keyframes lm-tug { from { transform: translateX(-2.5px); } to { transform: translateX(2.5px); } }
@keyframes lm-flag { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes lm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lm-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes lm-breathe { 50% { transform: scaleY(1.035); } }
@keyframes lm-hop { 50% { transform: translateY(-4px); } }
@keyframes lm-step { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
@keyframes lm-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes lm-chat { 0% { opacity: 0; transform: translateY(6px); } 14% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes lm-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes lm-swing { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes lm-cloud { from { transform: translateX(-160px); } to { transform: translateX(520px); } }
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-kite { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes lm-shuf { from { transform: translateX(-20px); } to { transform: translateX(20px); } }
@keyframes lm-hen { 0% { transform: translateX(0) scaleX(1); } 48% { transform: translateX(120px) scaleX(1); } 50% { transform: translateX(120px) scaleX(-1); } 98% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
@keyframes lm-peck { 0%, 55%, 100% { transform: rotate(0); } 65%, 80% { transform: rotate(22deg); } 72% { transform: rotate(4deg); } }
@keyframes lm-wig { 0% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.04); } 55% { transform: rotate(2.5deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes lm-live { 50% { opacity: .55; } }
@keyframes lm-bump { 40% { transform: scale(1.08); } }
@keyframes lm-nudge { 50% { transform: scale(1.025); } }
@keyframes lm-lock { 0% { transform: scale(1); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }