/* Quick Bill: an indigo cafe at night, white receipt slips drifting down to a wooden counter, a big number pad. */

body.game {
  --bg-top: #2d3a8c;
  --bg-bottom: #161d4d;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .15);
}
.subhud .chip { white-space: nowrap; }
.subhud .qb-score b { font-size: 16px; }
.subhud .qb-mult { font-weight: 800; transition: background .2s; }
.subhud .qb-mult.hot { background: var(--turmeric); color: var(--ink); }
.subhud .qb-hearts { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; }
.qb-heart { display: inline-grid; width: 18px; height: 18px; transition: opacity .3s, filter .3s, transform .3s; }
.qb-heart svg { width: 100%; height: 100%; }
.qb-heart.off { opacity: .35; filter: grayscale(1); transform: scale(.8); }
.qb-hearts.hurt { animation: qb-hurt .5s ease; }
@keyframes qb-hurt { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); background: rgba(230, 50, 40, .6); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

.qb-stage { display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }

/* ---------- the shelf ---------- */
.qb-shelf {
  position: relative; flex: 1 1 auto; min-height: 220px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 220, 150, .2), transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), rgba(255, 255, 255, .06) calc(33.333% - 1px) 33.333%);
}
.qb-shelf.shake { animation: qb-shake .45s ease; }
@keyframes qb-shake { 20% { transform: translateY(4px); } 40% { transform: translateY(-3px); } 60% { transform: translateY(2px); } }
.qb-lanes { position: absolute; inset: 0 8px; }
.qb-counter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 2;
  background: linear-gradient(180deg, #c98a4b 0 5px, #a86a33 5px, #7d4a20); box-shadow: 0 -3px 0 rgba(0, 0, 0, .2);
  transition: box-shadow .2s;
}
.qb-counter.alarm { box-shadow: 0 -3px 0 rgba(0, 0, 0, .2), 0 -10px 22px rgba(255, 80, 60, .75); }

.qb-bill {
  position: absolute; top: 0; left: calc(var(--lane) * 33.333% + 3px); width: calc(33.333% - 6px);
  padding: 10px 6px 14px; color: var(--ink); text-align: center; will-change: transform;
  background: #fffdf6; border-radius: 8px 8px 0 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 7px repeat-x;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .18));
}
.qb-bill::before { content: ""; position: absolute; left: 8px; right: 8px; top: 5px; border-top: 2px dashed #e0d4bc; }
.qb-bill.in { animation: qb-in .3s ease-out; }
@keyframes qb-in { from { opacity: 0; } }
.qb-sum { display: grid; font: 800 29px/1.1 var(--font); letter-spacing: .01em; white-space: nowrap; }
.qb-sum small { font-size: 16px; line-height: 1; color: #b8a98f; }
.qb-bill.near { background: #fff0ea; }
.qb-bill.near .qb-sum { color: #c22d12; }
.qb-bill.gold { background: linear-gradient(160deg, #ffe58a, #f2b33d); }
.qb-tip {
  display: inline-block; margin-bottom: 2px; padding: 0 8px; border-radius: 999px; background: #8a5a10; color: #fff3c4;
  font-weight: 800; font-size: 11.5px; letter-spacing: .12em; line-height: 18px;
}
.qb-lines { display: grid; gap: 1px; }
.qb-line { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.qb-line b { margin-left: auto; font-size: 18px; }
.qb-line.total { justify-content: center; border-top: 1.5px solid #2b1d14; margin-top: 2px; padding-top: 1px; font-weight: 800; color: var(--chili); }
.qb-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.qb-ic { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.qb-ic svg { width: 18px; height: 18px; }
.qb-bill.paid { animation: qb-paid .38s ease-in forwards; }
@keyframes qb-paid { to { opacity: 0; filter: brightness(1.3); margin-top: -30px; } }
.qb-bill.crash { animation: qb-crash .6s ease-in forwards; background: #ffd2c8; }
@keyframes qb-crash { 30% { opacity: 1; } to { opacity: 0; margin-top: 20px; } }
.qb-bill.swept { animation: qb-swept .4s ease-in forwards; }
@keyframes qb-swept { to { opacity: 0; margin-left: 40px; } }

.qb-pause {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; gap: 4px; border: 0; color: #fff;
  background: rgba(10, 14, 40, .6); font: 700 16px/1.3 var(--font);
}
.qb-pause b { font: 700 30px/1.1 var(--display); }

/* ---------- number pad ---------- */
.qb-pad {
  flex: none; background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 7px;
  box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, .45);
}
.qb-display {
  display: block; height: 46px; border-radius: 14px; background: #f3e7d3; text-align: center;
  font: 800 34px/46px var(--font); letter-spacing: .08em; color: var(--ink);
}
.qb-display.empty::before { content: "?"; color: #cdb894; }
.qb-display.bad { animation: qb-bad .38s ease; background: #ffd2c8; color: #c22d12; }
@keyframes qb-bad { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.qb-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.qb-key {
  min-height: 52px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: 800 26px/1 var(--font);
  box-shadow: 0 3px 0 var(--line), inset 0 0 0 1.5px var(--line); touch-action: manipulation; display: grid; place-items: center;
}
.qb-key svg { width: 28px; height: 28px; }
.qb-key.del { background: #f6ead6; }
.qb-key.ok { background: var(--mint); color: #fff; box-shadow: 0 3px 0 #1f6b4f; }
.qb-key.down { animation: qb-press .14s ease; }
@keyframes qb-press { 50% { transform: scale(.92); } }

/* ---------- effects ---------- */
.qb-banner {
  position: absolute; left: 50%; top: 28%; z-index: 7; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 16px; background: #fff; color: var(--ink); font: 800 18px/1.25 var(--font); text-align: center;
  width: max-content; max-width: calc(100% - 32px); box-shadow: 0 6px 0 rgba(0, 0, 0, .2); transition: opacity .2s, transform .25s cubic-bezier(.2, 1.5, .4, 1);
}
.qb-banner.tip { background: var(--turmeric); font: 700 26px/1.1 var(--display); }
.qb-banner.miss { background: #e5484d; color: #fff; }
.qb-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.qb-float {
  position: absolute; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); font-weight: 800; font-size: 20px; color: #ffd93d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35); animation: qb-up .8s ease-out both;
}
@keyframes qb-up { to { transform: translate(-50%, -90%); opacity: 0; } }
.qb-shelf .coach-line { top: auto; bottom: 34px; }

@media (max-height: 700px) {
  .qb-key { min-height: 46px; font-size: 24px; }
  .qb-display { height: 40px; line-height: 40px; font-size: 30px; }
}
@media (min-width: 700px) {
  .qb-pad { width: 100%; max-width: 480px; margin: 0 auto; }
  .qb-lanes { left: 50%; right: auto; width: 600px; max-width: calc(100% - 16px); transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .qb-stage *, .qb-stage *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}