/* Final hierarchy and feedback pass. Gameplay math and reel data are untouched. */

html,
body {
  background:
    linear-gradient(180deg, #03070bd9 0%, #050a12b8 48%, #02060bf2 100%),
    url("../../public/assets/wild/background.png") center / cover fixed,
    #050a12;
}

.game::before {
  opacity: .64;
  filter: brightness(.78) saturate(.82);
}

.backdropFx {
  opacity: .36;
}

/* Keep the artwork, but let the playable glass carry the visual weight. */
.slotStage .reelFrame::before {
  top: -29% !important;
  left: -6% !important;
  right: -6% !important;
  bottom: -8% !important;
  filter: brightness(.92) saturate(.94) drop-shadow(0 14px 24px #0007);
}

.slotStage .reels {
  box-shadow:
    inset 0 10px 18px #0004,
    inset 0 -10px 20px #0006,
    0 0 0 1px #ffd16d8c,
    0 12px 34px #0008 !important;
}

.slotStage .cell .symImg {
  width: 88% !important;
  height: 88% !important;
  filter: drop-shadow(0 5px 7px #0009) !important;
}

.slotStage .cell[data-id="ruby"] .symImg,
.slotStage .cell[data-id="phantom"] .symImg,
.slotStage .cell[data-id="amethyst"] .symImg,
.slotStage .cell[data-id="scatter"] .symImg {
  width: 84% !important;
  height: 84% !important;
}

.slotStage .cell[data-id="scatter"]::after {
  content: "SCATTER";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6%;
  padding: 2px 6px;
  border: 1px solid #ffe39b;
  border-radius: 999px;
  color: #fff7d6;
  background: linear-gradient(180deg, #8d28cdec, #250834f2);
  box-shadow: 0 0 10px #ef42e89e, inset 0 0 5px #fff4;
  font: 900 clamp(7px, .7vw, 10px)/1 var(--ui-font);
  letter-spacing: .08em;
  transform: translateX(-50%);
}

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

.slotStage .cell[data-id="seven"] .symImg,
.slotStage .cell[data-id="soulOrb"] .symImg {
  width: 90% !important;
  height: 90% !important;
}

.slotStage .cell[data-id="wild"] .symImg {
  width: 92% !important;
  height: 92% !important;
  filter: drop-shadow(0 0 8px #ff762e9c) drop-shadow(0 5px 7px #0009) !important;
  animation: wild-idle 2.8s ease-in-out infinite;
}

.slotStage .reel.stopHit .cell[data-id="wild"] .symImg {
  animation: wild-land .52s cubic-bezier(.2, .8, .2, 1);
}

@keyframes wild-idle {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 7px #ff762e70) drop-shadow(0 5px 7px #0009) !important; }
  50% { transform: scale(1.025); filter: drop-shadow(0 0 13px #ff762eb3) drop-shadow(0 5px 7px #0009) !important; }
}

@keyframes wild-land {
  0% { transform: scale(.86) rotate(-4deg); }
  52% { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Winning symbols stay crisp while the rest of the board recedes. */
.slotStage .reels.win-active .cell:not(.winner):not(.scatter-trigger) {
  filter: saturate(.42) brightness(.5);
  opacity: .68;
  transform: scale(.96);
}

.slotStage .cell.scatter-trigger {
  z-index: 13;
  background: radial-gradient(circle, #e83cff70, #ffd16d18 70%) !important;
  box-shadow: inset 0 0 0 3px #fff2a9, inset 0 0 25px #cf38ff73, 0 0 27px #ff43d99c !important;
  animation: scatter-score .78s cubic-bezier(.2, .8, .2, 1) 2;
}

.slotStage .cell.scatter-trigger .symImg {
  filter: drop-shadow(0 0 18px #ff55df) brightness(1.2) !important;
}

@keyframes scatter-score {
  45% { transform: translateY(-4px) scale(1.11); }
}

.slotStage .cell.winner {
  z-index: 12;
  background: radial-gradient(circle, #ff9b3c66, #ffd16d14 68%) !important;
  box-shadow:
    inset 0 0 0 3px #fff0ad,
    inset 0 0 24px #ff762e66,
    0 0 24px #ffd16d8a !important;
  animation: winner-score .72s cubic-bezier(.2, .8, .2, 1) 2;
}

.slotStage .cell.winner .symImg {
  filter: drop-shadow(0 0 15px #ff762ed1) brightness(1.22) !important;
}

@keyframes winner-score {
  50% { transform: translateY(-3px) scale(1.09); }
}

.paylineGlow {
  stroke-width: 16;
  opacity: .34;
}

.paylinePath {
  stroke-width: 5;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px var(--gold)) !important;
}

.winLineBadge {
  position: absolute;
  z-index: 55;
  left: 50%;
  bottom: 10px;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border: 1px solid #ffd16d;
  border-radius: 999px;
  color: #fff8dd;
  background: #071426e8;
  box-shadow: 0 0 18px #ff762e70;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.92);
  transition: opacity .18s ease, transform .22s ease;
  pointer-events: none;
}

.winLineBadge.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* A short, visual-only final-reel tension cue. */
.reels.anticipating .reel:not(.anticipation) {
  filter: brightness(.68) saturate(.72);
}

.reel.spinning.anticipation {
  z-index: 11;
  border-color: #ffd16d !important;
  box-shadow: inset 0 0 26px #ff762e66, 0 0 22px #ffd16d70 !important;
  animation-duration: .24s !important;
}

.reel.spinning.anticipation::before {
  animation-duration: .28s !important;
}

/* Result language and win amount should read before supporting copy. */
.message.win .main,
.message.big .main {
  letter-spacing: .045em;
}

.message.big .main {
  font-size: clamp(24px, 3vw, 42px);
}

.resultPopup {
  top: 47%;
  width: min(430px, 84%);
}

.resultPopupCard {
  padding: 20px 28px 18px;
  background:
    radial-gradient(circle at 50% 0, #ff762e3d, transparent 46%),
    linear-gradient(180deg, #14263af7, #07101cfb);
}

.resultPopup.feature .resultPopupCard {
  border-color: #ff57dc;
  background: radial-gradient(circle at 50% 0, #e440e85c, transparent 48%), linear-gradient(180deg, #32124ff7, #090719fb);
  box-shadow: inset 0 0 0 2px #fff1, 0 0 32px #d83cff80;
}

.resultPopup.feature .resultAmount {
  color: #fff2a8;
  text-shadow: 0 0 16px #ff43d7, 0 3px 0 #471355;
}

.freeSpinHud {
  position: absolute;
  z-index: 58;
  top: 7%;
  right: 2.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 124px;
  padding: 7px 13px 8px;
  border: 1px solid #ff58dc;
  border-radius: 12px;
  color: #f6dfff;
  background: linear-gradient(180deg, #41115eed, #160720f5);
  box-shadow: inset 0 0 0 2px #fff1, 0 0 20px #e83dff66;
  font: 900 10px/1.2 var(--ui-font);
  letter-spacing: .11em;
  pointer-events: none;
}

.freeSpinHud[hidden] { display: none; }

.freeSpinHud strong {
  margin-top: 3px;
  color: #fff0a7;
  font-size: 13px;
}

.freeSpinHud b { font-size: 20px; }

.game.free-spins .reelFrame {
  filter: drop-shadow(0 0 13px #e33cff73);
}

.resultEyebrow {
  color: #fff0bf;
  font: 900 clamp(17px, 2.1vw, 25px)/1 var(--display-font);
  letter-spacing: .08em;
}

.resultAmount {
  font: 900 clamp(38px, 4.6vw, 60px)/.95 var(--ui-font);
}

.resultDetail {
  font-size: 11px;
  letter-spacing: .1em;
}

#lastWin.active {
  color: #fff4c7;
  text-shadow: 0 0 12px #ff762e8c;
  animation: win-readout-pop .48s cubic-bezier(.2, .8, .2, 1);
}

@keyframes win-readout-pop {
  50% { transform: scale(1.08); }
}

/* Controls: SPIN first, then a legible bet choice and win readout. */
.controlDeck .pillBtn.active {
  border-color: #ffe0a0;
  background: linear-gradient(#d5681f, #84300b);
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff3, 0 0 14px #ff762e80;
}

.controlDeck .pillBtn[aria-pressed="true"]::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 3px auto -5px;
  border-radius: 50%;
  background: #fff2ba;
  box-shadow: 0 0 6px #fff;
}

.linesPlaque .lineValue {
  justify-content: center;
}

.linesPlaque .lineValue b {
  min-width: 0;
  padding-inline: 3px;
}

.autoSlotBtn .autoValue {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.autoSlotBtn .autoValue small {
  color: #d9e6f2;
  font-size: .56em;
  font-weight: 800;
  letter-spacing: .03em;
}

.spinBtn:disabled {
  cursor: not-allowed;
  filter: saturate(.42) brightness(.7);
  opacity: .62;
  box-shadow:
    inset 0 0 0 3px #073355,
    inset 0 0 0 5px #77c4ff40,
    0 0 0 3px var(--panel),
    0 0 0 5px #5f7587;
}

.game.is-spinning .spinBtn:disabled {
  filter: saturate(.9) brightness(.92);
  opacity: .88;
}

.game.is-spinning .spinBtn::after {
  inset: 8px;
  border: 2px dashed #fff0b8;
  box-shadow: inset 0 0 12px #168cff66, 0 0 10px #ff762e70;
  animation: spin-ring 1.15s linear infinite;
}

@keyframes spin-ring {
  to { transform: rotate(1turn); }
}

/* The history summary remains available, but no longer rivals the reels. */
.slotStage .spinPanel .ledgerLiveRows li:nth-child(n + 4) {
  display: none;
}

.slotStage .spinPanel .ledgerLiveEmpty {
  font-size: 11px;
  line-height: 1.4;
}

.slotStage .spinPanel h2 {
  font-size: clamp(14px, 1.15vw, 17px);
}

@media (min-width: 1181px) and (pointer: fine), (min-width: 1367px) {
  .slotMachine {
    width: min(calc(100vw - 28px), 1380px);
    gap: 8px;
    padding-top: 10px;
  }

  .slotHeader {
    min-height: 92px;
  }

  .slotHeader .headerActions {
    width: clamp(210px, 17vw, 270px);
    opacity: .9;
  }

  /* Match the four transparent bays in header-actions-frame.png. */
  .slotHeader .headerActions .iconBtn {
    top: 29.5%;
    width: 18.25%;
    height: 43%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1.25% !important;
    font-size: clamp(15px, 1.18vw, 19px);
    line-height: 1;
  }

  .slotHeader .headerActions .iconBtn svg {
    display: block;
    width: 52%;
    height: 52%;
  }

  .slotHeader .headerActions .iconBtn:nth-child(1) { left: 10.4%; }
  .slotHeader .headerActions .iconBtn:nth-child(2) { left: 30.9%; }
  .slotHeader .headerActions .iconBtn:nth-child(3) { left: 51.4%; }
  .slotHeader .headerActions .iconBtn:nth-child(4) { left: 71.9%; }

  .slotHeader .balancePlaque {
    width: clamp(245px, 19vw, 305px);
    opacity: .92;
  }

  /* Keep both balance lines inside the wallet frame's long display opening. */
  .slotHeader .balancePlaque > div {
    left: 34%;
    right: 10.5%;
    top: 30.5%;
    width: auto;
    height: 39%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
  }

  .slotHeader .balancePlaque span {
    font-size: clamp(8px, .68vw, 11px);
  }

  .slotHeader .balancePlaque b {
    max-width: 100%;
    margin-top: 4px;
    font-size: clamp(15px, 1.28vw, 21px);
    white-space: nowrap;
  }

  .slotStage {
    grid-template-columns: minmax(0, 1fr) 174px;
    gap: 18px;
    padding-top: clamp(82px, 6.5vw, 108px);
  }

  .slotStage .reelFrame {
    width: min(100%, 1010px) !important;
  }

  /* Pull the top and bottom crossbars away from rows one and three. */
  .slotStage .reelFrame::before {
    top: -36% !important;
    left: -7% !important;
    right: -7% !important;
    bottom: -14% !important;
  }

  .slotStage .paylineHint {
    position: relative;
    z-index: 60;
    margin-top: 22px;
  }

  .slotStage .recentPanel.spinPanel {
    width: min(100%, 174px);
    margin-top: 26px;
    padding: 31% 13% 28%;
  }

  .controlDeck {
    margin-top: 0;
  }

  .controlDeck .linesPlaque {
    left: 14.9%;
    width: 5.2%;
  }

  .controlDeck .betPlaque {
    left: 20.2%;
    top: 47.7%;
    width: 18%;
    height: 24.2%;
    padding: 0 .55%;
    flex-direction: row;
    justify-content: flex-start;
    gap: clamp(4px, .55cqw, 8px);
  }

  .controlDeck .betPlaque > span {
    flex: 0 0 auto;
    padding: 0;
    font-size: clamp(8px, .72cqw, 10px);
  }

  .controlDeck .betPlaque .betSelector {
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(2px, .3cqw, 4px);
  }

  .controlDeck .betPlaque .pillBtn {
    height: clamp(24px, 2.05cqw, 30px);
    padding-inline: 1px;
  }

  .controlDeck .winReadout {
    left: 40.5%;
    width: 25.8%;
  }

  .controlDeck .spinBtn {
    left: 83.9%;
    width: 8.1%;
  }

  .controlDeck .linesPlaque > span {
    font-size: clamp(8px, .72cqw, 10px);
  }
}

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

  .slotMachine {
    gap: 9px;
  }

  .slotHeader {
    opacity: .94;
  }

  .balancePlaque {
    min-height: 54px;
  }

  .slotStage {
    padding-top: clamp(58px, 14vw, 138px);
  }

  .slotStage .reelFrame::before {
    top: -27% !important;
    left: -4% !important;
    right: -4% !important;
    bottom: -6% !important;
  }

  .slotStage .reelFrame {
    width: min(100%, 920px) !important;
  }

  .controlDeck {
    border-color: #334d68;
    background: #0b1422e8;
    box-shadow: 0 10px 24px #0007;
  }

  .linesPlaque {
    display: none;
  }
}

@media (max-width: 767px) {
  .slotMachine {
    padding-inline: max(10px, env(safe-area-inset-left));
  }

  .slotHeader {
    gap: 6px;
  }

  .headerActions {
    padding: 3px;
  }

  .balancePlaque {
    min-height: 52px;
    padding-block: 4px;
  }

  .slotStage {
    padding-top: clamp(58px, 15vw, 82px);
  }

  .slotStage .reelFrame {
    width: min(100%, 520px) !important;
  }

  .slotStage .cell .symImg {
    width: 91% !important;
    height: 91% !important;
  }

  .slotStage .paylineHint {
    font-size: 10px;
    line-height: 1.35;
  }

  .slotStage .message {
    min-height: 52px;
    padding-block: 5px;
  }

  .slotStage .message .sub {
    font-size: 11px;
  }

  .controlDeck {
    padding: 9px;
    gap: 7px;
  }

  .betPlaque > span {
    min-width: 30px;
  }

  .controlDeck .pillBtn {
    min-height: 46px;
  }

  .winReadout,
  .maxBetBtn,
  .autoSlotBtn {
    min-height: 58px;
  }

  .controlDeck .spinBtn {
    --spin-padding: 7px;
    width: 104px;
    max-width: 104px;
    margin-block: 8px 4px;
  }

  .resultPopup {
    width: min(360px, 92%);
  }

  .resultPopupCard {
    padding: 16px 18px 15px;
  }

  .resultEyebrow {
    font-size: 20px;
  }

  .resultAmount {
    font-size: clamp(34px, 11vw, 48px);
  }

  .winLineBadge {
    bottom: 6px;
    padding: 5px 9px;
    font-size: 9px;
  }

  .freeSpinHud {
    top: 4%;
    right: 10px;
    min-width: 102px;
    padding: 5px 8px 6px;
    font-size: 8px;
  }

  .freeSpinHud strong { font-size: 10px; }
  .freeSpinHud b { font-size: 16px; }
}

@media (max-width: 380px) {
  .headerActions .iconBtn {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .controlDeck .pillBtn {
    min-width: 40px;
    padding-inline: 2px;
  }

  .autoSlotBtn .autoValue small {
    font-size: .5em;
  }
}

@media (max-height: 600px) and (orientation: landscape) and (max-width: 1180px),
       (max-height: 600px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1366px) {
  .slotStage {
    padding-top: 15px;
  }

  .controlDeck .spinBtn {
    width: 82px;
    max-width: 82px;
  }

  .slotStage .message {
    min-height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slotStage .cell[data-id="wild"] .symImg,
  .slotStage .reel.stopHit .cell[data-id="wild"] .symImg,
  .slotStage .cell.winner,
  .slotStage .cell.scatter-trigger,
  #lastWin.active,
  .game.is-spinning .spinBtn::after {
    animation: none !important;
  }
}