/* Color Clash: plum cafe-counter shell, rule board, syrup bottle, colour buttons */

body.game {
  --bg-top: #4a2c55;
  --bg-bottom: #2a1832;
  --hud-ink: #fff6ea;
  --hud-chip: rgba(255, 246, 234, .14);
}
.cc-stage canvas { display: none; }
.cc-stage { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.subhud .chip { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.chip.cc-lives i { font-style: normal; display: inline-block; transition: filter .3s, opacity .3s, transform .3s; }
.chip.cc-lives i.off { filter: grayscale(1); opacity: .3; transform: scale(.8); }
.chip.cc-lives.hit { animation: cc-hit .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cc-hit { 30% { transform: scale(1.18) rotate(-4deg); background: #e2462f; } 100% { transform: none; } }

.cc-play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px 16px 10px; max-width: 480px; margin: 0 auto;
}
.cc-rule {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; border-radius: 16px;
  background: #1f2a24; color: #fff; box-shadow: inset 0 0 0 3px #8a5a36, 0 6px 16px rgba(0, 0, 0, .3); flex: none; min-height: 74px;
}
.cc-rule > div { display: grid; line-height: 1.05; text-align: left; min-width: 0; }
.cc-rule small { font-weight: 700; font-size: 14px; opacity: .8; letter-spacing: .04em; }
.cc-rule b { font: 800 32px/1 var(--font); letter-spacing: .04em; }
.cc-rule .cc-rule-sub { font-size: 13px; font-weight: 600; opacity: .8; }
.cc-rule-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .12); }
.cc-rule-icon svg { width: 30px; height: 30px; }
.cc-rule.r-word { background: #fff6e2; color: #2b1d14; box-shadow: inset 0 0 0 3px #d9481c, 0 6px 16px rgba(0, 0, 0, .3); }
.cc-rule.r-word .cc-rule-icon { background: #f6dcc0; }
.cc-rule.r-bonus { background: linear-gradient(135deg, #f6c531, #f08a24); color: #2b1d14; box-shadow: inset 0 0 0 3px #fff3c4, 0 6px 16px rgba(0, 0, 0, .3); }
.cc-rule.r-bonus .cc-rule-icon { color: #fff; background: rgba(255, 255, 255, .3); }
.cc-rule.flip { animation: cc-flip .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cc-flip { 0% { transform: rotateX(90deg) scale(.9); } 100% { transform: none; } }

.cc-timer { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; flex: none; }
.cc-timer i { display: block; height: 100%; background: #f6c531; transform-origin: left; border-radius: 999px; }
.cc-timer.low i { background: #ff6b4a; }

.cc-mid { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.cc-bottle { position: relative; height: 100%; max-height: 300px; min-height: 150px; aspect-ratio: 160 / 230; }
.cc-glass { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.cc-syrup { transition: y .08s linear; }
.cc-label {
  position: absolute; left: -18%; right: -18%; top: 50%; display: grid; place-items: center; padding: 10px 6px;
  background: #fffaf1; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 0 0 3px #e9d6b4;
}
.cc-word { font: 800 44px/1 var(--font); letter-spacing: .02em; white-space: nowrap; }
.cc-word.long { font-size: 34px; }
html[lang="hi"] .cc-word { font-size: 46px; letter-spacing: 0; }
.cc-bottle.bonus .cc-label { box-shadow: 0 0 0 4px #f6c531, 0 0 24px rgba(246, 197, 49, .7); }
.cc-bottle.shake { animation: cc-shake .4s; }
@keyframes cc-shake { 20% { transform: translateX(-8px) rotate(-3deg); } 50% { transform: translateX(7px) rotate(2deg); } 80% { transform: translateX(-3px); } }

.cc-float {
  position: absolute; left: 50%; top: 18%; transform: translate(-50%, 0); pointer-events: none; opacity: 0;
  font: 800 26px/1 var(--font); color: #9be37a; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap;
}
.cc-float.big { color: #f6c531; font-size: 32px; }
.cc-float.bad { color: #ff8a70; }
.cc-float.go { animation: cc-float .8s ease-out both; }
@keyframes cc-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -30px); } }

.cc-mult { min-height: 22px; font-weight: 800; font-size: 16px; color: #f6c531; flex: none; }
.cc-mult.bump { animation: cc-bump .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cc-bump { 40% { transform: scale(1.35); } }

.cc-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.cc-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 68px; padding: 8px;
  border: 0; border-radius: 18px; background: var(--c); color: #fff; font-weight: 800; font-size: 19px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  transition: transform .08s;
}
.cc-btn[data-c="yellow"] { color: #2b1d14; text-shadow: none; }
.cc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.cc-shape { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.cc-btn[data-c="yellow"] .cc-shape { filter: none; }
.cc-shape svg { width: 100%; height: 100%; }
.cc-btn kbd { position: absolute; top: 4px; right: 8px; font: 700 11px/1 var(--font); opacity: .55; display: none; }
@media (hover: hover) and (pointer: fine) { .cc-btn kbd { display: block; } }
.cc-btn.ok { box-shadow: 0 0 0 4px #9be37a, 0 5px 0 rgba(0, 0, 0, .3); }
.cc-btn.bad { box-shadow: 0 0 0 4px #ff4a2e, 0 5px 0 rgba(0, 0, 0, .3); opacity: .75; }
.cc-btn.show { box-shadow: 0 0 0 4px #fff, 0 5px 0 rgba(0, 0, 0, .3); animation: cc-bump .5s; }
.cc-hand { margin: 0; }

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

@media (max-height: 700px) {
  .cc-rule { min-height: 62px; padding: 6px 12px; }
  .cc-rule b { font-size: 27px; }
  .cc-btn { min-height: 58px; }
  .cc-word { font-size: 36px; }
  .cc-word.long { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-rule.flip, .cc-bottle.shake, .cc-mult.bump, .cc-btn.show, .chip.cc-lives.hit { animation: none; }
  .cc-float.go { animation-duration: .01s; }
  .cc-hand { animation: none; }
}
.cc-stage .coach-line { top: auto; bottom: 186px; }
@media (max-height: 700px) { .cc-stage .coach-line { bottom: 166px; } }