:root {
  color-scheme: dark;
  --cream: #f1dfad;
  --ivory: #f7edce;
  --ink: #130c07;
  --red: #d32713;
  --deep-red: #6e1008;
  --gold: #e8ad29;
  --brass: #a56b16;
  --wood: #401708;
  --panel: #130f0a;
  --led-red: #ff321d;
  --led-amber: #ffb51b;
  --machine-w: 500px;
  --edge: clamp(7px, 2.4vw, 14px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-width: 300px;
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  background: #070503;
}

body {
  min-width: 300px;
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Microsoft YaHei", "PingFang SC", "SimHei", sans-serif;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(115, 35, 12, .42), transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    #080503;
  color: var(--cream);
  user-select: none;
}

button {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #ffe45e;
  outline-offset: 2px;
}

.machine {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: min(100vw, var(--machine-w));
  height: var(--app-height, 100dvh);
  max-width: var(--machine-w);
  max-height: var(--app-height, 100dvh);
  margin: 0;
  padding: clamp(5px, 1.7vw, 9px);
  padding-bottom: max(clamp(5px, 1.7vw, 9px), env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid #2b1609;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(255,255,255,.18) 5%, transparent 7% 93%, rgba(0,0,0,.35) 95%),
    repeating-linear-gradient(91deg, rgba(60,25,6,.14) 0 2px, rgba(255,230,160,.05) 2px 4px),
    linear-gradient(100deg, #6e4a1b, #d7ad58 8%, #6c4316 17%, #cf9a42 44%, #634016 70%, #d0a04a 91%, #5a370f);
  box-shadow:
    0 0 0 3px #0b0603,
    0 0 0 5px #7a4c17,
    0 22px 60px rgba(0,0,0,.8),
    inset 0 0 18px #211006,
    inset 0 0 2px 1px #ffe5a4;
}

.machine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .12;
  background-image:
    radial-gradient(circle at 13% 24%, #321300 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 38%, #fff 0 .7px, transparent 1px),
    repeating-linear-gradient(113deg, transparent 0 21px, rgba(31,12,0,.18) 22px 23px, transparent 24px 47px);
  background-size: 41px 37px, 59px 53px, 113px 89px;
}

.machine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  box-shadow: inset 0 0 35px rgba(25, 7, 0, .65);
  border-radius: inherit;
}

.cabinet-screw {
  position: absolute;
  z-index: 40;
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #2b1808;
  background: radial-gradient(circle at 35% 30%, #ffe88a, #ad6815 43%, #3c1d05 70%, #b67b22 73%);
  box-shadow: 0 1px 2px #000;
}

.cabinet-screw::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 1px;
  width: 7px;
  height: 1px;
  background: #291306;
  transform: rotate(-32deg);
}

.screw-tl { top: 4px; left: 4px; }
.screw-tr { top: 4px; right: 4px; }
.screw-bl { bottom: 4px; left: 4px; }
.screw-br { bottom: 4px; right: 4px; }

.sound-switch {
  position: absolute;
  z-index: 60;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #eac36a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #644a25, #171009 70%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.28), 0 2px 4px #000;
  color: #ffe484;
  cursor: pointer;
  font-size: 12px;
  line-height: 23px;
}

.sound-switch.is-muted {
  opacity: .55;
  filter: grayscale(1);
}

.metal-inset {
  position: relative;
  border: 2px solid #2a1607;
  outline: 1px solid #e9b447;
  outline-offset: -3px;
  background: #120e09;
  box-shadow:
    inset 0 0 0 3px #805018,
    inset 0 0 0 5px #211107,
    inset 0 3px 8px rgba(0,0,0,.75),
    0 2px 0 #f1c15c,
    0 4px 5px rgba(0,0,0,.55);
}

.top-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr;
  align-items: center;
  flex: 0 0 clamp(62px, 8.7svh, 82px);
  min-height: 0;
  padding: 5px 22px 5px 7px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 20%),
    radial-gradient(ellipse at 50% 100%, #282116, #080706 68%);
}

.top-meter {
  min-width: 0;
  text-align: center;
}

.coin-meter {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.coin-meter .meter-label {
  color: #ffe079;
}

.coin-meter:active {
  transform: translateY(1px);
  filter: brightness(1.3);
}

.coin-meter:not(:disabled) .led {
  box-shadow: inset 0 2px 6px #000, 0 0 5px rgba(255, 76, 17, .42);
}

.meter-label {
  display: block;
  min-height: 20px;
  overflow: hidden;
  color: #cee6e1;
  font-size: clamp(8px, 2.4vw, 13px);
  font-weight: 900;
  letter-spacing: .5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}

.meter-label.gold { color: #ffd26a; }

.led {
  display: block;
  min-width: 0;
  padding: 4px 3px 2px;
  overflow: hidden;
  border: 1px solid #553617;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #050403, #180604 52%, #070403),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.02) 9px 10px);
  box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255,222,130,.25);
  font-family: "Orbitron", "Consolas", monospace;
  font-size: clamp(14px, 5vw, 24px);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

.led-red {
  color: var(--led-red);
  text-shadow: 0 0 3px #f20, 0 0 8px rgba(255,25,0,.8);
}

.led-amber {
  color: var(--led-amber);
  text-shadow: 0 0 3px #f80, 0 0 8px rgba(255,150,0,.6);
}

.cabinet-logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 6.5svh, 61px);
  margin: 0 3px;
  padding: 3px 4px;
  transform: rotate(-1deg);
  border: 2px solid #e5a91c;
  border-radius: 50% 50% 38% 38% / 35% 35% 60% 60%;
  background:
    linear-gradient(180deg, rgba(255,238,120,.4), transparent 30%),
    linear-gradient(135deg, #a8170a, #ee3b12 45%, #7b0b07);
  box-shadow: 0 0 0 2px #3a1704, 0 0 0 4px #a86712, 0 4px 7px #000, inset 0 0 10px #7b0805;
}

.cabinet-logo span {
  color: #ffda2b;
  font-size: clamp(19px, 6vw, 31px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  -webkit-text-stroke: 1.5px #391400;
  text-shadow: 0 2px 0 #822006, 0 3px 2px #000;
  white-space: nowrap;
}

.cabinet-logo small {
  margin-top: 4px;
  padding: 1px 5px;
  border-radius: 2px;
  background: #0c3f4e;
  color: #fff2a8;
  font-size: clamp(7px, 2.3vw, 11px);
  letter-spacing: 1px;
  white-space: nowrap;
}

.playfield-shell {
  display: grid;
  grid-template-columns: clamp(17px, 5vw, 25px) minmax(0, 1fr) clamp(17px, 5vw, 25px);
  flex: 1 1 auto;
  gap: 3px;
  min-height: 0;
  margin-top: 4px;
  padding: 5px 4px;
  overflow: hidden;
  border-radius: 13px;
  background:
    linear-gradient(90deg, #4e1608, #2c0d06 7%, #160b06 15%, #160b06 85%, #421307 94%),
    #160b06;
}

.bulb-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  min-width: 0;
  border: 1px solid #7d3e14;
  border-radius: 15px;
  background: linear-gradient(90deg, #381106, #7d230c 48%, #351005);
  box-shadow: inset 0 0 9px #000, 0 0 0 1px #b36b1c;
}

.rail-bulb {
  width: clamp(10px, 3.4vw, 16px);
  aspect-ratio: 1;
  border: 1px solid rgba(35,15,5,.9);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff 0 8%, var(--bulb-color) 18% 48%, #270902 70%);
  box-shadow: 0 0 4px var(--bulb-color), inset 0 -2px 3px #190702;
  opacity: .72;
  transition: filter .05s, transform .05s, opacity .05s;
}

.rail-bulb.is-on {
  opacity: 1;
  transform: scale(1.12);
  box-shadow: 0 0 3px #fff, 0 0 9px var(--bulb-color), 0 0 15px var(--bulb-color);
}

.track-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 2px solid #190d05;
  background: #231207;
  box-shadow: 0 0 0 2px #ca892a, inset 0 0 12px #000;
}

.track-cell {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(8px, 1.6svh, 12px);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  overflow: hidden;
  border: 1px solid #3b210d;
  background:
    linear-gradient(115deg, rgba(255,255,255,.68), transparent 18%),
    repeating-linear-gradient(100deg, transparent 0 17px, rgba(84,48,15,.05) 18px 19px),
    linear-gradient(#fff7d9, #dbc28b);
  box-shadow: inset 0 0 5px rgba(105,56,12,.25);
  color: #1b1208;
}

.track-cell::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0 rgba(255,238,108,0);
  transition: box-shadow .06s, background .06s;
}

.track-cell::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: clamp(4px, 1.5vw, 7px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #421000;
  background: radial-gradient(circle at 35% 28%, #fff5c2 0 7%, #fb3219 17% 50%, #610800 68%);
  box-shadow: 0 0 2px #f20;
}

.track-cell svg {
  width: 83%;
  height: 100%;
  margin: auto;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 1px 1px rgba(20,8,0,.35));
}

.track-cell .track-name {
  align-self: center;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #201006;
  font-size: clamp(5px, 1.55vw, 8px);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-cell.is-active {
  z-index: 8;
  transform: none;
  outline: 2px solid #fff3a1;
  outline-offset: -2px;
  box-shadow: inset 0 0 4px #fff, 0 0 4px #fff, 0 0 11px #ffdc31, 0 0 18px #ff5b10;
}

.track-cell.is-active::before {
  background: rgba(255,234,64,.28);
  box-shadow: inset 0 0 9px 3px #fff086;
}

.track-cell.is-active .track-name {
  padding: 1px 2px;
  border-radius: 2px;
  background: #5b0b04;
  color: #fff3a0;
}

.track-cell.is-winner {
  animation: winnerPulse .46s steps(2, end) infinite;
}

.track-cell.is-train-car {
  z-index: 8;
  background: linear-gradient(135deg, #fffbc1, #ffc62e 58%, #ef6414);
  box-shadow: inset 0 0 8px #fff, 0 0 5px #fff, 0 0 12px #ff7a00;
}

.track-cell.is-train-car::before {
  box-shadow: inset 0 0 8px 2px #fff18a;
}

.track-cell.is-train-head {
  z-index: 10;
  animation: trainHeadPulse .25s steps(2, end) infinite;
}

@keyframes winnerPulse {
  0%, 100% { box-shadow: 0 0 4px #fff, 0 0 11px #ffdc31; }
  50% { box-shadow: 0 0 8px #fff, 0 0 20px #ff2a00, inset 0 0 12px #fff29b; }
}

@keyframes trainHeadPulse {
  0%, 100% { box-shadow: inset 0 0 8px #fff, 0 0 5px #fff, 0 0 12px #ff7a00; }
  50% { box-shadow: inset 0 0 12px #fff, 0 0 8px #fff, 0 0 20px #ff2400; }
}

.center-art {
  position: relative;
  z-index: 1;
  grid-column: 2 / 8;
  grid-row: 2 / 8;
  overflow: hidden;
  border: 4px ridge #b77a27;
  border-radius: clamp(7px, 2.3vw, 13px);
  background-color: #09212d;
  background-image:
    linear-gradient(180deg, rgba(2,11,16,.06), rgba(1,7,11,.03)),
    url("assets/train-panel.png");
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 0 0 2px #2a1206;
}

.center-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

.glass-glare {
  position: absolute;
  z-index: 7;
  inset: -30% 22% 52% -35%;
  pointer-events: none;
  transform: rotate(-19deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

.hero-copy {
  position: absolute;
  z-index: 5;
  top: 4%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%) rotate(-1deg);
  text-align: center;
}

.hero-icon {
  position: absolute;
  z-index: 2;
  top: clamp(15px, 4.8vw, 25px);
  left: 4px;
  transform: translateY(-50%);
  color: #ffcb2b;
  font-size: clamp(15px, 5vw, 26px);
  text-shadow: 0 0 6px #fb2;
}

.hero-copy h1 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 1px 8px 3px clamp(30px, 8vw, 42px);
  border: 1px solid #d98a22;
  border-radius: 5px;
  background: linear-gradient(#71160b, #270302);
  color: #fff04c;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(25px, 9.2vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 1px #5d0c04;
  text-shadow: 0 2px 0 #7c1007;
  white-space: nowrap;
}

.hero-copy p {
  display: inline-block;
  margin: 6px 0 0;
  padding: 1px 13px 2px;
  border: 1px solid #ffbd2b;
  border-radius: 999px;
  background: linear-gradient(#bb2a10, #731006);
  color: #ffe49b;
  font-size: clamp(8px, 2.7vw, 14px);
  letter-spacing: 2px;
  box-shadow: 0 2px 0 #360800;
}

.center-message {
  position: absolute;
  z-index: 8;
  right: 4%;
  bottom: 4%;
  left: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 37px;
  padding: 4px 8px;
  border: 1px solid #ca861f;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(11,12,8,.9), rgba(25,7,3,.94));
  box-shadow: inset 0 0 8px #000, 0 2px 5px #000;
  text-align: center;
}

.message-main {
  color: #ffd231;
  font-size: clamp(10px, 3.3vw, 16px);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 0 #351008;
}

.message-sub {
  color: #e8d7aa;
  font-size: clamp(6px, 2vw, 10px);
  line-height: 1.25;
}

.center-art.event-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  animation: eventFlash .25s steps(2, end) infinite;
}

.center-art.event-flash .hero-copy {
  animation: titleBounce .34s ease-in-out infinite alternate;
}

.center-art.event-flash .hero-copy h1 {
  color: #fff340;
  text-shadow: 0 2px 0 #991006;
}

@keyframes eventFlash {
  0% { background: rgba(255,0,0,.07); box-shadow: inset 0 0 20px #f00; }
  100% { background: rgba(255,190,0,.15); box-shadow: inset 0 0 35px #ffba00; }
}

@keyframes titleBounce {
  from { transform: translateX(-50%) rotate(-2deg) scale(.96); }
  to { transform: translateX(-50%) rotate(1deg) scale(1.04); }
}

.odds-strip {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  flex: 0 0 clamp(40px, 5.6svh, 52px);
  gap: 1px;
  min-height: 0;
  margin-top: 4px;
  padding: 4px 5px;
  overflow: hidden;
  border-radius: 8px;
}

.odd-item {
  min-width: 0;
  padding: 2px 1px;
  border-right: 1px solid #6f481c;
  text-align: center;
}

.odd-item:last-child { border-right: 0; }

.odd-item svg {
  display: block;
  width: 75%;
  height: 66%;
  margin: auto;
  filter: drop-shadow(0 1px 1px #000);
}

.odd-item b {
  display: block;
  color: #ffb61a;
  font-family: "Orbitron", monospace;
  font-size: clamp(7px, 2.2vw, 11px);
  line-height: 1;
  text-shadow: 0 0 4px #c40;
}

.ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 0 0 clamp(48px, 6.2svh, 58px);
  min-height: 0;
  margin-top: 4px;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 8px;
}

.ledger-cell {
  min-width: 0;
  padding: 0 4px;
  border-right: 1px solid #6c431b;
  text-align: center;
}

.ledger-cell:last-child { border-right: 0; }

.ledger-cell > span {
  display: block;
  color: #e6d7b2;
  font-size: clamp(8px, 2.5vw, 12px);
  letter-spacing: 1px;
}

.ledger .led {
  padding-block: 3px 1px;
  font-size: clamp(14px, 5.2vw, 25px);
}

.bet-board {
  flex: 0 0 clamp(124px, 17.7svh, 170px);
  min-height: 0;
  margin-top: 4px;
  padding: 5px;
  overflow: hidden;
  border-radius: 9px;
  background: #171009;
}

.bet-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3px;
  height: 100%;
  min-height: 0;
}

.bet-item {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(10px, 1.7svh, 14px) clamp(8px, 1.35svh, 11px) clamp(15px, 2.2svh, 19px);
  align-items: center;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 3px 1px 2px;
  overflow: hidden;
  border: 1px solid #37210e;
  border-radius: 4px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.65), transparent 20%),
    linear-gradient(#fff7d9 0 66%, #160f09 67%);
  box-shadow: inset 0 0 4px #9f7738, 0 1px 0 #eac46e;
  color: #160e07;
  cursor: pointer;
  touch-action: manipulation;
}

.bet-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: 3px;
  box-shadow: inset 0 0 0 0 #ff4718;
  transition: box-shadow .12s;
}

.bet-item svg {
  display: block;
  grid-row: 1;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 1px 1px rgba(43,18,4,.45));
  pointer-events: none;
}

.bet-name {
  display: block;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(6px, 2vw, 10px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.bet-multiplier {
  display: block;
  grid-row: 3;
  color: #6f190a;
  font-size: clamp(7px, 2.1vw, 11px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  pointer-events: none;
}

.bet-value {
  position: static;
  grid-row: 4;
  width: calc(100% - 2px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4f2c11;
  border-radius: 2px;
  background: linear-gradient(#090605, #230602);
  color: var(--led-red);
  font-family: "Orbitron", monospace;
  font-size: clamp(8px, 2.9vw, 14px);
  line-height: 1;
  text-shadow: 0 0 4px #f20;
  pointer-events: none;
}

.bet-item.has-bet {
  filter: brightness(1.06) saturate(1.15);
  box-shadow: inset 0 0 5px #fff49c, 0 0 5px #ff3b12, 0 0 9px rgba(255,172,18,.65);
}

.bet-item.has-bet::before {
  box-shadow: inset 0 0 5px 2px #ffb21b;
}

.bet-item:active,
.bet-item.is-pressing {
  transform: translateY(1px) scale(.97);
  filter: brightness(.93);
}

.bet-item:disabled {
  cursor: default;
  opacity: .7;
}

.prize-card {
  display: grid;
  grid-template-columns: clamp(44px, 14vw, 68px) 1fr;
  flex: 0 0 clamp(52px, 7.2svh, 68px);
  min-height: 0;
  margin-top: 4px;
  padding: 5px;
  overflow: hidden;
  border-radius: 9px;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,177,40,.13) 15px 16px),
    #140d07;
}

.prize-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
  border: 1px solid #f3aa2a;
  background: linear-gradient(90deg, #71130b, #aa2512, #5d0e08);
  color: #ffe095;
  font-size: clamp(11px, 3.4vw, 17px);
  font-weight: 900;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-shadow: 0 2px 0 #4b0905;
}

.prize-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 5px 7px;
  min-width: 0;
  color: #ffe1a0;
  font-size: clamp(6px, 1.9vw, 10px);
}

.prize-lines span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prize-lines b {
  color: #ffaf20;
  font-weight: 700;
}

.control-deck {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.25fr;
  flex: 0 0 clamp(54px, 7.8svh, 72px);
  gap: 6px;
  min-height: 0;
  margin-top: 4px;
  padding: 5px 7px;
  border-radius: 11px;
}

.machine-button {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 3px 2px;
  border: 2px solid #1d1007;
  border-radius: 9px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.65),
    inset 0 -5px 6px rgba(0,0,0,.48),
    0 0 0 2px #bd822c,
    0 4px 0 #3d1d08,
    0 6px 7px #000;
  color: #fff0c2;
  cursor: pointer;
  font-size: clamp(9px, 3vw, 15px);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0,0,0,.8);
  white-space: nowrap;
  touch-action: manipulation;
}

.machine-button::after {
  content: "";
  position: absolute;
  top: 7%;
  right: 9%;
  left: 9%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none;
}

.machine-button.blue { background: linear-gradient(#1674aa, #084266); }
.machine-button.green { background: linear-gradient(#43a729, #16640f); }
.machine-button.yellow { background: linear-gradient(#f5b91e, #aa5e05); color: #291405; text-shadow: 0 1px 0 #ffe593; }
.machine-button.red { background: linear-gradient(#f04b2b, #9b140c); }

.start-button {
  font-size: clamp(11px, 3.5vw, 18px);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -6px 8px rgba(64,0,0,.58),
    0 0 0 2px #f0a938,
    0 4px 0 #4b1907,
    0 6px 8px #000,
    0 0 12px rgba(255,44,12,.45);
}

.machine-button:active,
.machine-button.is-pressed {
  transform: translateY(3px);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.5), 0 0 0 2px #9e671f, 0 1px 0 #3d1d08;
}

.machine-button:disabled {
  cursor: default;
  filter: grayscale(.6) brightness(.62);
}

.start-button.ready:not(:disabled) {
  animation: startGlow 1.2s ease-in-out infinite;
}

@keyframes startGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); box-shadow: inset 0 2px 2px #fff, inset 0 -6px 8px #650800, 0 0 0 2px #ffd05c, 0 4px 0 #4b1907, 0 0 17px #ff3d16; }
}

.machine.is-running .bet-board,
.machine.is-running .control-deck .machine-button:not(.start-button) {
  pointer-events: none;
}

.debug-panel {
  display: none;
  position: absolute;
  z-index: 80;
  right: 6px;
  bottom: 6px;
  left: 6px;
  max-height: 48%;
  margin-top: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid #56ca77;
  border-radius: 6px;
  background: #07120b;
  color: #aef8c1;
  font-family: Consolas, monospace;
  font-size: 11px;
  user-select: text;
}

.debug-panel.is-visible { display: block; }

.debug-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #63ff89;
}

.debug-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.debug-panel button,
.debug-panel input {
  border: 1px solid #2f8e49;
  border-radius: 3px;
  background: #102718;
  color: #c4ffd3;
  font: inherit;
}

.debug-panel label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}

.debug-panel label input[type="number"] { width: 90px; }
.debug-panel label input[type="range"] { flex: 1; }

.debug-panel pre {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
}

.rotate-note {
  display: none;
}

@media (max-width: 350px) {
  .machine { --edge: 6px; }
  .top-panel { padding-left: 4px; padding-right: 18px; }
  .cabinet-logo { margin-inline: 1px; }
  .playfield-shell { grid-template-columns: 15px minmax(0, 1fr) 15px; padding-inline: 3px; }
  .bet-grid { gap: 2px; }
  .bet-board { padding: 5px; }
  .bet-item { min-height: 0; }
  .control-deck { gap: 4px; padding: 7px 6px; }
  .prize-card { min-height: 0; }
}

@media (max-width: 520px) {
  .machine {
    border-radius: 0;
    box-shadow:
      inset 0 0 18px #211006,
      inset 0 0 2px 1px #ffe5a4;
  }
}

@media (max-height: 680px) and (orientation: portrait) {
  .machine {
    padding: 4px 5px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .top-panel { flex-basis: 56px; }
  .playfield-shell { margin-top: 3px; padding-block: 4px; }
  .odds-strip { flex-basis: 36px; margin-top: 3px; padding-block: 3px; }
  .ledger { flex-basis: 43px; margin-top: 3px; padding-block: 3px; }
  .bet-board { flex-basis: 116px; margin-top: 3px; padding: 4px; }
  .prize-card { flex-basis: 46px; margin-top: 3px; padding: 4px; }
  .control-deck { flex-basis: 50px; margin-top: 3px; padding-block: 4px; }
  .cabinet-logo { min-height: 43px; }
  .meter-label { min-height: 16px; }
  .bet-grid { gap: 2px; }
}

@media (min-width: 700px) {
  .machine { --edge: 14px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .rotate-note {
    position: fixed;
    z-index: 100;
    right: 9px;
    bottom: 7px;
    display: block;
    padding: 4px 7px;
    border: 1px solid #8f6725;
    border-radius: 4px;
    background: rgba(20,10,5,.85);
    color: #dbc58c;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}