:root {
  --bg: #090b0f;
  --cabinet: #202631;
  --cabinet-edge: #434d5d;
  --panel: #10141b;
  --gold: #d8b763;
  --red: #e84038;
  --blue: #55bfff;
  --symbol-h: clamp(78px, 20.5vw, 116px);
  --reel-gap: clamp(5px, 1.4vw, 12px);
  --text: #f3f5f7;
  --muted: #a9b1bc;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans JP", sans-serif;
  background:
    radial-gradient(circle at 50% -20%, #3a4659 0, transparent 34rem),
    linear-gradient(#10141a, #07090d);
}

button { font: inherit; }

.page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 18px 10px 52px;
}

.cabinet {
  border: 2px solid var(--cabinet-edge);
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(14px, 3.5vw, 28px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 20%),
    var(--cabinet);
  box-shadow: 0 30px 90px rgba(0,0,0,.62);
}

.top-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
}

.brand-small,
.brand-sub {
  display: block;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .12em;
}

.brand-small { font-size: .62rem; }
.brand-sub { font-size: .72rem; letter-spacing: .05em; }

h1 {
  margin: 2px 0 4px;
  color: #fff7c6;
  font-size: clamp(2.2rem, 8vw, 4.4rem);
  line-height: .92;
  letter-spacing: .03em;
  text-shadow: 0 5px 0 #59110d, 0 0 24px rgba(255,73,58,.34);
}

.data-counter {
  display: grid;
  grid-template-columns: repeat(3, minmax(42px, 1fr));
  border: 2px solid #07090d;
  border-radius: 10px;
  overflow: hidden;
  background: #050608;
}

.data-counter div {
  min-width: 48px;
  padding: 5px 7px;
  text-align: center;
  border-left: 1px solid #313742;
}

.data-counter div:first-child { border-left: 0; }

.data-counter span,
.meter span {
  display: block;
  color: #aeb6c1;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.data-counter strong,
.meter strong {
  display: block;
  color: #ff5c52;
  font-family: "Courier New", monospace;
  font-size: clamp(1rem, 3.8vw, 1.45rem);
  text-shadow: 0 0 9px rgba(255,58,48,.55);
}

.upper-display {
  display: grid;
  grid-template-columns: 128px 1fr minmax(92px, auto);
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  min-height: 76px;
  padding: 9px;
  border: 1px solid #3a4350;
  border-radius: 12px;
  background: #0c1016;
  box-shadow: inset 0 0 18px rgba(0,0,0,.7);
}

.bonus-lamp {
  display: grid;
  place-items: center;
  height: 57px;
  border: 2px solid #303643;
  border-radius: 50%;
  color: #555d67;
  background: radial-gradient(circle, #171c23, #080a0e 72%);
  text-align: center;
  transition: .18s ease;
}

.bonus-lamp span { font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.bonus-lamp strong { display: block; font-size: .9rem; }

.bonus-lamp.on {
  color: #fffbd7;
  border-color: #ffe96b;
  background: radial-gradient(circle, #ffdf34, #e75a1f 58%, #55100b);
  box-shadow: 0 0 20px rgba(255,215,45,.84), inset 0 0 12px #fff8bd;
  animation: lampPulse .75s ease-in-out infinite alternate;
}

.status-message {
  min-width: 0;
  text-align: center;
}

#phaseLabel {
  display: block;
  color: var(--blue);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
}

#message {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.85rem, 3vw, 1.06rem);
}

.wait-display {
  display: block;
  min-height: 1em;
  margin-top: 2px;
  color: #ffd264;
  font-family: "Courier New", monospace;
  font-size: .73rem;
}

.mini-button {
  min-height: 34px;
  border: 1px solid #505966;
  border-radius: 7px;
  padding: 6px 9px;
  color: #dde2e8;
  background: linear-gradient(#39424e, #222832);
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}

.reel-unit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--symbol-h));
  justify-content: center;
  gap: var(--reel-gap);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(7px, 1.5vw, 11px);
  border: clamp(8px, 2vw, 13px) solid var(--gold);
  border-radius: 15px;
  overflow: hidden;
  background: #020304;
  box-shadow: 0 0 0 4px #71561b, 0 15px 26px rgba(0,0,0,.5);
}

.reel-window {
  position: relative;
  width: var(--symbol-h);
  height: calc(var(--symbol-h) * 3);
  overflow: hidden;
  border-radius: 4px;
  background: #f3efe3;
}

.reel-strip {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.symbol {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--symbol-h);
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(0,0,0,.17);
  background:
    linear-gradient(90deg, rgba(0,0,0,.13), transparent 16%, transparent 84%, rgba(0,0,0,.13)),
    radial-gradient(circle at 50% 38%, #fff, #e8e3d7 74%);
  color: #101216;
  user-select: none;
}

.symbol-face {
  display: grid;
  place-items: center;
  width: 78%;
  height: 72%;
  border: 4px solid rgba(0,0,0,.18);
  border-radius: 50%;
  font-weight: 1000;
  line-height: .9;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,.21), inset 0 3px 5px rgba(255,255,255,.7);
}

.symbol[data-symbol="RED7"] .symbol-face {
  color: #fff4b0;
  border-color: #78110a;
  background: linear-gradient(145deg, #ff5147, #a00600);
  font-size: clamp(2.5rem, 10vw, 5.4rem);
  font-style: italic;
  text-shadow: 3px 3px 0 #6c0804;
}

.symbol[data-symbol="BAR"] .symbol-face {
  width: 84%;
  height: 48%;
  border-radius: 8px;
  color: #f4f4f4;
  border-color: #777;
  background: linear-gradient(#272727, #030303);
  font-size: clamp(1.15rem, 5vw, 2.1rem);
  letter-spacing: .08em;
}

.symbol[data-symbol="BELL"] .symbol-face {
  color: #6c4100;
  border-color: #b37600;
  background: linear-gradient(145deg, #fff184, #e7a400);
  font-size: clamp(.85rem, 3.8vw, 1.45rem);
}

.symbol[data-symbol="CHERRY"] .symbol-face {
  color: #fff;
  border-color: #80101c;
  background: linear-gradient(145deg, #ff5d68, #ad0016);
  font-size: clamp(.72rem, 3.3vw, 1.25rem);
}

.symbol[data-symbol="WATERMELON"] .symbol-face {
  color: #fff;
  border-color: #17621e;
  background: linear-gradient(145deg, #63d45d, #1e852a);
  font-size: clamp(.64rem, 2.9vw, 1.05rem);
}

.symbol[data-symbol="REPLAY"] .symbol-face {
  color: #eefaff;
  border-color: #155887;
  background: linear-gradient(145deg, #58bdff, #1965a6);
  font-size: clamp(.64rem, 2.9vw, 1.08rem);
}

.symbol[data-symbol="PLUM"] .symbol-face {
  color: #fff;
  border-color: #472079;
  background: linear-gradient(145deg, #b36cff, #6a27a4);
  font-size: clamp(.76rem, 3.2vw, 1.22rem);
}

.reel-glass {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58), transparent 12%, transparent 88%, rgba(0,0,0,.58)),
    linear-gradient(105deg, rgba(255,255,255,.16), transparent 22%);
  box-shadow: inset 0 0 12px rgba(0,0,0,.4);
}

.line-guide {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  background: rgba(255,54,47,.65);
  box-shadow: 0 0 7px rgba(255,54,47,.6);
}

.line-top { top: calc(16.67%); }
.line-middle { top: 50%; background: rgba(255,245,90,.82); }
.line-bottom { top: calc(83.33%); }

.line-diagonal {
  position: absolute;
  z-index: 7;
  left: -5%;
  top: 50%;
  width: 110%;
  height: 2px;
  pointer-events: none;
  background: rgba(84,191,255,.48);
  transform-origin: center;
}

.line-diagonal-down { transform: rotate(31deg); }
.line-diagonal-up { transform: rotate(-31deg); }

.line-caption {
  margin: 9px 0 10px;
  color: var(--muted);
  text-align: center;
  font-size: .66rem;
  font-weight: 800;
}

.meter-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 11px;
  width: min(100%, 420px);
  margin: 0 auto 14px;
}

.meter {
  border: 2px solid #050608;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  background: #090c10;
  box-shadow: inset 0 0 9px #000;
}

.bet-lamps {
  display: flex;
  gap: 5px;
}

.bet-lamps span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #38414d;
  border-radius: 50%;
  color: #4e5865;
  background: #0b0e12;
  font-size: .75rem;
  font-weight: 950;
}

.bet-lamps span.on {
  color: #fff9c4;
  border-color: #ffdb50;
  background: #d7511d;
  box-shadow: 0 0 10px rgba(255,197,48,.75);
}

.operation-panel {
  display: grid;
  grid-template-columns: 1fr 118px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #3b4552;
  border-radius: 15px;
  background: linear-gradient(#303846, #181d25);
}

.bet-area,
.utility-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.control-button {
  border: 0;
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.48), inset 0 2px 0 rgba(255,255,255,.27);
  touch-action: manipulation;
}

.one-bet {
  width: 65px;
  height: 43px;
  border-radius: 9px;
  background: linear-gradient(#6c7581, #303741);
  font-size: .72rem;
}

.max-bet {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(#ff5d50, #aa0c06);
  line-height: .92;
}

.lever {
  position: relative;
  width: 105px;
  height: 78px;
  margin: 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.lever::before {
  content: "";
  position: absolute;
  left: 49px;
  top: 30px;
  width: 9px;
  height: 35px;
  border-radius: 8px;
  background: linear-gradient(90deg, #707782, #d9dde2, #5f6670);
  transform-origin: 50% 5px;
  transition: transform .12s ease;
}

.lever-knob {
  position: absolute;
  z-index: 2;
  left: 35px;
  top: 3px;
  width: 38px;
  height: 38px;
  border: 3px solid #090a0c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #f9f9f9, #828994 62%, #292e36);
  box-shadow: 0 4px 6px rgba(0,0,0,.5);
  transition: transform .12s ease;
}

.lever-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #d5dae0;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.lever:active:not(:disabled)::before { transform: rotate(25deg); }
.lever:active:not(:disabled) .lever-knob { transform: translate(13px, 8px); }

button:disabled {
  cursor: not-allowed;
  filter: grayscale(.85) brightness(.58);
}

.stop-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 4vw, 24px);
  width: min(100%, 540px);
  margin: 17px auto 0;
}

.stop-button {
  aspect-ratio: 1.45;
  border: 7px solid #4c535e;
  border-radius: 50%;
  color: #20242a;
  background: radial-gradient(circle at 50% 35%, #fff, #c6cbd0 66%, #7c838b);
  font-size: clamp(.85rem, 3.4vw, 1.15rem);
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 8px 0 #0b0d10, inset 0 3px 5px rgba(255,255,255,.9);
  transition: .08s ease;
  touch-action: manipulation;
}

.stop-button.ready {
  color: #e9f8ff;
  border-color: #1477ac;
  background: radial-gradient(circle at 50% 35%, #8edcff, #1688c8 65%, #064c76);
  box-shadow: 0 8px 0 #07151e, 0 0 18px rgba(77,193,255,.72), inset 0 3px 5px rgba(255,255,255,.55);
}

.stop-button:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #0b0d10, inset 0 2px 4px rgba(255,255,255,.5);
}

.debug-panel {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 17px;
  padding: 8px;
  border: 1px dashed #536171;
  border-radius: 9px;
  background: #0a0d12;
}

.debug-panel:not([hidden]) { display: grid; }

.debug-panel div {
  min-width: 0;
  text-align: center;
}

.debug-panel span {
  display: block;
  color: var(--muted);
  font-size: .58rem;
}

.debug-panel strong {
  display: block;
  overflow: hidden;
  color: #7dd6ff;
  font-family: "Courier New", monospace;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual {
  margin-top: 18px;
  border-top: 1px solid #3a4350;
  padding-top: 13px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.7;
}

.manual summary {
  color: #e2e6ea;
  font-weight: 850;
  cursor: pointer;
}

.manual-content { padding: 4px 5px 0; }
.manual-content ol { padding-left: 1.3rem; }

.control-button:focus-visible,
.lever:focus-visible,
.stop-button:focus-visible,
.mini-button:focus-visible {
  outline: 3px solid #8be0ff;
  outline-offset: 3px;
}

@keyframes lampPulse {
  from { filter: brightness(.9); }
  to { filter: brightness(1.22); }
}

@media (max-width: 0px) {
  :root {
    --symbol-h: min(27.2vw, 105px);
    --reel-gap: 3px;
  }

  .cabinet { padding-inline: 8px; border-radius: 19px; }

  .top-panel { grid-template-columns: 1fr; }
  .data-counter { width: 100%; }

  .upper-display {
    grid-template-columns: 88px 1fr;
  }

  .upper-display > .mini-button {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .bonus-lamp { height: 49px; }
  #message { white-space: normal; min-height: 2.3em; }

  .operation-panel {
    grid-template-columns: 1fr 90px 1fr;
    gap: 4px;
    padding-inline: 6px;
  }

  .lever { width: 88px; }
  .lever::before { left: 40px; }
  .lever-knob { left: 27px; }

  .one-bet { width: 55px; }
  .max-bet { width: 62px; height: 62px; }
  .utility-area .mini-button { padding-inline: 5px; }

  .stop-panel { gap: 8px; }
  .stop-button { border-width: 5px; }

  .debug-panel { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


.force-control {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid #303946;
  padding: 10px 6px 2px;
  text-align: left;
}

.force-control label {
  display: block;
  margin-bottom: 7px;
  color: #e8edf2;
  font-size: .72rem;
  font-weight: 900;
}

.force-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.force-row select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid #556170;
  border-radius: 7px;
  padding: 7px 9px;
  color: #ecf4fa;
  background: #151b23;
  font: inherit;
  font-size: .78rem;
}

.force-button {
  min-height: 38px;
  color: #10151b;
  border-color: #d29c28;
  background: linear-gradient(#ffe06b, #d9991a);
}

#forceStatus {
  margin: 7px 0 0;
  color: #8fdcff;
  font-size: .68rem;
}

.manual-content h2 {
  margin: 0 0 8px;
  color: #f2f5f7;
  font-size: 1rem;
}

.manual-section {
  margin-top: 18px;
  border-top: 1px solid #303947;
  padding-top: 16px;
}

.manual-section:first-child {
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
}

.manual-note {
  margin: 0 0 10px;
  color: #aeb7c2;
  font-size: .78rem;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid #35404d;
  border-radius: 9px;
  background: #0b0e13;
}

.spec-table {
  width: 100%;
  min-width: 470px;
  border-collapse: collapse;
  color: #dfe5ea;
  font-size: .75rem;
}

.spec-table th,
.spec-table td {
  border-right: 1px solid #303946;
  border-bottom: 1px solid #303946;
  padding: 7px 9px;
  text-align: center;
  white-space: nowrap;
}

.spec-table th:last-child,
.spec-table td:last-child {
  border-right: 0;
}

.spec-table tbody tr:last-child td {
  border-bottom: 0;
}

.spec-table th {
  position: sticky;
  top: 0;
  color: #fff4ba;
  background: #202834;
  font-weight: 900;
}

.spec-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.025);
}

.reel-array-table {
  min-width: 560px;
}

.reel-array-table td:first-child {
  color: #83d9ff;
  font-family: "Courier New", monospace;
  font-weight: 900;
}

.reel-array-table td:not(:first-child) {
  font-weight: 800;
}

@media (max-width: 0px) {
  .debug-panel { grid-template-columns: repeat(2, 1fr); }

  .force-row {
    grid-template-columns: 1fr;
  }

  .force-button {
    width: 100%;
  }
}


.display-buttons {
  display: grid;
  gap: 5px;
  align-content: center;
}

.mode-button.active {
  color: #101820;
  border-color: #80d7ff;
  background: linear-gradient(#9de5ff, #48a8d6);
  box-shadow: 0 0 11px rgba(72,183,239,.42);
}

#autoButton.active {
  color: #06160b;
  border-color: #72e28a;
  background: linear-gradient(#a6f4b4, #3fbf62);
  box-shadow: 0 0 13px rgba(70,211,99,.5);
}

.mode-help {
  padding-left: 1.2rem;
}

.mode-help strong {
  color: #e9f6ff;
}

@media (max-width: 0px) {
  .upper-display {
    grid-template-columns: 88px 1fr;
  }

  .display-buttons {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }
}


.data-counter {
  grid-template-columns: repeat(4, minmax(42px, 1fr));
}

.difference-counter strong {
  color: #ff6a62;
}

.difference-counter strong.positive {
  color: #72ee8f;
  text-shadow: 0 0 9px rgba(79,230,113,.55);
}

.difference-counter strong.zero {
  color: #f1dc78;
  text-shadow: 0 0 9px rgba(241,220,120,.45);
}

@media (max-width: 0px) {
  .data-counter div {
    min-width: 0;
    padding-inline: 4px;
  }

  .data-counter span {
    font-size: .52rem;
  }

  .data-counter strong {
    font-size: .94rem;
  }
}


.data-button {
  color: #10151b;
  border-color: #d5b03d;
  background: linear-gradient(#ffe58a, #c99024);
}

.data-button.open {
  color: #071018;
  border-color: #8ad8ff;
  background: linear-gradient(#a5e7ff, #42a7d4);
  box-shadow: 0 0 12px rgba(72,183,239,.48);
}

.data-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(0,0,0,.52);
  opacity: 0;
  transition: opacity .2s ease;
}

.data-backdrop.visible {
  opacity: 1;
}

.data-panel {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: min(430px, 92vw);
  height: 100dvh;
  overflow-y: auto;
  border-left: 2px solid #465363;
  padding: 18px 16px 30px;
  color: #edf2f6;
  background:
    radial-gradient(circle at 90% 0, rgba(84,191,255,.14), transparent 22rem),
    linear-gradient(180deg, #1b222c, #0e1218);
  box-shadow: -20px 0 55px rgba(0,0,0,.62);
  transform: translateX(105%);
  transition: transform .24s ease;
  overscroll-behavior: contain;
}

.data-panel.open {
  transform: translateX(0);
}

.data-panel-header {
  position: sticky;
  z-index: 4;
  top: -18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -18px -16px 15px;
  border-bottom: 1px solid #3a4653;
  padding: 17px 16px 13px;
  background: rgba(20,26,34,.96);
  backdrop-filter: blur(10px);
}

.data-kicker {
  display: block;
  color: #6fcfff;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.data-panel-header h2 {
  margin: 2px 0 0;
  font-size: 1.35rem;
}

.data-close-button {
  width: 42px;
  height: 42px;
  border: 1px solid #566474;
  border-radius: 50%;
  color: #e8edf2;
  background: #202934;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.data-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.data-summary-grid article {
  min-width: 0;
  border: 1px solid #364351;
  border-radius: 10px;
  padding: 10px;
  background: #11171e;
  box-shadow: inset 0 0 14px rgba(0,0,0,.34);
}

.data-summary-grid article.featured {
  grid-column: 1 / -1;
  border-color: #947a31;
  text-align: center;
  background:
    radial-gradient(circle, rgba(255,211,79,.12), transparent 70%),
    #15191d;
}

.data-summary-grid span {
  display: block;
  color: #9faab5;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.data-summary-grid strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #f3f6f8;
  font-family: "Courier New", monospace;
  font-size: 1.22rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-summary-grid article.featured strong {
  color: #ffe47e;
  font-size: 1.85rem;
  text-shadow: 0 0 12px rgba(255,213,62,.35);
}

.data-summary-grid small {
  display: block;
  margin-top: 1px;
  color: #75d4ff;
  font-size: .7rem;
}

.data-value-positive {
  color: #74ed91 !important;
}

.data-value-negative {
  color: #ff756c !important;
}

.data-value-zero {
  color: #f1dd80 !important;
}

.data-chart-section {
  margin-top: 17px;
  border: 1px solid #394654;
  border-radius: 12px;
  padding: 12px;
  background: #0b1016;
}

.data-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.data-section-title span {
  color: #64c8f7;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.data-section-title h3 {
  margin: 1px 0 0;
  font-size: 1rem;
}

.data-section-title small {
  color: #8f9ba8;
  font-size: .66rem;
}

.chart-wrap {
  position: relative;
  min-height: 235px;
  border: 1px solid #252f3a;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #080c11;
  background-size: 28px 28px;
}

#differenceChart {
  display: block;
  width: 100%;
  height: 235px;
}

.chart-empty-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 20px;
  color: #778594;
  text-align: center;
  font-size: .78rem;
  pointer-events: none;
}

.chart-empty-message[hidden] {
  display: none;
}

.data-definition {
  margin: 14px 3px 0;
  color: #9da8b3;
  font-size: .7rem;
  line-height: 1.65;
}

body.data-panel-open {
  overflow: hidden;
}

@media (min-width: 0px) {
  body.data-panel-open .page {
    transform: translateX(-170px);
  }

  .page {
    transition: transform .24s ease;
  }
}

@media (max-width: 0px) {
  .display-buttons {
    grid-template-columns: repeat(4, 1fr);
  }

  .display-buttons .mini-button {
    padding-inline: 3px;
    font-size: .62rem;
  }

  .data-panel {
    width: min(94vw, 430px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-panel,
  .data-backdrop,
  .page {
    transition-duration: .01ms !important;
  }
}


.speed-button {
  color: #ecf5ff;
  border-color: #675a9a;
  background: linear-gradient(#655d86, #38324f);
}

.speed-button.speed-2 {
  color: #061820;
  border-color: #63d4ff;
  background: linear-gradient(#a5e9ff, #43acd8);
  box-shadow: 0 0 10px rgba(67,172,216,.42);
}

.speed-button.speed-4 {
  color: #1a0d00;
  border-color: #ffb34f;
  background: linear-gradient(#ffd07f, #ee7d22);
  box-shadow: 0 0 12px rgba(244,131,35,.5);
}

@media (max-width: 0px) {
  .display-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* v10 compact tuning */
.page {
  width: min(100%, 740px);
  padding: 14px 10px 40px;
}

.cabinet {
  padding: clamp(10px, 2.8vw, 20px);
}

.top-panel {
  gap: 10px;
  align-items: center;
}

.brand-small { font-size: .58rem; }
.brand-sub { font-size: .68rem; }

h1 {
  margin: 0 0 2px;
  font-size: clamp(1.9rem, 7.2vw, 3.6rem);
  letter-spacing: .025em;
}

.data-counter {
  gap: 0;
}

.data-counter div {
  padding: 4px 6px;
}

.data-counter strong,
.meter strong {
  font-size: clamp(.95rem, 3.3vw, 1.3rem);
}

.upper-display {
  margin: 12px 0 10px;
  min-height: 58px;
  padding: 7px 8px;
  grid-template-columns: 96px 1fr minmax(80px, auto);
  gap: 8px;
}

.bonus-lamp {
  height: 42px;
}

.bonus-lamp strong {
  font-size: .82rem;
}

#phaseLabel {
  font-size: .6rem;
}

#message {
  font-size: clamp(.8rem, 2.6vw, .98rem);
}

.wait-display {
  font-size: .66rem;
}

.display-buttons {
  gap: 4px;
}

.display-buttons .mini-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: .64rem;
  border-radius: 7px;
}

.operation-panel {
  padding: 10px 12px;
  gap: 9px;
}

.stop-panel {
  margin-top: 14px;
}

.manual {
  margin-top: 14px;
  padding-top: 11px;
}

@media (max-width: 0px) {
  .page {
    padding: 8px 6px 24px;
  }

  .cabinet {
    padding: 8px;
    border-radius: 16px;
  }

  .top-panel {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  h1 {
    font-size: clamp(1.8rem, 12vw, 3rem);
  }

  .upper-display {
    grid-template-columns: 74px 1fr;
    min-height: 52px;
    gap: 6px;
    padding: 6px;
  }

  .bonus-lamp {
    height: 38px;
  }

  .display-buttons {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }

  .display-buttons .mini-button:last-child {
    grid-column: 1 / -1;
  }

  .display-buttons .mini-button {
    min-height: 28px;
    padding: 4px 3px;
    font-size: .58rem;
  }

  .status-message {
    text-align: left;
  }

  #message {
    min-height: 2.1em;
    font-size: .78rem;
    line-height: 1.35;
  }

  .wait-display {
    font-size: .6rem;
  }

  .operation-panel {
    grid-template-columns: 1fr 84px 1fr;
    gap: 4px;
    padding: 7px 5px;
  }
}


/* v11 top-area compact override */
.upper-display {
  min-height: 46px;
  padding: 6px 8px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 8px;
}

.bonus-lamp {
  height: 36px;
}

.bonus-lamp span {
  font-size: .52rem;
}

.bonus-lamp strong {
  font-size: .74rem;
}

#message {
  font-size: clamp(.76rem, 2.2vw, .92rem);
}

.display-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.display-buttons .mini-button {
  min-width: 58px;
  min-height: 28px;
  padding: 4px 6px;
  font-size: .58rem;
  letter-spacing: .01em;
}

h1 {
  font-size: clamp(1.7rem, 6.4vw, 3.15rem);
}

.brand-small {
  font-size: .54rem;
}

.brand-sub {
  font-size: .62rem;
}

.top-panel {
  gap: 8px;
}

@media (max-width: 0px) {
  .upper-display {
    grid-template-columns: 72px 1fr;
    min-height: 48px;
    gap: 6px;
  }

  .display-buttons {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .display-buttons .mini-button {
    min-width: 0;
    min-height: 28px;
    font-size: .56rem;
    padding: 4px 2px;
  }

  .display-buttons .mini-button:nth-child(4),
  .display-buttons .mini-button:nth-child(5) {
    grid-column: span 1;
  }

  h1 {
    font-size: clamp(1.55rem, 10vw, 2.65rem);
  }

  .brand-sub {
    font-size: .58rem;
  }
}


/* v12 Japanese pachislot inspired styling */
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(101,142,204,.22), transparent 35%),
    linear-gradient(180deg, #0a1118, #121a24 28%, #0b1016 100%);
}

.cabinet {
  border: 1px solid #45546a;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0, rgba(104,146,225,.12), transparent 35%),
    linear-gradient(180deg, #273244 0%, #1b2430 19%, #131a24 57%, #0f141c 100%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 0 3px rgba(10,14,20,.42);
}

.brand {
  position: relative;
}

.brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 18%;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,98,68,.95), rgba(255,205,73,.88), rgba(86,190,255,.72), transparent);
  box-shadow: 0 0 12px rgba(255,120,72,.32);
}

h1 {
  text-shadow:
    0 0 10px rgba(255,227,157,.24),
    0 3px 0 rgba(108,0,0,.35);
}

.reel-unit {
  border: 2px solid #566273;
  border-radius: 28px;
  padding: 18px 18px 22px;
  background:
    linear-gradient(180deg, #2e3541 0%, #1c232c 12%, #0b0e13 44%, #212831 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 -10px 20px rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.26);
}

.reel-window {
  border: 4px solid #8d929b;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.22),
    inset 0 -12px 15px rgba(0,0,0,.38),
    0 5px 16px rgba(0,0,0,.32);
}

.operation-panel {
  border: 1px solid #485769;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(64,76,91,.65), rgba(25,31,40,.95)),
    linear-gradient(90deg, rgba(255,96,81,.06), transparent 35%, transparent 65%, rgba(96,164,255,.07));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 18px rgba(0,0,0,.24);
}

.stop-panel {
  position: relative;
  margin-top: 12px;
  padding: 10px 6px 0;
}

.stop-panel::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 24px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(255,255,255,.06));
  filter: blur(2px);
  z-index: 0;
}

.stop-button {
  position: relative;
  z-index: 1;
  border: 4px solid #474a4f;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.75), rgba(255,255,255,.08) 38%, transparent 45%),
    linear-gradient(180deg, #dbdbdb 0%, #9b9b9b 58%, #6e6e6e 100%);
  box-shadow:
    inset 0 3px 7px rgba(255,255,255,.34),
    inset 0 -6px 10px rgba(0,0,0,.25),
    0 10px 0 #16181c,
    0 15px 22px rgba(0,0,0,.32);
}

.stop-button.ready {
  box-shadow:
    inset 0 3px 7px rgba(255,255,255,.34),
    inset 0 -6px 10px rgba(0,0,0,.25),
    0 10px 0 #16181c,
    0 0 16px rgba(92,190,255,.4),
    0 15px 22px rgba(0,0,0,.32);
}

.lower-deco-panel {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 22px 0 6px;
  padding: 14px 14px 18px;
  border: 1px solid #4b5968;
  border-radius: 18px 18px 24px 24px;
  background:
    linear-gradient(180deg, rgba(49,59,72,.96), rgba(22,28,36,.98)),
    linear-gradient(90deg, rgba(255,88,72,.08), transparent 40%, transparent 60%, rgba(70,150,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -16px 24px rgba(0,0,0,.22),
    0 8px 18px rgba(0,0,0,.22);
}

.deco-side {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(22,29,38,.98), rgba(38,45,57,.9));
}

.deco-side-left {
  box-shadow: inset 0 0 0 1px rgba(255,112,90,.12), inset 0 0 30px rgba(255,105,80,.08);
}

.deco-side-right {
  box-shadow: inset 0 0 0 1px rgba(91,173,255,.12), inset 0 0 30px rgba(91,173,255,.08);
}

.deco-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff3cc;
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255,120,85,.9), rgba(133,29,21,.9));
  text-shadow: 0 0 8px rgba(255,236,179,.35);
}

.deco-side-right .deco-badge {
  background: linear-gradient(180deg, rgba(100,192,255,.95), rgba(35,75,143,.88));
}

.deco-caption {
  color: #d6dde5;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.deco-bursts,
.deco-lightning {
  position: absolute;
  inset: auto 8px 10px 8px;
  height: 64px;
}

.deco-bursts span,
.deco-lightning span {
  position: absolute;
  display: block;
}

.deco-bursts span:nth-child(1) {
  left: 8px; bottom: 10px; width: 52px; height: 52px;
  border: 2px solid rgba(255,203,112,.65); border-radius: 50%; opacity: .9;
  box-shadow: 0 0 10px rgba(255,183,91,.26);
}
.deco-bursts span:nth-child(2) {
  left: 40px; bottom: 20px; width: 12px; height: 12px; background: #ff8a5a; border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,120,80,.55), 22px -12px 0 1px #ffd06c, -18px -8px 0 1px #ffcb63;
}
.deco-bursts span:nth-child(3) {
  left: 85px; bottom: 6px; width: 34px; height: 34px;
  border: 2px solid rgba(255,124,98,.5); transform: rotate(45deg);
}

.deco-lightning span:nth-child(1) {
  left: 10px; bottom: 12px; width: 34px; height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(99,191,255,.95));
  clip-path: polygon(50% 0, 100% 0, 62% 42%, 92% 42%, 28% 100%, 42% 58%, 10% 58%);
  box-shadow: 0 0 14px rgba(107,195,255,.46);
}
.deco-lightning span:nth-child(2) {
  left: 58px; bottom: 20px; width: 54px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(90,188,255,.08), rgba(134,213,255,.9), rgba(90,188,255,.08));
}
.deco-lightning span:nth-child(3) {
  right: 12px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(134,213,255,.65);
  box-shadow: 0 0 12px rgba(88,173,255,.22);
}

.deco-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 132px;
}

.coin-tray-light {
  width: min(88%, 260px);
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,199,111,.78), rgba(111,194,255,.68), transparent);
  filter: blur(1px);
  opacity: .78;
}

.coin-tray {
  position: relative;
  width: min(100%, 320px);
  height: 76px;
  border: 2px solid #5d6672;
  border-radius: 16px 16px 28px 28px;
  background:
    linear-gradient(180deg, #424b59 0%, #202733 35%, #0d1117 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 16px rgba(0,0,0,.45),
    0 10px 16px rgba(0,0,0,.26);
}

.tray-rim {
  position: absolute;
  left: 18px; right: 18px; top: 13px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.15));
}

.tray-groove {
  position: absolute;
  left: 14px; right: 14px; bottom: 15px;
  height: 26px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.tray-label {
  position: absolute;
  left: 0; right: 0; top: 31px;
  text-align: center;
  color: #f2e2a1;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-shadow: 0 0 10px rgba(255,230,152,.22);
}

.chrome-bar {
  width: min(84%, 220px);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #edf1f5, #7e8b98 55%, #434c58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

@media (max-width: 0px) {
  .lower-deco-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .deco-side,
  .deco-center {
    min-height: 110px;
  }

  .deco-badge {
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
  }

  .coin-tray {
    width: 100%;
  }
}


/* v13: replaceable top/lower art panels, machine-like bet/lever styling */
.machine-top-art {
  display: grid;
  grid-template-columns: 112px 1fr 112px;
  align-items: stretch;
  gap: 10px;
  margin: 12px 0 10px;
  padding: 10px;
  border: 1px solid #5b6472;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(64,55,45,.9), rgba(25,27,32,.98)),
    linear-gradient(90deg, rgba(255,112,66,.10), transparent 34%, transparent 66%, rgba(110,180,255,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 18px rgba(0,0,0,.28),
    0 8px 16px rgba(0,0,0,.2);
}

.top-art-side,
.top-art-center {
  position: relative;
  overflow: hidden;
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(22,27,35,.98), rgba(48,54,67,.88));
  display: grid;
  place-items: center;
  text-align: center;
}

.top-art-side::before,
.top-art-center::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 10px;
  pointer-events: none;
}

.top-art-kicker {
  display: block;
  color: #9ecff2;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.top-art-side strong,
.top-art-title {
  display: block;
  position: relative;
  z-index: 1;
  color: #fff2c7;
  font-weight: 1000;
  text-shadow: 0 0 10px rgba(255,213,127,.22);
}

.top-art-side strong {
  font-size: 1.28rem;
}

.top-art-center {
  padding: 8px 10px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,165,80,.18), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(26,30,38,.98), rgba(66,45,36,.9));
}

.top-art-title {
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  letter-spacing: .08em;
}

.top-art-center small,
.top-art-side small {
  position: relative;
  z-index: 1;
  color: #c6cbd2;
  font-size: .58rem;
}

.top-art-big { box-shadow: inset 0 0 0 1px rgba(255,94,72,.12), inset 0 0 20px rgba(255,109,81,.08); }
.top-art-reg { box-shadow: inset 0 0 0 1px rgba(87,166,255,.12), inset 0 0 20px rgba(87,166,255,.08); }

.operation-panel {
  padding: 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(71,82,95,.95), rgba(26,31,40,.98)),
    linear-gradient(90deg, rgba(255,120,72,.06), transparent 34%, transparent 66%, rgba(98,176,255,.06));
}

.bet-area,
.utility-area {
  gap: 10px;
}

.control-button {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -8px 12px rgba(0,0,0,.18),
    0 6px 0 rgba(10,12,16,.72),
    0 10px 16px rgba(0,0,0,.28);
}

.one-bet {
  width: 70px;
  height: 46px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.25), transparent 28%),
    linear-gradient(180deg, #7d8794, #454d57 58%, #2e353f);
  font-size: .76rem;
}

.max-bet {
  width: 74px;
  height: 74px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(180deg, #ff715f, #df2718 52%, #9f0f08);
}

.control-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -5px 8px rgba(0,0,0,.22),
    0 2px 0 rgba(10,12,16,.72),
    0 5px 10px rgba(0,0,0,.25);
}

.lever {
  width: 116px;
  height: 82px;
}

.lever::before {
  left: 54px;
  top: 28px;
  width: 8px;
  height: 39px;
  background: linear-gradient(90deg, #555f6d, #dfe6ec, #6b7582);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.lever-knob {
  left: 34px;
  top: 1px;
  width: 44px;
  height: 44px;
  border: 3px solid #090b0d;
  background:
    radial-gradient(circle at 35% 28%, #fafafa, #a4abb5 48%, #4d5560 70%, #242931);
  box-shadow:
    0 8px 12px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.lever-label {
  bottom: -1px;
  font-size: .68rem;
  letter-spacing: .1em;
}

.lower-art-panel {
  margin: 22px 0 8px;
}

.lower-art-frame {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  gap: 10px;
  align-items: center;
  min-height: 156px;
  padding: 12px;
  border: 1px solid #596676;
  border-radius: 18px 18px 24px 24px;
  background:
    linear-gradient(180deg, rgba(49,57,69,.98), rgba(17,22,29,.98)),
    linear-gradient(90deg, rgba(255,104,72,.10), transparent 34%, transparent 66%, rgba(96,170,255,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -14px 22px rgba(0,0,0,.28),
    0 10px 18px rgba(0,0,0,.24);
}

.lower-art-frame::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  bottom: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px 14px 20px 20px;
  pointer-events: none;
}

.lower-art-side,
.lower-art-center {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.lower-art-side {
  align-self: stretch;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.lower-art-badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: #fff2cc;
  font-size: .92rem;
  font-weight: 1000;
  letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(255,114,86,.95), rgba(128,34,25,.95));
  box-shadow: 0 0 12px rgba(255,111,82,.22);
}

.lower-art-side.right .lower-art-badge {
  background: linear-gradient(180deg, rgba(92,176,255,.98), rgba(36,79,147,.95));
  box-shadow: 0 0 12px rgba(92,176,255,.18);
}

.lower-art-center {
  min-height: 128px;
  border-radius: 14px;
  padding: 8px 10px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,157,86,.22), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.lower-art-kicker {
  color: #88caef;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.lower-art-title {
  color: #ffe88f;
  font-size: clamp(1.7rem, 6vw, 3rem);
  font-weight: 1000;
  line-height: .95;
  letter-spacing: .06em;
  text-shadow:
    0 0 12px rgba(255,221,131,.28),
    0 3px 0 rgba(115,35,0,.46);
}

.lower-art-center small {
  color: #cfd6de;
  font-size: .62rem;
}

@media (max-width: 0px) {
  .machine-top-art {
    grid-template-columns: 88px 1fr 88px;
    gap: 8px;
  }

  .top-art-side strong {
    font-size: 1.05rem;
  }

  .lower-art-frame {
    grid-template-columns: 76px 1fr 76px;
    min-height: 132px;
  }
}

@media (max-width: 0px) {
  .machine-top-art {
    grid-template-columns: 1fr;
  }

  .top-art-side,
  .top-art-center {
    min-height: 62px;
  }

  .operation-panel {
    grid-template-columns: 1fr 92px 1fr;
    gap: 6px;
    padding: 8px 6px;
  }

  .bet-area,
  .utility-area {
    gap: 6px;
  }

  .one-bet {
    width: 62px;
    height: 42px;
  }

  .max-bet {
    width: 68px;
    height: 68px;
  }

  .lever {
    width: 92px;
    height: 74px;
  }

  .lever::before { left: 42px; }
  .lever-knob { left: 25px; width: 40px; height: 40px; }

  .lower-art-frame {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .lower-art-side {
    min-height: 56px;
  }

  .lower-art-center {
    min-height: 110px;
  }
}


/* v14 top cleanup and lamp display */
.compact-top-panel {
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 10px;
}

.top-lamp-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 430px);
  margin-left: auto;
  border: 2px solid #07090d;
  border-radius: 11px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #07090d, #020305);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.top-lamp-bar div {
  min-width: 0;
  padding: 5px 7px 6px;
  text-align: center;
  border-left: 1px solid #2b3340;
}

.top-lamp-bar div:first-child { border-left: 0; }

.top-lamp-bar span {
  display: block;
  color: #d2dae4;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.top-lamp-bar strong {
  display: block;
  color: #ff5b52;
  font-family: "Courier New", monospace;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  text-shadow: 0 0 8px rgba(255,63,53,.52);
}

.top-panel .brand,
.top-panel h1,
.top-panel .data-counter,
.top-panel .brand-small,
.top-panel .brand-sub {
  display: none !important;
}

.page-footer {
  margin-top: 14px;
  text-align: center;
}

.page-footer small {
  color: #8893a1;
  font-size: .62rem;
  letter-spacing: .08em;
}

/* v14 side decorations around reels */
.reel-stage {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  align-items: stretch;
  gap: 14px;
}

.reel-stage .reel-unit {
  width: 100%;
  margin: 0;
}

.reel-side-art {
  display: flex;
  align-items: stretch;
}

.reel-side-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 390px;
  border: 1px solid #4f5a68;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(19,28,40,.95), rgba(10,16,25,.98)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -12px 24px rgba(0,0,0,.34),
    0 8px 18px rgba(0,0,0,.2);
}

.reel-side-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 18px;
}

.side-kicker {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  color: #8dcaf1;
  text-align: center;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.side-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,240,186,.88);
  font-size: 1.18rem;
  font-weight: 1000;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0 10px rgba(255,214,104,.18);
}

.reel-side-left .side-title { color: rgba(255,216,144,.84); }
.reel-side-right .side-title { color: rgba(183,225,255,.84); }

.side-fireworks span,
.side-bolts span {
  position: absolute;
  display: block;
}

.side-fireworks span:nth-child(1) {
  left: 16px; bottom: 26px; width: 42px; height: 42px;
  border: 2px solid rgba(255,169,88,.68); border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,156,80,.22);
}
.side-fireworks span:nth-child(2) {
  right: 20px; top: 64px; width: 14px; height: 14px; border-radius: 50%; background: #ff8a59;
  box-shadow: -20px 18px 0 1px #ffd86b, -2px 38px 0 1px #ffbf59;
}
.side-fireworks span:nth-child(3) {
  left: 28px; top: 90px; width: 60px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,162,84,.92), transparent);
  transform: rotate(65deg);
}

.side-bolts span:nth-child(1) {
  right: 28px; top: 84px; width: 28px; height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(100,196,255,.92));
  clip-path: polygon(50% 0, 100% 0, 62% 42%, 92% 42%, 28% 100%, 42% 58%, 10% 58%);
  box-shadow: 0 0 12px rgba(86,186,255,.3);
}
.side-bolts span:nth-child(2) {
  left: 20px; bottom: 40px; width: 52px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(130,214,255,.9), transparent);
}
.side-bolts span:nth-child(3) {
  left: 22px; top: 52px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(130,214,255,.65);
}

/* thinner pay lines */
.line-guide {
  height: 2px;
  background: rgba(255,72,64,.45);
  box-shadow: 0 0 4px rgba(255,72,64,.35);
}

.line-middle {
  background: rgba(255,239,97,.58);
}

.line-diagonal {
  height: 1px;
  background: rgba(97,195,255,.28);
}

@media (max-width: 0px) {
  .reel-stage {
    grid-template-columns: 84px minmax(0, 1fr) 84px;
    gap: 10px;
  }

  .reel-side-frame {
    min-height: 360px;
  }
}

@media (max-width: 0px) {
  .top-lamp-bar {
    width: 100%;
  }

  .reel-stage {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .reel-side-art {
    order: 2;
  }

  .reel-stage .reel-unit {
    order: 1;
  }

  .reel-side-frame {
    min-height: 84px;
  }

  .side-title {
    writing-mode: horizontal-tb;
    letter-spacing: .1em;
    font-size: 1rem;
  }

  .side-kicker {
    top: 10px;
  }
}


/* v15: luxe side ornaments and Juggler-like side chance lamp */
.upper-display {
  grid-template-columns: minmax(0, 1fr) auto;
}

.side-bonus-frame,
.side-thunder-frame {
  background:
    linear-gradient(180deg, rgba(36,44,57,.98), rgba(12,18,27,.98)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 2px solid #566272;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 2px rgba(7,10,15,.38),
    inset 0 -14px 26px rgba(0,0,0,.38),
    0 10px 22px rgba(0,0,0,.24);
}

.luxe-side-frame::after {
  content: "";
  position: absolute;
  inset: 24px 10px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%, rgba(255,255,255,.02));
  pointer-events: none;
}

.side-bonus-lamp {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  top: 16px;
  height: 88px;
  border: 3px solid #8c5d9d;
  border-radius: 999px;
  color: #c6b1d7;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.15), transparent 25%),
    radial-gradient(circle, #341f4b 0%, #1a1429 58%, #0b0b11 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -7px 10px rgba(0,0,0,.35),
    0 0 0 2px rgba(0,0,0,.25),
    0 6px 16px rgba(0,0,0,.28);
}

.side-bonus-lamp span {
  font-size: .66rem;
  letter-spacing: .18em;
}

.side-bonus-lamp strong {
  font-size: 1.18rem;
  letter-spacing: .06em;
}

.side-bonus-lamp.on {
  color: #fff8ff;
  border-color: #ffb6ff;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(255,170,248,.72) 18%, rgba(218,59,255,.88) 48%, rgba(76,20,93,.95) 78%, #130d1d 100%);
  box-shadow:
    0 0 24px rgba(255,97,247,.72),
    0 0 46px rgba(134,59,255,.45),
    inset 0 0 14px rgba(255,255,255,.72),
    inset 0 -8px 10px rgba(61,6,71,.35);
}

.side-ornament {
  position: absolute;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.side-ornament-top {
  top: 118px;
}

.side-jewel {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,246,212,.55);
  background: radial-gradient(circle at 35% 28%, #fff6cd, #ff985f 52%, #8d2818 75%);
  box-shadow: 0 0 12px rgba(255,135,91,.24);
}

.side-jewel.small {
  width: 13px;
  height: 13px;
}

.side-jewel.blue {
  background: radial-gradient(circle at 35% 28%, #ffffff, #8bd3ff 52%, #275da1 75%);
  box-shadow: 0 0 12px rgba(115,196,255,.24);
}

.side-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,128,84,.2), rgba(255,210,118,.92), rgba(255,128,84,.2));
  box-shadow: 0 0 10px rgba(255,176,102,.18);
}

.side-bar.blue {
  background: linear-gradient(90deg, rgba(90,168,255,.2), rgba(162,224,255,.92), rgba(90,168,255,.2));
  box-shadow: 0 0 10px rgba(115,196,255,.18);
}

.side-kicker {
  top: 142px;
}

.side-title {
  font-size: 1.26rem;
  letter-spacing: .20em;
}

.side-badge-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 180px;
  display: grid;
  gap: 14px;
  z-index: 2;
}

.side-round-badge {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #fff6dd;
  font-size: .88rem;
  font-weight: 1000;
  letter-spacing: .06em;
  border: 3px solid rgba(255,244,196,.28);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -8px 12px rgba(0,0,0,.24),
    0 8px 14px rgba(0,0,0,.22);
}

.side-round-badge.big {
  background: radial-gradient(circle at 35% 30%, #fff2c2, #ff7f55 44%, #971d16 76%);
}

.side-round-badge.reg {
  background: radial-gradient(circle at 35% 30%, #ffffff, #a6deff 44%, #2964ae 76%);
}

.side-round-badge.alt {
  width: 62px;
  height: 62px;
}

.deluxe-fireworks span,
.deluxe-bolts span {
  position: absolute;
  display: block;
}

.deluxe-fireworks span:nth-child(1) {
  left: 12px; bottom: 26px; width: 54px; height: 54px;
  border: 2px solid rgba(255,187,97,.66); border-radius: 50%;
}
.deluxe-fireworks span:nth-child(2) {
  left: 26px; bottom: 40px; width: 4px; height: 40px;
  background: linear-gradient(180deg, rgba(255,198,112,.85), transparent);
  transform: rotate(25deg);
}
.deluxe-fireworks span:nth-child(3) {
  left: 52px; bottom: 30px; width: 40px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,159,92,.9), transparent);
  transform: rotate(-35deg);
}
.deluxe-fireworks span:nth-child(4) {
  right: 14px; bottom: 22px; width: 20px; height: 20px; border-radius: 50%; background: #ffd76e;
  box-shadow: -18px -8px 0 0 #ff8f60, -30px 12px 0 0 #ffba67;
}
.deluxe-fireworks span:nth-child(5) {
  right: 18px; top: 186px; width: 36px; height: 36px;
  border: 2px solid rgba(255,132,96,.42); transform: rotate(45deg);
}

.deluxe-bolts span:nth-child(1) {
  right: 16px; top: 206px; width: 30px; height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(109,202,255,.92));
  clip-path: polygon(50% 0, 100% 0, 62% 42%, 92% 42%, 28% 100%, 42% 58%, 10% 58%);
}
.deluxe-bolts span:nth-child(2) {
  left: 18px; bottom: 40px; width: 58px; height: 3px;
  border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(151,223,255,.96), transparent);
}
.deluxe-bolts span:nth-child(3) {
  left: 22px; top: 204px; width: 20px; height: 20px; border-radius: 50%; background: #aee1ff;
  box-shadow: 0 0 12px rgba(121,204,255,.42), 24px 36px 0 -4px #6fbfff;
}
.deluxe-bolts span:nth-child(4) {
  right: 16px; bottom: 42px; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(129,214,255,.46);
}
.deluxe-bolts span:nth-child(5) {
  left: 24px; top: 248px; width: 48px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(130,214,255,.9), transparent);
  transform: rotate(28deg);
}

@media (max-width: 0px) {
  .side-bonus-lamp {
    top: 12px;
    height: 78px;
  }

  .side-ornament-top {
    top: 102px;
  }

  .side-kicker {
    top: 126px;
  }

  .side-badge-stack {
    top: 162px;
    gap: 10px;
  }

  .side-round-badge {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 0px) {
  .upper-display {
    grid-template-columns: 1fr;
  }

  .reel-side-frame {
    min-height: 110px;
  }

  .side-bonus-lamp {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: min(220px, 92%);
    margin: 12px auto 8px;
    height: 68px;
  }

  .side-ornament-top,
  .side-kicker,
  .side-title,
  .side-badge-stack,
  .deluxe-fireworks,
  .deluxe-bolts {
    position: static;
    transform: none;
  }

  .side-kicker {
    display: block;
    margin-top: 2px;
    text-align: center;
  }

  .side-title {
    display: block;
    inset: auto;
    writing-mode: horizontal-tb;
    text-align: center;
    margin-top: 6px;
    font-size: 1rem;
  }

  .side-badge-stack {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 12px;
  }

  .side-round-badge,
  .side-round-badge.alt {
    width: 54px;
    height: 54px;
    font-size: .74rem;
  }

  .side-ornament {
    position: static;
    margin: 8px 10px 0;
  }

  .deluxe-fireworks,
  .deluxe-bolts {
    position: absolute;
    inset: auto 0 6px 0;
    height: 40px;
  }
}


/* v16 side redesign, lower bonus lamp, side bet lamps */
.revised-side-frame {
  border-radius: 22px;
}

.side-header-plate {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  z-index: 2;
  padding: 7px 8px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.warm-plate {
  background: linear-gradient(180deg, rgba(99,55,42,.85), rgba(41,23,19,.94));
}

.cool-plate {
  background: linear-gradient(180deg, rgba(44,68,98,.88), rgba(18,29,48,.96));
}

.plate-sub {
  display: block;
  color: #aac7dd;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.plate-main {
  display: block;
  color: #fff0bf;
  font-size: .94rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(255,218,133,.18);
}

.side-bonus-lamp {
  top: 68px;
  height: 78px;
}

.side-kicker,
.side-title {
  display: none;
}

.compact-stack {
  top: 168px;
  gap: 12px;
}

.side-round-badge,
.side-round-badge.alt {
  width: 62px;
  height: 62px;
}

.side-bet-rail {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 24px;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.side-bet-lamp {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid rgba(255,229,168,.20);
  border-radius: 999px;
  color: #c1b7a2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    linear-gradient(90deg, rgba(255,125,84,.14), rgba(53,25,16,.35));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -6px 8px rgba(0,0,0,.22);
  transition: .12s ease;
}

.side-bet-lamp.cool {
  border-color: rgba(169,225,255,.20);
  color: #b0cddd;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    linear-gradient(90deg, rgba(107,193,255,.14), rgba(17,32,58,.35));
}

.side-bet-lamp span {
  color: #fff4cf;
  font-size: .95rem;
  font-weight: 1000;
}

.side-bet-lamp small {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.side-bet-lamp.on {
  color: #fff6df;
  border-color: rgba(255,236,165,.62);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(255,181,94,.92), rgba(111,44,18,.76));
  box-shadow:
    0 0 12px rgba(255,180,95,.25),
    inset 0 0 10px rgba(255,240,197,.22),
    inset 0 -6px 8px rgba(0,0,0,.15);
}

.side-bet-lamp.cool.on {
  border-color: rgba(182,233,255,.62);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(121,212,255,.95), rgba(25,65,124,.78));
  box-shadow:
    0 0 12px rgba(121,212,255,.25),
    inset 0 0 10px rgba(224,247,255,.20),
    inset 0 -6px 8px rgba(0,0,0,.15);
}

.side-bet-lamp.sweep-on {
  transform: scale(1.04);
  filter: brightness(1.18);
}

.side-bet-lamp:not(.on).sweep-on {
  border-color: rgba(255,236,165,.72);
  color: #fff7ea;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.20), transparent 18%),
    linear-gradient(90deg, rgba(255,189,109,.98), rgba(140,56,23,.82));
  box-shadow: 0 0 14px rgba(255,184,102,.32);
}

.side-bet-lamp.cool:not(.on).sweep-on {
  border-color: rgba(182,233,255,.72);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.20), transparent 18%),
    linear-gradient(90deg, rgba(142,223,255,.98), rgba(31,84,145,.82));
  box-shadow: 0 0 14px rgba(128,216,255,.32);
}

.deluxe-fireworks {
  inset: auto 0 122px 0;
  height: 72px;
}

.deluxe-bolts {
  inset: auto 0 126px 0;
  height: 72px;
}

@media (max-width: 0px) {
  .side-bonus-lamp {
    top: 60px;
    height: 72px;
  }

  .compact-stack {
    top: 154px;
  }

  .side-bet-lamp,
  .side-bet-lamp.cool {
    min-height: 30px;
    padding: 4px 8px;
  }
}

@media (max-width: 0px) {
  .side-header-plate {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 10px;
  }

  .side-bonus-lamp {
    position: relative;
    top: auto;
    width: min(220px, 92%);
    margin: 8px auto;
    height: 68px;
  }

  .compact-stack {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
  }

  .side-bet-rail {
    position: static;
    margin: 0 10px 12px;
  }

  .deluxe-fireworks,
  .deluxe-bolts {
    inset: auto 0 6px 0;
  }
}


/* v17 remove BIG/REG round badges and add REPLAY/PAY status lamps */
.deluxe-fireworks {
  inset: auto 0 138px 0;
}

.side-bet-rail {
  bottom: 22px;
}

.status-lamp-stack {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 108px;
  z-index: 2;
  display: grid;
  gap: 12px;
}

.status-side-lamp {
  display: grid;
  place-items: center;
  min-height: 62px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #afbdd0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(44,54,71,.95), rgba(16,22,33,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 10px rgba(0,0,0,.32),
    0 6px 12px rgba(0,0,0,.22);
  transition: .14s ease;
}

.status-side-lamp span {
  font-size: .88rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.replay-lamp {
  border-color: rgba(138,223,255,.22);
}

.pay-lamp {
  border-color: rgba(255,215,124,.22);
}

.replay-lamp.on {
  color: #eefbff;
  border-color: rgba(165,233,255,.82);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.82), rgba(177,236,255,.72) 18%, rgba(78,177,255,.92) 50%, rgba(21,71,134,.96) 82%, #0a1630 100%);
  box-shadow:
    0 0 20px rgba(118,209,255,.52),
    0 0 34px rgba(89,185,255,.22),
    inset 0 0 14px rgba(238,251,255,.44);
}

.pay-lamp.on {
  color: #fff8e9;
  border-color: rgba(255,231,145,.86);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.84), rgba(255,241,190,.72) 18%, rgba(255,198,73,.92) 50%, rgba(166,91,16,.96) 82%, #2a1606 100%);
  box-shadow:
    0 0 20px rgba(255,207,93,.50),
    0 0 34px rgba(255,180,63,.22),
    inset 0 0 14px rgba(255,249,224,.42);
}

@media (max-width: 0px) {
  .status-lamp-stack {
    top: 104px;
    gap: 10px;
  }

  .status-side-lamp {
    min-height: 56px;
  }
}

@media (max-width: 0px) {
  .status-lamp-stack {
    position: static;
    margin: 8px 10px 12px;
  }

  .status-side-lamp {
    min-height: 48px;
  }
}


/* v18: western symbol artwork, daily setting, counters and cleaner side panels */
.symbol-face {
  width: 94%;
  height: 92%;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.symbol-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: saturate(.98) contrast(1.02);
}

.symbol[data-symbol="BLANK"] .symbol-face {
  width: 48%;
  height: 45%;
  opacity: .72;
}

.symbol[data-symbol="BLANK"] .symbol-image {
  filter: grayscale(1) contrast(.82);
}

/* Disable the earlier themed fallback styling now that real artwork is used. */
.symbol[data-symbol] .symbol-face {
  color: transparent;
  font-size: 0;
}

.side-fireworks,
.side-bolts,
.deluxe-fireworks,
.deluxe-bolts {
  display: none !important;
}

.revised-side-frame {
  background:
    linear-gradient(180deg, rgba(37,31,28,.98), rgba(14,17,21,.99)),
    linear-gradient(90deg, rgba(133,87,43,.08), transparent 45%, rgba(68,94,118,.08));
}

.warm-plate {
  background: linear-gradient(180deg, #6b3d25, #2b1a14);
}

.cool-plate {
  background: linear-gradient(180deg, #3d4e61, #182230);
}

.side-bonus-lamp.on,
.replay-lamp.on,
.pay-lamp.on {
  animation: statusLampBlink .58s steps(2, end) infinite;
}

@keyframes statusLampBlink {
  0%, 42% { filter: brightness(1.35); opacity: 1; transform: scale(1.025); }
  43%, 100% { filter: brightness(.76); opacity: .78; transform: scale(1); }
}

.setting-hint-section,
.role-counter-section {
  margin-top: 17px;
}

.setting-hint-card {
  padding: 14px;
  border: 1px solid rgba(214,174,94,.32);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(92,57,31,.24), rgba(16,22,31,.86));
}

.setting-hint-card strong,
.setting-hint-card span {
  display: block;
}

.setting-hint-card strong {
  color: #ffe9b0;
  font-size: 1.05rem;
}

.setting-hint-card > span {
  margin-top: 4px;
  color: #aeb9c5;
  font-size: .74rem;
}

.hint-progress-track {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #080b10;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.7);
}

.hint-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9c4e26, #f1b65a, #fff0ad);
  transition: width .3s ease;
}

.role-counter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-counter-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(126,146,165,.20);
  border-radius: 11px;
  background: rgba(10,15,22,.76);
}

.role-counter-grid article.featured {
  grid-column: 1 / -1;
  border-color: rgba(210,116,77,.38);
  background: linear-gradient(135deg, rgba(111,41,27,.32), rgba(10,15,22,.84));
}

.role-counter-grid span,
.role-counter-grid small {
  display: block;
  color: #99a8b6;
  font-size: .67rem;
}

.role-counter-grid strong {
  display: block;
  margin-top: 3px;
  color: #f5f0df;
  font-family: "Courier New", monospace;
  font-size: 1.05rem;
}

.hint-reveal-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,4,7,.82);
  opacity: 0;
  transition: opacity .2s ease;
}

.hint-reveal-modal.visible { opacity: 1; }
.hint-reveal-modal[hidden] { display: none; }

.hint-reveal-card {
  width: min(430px, 100%);
  padding: 24px 22px;
  border: 2px solid #956331;
  border-radius: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(158,92,42,.25), transparent 42%),
    linear-gradient(160deg, #2c201a, #0d1219 58%, #090c11);
  box-shadow: 0 25px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(12px) scale(.96);
  transition: transform .22s ease;
}

.hint-reveal-modal.visible .hint-reveal-card {
  transform: translateY(0) scale(1);
}

.hint-reveal-kicker {
  color: #d99b55;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.hint-reveal-card h2 {
  margin: 5px 0 14px;
  color: #fff0c3;
}

.hint-cylinder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(260px, 90%);
  margin: 0 auto 16px;
  padding: 20px;
  border: 8px solid #454c53;
  border-radius: 50%;
  background: radial-gradient(circle, #2f353b 0 20%, #14191e 21% 65%, #4c545b 66% 100%);
  box-shadow: inset 0 0 22px #000, 0 8px 18px rgba(0,0,0,.4);
}

.hint-chamber {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid #495057;
  border-radius: 50%;
  color: #747c84;
  background: #080a0c;
  font-family: "Courier New", monospace;
  font-weight: 1000;
}

.hint-chamber.loaded {
  color: #2a1707;
  border-color: #ffe19a;
  background: radial-gradient(circle at 35% 28%, #fff2bd, #e1a43e 45%, #785018 78%);
  box-shadow: 0 0 15px rgba(255,190,78,.48), inset 0 0 7px rgba(255,255,255,.45);
}

.hint-reveal-card > strong {
  display: block;
  color: #fff0ad;
  font-size: 1.55rem;
  letter-spacing: .08em;
}

.hint-reveal-card p {
  color: #aeb9c4;
  font-size: .76rem;
  line-height: 1.65;
}

.hint-reveal-close {
  min-width: 140px;
  padding: 10px 18px;
  border: 1px solid #b67b3e;
  border-radius: 999px;
  color: #fff4d1;
  background: linear-gradient(#8a4d28, #4b2818);
  font-weight: 900;
  cursor: pointer;
}

.setting-table th,
.setting-table td {
  white-space: nowrap;
}

@media (max-width: 0px) {
  .role-counter-grid { grid-template-columns: 1fr; }
  .role-counter-grid article.featured { grid-column: auto; }
  .hint-cylinder { width: min(240px, 92%); }
}


/* v19: remove temporary LOAD / STATUS side headers */
.revised-side-frame {
  padding-top: 0;
}

.side-bonus-lamp {
  top: 22px;
}

.status-lamp-stack {
  top: 22px;
}

@media (max-width: 0px) {
  .side-bonus-lamp,
  .status-lamp-stack {
    top: 18px;
  }
}


/* v20: illuminated real-machine visual pass */
.cabinet {
  position: relative;
  border: 2px solid #656b73;
  background:
    linear-gradient(90deg, rgba(255,126,45,.10), transparent 4%, transparent 96%, rgba(255,126,45,.10)),
    linear-gradient(145deg, rgba(255,255,255,.10), transparent 18%),
    #171b22;
  box-shadow:
    0 30px 90px rgba(0,0,0,.64),
    inset 0 0 0 2px #090b0f,
    inset 0 0 32px rgba(255,121,33,.08),
    0 0 28px rgba(255,114,32,.10);
}

.cabinet::before,
.cabinet::after {
  content: "";
  position: absolute;
  z-index: 12;
  top: 18px;
  bottom: 18px;
  width: 8px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff3c7 0 1.5px, #ffab38 2.5px, #d3440f 4px, transparent 5px)
    50% 0 / 8px 20px repeat-y;
  filter: drop-shadow(0 0 4px #ff7b20);
  opacity: .82;
}

.cabinet::before { left: 5px; }
.cabinet::after { right: 5px; }

.live-top-panel {
  position: relative;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 8px;
  padding: 9px;
  border: 2px solid #6c6257;
  background:
    linear-gradient(180deg, rgba(76,42,20,.92), rgba(15,15,18,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 2px rgba(0,0,0,.44),
    0 0 18px rgba(255,132,44,.24),
    0 10px 20px rgba(0,0,0,.32);
}

.live-top-panel::before,
.live-top-panel::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  height: 5px;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff8d8 0 1.5px, #ffba4b 2.5px, #d95212 4px, transparent 5px)
    0 50% / 18px 6px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255,137,31,.82));
}
.live-top-panel::before { top: 3px; }
.live-top-panel::after { bottom: 3px; }

.live-bonus-tile {
  min-height: 104px;
  border: 2px solid rgba(255,213,126,.48);
  border-radius: 12px;
  background: #09090b;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.54),
    inset 0 0 18px rgba(255,129,42,.16),
    0 0 12px rgba(255,136,46,.18);
}

.live-bonus-tile::before { display: none; }

.live-bonus-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.08) brightness(1.02);
}

.live-bonus-label {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff5d6;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .16em;
  background: rgba(8,8,10,.58);
  text-shadow: 0 0 7px currentColor;
}

.live-title-panel {
  min-height: 104px;
  padding: 12px 18px;
  border: 2px solid rgba(255,181,79,.38);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,138,38,.20), transparent 46%),
    linear-gradient(180deg, rgba(49,27,16,.98), rgba(12,13,16,.99));
  box-shadow:
    inset 0 0 22px rgba(255,124,31,.16),
    inset 0 0 0 2px rgba(0,0,0,.48);
}

.live-title-panel::before {
  border: 1px solid rgba(255,190,91,.22);
  border-style: solid;
}

.live-title-panel .top-art-title {
  color: #fff2c2;
  font-size: clamp(1.5rem, 4vw, 2.45rem);
  letter-spacing: .055em;
  text-shadow:
    0 2px 0 #7a310f,
    0 0 7px #ffc66a,
    0 0 18px rgba(255,139,39,.74);
}

.live-title-panel small {
  color: #e0b97a;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.top-panel-light-row {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  top: 7px;
  height: 4px;
  background:
    radial-gradient(circle, #fff6cf 0 1.2px, #ffad39 2.2px, transparent 3.5px)
    0 50% / 16px 4px repeat-x;
  filter: drop-shadow(0 0 4px #ff8b24);
}
.top-panel-light-row.lower { top: auto; bottom: 7px; }

.reel-stage {
  position: relative;
  padding: 10px 6px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,127,39,.06), transparent 14%, transparent 86%, rgba(255,127,39,.06));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 20px rgba(255,119,28,.10);
}

.reel-unit {
  border: 3px solid #7c8087;
  box-shadow:
    inset 0 0 0 3px #17191d,
    inset 0 0 18px rgba(255,144,58,.10),
    0 0 0 2px #07080b,
    0 0 18px rgba(255,124,30,.18);
}

.reel-unit::before,
.reel-unit::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 5px;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff8d9 0 1.3px, #ffae37 2.4px, transparent 3.7px)
    0 50% / 19px 5px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255,133,34,.72));
}
.reel-unit::before { top: 4px; }
.reel-unit::after { bottom: 4px; }

.reel-side-frame {
  border: 2px solid #646a72;
  background:
    linear-gradient(180deg, rgba(35,22,15,.99), rgba(8,10,14,.99));
  box-shadow:
    inset 0 0 0 2px #090b0e,
    inset 0 0 18px rgba(255,120,27,.12),
    0 0 16px rgba(255,112,25,.14);
}

.image-chance-lamp {
  left: 8px;
  right: 8px;
  top: 14px;
  height: 244px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #050505;
  box-shadow:
    inset 0 0 0 2px rgba(255,196,99,.34),
    0 0 15px rgba(255,88,24,.24);
}

.image-chance-lamp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.07) brightness(.82);
  transition: filter .14s ease, transform .14s ease;
}

.image-chance-lamp.on {
  background: #070302;
  animation: chancePanelBlink .42s steps(2, end) infinite;
}

.image-chance-lamp.on img {
  filter: saturate(1.28) contrast(1.12) brightness(1.35);
}

@keyframes chancePanelBlink {
  0%, 45% {
    box-shadow:
      inset 0 0 0 2px rgba(255,236,174,.86),
      0 0 15px rgba(255,104,28,.74),
      0 0 34px rgba(255,45,18,.42);
  }
  46%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(255,152,67,.45),
      0 0 10px rgba(255,80,20,.30);
  }
}

.side-bet-rail.left-rail { bottom: 22px; }
.status-lamp-stack { top: 42px; }
.side-bet-rail.right-rail { bottom: 22px; }

.status-side-lamp {
  border-width: 2px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.11),
    inset 0 -10px 14px rgba(0,0,0,.40),
    0 0 0 2px rgba(0,0,0,.48),
    0 7px 12px rgba(0,0,0,.30);
}

.symbol[data-symbol="BLANK"] .symbol-face {
  width: 63%;
  height: 60%;
  opacity: .78;
}
.symbol[data-symbol="BLANK"] .symbol-image {
  filter: grayscale(.96) contrast(.90) brightness(.82);
}

/* Ensure the REG badge never gets clipped inside a reel cell. */
.symbol[data-symbol="BAR"] .symbol-face {
  width: 86%;
  height: 84%;
  overflow: visible;
}
.symbol[data-symbol="BAR"] .symbol-image {
  object-fit: contain;
  transform: scale(.92);
  filter: saturate(1.02) contrast(1.05) brightness(1.04);
}

/* A glowing red seven stays visible while the reel is spinning. */
.symbol[data-symbol="RED7"] .symbol-image {
  filter:
    saturate(1.18)
    contrast(1.10)
    brightness(1.08)
    drop-shadow(0 0 4px rgba(255,55,34,.72))
    drop-shadow(0 0 8px rgba(255,143,48,.36));
}

.reel-window.is-spinning .symbol[data-symbol="RED7"] .symbol-image {
  animation: spinningSevenGlow .36s ease-in-out infinite alternate;
}

@keyframes spinningSevenGlow {
  from {
    filter:
      saturate(1.35)
      contrast(1.14)
      brightness(1.20)
      drop-shadow(0 0 5px rgba(255,246,183,.88))
      drop-shadow(0 0 12px rgba(255,64,26,.82));
  }
  to {
    filter:
      saturate(1.15)
      contrast(1.08)
      brightness(.98)
      drop-shadow(0 0 3px rgba(255,89,31,.64))
      drop-shadow(0 0 7px rgba(255,49,20,.42));
  }
}

.meter-panel,
.operation-panel,
.stop-panel {
  border-color: #69717b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 20px rgba(0,0,0,.24),
    0 0 14px rgba(255,119,27,.08);
}

@media (max-width: 0px) {
  .live-top-panel {
    grid-template-columns: 116px minmax(0, 1fr) 116px;
  }
  .live-bonus-tile,
  .live-title-panel { min-height: 92px; }
  .image-chance-lamp { height: 220px; }
}

@media (max-width: 0px) {
  .cabinet::before,
  .cabinet::after { display: none; }

  .live-top-panel {
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 5px;
    padding: 6px;
  }

  .live-bonus-tile,
  .live-title-panel { min-height: 76px; }
  .live-title-panel { padding: 7px; }
  .live-title-panel .top-art-title { font-size: 1.05rem; }
  .live-title-panel small { font-size: .44rem; }

  .image-chance-lamp {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: 190px;
    width: min(260px, 94%);
    margin: 10px auto;
  }
}


/* v21: closer to the illustrated cabinet reference */
.page {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,110,32,.10), transparent 32%),
    linear-gradient(180deg, #050608, #0c0f14 34%, #090b0f 100%);
}

.cabinet {
  border: 2px solid #6c6f75;
  background:
    linear-gradient(180deg, rgba(255,162,70,.08), transparent 8%, transparent 92%, rgba(255,62,24,.08)),
    linear-gradient(90deg, rgba(255,98,38,.10), transparent 4%, transparent 96%, rgba(255,98,38,.10)),
    linear-gradient(180deg, #1a1d23, #12151a 50%, #15181e 100%);
}

.cabinet.machine-cold {
  box-shadow:
    0 30px 90px rgba(0,0,0,.72),
    inset 0 0 0 2px #090b0f,
    inset 0 0 18px rgba(255,118,27,.05),
    0 0 18px rgba(255,111,30,.06);
}

.cabinet.machine-hot {
  box-shadow:
    0 30px 90px rgba(0,0,0,.72),
    inset 0 0 0 2px #090b0f,
    inset 0 0 36px rgba(255,128,30,.18),
    0 0 28px rgba(255,100,26,.20),
    0 0 70px rgba(255,54,18,.12);
}

.cabinet::before,
.cabinet::after {
  opacity: .58;
  filter: drop-shadow(0 0 3px #ff7b20);
}

.cabinet.machine-hot::before,
.cabinet.machine-hot::after {
  opacity: .96;
  filter: drop-shadow(0 0 6px #ff7b20) drop-shadow(0 0 12px rgba(255,54,18,.58));
}

.top-lamp-bar {
  opacity: .82;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 18px rgba(255,123,31,.06);
}

.machine-hot .top-lamp-bar {
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 22px rgba(255,140,49,.12),
    0 0 18px rgba(255,106,31,.18);
}

.live-top-panel {
  grid-template-columns: 182px minmax(0, 1fr) 182px;
  gap: 10px;
  padding: 10px;
  border-color: #8e734e;
  background:
    linear-gradient(180deg, rgba(76,42,20,.86), rgba(8,8,10,.98));
}

.live-bonus-tile,
.live-title-panel {
  border-radius: 18px;
}

.live-bonus-tile {
  min-height: 124px;
  background:
    linear-gradient(180deg, rgba(20,14,12,.96), rgba(8,8,10,.99));
}

.live-bonus-tile img {
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  object-position: center;
  filter: saturate(1.05) contrast(1.04) brightness(.94);
}

.machine-hot .live-bonus-tile img {
  filter: saturate(1.12) contrast(1.08) brightness(1.10) drop-shadow(0 0 10px rgba(255,154,54,.18));
}

.live-bonus-label { display: none; }

.live-title-panel {
  min-height: 124px;
  padding: 12px 28px 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,144,52,.28), transparent 48%),
    linear-gradient(180deg, rgba(55,28,15,.98), rgba(12,12,16,.99));
}

.live-title-panel::before,
.live-title-panel::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,196,107,.72);
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(255,145,51,.55);
}

.live-title-panel::before { left: 12px; }
.live-title-panel::after { right: 12px; }

.live-title-panel .top-art-title {
  margin-top: 8px;
  white-space: nowrap;
  letter-spacing: .035em;
  font-size: clamp(1.45rem, 3.3vw, 2.35rem);
  text-shadow:
    0 2px 0 #73310f,
    0 0 8px #ffc76b,
    0 0 18px rgba(255,139,39,.54);
}

.live-title-panel small {
  display: block;
  margin-top: 6px;
  color: #f0c88a;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255,140,42,.22);
}

.top-panel-light-row {
  opacity: .52;
}

.machine-hot .top-panel-light-row,
.machine-hot .live-top-panel::before,
.machine-hot .live-top-panel::after {
  opacity: 1;
  filter: drop-shadow(0 0 7px #ff8b24) drop-shadow(0 0 10px rgba(255,83,24,.58));
}

.reel-stage {
  gap: 8px;
}

.reel-unit {
  background: linear-gradient(180deg, rgba(255,167,74,.03), rgba(255,82,41,.03));
}

.reel-window {
  background: linear-gradient(180deg, #f1ece1, #f7f3ea 52%, #ebe5d7 100%);
}

.reel-glass {
  background:
    linear-gradient(180deg, rgba(0,0,0,.48), transparent 10%, transparent 90%, rgba(0,0,0,.48)),
    linear-gradient(105deg, rgba(255,255,255,.14), transparent 20%),
    linear-gradient(90deg, rgba(0,0,0,.07), transparent 16%, transparent 84%, rgba(0,0,0,.07));
}

.side-bonus-frame,
.side-thunder-frame {
  overflow: hidden;
}

.side-bonus-frame::before,
.side-thunder-frame::before,
.side-bonus-frame::after,
.side-thunder-frame::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #e7b35c;
  text-shadow: 0 0 8px rgba(255,122,38,.48);
}

.side-bonus-frame::before,
.side-thunder-frame::before {
  content: "✦";
  top: 12px;
  font-size: 1.08rem;
}

.side-bonus-frame::after,
.side-thunder-frame::after {
  content: "✦";
  bottom: 12px;
  font-size: 1.02rem;
}

.image-chance-lamp {
  left: 10px;
  right: 10px;
  top: 18px;
  height: 260px;
  border-radius: 16px;
  background: linear-gradient(180deg, #140b08, #070608);
  box-shadow:
    inset 0 0 0 2px rgba(255,196,99,.28),
    inset 0 0 14px rgba(255,118,25,.10),
    0 0 12px rgba(255,88,24,.12);
}

.image-chance-lamp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.06) contrast(1.06) brightness(.74);
}

.machine-hot .image-chance-lamp img,
.image-chance-lamp.on img {
  filter: saturate(1.22) contrast(1.12) brightness(1.14) drop-shadow(0 0 8px rgba(255,171,90,.26));
}

.image-chance-lamp.on {
  animation: chancePanelBlinkV21 .38s steps(2,end) infinite;
}

@keyframes chancePanelBlinkV21 {
  0%, 45% {
    box-shadow:
      inset 0 0 0 2px rgba(255,237,188,.92),
      0 0 16px rgba(255,110,26,.72),
      0 0 34px rgba(255,52,20,.36);
  }
  46%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(255,161,68,.48),
      0 0 10px rgba(255,87,25,.28);
  }
}

.status-lamp-stack {
  top: 54px;
  gap: 18px;
}

.status-side-lamp {
  position: relative;
  min-height: 94px;
  border-color: rgba(255,200,125,.24);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(25,20,18,.96), rgba(8,10,14,.99));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -10px 14px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(255,183,96,.10),
    0 0 0 2px rgba(0,0,0,.48),
    0 7px 12px rgba(0,0,0,.30);
}

.status-side-lamp::before {
  content: "✦";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: rgba(255,188,85,.58);
}

.status-side-lamp span {
  font-size: 1.24rem;
  letter-spacing: .04em;
  font-weight: 1000;
  margin-top: 10px;
}

.replay-lamp {
  border-color: rgba(111,194,255,.26);
}

.pay-lamp {
  border-color: rgba(255,128,84,.24);
}

.replay-lamp.on {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.85), rgba(177,236,255,.74) 18%, rgba(60,173,255,.96) 52%, rgba(18,72,140,.96) 82%, #081529 100%);
  box-shadow:
    0 0 24px rgba(76,182,255,.52),
    0 0 44px rgba(76,182,255,.24),
    inset 0 0 18px rgba(245,251,255,.42);
}

.pay-lamp.on {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.88), rgba(255,226,190,.76) 18%, rgba(255,89,55,.96) 52%, rgba(157,22,10,.96) 82%, #2b0905 100%);
  box-shadow:
    0 0 24px rgba(255,97,55,.52),
    0 0 44px rgba(255,97,55,.24),
    inset 0 0 18px rgba(255,249,238,.42);
}

.side-bet-rail.left-rail,
.side-bet-rail.right-rail {
  bottom: 18px;
}

.side-bet-lamp {
  min-height: 38px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(67,39,22,.92), rgba(28,17,11,.96));
}

.side-bet-lamp.cool {
  background:
    linear-gradient(180deg, rgba(27,42,61,.92), rgba(14,22,35,.96));
}

.side-bet-lamp.on {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(255,186,96,.98), rgba(121,48,19,.86));
}

.side-bet-lamp.cool.on {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(123,212,255,.98), rgba(18,84,145,.86));
}

.line-guide,
.line-diagonal {
  opacity: .30;
}

.machine-hot .line-guide,
.machine-hot .line-diagonal {
  opacity: .68;
}

.symbol {
  border-bottom: 0;
}

.symbol[data-symbol="BAR"] .symbol-face {
  width: 88%;
  height: 88%;
}

.symbol[data-symbol="BAR"] .symbol-image {
  object-fit: contain;
  transform: scale(.96);
}

.symbol[data-symbol="RED7"] .symbol-face {
  width: 92%;
  height: 88%;
}

.symbol[data-symbol="RED7"] .symbol-image {
  filter:
    saturate(1.16)
    contrast(1.08)
    brightness(1.02)
    drop-shadow(0 0 5px rgba(255,58,34,.74))
    drop-shadow(0 0 10px rgba(255,180,76,.34));
}

.reel-window.is-spinning .symbol[data-symbol="RED7"] .symbol-image {
  animation: spinningSevenGlowV21 .28s ease-in-out infinite alternate;
}

@keyframes spinningSevenGlowV21 {
  from {
    filter:
      saturate(1.42)
      contrast(1.16)
      brightness(1.24)
      drop-shadow(0 0 8px rgba(255,248,197,.92))
      drop-shadow(0 0 18px rgba(255,74,32,.88));
  }
  to {
    filter:
      saturate(1.18)
      contrast(1.10)
      brightness(.96)
      drop-shadow(0 0 4px rgba(255,105,32,.68))
      drop-shadow(0 0 10px rgba(255,71,24,.46));
  }
}

.meter-panel {
  border-color: #6c5c4a;
  background:
    linear-gradient(180deg, rgba(39,27,20,.94), rgba(13,14,18,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 18px rgba(255,125,32,.08),
    0 0 14px rgba(255,119,27,.08);
}

.bet-lamps span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,161,61,.20);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.10), rgba(36,20,14,.98) 70%);
  color: #b78e5b;
  box-shadow: inset 0 -8px 12px rgba(0,0,0,.34);
}

.bet-lamps span.on {
  color: #fff4df;
  border-color: rgba(255,198,94,.76);
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.90), rgba(255,178,70,.90) 26%, rgba(204,46,20,.96) 72%, #290b05 100%);
  box-shadow: 0 0 14px rgba(255,87,31,.46), 0 0 24px rgba(255,87,31,.18);
}

.operation-panel {
  position: relative;
  border-color: #6e7279;
  border-radius: 24px;
  padding: 20px 24px 18px;
  background:
    linear-gradient(180deg, rgba(55,62,73,.98), rgba(35,40,49,.98) 40%, rgba(20,24,30,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 30px rgba(255,255,255,.03),
    0 16px 22px rgba(0,0,0,.24);
}

.operation-panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.control-button.one-bet {
  min-width: 86px;
  min-height: 58px;
}

.control-button.max-bet {
  min-width: 88px;
  min-height: 88px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -8px 12px rgba(136,20,7,.36),
    0 10px 16px rgba(0,0,0,.28),
    0 0 18px rgba(255,71,30,.14);
}

.lever {
  min-width: 92px;
  min-height: 106px;
}

.lever-knob {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 35% 30%, #d6d8dc, #7a8088 58%, #2f343d 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.30), 0 6px 14px rgba(0,0,0,.45);
}

.utility-area .mini-button {
  min-height: 48px;
  padding-inline: 18px;
}

.control-accent-lamps {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  pointer-events: none;
}

.control-accent-lamps span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.94), rgba(255,174,83,.96) 28%, rgba(193,30,12,.98) 70%, #280905 100%);
  box-shadow: 0 0 10px rgba(255,90,32,.46), 0 0 20px rgba(255,48,18,.18);
}

.stop-panel {
  background:
    linear-gradient(180deg, rgba(30,34,42,.98), rgba(16,18,24,.98));
}

@media (max-width: 0px) {
  .live-top-panel {
    grid-template-columns: 132px minmax(0, 1fr) 132px;
  }
  .live-bonus-tile,
  .live-title-panel { min-height: 100px; }
  .live-title-panel .top-art-title { white-space: normal; font-size: 1.55rem; }
  .image-chance-lamp { height: 228px; }
  .status-side-lamp { min-height: 78px; }
}

@media (max-width: 0px) {
  .live-top-panel {
    grid-template-columns: 1fr 1.2fr 1fr;
  }
  .live-title-panel .top-art-title { font-size: 1rem; }
  .live-title-panel small { font-size: .56rem; }
  .image-chance-lamp {
    height: 168px;
    width: min(250px, 94%);
  }
  .status-side-lamp { min-height: 62px; }
  .status-side-lamp span { font-size: .96rem; }
  .operation-panel { padding-bottom: 34px; }
}


/* v22 — one-piece real-machine upper panel */
.upper-display {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px 104px 9px;
  border: 2px solid #73592f;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(45,28,17,.98), rgba(7,8,11,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 2px rgba(0,0,0,.62),
    inset 0 0 18px rgba(255,113,29,.07),
    0 8px 18px rgba(0,0,0,.34);
  overflow: hidden;
}

.upper-display::before,
.upper-display::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  width: 82px;
  border: 2px solid rgba(255,161,71,.34);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(255,79,45,.40) 0 2px, rgba(94,4,3,.85) 3px 5px, transparent 6px)
    0 0 / 13px 13px repeat,
    linear-gradient(180deg, rgba(91,8,4,.96), rgba(28,3,3,.98));
  box-shadow:
    inset 0 0 16px rgba(255,47,27,.22),
    0 0 8px rgba(255,49,23,.12);
  opacity: .58;
  transition: opacity .16s ease, filter .16s ease;
}

.upper-display::before { left: 10px; }
.upper-display::after { right: 10px; }

.machine-hot .upper-display::before,
.machine-hot .upper-display::after {
  opacity: 1;
  filter: brightness(1.35) drop-shadow(0 0 7px rgba(255,46,21,.68));
  animation: v22MessageLampPulse .52s steps(2,end) infinite;
}

@keyframes v22MessageLampPulse {
  0%, 48% { filter: brightness(1.45) drop-shadow(0 0 8px rgba(255,46,21,.78)); }
  49%, 100% { filter: brightness(.82) drop-shadow(0 0 3px rgba(255,46,21,.24)); }
}

.status-message {
  position: relative;
  z-index: 2;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 5px 18px;
  border: 1px solid rgba(198,143,62,.48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14,12,11,.98), rgba(3,4,6,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 14px rgba(255,131,32,.04);
  text-align: center;
}

.status-message #phaseLabel {
  position: absolute;
  top: 3px;
  color: #4ebdff;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.status-message #message {
  padding-top: 8px;
  color: #fff0d2;
  font-size: clamp(.92rem, 2.6vw, 1.16rem);
  text-shadow: 0 0 7px rgba(255,195,105,.18);
}

.display-buttons {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.display-buttons .mini-button {
  min-height: 28px;
  padding: 4px 9px;
  border-color: rgba(226,180,100,.22);
  background: linear-gradient(180deg, rgba(51,57,69,.98), rgba(21,25,32,.98));
  font-size: .61rem;
}

.v22-upper-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 307;
  min-height: 142px;
  padding: 0;
  margin: 10px 0 8px;
  border: 2px solid #86704c;
  border-radius: 18px;
  overflow: hidden;
  background: #080707;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.74),
    0 13px 24px rgba(0,0,0,.40),
    0 0 18px rgba(255,112,27,.10);
  isolation: isolate;
}

.v22-upper-panel-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(1.06) brightness(.63);
  transition: filter .20s ease;
}

.v22-upper-panel::before,
.v22-upper-panel::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 1.6%;
  right: 1.6%;
  height: 6px;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff5d5 0 1.2px, #ffad39 2.3px, #a8370e 3.6px, transparent 4.6px)
    0 50% / 21px 6px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,114,28,.40));
  opacity: .45;
}

.v22-upper-panel::before { top: 4px; }
.v22-upper-panel::after { bottom: 4px; }

.v22-panel-glow,
.v22-panel-flash {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.v22-big-glow {
  inset: 0 72% 0 0;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(255,239,186,.48), rgba(255,47,19,.38) 28%, transparent 70%);
  mix-blend-mode: screen;
}

.v22-reg-glow {
  inset: 0 0 0 72%;
  background:
    radial-gradient(ellipse at 65% 50%, rgba(241,251,255,.56), rgba(38,145,255,.36) 28%, transparent 70%);
  mix-blend-mode: screen;
}

.v22-panel-flash {
  inset: 0;
  background:
    linear-gradient(105deg, transparent 20%, rgba(255,247,211,.34) 46%, transparent 68%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
}

.machine-hot .v22-upper-panel-image {
  filter: saturate(1.02) contrast(1.08) brightness(.88);
}

.machine-hot .v22-upper-panel::before,
.machine-hot .v22-upper-panel::after {
  opacity: .95;
  filter: drop-shadow(0 0 7px rgba(255,114,28,.82));
}

.bonus-big .v22-big-glow { opacity: 1; animation: v22BigPulse .40s steps(2,end) infinite; }
.bonus-reg .v22-reg-glow { opacity: 1; animation: v22RegPulse .46s steps(2,end) infinite; }

@keyframes v22BigPulse {
  0%, 45% { opacity: 1; filter: brightness(1.35); }
  46%, 100% { opacity: .34; filter: brightness(.75); }
}

@keyframes v22RegPulse {
  0%, 45% { opacity: 1; filter: brightness(1.28); }
  46%, 100% { opacity: .30; filter: brightness(.72); }
}

.bonus-win .v22-upper-panel-image {
  filter: saturate(1.20) contrast(1.12) brightness(1.10);
}

.bonus-win .v22-panel-flash {
  opacity: 1;
  animation: v22PanelSweep .55s ease-out 2;
}

@keyframes v22PanelSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@media (max-width: 0px) {
  .upper-display { padding-inline: 78px; }
  .upper-display::before,
  .upper-display::after { width: 59px; }
  .v22-upper-panel { min-height: 112px; }
}

@media (max-width: 0px) {
  .upper-display {
    padding: 7px 55px 7px;
    gap: 6px;
  }
  .upper-display::before,
  .upper-display::after {
    top: 7px;
    bottom: 7px;
    width: 39px;
    background-size: 10px 10px;
  }
  .status-message { min-height: 44px; padding-inline: 7px; }
  .status-message #message { font-size: .82rem; }
  .display-buttons { gap: 3px; }
  .display-buttons .mini-button { padding: 3px 6px; font-size: .52rem; }
  .v22-upper-panel {
    min-height: 84px;
    border-radius: 11px;
  }
}


/* v23 adjustments: always-lit title, instant normal-light return after result */
.v22-upper-panel-image {
  filter: saturate(.88) contrast(1.06) brightness(.66);
}

.v22-title-glow {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 18% 24% 20% 24%;
  opacity: .92;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,249,228,.36) 0%, rgba(255,197,103,.28) 22%, rgba(255,137,44,.18) 42%, rgba(255,96,22,.08) 62%, transparent 78%);
  mix-blend-mode: screen;
  filter: blur(2px) drop-shadow(0 0 8px rgba(255,164,57,.34));
}

.v22-upper-panel::before,
.v22-upper-panel::after {
  opacity: .58;
}

.machine-hot .v22-title-glow,
.bonus-win .v22-title-glow,
.bonus-big .v22-title-glow,
.bonus-reg .v22-title-glow {
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,251,235,.52) 0%, rgba(255,212,132,.38) 22%, rgba(255,151,50,.24) 44%, rgba(255,96,22,.12) 64%, transparent 82%);
  filter: blur(1.5px) drop-shadow(0 0 10px rgba(255,181,74,.40));
}

.machine-cold .v22-title-glow {
  animation: v23TitleBreath 2.4s ease-in-out infinite;
}

@keyframes v23TitleBreath {
  0%, 100% {
    opacity: .78;
    transform: scale(1);
  }
  50% {
    opacity: .98;
    transform: scale(1.01);
  }
}

.bonus-big .v22-big-glow { opacity: 1; animation: v22BigPulse .36s steps(2,end) infinite; }
.bonus-reg .v22-reg-glow { opacity: 1; animation: v22RegPulse .42s steps(2,end) infinite; }

@media (max-width: 0px) {
  .v22-title-glow {
    inset: 18% 21% 20% 21%;
  }
}

@media (max-width: 0px) {
  .v22-title-glow {
    inset: 16% 18% 18% 18%;
  }
}


/* v24: immediate normal-light restore + more luxurious REPLAY/PAY lamps */
.status-lamp-stack {
  top: 44px;
  gap: 16px;
}

.status-side-lamp {
  overflow: hidden;
  min-height: 106px;
  border-radius: 26px;
  border: 1px solid rgba(255,211,147,.20);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(180deg, rgba(43,22,15,.94), rgba(10,9,13,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 2px rgba(255,208,130,.08),
    inset 0 -14px 20px rgba(0,0,0,.48),
    0 0 0 2px rgba(0,0,0,.52),
    0 10px 18px rgba(0,0,0,.30);
}

.status-side-lamp::before,
.status-side-lamp::after {
  content: "✦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.08rem;
  color: rgba(255,201,118,.70);
  text-shadow: 0 0 8px rgba(255,139,54,.42);
}

.status-side-lamp::before { top: 8px; }
.status-side-lamp::after { bottom: 8px; }

.status-side-lamp span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78%;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,227,185,.12);
  letter-spacing: .04em;
  font-weight: 1000;
  text-shadow: 0 0 8px rgba(255,255,255,.10);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -10px 12px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.34);
}

.replay-lamp {
  border-color: rgba(91,178,255,.22);
  background:
    radial-gradient(circle at 50% 14%, rgba(147,217,255,.10), transparent 20%),
    linear-gradient(180deg, rgba(15,24,46,.96), rgba(8,11,19,.99));
}

.replay-lamp span {
  color: rgba(199,231,255,.88);
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.14), rgba(91,161,255,.10) 18%, rgba(16,57,111,.92) 72%, rgba(6,19,43,.96) 100%);
  border-color: rgba(132,212,255,.20);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -10px 12px rgba(0,0,0,.36),
    0 0 10px rgba(64,155,255,.10);
}

.pay-lamp {
  border-color: rgba(255,132,92,.22);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,176,146,.10), transparent 20%),
    linear-gradient(180deg, rgba(45,16,12,.96), rgba(20,9,11,.99));
}

.pay-lamp span {
  color: rgba(255,228,214,.90);
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.14), rgba(255,132,92,.10) 18%, rgba(126,25,17,.94) 72%, rgba(44,7,6,.98) 100%);
  border-color: rgba(255,191,157,.18);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -10px 12px rgba(0,0,0,.36),
    0 0 10px rgba(255,97,63,.10);
}

.replay-lamp.on {
  background:
    radial-gradient(circle at 50% 14%, rgba(187,235,255,.28), transparent 22%),
    linear-gradient(180deg, rgba(20,40,76,.98), rgba(8,13,27,.99));
  box-shadow:
    0 0 28px rgba(76,182,255,.28),
    0 0 50px rgba(76,182,255,.16),
    inset 0 0 0 2px rgba(140,226,255,.18),
    inset 0 0 18px rgba(177,236,255,.10);
}

.replay-lamp.on span {
  color: #f3fbff;
  border-color: rgba(193,241,255,.82);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), rgba(176,235,255,.82) 24%, rgba(67,176,255,.96) 56%, rgba(14,62,138,.98) 82%, #07192f 100%);
  box-shadow:
    0 0 18px rgba(76,182,255,.54),
    0 0 34px rgba(76,182,255,.24),
    inset 0 0 16px rgba(245,251,255,.36);
}

.pay-lamp.on {
  background:
    radial-gradient(circle at 50% 14%, rgba(255,219,191,.30), transparent 22%),
    linear-gradient(180deg, rgba(72,24,14,.98), rgba(23,10,10,.99));
  box-shadow:
    0 0 28px rgba(255,96,56,.28),
    0 0 50px rgba(255,96,56,.16),
    inset 0 0 0 2px rgba(255,200,171,.16),
    inset 0 0 18px rgba(255,214,188,.10);
}

.pay-lamp.on span {
  color: #fff5ef;
  border-color: rgba(255,214,188,.80);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(255,220,194,.84) 24%, rgba(255,102,69,.96) 56%, rgba(164,28,15,.98) 82%, #2f0807 100%);
  box-shadow:
    0 0 18px rgba(255,96,56,.54),
    0 0 34px rgba(255,96,56,.24),
    inset 0 0 16px rgba(255,248,240,.36);
}

@media (max-width: 0px) {
  .status-side-lamp {
    min-height: 84px;
    border-radius: 20px;
  }
  .status-side-lamp span {
    min-height: 46px;
    font-size: .92rem;
  }
}


/* v25: Pattern B image lamps, remove dashed side guides, prevent overlap with BET lamps */
.reel-side-frame::before {
  display: none !important;
  content: none !important;
}

.reel-stage {
  grid-template-columns: 142px minmax(0, 1fr) 142px;
  gap: 10px;
  align-items: stretch;
}

.reel-side-frame {
  min-height: 430px;
}

/* Left: CHANCE and BET receive separate vertical zones. */
.image-chance-lamp {
  top: 10px;
  left: 8px;
  right: 8px;
  height: 258px;
}

.side-bet-rail.left-rail,
.side-bet-rail.right-rail {
  left: 10px;
  right: 10px;
  bottom: 10px;
  gap: 6px;
}

.side-bet-lamp {
  min-height: 32px;
  padding: 3px 9px;
}

/* Right: two self-contained image lamps sit above the BET rail. */
.status-lamp-stack {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 7px;
  right: 7px;
  bottom: auto;
  display: grid;
  grid-template-rows: repeat(2, 142px);
  gap: 6px;
}

.status-side-lamp,
.replay-lamp,
.pay-lamp,
.status-side-lamp.on {
  position: relative;
  display: block;
  min-height: 0;
  height: 142px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(255, 200, 116, .18),
    0 5px 12px rgba(0, 0, 0, .38);
}

.status-side-lamp::before,
.status-side-lamp::after,
.status-side-lamp span {
  display: none !important;
  content: none !important;
}

.status-lamp-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity .12s ease, filter .12s ease, transform .12s ease;
  user-select: none;
  pointer-events: none;
}

.status-lamp-image.lamp-off {
  opacity: 1;
  filter: brightness(.82) saturate(.90) contrast(1.06);
}

.status-lamp-image.lamp-on {
  opacity: 0;
  filter: brightness(1.06) saturate(1.14) contrast(1.08);
}

.status-side-lamp.on .lamp-off {
  opacity: 0;
}

.status-side-lamp.on .lamp-on {
  opacity: 1;
  animation: v25LampPulse .72s ease-in-out infinite;
}

.replay-lamp.on {
  box-shadow:
    0 0 0 1px rgba(181, 235, 255, .62),
    0 0 18px rgba(47, 158, 255, .48),
    0 0 32px rgba(47, 158, 255, .22);
}

.pay-lamp.on {
  box-shadow:
    0 0 0 1px rgba(255, 216, 181, .62),
    0 0 18px rgba(255, 67, 35, .50),
    0 0 32px rgba(255, 67, 35, .22);
}

@keyframes v25LampPulse {
  0%, 100% { filter: brightness(.98) saturate(1.04) contrast(1.06); transform: scale(1); }
  50% { filter: brightness(1.16) saturate(1.24) contrast(1.10); transform: scale(1.012); }
}

@media (max-width: 0px) {
  .reel-stage {
    grid-template-columns: 118px minmax(0, 1fr) 118px;
    gap: 7px;
  }
  .reel-side-frame { min-height: 410px; }
  .status-lamp-stack { grid-template-rows: repeat(2, 132px); }
  .status-side-lamp,
  .replay-lamp,
  .pay-lamp,
  .status-side-lamp.on { height: 132px; }
  .image-chance-lamp { height: 246px; }
}

@media (max-width: 0px) {
  .reel-side-frame {
    min-height: 360px;
  }
  .status-lamp-stack {
    top: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 214px;
    gap: 8px;
  }
  .status-side-lamp,
  .replay-lamp,
  .pay-lamp,
  .status-side-lamp.on {
    height: 214px;
  }
  .image-chance-lamp {
    height: 216px;
  }
  .side-bet-rail.left-rail,
  .side-bet-rail.right-rail {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* v27: CHANCE and top lamps react only to actual bonus target states, not replay/small-role results */
.machine-hot .image-chance-lamp img {
  filter: saturate(1.06) contrast(1.06) brightness(.74);
}

.image-chance-lamp.on img {
  filter: saturate(1.22) contrast(1.12) brightness(1.14) drop-shadow(0 0 8px rgba(255,171,90,.26));
}

.machine-hot .v22-upper-panel-image {
  filter: saturate(.88) contrast(1.06) brightness(.66);
}

.bonus-big .v22-upper-panel-image,
.bonus-reg .v22-upper-panel-image,
.bonus-win .v22-upper-panel-image {
  filter: saturate(1.02) contrast(1.08) brightness(.88);
}

.machine-hot .v22-upper-panel::before,
.machine-hot .v22-upper-panel::after {
  opacity: .58;
  filter: drop-shadow(0 0 3px rgba(255,114,28,.40));
}

.bonus-big .v22-upper-panel::before,
.bonus-big .v22-upper-panel::after,
.bonus-reg .v22-upper-panel::before,
.bonus-reg .v22-upper-panel::after,
.bonus-win .v22-upper-panel::before,
.bonus-win .v22-upper-panel::after {
  opacity: .95;
  filter: drop-shadow(0 0 7px rgba(255,114,28,.82));
}


/* v28: compress top height, move data lamp into marquee area, elongate CHANCE panel */
.top-panel.compact-top-panel {
  display: none;
}

.upper-display.compact-marquee {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 8px 90px 6px;
}

.upper-info-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-lamp-inline {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  border-color: #0b0d12;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 10px rgba(255,117,33,.04),
    0 4px 10px rgba(0,0,0,.20);
}

.top-lamp-inline div {
  padding: 3px 6px 4px;
}

.top-lamp-inline span {
  font-size: .52rem;
  letter-spacing: .06em;
}

.top-lamp-inline strong {
  font-size: clamp(.92rem, 2.5vw, 1.28rem);
}

.upper-display.compact-marquee .display-buttons {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

.upper-display.compact-marquee .display-buttons .mini-button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: .58rem;
  white-space: nowrap;
}

.upper-display.compact-marquee .status-message.slim-status {
  min-height: auto;
  padding: 0 10px 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.upper-display.compact-marquee .status-message.slim-status #phaseLabel {
  position: static;
  display: inline;
  margin-right: 10px;
  color: rgba(92,189,255,.72);
  font-size: .54rem;
}

.upper-display.compact-marquee .status-message.slim-status #message {
  padding-top: 0;
  color: rgba(255,233,198,.84);
  font-size: .72rem;
  text-shadow: 0 0 5px rgba(255,195,105,.10);
}

.upper-display.compact-marquee .status-message.slim-status #waitDisplay {
  position: static;
  display: inline;
  margin-left: 10px;
  font-size: .54rem;
}

.upper-display.compact-marquee::before,
.upper-display.compact-marquee::after {
  top: 8px;
  bottom: 8px;
  width: 72px;
}

.reel-side-frame {
  min-height: 452px;
}

.image-chance-lamp {
  top: 8px;
  left: 8px;
  right: 8px;
  height: 286px;
}

.side-bet-rail.left-rail,
.side-bet-rail.right-rail {
  bottom: 8px;
}

@media (max-width: 0px) {
  .upper-display.compact-marquee {
    padding: 7px 70px 6px;
  }
  .upper-display.compact-marquee::before,
  .upper-display.compact-marquee::after {
    width: 52px;
  }
  .upper-info-row {
    gap: 6px;
  }
  .top-lamp-inline strong {
    font-size: .98rem;
  }
  .upper-display.compact-marquee .display-buttons .mini-button {
    padding: 4px 6px;
    font-size: .54rem;
  }
  .reel-side-frame { min-height: 436px; }
  .image-chance-lamp { height: 274px; }
}

@media (max-width: 0px) {
  .upper-display.compact-marquee {
    padding: 6px 48px 6px;
    gap: 4px;
  }
  .upper-display.compact-marquee::before,
  .upper-display.compact-marquee::after {
    width: 34px;
    top: 6px;
    bottom: 6px;
  }
  .upper-info-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .upper-display.compact-marquee .display-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  .upper-display.compact-marquee .status-message.slim-status {
    padding: 0 4px 1px;
    text-align: center;
  }
  .upper-display.compact-marquee .status-message.slim-status #phaseLabel,
  .upper-display.compact-marquee .status-message.slim-status #message,
  .upper-display.compact-marquee .status-message.slim-status #waitDisplay {
    display: block;
    margin: 0;
  }
  .reel-side-frame { min-height: 380px; }
  .image-chance-lamp { height: 230px; }
}


/* v29: top lamp row above buttons, status text only visible in debug mode */
.upper-display.compact-marquee {
  gap: 4px;
  padding: 8px 90px 6px;
}

.upper-info-row {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.top-lamp-inline {
  width: 100%;
}

.upper-display.compact-marquee .display-buttons {
  justify-content: center;
  gap: 4px;
}

.upper-display.compact-marquee .status-message.slim-status {
  display: none;
}

.cabinet.debug-open .upper-display.compact-marquee {
  gap: 5px;
}

.cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status {
  display: grid;
}

.cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status #phaseLabel {
  display: inline;
}

.cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status #message {
  display: inline;
}

.cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status #waitDisplay {
  display: inline;
}

@media (max-width: 0px) {
  .upper-display.compact-marquee {
    padding: 7px 70px 6px;
  }
}

@media (max-width: 0px) {
  .upper-display.compact-marquee {
    padding: 6px 48px 6px;
  }
  .upper-info-row {
    gap: 4px;
  }
  .upper-display.compact-marquee .display-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  .cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status #phaseLabel,
  .cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status #message,
  .cabinet.debug-open .upper-display.compact-marquee .status-message.slim-status #waitDisplay {
    display: block;
  }
}


/* v31: DATA visibility, debug-only status, compact reel frame */
.upper-display.compact-marquee .display-buttons .data-button {
  color: #ffe7a5;
  border-color: rgba(234,189,91,.62);
  background:
    linear-gradient(180deg, rgba(65,72,84,.98), rgba(24,29,37,.98));
  text-shadow:
    0 0 4px rgba(255,232,174,.72),
    0 0 9px rgba(255,176,68,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 10px rgba(255,181,70,.05),
    0 0 7px rgba(255,151,47,.10);
  opacity: 1;
  filter: none;
}

.upper-display.compact-marquee .display-buttons .data-button:hover {
  color: #fff4cc;
  border-color: rgba(255,219,126,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 10px rgba(255,177,69,.22);
}

.upper-display.compact-marquee .display-buttons .data-button.open {
  color: #eafaff;
  border-color: rgba(138,216,255,.88);
  background: linear-gradient(180deg, rgba(66,151,190,.98), rgba(27,76,105,.98));
  text-shadow:
    0 0 5px rgba(232,251,255,.92),
    0 0 11px rgba(85,198,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 13px rgba(72,183,239,.44);
}

#debugStatusMessage[hidden] {
  display: none !important;
}

.reel-stage {
  align-items: start;
}

.reel-stage .reel-unit {
  align-self: start;
  height: fit-content;
  min-height: 0;
}

.reel-stage .reel-window {
  align-self: start;
}

@media (max-width: 0px) {
  .reel-stage {
    align-items: start;
  }
}


/* v32: prevent reel-edge clipping, stronger title glow, reel array guide image */
.symbol {
  box-sizing: border-box;
  padding-inline: 4px;
}

.symbol-face {
  width: 88%;
  height: 90%;
}

.symbol[data-symbol="RED7"] .symbol-face,
.symbol[data-symbol="BAR"] .symbol-face,
.symbol[data-symbol="BELL"] .symbol-face,
.symbol[data-symbol="CHERRY"] .symbol-face,
.symbol[data-symbol="WATERMELON"] .symbol-face,
.symbol[data-symbol="REPLAY"] .symbol-face {
  width: 84%;
  height: 88%;
}

.reel-unit {
  overflow: visible;
}

.reel-window {
  overflow: hidden;
}

.v22-title-glow {
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,251,235,.64) 0%, rgba(255,218,136,.48) 18%, rgba(255,162,53,.32) 40%, rgba(255,103,25,.15) 62%, transparent 82%);
  filter: blur(1.2px) drop-shadow(0 0 10px rgba(255,190,88,.48)) drop-shadow(0 0 22px rgba(255,132,34,.38));
}

.machine-cold .v22-title-glow {
  animation: v32TitleBreath 1.85s ease-in-out infinite;
}

@keyframes v32TitleBreath {
  0%, 100% { opacity: .92; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

.v22-upper-panel::before,
.v22-upper-panel::after {
  opacity: .82;
  filter: drop-shadow(0 0 6px rgba(255,122,31,.72)) drop-shadow(0 0 12px rgba(255,192,96,.24));
}

.machine-hot .v22-upper-panel::before,
.machine-hot .v22-upper-panel::after,
.bonus-big .v22-upper-panel::before,
.bonus-big .v22-upper-panel::after,
.bonus-reg .v22-upper-panel::before,
.bonus-reg .v22-upper-panel::after,
.bonus-win .v22-upper-panel::before,
.bonus-win .v22-upper-panel::after {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255,132,34,.90)) drop-shadow(0 0 18px rgba(255,214,118,.38));
}

.reel-layout-figure {
  margin: 0;
  border: 1px solid #35404d;
  border-radius: 12px;
  background: #0b0e13;
  overflow: hidden;
}

.reel-layout-image {
  display: block;
  width: 100%;
  height: auto;
}

.reel-layout-figure figcaption {
  padding: 8px 12px 10px;
  color: #aeb7c2;
  font-size: .76rem;
  text-align: center;
}

@media (max-width: 0px) {
  .symbol { padding-inline: 2px; }
  .symbol-face { width: 90%; height: 90%; }
  .symbol[data-symbol="RED7"] .symbol-face,
  .symbol[data-symbol="BAR"] .symbol-face,
  .symbol[data-symbol="BELL"] .symbol-face,
  .symbol[data-symbol="CHERRY"] .symbol-face,
  .symbol[data-symbol="WATERMELON"] .symbol-face,
  .symbol[data-symbol="REPLAY"] .symbol-face {
    width: 86%;
  }
}


/* v33: larger symbols without changing reel width, slimmer lower control panel, upgraded lever and crystal MAX BET */
.symbol {
  padding-inline: 2px;
}

.symbol-face {
  width: 92%;
  height: 93%;
}

.symbol[data-symbol="RED7"] .symbol-face,
.symbol[data-symbol="BAR"] .symbol-face,
.symbol[data-symbol="BELL"] .symbol-face,
.symbol[data-symbol="CHERRY"] .symbol-face,
.symbol[data-symbol="WATERMELON"] .symbol-face,
.symbol[data-symbol="REPLAY"] .symbol-face {
  width: 89%;
  height: 92%;
}

.symbol-image {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}

.operation-panel {
  border-radius: 22px;
  padding: 14px 22px 12px;
  min-height: 138px;
  background:
    linear-gradient(180deg, rgba(57,64,77,.98), rgba(33,38,47,.99) 42%, rgba(18,23,30,.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 26px rgba(255,255,255,.03),
    0 12px 18px rgba(0,0,0,.22);
}

.operation-panel::before {
  inset: 9px;
  border-radius: 16px;
}

.bet-area {
  align-items: center;
  gap: 16px;
}

.control-button.one-bet {
  min-width: 84px;
  min-height: 54px;
}

.control-button.max-bet {
  position: relative;
  isolation: isolate;
  min-width: 86px;
  min-height: 86px;
  border: 1px solid rgba(255,223,215,.48);
  color: #fffaf5;
  text-shadow: 0 1px 2px rgba(111,12,4,.55), 0 0 10px rgba(255,246,223,.22);
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.96), rgba(255,255,255,.36) 16%, rgba(255,169,143,.22) 22%, transparent 25%),
    radial-gradient(circle at 36% 32%, rgba(255,188,173,.70), transparent 42%),
    radial-gradient(circle at 50% 38%, rgba(255,120,86,.92), rgba(240,37,10,.95) 60%, rgba(142,10,8,.98) 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.44),
    inset 0 -10px 14px rgba(120,12,6,.40),
    0 10px 18px rgba(0,0,0,.30),
    0 0 20px rgba(255,79,31,.24),
    0 0 34px rgba(255,164,120,.10);
}

.control-button.max-bet::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    linear-gradient(140deg, rgba(255,255,255,.32), transparent 32%),
    linear-gradient(180deg, transparent 48%, rgba(89,0,0,.14) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,241,225,.22);
  pointer-events: none;
}

.control-button.max-bet::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 17px;
  width: 48px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(.3px);
  opacity: .9;
  pointer-events: none;
}

.lever {
  position: relative;
  min-width: 94px;
  min-height: 94px;
  padding-top: 2px;
}

.lever::before {
  left: 43px;
  top: 29px;
  width: 9px;
  height: 44px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(240,243,247,.92), rgba(112,121,134,.98) 44%, rgba(63,69,77,.98) 75%, rgba(205,211,218,.92) 100%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(0,0,0,.30),
    0 7px 12px rgba(0,0,0,.28);
}

.lever::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 64px;
  width: 28px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 38%, rgba(255,224,158,.96), rgba(169,119,44,.94) 58%, rgba(73,45,16,.98) 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,248,221,.32);
}

.lever-knob {
  left: 23px;
  top: 0;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,233,210,.32);
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.98), rgba(255,255,255,.44) 14%, rgba(229,235,241,.18) 18%, transparent 22%),
    radial-gradient(circle at 44% 30%, rgba(220,226,233,.96), rgba(137,145,157,.98) 52%, rgba(46,52,60,.99) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.34),
    inset 0 -8px 10px rgba(15,17,21,.28),
    0 8px 14px rgba(0,0,0,.42),
    0 0 10px rgba(255,231,180,.12);
}

.lever-label {
  bottom: 0;
  letter-spacing: .14em;
  font-size: .9rem;
  color: rgba(250,233,199,.92);
  text-shadow: 0 0 8px rgba(255,184,80,.18);
}

.utility-area .mini-button {
  min-height: 44px;
  padding-inline: 16px;
}

.control-accent-lamps {
  bottom: 8px;
  gap: 14px;
}

.control-accent-lamps span {
  width: 14px;
  height: 14px;
}

@media (max-width: 0px) {
  .operation-panel {
    padding: 12px 16px 10px;
    min-height: 126px;
  }
  .control-button.max-bet {
    min-width: 80px;
    min-height: 80px;
  }
  .lever {
    min-width: 88px;
    min-height: 88px;
  }
  .lever::before {
    left: 40px;
    top: 28px;
    height: 40px;
  }
  .lever::after {
    left: 32px;
    top: 60px;
  }
  .lever-knob {
    left: 22px;
    width: 44px;
    height: 44px;
  }
  .symbol-face {
    width: 94%;
  }
  .symbol[data-symbol="RED7"] .symbol-face,
  .symbol[data-symbol="BAR"] .symbol-face,
  .symbol[data-symbol="BELL"] .symbol-face,
  .symbol[data-symbol="CHERRY"] .symbol-face,
  .symbol[data-symbol="WATERMELON"] .symbol-face,
  .symbol[data-symbol="REPLAY"] .symbol-face {
    width: 90%;
  }
}

@media (max-width: 0px) {
  .operation-panel {
    padding: 10px 12px 10px;
    min-height: 118px;
  }
  .bet-area {
    gap: 12px;
  }
  .control-button.one-bet {
    min-width: 76px;
    min-height: 50px;
  }
  .control-button.max-bet {
    min-width: 74px;
    min-height: 74px;
    font-size: .94rem;
  }
  .lever {
    min-width: 80px;
    min-height: 82px;
  }
  .lever::before {
    left: 36px;
    top: 26px;
    height: 36px;
  }
  .lever::after {
    left: 29px;
    top: 56px;
    width: 24px;
    height: 12px;
  }
  .lever-knob {
    left: 20px;
    width: 40px;
    height: 40px;
  }
  .lever-label {
    font-size: .82rem;
  }
  .utility-area .mini-button {
    min-height: 40px;
    padding-inline: 12px;
  }
  .symbol-face {
    width: 95%;
    height: 94%;
  }
  .symbol[data-symbol="RED7"] .symbol-face,
  .symbol[data-symbol="BAR"] .symbol-face,
  .symbol[data-symbol="BELL"] .symbol-face,
  .symbol[data-symbol="CHERRY"] .symbol-face,
  .symbol[data-symbol="WATERMELON"] .symbol-face,
  .symbol[data-symbol="REPLAY"] .symbol-face {
    width: 92%;
    height: 93%;
  }
}


/* v34: move credit/pay upward and remove odd glow around 1/2/3 bet lamps */
.meter-panel-inline {
  width: min(100%, 432px);
  margin: 10px auto 4px;
  padding: 0;
  position: relative;
  z-index: 2;
}

.compact-line-caption {
  margin: 2px 0 10px;
  font-size: .62rem;
  color: rgba(191,199,211,.78);
}

.meter-panel-inline .meter {
  padding: 5px 6px 4px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(9,13,18,.98), rgba(2,4,7,.98));
  box-shadow: inset 0 0 9px rgba(0,0,0,.88), 0 2px 8px rgba(0,0,0,.18);
}

.meter-panel-inline .bet-lamps {
  gap: 7px;
  align-items: center;
}

.meter-panel-inline .bet-lamps span {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(184,123,50,.34);
  background: radial-gradient(circle at 50% 38%, rgba(255,240,213,.08), rgba(45,28,18,.95) 72%);
  color: #8f744d;
  box-shadow: inset 0 -6px 8px rgba(0,0,0,.30);
  text-shadow: none;
}

.meter-panel-inline .bet-lamps span.on {
  color: #fff0d6;
  border-color: rgba(255,188,96,.58);
  background: radial-gradient(circle at 50% 42%, rgba(255,242,216,.24), rgba(133,75,26,.88) 62%, rgba(37,20,11,.98) 100%);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,.28);
}

@media (max-width: 0px) {
  .meter-panel-inline {
    width: min(100%, 400px);
    margin-top: 8px;
  }
  .meter-panel-inline .bet-lamps span {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 0px) {
  .meter-panel-inline {
    width: min(100%, 360px);
    gap: 8px;
    margin-top: 6px;
  }
  .meter-panel-inline .bet-lamps {
    gap: 5px;
  }
  .meter-panel-inline .bet-lamps span {
    width: 30px;
    height: 30px;
  }
  .compact-line-caption {
    font-size: .58rem;
  }
}


/* v35: actual requested layout — CREDIT/PAY inside the reel frame, no center BET bulbs, no lever accent bulbs */
.reel-meter-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 6px 0 0;
  padding: 8px 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18,20,25,.98), rgba(7,9,13,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 14px rgba(0,0,0,.72);
}

.reel-meter-panel .meter {
  min-width: 0;
  padding: 5px 8px 4px;
  border-radius: 8px;
}

.reel-meter-panel .bet-lamps {
  display: none !important;
}

.control-accent-lamps {
  display: none !important;
}

.operation-panel {
  padding-bottom: 12px;
}

@media (max-width: 0px) {
  .reel-meter-panel {
    gap: 10px;
    padding: 7px 8px;
  }
}

@media (max-width: 0px) {
  .reel-meter-panel {
    gap: 8px;
    padding: 6px 7px;
    margin-top: 5px;
  }
  .reel-meter-panel .meter {
    padding: 4px 6px 3px;
  }
}


/* v36: remove debug UI and reduce vertical height */
.debug-hidden,
.debug-removed,
#debugStatusMessage.debug-removed {
  display: none !important;
}

.upper-display.compact-marquee {
  gap: 2px;
  padding: 6px 90px 4px;
}

.upper-info-row {
  gap: 3px;
}

.upper-display.compact-marquee .display-buttons {
  gap: 4px;
  margin-top: 0;
}

.machine-top-art {
  margin-top: 6px;
}

.utility-area {
  gap: 0;
}

.operation-panel {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 122px;
}

@media (max-width: 0px) {
  .upper-display.compact-marquee {
    padding: 5px 70px 4px;
  }
  .operation-panel {
    min-height: 116px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

@media (max-width: 0px) {
  .upper-display.compact-marquee {
    padding: 5px 48px 4px;
  }
  .operation-panel {
    min-height: 110px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* v40 force-flag test build */
.force-test-toggle {
  color: #fff0bd;
  border-color: rgba(238, 185, 82, .58);
  background: linear-gradient(180deg, rgba(76, 61, 37, .98), rgba(35, 29, 20, .98));
  text-shadow: 0 0 7px rgba(255, 190, 74, .26);
}

.force-test-toggle[aria-pressed="true"] {
  color: #e8faff;
  border-color: rgba(110, 208, 255, .78);
  background: linear-gradient(180deg, rgba(47, 104, 134, .98), rgba(23, 52, 73, .98));
  box-shadow: 0 0 10px rgba(77, 190, 246, .24);
}

#debugPanel:not([hidden]) {
  margin-top: 10px;
}







@media (max-width: 0px) {
}







@media (max-width: 0px) {
}



@media (max-width: 0px) {
}

/* v46 final official X button layout */
body > .official-x-button {
  position: fixed !important;
  left: max(16px, calc(50vw - 700px)) !important;
  top: 170px !important;
  right: auto !important;
  z-index: 10000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 62px !important;
  padding: 9px 16px 9px 9px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 16px !important;
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(180deg, rgba(20,24,31,.98), rgba(4,6,10,.98)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(103,184,255,.10) !important;
}
body > .official-x-button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.95) !important;
}
body > .official-x-button .official-x-mark {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #151a22, #06080c) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px rgba(0,0,0,.28) !important;
}
body > .official-x-button .official-x-mark svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
body > .official-x-button .official-x-copy {
  display: grid !important;
  line-height: 1.05 !important;
}
body > .official-x-button .official-x-copy strong {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}
body > .official-x-button .official-x-copy small {
  margin-top: 3px !important;
  color: rgba(166,220,255,.97) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
@media (max-width: 0px) {
  body > .official-x-button {
    left: 10px !important;
    top: 120px !important;
    min-height: 56px !important;
    padding: 8px 14px 8px 8px !important;
  }
  body > .official-x-button .official-x-mark {
    width: 40px !important;
    height: 40px !important;
  }
  body > .official-x-button .official-x-mark svg {
    width: 20px !important;
    height: 20px !important;
  }
  body > .official-x-button .official-x-copy strong {
    font-size: 14px !important;
  }
  body > .official-x-button .official-x-copy small {
    font-size: 10px !important;
  }
}


/* v49: fixed-coordinate layout that scales as one canvas */
html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
}

.app-fit-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
}

.app-viewport {
  --app-scale: 1;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1385px;
  min-height: 1000px;
  margin-left: -692.5px;
  transform: scale(var(--app-scale));
  transform-origin: top center;
}

.app-viewport > .page {
  width: 740px !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 18px 10px 52px !important;
}

.app-viewport > .official-x-button {
  position: absolute !important;
  left: 28px !important;
  top: 170px !important;
  right: auto !important;
  z-index: 10000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 62px !important;
  padding: 9px 16px 9px 9px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 16px !important;
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(180deg, rgba(20,24,31,.98), rgba(4,6,10,.98)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(103,184,255,.10) !important;
}

.app-viewport > .official-x-button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.95) !important;
}

.app-viewport > .official-x-button .official-x-mark {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #151a22, #06080c) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px rgba(0,0,0,.28) !important;
}

.app-viewport > .official-x-button .official-x-mark svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

.app-viewport > .official-x-button .official-x-copy {
  display: grid !important;
  line-height: 1.05 !important;
}

.app-viewport > .official-x-button .official-x-copy strong {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}

.app-viewport > .official-x-button .official-x-copy small {
  margin-top: 3px !important;
  color: rgba(166,220,255,.97) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}


/* v50: DATA panel beside cabinet on wide screens, smaller stop buttons */
.stop-panel {
  width: min(100%, 500px);
  gap: clamp(8px, 2.8vw, 18px);
  margin-top: 14px;
}

.stop-button {
  aspect-ratio: 1.34;
  font-size: clamp(.8rem, 3vw, 1.02rem);
}

/* Default (small / medium screens): keep overlay behavior */
@media (max-width: 1499px) {
  body.data-panel-open {
    overflow: hidden;
  }
  body.data-panel-open .page {
    transform: translateX(-170px);
  }
}

/* Wide screens: open DATA panel to the right so the slot cabinet stays visible */
@media (min-width: 1500px) {
  .data-backdrop,
  .data-backdrop.visible {
    display: none !important;
    opacity: 0 !important;
  }

  body.data-panel-open {
    overflow: auto;
  }

  body.data-panel-open .page {
    transform: none !important;
  }

  .data-panel {
    top: 34px;
    left: calc(50% + 392px);
    right: auto;
    width: min(420px, calc(100vw - (50% + 392px) - 18px));
    max-width: 420px;
    height: auto;
    max-height: calc(100dvh - 68px);
    border: 2px solid #465363;
    border-left: 2px solid #465363;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,.60);
    transform: translateX(22px);
    opacity: 0;
    pointer-events: none;
  }

  .data-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .data-panel-header {
    top: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}


/* SLONeST REVOLVER SLOT Ver.1.0 public release */
#debugButton,
#debugPanel,
#debugStatusMessage {
  display: none !important;
}

.lower-art-kicker {
  letter-spacing: .16em;
}

.lower-art-center small {
  color: rgba(234, 213, 160, .78);
  letter-spacing: .08em;
}


/* SLONeST site integration */
.page-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.slonest-home-link{padding:7px 11px;border:1px solid #35516a;border-radius:8px;color:#8edcff;text-decoration:none;font-size:.68rem;font-weight:900;letter-spacing:.06em;background:#08131f}.slonest-home-link:hover{border-color:#69cfff;color:#fff}


/* Mobile optimization: use cabinet width instead of desktop side-space width. */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .app-viewport {
    width: 760px !important;
    margin-left: -380px !important;
  }

  .app-viewport > .official-x-button {
    display: none !important;
  }

  .app-viewport > .page {
    padding-top: 8px !important;
  }

  .cabinet,
  .cabinet.machine-cold,
  .cabinet.machine-hot {
    box-shadow: 0 14px 34px rgba(0,0,0,.58), inset 0 0 0 2px #090b0f !important;
  }

  .cabinet::before,
  .cabinet::after {
    filter: none !important;
  }

  .data-panel {
    width: min(96vw, 430px) !important;
  }

  .data-panel-header {
    padding-top: max(17px, env(safe-area-inset-top)) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .app-viewport > .page {
    padding-top: 2px !important;
  }
}


/* Mobile performance pass: same design, fewer decoded pixels and compositor layers. */
.reel-strip {
  contain: layout paint style;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.reel-window {
  contain: layout paint;
  isolation: isolate;
}

.symbol {
  transform: none !important;
  contain: layout paint style;
}

.manual,
.page-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

.data-panel {
  contain: layout paint style;
}

.v22-upper-panel > picture,
.image-chance-lamp > picture {
  display: contents;
}

.data-panel {
  visibility: hidden;
  transition: transform .24s ease, visibility 0s linear .24s;
}

.data-panel.open {
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 900px) {
  /* Static artwork is already scaled for phones; keep the exact design without costly oversized texture work. */
  .v22-upper-panel picture,
  .image-chance-lamp picture {
    display: contents;
  }

  .v22-upper-panel-image,
  .image-chance-lamp img,
  .status-lamp-image,
  .symbol-image {
    image-rendering: auto;
    backface-visibility: hidden;
  }

  /* Preserve the spinning red-7 pulse using compositor opacity rather than repainting animated filters. */
  .reel-window.is-spinning .symbol[data-symbol="RED7"] .symbol-image {
    animation: none !important;
    filter: saturate(1.25) contrast(1.12) brightness(1.08) drop-shadow(0 0 6px rgba(255,74,32,.78)) !important;
  }

  .symbol[data-symbol="RED7"] .symbol-face {
    position: relative;
  }

  .reel-window.is-spinning .symbol[data-symbol="RED7"] .symbol-face::after {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 12px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,250,207,.34), rgba(255,76,32,.18) 52%, transparent 76%);
    mix-blend-mode: screen;
    opacity: .55;
    will-change: opacity, transform;
    animation: mobileSevenGlow .28s ease-in-out infinite alternate;
  }

  @keyframes mobileSevenGlow {
    from { opacity: .42; transform: scale(.97); }
    to { opacity: .86; transform: scale(1.03); }
  }

  /* Equivalent-looking opaque header avoids mobile backdrop-filter recompositing. */
  .data-panel-header {
    backdrop-filter: none !important;
    background: rgba(20,26,34,.995) !important;
  }

  /* Large blend/filter layers are replaced by the same colored glow gradient on mobile. */
  .v22-title-glow {
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: .94;
  }

  .v22-upper-panel::before,
  .v22-upper-panel::after {
    filter: none !important;
  }

  /* Prevent off-screen instructions and tables from participating in paint until opened/scrolled to. */
  .manual-content,
  .specification-section,
  .reel-layout-guide {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}