/* Basketball palette shared by the cabinet, controls, dialogs, and effects. */

:root {
  --bg: #070c16;
  --panel: #0b1422;
  --panel2: #16253a;
  --ink: #f4f8ff;
  --muted: #aabbd0;

  --accent: #ff762e;
  --accent-soft: #ffc078;
  --violet: #168cff;
  --violet-soft: #77c4ff;

  --gold: #ffd16d;
  --line: #334d68;
  --loss: #ff9a83;

  --ui-font:
    "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;

  --display-font:
    Impact, "Arial Black", "Noto Sans KR", "Malgun Gothic", sans-serif;

  --panel-fill: linear-gradient(180deg, var(--panel2), var(--panel));

  --panel-shadow: inset 0 1px 0 #ffffff0d, 0 8px 24px #0006;

  --ball-mark: url("../../public/assets/wild/wild-display.png");
}

html,
body {
  background: var(--bg);
  font-family: var(--ui-font);
}

.game {
  background: none;
}

.game::before,
.game::after {
  content: none;
}

.backdropFx,
.bottomForeground {
  display: none;
}

.slotStage {
  grid-template-columns: minmax(0, 1000px) clamp(155px, 13vw, 220px);
  justify-content: center;
}

/* ============================================================
   HOOP FORTUNE — PNG SLOT FRAME
   Replaces the old CSS-generated cabinet/frame
   ============================================================ */


/* ============================================================
   MAIN FRAME CONTAINER
   ============================================================ */

.slotStage .reelFrame {
  position: relative !important;

  width: 100% !important;

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;

  isolation: isolate;
}


/* ============================================================
   PNG FRAME
   ============================================================ */

.slotStage .reelFrame::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  /* Reset the base theme's 26px rotated diamond decoration. */
  width: auto !important;
  height: auto !important;
  transform: none !important;

  top: -32% !important;
  left: -8% !important;
  right: -8% !important;
  bottom: -10% !important;

  background-image: url("../../public/assets/wild/slot-frame.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;

  z-index: 50 !important;
  pointer-events: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   REMOVE OLD FRAME OVERLAY
   ============================================================ */

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

  display: none !important;

  border: 0 !important;

  box-shadow: none !important;
}


/* ============================================================
   REMOVE OLD CSS TITLE
   The PNG already contains:
      후프 포춘
      큰 승리를 노려라
   ============================================================ */

.slotStage .reelFrame .titleArea {
  display: none !important;
}


/* Old title decorations */

.slotStage .reelFrame .titleArea::before,
.slotStage .reelFrame .titleArea::after {
  content: none !important;

  display: none !important;
}


/* Old HTML game title */

.slotStage .reelFrame .gameTitle {
  display: none !important;
}


/* ============================================================
   REMOVE OLD CSS FRAME DECORATIONS
   These are no longer required because the PNG contains them.
   ============================================================ */

.frameCorner,
.frameGuard,
.reelRail,
.reelRailTop,
.reelRailBottom,
.reelRail i,
.slotStage .reelFrame .titleGem {
  display: none !important;
}


/* ============================================================
   REEL AREA
   This is your actual playable 5x3 slot area.
   ============================================================ */

.slotStage .reels {
  position: relative !important;

  z-index: 2 !important;

  width: 100% !important;

  /*
   * Keep the basketball court underneath the symbols.
   */
  background:
    linear-gradient(
      rgba(7, 12, 22, 0.12),
      rgba(7, 12, 22, 0.22)
    ),
    url("../../public/assets/wild/background.png")
      center / cover
      no-repeat
      #8b5b32 !important;

  /*
   * The PNG itself provides the visible outer border,
   * so the reels don't need another large CSS border.
   */
  border: 0 !important;

  outline: 0 !important;

  /*
   * Slight rounding prevents the court background from
   * leaking outside the inner opening.
   */
  border-radius: 3px !important;

  overflow: hidden !important;

  box-shadow:
    inset 0 12px 24px rgba(0, 0, 0, 0.32),
    inset 0 -12px 24px rgba(0, 0, 0, 0.38),
    inset 10px 0 20px rgba(0, 0, 0, 0.16),
    inset -10px 0 20px rgba(0, 0, 0, 0.16) !important;
}


/* ============================================================
   REEL GLASS / SHADOW
   ============================================================ */

.slotStage .reels::before {
  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  z-index: 8 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28),
      transparent 14%,
      transparent 84%,
      rgba(0, 0, 0, 0.35)
    ) !important;

  box-shadow:
    inset 0 10px 18px rgba(0, 0, 0, 0.20),
    inset 0 -10px 18px rgba(0, 0, 0, 0.25) !important;
}


/* Existing spinning light effect */

.slotStage .reels::after {
  pointer-events: none !important;

  z-index: 9 !important;
}


/* ============================================================
   INDIVIDUAL REELS
   ============================================================ */

.slotStage .reel {
  position: relative !important;

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 13, 0.20),
      rgba(5, 8, 13, 0.02) 50%,
      rgba(5, 8, 13, 0.20)
    ) !important;

  /*
   * Thin gold divider between reel columns.
   */
  border-color: rgba(255, 224, 164, 0.26) !important;

  box-shadow:
    inset 5px 0 10px rgba(0, 0, 0, 0.18),
    inset -5px 0 10px rgba(0, 0, 0, 0.18),
    1px 0 0 rgba(255, 229, 182, 0.10) !important;
}


/* ============================================================
   SYMBOL CELLS
   ============================================================ */

.slotStage .cell {
  position: relative !important;

  background: rgba(7, 12, 22, 0.04) !important;

  border-color:
    rgba(255, 241, 199, 0.16) !important;
}


/* ============================================================
   SYMBOL IMAGES
   ============================================================ */

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

  object-fit: contain !important;

  /*
   * Keep symbol artwork crisp without excessive glow.
   */
  filter:
    drop-shadow(
      0 4px 5px rgba(0, 0, 0, 0.55)
    ) !important;

  border-radius: 0 !important;
}


/* ============================================================
   GLASS REFLECTION
   ============================================================ */

.slotStage .reelGlass {
  position: absolute !important;

  inset: 0 !important;

  pointer-events: none !important;

  z-index: 10 !important;

  background:
    linear-gradient(
      105deg,

      transparent 14%,

      rgba(119, 196, 255, 0.045) 20%,

      transparent 28%,

      transparent 67%,

      rgba(255, 255, 255, 0.035) 73%,

      transparent 80%
    ) !important;
}


.slotStage .reelGlass::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 25px rgba(22, 140, 255, 0.045) !important;
}


/* ============================================================
   WINNING SYMBOL
   ============================================================ */

.slotStage .cell.winner {
  background:
    radial-gradient(
      circle,
      rgba(255, 118, 46, 0.26),
      rgba(255, 209, 109, 0.07) 65%
    ) !important;

  box-shadow:
    inset 0 0 0 2px var(--gold),
    inset 0 0 25px rgba(255, 118, 46, 0.24),
    0 0 16px rgba(255, 209, 109, 0.18) !important;
}


.slotStage .cell.winner .symImg {
  filter:
    drop-shadow(
      0 0 12px rgba(255, 118, 46, 0.44)
    )
    brightness(1.12) !important;
}


/* ============================================================
   SPINNING STATE
   ============================================================ */

.slotStage .reels.is-spinning {
  box-shadow:
    inset 0 0 30px rgba(22, 140, 255, 0.18),
    inset 0 12px 24px rgba(0, 0, 0, 0.30),
    inset 0 -12px 24px rgba(0, 0, 0, 0.34) !important;
}


.slotStage .reel.spinning {
  border-color:
    rgba(119, 196, 255, 0.60) !important;

  box-shadow:
    inset 0 0 30px rgba(22, 140, 255, 0.16),
    0 0 14px rgba(22, 140, 255, 0.09) !important;
}


/* ============================================================
   PAYLINE
   ============================================================ */

.slotStage .paylinePath {
  filter:
    drop-shadow(0 0 5px var(--gold))
    drop-shadow(0 0 9px var(--violet)) !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1181px) and (pointer: fine),
       (min-width: 1367px) {

  .slotStage .reelFrame {
    /*
     * Preserve your existing responsive sizing.
     */
    width:
      min(
        100%,
        max(
          520px,
          calc((100dvh - 350px) * 1.6)
        )
      ) !important;
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1180px) {

  .slotStage .reelFrame {
    width: 100% !important;
    padding: 0 !important;
  }

}


/* ============================================================
   MOBILE PORTRAIT
   ============================================================ */

@media (max-width: 767px)
       and (orientation: portrait) {

  .slotStage .reelFrame {
    /*
     * Keep the same proportional opening.
     */
    padding: 0 !important;
  }

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


/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */

@media (max-height: 600px)
       and (orientation: landscape) {

  .slotStage .reelFrame {
    /*
     * Slightly tighter because vertical space is limited.
     */
    padding: 0 !important;
  }
}
/* Let the court show through the reel bed while keeping symbols readable. */

.reels {
  background: #070c1614;
  border-color: #fff1c780;
  outline-color: var(--accent);
  box-shadow:
    0 0 0 3px #070c1640,
    inset 0 0 22px #0004;
}

.reels::before {
  background: linear-gradient(
    180deg,
    #070c1659,
    transparent 16% 84%,
    #070c1666
  );
  box-shadow:
    inset 0 10px 18px #0003,
    inset 0 -10px 18px #0003;
}

.reel {
  background: linear-gradient(90deg, #070c1633, #070c160d 50%, #070c1633);

  border-color: #fff1c766;
  box-shadow:
    inset 6px 0 12px #0003,
    inset -6px 0 12px #0003,
    2px 0 0 #fff1c726;
}

.slotStage .cell {
  background: #070c1614;
  border-color: #fff1c733;
}

.cell .symImg {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px #0007);
  border-radius: 0;
}

.reelGlass {
  background: linear-gradient(
    105deg,
    transparent 15%,
    #77c4ff0d 20%,
    transparent 28% 67%,
    #ffffff0b 73%,
    transparent 80%
  );
}

.reelGlass::after {
  box-shadow:
    inset 0 0 0 1px #ffffff09,
    inset 0 0 30px #168cff14;
}

/* Scoreboard panels and controls. */

.balancePlaque,
.headerActions,
.recentPanel {
  background: var(--panel-fill);
  border-color: var(--line);
  box-shadow: var(--panel-shadow);
  border-radius: 12px;
}

.balancePlaque img {
  filter: drop-shadow(0 0 8px #168cff40);
}

.balancePlaque b,
.controlPlaque b,
.winReadout b,
.lineArrow {
  font-family: var(--ui-font);
  color: var(--gold);
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}

.balancePlaque span,
.controlDeck .controlPlaque span,
.controlDeck .winReadout span {
  font-family: var(--ui-font);
  color: var(--muted);
}

.iconBtn,
.menuBtn,
.rulesClose,
.ledgerClose,
.ledgerNavigation button,
.ledgerLink,
.audioPrompt {
  font-family: var(--ui-font);
  background: var(--panel-fill);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 #ffffff0d;
}

.iconBtn#soundBtn.active {
  color: var(--violet-soft);
  border-color: var(--violet);
  box-shadow: inset 0 0 12px #168cff20;
}

.menuBtn::before {
  color: var(--accent-soft);
  text-shadow: none;
}

.controlDeck::before {
  background: var(--panel-fill);
  border-color: var(--line);
  box-shadow: var(--panel-shadow);
}

.controlDeck::after {
  background: linear-gradient(
      90deg,
      transparent,
      var(--accent) 25%,
      var(--gold) 50%,
      var(--accent) 75%,
      transparent
    )
    center top/100% 2px no-repeat;
}

.controlPlaque,
.winReadout {
  background: var(--bg);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 #ffffff09;
}

.controlPlaque::after,
.winReadout::after {
  border-color: #77c4ff12;
}

.lineValue b {
  background: var(--panel);
}

.controlDeck .pillBtn,
.maxBetBtn,
.autoSlotBtn {
  font-family: var(--ui-font);
  background: var(--panel-fill);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 #ffffff0d;
  text-shadow: none;
}

.controlDeck .pillBtn:hover,
.maxBetBtn:hover,
.autoSlotBtn:hover {
  color: var(--ink);
  border-color: var(--violet-soft);
  box-shadow: 0 0 10px #168cff24;
}

.controlDeck .pillBtn.active {
  background: linear-gradient(#a54617, #74300f);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 10px #ff762e30;
  text-shadow: none;
}

.autoSlotBtn.active {
  background: linear-gradient(#184f7a, #10314d);
  color: var(--ink);
  border-color: var(--violet);
  box-shadow: 0 0 10px #168cff30;
}

.autoSlotBtn .autoValue {
  color: var(--gold);
}

.spinBtn {
  font-family: var(--ui-font);
  color: var(--ink);
  background: radial-gradient(circle at 35% 25%, #45bfff, #075ca8 65%, #042946);
  border-color: var(--accent-soft);

  box-shadow:
    inset 0 0 0 3px #073355,
    inset 0 0 0 5px #77c4ff70,
    0 0 0 3px var(--panel),
    0 0 0 6px var(--accent),
    0 0 20px #168cff50;
}

.spinBtn:hover:not(:disabled),
.game.turbo .spinBtn:disabled {
  box-shadow:
    inset 0 0 0 3px #073355,
    inset 0 0 0 5px var(--violet-soft),
    0 0 0 3px var(--panel),
    0 0 0 6px var(--accent-soft),
    0 0 24px #168cff80;
}

.spinBtn::before,
.controlDeck .spinBtn span {
  color: var(--ink);
  text-shadow: 0 2px 0 #073355;
}

.spinBtn::after {
  border-color: #d9f1ff99;
  box-shadow:
    inset 0 0 0 2px #07335580,
    inset 0 0 14px #ffffff17;
}

.spinBtn small {
  color: #d9f1ff;
}

.slotMachine > .footerNote {
  color: var(--muted);
}

.slotStage .paylineHint,
.message .sub {
  color: var(--muted);
}

.message.win .main,
.message.big .main {
  color: var(--gold);
  text-shadow: 0 0 18px #ff762e40;
}

/* Rules, live history, and history dialog. */

.rulesModal,
.ledgerModal {
  background: #030912dc;
}

.rulesCard,
.ledgerCard,
.resultPopupCard {
  color: var(--ink);
  background: var(--panel-fill);
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 3px var(--panel),
    0 20px 60px #0009;

  scrollbar-color: var(--line) var(--panel);
}

.rulesCard::before,
.ledgerCard::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    var(--gold),
    var(--accent),
    transparent
  );
}

.rulesTitle,
.ledgerCard h2,
.spinPanel h2 {
  font-family: var(--display-font);
  color: var(--gold);
  text-shadow: none;
}

.spinPanel h2 {
  font-size: 18px;
  text-align: center;
  line-height: 1.3;
}

.rulesKicker,
.rulesIntro,
.rulesNotice,
.rulesPayoutNote,
.rulesSection ol,
.rulesSection ul,
.rulesPaytable,
.ledgerKicker,
.ledgerStatus,
.ledgerNote,
.ledgerEmpty,
.ledgerLiveEmpty,
.ledgerLiveStatus,
.ledgerLiveTotals > span,
.ledgerStats span,
.ledgerBalance,
.ledgerNavigation span,
.ledgerTable caption,
.ledgerTable th:first-child,
.ledgerTable td small,
.ledgerLiveRows span,
.ledgerLiveRows small {
  color: var(--muted);
  font-family: var(--ui-font);
}

.rulesSection,
.ledgerStats,
.ledgerNet {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

.rulesSection h3,
.rulesPaytable td:last-child {
  color: var(--accent-soft);
  font-family: var(--ui-font);
}

.rulesPaytable td,
.ledgerNavigation,
.ledgerStats > div + div,
.ledgerTable th,
.ledgerTable td,
.ledgerBalance,
.ledgerLiveTotals,
.ledgerLiveRows li {
  border-color: var(--line);
}

.ledgerTable thead th {
  background: var(--panel2);
  color: var(--muted);
}

.ledgerTableWrap {
  scrollbar-color: var(--line) var(--panel);
}

.ledgerPending {
  color: var(--muted);
  border-color: var(--line);
}

.ledgerCrest {
  color: var(--accent);
  text-shadow: none;
}

.ledgerCrest img {
  display: block;
  width: 28px;
  height: 28px;
  margin: auto;
}

.ledgerHero > strong,
.ledgerLiveTotals strong,
.ledgerStats b,
.ledgerLiveRows b,
.ledgerBalance b {
  font-family: var(--ui-font);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ledgerCard[data-tone="profit"] .ledgerHero > strong {
  color: var(--gold);
  text-shadow: 0 0 20px #ff762e30;
}

.ledgerModal [data-tone="profit"],
.spinPanel [data-tone="profit"] {
  color: var(--gold);
}

.ledgerModal [data-tone="loss"],
.spinPanel [data-tone="loss"] {
  color: var(--loss);
}

.ledgerModal [data-tone="even"],
.spinPanel [data-tone="even"] {
  color: var(--muted);
}

.ledgerDone {
  color: var(--ink);
  background: linear-gradient(#126dad, #084370);
  border-color: var(--violet);
  box-shadow: none;
}

.ledgerStop {
  color: var(--ink);
  background: linear-gradient(#923d1f, #602811);
  border-color: var(--accent);
  box-shadow: none;
}

.ledgerLink {
  color: var(--violet-soft);
}

/* Orange scoring highlights and blue reel motion. */

.reels::after {
  background: linear-gradient(
    180deg,
    transparent,
    #ffffff29 42%,
    #168cff4d 51%,
    transparent
  );
}

.reels.is-spinning {
  box-shadow:
    inset 0 0 30px #168cff3d,
    0 0 24px #ff762e1a;
}

.reelFrame::after {
  border-color: #77c4ff7a;
  box-shadow:
    inset 0 0 28px #168cff24,
    0 0 30px #168cff29;
}

.reel::before {
  background: repeating-linear-gradient(
    180deg,
    transparent 0 13px,
    #77c4ff21 14px 16px,
    transparent 17px 28px
  );
}

.reel::after {
  background: linear-gradient(
    180deg,
    #ffffffa6,
    #168cff3d 35%,
    transparent 72%
  );
}

.reel.spinning {
  border-color: var(--violet-soft);
  box-shadow:
    inset 0 0 30px #168cff33,
    0 0 14px #168cff17;
}

.slotStage .reels.is-spinning .cell {
  background: radial-gradient(circle at 50% 45%, #168cff1a, transparent 68%);
}

.slotStage .cell.winner {
  background: radial-gradient(circle, #ff762e40, #ffd16d14 65%);
  box-shadow:
    inset 0 0 0 2px var(--gold),
    inset 0 0 25px #ff762e3d,
    0 0 16px #ffd16d2e;
}

.cell.winner .symImg {
  filter: drop-shadow(0 0 12px #ff762e70) brightness(1.12);
}

.paylinePath {
  filter: drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 9px var(--violet));
}

.slash {
  background: linear-gradient(
    90deg,
    transparent,
    #fff 25%,
    var(--accent) 48%,
    transparent 76%
  );
  filter: drop-shadow(0 0 9px var(--violet));
}

.particle {
  background: var(--gold);
  box-shadow: 0 0 12px var(--accent);
}

@keyframes framePulse {
  50% {
    box-shadow:
      0 0 0 2px #ffd16d42,
      0 0 55px #ff762e47;
  }
}

.bigOverlay {
  background: radial-gradient(circle, #168cff33, #000b 58%, #000e);
}

.bigOverlay .text {
  font-family: var(--display-font);
  background: linear-gradient(#fff4d8, var(--gold), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 24px #ff762e57);
}

.resultPopupCard::before,
.resultPopupCard::after {
  content: none;
}

.resultEyebrow,
.resultAmount,
.resultDetail {
  font-family: var(--ui-font);
}

.resultEyebrow,
.resultSigil {
  color: var(--accent-soft);
  text-shadow: none;
}

.resultAmount {
  color: var(--gold);
  text-shadow: 0 0 18px #ff762e40;
}

.resultDetail {
  color: var(--muted);
}

.resultPopup.win .resultPopupCard {
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 3px var(--panel),
    0 0 28px #ff762e29,
    0 16px 45px #0009;
}

.resultPopup.loss .resultPopupCard {
  border-color: var(--line);
  background: var(--panel-fill);
  box-shadow:
    inset 0 0 0 3px var(--panel),
    0 16px 45px #0009;
}

.resultPopup.loss .resultSigil,
.resultPopup.loss .resultAmount {
  color: var(--muted);
  text-shadow: none;
}

/* Preserve the compact header on landscape phones. */

@media (max-height: 600px) and (orientation: landscape) and (max-width: 1180px),
  (max-height: 600px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1366px) {
  .headerActions {
    background: none;
    border-color: transparent;
    box-shadow: none;
  }
}

/* Readable supporting text, including the live history and bet controls. */

.slotStage .paylineHint {
  font-size: 12px;
  letter-spacing: 0.025em;
  line-height: 1.5;
  text-wrap: balance;
}

.slotStage .message {
  min-height: 60px;
  padding: 8px 10px;
}

.slotStage .message .main {
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.25;
}

.slotStage .message .sub {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 5px;
}

.balancePlaque span,
.controlDeck .controlPlaque span,
.controlDeck .winReadout span {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.controlDeck .maxBetBtn {
  font-size: 13px;
}

.controlDeck .autoSlotBtn .autoLabel {
  font-size: 12px;
}

.ledgerLiveStatus,
.ledgerLiveTotals > span,
.ledgerLiveTotals small,
.ledgerLiveRows,
.ledgerLiveRows small {
  font-size: 12px;
  line-height: 1.5;
}

.ledgerLiveEmpty {
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 4px;
}

.ledgerLiveRows b {
  font-size: 15px;
}

.ledgerLink {
  min-height: 44px;
  font-size: 13px;
}

.spinPanel h2 {
  font-family: var(--ui-font);
  font-size: 21px;
  font-weight: 800;
  margin: 10px 0;
}

.ledgerStatus,
.ledgerEmpty,
.ledgerNote,
.ledgerPending,
.ledgerBalance,
.ledgerNavigation span,
.ledgerStats span,
.ledgerTable caption {
  font-size: 12px;
}

.ledgerTable,
.ledgerTable thead th {
  font-size: 13px;
}

.ledgerTable td small {
  font-size: 11px;
}

.rulesIntro,
.rulesSection ol,
.rulesSection ul,
.rulesPaytable,
.rulesPayoutNote {
  font-size: 13px;
  line-height: 1.6;
}

.rulesSection h3 {
  font-size: 15px;
}

.rulesNotice,
.slotMachine > .footerNote {
  font-size: 11px;
  line-height: 1.5;
}

.resultEyebrow,
.resultDetail {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.spinPanel [hidden] {
  display: none !important;
}

/* Keep desktop header, reels, and controls together instead of at viewport edges. */

@media (min-width: 1181px) and (pointer: fine), (min-width: 1367px) {
  .slotMachine {
    width: min(calc(100vw - 32px), 1320px);
    min-height: 0;

    grid-template-rows: repeat(4, auto);
    gap: 16px;
    padding: 12px;
  }

  .slotHeader {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr auto;

    grid-template-areas: "actions balance";
    gap: 16px;
  }

  .slotStage {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    padding-top: 24px;
  }

  .slotStage .reelFrame {
    width: min(100%, max(420px, calc((100dvh - 380px) \\\* 1.6)));
  }

  .recentPanel {
    margin-left: 0;
    padding: 18px 14px;
  }

  .controlDeck {
    width: 100%;
    margin-top: 0;
    gap: 10px;
    padding: 12px;

    grid-template-columns: 48px 100px minmax(220px, 1fr) minmax(
        180px,
        1fr
      ) 80px 88px 136px;
  }

  .linesPlaque {
    margin-right: -10px;
  }

  .betPlaque {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .spinBtn {
    width: 112px;
    height: 112px;
  }

  .spinBtn span {
    font-size: 25px;
  }

  .spinBtn small {
    font-size: 11px;
  }
}

/* Let narrow layouts flow, without an empty flexible row below the reels. */

@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
  .slotMachine {
    grid-template-rows: repeat(4, auto);
    align-content: center;
  }

  .controlDeck .spinBtn span {
    width: auto;
    max-width: 70%;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .controlDeck .spinBtn small {
    width: auto;
    max-width: 70%;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0;
    margin-top: 2px;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .controlDeck {
    --spin-size: 100px;
  }
}

@media (max-height: 600px) and (orientation: landscape) and (max-width: 1180px),
  (max-height: 600px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1366px) {
  .slotMachine {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: normal;
  }

  .slotStage .message {
    min-height: 30px;
    padding: 5px 2px;
  }

  .slotStage .message .main {
    font-size: 16px;
  }
}