.machine-wrap { grid-template-columns: minmax(360px, 680px) minmax(260px, 1fr); }
.cabinet {
  width: min(100%, 570px);
  justify-self: center;
  aspect-ratio: 800 / 1402;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url('/satsazzo/artwork-base.png') center / auto 108% no-repeat;
  box-shadow: none;
  filter: drop-shadow(18px 26px 26px #000a);
}
.cabinet__crown { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.playfield {
  position: absolute;
  z-index: 3;
  left: 19%;
  top: 5%;
  width: 62%;
  height: 37%;
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.playfield canvas { width: 100%; height: 100%; background: transparent; }
.lane-values,.glass-glare,.instructions { display: none; }
.rail-zones {
  position: absolute;
  z-index: 4;
  left: 31.8%;
  top: 34.55%;
  width: 38.8%;
  height: 4.35%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
  padding: 0 1.5%;
  color: #e8c76e;
  font: 800 clamp(8px,1vw,12px)/1 "IBM Plex Mono",monospace;
  text-align: center;
  text-shadow: 0 1px #120805,0 0 7px #ffbe3a88;
  pointer-events: none;
}
.rail-zones b { display: grid; place-items: center; height: 58%; border-left: 1px solid #b8812e66; transition: color .12s,background .12s,text-shadow .12s; }
.rail-zones b:last-child { border-right: 1px solid #b8812e66; }
.rail-zones b.is-current { color: #fff1aa; background: #e247271e; text-shadow: 0 0 9px #ff552e; }
.rail-zones b.is-win { animation: zone-win .7s steps(2,end) 4; }
@keyframes zone-win { 50% { color:#fff; background:#f3b82f99; text-shadow:0 0 14px #fff; } }
.catcher-layer {
  --catcher-left: 31%;
  --catcher-top: 32.5%;
  --catcher-angle: 0deg;
  position: absolute;
  z-index: 5;
  left: var(--catcher-left);
  top: var(--catcher-top);
  width: 30%;
  aspect-ratio: 1171/1343;
  pointer-events: none;
  transform: rotate(var(--catcher-angle));
  transform-origin: 60% 17%;
  transition: filter .12s;
  will-change: left,top,transform;
}
.catcher-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(4px 6px 5px #0008);
}
.control-deck {
  position: absolute;
  z-index: 5;
  left: 22%;
  right: 22%;
  bottom: 5.8%;
  padding: 0;
  gap: 8px;
  grid-template-columns: .9fr 1.5fr;
}
.control-deck > * {
  min-height: 50px;
  border-color: #6f471b;
  background: #120d09e8;
  box-shadow: inset 0 1px #e4b95b77, 2px 3px #0c0704;
}
.control-deck button { color: #f0dca7; }
.readout { color: #55e6c1; background: #0c1513ed; }
.machine-note .eyebrow { color: #d5a548; }
@media (max-width: 780px) {
  .machine-wrap { grid-template-columns: 1fr; }
  .machine-note { order: -1; }
  .control-deck { left: 18%; right: 18%; bottom: 5%; }
}
@media (prefers-reduced-motion:reduce){.rail-zones b.is-win{animation:none;color:#fff;background:#f3b82f99}}