/* Sunny Street Claw Machine - page chrome. Base look (cards, round buttons, overlays) comes from style.css. */
:root { --deck: 156px; --coral: #ff6b6b; --sun: #ffd23a; --claw-teal: #3fc1c9; }
html, body { background: #bfe7ff; }
body.claw { background: linear-gradient(180deg, #ffd9a1, #f59a73 60%, #8a5a44); }
.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
  /* R4 fix 17: the street recedes: out of focus, less saturated and a touch darker than the cabinet (saturation ratchet: the CABINET never goes down) */
  }   /* owner 10-02: the street must be crisp, not fuzzy; R16: no desaturate either */
/* R16: the dark edge vignette is gone - owner wants the backdrops bright, with pop */
#stage { position: fixed; inset: 0; z-index: 1; touch-action: none; cursor: grab; }
#gl { width: 100%; height: 100%; display: block; touch-action: none; }

/* corner buttons */
.corner { position: fixed; top: max(10px, env(safe-area-inset-top)); z-index: 6; }
.corner.left { left: max(10px, env(safe-area-inset-left)); }
.corner.right { right: max(10px, env(safe-area-inset-right)); }

/* first-time finger hint */
.handhint { position: fixed; z-index: 3; left: 50%; top: 52%; pointer-events: none; font-size: 64px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.handhint.show { opacity: 1; animation: handDrag 2.2s ease-in-out infinite; }
.taphint { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--deck, 156px) + 16px); /* R6: claw.js moves it onto the prize card */ pointer-events: none; font-size: 72px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.taphint.show { opacity: 1; animation: tapTap 1.1s ease-in-out infinite; }
@keyframes tapTap { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -14px) scale(.9); } }
@keyframes handDrag { 0%, 12% { transform: translate(-70px, 0); } 50%, 62% { transform: translate(70px, 0); } 100% { transform: translate(-70px, 0); } }   /* R9 P4: slide the claw sideways */

/* control deck */
.deck { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; height: var(--deck); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, #19aab2, #0b8a94 40%, #075a64); border-top: 6px solid #f2b932;
  box-shadow: 0 -8px 24px rgba(10, 40, 50, .35), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 #d99a1e; }
.shelf { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 26px;
  background: linear-gradient(180deg, #fff6e2, #ffe7b3); border: 4px solid var(--sun); box-shadow: inset 0 4px 10px rgba(150, 90, 0, .25); }
.shelf-ico { font-style: normal; font-size: 36px; opacity: .55; flex: none; }
.shelf-items { display: flex; gap: 8px; align-items: center; overflow-x: auto; overflow-y: hidden; height: 100%; scrollbar-width: none; padding: 4px 2px; flex: 1; min-width: 0; touch-action: pan-x; }
.shelf-items::-webkit-scrollbar { display: none; }
.sh { position: relative; flex: none; width: 76px; height: 76px; border-radius: 20px; background: radial-gradient(circle at 40% 30%, #fff, #ffefc9); border: 3px solid #ffd23a;
  display: grid; place-items: center; font-size: 46px; line-height: 1; box-shadow: 0 3px 0 #d9a421; }
.sh img { width: 66px; height: 66px; object-fit: contain; display: block; }
.sh b { position: absolute; right: -6px; bottom: -6px; min-width: 26px; height: 26px; border-radius: 13px; background: #ff6b6b; color: #fff; font-size: 15px; display: grid; place-items: center; border: 2px solid #fff; }
.sh.pop { animation: shPop .7s cubic-bezier(.2, 1.6, .4, 1); }
.sh.empty { background: rgba(255, 255, 255, .35); border-style: dashed; border-color: rgba(217, 164, 33, .7); box-shadow: none; }
@keyframes shPop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }

.targetcard { flex: none; position: relative; width: 150px; height: 112px; border-radius: 26px; border: 4px solid var(--sun); display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 2px 6px;
  background: radial-gradient(circle at 40% 25%, #ffffff, #e9f8ff); color: #0f5b52; padding: 0 8px; box-shadow: 0 5px 0 #d9a421, 0 0 0 5px rgba(255, 210, 58, .28); animation: tglow 1.6s ease-in-out infinite; }
.targetcard b { font: 900 70px/1 Georgia, serif; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.targetcard span { font-size: 54px; line-height: 1; }
.targetcard small { position: absolute; left: 6px; right: 6px; bottom: 5px; text-align: center; font: 700 15px/1.1 "Trebuchet MS", system-ui, sans-serif; color: #0f5b52; letter-spacing: 1px; }
.targetcard small:empty { display: none; }
.targetcard[data-kind] b { margin-bottom: 14px; }
.targetcard[data-kind] { width: auto; min-width: 150px; } .targetcard b { white-space: nowrap; }
.targetcard[data-len="2"] b { font-size: 46px; } .targetcard[data-len="3"] b { font-size: 34px; }
.targetcard[data-kind^="count"] small { font-size: 22px; letter-spacing: 4px; color: #e24b57; }
.targetcard[data-kind^="count"] b { font-size: 64px; }
.targetcard.clue { width: min(420px, 50vw); min-height: 112px; padding: 4px 10px; } .targetcard.clue b { display: none; }
.targetcard.clue small { position: static; font-size: 17px; line-height: 1.25; letter-spacing: 0; }
.targetcard[data-kind="letter"] b { margin-bottom: 20px; }
.targetcard[data-kind="letter"] span:empty, .targetcard span:empty { display: none; }
.targetcard .speaker { position: absolute; right: -8px; bottom: -8px; font-style: normal; font-size: 20px; background: var(--claw-teal); border: 2px solid var(--sun); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
.targetcard.talk { animation: talk 0.6s ease-in-out 2; }
@keyframes tglow { 50% { box-shadow: 0 5px 0 #d9a421, 0 0 0 9px rgba(255, 210, 58, .5); } }

.grab { flex: none; width: 138px; height: 138px; margin-top: -26px; border-radius: 50%; border: 6px solid #fff3c4; color: #fff; display: grid; place-items: center; align-content: center; gap: 0;
  background: radial-gradient(circle at 35% 28%, #fff6a8, #ffd23a 45%, #f0a410); color: #6b3a00; box-shadow: 0 8px 0 #a86a05, 0 0 26px rgba(255, 220, 90, .55), 0 14px 22px rgba(0, 0, 0, .3), inset 0 -6px 12px rgba(120,60,0,.2); }
.grab svg { width: 58px; height: 58px; margin-top: 6px; }
.grab span { color: #7a4300; text-shadow: 0 2px 0 rgba(255,255,255,.55); font: 900 24px/1 "Trebuchet MS", system-ui, sans-serif; letter-spacing: 2px; margin-bottom: 8px; }
.grab:active, .grab.down { transform: translateY(6px); box-shadow: 0 2px 0 #a86a05, 0 6px 12px rgba(0,0,0,.3), inset 0 -6px 12px rgba(0,0,0,.18); }
.grab.ready { animation: grabReady .9s ease-in-out infinite; }
.grab[disabled] { filter: saturate(.55) brightness(.9); }
@keyframes grabReady { 50% { transform: scale(1.08); box-shadow: 0 8px 0 #a86a05, 0 0 0 10px rgba(255, 244, 160, .65), 0 14px 22px rgba(0, 0, 0, .3); } }

/* prize card */
.prize { position: fixed; inset: 0 0 var(--deck) 0; z-index: 8; display: none; place-items: start start; padding: 76px 0 0 14px; pointer-events: none; }   /* owner 10-02: the prize card sits at the LEFT edge so the game stays visible; R16: top-left, under the home button */
.prize.show { display: grid; pointer-events: none; }                 /* R6 A2: the glass behind the card is NOT part of the card (a tap on the cabinet must not dismiss it) */
.prize-card { pointer-events: auto; cursor: pointer; text-align: center; padding: 12px 20px 10px; border-radius: 36px; border: 5px solid var(--sun); background: radial-gradient(circle at 50% 20%, #fffdf3, #ffe9b8);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 255, 255, .45); animation: prizeIn .6s cubic-bezier(.2, 1.5, .4, 1) backwards; color: #0f5b52; }
.prize.out .prize-card { animation: prizeOut .5s ease-in forwards; }
.prize-pic { width: min(150px, 24vh); height: min(150px, 24vh); display: grid; place-items: center; margin: 0 auto; font-size: min(110px, 18vh); line-height: 1; animation: dance 0.9s ease-in-out infinite; }
.prize-pic img { width: 100%; height: 100%; object-fit: contain; }
.prize-text { font: 900 30px Georgia, serif; margin-top: 2px; }
.prize.gentle .prize-card { border-color: #9fd4cf; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); animation-duration: .35s; }
.prize.gentle .prize-pic { animation: none; }
@keyframes prizeIn { from { transform: scale(0) rotate(-12deg); } }
@keyframes prizeOut { to { transform: translate(var(--fx, 0), var(--fy, 300px)) scale(.15); opacity: 0; } }

/* number tags that ride on the toys (math bands) */
.tags { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.ntag { position: absolute; left: 0; top: 0; font-style: normal; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px; display: grid; place-items: center; box-sizing: border-box;
  font: 900 20px/1 "Trebuchet MS", system-ui, sans-serif; color: #fff; background: radial-gradient(circle at 35% 30%, #5cc8ff, #2b7be0); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); will-change: transform; }

.ntag-lead { position: absolute; left: 0; top: 0; height: 2px; background: rgba(255,255,255,.9); border-radius: 1px; box-shadow: 0 1px 0 rgba(0,0,0,.35); transform-origin: 0 50%; pointer-events: none; will-change: transform; }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
.confetti i { position: absolute; font-style: normal; font-size: 34px; left: var(--x); top: 38%; animation: confetti 1.9s ease-out forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; } }

.loadmsg { margin-top: 10px; font-size: 18px; color: var(--gold); letter-spacing: 1px; min-height: 22px; }
.play[disabled] { opacity: .55; animation: none; }

@media (orientation: portrait) {
  :root { --deck: 196px; }
  .deck { flex-wrap: wrap; align-content: center; gap: 10px 14px; }
  .shelf { flex: 1 1 100%; order: 3; height: 92px; }
  .grab { margin-top: -62px; }
  .targetcard { flex: 0 1 auto; margin-right: auto; }
  .targetcard.clue { width: min(420px, 62vw); }
  .targetcard.hasstrip { width: min(640px, calc(100vw - 190px)); }   /* R8 A4: the row is card + Grab; the strip card takes the width so its groups sit in one or two rows */
  .deck.stripcard .shelf { height: 64px; } .deck.stripcard .sh { width: 48px; height: 48px; font-size: 30px; } .deck.stripcard .sh img { width: 42px; height: 42px; }   /* R8 A4: the shelf makes room for a strip card (JS: fitCard) */
  .sh { width: 62px; height: 62px; font-size: 38px; } .sh img { width: 54px; height: 54px; }
}
@media (max-width: 700px) { .prize-pic, .prize-pic img { width: 150px; height: 150px; font-size: 100px; } }

/* R2: method strip, count slots, wider clue card, fatal screen, small-screen tags */
/* R5 A6: a TWO-ROW card. Row 1 = the task (numeral / sum / word), row 2 = a reserved strip that sits IN the flow (never over the task text).
   Dots are >= 28px in explicit grid groups; the card is as wide as a clue card and grows with the number of slots. */
.targetcard #t-letter:empty { display: none; }
.strip { display: none; order: 2; flex: 0 0 100%; justify-content: center; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.targetcard.hasstrip .strip, .targetcard.slots .strip { display: flex; }
/* R15 A1: a teaching strip is NEVER hidden. Portrait squeeze: .tight = ~28px numeral and ONE row that scrolls sideways (dots stay >= 16px); .shelfmini = a compact prize shelf. */
.targetcard.tight #t-letter, .targetcard.tight b { font-size: 28px !important; margin-bottom: 0 !important; }
.targetcard.tight, .targetcard.hasstrip.tight, .targetcard.slots.tight { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
.targetcard.tight span { font-size: 26px; }
.targetcard.tight small { font-size: 13px; }
.targetcard.tight .strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: 100%; }
.targetcard.tight .strip > * { flex: none; } .targetcard.tight .strip > :first-child { margin-left: auto; } .targetcard.tight .strip > :last-child { margin-right: auto; }
.deck.shelfmini .shelf { height: 48px; padding-top: 2px; padding-bottom: 2px; } .deck.shelfmini .sh { width: 36px; height: 36px; font-size: 22px; border-width: 2px; } .deck.shelfmini .sh img { width: 30px; height: 30px; }
/* R8 A4: every dot size, gap and box border derives from --dot. claw.js (fitCard) shrinks --dot until the LIVE card's scrollHeight fits the real deck (no pseudo-class hack needed). --dot0 = the starting size per viewport. */
:root { --dot0: 28px; }
.strip .grp { display: grid; grid-template-columns: repeat(var(--c, 5), var(--dot, var(--dot0))); gap: calc(var(--dot, var(--dot0)) * .14); justify-content: center; padding: calc(var(--dot, var(--dot0)) * .14) calc(var(--dot, var(--dot0)) * .21); border-radius: 10px; background: rgba(79,157,255,.15); }
.strip .grp.alone { background: none; }
.strip .grp.box { background: rgba(79,157,255,.12); border: max(1.5px, calc(var(--dot, var(--dot0)) * .1)) solid #2b7be0; border-radius: 12px; }   /* R7 A7: a clear box round each group */
.targetcard.mute .speaker { display: none; }
.strip .d { width: var(--dot, var(--dot0)); height: var(--dot, var(--dot0)); box-sizing: border-box; border-radius: 50%; background: #4f9dff; border: max(1.5px, calc(var(--dot, var(--dot0)) * .1)) solid #fff; box-shadow: 0 1px 0 rgba(0,0,0,.3); display: block; position: relative; }
.strip .d.x { background: #ffe9ea; border-color: #e24b57; opacity: .85; }
.strip .d.x::after { content: '\00D7'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 calc(var(--dot, var(--dot0)) * .85)/1 "Trebuchet MS", system-ui, sans-serif; color: #e24b57; }
.strip .op { font: 900 30px/1 "Trebuchet MS", system-ui, sans-serif; color: #e24b57; }
.strip .slot { font-style: normal; font-size: calc(var(--dot, 40px) * .75); line-height: 1; width: var(--dot, 40px); height: var(--dot, 40px); flex: none; display: grid; place-items: center; border-radius: 12px; border: 3px dashed #c9a63a; filter: grayscale(1) brightness(1.4) opacity(.5); }
.strip .slot.on { filter: none; border-style: solid; background: #fff7d1; }
.strip .slot.demo { animation: slotDemo .9s ease-in-out backwards; animation-delay: calc(var(--i) * .35s); }
@keyframes slotDemo { 0% { transform: scale(.4); filter: none; opacity: 0; } 60% { transform: scale(1.2); filter: none; } 100% { transform: scale(1); } }
.targetcard.hasstrip, .targetcard.slots { height: auto; min-height: 112px; padding-top: 6px; padding-bottom: 6px; }
.targetcard.hasstrip { width: min(420px, 50vw); }
.targetcard.hasstrip small, .targetcard.slots small { position: static; order: 1; flex: 0 0 100%; font-size: 17px; letter-spacing: 0; }
.targetcard.hasstrip b, .targetcard.slots b { margin-bottom: 0 !important; }

.targetcard.clue { width: min(420px, 50vw); min-width: 230px; min-height: 112px; height: auto; }
/* R5 A6: the age-8 clue card fits THREE lines of >= 22px text */
.targetcard.clue #t-letter { display: block; position: static; font: 800 23px/1.22 "Trebuchet MS", system-ui, sans-serif; text-shadow: none; white-space: normal; text-align: center; margin: 0; }
.targetcard.clue #t-emoji { display: none; }
.targetcard.clue small { display: none; }
/* R12 A4: after a miss the age-8 clue card shows a compact status line (Try again!) under the clue */
.targetcard.clue.miss small { display: block; position: static; flex: 0 0 100%; order: 3; text-align: center; font: 800 15px/1.1 "Trebuchet MS", system-ui, sans-serif; letter-spacing: 0; color: #e24b57; }
.targetcard.clue.hint small { display: block; position: static; flex: 0 0 100%; order: 3; text-align: center; font: 800 15px/1.1 "Trebuchet MS", system-ui, sans-serif; letter-spacing: 0; color: #2b6f6a; }   /* R13 B14: the clue's first-miss TEXT help (It starts with S) */
.targetcard[data-kind="rhyme"] #t-letter, .targetcard[data-kind="clue"] #t-letter { max-width: 100%; }
/* R6 A4: rhyme = a sentence at first; after the first miss the CUE WORD is drawn at 76px */
.targetcard[data-kind="rhyme"] { width: min(380px, 52vw); min-width: 230px; height: auto; min-height: 112px; }
.targetcard[data-kind="rhyme"] #t-letter { font: 800 30px/1.1 "Trebuchet MS", system-ui, sans-serif; white-space: normal; text-align: center; margin-bottom: 18px; text-shadow: none; }
.targetcard[data-kind="rhyme"].cue #t-letter { font: 900 76px/1 Georgia, serif; letter-spacing: 3px; margin-bottom: 20px; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.targetcard[data-kind="rhyme"].cue small { color: #e24b57; font-size: 18px; }
.targetcard[data-kind="rhyme"] #t-emoji { display: none; }
.targetcard[data-kind^="word"] #t-letter { font-size: 40px; }
.fatal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; align-content: center; gap: 12px; background: linear-gradient(180deg, #ffd9a1, #f59a73); border: 0; color: #7a3a10; }
.fatal.show { display: grid; }
.fatal span { font-size: 96px; } .fatal b { font: 900 30px Georgia, serif; }
@media (max-width: 700px) { .ntag { min-width: 24px; height: 24px; font-size: 15px; border-width: 2px; } .grab { width: 112px; height: 112px; } }

/* R3: a short landscape phone (812x375): the deck must not eat 40% of the glass height */
@media (orientation: landscape) and (max-height: 460px) {
  :root { --deck: 112px; }
  .deck { padding-top: 6px; padding-bottom: 6px; }
  .grab { width: 92px; height: 92px; margin-top: -16px; border-width: 4px; }
  .grab svg { width: 38px; height: 38px; }
  .grab span { font-size: 17px; margin-bottom: 4px; }
  /* R6 A8: the expanded method / slots card is VIEWPORT-CONSTRAINED: it stays inside the 112px deck (never grows past the bottom edge) */
  .targetcard.hasstrip, .targetcard.slots { min-height: 0; max-height: calc(var(--deck) - 14px); padding-top: 2px; padding-bottom: 2px; gap: 0 6px; }
  .targetcard.hasstrip b, .targetcard.slots b { font-size: 36px !important; line-height: 1; } .targetcard.hasstrip span, .targetcard.slots span { font-size: 30px; }
  .targetcard.hasstrip small, .targetcard.slots small { font-size: 13px; line-height: 1.1; }
  .strip { gap: 2px 6px; }
  .strip .slot { width: var(--dot, 28px); height: var(--dot, 28px); font-size: calc(var(--dot, 28px) * .68); border-width: 2px; border-radius: 8px; }
  :root { --dot0: 16px; }
  .strip .op { font-size: 20px; }
  .strip .grp.box { border-radius: 8px; }
  .targetcard[data-kind="rhyme"].cue #t-letter { font-size: 40px !important; margin-bottom: 4px; }   /* R7 A8 */
  .targetcard[data-kind="rhyme"] { min-height: 60px; max-height: calc(var(--deck) - 14px); padding-top: 2px; padding-bottom: 18px; }   /* R8 D9: the rhyme card (with its cue word after a miss) fits the 112px deck */
  .targetcard.clue { min-height: 0; max-height: calc(var(--deck) - 14px); padding-top: 2px; padding-bottom: 2px; }   /* R10 A8: the age-8 clue card (two sentences) fits the 112px deck like the rhyme card */
  .targetcard.clue #t-letter { font-size: 16px; line-height: 1.12; }
  .targetcard[data-kind="rhyme"] #t-letter { font-size: 22px; margin-bottom: 2px; }
  .targetcard[data-kind="rhyme"] small { font-size: 13px; line-height: 1.1; }
  .prize-card { padding: 8px 24px 8px; border-radius: 28px; } .prize-text { font-size: 28px; margin-top: 0; }   /* R8 A6: the prize card fits above the 112px deck */
}

/* R9 A12: picture help for ages 3-5 letter-only tasks. Sits on the target card's top-right corner; a tap shows the picture (no credit for that task, the toy is still won). */
.pichelp { position: fixed; z-index: 8; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--sun); background: #fffdf3; font-size: 26px; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.25); transform: translate(-50%, -50%); }
.pichelp[hidden] { display: none; }