/* Nariyal Chop: kitchen-wall backdrop, boss card, pause overlay */

body.game {
  --bg-top: #5a2f1a;
  --bg-bottom: #3a1d10;
  --hud-ink: #fff4e2;
  --hud-chip: rgba(255, 230, 190, .14);
}
.stage { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.subhud .chip { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip.c-stage.boss { background: #e8372c; color: #fff; }

.boost .skin-prev { width: 30px; height: 30px; }
.boost { min-height: 48px; }

.chop-hand { animation: chop-tap 1s ease-in-out infinite; }
@keyframes chop-tap { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(.9); } }

.chop-card {
  position: absolute; z-index: 6; left: 50%; top: 64%; pointer-events: none; text-align: center;
  transform: translate(-50%, -50%) scale(.6) rotate(-4deg); opacity: 0;
  padding: 12px 26px 14px; border-radius: 18px; background: #e8372c; color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(255, 255, 255, .25);
  transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.chop-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
.chop-card small { display: block; font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.chop-card b { display: block; font: 700 30px/1.1 var(--display); white-space: nowrap; }
.chop-card span { display: block; margin-top: 4px; font-weight: 700; font-size: 15px; line-height: 1.25; max-width: 260px; opacity: .95; }
.chop-card.intro { background: #f2b33d; color: #3a1d10; transform: translate(-50%, -50%) scale(.6) rotate(3deg); }
.chop-card.intro.show { transform: translate(-50%, -50%) scale(1) rotate(3deg); }
.chop-card.intro b { font-size: 26px; }
@media (max-width: 370px) { .chop-card b { font-size: 26px; } .chop-card.intro b { font-size: 23px; } .chop-card { padding: 10px 18px 12px; } }

/* Tries left on this stage: three little coconuts (the ❤ chip is the cafe-life wallet) */
.chip.c-tries { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; }
.chip.c-tries[hidden] { display: none; }
.try {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #b98250 0 22%, #6b3f1f 60%, #4a2a12 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1.5px rgba(255, 236, 200, .55);
  transition: opacity .25s, transform .25s, filter .25s;
}
.try.lost { opacity: .28; filter: grayscale(1); transform: scale(.8); box-shadow: 0 0 0 1.5px rgba(255, 236, 200, .3); }
.try.pop { animation: chop-try-pop .6s ease-out; }
@keyframes chop-try-pop { 0% { transform: scale(1.6); opacity: 1; filter: none; background: #e8372c; } 100% { transform: scale(.8); } }
.chip.c-tries.last { background: rgba(232, 55, 44, .4); animation: chop-last 1s ease-in-out infinite; }
@keyframes chop-last { 50% { background: rgba(232, 55, 44, .7); } }

/* Stage picker: continue where you are, or jump to an unlocked checkpoint */
.chop-pick .pick-head small { display: block; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--chili); }
.chop-pick .pick-head b { display: block; font: 700 46px/1.05 var(--display); color: var(--ink); }
.chop-pick .pick-tries { display: inline-flex; gap: 6px; margin-top: 6px; }
.chop-pick .pick-tries .try { width: 18px; height: 18px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.chop-pick .pick-sub { margin: 4px 0 0; font-weight: 700; font-size: 14px; }
.chop-pick .pick-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pick-cp {
  min-width: 52px; min-height: 48px; padding: 4px 10px; border: 2px solid var(--line, #e6d6bd); border-radius: 14px;
  background: #fff8ec; color: var(--ink); font: inherit; cursor: pointer;
}
.pick-cp b { font: 700 20px/1 var(--display); }
.pick-cp.here { border-color: var(--chili); background: #fdebe4; }
.pick-cp:active { transform: scale(.95); }

.chop-pause {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 6px; border: 0;
  background: rgba(30, 14, 6, .62); color: #fff4e2; font: inherit; text-align: center;
}
.chop-pause b { font: 700 34px/1 var(--display); }
.chop-pause span { font-weight: 700; font-size: 17px; opacity: .9; }

/* Devanagari breaks apart with letter-spacing */
html[lang="hi"] .chop-card small, html[lang="hi"] .chop-pick .pick-head small { letter-spacing: 0; font-size: 14px; }
html[lang="hi"] .chop-card b { line-height: 1.3; }