/* Thali Match: banana-leaf backdrop, pause overlay and win thali */

body.game {
  --bg-top: #2f7a4f;
  --bg-bottom: #1d5236;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .15);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .1) 0 34%, transparent 60%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}
.stage { overscroll-behavior: none; touch-action: none; }
.subhud .chip { white-space: nowrap; }
.chip.c-hard { background: #fff; color: #b3122e; font-weight: 800; }

.coach-line { top: 4px; }

.thali-pause {
  position: absolute; inset: 0; z-index: 7; border: 0; display: grid; place-content: center; gap: 4px;
  background: rgba(20, 45, 30, .72); color: #fff; text-align: center; touch-action: manipulation;
}
.thali-pause b { font: 700 34px/1.1 var(--display); }
.thali-pause span { font-weight: 700; font-size: 17px; opacity: .9; }

.thali-win .thali-art { width: 100%; max-width: 280px; height: auto; margin: -4px auto -8px; display: block; }
.win.lose h2 { color: #b3122e; }
.goals-left { font-weight: 700; color: var(--ink) !important; }

/* Tries (steel thalis) and the lunch-rush timer */
.chip.c-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; }
.th-try { display: inline-block; width: 20px; height: 20px; transition: opacity .3s, filter .3s; }
.th-try svg { width: 100%; height: 100%; display: block; }
.th-try.lost { opacity: .3; filter: grayscale(1); }
.th-try.shake { animation: thshake .45s; }
@keyframes thshake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px) rotate(-14deg); } 50% { transform: translateX(4px) rotate(10deg); } 75% { transform: translateX(-2px); } }
.chip.c-timer { font-variant-numeric: tabular-nums; font-weight: 800; }
.chip.c-timer.low { background: #e2462f; color: #fff; animation: thpulse .9s ease-in-out infinite; }
@keyframes thpulse { 50% { transform: scale(1.08); } }
.th-tries-row { display: flex; justify-content: center; gap: 8px; margin: 4px 0 2px; }
.th-tries-row .th-try { width: 34px; height: 34px; }
.th-next { font-weight: 800; color: #b3122e !important; }
.th-twist h2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .chip.c-timer.low { animation: none; } }