/* Carrom Cafe: warm verandah floor, pause overlay, win/fail/match modals */

body.game {
  --bg-top: #fde3c3;
  --bg-bottom: #f0ad84;
  --hud-ink: #4a2610;
  --hud-chip: rgba(255, 255, 255, .55);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.stage { overscroll-behavior: none; touch-action: none; overflow: hidden; }
.subhud .chip { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip.cc-goal { background: #fff3c4; white-space: normal; text-align: center; }
.boost { min-height: 52px; min-width: 74px; }
.boost[hidden] { display: none; }
.cc-hand { animation: none; margin: -4px 0 0 -14px; transition: opacity .15s; }

.cc-pause {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 6px; border: 0;
  background: rgba(74, 38, 16, .55); color: #fff; font: inherit; text-align: center;
}
.cc-pause[hidden] { display: none; }
.cc-pause b { font: 700 34px/1 var(--display); }
.cc-pause span { font-weight: 700; font-size: 17px; opacity: .9; }

.cc-win, .cc-fail, .cc-menu, .cc-match-end { text-align: center; }
.cc-win .cc-wow { margin: -6px 0 0; font: 700 20px/1.2 var(--display); color: var(--chili); }
.cc-match-end .cc-score { font: 700 26px/1.2 var(--display); color: var(--ink); }
.cc-progress { display: flex; justify-content: center; gap: 8px; }
.cc-dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #d8c39a; background: #f7ecd4; opacity: .4; }
.cc-dot.k2 { background: #2c1f19; border-color: #140d0a; }
.cc-dot.k3 { background: #d22a3c; border-color: #8e1324; }
.cc-dot.on { opacity: 1; box-shadow: 0 0 0 3px var(--mint); }
@media (max-height: 640px) {
  .cc-win .stars svg { width: 36px; height: 36px; }
}

/* Tries: three red queen-coloured discs (the red heart in the header is the cafe-lives wallet) */
.chip.cc-tries { display: inline-flex; align-items: center; gap: 3px; padding-inline: 9px; }
.chip.cc-tries span { margin-right: 3px; }
.chip.cc-tries[hidden] { display: none; }
.chip.cc-tries i, .cc-tries-big i {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(74, 38, 16, .14); box-shadow: inset 0 0 0 2px rgba(74, 38, 16, .25);
}
.chip.cc-tries i.on, .cc-tries-big i.on { background: radial-gradient(circle at 35% 35%, #ff7a86, #d22a3c 60%, #8e1324); box-shadow: 0 0 0 2px #fff4e6; }
.chip.cc-tries.last i.on { animation: cc-beat .8s ease-in-out infinite; }
@keyframes cc-beat { 50% { transform: scale(1.25); } }
.cc-tries-big { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.cc-tries-big i { width: 22px; height: 22px; }
@media (max-width: 380px) {
  .subhud { gap: 6px; }
  .subhud .chip { padding-inline: 9px; font-size: 13px; }
}