/* Shared coin balance bar. Colors follow the active fruit theme and Halloween. */
.dc-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--brand-cream-2, #fff8e7);
  border: 1px solid var(--brand-cream-border, #f3e6b8);
  color: var(--brand-ink, #422006);
}
.dc-balance__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-ink, #422006) 62%, transparent);
}

.qr-bet-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.qr-bet-slider::-webkit-scrollbar { display: none; }
.qr-bet-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 100%;
}
.qr-bet-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.qr-bet-dots button {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #e5e7eb;
}
.qr-bet-dots button.is-on { background: var(--brand-primary, #facd15); }

/* ---- Montepremi (bet pot) odometer. Theme tokens only: every fruit theme and Halloween. ---- */

.qr-coin-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  color: rgb(var(--brand-800));
  background: radial-gradient(circle at 34% 28%, #fff 0%, rgb(var(--brand-100)) 32%, rgb(var(--brand-300)) 70%, rgb(var(--brand-500)) 100%);
  box-shadow: inset 0 0 0 2px rgb(var(--brand-600) / 0.85), inset 0 -3px 0 rgb(var(--brand-700) / 0.35);
}
.qr-coin-face svg { width: 56%; height: 56%; }

/* theme gradient frame, dark ink panel, one tile per digit */
.qr-pot-f {
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(135deg, rgb(var(--brand-200)) 0%, rgb(var(--brand-500)) 35%, rgb(var(--brand-700)) 62%, rgb(var(--brand-300)) 100%);
  box-shadow: 0 6px 16px -8px rgb(var(--brand-800) / 0.6);
}
.qr-pot-f__in {
  position: relative;
  overflow: hidden;
  border-radius: 19px;
  padding: 10px 12px 10px;
  text-align: center;
  color: rgb(var(--brand-100));
  background:
    radial-gradient(80% 70% at 50% 62%, rgb(var(--brand-500) / 0.45) 0%, rgb(var(--brand-500) / 0) 70%),
    rgb(var(--brand-950));
}
.qr-pot-f__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.qr-pot-f__kind { font-weight: 800; font-size: 14px; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-pot-f__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(var(--brand-300));
}
.qr-pot-f__label::before, .qr-pot-f__label::after { content: ''; height: 2px; width: 22px; border-radius: 2px; background: rgb(var(--brand-400) / 0.7); }
.qr-pot-f__row { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; }
.qr-odo-tile {
  --tile-h: 56px;
  position: relative;
  display: block;
  width: 44px;
  height: var(--tile-h);
  overflow: hidden;
  border-radius: 12px;
  color: rgb(var(--brand-950));
  background: linear-gradient(180deg, #fff 0%, var(--brand-cream-2) 48%, rgb(var(--brand-100)) 52%, #fff 100%);
  box-shadow: inset 0 -3px 0 rgb(var(--brand-300)), inset 0 0 0 1px rgb(var(--brand-200));
}
.qr-odo-tile::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(var(--brand-950) / 0.16); }
.qr-odo-tile.is-lead { opacity: 0.22; }
.qr-odo-strip { display: flex; flex-direction: column; transition: transform 900ms cubic-bezier(.2, .9, .25, 1.08); }
.qr-odo-tile:nth-last-of-type(2) .qr-odo-strip { transition-delay: 80ms; }
.qr-odo-strip > span {
  display: block;
  text-align: center;
  height: var(--tile-h);
  line-height: var(--tile-h);
  font-size: 44px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.qr-pot-f__coin { width: 40px; height: 40px; margin-left: 4px; }
.qr-pot-f__split { margin-top: 6px; font-size: 12px; font-weight: 700; color: rgb(var(--brand-200) / 0.85); }

/* Short phones (e.g. 375x667): same content, tighter sizes, nothing hidden. */
@media (max-height: 700px) {
  .qr-bet-slide [data-testid="qr-bet-expand"] { margin-top: 0; }
  /* heading and split line on the left, tiles on the right */
  .qr-pot-f__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'top top' 'label row' 'split row';
    column-gap: 10px;
    align-items: center;
    padding: 8px 10px 8px 12px;
    text-align: left;
  }
  .qr-pot-f__top { grid-area: top; }
  .qr-pot-f__label { grid-area: label; justify-content: flex-start; align-self: end; margin-top: 6px; letter-spacing: 0.2em; }
  .qr-pot-f__label::before, .qr-pot-f__label::after { display: none; }
  .qr-pot-f__row { grid-area: row; margin-top: 6px; gap: 4px; }
  .qr-pot-f__split { grid-area: split; align-self: start; margin-top: 2px; font-size: 11px; line-height: 1.25; }
  .qr-odo-tile { --tile-h: 46px; width: 36px; border-radius: 10px; }
  .qr-odo-strip > span { font-size: 36px; }
  .qr-pot-f__coin { width: 34px; height: 34px; }
}

/* Tall phones (e.g. 390x844): there is room, go bigger. */
@media (min-height: 760px) {
  .qr-odo-tile { --tile-h: 68px; width: 52px; border-radius: 14px; }
  .qr-odo-strip > span { font-size: 54px; }
  .qr-pot-f__coin { width: 48px; height: 48px; }
  .qr-pot-f__in { padding: 12px 14px 12px; }
  .qr-pot-f__row { margin-top: 8px; gap: 6px; }
  .qr-pot-f__split { margin-top: 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .qr-odo-strip { transition: none; }
}