:root {
      --bg: #030807;
      --bg-2: #050d0b;
      --panel: rgba(20, 35, 30, 0.75);
      --panel-strong: rgba(10, 20, 18, 0.95);
      --panel-soft: rgba(255, 255, 255, 0.05);
      --line: rgba(255, 215, 0, 0.2);
      --text: #ffffff;
      --muted: #a0b8b0;
      --green: #3cff9a;
      --green-2: #13c46b;
      --green-3: #88ffd0;
      --yellow: #ffd700;
      --gold: #ffcc00;
      --gold-dark: #cc9900;
      --purple: #9d50bb;
      --red: #ff3344;
      --shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
      --radius-xl: 28.8px;
      --radius-lg: 21.6px;
      --radius-md: 16.2px;
    }

    @keyframes text-shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%) rotate(30deg); opacity: 0; }
      20% { opacity: 0.5; }
      50% { opacity: 0.5; }
      80% { opacity: 0.5; }
      100% { transform: translateX(200%) rotate(30deg); opacity: 0; }
    }

    @keyframes glow {
      0%, 100% { filter: drop-shadow(0 0 5px var(--gold)); opacity: 0.9; }
      50% { filter: drop-shadow(0 0 15px var(--gold)); opacity: 1; }
    }

    @keyframes slot-spin {
      0% { transform: translateY(0) scaleY(1); filter: blur(0); }
      50% { transform: translateY(-25%) scaleY(1.2); filter: blur(2px); }
      100% { transform: translateY(-50%) scaleY(1); filter: blur(0); }
    }

    @keyframes reel-glow {
      0%, 100% { box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.1); }
      50% { box-shadow: inset 0 0 35px rgba(255, 215, 0, 0.3); }
    }

    @keyframes prize-pop {
      0% { transform: scale(0.8); opacity: 0; }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes text-blink {
      0%, 100% { opacity: 1; text-shadow: 0 0 15px var(--yellow); }
      50% { opacity: 0.5; text-shadow: 0 0 5px var(--yellow); }
    }

    @keyframes emoji-explode {
      0% {
        transform: translate(-50%, -50%) scale(0) rotate(0);
        opacity: 0;
      }
      10% {
        opacity: 1;
        transform: translate(calc(-50% + var(--tx) * 0.1), calc(-50% + var(--ty) * 0.1)) scale(1.5) rotate(0);
      }
      100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 450px)) scale(var(--s)) rotate(var(--r));
        opacity: 0;
      }
    }

    @keyframes crazy-dance {
      0%, 100% { transform: scale(1) rotate(0deg) skew(0deg); filter: hue-rotate(0deg); }
      10% { transform: scale(1.1) rotate(5deg) skew(5deg); filter: hue-rotate(90deg) brightness(1.5); }
      20% { transform: scale(0.9) rotate(-10deg) skew(-10deg); filter: hue-rotate(180deg) invert(0.2); }
      30% { transform: scale(1.3) rotate(15deg) skew(15deg); filter: hue-rotate(270deg) contrast(2); }
      40% { transform: scale(0.8) rotate(-20deg) skew(-20deg); filter: hue-rotate(360deg) brightness(0.5); }
      50% { transform: scale(1.5) rotate(25deg) skew(25deg); filter: hue-rotate(450deg) saturate(5); }
      60% { transform: scale(0.7) rotate(-30deg) skew(-30deg); filter: hue-rotate(540deg) invert(0.5); }
      70% { transform: scale(1.2) rotate(35deg) skew(35deg); filter: hue-rotate(630deg) sepia(1); }
      80% { transform: scale(0.9) rotate(-40deg) skew(-40deg); filter: hue-rotate(720deg) brightness(2); }
      90% { transform: scale(1.4) rotate(45deg) skew(45deg); filter: hue-rotate(810deg) contrast(3); }
    }

    .crazy-dance {
      animation: crazy-dance 0.3s infinite linear;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background: inherit;
    }

    .darkness-overlay {
      position: fixed;
      inset: 0;
      background: black;
      z-index: 20000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 1.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .darkness-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .grisha-text {
      color: white;
      font-size: 5rem;
      font-weight: 900;
      text-transform: uppercase;
      text-align: center;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.8s cubic-bezier(0.17, 0.67, 0.12, 1.2);
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 150, 255, 0.6);
      font-family: 'Arial Black', sans-serif;
    }

    .grisha-text.visible {
      opacity: 1;
      transform: scale(1);
    }

    @keyframes firework-explode {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
      100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s)) rotate(var(--r));
        opacity: 0;
      }
    }

    @keyframes firework-spiral {
      0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(0) scale(0);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) rotate(var(--r)) translateX(var(--tx)) scale(var(--s));
        opacity: 0;
      }
    }

    @keyframes firework-drift {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        filter: blur(0px);
      }
      50% {
        opacity: 1;
        filter: blur(2px);
      }
      100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) - 200px)) scale(calc(var(--s) * 1.5)) rotate(calc(var(--r) * 0.5));
        opacity: 0;
        filter: blur(5px);
      }
    }

    .firework-particle {
      position: fixed;
      pointer-events: none;
      font-size: 30px;
      z-index: 15000;
      animation: firework-explode 1s ease-out forwards;
      will-change: transform, opacity;
    }

    .firework-particle.variant-1 {
      animation: firework-spiral 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    }

    .firework-particle.variant-2 {
      animation: firework-drift 1.5s ease-in-out forwards;
    }

    @keyframes grisha-spin {
      0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.5); }
      25% { transform: translate(calc(-50% + 100px), calc(-50% - 100px)) rotate(360deg) scale(1.5); }
      50% { transform: translate(calc(-50% - 150px), calc(-50% + 50px)) rotate(720deg) scale(1); }
      75% { transform: translate(calc(-50% + 200px), calc(-50% + 150px)) rotate(1080deg) scale(2); }
      100% { transform: translate(-50%, -50%) rotate(1440deg) scale(0.5); }
    }

    .spinning-grisha {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 18000;
      pointer-events: none;
      width: 300px;
      height: 300px;
      animation: grisha-spin 1s infinite linear;
    }

    .spinning-grisha img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: 0 0 50px rgba(255, 255, 255, 0.8), 0 0 100px var(--yellow);
      border: 5px solid white;
    }

    @keyframes slot-shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20% { transform: translate(-3.6px, 1.8px) rotate(-1deg); }
      40% { transform: translate(-3.6px, -1.8px) rotate(1deg); }
      60% { transform: translate(3.6px, 1.8px) rotate(0); }
      80% { transform: translate(1.8px, -1.8px) rotate(1deg); }
    }

    .explosion-emoji {
      position: fixed;
      pointer-events: none;
      font-size: 50px;
      z-index: 10000;
      animation: emoji-explode 2.5s cubic-bezier(0.1, 0.9, 0.2, 1) both;
      will-change: transform, opacity;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
    }

    .slot-machine-shake {
      animation: slot-shake 0.4s ease-in-out;
    }

    @keyframes inner-glow {
      0%, 100% { box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2); }
      50% { box-shadow: inset 0 0 25px rgba(255, 215, 0, 0.4); }
    }

    @keyframes flash-white {
      0% {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 215, 0, 0.1);
      }
      10% {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
      }
      100% {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 215, 0, 0.1);
      }
    }

    @keyframes flash-text {
      0% { color: var(--gold); }
      10% { color: #fff; text-shadow: 0 0 8px #fff; }
      100% { color: var(--gold); }
    }

    @keyframes slide-in-top {
      0% {
        opacity: 0;
        transform: translateY(-20px);
        margin-bottom: -57.6px;
      }
      100% {
        opacity: 1;
        transform: translateY(0);
        margin-bottom: 0;
      }
    }

    @keyframes fade-out-bottom {
      0% {
        opacity: 1;
        transform: translateY(0);
        margin-top: 0;
      }
      100% {
        opacity: 0;
        transform: translateY(10px);
        margin-top: -64.8px; /* row height (57.6) + gap (7.2) */
      }
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      background:
        radial-gradient(circle at 10% 0%, rgba(157, 80, 187, 0.15), transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(255, 215, 0, 0.12), transparent 35%),
        radial-gradient(circle at 50% 100%, rgba(60, 255, 154, 0.08), transparent 30%),
        linear-gradient(180deg, #030807 0%, #050d0b 55%, #020504 100%);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height: 100%;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
      opacity: 0.35;
    }

    .shell {
      max-width: 1242px;
      margin: 0 auto;
      padding: 10.8px 23.4px;
      position: relative;
      z-index: 1;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 9px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12.6px;
    }

    .brand-logo {
      width: 63px;
      height: 63px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background:
        linear-gradient(135deg, #ffd700 0%, #ffcc00 50%, #cc9900 100%);
      color: #000;
      font-size: 43.2px;
      font-weight: 900;
      box-shadow:
        0 0 27px rgba(255, 215, 0, 0.45),
        0 12px 45px rgba(255, 215, 0, 0.35);
      animation: glow 6s infinite ease-in-out;
    }

    .brand-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand-title {
      font-size: 28.8px;
      font-weight: 800;
      letter-spacing: 0.018em;
    }

    .brand-subtitle {
      font-size: 12.6px;
      color: var(--muted);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    .nav-pill,
    .top-pill {
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(12.6px);
      color: var(--muted);
      font-size: 11.7px;
      padding: 9px 12.6px;
    }

    .top-right {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    .balance-pill {
      border-radius: 999px;
      padding: 9.9px 14.4px;
      border: 1px solid rgba(60,255,154,0.20);
      background: rgba(60,255,154,0.08);
      color: var(--green-3);
      font-weight: 700;
      font-size: 11.7px;
      box-shadow: inset 0 0 18px rgba(60,255,154,0.05);
    }

    .layout {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 19.8px;
      align-items: stretch;
    }

    .glass {
      background: linear-gradient(145deg, rgba(25, 45, 40, 0.85), rgba(10, 20, 18, 0.95));
      border: 1px solid rgba(255, 215, 0, 0.1);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow), inset 0 0 18px rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(18px);
      transition: border 0.3s ease, box-shadow 0.3s ease;
    }

    .glass:hover {
      border: 1px solid rgba(255, 215, 0, 0.25);
      box-shadow: 0 27px 81px rgba(0, 0, 0, 0.7), 0 0 13.5px rgba(255, 215, 0, 0.05);
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 420px;
      padding: 21.6px 37.8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: -126px auto auto -108px;
      width: 324px;
      height: 324px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(60,255,154,0.18), transparent 70%);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto -72px -90px auto;
      width: 288px;
      height: 288px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,214,107,0.12), transparent 72%);
      pointer-events: none;
    }

    .hero-top {
      position: relative;
      z-index: 1;
      max-width: 684px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7.2px;
      padding: 8.1px 12.6px;
      border-radius: 999px;
      font-size: 11.7px;
      font-weight: 700;
      color: var(--green-3);
      background: rgba(60,255,154,0.08);
      border: 1px solid rgba(60,255,154,0.16);
    }

    .eyebrow-dot {
      width: 7.2px;
      height: 7.2px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10.8px rgba(60,255,154,0.9);
    }

    h1 {
      margin: 10.8px 0 9px;
      font-size: clamp(34.2px, 5.8vw, 72px);
      line-height: 1.1;
      letter-spacing: -0.045em;
      background: 
        linear-gradient(
          110deg,
          rgba(255, 255, 255, 0) 40%,
          rgba(255, 255, 255, 0.7) 50%,
          rgba(255, 255, 255, 0) 60%
        ) -150% 0 / 200% 100% no-repeat,
        linear-gradient(to bottom, #ffffff 30%, #ffd700 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 1.8px rgba(255, 215, 0, 0.3));
      padding-bottom: 9px;
      animation: text-shimmer 6s infinite linear;
      background-clip: text;
    }

    .hero-subtitle {
      max-width: 630px;
      color: var(--muted);
      font-size: 16.2px;
      line-height: 1.65;
    }

    .cta-row {
      margin-top: 14.4px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14.4px;
    }

    .deposit-btn {
      position: relative;
      border: 0;
      border-radius: 14.4px;
      padding: 10.8px 36px;
      min-width: 234px;
      font-size: 16.2px;
      font-weight: 900;
      letter-spacing: 0.05em;
      cursor: pointer;
      color: #000;
      background: linear-gradient(to bottom, var(--gold), var(--gold-dark));
      box-shadow: 0 4px 0 #cc7a00, 0 9px 18px rgba(0,0,0,0.3);
      transition: all 0.1s;
      text-transform: uppercase;
      overflow: hidden;
    }

    .deposit-btn::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      animation: shimmer 4s infinite linear;
      pointer-events: none;
    }

    .deposit-btn-usdt {
      background: linear-gradient(to bottom, #42ff9e, #13c46b);
      box-shadow: 0 4px 0 #11a65a, 0 9px 25px rgba(20, 255, 140, 0.25);
    }

    .deposit-btn-btc {
      background: linear-gradient(to bottom, #ffae00, #ff8c00);
      box-shadow: 0 4px 0 #cc7000, 0 9px 25px rgba(255, 140, 0, 0.25);
    }


    .deposit-btn:hover {
      filter: brightness(1.2);
      transform: translateY(-2px);
      box-shadow: 
        0 6px 0 currentColor, 
        0 12px 30px rgba(0,0,0,0.4);
    }

    .deposit-btn-usdt:hover {
      color: #11a65a; /* For the shadow color */
      box-shadow: 0 6px 0 #11a65a, 0 12px 30px rgba(60, 255, 154, 0.4);
    }

    .deposit-btn-btc:hover {
      color: #cc7000; /* For the shadow color */
      box-shadow: 0 6px 0 #cc7000, 0 12px 30px rgba(255, 140, 0, 0.4);
    }

    .deposit-btn-usdt:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #11a65a, 0 4px 9px rgba(0,0,0,0.3);
    }

    .deposit-btn-btc:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #cc7000, 0 4px 9px rgba(0,0,0,0.3);
    }

    .deposit-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #cc7a00, 0 4px 9px rgba(0,0,0,0.3);
    }

    .deposit-btn:disabled {
      opacity: 0.72;
      cursor: not-allowed;
      transform: none;
    }

    .ghost-note {
      color: var(--muted);
      font-size: 13px;
    }

    .hero-bottom {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10.8px;
      margin-top: 18px;
    }

    .metric {
      padding: 12.6px 18px;
      min-height: 85px;
      border-radius: 23.4px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 215, 0, 0.1);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .metric::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.05), transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .metric:hover::before {
      opacity: 1;
    }

    .metric:hover {
      background: rgba(255, 215, 0, 0.07);
      border: 1px solid rgba(255, 215, 0, 0.4);
      transform: translateY(-2.7px) scale(1.01);
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 215, 0, 0.1);
    }

    .metric-value {
      font-size: 30.6px;
      font-weight: 950;
      letter-spacing: -0.04em;
      color: var(--gold);
      font-variant-numeric: tabular-nums;
      transition: color 0.3s ease, transform 0.2s ease;
      display: inline-block;
      filter: drop-shadow(0 0 7.2px rgba(255, 215, 0, 0.2));
    }

    .metric.flash {
      animation: flash-white 0.8s ease-out;
      z-index: 2;
    }

    .metric.flash .metric-value {
      animation: flash-text 0.8s ease-out;
    }

    .metric.flash .metric-label {
      color: #fff;
      transition: color 0.1s ease;
    }

    .metric-label {
      color: var(--muted);
      font-size: 11.7px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.045em;
      margin-bottom: 9px;
      opacity: 0.85;
    }

    .side {
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: 19.8px;
    }

    .panel {
      padding: 14.4px 18px;
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 9px;
      margin-bottom: 9px;
    }

    .panel-title {
      margin: 0;
      font-size: 19.8px;
      letter-spacing: -0.027em;
    }

    .panel-link {
      font-size: 11.7px;
      font-weight: 700;
      color: var(--green-3);
    }

    .bonus-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(157, 80, 187, 0.8), rgba(110, 72, 170, 0.9)) !important;
      border: 2px solid rgba(255, 215, 0, 0.3) !important;
      animation: neon-pulse 6s infinite ease-in-out;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 220px;
    }

    .slot-container {
      width: 100%;
      height: 120px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 18px;
      margin: 9px 0;
      position: relative;
      overflow: hidden;
      border: 2px solid rgba(255, 215, 0, 0.2);
      box-shadow: inset 0 0 22px rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      padding: 0 4px;
    }

    .slot-reel {
      height: 100%;
      width: 120px;
      flex: 0 0 120px;
      display: flex;
      flex-direction: column;
      position: relative;
      background: rgba(255, 255, 255, 0.03);
      border-left: 1px solid rgba(255, 215, 0, 0.05);
      border-right: 1px solid rgba(255, 215, 0, 0.05);
      perspective: 1000px;
      overflow: hidden;
    }

    .slot-reel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.6) 0%,
        transparent 15%,
        transparent 85%,
        rgba(0,0,0,0.6) 100%
      );
      pointer-events: none;
      z-index: 2;
    }

    .reel-items {
      display: flex;
      flex-direction: column;
      width: 100%;
      transition: transform 0.5s cubic-bezier(0.12, 0, 0.39, 0);
    }

    .reel-symbol {
      height: 120px;
      width: 100%;
      display: grid;
      place-items: center;
      font-size: 60px;
      flex-shrink: 0;
      padding: 5px;
      transition: filter 0.3s;
    }

    .reel-symbol:not(.spinning *) {
      filter: drop-shadow(0 0 9px rgba(255, 215, 0, 0.3));
    }

    .reel-symbol img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 9px;
      display: block;
    }

    .reel-symbol .placeholder-emoji {
      display: none;
    }

    .reel-items.spinning .final-symbol img {
      display: none;
    }

    .reel-items.spinning .final-symbol .placeholder-emoji {
      display: block;
    }

    .reel-items.spinning {
      animation: slot-spin 0.12s infinite linear, reel-glow 0.3s infinite ease-in-out;
      will-change: transform, filter;
    }

    .slot-controls {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12.6px;
    }

    .spin-btn {
      width: 100%;
      padding: 10.8px;
      border-radius: 14.4px;
      border: 0;
      background: linear-gradient(to bottom, #ffd700, #ff8c00);
      color: #000;
      font-weight: 900;
      font-size: 16.2px;
      cursor: pointer;
      box-shadow: 0 4px 0 #cc7a00, 0 9px 18px rgba(0,0,0,0.3);
      transition: all 0.1s;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .spin-btn:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }

    .spin-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #cc7a00, 0 4px 9px rgba(0,0,0,0.3);
    }

    .spin-btn:disabled {
      background: #555;
      color: #888;
      box-shadow: 0 2px 0 #333;
      cursor: not-allowed;
      transform: translateY(2px);
    }

    .slot-result {
      font-size: 14.4px;
      font-weight: 700;
      color: #fff;
      min-height: 21.6px;
      text-shadow: 0 0 9px rgba(255, 255, 255, 0.4);
    }

    .slot-result.win {
      animation: 
        prize-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        text-blink 0.5s ease-in-out 0.5s 6; /* 3 seconds of blinking after pop */
      color: var(--yellow);
      font-size: 26px;
      font-weight: 900;
      text-transform: uppercase;
      margin-top: 5px;
    }

    .bonus-card::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 215, 0, 0.05),
        transparent
      );
      animation: shimmer 10s infinite linear;
      pointer-events: none;
    }

    .bonus-card::after {
      content: "";
      position: absolute;
      inset: auto -45px -45px auto;
      width: 198px;
      height: 198px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent 70%);
    }

    .bonus-badge {
      display: inline-block;
      padding: 7.2px 10.8px;
      border-radius: 999px;
      background: rgba(255, 215, 0, 0.2);
      border: 1px solid rgba(255, 215, 0, 0.4);
      color: var(--yellow);
      font-size: 10.8px;
      font-weight: 800;
      margin-bottom: 12.6px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
    }

    .bonus-amount {
      font-size: 50.4px;
      font-weight: 950;
      letter-spacing: -0.045em;
      margin-bottom: 5.4px;
      background: linear-gradient(to bottom, #fff, #ffd700);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 9px rgba(255, 215, 0, 0.5));
    }

    .bonus-copy {
      color: var(--muted);
      line-height: 1.6;
      font-size: 12.6px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10.8px;
    }

    .stat-card {
      padding: 10.8px 14.4px;
      border-radius: 16.2px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .stat-card.flash {
      animation: flash-white 0.8s ease-out;
      z-index: 2;
    }

    .stat-card.flash .stat-value {
      animation: flash-text 0.8s ease-out;
    }

    .stat-card.flash .stat-label {
      color: #fff;
      transition: color 0.1s ease;
    }

    .stat-label {
      color: var(--muted);
      font-size: 10.8px;
      margin-bottom: 5.4px;
    }

    .stat-value {
      font-size: 21.6px;
      font-weight: 900;
      letter-spacing: -0.027em;
    }

    .live-list {
      display: flex;
      flex-direction: column;
      gap: 7.2px;
      height: 187.2px; /* 3 * 57.6px (approx row height) + 2 * 7.2px (gaps) */
      overflow: hidden;
      position: relative;
    }

    .live-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12.6px;
      padding: 9.9px 14.4px;
      border-radius: 16.2px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
      height: 57.6px; /* Reduced fixed height */
      flex-shrink: 0;
    }

    .live-row.new-winner {
      animation: slide-in-top 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    .live-row.removing {
      animation: fade-out-bottom 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
      pointer-events: none;
    }

    .live-left {
      display: flex;
      align-items: center;
      gap: 10.8px;
      min-width: 0;
    }

    .avatar {
      width: 37.8px;
      height: 37.8px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(124,255,190,0.22), rgba(60,255,154,0.10));
      border: 1px solid rgba(124,255,190,0.18);
      color: var(--green-3);
      font-weight: 800;
      font-size: 25.2px;
      flex: 0 0 auto;
    }

    .live-copy {
      min-width: 0;
    }

    .live-name {
      font-size: 12.6px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .live-meta {
      font-size: 10.8px;
      color: var(--muted);
      margin-top: 2.7px;
    }

    .live-amount {
      font-size: 14.4px;
      font-weight: 900;
      color: var(--green-3);
      white-space: nowrap;
    }

    .games {
      margin-top: 16.2px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12.6px;
    }

    .game {
      padding: 12.6px;
      border-radius: 19.8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      min-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: inset 0 0 36px rgba(60,255,154,0.02);
    }

    .game-icon {
      width: 43.2px;
      height: 43.2px;
      border-radius: 14.4px;
      display: grid;
      place-items: center;
      font-size: 36px;
      background: rgba(60,255,154,0.08);
      border: 1px solid rgba(60,255,154,0.12);
    }

    .game-name {
      margin-top: 12.6px;
      font-size: 14.4px;
      font-weight: 900;
    }

    .game-meta {
      margin-top: 5.4px;
      font-size: 11.7px;
      color: var(--muted);
    }

    .footer-note {
      margin-top: 16.2px;
      text-align: center;
      color: var(--muted);
      font-size: 10.8px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 23.4px;
      background: rgba(2, 8, 7, 0.72);
      backdrop-filter: blur(9px);
    }

    .modal-backdrop.open {
      display: flex;
    }

    .modal {
      width: 100%;
      max-width: 768.8px;
      border-radius: 27px;
      background: linear-gradient(180deg, rgba(15,24,22,0.96), rgba(10,16,14,0.98));
      border: 1px solid rgba(103,255,186,0.14);
      box-shadow: 0 27px 81px rgba(0,0,0,0.55);
      padding: 23.4px 23.4px 19.8px;
      max-height: min(94vh, 1080px);
      overflow: auto;
    }

    .modal-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16.2px;
      margin-bottom: 16.2px;
    }

    .modal-title {
      margin: 0;
      font-size: 27px;
      letter-spacing: -0.036em;
    }

    .modal-subtitle {
      margin: 7.2px 0 0;
      color: var(--muted);
      font-size: 12.6px;
      line-height: 1.55;
    }

    .icon-btn {
      border: 0;
      width: 37.8px;
      height: 37.8px;
      border-radius: 12.6px;
      cursor: pointer;
      color: var(--text);
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.06);
      font-size: 18px;
      flex: 0 0 auto;
    }

    .widget-frame {
      width: 720px;
      max-width: 100%;
      margin: 0 auto;
      padding: 0;
      border-radius: 23.4px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: inset 0 0 36px rgba(60,255,154,0.03);
      box-sizing: content-box;
    }

    #widget-host {
      width: 100%;
      min-height: 234px;
      margin: 0;
      padding: 0;
    }

    .error-panel {
      display: none;
      width: 100%;
      max-width: 720px;
      margin: 12.6px auto 0;
      padding: 10.8px 12.6px;
      border-radius: 14.4px;
      font-size: 11.7px;
      white-space: pre-wrap;
      word-break: break-word;
      color: #ffd4da;
      background: rgba(255,107,125,0.10);
      border: 1px solid rgba(255,107,125,0.18);
    }

    .error-panel.open {
      display: block;
    }

    .modal-actions {
      width: 100%;
      max-width: 720px;
      margin: 10.8px auto 0;
      display: flex;
      justify-content: flex-end;
    }

    .text-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 10.8px;
      cursor: pointer;
      padding: 5.4px 0;
    }

    .debug-panel {
      display: none;
      width: 100%;
      max-width: 720px;
      margin: 7.2px auto 0;
      padding: 14.4px;
      border-radius: 14.4px;
      font-size: 11.7px;
      line-height: 1.6;
      color: #9ecab8;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .debug-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10.8px;
      margin-bottom: 7.2px;
    }

    .debug-row:last-child {
      margin-bottom: 0;
    }

    .debug-label {
      font-weight: 500;
      opacity: 0.7;
      min-width: 72px;
    }

    .debug-value {
      flex: 1;
      font-family: 'JetBrains Mono', monospace;
      word-break: break-all;
    }

    .debug-value.large {
      font-size: 14.4px;
      font-weight: 600;
      color: #3cff9a;
    }

    .copy-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      color: #9ecab8;
      border-radius: 7.2px;
      padding: 3.6px 7.2px;
      font-size: 9.9px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .copy-btn:hover {
      background: rgba(255,255,255,0.15);
      color: #fff;
    }

    .copy-btn:active {
      transform: scale(0.95);
    }

    .debug-panel.open {
      display: block;
    }

    @media (max-width: 1062px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .games {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 774px) {
      .modal-backdrop {
        justify-content: center;
        padding: 12px;
      }

      .modal {
        margin: 0;
        padding: 16px;
        border-radius: 18px;
      }

      .modal-title {
        font-size: 20px;
      }

      .widget-frame {
        width: 100%;
        box-sizing: border-box;
      }

      #widget-host, .error-panel, .modal-actions, .debug-panel {
        max-width: 100%;
      }
    }

    @media (max-width: 684px) {
      .shell {
        padding: 16.2px;
      }

      .hero,
      .panel {
        padding: 19.8px;
      }

      .hero-bottom {
        grid-template-columns: 1fr 1fr;
      }

      .games {
        grid-template-columns: 1fr;
      }
    }