:root {
  color-scheme: dark;
  --cabinet-red: #9e1915;
  --cabinet-deep: #220608;
  --chrome: #f0c75b;
  --lamp: #ffe66d;
  --lamp-hot: #fff8bc;
  --panel: #140e12;
  --panel-2: #281116;
  --ink: #fff5cc;
  --muted: #d7aa6c;
  --green: #27d27f;
  --blue: #38b7ff;
  --danger: #ff604d;
  --led: #ff2b20;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 204, 102, 0.18), transparent 34rem),
    linear-gradient(155deg, #1b0710 0%, #06070a 46%, #071a18 100%);
  color: var(--ink);
  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "Segoe UI",
    sans-serif;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
}

body::before {
  mix-blend-mode: soft-light;
  opacity: 0.32;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 2px,
    transparent 5px
  );
}

body::after {
  opacity: 0.24;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.14), transparent 0.16rem),
    radial-gradient(circle at 74% 32%, rgba(255, 255, 255, 0.1), transparent 0.13rem),
    radial-gradient(circle at 44% 76%, rgba(255, 255, 255, 0.08), transparent 0.12rem),
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.46) 100%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.55;
}

.cabinet {
  position: relative;
  width: min(100vw, 520px);
  min-height: 100svh;
  padding: clamp(10px, 2.2vw, 18px);
  border-inline: clamp(6px, 2vw, 12px) solid #401013;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 12%, transparent 88%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, #b91f1b 0%, #5a1013 36%, #17090d 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 225, 112, 0.38),
    inset 0 0 38px rgba(0, 0, 0, 0.72),
    0 0 54px rgba(0, 0, 0, 0.7);
}

.top-marquee {
  padding: 8px 8px 10px;
  border: 2px solid rgba(255, 212, 96, 0.75);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 236, 159, 0.2), transparent 34%),
    #210b0d;
  box-shadow: inset 0 0 24px rgba(255, 221, 92, 0.14);
}

.title-strip {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

@keyframes titleGlow {
  0% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(255, 218, 80, 0.9),
      0 0 22px rgba(255, 71, 38, 0.62),
      0 0 35px rgba(255, 218, 80, 0.5);
    color: #fff1a8;
  }
  16% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(255, 80, 80, 0.9),
      0 0 22px rgba(255, 180, 50, 0.62),
      0 0 35px rgba(255, 100, 50, 0.5);
    color: #fff8dc;
  }
  33% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(50, 255, 180, 0.9),
      0 0 22px rgba(100, 255, 150, 0.62),
      0 0 35px rgba(50, 255, 200, 0.5);
    color: #e8fff0;
  }
  50% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(80, 180, 255, 0.9),
      0 0 22px rgba(100, 150, 255, 0.62),
      0 0 35px rgba(80, 200, 255, 0.5);
    color: #e0f4ff;
  }
  66% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(200, 100, 255, 0.9),
      0 0 22px rgba(180, 120, 255, 0.62),
      0 0 35px rgba(180, 100, 255, 0.5);
    color: #f0e0ff;
  }
  83% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(255, 218, 80, 0.9),
      0 0 22px rgba(255, 200, 50, 0.62),
      0 0 35px rgba(255, 220, 80, 0.5);
    color: #fffadc;
  }
  100% {
    text-shadow:
      0 2px 0 #68130e,
      0 0 12px rgba(255, 218, 80, 0.9),
      0 0 22px rgba(255, 71, 38, 0.62),
      0 0 35px rgba(255, 218, 80, 0.5);
    color: #fff1a8;
  }
}

.title-strip h1 {
  margin: 0;
  color: #fff1a8;
  font-size: clamp(1.45rem, 7vw, 2.35rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 #68130e,
    0 0 12px rgba(255, 218, 80, 0.9),
    0 0 22px rgba(255, 71, 38, 0.62),
    0 0 35px rgba(255, 218, 80, 0.5);
  animation: titleGlow 3s ease-in-out infinite;
}

.mini-bulb {
  width: 22px;
  height: 22px;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ffe66d 25% 48%, #b66a00 72%);
  box-shadow:
    0 0 10px var(--lamp),
    0 0 22px rgba(255, 218, 70, 0.8);
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.scorebox {
  padding: 6px;
  border: 2px solid #d6a93c;
  border-radius: 6px;
  background: #070707;
  box-shadow: inset 0 0 16px rgba(255, 0, 0, 0.16);
}

.score-label {
  display: block;
  margin-bottom: 3px;
  color: #ffcf62;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

.led-display,
#multiplierDisplay {
  display: block;
  min-height: 1.35em;
  color: var(--led);
  font-family:
    "Courier New",
    Consolas,
    monospace;
  font-size: clamp(1.34rem, 7vw, 2.28rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-shadow:
    0 0 4px #ff1e15,
    0 0 10px rgba(255, 54, 36, 0.86),
    0 0 22px rgba(255, 0, 0, 0.6);
}

.playfield {
  margin-top: 10px;
  padding: 8px;
  border: 2px solid #f1c85b;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 231, 122, 0.18), transparent 30%),
    linear-gradient(180deg, #34120f, #12080a);
}

.lamp-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1vw, 6px);
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(4px, 1.3vw, 8px);
  border: 3px solid #f5c34d;
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(255, 202, 78, 0.2), transparent 42%),
    #0e0b0d;
  box-shadow:
    inset 0 0 28px rgba(255, 196, 61, 0.24),
    0 0 22px rgba(0, 0, 0, 0.44);
}

.lamp-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 211, 91, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 245, 182, 0.16), transparent 42%),
    linear-gradient(180deg, #38151a, #12090c);
  box-shadow:
    inset 0 0 9px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 0, 0, 0.36);
}

.lamp-slot::before {
  position: absolute;
  top: 4px;
  right: 4px;
  width: clamp(7px, 1.8vw, 11px);
  height: clamp(7px, 1.8vw, 11px);
  border-radius: 50%;
  background: #4b300d;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9);
  content: "";
}

.lamp-slot.active {
  border-color: #fff9a4;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 209, 0.42), transparent 52%),
    linear-gradient(180deg, #714a08, #1b0c09);
  box-shadow:
    0 0 12px #ffe869,
    0 0 28px rgba(255, 226, 72, 0.92),
    inset 0 0 12px rgba(255, 255, 190, 0.36);
}

.lamp-slot.active::before,
.lamp-slot.bursting::before {
  background: radial-gradient(circle, #fff 0 18%, var(--lamp-hot) 28% 50%, #f49b10 78%);
  box-shadow:
    0 0 9px var(--lamp),
    0 0 18px rgba(255, 226, 80, 0.92);
}

.lamp-slot.flash-stop {
  animation: stopBlink 0.16s steps(2) 8;
}

.lamp-slot.bursting {
  animation: burstLamp 0.52s ease-out 4;
}

.slot-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 2px;
  font-size: clamp(0.78rem, 5vw, 1.55rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.62),
    0 0 10px rgba(255, 255, 255, 0.18);
}

.slot-symbol.text-symbol {
  font-size: clamp(0.68rem, 4.2vw, 1.32rem);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lamp-slot.luck {
  background:
    radial-gradient(circle at 50% 50%, rgba(56, 183, 255, 0.38), transparent 55%),
    linear-gradient(180deg, #093047, #10080c);
  border-color: #5ddbff;
}

.lamp-slot.luck .slot-symbol {
  color: #d8f7ff;
  font-size: clamp(0.62rem, 3.6vw, 1rem);
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(75, 211, 255, 0.96),
    0 2px 0 #032233;
}

.center-crest {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 2 / span 5;
  grid-row: 2 / span 5;
  place-items: center;
  overflow: hidden;
  border: 3px solid #f8cf5b;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 221, 106, 0.32), transparent 42%),
    linear-gradient(180deg, #36100d, #090606);
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.68),
    0 0 20px rgba(255, 203, 71, 0.22);
}

.crest-art {
  width: 88%;
  max-width: 280px;
  filter:
    drop-shadow(0 0 12px rgba(255, 221, 87, 0.52))
    saturate(1.16);
}

.multiplier-tube {
  position: absolute;
  right: 7%;
  bottom: 7%;
  min-width: 78px;
  padding: 4px 7px 5px;
  border: 2px solid #edc250;
  border-radius: 6px;
  background: #050505;
  box-shadow:
    inset 0 0 10px rgba(255, 0, 0, 0.18),
    0 0 10px rgba(0, 0, 0, 0.48);
}

.multiplier-tube span {
  display: block;
  color: #ffd265;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

#multiplierDisplay {
  font-size: clamp(1.2rem, 5vw, 1.75rem);
}

.bet-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.bet-card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  min-height: 76px;
  padding: 6px 4px;
  border: 2px solid rgba(255, 211, 91, 0.64);
  border-radius: 8px;
  background: linear-gradient(180deg, #2b1116, #0c090b);
  color: var(--ink);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.56);
}

.bet-card.selected {
  border-color: #ffffff;
  box-shadow:
    0 0 12px rgba(255, 230, 97, 0.9),
    inset 0 0 12px rgba(255, 220, 82, 0.18);
}

.bet-card .bet-symbol {
  min-height: 1.5em;
  font-size: clamp(1.05rem, 5vw, 1.55rem);
  font-weight: 900;
  line-height: 1;
}

.bet-card .bet-symbol.text-symbol {
  font-size: clamp(0.86rem, 4.2vw, 1.25rem);
  text-align: center;
  display: block;
}

.bet-meta,
.bet-value {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-meta {
  color: #ffd36c;
}

.bet-value {
  color: #90ffbf;
  font-family: "Courier New", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.control-deck {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "bet-plus bet-minus start cashout reset";
  justify-items: center;
  gap: 7px;
  margin-top: 10px;
}

#startBtn {
  grid-area: start;
  width: 100%;
}

#betPlusBtn {
  grid-area: bet-plus;
}

#betMinusBtn {
  grid-area: bet-minus;
}

#cashoutBtn {
  grid-area: cashout;
}

/* 固定按钮颜色 - 不受主题影响 */
#startBtn {
  color: #fff9d8;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #ff9d46 20% 44%, #c34719 78%),
    #e29b1d;
  text-shadow: 0 2px 0 #64120d;
}

#betPlusBtn,
#betMinusBtn {
  color: #032432;
  background:
    radial-gradient(circle at 38% 28%, #ffffff 0 10%, #b8f2ff 20% 42%, #1688ad 75%),
    #42c8ff;
}

#cashoutBtn {
  color: #ecfbff;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #60e6b7 20% 44%, #0a7a8d 78%),
    #15a9bd;
}

#resetBtn {
  grid-area: reset;
  color: #fff4df;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #ff4f3e 20% 44%, #aa1110 78%),
    #d92218;
}

.arcade-btn {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  border: 3px solid #fff0a8;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, #ffffff 0 10%, #ffe76e 20% 42%, #e29b14 75%),
    #e2aa1d;
  color: #421008;
  font-size: clamp(0.62rem, 2.7vw, 0.86rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  box-shadow:
    inset 0 -7px 0 rgba(95, 44, 0, 0.34),
    0 5px 0 #64120d,
    0 0 13px rgba(255, 218, 77, 0.42);
}

.arcade-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 -3px 0 rgba(95, 44, 0, 0.32),
    0 1px 0 #64120d,
    0 0 10px rgba(255, 218, 77, 0.36);
}

.arcade-btn.primary {
  color: #fff9d8;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #ff4f3e 20% 44%, #aa1110 78%),
    #d92218;
  text-shadow: 0 2px 0 #5c0b07;
}

.arcade-btn.danger {
  color: #fff4df;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #ff9d46 20% 44%, #8d250d 78%),
    #c34719;
  text-shadow: 0 2px 0 #4d1208;
}

.message-line {
  margin-top: 9px;
  padding: 8px 10px;
  border: 2px solid rgba(255, 211, 91, 0.64);
  border-radius: 6px;
  background: #060606;
  color: #86ffb1;
  font-family: "Courier New", Consolas, monospace;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 9px rgba(44, 255, 126, 0.76);
}

.settings-panel {
  margin-top: 9px;
  border: 2px solid rgba(255, 211, 91, 0.54);
  border-radius: 8px;
  background: rgba(6, 6, 8, 0.62);
}

.settings-panel summary {
  padding: 9px 12px;
  color: #ffd36c;
  cursor: pointer;
  font-weight: 900;
}

.settings-form {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.setting-row,
.recharge-row,
.item-setting-row {
  display: grid;
  grid-template-columns: 1fr minmax(72px, 0.7fr);
  align-items: center;
  gap: 8px;
}

.recharge-row {
  grid-template-columns: 1fr minmax(72px, 0.75fr) minmax(58px, 0.55fr);
}

.item-setting-row {
  grid-template-columns: 1fr minmax(56px, 0.6fr) minmax(56px, 0.6fr);
}

.setting-row span,
.recharge-row span,
.item-setting-row span {
  min-width: 0;
  overflow: hidden;
  color: #ffdda0;
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-form input {
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #dcae4a;
  border-radius: 5px;
  background: #080708;
  color: #fff4c7;
  font-family: "Courier New", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.item-settings {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.small-btn {
  border: 2px solid #ffe68a;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffd862, #be7610);
  color: #321009;
  font-weight: 900;
  min-height: 36px;
}

.small-btn.ghost {
  background: linear-gradient(180deg, #2b1b20, #10090c);
  color: #ffe29d;
}

.flash-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  background: #fff4a6;
  mix-blend-mode: screen;
}

.flash-layer.show {
  animation: fullFlash 0.75s ease-out;
}

.score-pulse {
  animation: scoreJump 0.54s ease-out 4;
}

.shake {
  animation: cabinetShake 0.28s linear 4;
}

@keyframes stopBlink {
  50% {
    filter: brightness(1.9);
  }
}

@keyframes burstLamp {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  45% {
    filter: brightness(2.2);
    transform: scale(1.05);
  }
}

@keyframes fullFlash {
  0%,
  18%,
  38% {
    opacity: 0.72;
  }
  10%,
  28%,
  100% {
    opacity: 0;
  }
}

@keyframes scoreJump {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-2px) scale(1.045);
  }
}

@keyframes cabinetShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

@media (max-width: 380px) {
  .cabinet {
    padding: 8px;
  }

  .scoreboard {
    gap: 5px;
  }

  .control-deck {
    gap: 5px;
  }

  .bet-panel {
    gap: 5px;
  }

  .bet-card {
    min-height: 68px;
  }
}

:root {
  --cabinet-red: #126f91;
  --cabinet-deep: #061923;
  --chrome: #9ee8ff;
  --lamp: #75e9ff;
  --lamp-hot: #e8fbff;
  --panel: #061923;
  --panel-2: #0d3443;
  --ink: #ecfbff;
  --muted: #a7d7df;
  --green: #60e6b7;
  --blue: #42c8ff;
  --danger: #ff7b6d;
  --led: #7df3ff;
}

body {
  background:
    radial-gradient(circle at 50% 0%, rgba(117, 233, 255, 0.22), transparent 34rem),
    linear-gradient(155deg, #052f46 0%, #061923 48%, #052c32 100%);
}

body::after {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.14), transparent 0.16rem),
    radial-gradient(circle at 74% 32%, rgba(182, 247, 255, 0.12), transparent 0.13rem),
    radial-gradient(circle at 44% 76%, rgba(96, 230, 183, 0.1), transparent 0.12rem),
    radial-gradient(ellipse at center, transparent 38%, rgba(2, 17, 25, 0.48) 100%);
}

.cabinet {
  border-inline-color: #08384d;
  background:
    linear-gradient(90deg, rgba(232, 251, 255, 0.12), transparent 12%, transparent 88%, rgba(232, 251, 255, 0.12)),
    linear-gradient(180deg, #1688ad 0%, #0b4f6b 38%, #061923 100%);
  box-shadow:
    inset 0 0 0 4px rgba(158, 232, 255, 0.34),
    inset 0 0 38px rgba(0, 0, 0, 0.7),
    0 0 54px rgba(0, 0, 0, 0.68);
}

.top-marquee,
.playfield,
.settings-panel {
  border-color: rgba(158, 232, 255, 0.72);
}

.top-marquee {
  background:
    linear-gradient(180deg, rgba(178, 242, 255, 0.22), transparent 34%),
    #061923;
  box-shadow: inset 0 0 24px rgba(117, 233, 255, 0.16);
}

.title-strip h1 {
  color: #eafcff;
  text-shadow:
    0 2px 0 #06405a,
    0 0 12px rgba(117, 233, 255, 0.9),
    0 0 22px rgba(96, 230, 183, 0.6),
    0 0 35px rgba(117, 233, 255, 0.5);
  animation: titleGlow 3s ease-in-out infinite;
}

.mini-bulb {
  background: radial-gradient(circle, #fff 0 18%, #bff7ff 25% 48%, #1688ad 72%);
  box-shadow:
    0 0 10px var(--lamp),
    0 0 22px rgba(117, 233, 255, 0.8);
}

.scorebox,
.multiplier-tube,
.message-line {
  border-color: #77dff2;
  background: #031017;
  box-shadow: inset 0 0 16px rgba(117, 233, 255, 0.14);
}

.score-label,
.multiplier-tube span,
.bet-meta,
.settings-panel summary {
  color: #b8f2ff;
}

.led-display,
#multiplierDisplay {
  color: var(--led);
  text-shadow:
    0 0 4px #7df3ff,
    0 0 10px rgba(125, 243, 255, 0.86),
    0 0 22px rgba(66, 200, 255, 0.56);
}

.playfield {
  background:
    linear-gradient(145deg, rgba(178, 242, 255, 0.18), transparent 30%),
    linear-gradient(180deg, #0b4054, #061923);
}

.lamp-track {
  border-color: #8de9fb;
  background:
    radial-gradient(circle at center, rgba(117, 233, 255, 0.18), transparent 42%),
    #041720;
  box-shadow:
    inset 0 0 28px rgba(117, 233, 255, 0.22),
    0 0 22px rgba(0, 0, 0, 0.44);
}

.lamp-slot,
.bet-card {
  border-color: rgba(142, 232, 251, 0.68);
  background:
    radial-gradient(circle at 50% 35%, rgba(232, 251, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #0d3443, #061923);
}

.lamp-slot::before {
  background: #16485a;
}

.lamp-slot.active,
.bet-card.selected {
  border-color: #e8fbff;
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 251, 255, 0.44), transparent 52%),
    linear-gradient(180deg, #1688ad, #063448);
  box-shadow:
    0 0 12px #75e9ff,
    0 0 28px rgba(117, 233, 255, 0.86),
    inset 0 0 12px rgba(96, 230, 183, 0.2);
}

.lamp-slot.active::before,
.lamp-slot.bursting::before {
  background: radial-gradient(circle, #fff 0 18%, var(--lamp-hot) 28% 50%, #42c8ff 78%);
  box-shadow:
    0 0 9px var(--lamp),
    0 0 18px rgba(117, 233, 255, 0.92);
}

.lamp-slot.luck {
  border-color: #75ffd8;
  background:
    radial-gradient(circle at 50% 50%, rgba(96, 230, 183, 0.38), transparent 55%),
    linear-gradient(180deg, #07515a, #061923);
}

.lamp-slot.luck .slot-symbol {
  color: #dcfff6;
  text-shadow:
    0 0 8px rgba(96, 230, 183, 0.96),
    0 2px 0 #033238;
}

.center-crest {
  border-color: #9ee8ff;
  background:
    radial-gradient(circle at 50% 35%, rgba(117, 233, 255, 0.28), transparent 42%),
    linear-gradient(180deg, #0b4054, #031017);
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.68),
    0 0 20px rgba(117, 233, 255, 0.22);
}

.crest-art {
  filter:
    drop-shadow(0 0 12px rgba(117, 233, 255, 0.52))
    saturate(1.08);
}

#crestGlow stop:nth-child(1) {
  stop-color: #e8fbff;
}

#crestGlow stop:nth-child(2) {
  stop-color: #42c8ff;
}

#crestGlow stop:nth-child(3) {
  stop-color: #063448;
}

#wingGold stop:nth-child(1) {
  stop-color: #e8fbff;
}

#wingGold stop:nth-child(2) {
  stop-color: #60e6b7;
}

#wingGold stop:nth-child(3) {
  stop-color: #0a7a8d;
}

.crest-art circle,
.crest-art path {
  stroke: #052f46;
}

.crest-art path:nth-of-type(3),
.crest-art path:nth-of-type(8) {
  fill: #9ee8ff;
}

.crest-art path:nth-of-type(4) {
  fill: #0d6f83;
}

.crest-art path:nth-of-type(5) {
  fill: #d8fbff;
}

.crest-art circle:nth-of-type(n + 2),
.crest-art path:nth-of-type(6) {
  fill: #031017;
}

.crest-art path:nth-of-type(7) {
  fill: none;
  stroke: #031017;
}

.bet-value,
.message-line {
  color: #75ffd8;
}

.message-line {
  text-shadow: 0 0 9px rgba(96, 230, 183, 0.76);
}

.arcade-btn {
  border-color: #e8fbff;
  background:
    radial-gradient(circle at 38% 28%, #ffffff 0 10%, #b8f2ff 20% 42%, #1688ad 75%),
    #42c8ff;
  color: #032432;
  box-shadow:
    inset 0 -7px 0 rgba(3, 36, 50, 0.34),
    0 5px 0 #052f46,
    0 0 13px rgba(117, 233, 255, 0.42);
}

.arcade-btn:active {
  box-shadow:
    inset 0 -3px 0 rgba(3, 36, 50, 0.32),
    0 1px 0 #052f46,
    0 0 10px rgba(117, 233, 255, 0.36);
}

.arcade-btn.primary {
  color: #ecfbff;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #60e6b7 20% 44%, #0a7a8d 78%),
    #15a9bd;
  text-shadow: 0 2px 0 #06405a;
}

.arcade-btn.danger {
  color: #fff4df;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, #ffb19f 20% 44%, #b64e44 78%),
    #df7165;
  text-shadow: 0 2px 0 #5b2624;
}

.settings-panel {
  background: rgba(3, 16, 23, 0.68);
}

.setting-row span,
.item-setting-row span {
  color: #c7f5ff;
}

.settings-form input {
  border-color: #78dff2;
  background: #031017;
  color: #ecfbff;
}

.small-btn {
  border-color: #b8f2ff;
  background: linear-gradient(180deg, #b8f2ff, #1688ad);
  color: #032432;
}

.small-btn.ghost {
  background: linear-gradient(180deg, #0d3443, #061923);
  color: #c7f5ff;
}

.small-btn.danger {
  background: linear-gradient(180deg, #ffb19f, #b64e44);
  color: #fff4df;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 17, 25, 0.74);
}

.confirm-modal[hidden] {
  display: none;
}

.confirm-box {
  width: min(88vw, 330px);
  padding: 16px;
  border: 3px solid #9ee8ff;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(117, 233, 255, 0.24), transparent 55%),
    #061923;
  box-shadow:
    0 0 26px rgba(117, 233, 255, 0.42),
    inset 0 0 24px rgba(0, 0, 0, 0.58);
}

.confirm-box h2 {
  margin: 0 0 8px;
  color: #eafcff;
  font-size: 1.15rem;
  text-align: center;
}

.confirm-box p {
  margin: 0 0 14px;
  color: #c7f5ff;
  font-weight: 800;
  text-align: center;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flash-layer {
  background: #d7fbff;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  height: 100dvh;
  touch-action: manipulation;
}

.cabinet {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

@media (max-height: 760px) {
  .cabinet {
    padding-block: 7px;
  }

  .top-marquee {
    padding-block: 6px 7px;
  }

  .title-strip {
    min-height: 34px;
  }

  .playfield {
    margin-top: 7px;
    padding: 6px;
  }

  .bet-panel {
    margin-top: 7px;
  }

  .bet-card {
    min-height: 62px;
    padding-block: 4px;
  }

  .control-deck,
  .message-line,
  .settings-panel {
    margin-top: 7px;
  }

  .message-line {
    padding-block: 6px;
  }
}

body:not([data-theme]),
body[data-theme="blue"] {
  --theme-bg-a: rgba(117, 233, 255, 0.22);
  --theme-bg-1: #052f46;
  --theme-bg-2: #061923;
  --theme-bg-3: #052c32;
  --theme-cabinet-1: #1688ad;
  --theme-cabinet-2: #0b4f6b;
  --theme-cabinet-3: #061923;
  --theme-border: #9ee8ff;
  --theme-panel: #031017;
  --theme-panel-2: #0d3443;
  --theme-lamp: #75e9ff;
  --theme-hot: #e8fbff;
  --theme-accent: #60e6b7;
  --theme-accent-2: #42c8ff;
  --theme-led: #7df3ff;
  --theme-text: #ecfbff;
  --theme-muted: #b8f2ff;
  --theme-dark: #032432;
  --theme-danger-1: #ffb19f;
  --theme-danger-2: #b64e44;
  --item-bar: #e8fbff;
  --item-seven: #75e9ff;
  --item-star: #75ffd8;
  --item-watermelon: #60e6b7;
  --item-bell: #b8f2ff;
  --item-lemon: #d7fbff;
  --item-orange: #9ee8ff;
  --item-apple: #c7f5ff;
}

body[data-theme="green"] {
  --theme-bg-a: rgba(113, 255, 174, 0.2);
  --theme-bg-1: #063f34;
  --theme-bg-2: #051d17;
  --theme-bg-3: #082f26;
  --theme-cabinet-1: #16a66b;
  --theme-cabinet-2: #0c6f4a;
  --theme-cabinet-3: #051d17;
  --theme-border: #a7ffd0;
  --theme-panel: #041410;
  --theme-panel-2: #0d3b2e;
  --theme-lamp: #83ffb6;
  --theme-hot: #ebfff3;
  --theme-accent: #d4ff78;
  --theme-accent-2: #38d884;
  --theme-led: #9cffc8;
  --theme-text: #effff5;
  --theme-muted: #c7ffd9;
  --theme-dark: #052418;
  --theme-danger-1: #ffc08e;
  --theme-danger-2: #bd6841;
  --item-bar: #effff5;
  --item-seven: #9cffc8;
  --item-star: #d4ff78;
  --item-watermelon: #83ffb6;
  --item-bell: #c7ffd9;
  --item-lemon: #ecffb0;
  --item-orange: #b2f7a0;
  --item-apple: #d7ffe9;
}

body[data-theme="pink"] {
  --theme-bg-a: rgba(255, 142, 207, 0.2);
  --theme-bg-1: #4d123a;
  --theme-bg-2: #1f0a19;
  --theme-bg-3: #35132e;
  --theme-cabinet-1: #d4509b;
  --theme-cabinet-2: #96376f;
  --theme-cabinet-3: #1f0a19;
  --theme-border: #ffc4e4;
  --theme-panel: #160711;
  --theme-panel-2: #4b1838;
  --theme-lamp: #ff91cf;
  --theme-hot: #fff0fa;
  --theme-accent: #ffdf79;
  --theme-accent-2: #ff70b7;
  --theme-led: #ffd1ea;
  --theme-text: #fff3fb;
  --theme-muted: #ffd4ec;
  --theme-dark: #321025;
  --theme-danger-1: #ffb3a9;
  --theme-danger-2: #bd4e6a;
  --item-bar: #fff3fb;
  --item-seven: #ff91cf;
  --item-star: #ffdf79;
  --item-watermelon: #ffb3dd;
  --item-bell: #ffd4ec;
  --item-lemon: #fff0a8;
  --item-orange: #ffb17a;
  --item-apple: #ffe6f4;
}

body[data-theme="purple"] {
  --theme-bg-a: rgba(184, 140, 255, 0.22);
  --theme-bg-1: #2e1a5e;
  --theme-bg-2: #120b2a;
  --theme-bg-3: #211449;
  --theme-cabinet-1: #7754d6;
  --theme-cabinet-2: #4e3799;
  --theme-cabinet-3: #120b2a;
  --theme-border: #d6c4ff;
  --theme-panel: #0d0820;
  --theme-panel-2: #2d1d5f;
  --theme-lamp: #b88cff;
  --theme-hot: #f4edff;
  --theme-accent: #78e8ff;
  --theme-accent-2: #9f7cff;
  --theme-led: #decfff;
  --theme-text: #f7f2ff;
  --theme-muted: #ddceff;
  --theme-dark: #1d1340;
  --theme-danger-1: #ffb8b0;
  --theme-danger-2: #a84a69;
  --item-bar: #f7f2ff;
  --item-seven: #c6a6ff;
  --item-star: #78e8ff;
  --item-watermelon: #a5f0ff;
  --item-bell: #ddceff;
  --item-lemon: #ece0ff;
  --item-orange: #d0a2ff;
  --item-apple: #f0e7ff;
}

body[data-theme] {
  --cabinet-red: var(--theme-cabinet-1);
  --cabinet-deep: var(--theme-cabinet-3);
  --chrome: var(--theme-border);
  --lamp: var(--theme-lamp);
  --lamp-hot: var(--theme-hot);
  --panel: var(--theme-panel);
  --panel-2: var(--theme-panel-2);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --green: var(--theme-accent);
  --blue: var(--theme-accent-2);
  --led: var(--theme-led);
  background:
    radial-gradient(circle at 50% 0%, var(--theme-bg-a), transparent 34rem),
    linear-gradient(155deg, var(--theme-bg-1) 0%, var(--theme-bg-2) 48%, var(--theme-bg-3) 100%);
}

body[data-theme]::after {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.14), transparent 0.16rem),
    radial-gradient(circle at 74% 32%, color-mix(in srgb, var(--theme-border) 22%, transparent), transparent 0.13rem),
    radial-gradient(circle at 44% 76%, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 0.12rem),
    radial-gradient(ellipse at center, transparent 38%, rgba(2, 8, 18, 0.5) 100%);
}

body[data-theme] .cabinet {
  border-inline-color: color-mix(in srgb, var(--theme-cabinet-2) 78%, #000);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 12%, transparent 88%, rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, var(--theme-cabinet-1) 0%, var(--theme-cabinet-2) 38%, var(--theme-cabinet-3) 100%);
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--theme-border) 34%, transparent),
    inset 0 0 38px rgba(0, 0, 0, 0.7),
    0 0 54px rgba(0, 0, 0, 0.68);
}

.corner-tools {
  position: absolute;
  top: clamp(18px, 4vw, 26px);
  right: clamp(14px, 3vw, 20px);
  z-index: 14;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.corner-action,
.corner-tools .settings-panel summary {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 34px;
  padding: 0 10px;
  border: 2px solid var(--theme-hot);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--theme-hot), var(--theme-accent-2));
  color: var(--theme-dark);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    0 3px 0 color-mix(in srgb, var(--theme-bg-1) 70%, #000),
    0 0 12px color-mix(in srgb, var(--theme-lamp) 42%, transparent);
}

.corner-tools .settings-toggle {
  width: 42px;
  min-width: 42px;
  padding: 0;
  border: 2px solid rgba(255, 211, 91, 0.54);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffd36c, #e29b14);
  box-shadow:
    inset 0 -3px 0 rgba(95, 44, 0, 0.34),
    0 3px 0 #64120d,
    0 0 10px rgba(255, 218, 77, 0.36);
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 18px;
  height: 2.5px;
  border-radius: 999px;
  background: #421008;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  content: "";
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
  position: absolute;
  left: 0;
}

.hamburger-icon::before {
  top: -7px;
}

.hamburger-icon::after {
  top: 7px;
}

.corner-action:active,
.corner-tools .settings-panel summary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 1px 0 color-mix(in srgb, var(--theme-bg-1) 70%, #000),
    0 0 10px color-mix(in srgb, var(--theme-lamp) 36%, transparent);
}

.corner-tools .settings-panel {
  position: relative;
  margin: 0;
  border: 0;
  background: transparent;
}

.corner-tools .settings-panel summary {
  list-style: none;
}

.corner-tools .settings-panel summary::-webkit-details-marker {
  display: none;
}

.corner-tools .settings-form {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(88vw, 330px);
  max-height: calc(100dvh - 76px);
  overflow: auto;
  padding: 10px;
  border: 2px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--theme-lamp) 20%, transparent), transparent 45%),
    color-mix(in srgb, var(--theme-panel) 94%, #000);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.42),
    inset 0 0 18px color-mix(in srgb, var(--theme-lamp) 12%, transparent);
}

.theme-picker {
  display: grid;
  grid-template-columns: auto repeat(4, 32px);
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
}

.theme-picker legend {
  grid-column: 1;
  padding: 0;
  color: var(--theme-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.theme-swatch {
  width: 32px;
  height: 32px;
  min-width: 0;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.18),
    0 0 0 0 transparent;
}

.theme-swatch.selected {
  border-color: #fff;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.12),
    0 0 0 3px color-mix(in srgb, var(--theme-lamp) 78%, transparent),
    0 0 16px color-mix(in srgb, var(--theme-lamp) 74%, transparent);
}

.theme-blue {
  background: linear-gradient(135deg, #75e9ff, #1688ad 58%, #061923);
}

.theme-green {
  background: linear-gradient(135deg, #a7ffd0, #16a66b 58%, #051d17);
}

.theme-pink {
  background: linear-gradient(135deg, #ffc4e4, #d4509b 58%, #1f0a19);
}

.theme-purple {
  background: linear-gradient(135deg, #d6c4ff, #7754d6 58%, #120b2a);
}

body[data-theme] .top-marquee,
body[data-theme] .playfield,
body[data-theme] .settings-panel {
  border-color: color-mix(in srgb, var(--theme-border) 72%, transparent);
}

body[data-theme] .top-marquee {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-hot) 20%, transparent), transparent 34%),
    var(--theme-panel);
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--theme-lamp) 16%, transparent);
}

body[data-theme] .title-strip h1 {
  color: var(--theme-text);
  text-shadow:
    0 2px 0 color-mix(in srgb, var(--theme-bg-1) 80%, #000),
    0 0 12px color-mix(in srgb, var(--theme-lamp) 86%, transparent),
    0 0 22px color-mix(in srgb, var(--theme-accent) 58%, transparent),
    0 0 35px color-mix(in srgb, var(--theme-lamp) 50%, transparent);
  animation: titleGlowTheme 3s ease-in-out infinite;
}

@keyframes titleGlowTheme {
  0% {
    text-shadow:
      0 2px 0 color-mix(in srgb, var(--theme-bg-1) 80%, #000),
      0 0 12px var(--theme-lamp),
      0 0 22px var(--theme-accent),
      0 0 35px var(--theme-lamp);
  }
  25% {
    text-shadow:
      0 2px 0 color-mix(in srgb, var(--theme-bg-1) 80%, #000),
      0 0 18px var(--theme-hot),
      0 0 30px var(--theme-accent),
      0 0 45px var(--theme-hot);
  }
  50% {
    text-shadow:
      0 2px 0 color-mix(in srgb, var(--theme-bg-1) 80%, #000),
      0 0 12px var(--theme-accent),
      0 0 22px var(--theme-lamp),
      0 0 35px var(--theme-accent);
  }
  75% {
    text-shadow:
      0 2px 0 color-mix(in srgb, var(--theme-bg-1) 80%, #000),
      0 0 18px var(--theme-accent),
      0 0 30px var(--theme-hot),
      0 0 45px var(--theme-accent);
  }
  100% {
    text-shadow:
      0 2px 0 color-mix(in srgb, var(--theme-bg-1) 80%, #000),
      0 0 12px var(--theme-lamp),
      0 0 22px var(--theme-accent),
      0 0 35px var(--theme-lamp);
  }
}

body[data-theme] .mini-bulb {
  background: radial-gradient(circle, #fff 0 18%, var(--theme-hot) 25% 48%, var(--theme-cabinet-1) 72%);
  box-shadow:
    0 0 10px var(--theme-lamp),
    0 0 22px color-mix(in srgb, var(--theme-lamp) 78%, transparent);
}

body[data-theme] .scorebox,
body[data-theme] .multiplier-tube,
body[data-theme] .message-line {
  border-color: color-mix(in srgb, var(--theme-border) 82%, transparent);
  background: var(--theme-panel);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--theme-lamp) 14%, transparent);
}

body[data-theme] .score-label,
body[data-theme] .multiplier-tube span,
body[data-theme] .bet-meta,
body[data-theme] .settings-panel summary {
  color: var(--theme-muted);
}

body[data-theme] .led-display,
body[data-theme] #multiplierDisplay {
  color: var(--theme-led);
  text-shadow:
    0 0 4px var(--theme-led),
    0 0 10px color-mix(in srgb, var(--theme-led) 86%, transparent),
    0 0 22px color-mix(in srgb, var(--theme-accent-2) 56%, transparent);
}

body[data-theme] .playfield {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-hot) 18%, transparent), transparent 30%),
    linear-gradient(180deg, var(--theme-panel-2), var(--theme-panel));
}

body[data-theme] .lamp-track {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--theme-lamp) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--theme-panel) 82%, #000);
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--theme-lamp) 22%, transparent),
    0 0 22px rgba(0, 0, 0, 0.44);
}

body[data-theme] .lamp-slot,
body[data-theme] .bet-card {
  border-color: color-mix(in srgb, var(--theme-border) 68%, transparent);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--theme-hot) 16%, transparent), transparent 42%),
    linear-gradient(180deg, var(--theme-panel-2), var(--theme-panel));
}

body[data-theme] .lamp-slot::before {
  background: color-mix(in srgb, var(--theme-panel-2) 72%, #000);
}

body[data-theme] .lamp-slot.active,
body[data-theme] .bet-card.selected {
  border-color: var(--theme-hot);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--theme-hot) 44%, transparent), transparent 52%),
    linear-gradient(180deg, var(--theme-cabinet-1), color-mix(in srgb, var(--theme-panel) 70%, #000));
  box-shadow:
    0 0 12px var(--theme-lamp),
    0 0 28px color-mix(in srgb, var(--theme-lamp) 86%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

body[data-theme] .lamp-slot.active::before,
body[data-theme] .lamp-slot.bursting::before {
  background: radial-gradient(circle, #fff 0 18%, var(--theme-hot) 28% 50%, var(--theme-accent-2) 78%);
  box-shadow:
    0 0 9px var(--theme-lamp),
    0 0 18px color-mix(in srgb, var(--theme-lamp) 92%, transparent);
}

body[data-theme] .lamp-slot.luck {
  border-color: var(--theme-accent);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-accent) 38%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent-2) 36%, var(--theme-panel-2)), var(--theme-panel));
}

body[data-theme] .lamp-slot.luck .slot-symbol {
  color: var(--theme-hot);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--theme-accent) 96%, transparent),
    0 2px 0 color-mix(in srgb, var(--theme-bg-2) 80%, #000);
}

body[data-theme] .center-crest {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--theme-lamp) 28%, transparent), transparent 42%),
    linear-gradient(180deg, var(--theme-panel-2), var(--theme-panel));
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.68),
    0 0 20px color-mix(in srgb, var(--theme-lamp) 22%, transparent);
}

body[data-theme] .crest-art {
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--theme-lamp) 52%, transparent))
    saturate(1.08);
}

body[data-theme] #crestGlow stop:nth-child(1),
body[data-theme] #wingGold stop:nth-child(1) {
  stop-color: var(--theme-hot);
}

body[data-theme] #crestGlow stop:nth-child(2) {
  stop-color: var(--theme-accent-2);
}

body[data-theme] #crestGlow stop:nth-child(3) {
  stop-color: color-mix(in srgb, var(--theme-panel) 80%, #000);
}

body[data-theme] #wingGold stop:nth-child(2) {
  stop-color: var(--theme-accent);
}

body[data-theme] #wingGold stop:nth-child(3) {
  stop-color: var(--theme-cabinet-2);
}

body[data-theme] .crest-art circle,
body[data-theme] .crest-art path {
  stroke: color-mix(in srgb, var(--theme-bg-1) 82%, #000);
}

body[data-theme] .crest-art path:nth-of-type(3),
body[data-theme] .crest-art path:nth-of-type(8) {
  fill: var(--theme-border);
}

body[data-theme] .crest-art path:nth-of-type(4) {
  fill: var(--theme-cabinet-2);
}

body[data-theme] .crest-art path:nth-of-type(5) {
  fill: var(--theme-hot);
}

body[data-theme] .crest-art circle:nth-of-type(n + 2),
body[data-theme] .crest-art path:nth-of-type(6) {
  fill: var(--theme-panel);
}

body[data-theme] .crest-art path:nth-of-type(7) {
  fill: none;
  stroke: var(--theme-panel);
}

body[data-theme] .bet-value,
body[data-theme] .message-line {
  color: var(--theme-accent);
}

body[data-theme] .message-line {
  text-shadow: 0 0 9px color-mix(in srgb, var(--theme-accent) 76%, transparent);
}

.control-deck {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "bet-plus bet-minus start cashout reset";
}

body[data-theme] .arcade-btn {
  border-color: var(--theme-hot);
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, var(--theme-hot) 20% 42%, var(--theme-cabinet-1) 75%),
    var(--theme-accent-2);
  color: var(--theme-dark);
  box-shadow:
    inset 0 -7px 0 rgba(0, 0, 0, 0.26),
    0 5px 0 color-mix(in srgb, var(--theme-bg-1) 72%, #000),
    0 0 13px color-mix(in srgb, var(--theme-lamp) 42%, transparent);
}

body[data-theme] .arcade-btn:active {
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.24),
    0 1px 0 color-mix(in srgb, var(--theme-bg-1) 72%, #000),
    0 0 10px color-mix(in srgb, var(--theme-lamp) 36%, transparent);
}

body[data-theme] .arcade-btn.primary {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, var(--theme-accent) 20% 44%, var(--theme-cabinet-2) 78%),
    var(--theme-cabinet-1);
  text-shadow: 0 2px 0 color-mix(in srgb, var(--theme-bg-1) 74%, #000);
}

body[data-theme] .arcade-btn.danger {
  color: #fff4df;
  background:
    radial-gradient(circle at 38% 28%, #fff 0 10%, var(--theme-danger-1) 20% 44%, var(--theme-danger-2) 78%),
    var(--theme-danger-2);
  text-shadow: 0 2px 0 rgba(50, 10, 18, 0.82);
}

body[data-theme] .settings-panel {
  background: transparent;
}

body[data-theme] .setting-row span,
body[data-theme] .recharge-row span,
body[data-theme] .item-setting-row span,
body[data-theme] .confirm-box p {
  color: var(--theme-muted);
}

body[data-theme] .settings-form input {
  border-color: color-mix(in srgb, var(--theme-border) 74%, transparent);
  background: var(--theme-panel);
  color: var(--theme-text);
}

body[data-theme] .small-btn {
  border-color: var(--theme-hot);
  background: linear-gradient(180deg, var(--theme-hot), var(--theme-cabinet-1));
  color: var(--theme-dark);
}

body[data-theme] .small-btn.ghost {
  background: linear-gradient(180deg, var(--theme-panel-2), var(--theme-panel));
  color: var(--theme-muted);
}

body[data-theme] .small-btn.danger {
  background: linear-gradient(180deg, var(--theme-danger-1), var(--theme-danger-2));
  color: #fff4df;
}

body[data-theme] .confirm-modal {
  background: rgba(2, 8, 18, 0.74);
}

body[data-theme] .confirm-box {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-lamp) 24%, transparent), transparent 55%),
    var(--theme-panel);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--theme-lamp) 42%, transparent),
    inset 0 0 24px rgba(0, 0, 0, 0.58);
}

body[data-theme] .confirm-box h2 {
  color: var(--theme-text);
}

body[data-theme] .flash-layer {
  background: var(--theme-hot);
}

body[data-theme] .corner-tools .settings-panel summary {
  color: var(--theme-dark);
}

@media (max-width: 380px) {
  .corner-action,
  .corner-tools .settings-panel summary {
    min-width: 42px;
    min-height: 31px;
    padding-inline: 8px;
    font-size: 0.72rem;
  }

  .corner-tools {
    gap: 5px;
  }

  .control-deck {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* 手机屏幕适配 */
@media (max-width: 360px) {
  .cabinet {
    padding: 6px;
  }

  .title-strip h1 {
    font-size: clamp(1rem, 6vw, 1.3rem);
  }

  .scoreboard {
    gap: 4px;
  }

  .led-display {
    font-size: clamp(0.7rem, 4vw, 0.9rem);
  }

  .arcade-btn {
    font-size: clamp(0.5rem, 2.2vw, 0.72rem);
  }

  .control-deck {
    gap: 4px;
  }

  .bet-panel {
    gap: 4px;
  }

  .bet-card {
    min-height: 60px;
    padding: 4px;
  }

  .bet-symbol {
    font-size: clamp(0.8rem, 4vw, 1.1rem);
  }

  .bet-meta,
  .bet-value {
    font-size: clamp(0.55rem, 2.5vw, 0.68rem);
  }

  .slot-symbol {
    font-size: clamp(0.6rem, 4vw, 1rem);
  }

  .corner-tools {
    top: clamp(12px, 3vw, 18px);
    right: clamp(10px, 2.5vw, 14px);
  }
}

@media (max-height: 680px) {
  .cabinet {
    padding-block: 5px;
  }

  .top-marquee {
    padding-block: 5px 6px;
  }

  .title-strip {
    min-height: 28px;
  }

  .playfield {
    margin-top: 5px;
    padding: 4px;
  }

  .bet-panel {
    margin-top: 5px;
  }

  .bet-card {
    min-height: 55px;
    padding-block: 3px;
  }

  .control-deck,
  .message-line {
    margin-top: 5px;
  }

  .message-line {
    padding-block: 4px;
  }

  .corner-tools {
    top: clamp(10px, 2.5vw, 16px);
  }
}

@media (max-height: 600px) {
  .cabinet {
    padding-block: 4px;
  }

  .top-marquee {
    padding-block: 4px 5px;
  }

  .title-strip {
    min-height: 24px;
  }

  .playfield {
    margin-top: 4px;
    padding: 3px;
  }

  .bet-panel {
    margin-top: 4px;
  }

  .bet-card {
    min-height: 50px;
    padding-block: 2px;
  }

  .control-deck,
  .message-line {
    margin-top: 4px;
  }

  .message-line {
    padding-block: 3px;
  }

  .arcade-btn {
    font-size: clamp(0.45rem, 2vw, 0.65rem);
  }
}

@media (max-width: 320px) {
  .cabinet {
    padding: 4px;
  }

  .scoreboard {
    flex-direction: column;
    gap: 3px;
  }

  .arcade-btn {
    font-size: clamp(0.4rem, 1.8vw, 0.6rem);
  }

  .control-deck {
    gap: 3px;
  }

  .bet-card {
    min-height: 50px;
  }

  .corner-tools {
    top: clamp(8px, 2vw, 12px);
    right: clamp(8px, 2vw, 10px);
  }

  .corner-tools .settings-toggle {
    width: 36px;
    min-width: 36px;
  }
}