html, body {
  background-color: #0c1b36 !important;
}

:root {
      --bg-main: #050814;
      --bg-panel: #0b1020;
      --bg-panel-soft: #090d1a;
      --accent-cyan: #00e0ff;
      --accent-purple: #8b5cf6;
      --accent-gold: #ffd86b;
      --text-main: #f5f7ff;
      --text-muted: #8a93b2;
      --danger: #ff4b81;
      --radius-xl: 18px;
      --radius-lg: 14px;
      --radius-md: 10px;
      --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.6);
      --shadow-glow-cyan: 0 0 22px rgba(0, 224, 255, 0.45);
      --shadow-glow-gold: 0 0 18px rgba(255, 216, 107, 0.4);
      --transition-fast: 0.18s ease-out;
      --transition-med: 0.28s ease-out;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Inter", sans-serif;
      background: radial-gradient(circle at 10% 0, #10193d 0, #050814 40%, #02030a 100%);
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 16px;
      padding-top: clamp(28px, 4vh, 72px);
    }

    /* Desktop maximize/fullscreen: center the game horizontally without affecting normal windowed layout */
    @media (min-width: 1025px) and (orientation: landscape) {
      body.desktop-max-center {
        justify-content: center;
      }
    }
    .game-shell {
      width: min(1180px, 100%);
      background: linear-gradient(135deg, #050814 0, #060b18 45%, #050814 100%);
      border-radius: 24px;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(0, 224, 255, 0.14);
    }
    .game-shell::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: conic-gradient(
        from 180deg,
        rgba(0, 224, 255, 0.35),
        rgba(139, 92, 246, 0.0),
        rgba(255, 216, 107, 0.4),
        rgba(0, 224, 255, 0.0),
        rgba(0, 224, 255, 0.35)
      );
      mix-blend-mode: screen;
      opacity: 0.45;
      pointer-events: none;
      z-index: -1;
    }
    .game-inner {
      position: relative;
      z-index: 1;
      padding: 14px 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    /* HEADER / BRANDING -------------------------------------------------- */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 4px 4px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .brand-logo {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #ffffff, #00e0ff 45%, #0b1020 100%);
      box-shadow: var(--shadow-glow-cyan);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 19px;
      letter-spacing: -0.07em;
      color: #02030a;
    }
    .brand-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .brand-title {
      font-size: 15px;
      font-weight: 650;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .brand-title span.highlight {
      color: var(--accent-cyan);
    }
    .brand-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      opacity: 0.86;
    }
    .tag-pill {
      border-radius: 999px;
      padding: 3px 7px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      border: 1px solid rgba(0, 224, 255, 0.3);
      color: var(--accent-cyan);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: linear-gradient(
        135deg,
        rgba(0, 224, 255, 0.12),
        rgba(11, 16, 32, 0.95)
      );
    }
    .tag-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--accent-cyan);
      box-shadow: 0 0 8px rgba(0, 224, 255, 0.8);
    }
    .top-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      color: var(--text-muted);
      position: relative;
    }
    .mobile-sound-toggle {
      position: absolute;
      z-index: 20;
      display: block;
    }
    .mobile-sound-toggle button {
      font-size: 9px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.92);
      color: #e5e7eb;
      border: 1px solid rgba(148, 163, 184, 0.75);
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }
    .mobile-sound-toggle button.active {
      background: linear-gradient(90deg, #22c55e, #a3e635);
      color: #020617;
      border-color: rgba(74, 222, 128, 0.9);
    }
    @media (min-width: 769px) {
      .mobile-sound-toggle {
        top: -30px;
        right: 0;
      }
    }
    @media (max-width: 768px) and (orientation: portrait) {
      .mobile-sound-toggle {
        top: -60px;
        right: 0;
      }
    }
    .meta-item {

      padding: 5px 10px;
      border-radius: 999px;
      background: radial-gradient(circle at 0 0, #18213f 0, #090d1a 55%, #050814 100%);
      border: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(14px);
    }
    .meta-item-label {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-weight: 600;
      font-size: 9px;
      opacity: 0.75;
    }
    .meta-item-value {
      font-weight: 600;
      color: var(--accent-gold);
      font-size: 11px;
    }
    /* HUD ---------------------------------------------------------------- */
    .hud-strip {
      display: flex;
      gap: 10px;
      padding: 4px 2px 6px;
    }


/* Mobile/Android polish: remove tap highlight + ugly focus rings on touch */
html, body {
  -webkit-tap-highlight-color: transparent;
}

button, a, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

button:focus { outline: none; }
button:focus-visible { outline: 2px solid rgba(255,255,255,0.35); outline-offset: 2px; }
    .hud-wrapper-desktop {
      /* wrapper for portrait/desktop HUD; no extra styles */
    }

    .hud-box {
      flex: 1;
      min-width: 0;
      border-radius: var(--radius-xl);
      padding: 10px 12px;
      background: radial-gradient(
          circle at 10% -20%,
          rgba(0, 224, 255, 0.15),
          transparent 55%
        ),
        linear-gradient(145deg, #050814 0, #090f21 55%, #050814 100%);
      border: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
    }

    .hud-strip-compact {
      display: none;
      gap: 10px;
      padding: 4px 2px 6px;
    }

    /* Mobile landscape lock screen */
    .landscape-lock {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 28px;
      background: rgba(0, 0, 0, 0.86);
      color: #fff;
      z-index: 10000;
      font-size: 18px;
      line-height: 1.35;
      letter-spacing: 0.02em;
    }
    .landscape-lock .landscape-lock-card {
      max-width: 520px;
      padding: 18px 18px;
      border-radius: 18px;
      background: rgba(6, 11, 24, 0.72);
      border: 1px solid rgba(0, 224, 255, 0.18);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    }
    .landscape-lock .landscape-lock-title {
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
      font-size: 14px;
      opacity: 0.9;
    }
    .landscape-lock .landscape-lock-msg {
      font-size: 16px;
      opacity: 0.92;
    }
    body.mobile-landscape-lock .landscape-lock { display: flex; }
    body.mobile-landscape-lock .game-shell { display: none; }

/* ------------------------------------------------------------------
   iPad Safari audio proxy
   
   iPad Safari can refuse WebAudio output when the first gesture happens on
   elements inside a transformed (scaled) root. To ensure audio starts reliably,
   we use a transparent, non-transformed, full-screen button for the first tap
   ONLY on iPad Safari, then remove it.
-------------------------------------------------------------------*/

#ios-audio-proxy {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  z-index: 9999999;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

body.ipad-safari-audio-proxy #ios-audio-proxy {
  display: block;
}

    /* Small round id (updated by VaultRNG) */
    .hud-roundid {
      position: absolute;
      top: 9px;
      right: 16px !important;
      left: auto !important;
      bottom: auto;
      z-index: 9999;
      pointer-events: none;
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      opacity: 0.65;
      text-transform: uppercase;
    }
    .hud-mini {
      flex: 1;
      min-width: 0;
      border-radius: var(--radius-xl);
      padding: 8px 10px;
      background: radial-gradient(
          circle at 10% -20%,
          rgba(0, 224, 255, 0.15),
          transparent 55%
        ),
        linear-gradient(145deg, #050814 0, #090f21 55%, #050814 100%);
      border: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
    }
    .hud-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-muted);
    }
    .hud-value {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 14ch;
      text-align: right;
    }
    /* Balance / Bet values live in .hud-left. Keep them left-aligned so the
       number start edge stays stable even when we compact with K/M/B/T. */
    .hud-left .hud-value {
      text-align: left;
    }
    .hud-value.balance {
      color: var(--accent-cyan);
      text-shadow: 0 0 16px rgba(0, 224, 255, 0.6);
    }
    .hud-value.bet {
      color: var(--accent-gold);
    }
    .hud-value.win {
      color: var(--accent-purple);
    }
    .hud-sub {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 3px;
    }
    .hud-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .hud-right {
      font-size: 10px;
      color: var(--text-muted);
      text-align: right;
    }
    /* SLOT AREA ---------------------------------------------------------- */
    .slot-area {
      margin-top: 4px;
    }
    .reels-shell {
      background: radial-gradient(circle at 50% -40%, #19213c 0, #050814 45%);
      border-radius: 24px;
      padding: 14px;
      border: 1px solid rgba(0, 224, 255, 0.12);
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85);
      position: relative;
      overflow: hidden;
    }
    .reels-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.2), transparent 55%);
      opacity: 0.8;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .reels-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }
    .reels-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .reels-title span {
      color: var(--accent-cyan);
    }
    .badge-rtp {
      font-size: 10px;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid rgba(0, 224, 255, 0.45);
      color: var(--accent-cyan);
      background: rgba(1, 10, 23, 0.9);
      backdrop-filter: blur(18px);
      box-shadow: 0 0 18px rgba(0, 224, 255, 0.35);
    }
    .reels {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      padding: 10px;
      border-radius: 18px;
      background: radial-gradient(circle at 50% 0, #151b30 0, #050814 50%, #020309 100%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .reel {
      display: grid;
      grid-template-rows: repeat(4, minmax(54px, 1fr));
      gap: 6px;
      position: relative;
    }
    .reel::before,
    .reel::after {
      content: "";
      position: absolute;
      left: -6px;
      right: -6px;
      height: 16px;
      pointer-events: none;
      z-index: 2;
    }
    .reel::before {
      top: -12px;
      background: linear-gradient(to bottom, rgba(5, 8, 20, 0.85), transparent);
    }
    .reel::after {
      bottom: -12px;
      background: linear-gradient(to top, rgba(5, 8, 20, 0.85), transparent);
    }
    .symbol {
      border-radius: 14px;
      background: radial-gradient(circle at 30% 0, #20294d 0, #090f1f 45%, #02030a 100%);
      border: 1px solid rgba(255, 255, 255, 0.04);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.06em;
      color: #e0e4ff;
      text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
      position: relative;
      overflow: hidden;
      transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast);
    }
    .symbol::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.12), transparent 55%);
      opacity: 0.7;
      pointer-events: none;
    }
    .symbol-label {
      position: relative;
      z-index: 1;
    }
    /* Symbol themes ------------------------------------------------------ */
    .symbol-premium-1 {
      background: radial-gradient(circle at 30% 0, #3d54ff 0, #151c3d 45%, #050814 100%);
      border-color: rgba(0, 224, 255, 0.4);
      color: #f8fbff;
      box-shadow: var(--shadow-glow-cyan);
    }
    .symbol-premium-2 {
      background: radial-gradient(circle at 30% 0, #b46bff 0, #241538 45%, #050814 100%);
      border-color: rgba(139, 92, 246, 0.55);
      color: #fdf2ff;
      box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
    }
    .symbol-premium-3 {
      background: radial-gradient(circle at 30% 0, #ffd86b 0, #3a2813 45%, #050814 100%);
      border-color: rgba(255, 216, 107, 0.7);
      color: #fffaf0;
      box-shadow: var(--shadow-glow-gold);
    }
    .symbol-wild {
      background: radial-gradient(circle at 30% 0, #ffffff 0, #00e0ff 35%, #050814 100%);
      border-color: rgba(0, 224, 255, 0.9);
      color: #02030a;
      font-size: 16px;
      box-shadow: 0 0 28px rgba(0, 224, 255, 0.95);
    }
    .symbol-scatter {
      background: radial-gradient(circle at 20% 0, #ffd1ff 0, #ff4b81 35%, #240416 80%);
      border-color: rgba(255, 75, 129, 0.8);
      color: #fff8fc;
      box-shadow: 0 0 24px rgba(255, 75, 129, 0.9);
    }
    .symbol-low-a {
      border-style: dashed;
      border-color: rgba(0, 224, 255, 0.4);
      color: var(--accent-cyan);
    }
    .symbol-low-k {
      border-style: dashed;
      border-color: rgba(139, 92, 246, 0.5);
      color: var(--accent-purple);
    }
    .symbol-low-q {
      border-style: dashed;
      border-color: rgba(255, 216, 107, 0.5);
      color: var(--accent-gold);
    }
    .symbol-low-j {
      border-style: dashed;
      border-color: rgba(120, 151, 255, 0.5);
      color: #a7b5ff;
    }
    /* Win highlight ------------------------------------------------------ */
    .symbol.win-highlight {
      /* Thicker, clearer gold outline + strong glow for readability */
      box-shadow:
        inset 0 0 0 3px rgba(255, 216, 107, 0.98),
        0 0 22px rgba(255, 216, 107, 0.95),
        0 0 34px rgba(255, 216, 107, 0.55),
        0 14px 28px rgba(0, 0, 0, 0.85);
      border-color: rgba(255, 216, 107, 0.98);
      filter: brightness(1.25) saturate(1.15);
      transform: translateY(-1px) scale(1.04);
    }
    .symbol.dimmed {
      /* Push non-winners back so the winning line reads instantly */
      opacity: 0.22;
      filter: brightness(0.75) saturate(0.65);
    }
    /* Reel spinning state ------------------------------------------------ */
    .reels.spinning .symbol {
      animation: symbol-pulse 0.45s ease-in-out infinite alternate;
      filter: brightness(1.05);
    }
    .reels.spinning {
      box-shadow: inset 0 0 0 1px rgba(0, 224, 255, 0.4), 0 0 26px rgba(0, 224, 255, 0.7);
    }
    @keyframes symbol-pulse {
      from {
        transform: translateY(0px) scale(1);
        opacity: 0.9;
      }
      to {
        transform: translateY(2px) scale(0.98);
        opacity: 0.7;
      }
    }
    /* WIN SUMMARY -------------------------------------------------------- */
    .win-summary {
      margin-top: 8px;
      border-radius: 12px;
      padding: 6px 8px;
      background: radial-gradient(circle at 0 0, #111827 0, #020617 65%);
      border: 1px solid rgba(15, 23, 42, 0.9);
      font-size: 10px;
      color: var(--text-muted);
      height: 72px;
      overflow-y: auto;
      padding-right: 6px;
      scrollbar-gutter: stable both-edges;
    }
    .win-summary.empty {
      opacity: 0.6;
    }
    .win-line-row {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      padding: 2px 0;
    }
    .win-line-main {
      display: inline-flex;
      gap: 6px;
      align-items: baseline;
    }
    .win-line-label {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 9px;
      color: var(--accent-cyan);
    }
    .win-line-symbol {
      font-weight: 600;
      color: var(--text-main);
    }
    .win-line-mult {
      color: var(--accent-gold);
    }
    .win-line-amount {
      font-weight: 600;
      color: var(--accent-purple);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 14ch;
      text-align: right;
    }
    /* FOOTER CONTROL BAR ------------------------------------------------- */
    .control-bar {
      margin-top: 12px;
      padding: 8px 10px 4px;
      border-radius: 18px;
      background: linear-gradient(
          to bottom,
          rgba(15, 23, 42, 0.96),
          rgba(2, 6, 23, 0.98)
        ),
        radial-gradient(circle at 50% -30%, rgba(0, 224, 255, 0.18), transparent 65%);
      border: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.9);
      position: relative;
      overflow: hidden;
    }
    .control-bar::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0, rgba(0, 224, 255, 0.15), transparent 60%);
      opacity: 0.8;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .control-group {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
    }
    .control-group-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-muted);
    }
    .pill-control {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: radial-gradient(circle at 0 0, #1e293b 0, #020617 60%);
      border: 1px solid rgba(148, 163, 184, 0.35);
    }
    .btn-circle {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: none;
      outline: none;
      background: linear-gradient(135deg, #020617 0, #020617 100%);
      color: var(--text-main);
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background var(--transition-fast), transform var(--transition-fast),
        box-shadow var(--transition-fast);
    }
    .btn-circle:hover {
      background: radial-gradient(circle at 30% 0, #111827 0, #020617 80%);
      box-shadow: 0 0 10px rgba(148, 163, 184, 0.5);
      transform: translateY(-1px);
    }
    .pill-value {
      min-width: 44px;
      text-align: center;
      font-weight: 600;
      font-size: 12px;
      color: var(--accent-gold);
    }
    .pill-meta {
      font-size: 9px;
      line-height: 11px;
      min-height: 11px;
      color: var(--text-muted);
    }
    .btn-main {
      position: relative;
      z-index: 2;
      margin-left: auto;
      margin-right: 6px;
      border-radius: 999px;
      border: none;
      outline: none;
      padding: 14px 38px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      cursor: pointer;
      color: #02030a;
      background: radial-gradient(circle at 30% -30%, #ffffff 0, #00e0ff 35%, #0ea5e9 60%);
      box-shadow: 0 0 35px rgba(0, 224, 255, 0.95);
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
    }
    .btn-main:hover {
      transform: translateY(-1px) scale(1.02);
      box-shadow: 0 0 40px rgba(0, 224, 255, 1);
      filter: brightness(1.04);
    }
    .btn-main:active {
      transform: translateY(1px) scale(0.98);
      box-shadow: 0 0 22px rgba(0, 224, 255, 0.7);
    }
    .control-buttons {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: 2px;
    }
    .btn-ghost {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.45);
      background: radial-gradient(circle at 30% 0, #020617 0, #020617 80%);
      color: var(--text-muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      padding: 7px 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: border-color var(--transition-fast), color var(--transition-fast),
        box-shadow var(--transition-fast), background var(--transition-fast),
        transform var(--transition-fast);
    }
    .btn-ghost-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
    }
    .btn-ghost:hover {
      border-color: rgba(0, 224, 255, 0.65);
      color: var(--accent-cyan);
      box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
      background: radial-gradient(circle at 30% 0, #020617 0, #020617 80%);
      transform: translateY(-1px);
    }
    .btn-ghost.active {
      border-color: rgba(0, 224, 255, 0.8);
      color: var(--accent-cyan);
      box-shadow: 0 0 16px rgba(0, 224, 255, 0.9);
    }
    .btn-ghost.active .btn-ghost-dot {
      background: var(--accent-cyan);
      box-shadow: 0 0 10px rgba(0, 224, 255, 0.9);
    }

	    /* SOUND TOGGLE ICON -------------------------------------------------- */
	    #sound-toggle-button .sound-label {
	      /* keep for i18n + a11y, but don't let long translations push layout */
	      position: absolute;
	      width: 1px;
	      height: 1px;
	      padding: 0;
	      margin: -1px;
	      overflow: hidden;
	      clip: rect(0, 0, 0, 0);
	      white-space: nowrap;
	      border: 0;
	    }
	    #sound-toggle-button .sound-icon {
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      width: 18px;
	      height: 18px;
	    }
	    #sound-toggle-button .sound-icon svg {
	      width: 18px;
	      height: 18px;
	      display: block;
	    }
	    /* show waves only when sound is ON, show slash only when sound is OFF */
	    #sound-toggle-button .mute-slash { opacity: 0; }
	    #sound-toggle-button:not(.active) .mute-slash { opacity: 1; }
	    #sound-toggle-button:not(.active) .waves { opacity: 0; }
    /* HELP TEXT ---------------------------------------------------------- */
    .help-strip {
      margin-top: 4px;
      padding: 0 3px 2px;
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }
    .help-strip strong {
      color: var(--accent-cyan);
    }
    .help-link {
      display: none;
    }
    /* OVERLAYS (PAYTABLE + AUTO) ---------------------------------------- */
    .overlay {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 10% 0, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98));
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      backdrop-filter: blur(8px);
    }
    .overlay.hidden {
      display: none;
    }
    .dialog {
      width: min(780px, 100% - 32px);
      max-height: min(560px, 100% - 40px);
      background: radial-gradient(circle at 0 0, #111827 0, #020617 60%);
      border-radius: 22px;
      border: 1px solid rgba(0, 224, 255, 0.4);
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9);
      padding: 14px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: var(--text-main);
    }
    .dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .dialog-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-muted);
    }
    .dialog-title span {
      color: var(--accent-cyan);
    }
    .btn-close {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
      background: radial-gradient(circle at 30% 0, #020617 0, #020617 80%);
      color: var(--text-muted);
      font-size: 11px;
      padding: 5px 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: border-color var(--transition-fast), color var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
    }
    .btn-close:hover {
      border-color: rgba(0, 224, 255, 0.8);
      color: var(--accent-cyan);
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.7);
      transform: translateY(-1px);
    }
    .dialog-body {
      font-size: 11px;
      color: var(--text-muted);
      overflow: auto;
      padding-right: 2px;
    }
    .paytable-section {
      margin-bottom: 10px;
    }
    .paytable-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 6px;
      color: var(--accent-gold);
    }
    .paytable-grid {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .paytable-grid thead {
      background: rgba(15, 23, 42, 0.9);
    }
    .paytable-grid th,
    .paytable-grid td {
      padding: 6px 8px;
      border-bottom: 1px solid rgba(30, 64, 175, 0.45);
      text-align: center;
    }
    .paytable-grid th {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 10px;
      color: var(--text-muted);
    }
    .paytable-symbol-label {
      text-align: left;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-main);
    }
    .paytable-tag {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--accent-purple);
    }
    .paytable-note {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .paytable-highlight {
      color: var(--accent-gold);
    }
    @media (max-width: 640px) {
      .paytable-grid th:nth-child(4),
      .paytable-grid td:nth-child(4) {
        display: none;
      }
    }
    /* AUTO-PLAY DIALOG --------------------------------------------------- */
    .auto-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
      gap: 10px;
    }
    .auto-remaining {
      font-size: 9px;
      margin-left: 4px;
      opacity: 0.85;
      display: inline-block;
      min-width: 32px; /* enough to hold (1000) comfortably */
      text-align: left;
    }
    .auto-remaining.hidden {
      visibility: hidden; /* keeps width reserved to prevent layout shift */
    }

    /* WIN LINE MINI-GRIDS ----------------------------------------------- */
    .winlines-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }
    .winline-card {
      flex: 0 0 calc(25% - 6px);
      min-width: 150px;
      background: radial-gradient(circle at 0 0, #111827 0, #020617 70%);
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, 0.9);
      padding: 6px 6px 8px;
      font-size: 10px;
    }
    .winline-label {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent-cyan);
      margin-bottom: 4px;
      font-size: 9px;
    }
    .winline-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 1px;
      border-radius: 6px;
      overflow: hidden;
      background: rgba(15, 23, 42, 1);
    }
    .winline-cell {
      width: 100%;
      padding-top: 100%; /* square */
      position: relative;
      background: radial-gradient(circle at 50% 0, #020617 0, #020617 100%);
    }
    .winline-cell-inner {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(30, 64, 175, 0.7);
      opacity: 0.35;
    }
    .winline-cell-active .winline-cell-inner {
      border-color: var(--accent-cyan);
      background: radial-gradient(circle at 50% 50%, rgba(0, 224, 255, 0.35), rgba(15, 23, 42, 0.95));
      opacity: 1;
      box-shadow: 0 0 8px rgba(0, 224, 255, 0.7);
    }
    .winline-footer {
      margin-top: 3px;
      font-size: 9px;
      color: var(--text-muted);
    }
    .winline-footer span {
      color: var(--accent-gold);
    }

    @media (max-width: 720px) {
      .winline-card {
        flex: 0 0 calc(50% - 6px);
      }
    }

    @media (max-width: 720px) {
      .auto-layout {
        grid-template-columns: 1fr;
      }
    }
    .auto-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 6px;
      color: var(--accent-gold);
    }
    .auto-note {
      font-size: 10px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .spin-count-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .spin-count-pill {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
      padding: 6px 10px;
      font-size: 11px;
      cursor: pointer;
      color: var(--text-muted);
      background: radial-gradient(circle at 30% 0, #020617 0, #020617 80%);
      transition: border-color var(--transition-fast), color var(--transition-fast),
        box-shadow var(--transition-fast), background var(--transition-fast),
        transform var(--transition-fast);
    }
    .spin-count-pill:hover {
      border-color: rgba(0, 224, 255, 0.7);
      color: var(--accent-cyan);
      box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
      transform: translateY(-1px);
    }
    .spin-count-pill.active {
      border-color: rgba(0, 224, 255, 0.9);
      color: var(--accent-cyan);
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.6);
    }
    .auto-field {
      margin-bottom: 8px;
    }
    .auto-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 3px;
      color: var(--text-muted);
    }
    .auto-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .auto-input {
      flex: 0 0 90px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.7);
      background: radial-gradient(circle at 30% 0, #020617 0, #020617 80%);
      padding: 5px 9px;
      font-size: 11px;
      color: var(--text-main);
      outline: none;
    }
    .auto-input:focus {
      border-color: rgba(0, 224, 255, 0.9);
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.7);
    }
    .auto-input-unit {
      font-size: 10px;
      color: var(--text-muted);
    }
    .auto-conditions-note {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .dialog-footer {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .btn-secondary {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.7);
      background: radial-gradient(circle at 30% 0, #020617 0, #020617 80%);
      color: var(--text-muted);
      font-size: 11px;
      padding: 7px 13px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: border-color var(--transition-fast), color var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
    }
    .btn-secondary:hover {
      border-color: rgba(0, 224, 255, 0.8);
      color: var(--accent-cyan);
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.6);
      transform: translateY(-1px);
    }
    .btn-primary {
      border-radius: 999px;
      border: none;
      background: radial-gradient(circle at 30% -30%, #ffffff 0, #00e0ff 35%, #0ea5e9 60%);
      color: #02030a;
      font-size: 11px;
      padding: 8px 18px;
      cursor: pointer;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 0 22px rgba(0, 224, 255, 0.9);
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
    }
    .btn-primary:hover {
      transform: translateY(-1px) scale(1.01);
      box-shadow: 0 0 28px rgba(0, 224, 255, 1);
      filter: brightness(1.03);
    }
    .btn-primary:active {
      transform: translateY(1px) scale(0.98);
      box-shadow: 0 0 18px rgba(0, 224, 255, 0.7);
    }
    /* RESPONSIVE TWEAKS -------------------------------------------------- */
    @media (max-width: 720px) {
      .top-bar {
        flex-direction: column;
        align-items: flex-start;
      }
      .hud-strip {
        flex-direction: column;
      }
      .control-bar {
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .btn-main {
        order: 3;
        width: 100%;
        margin: 6px 0 2px;
        text-align: center;
        justify-content: center;
        display: flex;
      }
      .control-buttons {
        order: 2;
        margin-left: 0;
      }
    }

    /* BIG / SUPER / MEGA WIN OVERLAY ---------------------------------- */
    
    
    .bigwin-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease-out, transform 0.25s ease-out;
      z-index: 8;
      background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.98));
    }
    
    .bigwin-overlay.visible {
      opacity: 1;
      animation: bigwin-pop 0.28s ease-out;
    }


    .bigwin-overlay.visible {
      opacity: 1;
    }

    .bigwin-overlay.visible {
      opacity: 1;
    }
    
    .bigwin-inner {
      padding: 24px 48px;
      border-radius: 999px;
      background: radial-gradient(circle at 50% 0, rgba(250, 204, 21, 0.18), rgba(15, 23, 42, 0.98));
      border: 3px solid rgba(250, 204, 21, 0.95);
      box-shadow:
        0 0 50px rgba(250, 204, 21, 0.95),
        0 0 140px rgba(56, 189, 248, 0.9);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      max-width: 90%;
    }

    
    .bigwin-label {
      font-size: 26px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent-gold);
      text-shadow:
        0 0 14px rgba(234, 179, 8, 1),
        0 0 26px rgba(0, 0, 0, 1);
      white-space: nowrap;
    }

    
    .bigwin-mult {
      font-size: 20px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent-cyan);
      text-shadow:
        0 0 14px rgba(56, 189, 248, 1),
        0 0 26px rgba(0, 0, 0, 1);
    }

    .bigwin-overlay.super .bigwin-inner {
      border-color: rgba(129, 140, 248, 0.95);
      box-shadow:
        0 0 40px rgba(129, 140, 248, 0.9),
        0 0 120px rgba(56, 189, 248, 0.7);
    }
    .bigwin-overlay.mega .bigwin-inner {
      border-color: rgba(251, 191, 36, 0.98);
      box-shadow:
        0 0 60px rgba(251, 191, 36, 0.98),
        0 0 160px rgba(248, 250, 252, 0.9);
    }
    @media (max-width: 720px) {
      .bigwin-inner {
        padding: 10px 20px;
      }
      .bigwin-label {
        font-size: 16px;
        letter-spacing: 0.18em;
      }
      .bigwin-mult {
        font-size: 13px;
        letter-spacing: 0.12em;
      }
    }

    .bigwin-amount {
      font-size: 18px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #e5e7eb;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 16ch;
      text-align: center;
      text-shadow:
        0 0 10px rgba(15, 23, 42, 1),
        0 0 26px rgba(0, 0, 0, 1);
      margin-top: 2px;
    }

    @keyframes bigwin-pop {
      0% { transform: scale(0.9); }
      60% { transform: scale(1.04); }
      100% { transform: scale(1); }
    }

    .bigwin-inner {
      position: relative;
      overflow: visible;
    }
    .bigwin-inner::before {
      content: "";
      position: absolute;
      inset: -8px -18px;
      border-radius: inherit;
      border: 2px solid rgba(250, 204, 21, 0.4);
      box-shadow: 0 0 30px rgba(250, 204, 21, 0.65);
      opacity: 0;
      pointer-events: none;
    }
    .bigwin-overlay.visible .bigwin-inner::before {
      animation: bigwin-ring-pulse 1.2s ease-out forwards;
    }

    .bigwin-sparks {
      position: absolute;
      inset: -10px -24px;
      pointer-events: none;
      overflow: visible;
    }
    .spark {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: radial-gradient(circle, #facc15 0, #f97316 60%, transparent 100%);
      box-shadow:
        0 0 10px rgba(250, 204, 21, 0.9),
        0 0 18px rgba(249, 115, 22, 0.8);
      opacity: 0;
    }
    .bigwin-overlay.visible .spark {
      animation: spark-fly 0.9s ease-out forwards;
    }
    .bigwin-overlay.visible .spark.s2 {
      animation-delay: 0.06s;
    }
    .bigwin-overlay.visible .spark.s3 {
      animation-delay: 0.12s;
    }
    .bigwin-overlay.visible .spark.s4 {
      animation-delay: 0.18s;
    }
    .bigwin-overlay.visible .spark.s5 {
      animation-delay: 0.24s;
    }

    .spark.s1 { top: 12%; left: 10%; }
    .spark.s2 { top: 0%; left: 55%; }
    .spark.s3 { top: 18%; right: 6%; }
    .spark.s4 { bottom: 10%; left: 18%; }
    .spark.s5 { bottom: 4%; right: 16%; }

    @keyframes spark-fly {
      0% {
        transform: scale(0.6) translate3d(0, 0, 0);
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      100% {
        transform: scale(1.6) translate3d(0, -22px, 0);
        opacity: 0;
      }
    }

    @keyframes bigwin-ring-pulse {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    /* Big win shake: apply shake to an inner wrapper so we never override
       the outer .game-shell transform used for portrait scaling/centering. */
    .game-shell-inner {
      width: 100%;
      height: 100%;
    }
    body.bigwin-wow .game-shell-inner {
      animation: bigwin-shake 0.32s ease-out;
    }
    @keyframes bigwin-shake {
      0% { transform: translate3d(0, 0, 0); }
      20% { transform: translate3d(-2px, 1px, 0); }
      40% { transform: translate3d(2px, -1px, 0); }
      60% { transform: translate3d(-1px, 1px, 0); }
      80% { transform: translate3d(1px, 0, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }

    .bigwin-overlay.mega .bigwin-inner {
      box-shadow:
        0 0 60px rgba(251, 191, 36, 1),
        0 0 180px rgba(248, 250, 252, 1);
      border-color: rgba(251, 191, 36, 1);
    }
    .bigwin-overlay.super .bigwin-inner {
      box-shadow:
        0 0 50px rgba(129, 140, 248, 1),
        0 0 140px rgba(56, 189, 248, 0.95);
      border-color: rgba(129, 140, 248, 1);
    }







@media (max-width: 900px) and (orientation: landscape) {
  body {
    margin: 0;
    background: #02030a;
  }

  .game-shell {
    width: 100%;
    border-radius: 0;
  }

  .game-inner {
    padding: 4px 6px 6px;
    gap: 4px;
  }

  .top-bar {
    margin-bottom: 2px;
  }

  .brand-logo {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-subtitle {
    font-size: 10px;
  }

  .top-meta {
    gap: 4px;
  }

  .meta-item {
    padding: 2px 4px;
  }

  .meta-item-label {
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .meta-item-value {
    font-size: 10px;
  }

  .hud-strip { display: none; }

  .hud-box {
    padding: 6px 8px;
  }

  .hud-label {
    font-size: 9px;
  }

  .hud-value {
    font-size: 13px;
  }

  .hud-sub {
    display: none;
  }

  .hud-right {
    font-size: 9px;
  }

  .slot-area {
    margin-top: 4px;
  }

  .reels-shell {
    padding: 6px;
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.85);
  }

  .reels-header {
    margin-bottom: 4px;
  }

  .reels-title {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .reels-grid {
    gap: 2px;
  }

  .reel {
    grid-template-rows: repeat(4, minmax(36px, 1fr));
    gap: 4px;
  }

  .symbol {
    padding: 1px;
    border-radius: 12px;
    font-size: 14px;
  }

  .symbol-label {
    font-size: 13px;
  }

  .win-summary {
    margin-top: 4px;
    padding: 4px 6px;
    min-height: 40px;
    font-size: 10px;
  }

  .control-bar {
    margin-top: 6px;
    padding: 6px 8px 4px;
    border-radius: 16px;
  }

  .control-group-label {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .pill-control {
    padding: 2px 4px;
  }

  .btn-circle {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .pill-value {
    min-width: 44px;
    font-size: 12px;
  }

  .pill-meta {
    display: none;
  }

  .btn-main {
    padding: 10px 26px;
    font-size: 11px;
  }

  .control-buttons {
    gap: 4px;
  }

  .btn-ghost {
    padding: 4px 8px;
    font-size: 9px;
  }

  .help-strip {
    margin-top: 2px;
    font-size: 9px;
  }
  /* Landscape uses compact HUD strip */
  .hud-wrapper-desktop { display:none; }
  .hud-strip { display:none; }

  .hud-strip-compact { display:flex; }

  .hud-strip-compact .hud-mini {
    padding: 4px 6px;
    border-radius: 12px;
    box-shadow: none;
  }

  .hud-strip-compact .hud-label {
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .hud-strip-compact .hud-value {
    font-size: 13px;
  }

  /* Bottom control bar layout tweaks for landscape */
  .control-bar {
    justify-content: flex-start;
  }

  .btn-main {
    margin-left: 12px;
    margin-right: 6px;
    padding: 10px 30px;
    font-size: 11px;
  }

  .control-buttons {
    margin-left: 4px;
  }

  /* Move sound toggle down next to control bar in landscape */
  .mobile-sound-toggle {
    position: fixed;
    bottom: 18px;
    right: 20px;
  }

  /* Compact horizontal win summary in landscape */
  .win-summary {
    margin-top: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 4px 8px;
  }

  .win-summary .win-line-row {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .win-summary .win-line-main {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .win-summary .win-line-amount {
    margin-left: 4px;
  }

  .win-summary .win-line-row:last-child {
    margin-left: auto;
    margin-right: 0;
  }

}






/* DESKTOP-ONLY 1280×720 FRAMING – PORTRAIT UNCHANGED */
@media (min-width: 1025px) and (orientation: landscape) {
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    padding: 0;
  }

  .game-shell {
    max-width: 1280px;
    max-height: 720px;
  }
}



/* SIMPLE LOADING SCREEN OVERLAY – CHAIN REACTOR STYLE */
#vots-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #122039 0, #050914 45%, #02030a 100%);
  z-index: 9999;
  font-family: inherit;
  transition: opacity 0.4s ease;
}

#vots-loader-card {
  position: relative;
  min-width: 260px;
  max-width: 480px;
  padding: 24px 40px 26px;
  border-radius: 18px;
  background: radial-gradient(circle at top, rgba(64, 123, 255, 0.35) 0, rgba(5, 10, 25, 0.96) 38%, rgba(3, 6, 16, 0.98) 100%);
  box-shadow:
    0 0 40px rgba(64, 123, 255, 0.5),
    0 0 120px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  text-align: center;
}

#vots-loader-title {
  font-size: 18px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #f7fbff;
}

#vots-loader-subtitle {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 18px;
  color: #b7c7e8;
}

#vots-loader-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(10, 19, 40, 0.9), rgba(4, 9, 20, 0.9));
  box-shadow: 0 0 12px rgba(112, 179, 255, 0.75);
}

#vots-loader-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fd2ff, #9be7ff, #e8f8ff);
  animation: vots-loading-fill 1.8s ease-in-out infinite;
}

#vots-loader-percent {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d9e5ff;
  opacity: 0.9;
}

/* Subtle looping fill movement */
@keyframes vots-loading-fill {
  0%   { width: 0%;   transform: translateX(-15%); }
  50%  { width: 75%;  transform: translateX(5%); }
  100% { width: 100%; transform: translateX(20%); }
}

/* Fade game in once loaded */
/* Fade game in once loaded */
.game-shell {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.vots-loaded .game-shell {
  opacity: 1;
}

/* Hide loader when loaded */
body.vots-loaded #vots-loader {
  opacity: 0;
  pointer-events: none;
}

/* RTL support (basic) */
body.rtl { direction: rtl; }
body.rtl .top-bar, body.rtl .hud-strip, body.rtl .control-bar { direction: rtl; }



/* --- I18N LAYOUT LOCK (English is layout master) ----------------------- */
:root {
  --game-base-width: 1180;
  --game-base-height: 760;
  --game-scale: 1;
}



@media (max-width: 768px) and (orientation: portrait) {
  body {
    /* Mobile portrait: top-aligned like the original, with safe breathing room */
    padding: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 0px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 0px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    align-items: flex-start;
    justify-content: flex-start;
  }
  .game-shell {
    /* Ensure we can scale to fit without changing layout metrics */
    transform-origin: top center;
    will-change: transform;
  }
}


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

@supports (height: 100dvh) {
  html, body {
    min-height: 100dvh;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  html,
  body {
    background-attachment: fixed;
  }
}

body {
  overflow: hidden; /* never let localisation expand the page/canvas */
}

.game-shell {
  width: calc(var(--game-base-width) * 1px) !important;
  height: calc(var(--game-base-height) * 1px) !important;
  max-width: calc(var(--game-base-width) * 1px) !important;
  max-height: calc(var(--game-base-height) * 1px) !important;
  transform: scale(var(--game-scale));
}

/* Prevent flex children from forcing growth */
.top-bar, .hud, .controls, .control-buttons {
  flex-wrap: nowrap !important;
}
.top-bar > *, .hud > *, .controls > *, .control-buttons > * {
  min-width: 0;
}

/* Buttons/labels: never grow layout; text fits box */
button, .btn-main, .btn-primary, .btn-secondary, .btn-ghost, .btn-icon, .btn-circle, .btn-close, .btn-auto-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Translation-driven text elements should not reflow layout */
[data-i18n], [class*="label"], [class*="title"], [class*="heading"] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overlays should stay within the locked shell */
.overlay {
  overflow: hidden;
}
.overlay .overlay-content, .overlay .panel, .overlay .modal {
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


    @media (max-height: 760px) {
      body {
        justify-content: center;
        padding-top: 16px;
      }
    }


@media (max-width: 768px) and (orientation: portrait) {
  /* Keep everything inside the viewport in portrait */
  .game-shell {
    padding-left: 0px;
    padding-right: 0px;
    box-sizing: border-box;
  }

  /* Prevent top meta pills from overflowing off the right edge */
  .meta-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
  }
  .meta-item {
    max-width: calc(50% - 8px);
    flex: 1 1 calc(50% - 8px);
  }
  .meta-item-value,
  .meta-item-label {
    font-size: 11px;
  }

  /* Symbol label sizing for long words like TABLET/MECHANISM */
  .symbol {
    font-size: 14px;
    letter-spacing: 0.04em;
  }
}


/* --- PORTRAIT RESTORE (do not affect desktop) ------------------------- */
@media (max-width: 768px) and (orientation: portrait) {
  /* Flush to device edges (respect safe areas only) */
  body {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Let the shell grow to its real content height in portrait so scaling can fit it */
  .game-shell {
    height: auto !important;
    max-height: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Slightly tighter inner padding to regain the "flush" feel */
  .game-inner {
    padding: 12px 12px 14px;
  }

  /* Allow top meta pills to wrap so MAX WIN never runs off-screen */
  .top-meta {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
  }
  .top-meta .meta-item {
    max-width: 100%;
  }

  /* Symbol labels: keep readable but avoid clipping */
  .symbol {
    font-size: 13px;
    letter-spacing: 0.03em;
  }
  .symbol-label {
    font-size: 13px;
  }
}

/* --- PORTRAIT RESTORE (do not affect desktop) ------------------------- */
@media (max-width: 768px) and (orientation: portrait) {
  /* Flush to device edges (respect safe areas only) */
  body {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Let shell grow to content in portrait so wrapped controls are included, then scale to fit */
  .game-shell {
    height: auto !important;
    max-height: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Slightly tighter interior padding to match the older flush portrait look */
  .game-inner {
    padding: 12px 12px 14px;
  }

  /* Allow the top pills to wrap in portrait so MAX WIN never runs off-screen */
  .top-meta {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
  }
  .top-meta .meta-item {
    flex: 0 1 auto;
    max-width: 100%;
  }

  /* Symbol label sizing in portrait (avoid TAB... / edge clipping) */
  .symbol-label {
    font-size: 13px;
  }
}

/* --- PORTRAIT RESTORE (do not affect desktop) ------------------------- */
@media (max-width: 768px) and (orientation: portrait) {
  /* Flush to device edges (respect safe areas only) */
  body {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Let the shell grow to its true content height in portrait so scaling can fit it */
  .game-shell {
    height: auto !important;
    max-height: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Slightly tighter inner padding in portrait (closer to edge-fit) */
  .game-inner {
    padding: 12px 12px 14px;
  }

  /* Top meta pills: allow wrapping so MAX WIN never runs off-screen */
  .top-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .top-meta .meta-item {
    max-width: 100%;
  }

  /* Symbol labels: keep readable but avoid clipping */
  .symbol-label {
    font-size: 13px;
    letter-spacing: 0.03em;
  }
}

/* --- PORTRAIT RESTORE (do not affect desktop) ------------------------- */
@media (max-width: 768px) and (orientation: portrait) {
  /* Flush to device edges (respect safe areas only) */
  body {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Let the shell grow to its true content height in portrait so scaling can fit it */
  .game-shell {
    height: auto !important;
    max-height: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Slightly tighter inner padding in portrait (closer to edge-fit) */
  .game-inner {
    padding: 12px 12px 14px;
  }

  /* Top meta pills: allow wrapping so MAX WIN never runs off-screen */
  .top-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .top-meta .meta-item {
    max-width: 100%;
  }

  /* Symbol labels: keep readable but avoid clipping */
  .symbol-label {
    font-size: 13px;
    letter-spacing: 0.03em;
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  .game-shell { transform-origin: top left !important; }
}


/* --- PORTRAIT TIGHTEN (keep desktop frozen) -------------------------- */
@media (max-width: 768px) and (orientation: portrait) {
  /* Use width more fully by reducing wasted horizontal padding */
  .game-shell { padding-left: 0 !important; padding-right: 0 !important; }

  /* Keep meta pills on one row by shrinking typography instead of wrapping taller */
  .meta-row {
    flex-wrap: nowrap !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    overflow: hidden;
  }
  .meta-item { 
    max-width: none !important;
    min-width: 0;
    padding: 4px 8px !important;
  }
  .meta-item-label { font-size: 9px !important; }
  .meta-item-value { font-size: 10px !important; }

  /* Slightly tighten vertical spacing in portrait so we can scale up */
  .hud-strip { padding-top: 2px !important; padding-bottom: 4px !important; }
  .hud-wrapper-desktop, .hud-wrapper-mobile { margin-top: 4px !important; }
}



/* Portrait: remove desktop padding so the game can sit flush to the device edges (S24 Ultra baseline) */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* --- Portrait horizontal centering (does not affect desktop) --- */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    justify-content: center;
  }
}


/* --- DESKTOP TRUE WINDOW FIT (desktop only) --- */
:root {
  --game-scale-x: 1;
  --game-scale-y: 1;
  --game-desktop-fit-height: 760;
}

body.desktop-window-fit {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}

body.desktop-window-fit .game-shell {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: calc(var(--game-base-width) * 1px) !important;
  height: calc(var(--game-desktop-fit-height) * 1px) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform-origin: top left !important;
  transform: scale(var(--game-scale-x), var(--game-scale-y)) !important;
}
/* --- DESKTOP TRUE WINDOW FIT --- */
:root {
  --game-scale-x: 1;
  --game-scale-y: 1;
}

body.desktop-window-fit {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

body.desktop-window-fit .game-shell {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  overflow: hidden !important;
}

body.desktop-window-fit .game-shell-inner {
  width: 1180px !important;
  height: 620px !important;
  transform-origin: top left !important;
  transform: scale(var(--game-scale-x), var(--game-scale-y)) !important;
}
/* --- END DESKTOP TRUE WINDOW FIT --- */

body.desktop-window-fit .game-shell-inner {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

body.desktop-window-fit .slot-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.desktop-window-fit .reels-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.desktop-window-fit .reels {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.desktop-window-fit .slot-area {
  flex: 1 1 auto !important;
  display: flex !important;
  min-height: 0 !important;
}

body.desktop-window-fit .reels-shell {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.desktop-window-fit .reels {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.desktop-window-fit .reel {
  grid-template-rows: repeat(4, 1fr) !important;
}


/* ------------------------------------------------------------------
   DESKTOP FIXED-ASPECT FIT V3
-------------------------------------------------------------------*/

:root {
  --game-desktop-width: 1280;
  --game-desktop-height: 720;
  --game-scale-fit: 1;
  --game-fit-left: 0;
  --game-fit-top: 0;
}

body.desktop-window-fit {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  background: #0c1b36 !important;
}

body.desktop-window-fit .game-shell {
  position: fixed !important;
  left: calc(var(--game-fit-left) * 1px) !important;
  top: calc(var(--game-fit-top) * 1px) !important;
  width: calc(var(--game-desktop-width) * 1px) !important;
  height: calc(var(--game-desktop-height) * 1px) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform-origin: top left !important;
  transform: scale(var(--game-scale-fit)) !important;
  overflow: hidden !important;
}

body.desktop-window-fit .game-shell-inner {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body.desktop-window-fit .game-inner {
/*   height: 100% !important; */
  min-height: 0 !important;
  padding: 14px 18px 16px !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body.desktop-window-fit .top-bar {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 4px 4px !important;
}

body.desktop-window-fit .hud-wrapper-desktop {
  display: block !important;
  flex: 0 0 auto !important;
}

body.desktop-window-fit .hud-strip {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 4px 2px 6px !important;
}

body.desktop-window-fit .hud-strip-compact {
  display: none !important;
}

body.desktop-window-fit .slot-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}

body.desktop-window-fit .reels-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

body.desktop-window-fit .reels-header {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
  display: flex !important;
}

body.desktop-window-fit .reels-title {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

body.desktop-window-fit .reels {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

body.desktop-window-fit .reel {
  display: grid !important;
  grid-template-rows: repeat(4, minmax(54px, 1fr)) !important;
  gap: 6px !important;
}

body.desktop-window-fit .symbol {
  min-height: 54px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 18px !important;
}

body.desktop-window-fit .win-summary {
  flex: 0 0 72px !important;
  height: 72px !important;
  max-height: 72px !important;
  margin-top: 8px !important;
  padding: 6px 8px !important;
}

body.desktop-window-fit .control-bar {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding: 8px 10px 4px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.desktop-window-fit .btn-main {
  order: initial !important;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 44px !important;
  font-size: 12px !important;
}

body.desktop-window-fit .control-buttons {
  order: initial !important;
  margin-left: 2px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

body.desktop-window-fit .help-strip {
  flex: 0 0 auto !important;
  display: flex !important;
}

/* ------------------------------------------------------------------
   DESKTOP FIXED-ASPECT FINAL CLEANUP
   Desktop only. Keeps the live game as a fixed 1280x720 canvas, fitted
   uniformly into the browser window with bars where needed.
-------------------------------------------------------------------*/

:root {
  --game-desktop-width: 1280;
  --game-desktop-height: 720;
  --game-scale-fit: 1;
  --game-fit-left: 0;
  --game-fit-top: 0;
}

body.desktop-window-fit {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  background: #0c1b36 !important;
}

body.desktop-window-fit .game-shell {
  position: fixed !important;
  left: calc(var(--game-fit-left) * 1px) !important;
  top: calc(var(--game-fit-top) * 1px) !important;
  width: calc(var(--game-desktop-width) * 1px) !important;
  height: calc(var(--game-desktop-height) * 1px) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform-origin: top left !important;
  transform: scale(var(--game-scale-fit)) !important;
  overflow: hidden !important;
}

body.desktop-window-fit .game-shell-inner {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body.desktop-window-fit .game-inner {
/*   height: 100% !important; */
  min-height: 0 !important;
  padding: 8px 18px 10px !important;
  gap: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body.desktop-window-fit .top-bar {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 4px 4px !important;
}

body.desktop-window-fit .hud-wrapper-desktop {
  display: block !important;
  flex: 0 0 auto !important;
}

body.desktop-window-fit .hud-strip {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 4px 2px 6px !important;
}

body.desktop-window-fit .hud-strip-compact {
  display: none !important;
}

body.desktop-window-fit .slot-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}

body.desktop-window-fit .reels-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

body.desktop-window-fit .reels-header {
  flex: 0 0 auto !important;
  margin-bottom: 8px !important;
  display: flex !important;
}

body.desktop-window-fit .reels-title {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

body.desktop-window-fit .reels {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

body.desktop-window-fit .reel {
  display: grid !important;
  grid-template-rows: repeat(4, minmax(54px, 1fr)) !important;
  gap: 6px !important;
}

body.desktop-window-fit .symbol {
  min-height: 54px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 18px !important;
}

body.desktop-window-fit .win-summary {
  flex: 0 0 72px !important;
  height: 72px !important;
  max-height: 72px !important;
  margin-top: 8px !important;
  padding: 6px 8px !important;
}

body.desktop-window-fit .control-bar {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding: 8px 10px 4px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.desktop-window-fit .control-group {
  order: 1 !important;
  flex: 0 0 auto !important;
}

body.desktop-window-fit #btn-spin {
  order: 2 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 126px !important;
  height: 48px !important;
  margin: 0 18px !important;
  padding: 0 42px !important;
  font-size: 12px !important;
}

body.desktop-window-fit .control-buttons {
  order: 3 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
}

body.desktop-window-fit #btn-auto { order: 1 !important; }
body.desktop-window-fit #btn-turbo { order: 2 !important; }
body.desktop-window-fit #btn-paytable { order: 3 !important; }
body.desktop-window-fit #sound-toggle-button { order: 4 !important; }

body.desktop-window-fit #btn-auto,
body.desktop-window-fit #btn-turbo,
body.desktop-window-fit #btn-paytable {
  flex: 0 0 auto !important;
  min-width: 96px !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

body.desktop-window-fit #sound-toggle-button {
  flex: 0 0 auto !important;
  min-width: 214px !important;
  width: auto !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
}

body.desktop-window-fit #sound-toggle-button .sound-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
  line-height: 1 !important;
  color: inherit !important;
}

body.desktop-window-fit #sound-toggle-button .sound-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

body.desktop-window-fit #sound-toggle-button .sound-icon svg {
  width: 18px !important;
  height: 18px !important;
}


/* --- DESKTOP CONTROL BAR BUTTON FILL ----------------------------------
   Desktop only. Keeps the Spin button locked at its existing desktop-game
   position and makes the buttons to its right fill the remaining game width.
   Android and iPhone layouts are untouched. */
body.desktop-window-fit .control-bar {
  position: relative !important;
  height: 60px !important;
  padding: 8px 10px 4px !important;
  display: block !important;
  box-sizing: border-box !important;
}

body.desktop-window-fit .control-group {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 2 !important;
}

body.desktop-window-fit #btn-spin {
  position: absolute !important;
  left: 378px !important;
  top: 8px !important;
  width: 126px !important;
  min-width: 126px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

body.desktop-window-fit .control-buttons {
  position: absolute !important;
  left: 522px !important;
  right: 10px !important;
  top: 11px !important;
  height: 38px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr) !important;
  gap: 8px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

body.desktop-window-fit #btn-auto,
body.desktop-window-fit #btn-turbo,
body.desktop-window-fit #btn-paytable,
body.desktop-window-fit #sound-toggle-button {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  margin: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

body.desktop-window-fit #sound-toggle-button {
  height: 38px !important;
}