/* Odd Cookie: a warm bakery counter; the tray and cookies are drawn on the canvas */

body.game {
  --bg-top: #8a4b2a;
  --bg-bottom: #4a2414;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .14);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 210, 150, .25) 0, transparent 65%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}
.oc-stage { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.subhud .chip { white-space: nowrap; }
.subhud .oc-score b { font-size: 16px; }
.boosters:empty { padding-top: 0; }
.subhud .oc-streak.hot { background: #ffc83a; color: #4a2414; }

.subhud .oc-lives { display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; }
.oc-heart { display: inline-grid; width: 18px; height: 18px; transition: opacity .3s, filter .3s, transform .3s; }
.oc-heart svg { width: 100%; height: 100%; }
.oc-heart.off { opacity: .3; filter: grayscale(1); transform: scale(.8); }
.oc-lives.hurt { animation: oc-hurt .5s ease; }
@keyframes oc-hurt { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); background: rgba(230, 50, 40, .6); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

.oc-pause {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 6px; border: 0;
  background: rgba(40, 18, 8, .62); color: #fff; font: inherit; text-align: center;
}
.oc-pause[hidden] { display: none; }
.oc-pause b { font: 700 34px/1 var(--display); }
.oc-pause span { font-weight: 700; opacity: .85; }

.oc-stage .coach-line { top: auto; bottom: 10px; }
.oc-stage .coach-line.show { transform: translate(-50%, 0); }