/*
 * The running total, the bet deck, and the session ledger on the machine's screen.
 *
 * Kept in its own file because these three are the parts that turned the cabinet from a
 * picture of a machine into a working one: a jackpot sign that counts losses instead of a
 * prize, denomination buttons that decide what a spin costs, and a meter that says what the
 * session has taken. None of it lives in a panel beside the cabinet any more.
 */

/* -- the running total ----------------------------------------------------- */
/*
 * The Grand tier projects the financial year in progress, climbing at about $515 a second.
 * Each digit is its own strip that slides, so the last three are never still.
 */
.odo {
  --od-line: 1.16em;
  display: inline-flex;
  align-items: flex-start;
  height: var(--od-line);
  overflow: hidden;
  vertical-align: top;
}
.odo__digit {
  display: block;
  /* One character cell of the cabinet's mono face, so digits never shift as they roll. */
  width: 1ch;
  height: var(--od-line);
  overflow: hidden;
  text-align: center;
}
.odo__strip {
  display: block;
  will-change: transform;
  transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.odo__strip i {
  display: block;
  height: var(--od-line);
  line-height: var(--od-line);
  font-style: normal;
}
.odo__sep { display: block; height: var(--od-line); line-height: var(--od-line); }

/* The counter itself is hidden from assistive tech; this carries a readable sentence. */
.odo__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Only while the projection is running. */
.cabinet--live .ladder__row--grand {
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 150, 0.42),
    0 0 26px rgba(255, 176, 40, 0.18);
}
.cabinet--live .ladder__row--grand .ladder__role::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: #ff5340;
  box-shadow: 0 0 7px rgba(255, 83, 64, 0.95);
  animation: live-blip 1.6s steps(1) infinite;
}
@keyframes live-blip { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.2; } }

/* The NOW button reads as the live one: a pilot lamp, not just another year. */
.yearbtn--live { flex: 0 0 auto; padding-inline: 10px; }
.yearbtn__dot {
  display: block;
  width: 5px; height: 5px;
  margin: 0 auto 2px;
  border-radius: 50%;
  background: #ff5340;
  box-shadow: 0 0 7px rgba(255, 83, 64, 0.95);
  animation: live-blip 1.6s steps(1) infinite;
}
.yearbtn--live.yearbtn--on .yearbtn__dot { background: #7d1208; box-shadow: none; }

/* -- bet buttons on the deck ---------------------------------------------- */
/*
 * A real machine's denomination buttons decide what a spin costs, so that is exactly what
 * these do. The calibration control sits where the control belongs.
 */
.deck__row--bets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.deck__bet {
  display: grid;
  gap: 1px;
  min-height: 34px;
  padding: 6px 2px 7px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(180deg, #3d6ea8 0%, #21406b 55%, #16294a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 2px 3px rgba(0, 0, 0, 0.6);
  transition: translate 0.08s var(--ease);
}
.deck__bet:active { translate: 0 1px; }
.deck__bet-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #eaf3ff;
}
.deck__bet-name {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(214, 232, 255, 0.78);
}
.deck__bet--on {
  background: linear-gradient(180deg, #ffd964 0%, #e0a521 55%, #b07806 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 16px rgba(255, 186, 50, 0.55);
}
.deck__bet--on .deck__bet-amount { color: #3a2103; }
.deck__bet--on .deck__bet-name { color: rgba(58, 33, 3, 0.78); }

/* What the chosen bet actually costs, stamped on the deck beside the note slot. */
.deck__rate { display: grid; justify-items: end; padding-right: 4px; }
.deck__rate-label,
.deck__rate-unit {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-300);
}
.deck__rate-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.05;
  color: #ff8f78;
}
.deck__row--main { grid-template-columns: 1fr auto auto; }

/* -- the session ledger, on the machine's own screen ----------------------- */
.game__session {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(140, 20, 12, 0.5), rgba(60, 6, 3, 0.55));
  box-shadow: inset 0 0 0 1px rgba(255, 140, 110, 0.22);
}
.session__label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 194, 176, 0.85);
}
.session__lost {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ff9d8c;
  text-shadow: 0 0 10px rgba(255, 90, 60, 0.5);
}
.session__meta {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: rgba(255, 204, 190, 0.72);
  white-space: nowrap;
}
.session__meta b { font-weight: 700; color: rgba(255, 224, 210, 0.95); }

/* Screen-reader announcements for state changes worth interrupting for. */
.cab__announce {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .yearbtn__dot,
  .cabinet--live .ladder__row--grand .ladder__role::before { animation: none; }
  .odo__strip { transition: none; }
}