/* Neon City visual layer. Game math and reel behavior remain unchanged. */
:root {
  --bg: #100916;
  --panel: #17101f;
  --panel2: #3f1836;
  --ink: #fff8fc;
  --muted: #d9bccc;
  --accent: #ee6aaa;
  --accent-soft: #ffc0da;
  --violet: #9a5cff;
  --violet-soft: #d0afff;
  --gold: #ffd58a;
  --line: #9d547d;
  --loss: #ef9aa7;
  --panel-fill: linear-gradient(180deg, #4d1738f2, #17101ff2);
  --ball-mark: url("../../public/assets/wild/wild-display.png");
}

html,
body {
  background:
    linear-gradient(180deg, #1209188f 0%, #180d2480 44%, #09050de0 100%),
    url("../../public/assets/wild/background.png") center / cover fixed,
    #100916;
}

.game {
  background: linear-gradient(90deg, #16091a70, transparent 24% 76%, #16091a70);
}

.courtside-layout .slotStage .cabinet {
  overflow: visible !important;
}

/* The supplied frame has opaque reel bays, so it sits behind the live symbols. */
.courtside-layout .slotStage .reelFrame {
  /* Inner aperture of the 1448 x 1086 frame artwork. */
  --idol-reel-inset: 16.4% 7% 20.4%;
}

.courtside-layout .slotStage .reelFrame::before {
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url("../../public/assets/wild/slot-frame.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 16px 28px #0009) saturate(1.08) !important;
}

.slotStage .reelFrame::after {
  content: none !important;
  display: none !important;
}

.slotStage .gameLogo {
  display: block;
  position: absolute;
  z-index: 52;
  top: -3%;
  left: 27%;
  width: 46%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px #0009);
}

.slotStage .reels {
  position: relative !important;
  z-index: 2 !important;
  background: #100c10d9 !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 32px #000b, 0 8px 24px #0008 !important;
}

.courtside-layout .slotStage .reels,
.courtside-layout .slotStage .reelGlass {
  position: absolute !important;
  inset: var(--idol-reel-inset) !important;
  width: auto !important;
  height: auto !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

.slotStage .reel {
  background: linear-gradient(90deg, #0d0910e8, #21131ce0 50%, #0d0910e8) !important;
  border-color: #b86c8d75 !important;
}

.slotStage .cell {
  background: radial-gradient(circle at 50% 42%, #59223b40, #0e0a0f20 72%) !important;
  border-color: #d28aa34d !important;
}

.slotStage .cell .symImg {
  width: 93% !important;
  height: 93% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 8px #000b) !important;
}

.slotStage .cell[data-id="scatter"]::after {
  content: none !important;
}

.slotStage .cell[data-id="wild"] .symImg {
  filter: drop-shadow(0 0 12px #ff77bdbd) drop-shadow(0 5px 7px #0009) !important;
}

.slotStage .cell.winner {
  background: radial-gradient(circle, #ff71b658, #ffd58a17 68%) !important;
  box-shadow: inset 0 0 0 2px #ffd58a, inset 0 0 25px #ef63aa55, 0 0 18px #ff9dcc75 !important;
}

.slotStage .cell.winner .symImg {
  filter: drop-shadow(0 0 14px #ff8bc9) brightness(1.1) !important;
}

.slotHeader #languageIcon,
.slotHeader #soundBtn img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: none !important;
}

.slotHeader .headerActions,
.slotHeader .balancePlaque,
.controlDeck,
.controlDeck::before {
  border-color: #c36a99 !important;
  background: linear-gradient(135deg, #65234c, #1a111f 20%, #100d17 78%, #592044) !important;
  box-shadow: inset 0 0 0 2px #24101d, inset 0 0 0 3px #ffd3e355, 0 8px 22px #0009 !important;
}

.spinBtn {
  background: radial-gradient(circle at 36% 28%, #ff7fbd, #c72f77 60%, #5f123b) !important;
  border-color: #ffd58a !important;
  box-shadow: inset 0 0 0 3px #5b1538, inset 0 0 0 5px #ffd1e270, 0 0 0 3px #21101b, 0 0 0 6px #d55b93, 0 0 24px #ef5fa86e !important;
}

.balancePlaque img {
  filter: drop-shadow(0 0 9px #ff80b678) !important;
}

.resultPopup .resultSigil {
  background: url("../../public/assets/wild/wild-display.png") center / contain no-repeat !important;
}

.resultPopup .resultPopupCard {
  border-color: #ef78ad !important;
  background: radial-gradient(ellipse at 50% 0, #c13c7c66, transparent 70%), linear-gradient(#3e1830, #100c16) !important;
  box-shadow: inset 0 0 0 4px #180d15, inset 0 0 0 5px #da78a7, 0 0 34px #ef5fa84f, 0 16px 45px #000b !important;
}

.resultBrand,
.pickerKicker {
  color: #f7a8cc !important;
}

.ledgerModal .ledgerCard,
.slotStage .spinPanel {
  background: linear-gradient(180deg, #4d1738f5, #120d1cf7) !important;
  border: 2px solid #c96f9e !important;
  border-radius: 22px !important;
  box-shadow: inset 0 0 0 3px #1a0d17, 0 18px 55px #000b !important;
}

.ledgerModal .ledgerCard::before {
  border: 0 !important;
}

/* Side controls share the reel aperture's center: (16.4% + 79.6%) / 2. */
@media (min-width: 1181px) and (pointer: fine), (min-width: 1367px) {
  .courtside-layout .slotMachine {
    width: min(1900px, 100%, calc((100dvh - 210px) * 1.6 + 268px));
  }

  .courtside-layout .cabinet {
    grid-template-columns: 96px minmax(0, 1fr) 132px;
  }

  .courtside-layout .slotHeader,
  .courtside-layout .spinActions {
    top: -2%;
    align-self: center;
    justify-self: center;
    width: auto;
  }

  .courtside-layout .spinActions {
    gap: 18px;
  }

  .courtside-layout .glassCircle,
  .courtside-layout .spinActions > button,
  .courtside-layout .spinActions .autoButton {
    width: 84px;
    height: 84px;
    gap: 5px;
  }

  .courtside-layout .glassCircle svg,
  .courtside-layout .spinActions > button svg {
    width: 30px;
    height: 30px;
  }

  .courtside-layout .spinActions > button small {
    font-size: 12px;
  }

  .courtside-layout .spinActions > button b {
    font-size: 14px;
  }

  .courtside-layout .spinActions .spinBtn {
    width: 128px;
    height: 128px;
  }

  .courtside-layout .spinActions .spinBtn::before {
    font-size: 52px;
  }

  .courtside-layout .spinActions .spinBtn span {
    font-size: 17px;
  }

  .courtside-layout .controlDeck {
    width: calc(100% - 268px);
  }
}

@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
  html,
  body {
    background-attachment: scroll;
  }

  .slotStage .gameLogo {
    top: -28%;
    left: 18%;
    width: 64%;
  }
}

@media (max-width: 767px) {
  .game.courtside-layout {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .courtside-layout .slotMachine,
  .courtside-layout .slotStage,
  .courtside-layout .cabinet,
  .courtside-layout .slotStage .reelFrame,
  .courtside-layout .slotStage .reels,
  .courtside-layout .slotStage .reel,
  .courtside-layout .slotStage .cell {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .courtside-layout .slotMachine {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .courtside-layout .slotStage,
  .courtside-layout .cabinet {
    width: 100% !important;
  }

  .slotStage .gameLogo {
    top: -25%;
    left: 8%;
    width: 84%;
  }

}

/* Shared dialog language: neon glass, magenta trim and violet bloom. */
.controlPicker,
.ledgerModal {
  background: radial-gradient(circle at 50% 28%, #68244766, transparent 38%), #08050ddd !important;
  backdrop-filter: blur(14px) saturate(.8);
}

.pickerCard {
  position: relative;
  width: min(92vw, 500px);
  padding: 34px;
  border: 1px solid #ffb3d2 !important;
  border-radius: 26px !important;
  color: #fff8fc;
  background:
    radial-gradient(circle at 50% -12%, #ff76b43d, transparent 45%),
    linear-gradient(155deg, #501b3c 0%, #251224 48%, #100c17 100%) !important;
  box-shadow:
    inset 0 0 0 3px #170b15,
    inset 0 0 0 4px #e681ad55,
    0 0 44px #ee61a13d,
    0 28px 80px #000c !important;
}

.pickerCard::before,
.pickerCard::after {
  content: "✦";
  position: absolute;
  top: 21px;
  color: #ffd58a;
  font-size: 15px;
  text-shadow: 0 0 12px #ff7fbb;
}

.pickerCard::before { left: 22px; }
.pickerCard::after { right: 22px; }
.pickerKicker { color: #f6a6ca !important; letter-spacing: .24em; }
.pickerCard h2 { color: #fff4d5; text-shadow: 0 0 15px #ff6eae66; }
.pickerCard p { color: #dabdcd; }
.pickerOptions { gap: 11px; }
.pickerCard button {
  border-color: #a95b83 !important;
  color: #f8dce9 !important;
  background: linear-gradient(145deg, #311a2d, #171421) !important;
  box-shadow: inset 0 1px #ffffff0d;
}
.pickerCard button:hover {
  border-color: #ffd1e2 !important;
  background: linear-gradient(145deg, #662346, #2a1727) !important;
  box-shadow: 0 0 17px #ef6ca644 !important;
}
.pickerCard button.selected {
  border-color: #ffd58a !important;
  color: #fff !important;
  background: linear-gradient(145deg, #ee6aaa, #8c235a) !important;
  box-shadow: inset 0 0 0 1px #ffdbe988, 0 0 20px #ef6aa866 !important;
}
.pickerCard .pickerSelection { color: #ffd58a; text-shadow: 0 0 10px #ed6ca766; }
.pickerActions { border-top-color: #dc7ca744; }
#pickerConfirm {
  border-color: #ffd58a !important;
  background: linear-gradient(145deg, #f06caa, #9c285f) !important;
}

/* Spin history follows the fuller reference layout without depending on artwork. */
.ledgerModal .ledgerCard {
  container-type: inline-size;
  position: relative;
  display: block;
  width: min(1120px, 96vw, calc((100dvh - 28px) * 1.42)) !important;
  height: auto !important;
  max-height: calc(100dvh - 28px) !important;
  aspect-ratio: 1.42 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #db79a7 !important;
  border-radius: 32px !important;
  color: #fff5fb;
  background:
    radial-gradient(circle at 50% -20%, #ff76b43b, transparent 48%),
    linear-gradient(155deg, #4d1738 0%, #241121 48%, #100b16 100%) !important;
  box-shadow: inset 0 0 0 5px #160a14, inset 0 0 0 6px #ffd3e34a, 0 0 55px #ee63a044, 0 28px 90px #000d !important;
}

.ledgerModal .ledgerCard::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid #ffd58a55 !important;
  border-radius: 22px;
  background: none !important;
}

.ledgerModal .ledgerCard::after {
  content: "✦  WILD WEST FORTUNE  ✦";
  position: absolute;
  z-index: 2;
  top: 4.3%;
  left: 50%;
  translate: -50% 0;
  color: #f4a5c8;
  font: 800 clamp(8px, 1cqw, 11px)/1 var(--ui-font);
  letter-spacing: .24em;
  white-space: nowrap;
}

.ledgerModal .ledgerCard h2 {
  position: absolute !important;
  z-index: 2;
  inset: 8% 28% auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #fff0c6 !important;
  font: 850 clamp(22px, 3.1cqw, 35px)/1.15 var(--ui-font) !important;
  text-shadow: 0 0 17px #ff71ad77 !important;
}

.ledgerModal .ledgerClose {
  position: absolute !important;
  z-index: 4 !important;
  inset: 4.5% 3.5% auto auto !important;
  width: clamp(44px, 6.5cqw, 68px) !important;
  height: clamp(44px, 6.5cqw, 68px) !important;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #ffd58a !important;
  border-radius: 14px !important;
  color: #fff4d0 !important;
  background: linear-gradient(145deg, #a72b65, #48152f) !important;
  box-shadow: inset 0 0 0 3px #210c1b, 0 0 18px #ef6ca84a !important;
}
.ledgerModal .ledgerClose svg { visibility: visible !important; }

.ledgerModal .ledgerNavigation {
  position: absolute !important;
  z-index: 2;
  inset: 15% 10% auto !important;
  height: 8.5% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #b85f8d !important;
  border-radius: 13px !important;
  background: linear-gradient(90deg, #241323, #4a1938, #241323) !important;
  box-shadow: inset 0 0 16px #0008;
}
.ledgerModal .ledgerNavigation button {
  width: 9% !important;
  min-width: 44px;
  height: 100% !important;
  color: #ffd58a !important;
  font-size: clamp(23px, 3cqw, 34px) !important;
  background: #140d18aa !important;
  border: 0 !important;
  border-radius: 12px !important;
}
.ledgerModal .ledgerNavigation span {
  align-self: center !important;
  margin: 0 !important;
  color: #fff0c4 !important;
  font-size: clamp(10px, 1.3cqw, 14px) !important;
}
.ledgerModal .ledgerStatus {
  position: absolute !important;
  z-index: 3;
  inset: 20.2% 20% auto !important;
  margin: 0 !important;
  color: #e0bfd0 !important;
  font-size: clamp(9px, 1.05cqw, 12px) !important;
}
.ledgerModal #ledgerBody { display: contents !important; }
.ledgerModal .ledgerSummary {
  position: absolute !important;
  z-index: 2;
  inset: 26.5% 10% auto !important;
  height: 12% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.ledgerModal .ledgerSummary > div {
  display: grid;
  place-content: center;
  min-width: 0;
  padding: 8px !important;
  border: 1px solid #b75e8a !important;
  border-radius: 14px;
  background: linear-gradient(150deg, #461a37, #17101d) !important;
}
.ledgerModal .ledgerSummary span { color: #debccc !important; }
.ledgerModal .ledgerSummary strong,
.ledgerModal .ledgerSummary b { color: #ffd58a !important; }

.ledgerModal .ledgerScroll {
  position: absolute !important;
  z-index: 2;
  inset: 41% 10% 18% !important;
  padding: 8px 10px !important;
  overflow: auto !important;
  border: 1px solid #a75380 !important;
  border-radius: 12px;
  background: #0e0b14b8;
  scrollbar-color: #e16aa3 #21101e !important;
}
.ledgerModal .ledgerStats { margin: 0 0 5px !important; }
.ledgerModal .ledgerStats span,
.ledgerModal .ledgerTable caption,
.ledgerModal .ledgerNote { color: #d8b9c9 !important; }
.ledgerModal .ledgerStats b { color: #fff0cf !important; }
.ledgerModal .ledgerTableWrap { margin: 0 !important; border: 0 !important; background: #0a0a11c9 !important; }
.ledgerModal .ledgerTable thead th { color: #ffd58a !important; background: #4b1a39 !important; border-color: #b95e8b66 !important; }
.ledgerModal .ledgerTable td,
.ledgerModal .ledgerTable tbody th { border-color: #a7557d38 !important; }
.ledgerModal .ledgerTable tbody tr:nth-child(even) { background: #e96ba608 !important; }
.ledgerModal .ledgerBalance { color: #f8dce8 !important; }
.ledgerModal .ledgerActions {
  position: absolute !important;
  z-index: 2;
  inset: auto 10% 6% !important;
  height: 8% !important;
  margin: 0 !important;
}
.ledgerModal .ledgerActions button {
  min-height: 44px;
  border: 1px solid #ffd58a !important;
  border-radius: 13px !important;
  color: #fff6dc !important;
  background: linear-gradient(145deg, #e75f9e, #81204f) !important;
  box-shadow: inset 0 0 0 2px #45132e, 0 0 18px #ed66a044 !important;
}

@media (max-width: 600px), (max-height: 560px) {
  .pickerCard { padding: 26px 22px; border-radius: 20px !important; }
  .pickerOptions button { min-height: 58px; }
  .ledgerModal .ledgerCard {
    width: calc(100vw - 18px) !important;
    height: calc(100dvh - 18px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
  }
  .ledgerModal .ledgerCard::after { top: 3%; }
  .ledgerModal .ledgerCard h2 { inset: 7% 20% auto !important; font-size: 22px !important; }
  .ledgerModal .ledgerClose { top: 3% !important; right: 3% !important; }
  .ledgerModal .ledgerNavigation { inset: 13% 4% auto !important; height: 8% !important; }
  .ledgerModal .ledgerStatus { inset: 18% 14% auto !important; }
  .ledgerModal .ledgerSummary { inset: 23% 4% auto !important; height: 13% !important; gap: 5px !important; }
  .ledgerModal .ledgerSummary > div { padding: 5px 2px !important; border-radius: 9px; }
  .ledgerModal .ledgerSummary span { font-size: 8px !important; }
  .ledgerModal .ledgerSummary strong,
  .ledgerModal .ledgerSummary b { font-size: clamp(12px, 4vw, 17px) !important; }
  .ledgerModal .ledgerScroll { inset: 39% 4% 17% !important; }
  .ledgerModal .ledgerActions { inset: auto 4% 5% !important; height: 8% !important; }
}

/* Unified Neon City chrome for controls, pickers, history and Free Spins. */
.courtside-layout .glassCircle,
.courtside-layout .spinActions > button {
  border-color: #ff54dfcc !important;
  color: #fff8ff !important;
  background:
    radial-gradient(circle at 32% 22%, #ff57dd42, transparent 42%),
    linear-gradient(145deg, #35105be8, #10102eea 56%, #071d35ed) !important;
  box-shadow:
    inset 0 0 0 2px #0b061b,
    inset 0 0 0 3px #25dfff38,
    inset 0 0 16px #6e36ff55,
    0 0 18px #ff36d338,
    0 8px 24px #0008 !important;
}

.courtside-layout .glassCircle:hover,
.courtside-layout .spinActions > button:hover:not(:disabled) {
  border-color: #50e7ff !important;
  background:
    radial-gradient(circle at 34% 22%, #ff63e466, transparent 44%),
    linear-gradient(145deg, #4b1678, #16133e 58%, #073352) !important;
  box-shadow: inset 0 0 14px #32dfff44, 0 0 20px #ff43d766 !important;
}

.courtside-layout button:focus-visible {
  outline-color: #5be8ff !important;
}

.courtside-layout .slotHeader .headerActions {
  border-color: #ff4dd8b8 !important;
  background:
    radial-gradient(circle at 10% 0, #a53fff38, transparent 42%),
    linear-gradient(150deg, #241044f5, #0a0b20f5 62%, #071a2af5) !important;
  box-shadow: inset 0 0 0 1px #36dcff2e, 0 0 26px #d82dff45, 0 16px 44px #000b !important;
}

.courtside-layout .slotHeader .headerActions .iconBtn {
  color: #eeeaff !important;
}

.courtside-layout .slotHeader .headerActions .iconBtn:hover,
.courtside-layout .slotHeader .headerActions .iconBtn.active {
  color: #fff !important;
  background: linear-gradient(90deg, #ff42d12e, #5e36ff2a, #20dfff20) !important;
  box-shadow: inset 3px 0 #ff4cda, inset 0 0 14px #8f40ff28 !important;
}

.courtside-layout .spinActions > button.active {
  color: #fff1a8 !important;
  border-color: #32e4ff !important;
  background: radial-gradient(circle at 34% 22%, #ff4cdb60, transparent 45%), linear-gradient(145deg, #4c1680, #11183f) !important;
  box-shadow: inset 0 0 15px #35dbff48, 0 0 20px #ff42d956 !important;
}

.courtside-layout .spinActions .spinBtn {
  border-color: #65eaff !important;
  background: radial-gradient(circle at 36% 28%, #ff8bec, #ed2fc9 42%, #8d25c7 68%, #23104f) !important;
  box-shadow:
    inset 0 0 0 3px #25072d,
    inset 0 0 0 5px #64eaff80,
    0 0 0 3px #110725,
    0 0 0 6px #ff4ed8,
    0 0 28px #df35ff8c !important;
}

.courtside-layout .spinActions .spinBtn::before {
  color: #fff !important;
  text-shadow: 0 0 10px #54e9ff, 0 0 17px #ff49d9 !important;
}

.courtside-layout .spinActions .spinBtn::after {
  border-color: #53e7ff66 !important;
  border-top-color: #fff !important;
}

.courtside-layout .controlDeck {
  border-color: #ff52d8b8 !important;
  background:
    radial-gradient(circle at 8% 0, #e63cff2c, transparent 35%),
    linear-gradient(120deg, #291040e8, #0c0a1aef 45%, #111031ef 76%, #071b2aeb) !important;
  box-shadow: inset 0 0 0 2px #090616, inset 0 0 0 3px #39dcff30, 0 0 25px #be31ff38, 0 10px 34px #0009 !important;
}

.courtside-layout .controlDeck > :not(:first-child) {
  border-left-color: #b448ff42 !important;
}

.courtside-layout .controlDeck small,
.courtside-layout .controlDeck span {
  color: #c9c1ef !important;
}

.courtside-layout .controlDeck b,
.courtside-layout .controlDeck .deckButton {
  color: #fff2cf !important;
}

.courtside-layout .controlDeck .deckButton:hover:not(:disabled),
.courtside-layout .controlDeck .deckButton.active {
  color: #fff !important;
  background: linear-gradient(145deg, #ff3fcd26, #6534ff22, #22dcff18) !important;
  border-radius: 10px;
  box-shadow: inset 0 0 16px #9f3cff2e, 0 0 12px #ff40d52e !important;
}

.balancePlaque img {
  filter: drop-shadow(0 0 8px #ff4ddb88) drop-shadow(0 0 12px #35dfff44) !important;
}

.controlPicker,
.ledgerModal {
  background: radial-gradient(circle at 50% 25%, #7c28c85c, transparent 42%), #050312e8 !important;
  backdrop-filter: blur(16px) saturate(1.15);
}

.pickerCard {
  border-color: #ff59dd !important;
  color: #fff8ff;
  background:
    radial-gradient(circle at 50% -10%, #d53bff42, transparent 45%),
    linear-gradient(155deg, #2c1050 0%, #14102f 50%, #070b1d 100%) !important;
  box-shadow: inset 0 0 0 3px #090519, inset 0 0 0 4px #44e3ff4f, 0 0 48px #ce35ff55, 0 28px 80px #000d !important;
}

.pickerCard::before,
.pickerCard::after,
.pickerKicker {
  color: #5be8ff !important;
  text-shadow: 0 0 12px #39ddff99 !important;
}

.pickerCard h2 {
  color: #fff0b5 !important;
  text-shadow: 0 0 17px #ff45d58a !important;
}

.pickerCard p { color: #cfc4ed !important; }
.pickerCard button {
  border-color: #8b49d8 !important;
  color: #ece6ff !important;
  background: linear-gradient(145deg, #24143e, #0b1025) !important;
  box-shadow: inset 0 1px #ffffff10, inset 0 0 12px #7029bb22 !important;
}
.pickerCard button:hover {
  border-color: #4ce5ff !important;
  background: linear-gradient(145deg, #492072, #112347) !important;
  box-shadow: 0 0 18px #35ddff55 !important;
}
.pickerCard button.selected,
#pickerConfirm {
  border-color: #6beaff !important;
  color: #fff !important;
  background: linear-gradient(145deg, #ff4bd7, #9a30df 56%, #3431a2) !important;
  box-shadow: inset 0 0 0 1px #ffffff70, 0 0 22px #e23cff77 !important;
}
.pickerCard .pickerSelection {
  color: #fff0a5 !important;
  text-shadow: 0 0 12px #ff42d985 !important;
}
.pickerActions { border-top-color: #a549e755 !important; }

.ledgerModal .ledgerCard {
  border-color: #ff54db !important;
  color: #f8f3ff !important;
  background:
    radial-gradient(circle at 50% -18%, #cf3cff46, transparent 48%),
    linear-gradient(155deg, #2b104e 0%, #14102d 50%, #070a1c 100%) !important;
  box-shadow: inset 0 0 0 5px #080414, inset 0 0 0 6px #42e2ff4a, 0 0 58px #cb37ff5c, 0 28px 90px #000e !important;
}

.ledgerModal .ledgerCard::before { border-color: #50e5ff55 !important; }
.ledgerModal .ledgerCard::after { color: #62eaff !important; text-shadow: 0 0 12px #3ce0ff99; }
.ledgerModal .ledgerCard h2 { color: #fff0ad !important; text-shadow: 0 0 18px #ff46d691 !important; }
.ledgerModal .ledgerClose {
  border-color: #55e7ff !important;
  color: #fff !important;
  background: linear-gradient(145deg, #bd2fbd, #471778) !important;
  box-shadow: inset 0 0 0 3px #130624, 0 0 19px #e23cff68 !important;
}
.ledgerModal .ledgerNavigation {
  border-color: #a74fe0 !important;
  background: linear-gradient(90deg, #12102c, #321354, #12102c) !important;
  box-shadow: inset 0 0 18px #06020da8, 0 0 15px #b931ff28 !important;
}
.ledgerModal .ledgerNavigation button { color: #63eaff !important; background: #090716b8 !important; }
.ledgerModal .ledgerNavigation span { color: #fff0bb !important; }
.ledgerModal .ledgerStatus { color: #cfc3ea !important; }
.ledgerModal .ledgerSummary > div {
  border-color: #8f48cc !important;
  background: linear-gradient(150deg, #31154f, #0c0d20) !important;
  box-shadow: inset 0 0 14px #6b2ba42b !important;
}
.ledgerModal .ledgerSummary span { color: #c9bde9 !important; }
.ledgerModal .ledgerSummary strong,
.ledgerModal .ledgerSummary b { color: #fff0a5 !important; text-shadow: 0 0 10px #ff43d867; }
.ledgerModal .ledgerScroll {
  border-color: #8f47ce !important;
  background: #090817cf !important;
  scrollbar-color: #df42cf #160b27 !important;
}
.ledgerModal .ledgerStats span,
.ledgerModal .ledgerTable caption,
.ledgerModal .ledgerNote { color: #c9bde4 !important; }
.ledgerModal .ledgerStats b { color: #fff2d2 !important; }
.ledgerModal .ledgerTableWrap { background: #070812d9 !important; }
.ledgerModal .ledgerTable thead th {
  color: #5ee9ff !important;
  background: #261143 !important;
  border-color: #9148d466 !important;
}
.ledgerModal .ledgerTable td,
.ledgerModal .ledgerTable tbody th { border-color: #8141bd3d !important; }
.ledgerModal .ledgerTable tbody tr:nth-child(even) { background: #d93aff0a !important; }
.ledgerModal .ledgerBalance { color: #eee7ff !important; }
.ledgerModal .ledgerActions button {
  border-color: #58e8ff !important;
  color: #fff !important;
  background: linear-gradient(145deg, #f343cd, #8729c4 58%, #342779) !important;
  box-shadow: inset 0 0 0 2px #280735, 0 0 19px #d83aff55 !important;
}

.resultPopup.feature .resultPopupCard {
  border-color: #ff57dc !important;
  background: radial-gradient(circle at 50% 0, #e440e85c, transparent 50%), linear-gradient(180deg, #32124ff7, #090719fb) !important;
  box-shadow: inset 0 0 0 2px #61eaff2e, 0 0 34px #d83cff8c !important;
}
.resultPopup.feature .resultAmount {
  color: #fff0a3 !important;
  text-shadow: 0 0 16px #ff43d7, 0 3px 0 #471355 !important;
}
.freeSpinHud {
  border-color: #ff58dc !important;
  color: #f6dfff !important;
  background: linear-gradient(180deg, #41115eed, #160720f5) !important;
  box-shadow: inset 0 0 0 2px #62e9ff24, inset 0 0 18px #8d2ddf55, 0 0 22px #e83dff78 !important;
}
.freeSpinHud strong { color: #fff0a3 !important; text-shadow: 0 0 10px #ff44d8; }
.game.free-spins .reelFrame { filter: drop-shadow(0 0 16px #e33cff73) !important; }

/* Tutorial / paytable follows the same neon cabinet language. */
.rulesModal {
  background: radial-gradient(circle at 50% 24%, #7c28c855, transparent 44%), #050312e8 !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
}

.rulesCard {
  border-color: #ff55dc !important;
  color: #f8f4ff !important;
  background:
    radial-gradient(circle at 50% -10%, #d53bff42, transparent 42%),
    linear-gradient(155deg, #2b104e 0%, #14102d 52%, #070a1c 100%) !important;
  box-shadow:
    inset 0 0 0 3px #080414,
    inset 0 0 0 5px #43e3ff45,
    inset 0 0 48px #090313,
    0 0 52px #cf36ff55,
    0 28px 90px #000e !important;
  scrollbar-color: #e13ed2 #160923;
}

.rulesCard::before {
  background: linear-gradient(90deg, transparent, #ff4cdb 18%, #57e8ff 50%, #ff4cdb 82%, transparent) !important;
  box-shadow: 0 0 13px #d83cff8c;
}

.rulesClose {
  border-color: #56e8ff !important;
  color: #fff !important;
  background: linear-gradient(145deg, #bd2fbd, #471778) !important;
  box-shadow: inset 0 0 0 3px #130624, 0 0 19px #e23cff68 !important;
}

.rulesClose:hover {
  border-color: #fff0a5 !important;
  box-shadow: inset 0 0 0 3px #130624, 0 0 24px #ff42da88 !important;
}

.rulesKicker {
  color: #5ee9ff !important;
  text-shadow: 0 0 12px #3ce0ff88;
}

.rulesTitle {
  color: #fff0aa !important;
  text-shadow: 0 0 17px #ff46d68f, 0 2px 0 #491451 !important;
}

.rulesIntro,
.rulesSection ol,
.rulesSection ul,
.rulesPayoutNote {
  color: #cdc2e7 !important;
}

.rulesGrid { gap: 13px; }
.rulesSection {
  border-color: #8645c7 !important;
  background:
    radial-gradient(circle at 10% 0, #a338e926, transparent 40%),
    linear-gradient(155deg, #23123cdd, #090b1be8) !important;
  box-shadow: inset 0 0 18px #05020cad, inset 0 0 0 1px #36dcff16 !important;
}

.rulesSection h3 {
  color: #ff91eb !important;
  text-shadow: 0 0 10px #ff43d566;
}

.rulesSection.rulesFeature {
  border-color: #ff4ed6 !important;
  box-shadow: inset 0 0 20px #8a2bdd38, 0 0 17px #d838ff22 !important;
}

.rulesPaytable {
  color: #d8cdec !important;
}

.rulesPaytable td,
.symbolPaytable th,
.symbolPaytable td {
  border-bottom-color: #8e47cc40 !important;
}

.symbolPaytable thead th {
  color: #62eaff !important;
  background: linear-gradient(180deg, #371657cc, #17102cbb) !important;
}

.rulesPaytable td:last-child,
.symbolPaytable td,
.rulesScatterArt {
  color: #fff0a4 !important;
}

.rulesSymbol span { color: #e9e1f7 !important; }
.rulesSymbol img,
.rulesScatterArt img {
  filter: drop-shadow(0 0 10px #ff42d55c) drop-shadow(0 4px 6px #000a) !important;
}
.rulesNotice { color: #8f83ad !important; }

/* Win and loss remain distinct while sharing the Neon City palette. */
.resultPopup .resultPopupCard {
  border-color: #ff58dc !important;
  background:
    radial-gradient(ellipse at 50% 0, #d83cff55, transparent 68%),
    repeating-linear-gradient(90deg, #ffffff03 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #2e114e, #090817) !important;
  box-shadow: inset 0 0 0 4px #080414, inset 0 0 0 5px #53e7ff4a, 0 0 36px #d43cff6b, 0 18px 50px #000c !important;
}

.resultPopup .resultPopupCard::before,
.resultPopup .resultPopupCard::after {
  background: linear-gradient(#62eaff, #ff4ed9 50%, #7b31e8) !important;
  box-shadow: 0 0 11px #e13dff !important;
}

.resultPopup .resultSigil {
  filter: drop-shadow(0 0 10px #ff45d77d) drop-shadow(0 0 8px #45e4ff55) !important;
}

.resultBrand {
  color: #5ee9ff !important;
  text-shadow: 0 0 10px #36ddff80;
}

.resultPopup .resultEyebrow {
  color: #ff9beb !important;
  text-shadow: 0 0 12px #ff43d477;
}

.resultPopup .resultDetail { color: #d6cbed !important; }

.resultPopup.win .resultPopupCard {
  border-color: #68eaff !important;
  background:
    radial-gradient(ellipse at 50% 0, #ff43d86b, transparent 68%),
    linear-gradient(155deg, #3a1459, #0a091b) !important;
  box-shadow: inset 0 0 0 4px #080414, inset 0 0 0 5px #64eaff70, 0 0 40px #ff3ed58c, 0 18px 50px #000c !important;
}

.resultPopup.win .resultAmount {
  color: #fff0a0 !important;
  text-shadow: 0 0 12px #ffdf6e88, 0 0 20px #ff43d7a3, 0 3px 0 #4a1455 !important;
}

.resultPopup.win .resultDetail { color: #f3dcff !important; }

.resultPopup.loss .resultPopupCard {
  border-color: #9d4dbd !important;
  background:
    radial-gradient(ellipse at 50% 0, #7f2a9142, transparent 70%),
    linear-gradient(155deg, #21102f, #080713) !important;
  box-shadow: inset 0 0 0 4px #07030e, inset 0 0 0 5px #6e389653, 0 0 24px #8d2bb54f, 0 18px 48px #000d !important;
}

.resultPopup.loss .resultPopupCard::before,
.resultPopup.loss .resultPopupCard::after {
  background: linear-gradient(#b86bd1, #71378f, #3f2355) !important;
  box-shadow: 0 0 7px #8a37a05c !important;
  opacity: .72 !important;
}

.resultPopup.loss .resultSigil {
  filter: grayscale(.28) saturate(.65) drop-shadow(0 0 8px #8d45aa66) !important;
}

.resultPopup.loss .resultEyebrow {
  color: #ca8dde !important;
  text-shadow: 0 0 10px #7e369260 !important;
}

.resultPopup.loss .resultAmount {
  color: #c7b4d5 !important;
  text-shadow: 0 2px 0 #1a0a22, 0 0 13px #74428b52 !important;
}

.resultPopup.loss .resultDetail { color: #9989ae !important; }
.message.win .main { color: #fff0a0 !important; text-shadow: 0 0 16px #ff43d785 !important; }