:root {
        --green: #00a86b;
        --panel: #0a0a0a;
        --panel-2: #111;
        --gold-glow: rgba(255, 230, 0, 0.24);
        --red-glow: rgba(229, 30, 71, 0.3);
      }

      .roulette-main {
        padding: 40px 64px 80px;
      }

      .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28px;
        gap: 16px;
        flex-wrap: wrap;
      }

      .table-title {
        color: var(--yellow);
        font-size: clamp(42px, 7vw, 88px);
        font-weight: 900;
        letter-spacing: -0.045em;
        line-height: 0.95;
      }

      .header-stack {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .demo-badge,
      .balance-box {
        border: 1px solid var(--red);
        background: var(--panel);
        color: var(--yellow);
      }

      .demo-badge {
        padding: 14px 18px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .balance-box {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 24px;
      }

      .balance-label {
        color: var(--yellow);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .balance-amount {
        color: var(--yellow);
        font-size: 28px;
        font-weight: 900;
        min-width: 90px;
        text-align: right;
      }

      .roulette-shell {
        display: grid;
        grid-template-columns: minmax(280px, 0.85fr) minmax(460px, 1.35fr) minmax(260px, 0.75fr);
        gap: 24px;
        align-items: stretch;
      }

      .panel {
        background: radial-gradient(ellipse at 50% 0%, var(--red-glow), transparent 60%), var(--panel);
        border: 1px solid #1f1f1f;
        color: var(--yellow);
      }

      .wheel-panel {
        padding: 28px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        justify-content: space-between;
      }

      .wheel-wrap {
        position: relative;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
      }

      .wheel {
        position: relative;
        width: min(100%, 360px);
        aspect-ratio: 1;
        border-radius: 50%;
        border: 10px solid #1b1200;
        background:
          conic-gradient(
            #00884f 0deg 9.73deg,
            #b60025 9.73deg 19.46deg,
            #101010 19.46deg 29.19deg,
            #b60025 29.19deg 38.92deg,
            #101010 38.92deg 48.65deg,
            #b60025 48.65deg 58.38deg,
            #101010 58.38deg 68.11deg,
            #b60025 68.11deg 77.84deg,
            #101010 77.84deg 87.57deg,
            #b60025 87.57deg 97.3deg,
            #101010 97.3deg 107.03deg,
            #b60025 107.03deg 116.76deg,
            #101010 116.76deg 126.49deg,
            #b60025 126.49deg 136.22deg,
            #101010 136.22deg 145.95deg,
            #b60025 145.95deg 155.68deg,
            #101010 155.68deg 165.41deg,
            #b60025 165.41deg 175.14deg,
            #101010 175.14deg 184.87deg,
            #b60025 184.87deg 194.6deg,
            #101010 194.6deg 204.33deg,
            #b60025 204.33deg 214.06deg,
            #101010 214.06deg 223.79deg,
            #b60025 223.79deg 233.52deg,
            #101010 233.52deg 243.25deg,
            #b60025 243.25deg 252.98deg,
            #101010 252.98deg 262.71deg,
            #b60025 262.71deg 272.44deg,
            #101010 272.44deg 282.17deg,
            #b60025 282.17deg 291.9deg,
            #101010 291.9deg 301.63deg,
            #b60025 301.63deg 311.36deg,
            #101010 311.36deg 321.09deg,
            #b60025 321.09deg 330.82deg,
            #101010 330.82deg 340.55deg,
            #b60025 340.55deg 350.28deg,
            #101010 350.28deg 360deg
          );
        box-shadow: 0 0 0 1px rgba(255, 230, 0, 0.24), 0 0 60px rgba(229, 30, 71, 0.18);
        transition: transform 4s cubic-bezier(0.15, 0.8, 0.18, 1);
      }

      .wheel::before {
        content: "";
        position: absolute;
        inset: 18%;
        border-radius: 50%;
        background: radial-gradient(circle, #2b1d00 0 18%, #0a0a0a 19% 60%, #342300 61% 100%);
        border: 2px solid rgba(255, 230, 0, 0.4);
      }

      .wheel-number {
        position: absolute;
        inset: 31%;
        display: grid;
        place-items: center;
        color: var(--yellow);
        font-size: clamp(54px, 8vw, 86px);
        font-weight: 900;
        text-shadow: 0 0 28px var(--gold-glow), 0 2px 10px rgba(0, 0, 0, 0.8);
        z-index: 2;
        border-radius: 50%;
        background: radial-gradient(circle, #2b1d00 0 18%, #0a0a0a 19% 62%, #342300 63% 100%);
        border: 2px solid rgba(255, 230, 0, 0.4);
        box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.75), 0 0 26px rgba(255, 230, 0, 0.08);
        transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }

      .wheel-number.red {
        background: radial-gradient(circle, #d7193f 0 58%, #7d001a 59% 100%);
        border-color: rgba(255, 230, 0, 0.55);
        box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 0 34px rgba(229, 30, 71, 0.42);
      }

      .wheel-number.black {
        background: radial-gradient(circle, #242424 0 58%, #020202 59% 100%);
        border-color: rgba(255, 230, 0, 0.45);
        box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 230, 0, 0.14);
      }

      .wheel-number.green {
        background: radial-gradient(circle, #00a86b 0 58%, #00663f 59% 100%);
        border-color: rgba(255, 230, 0, 0.55);
        box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 0 34px rgba(0, 168, 107, 0.42);
      }

      .wheel-numbers {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
      }

      .wheel-number-slot {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        transform-origin: 0 0;
        pointer-events: none;
        z-index: 3;
      }

      .wheel-number-item {
        position: absolute;
        top: -132px;
        left: 0;
        width: 28px;
        height: 18px;
        display: grid;
        place-items: center;
        font-size: 11px;
        line-height: 1;
        font-weight: 800;
        color: #f4e9c8;
        text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        border-radius: 2px;
        letter-spacing: 0.5px;
      }
      .ball {
        --ball-track-radius: 152px;
        --ball-pocket-radius: 126px;
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: radial-gradient(circle at 32% 28%, #fffef0 0 24%, #fff8c5 25% 68%, #d9c86a 100%);
        box-shadow: 0 0 18px #fff8c5, 0 3px 10px rgba(0, 0, 0, 0.45);
        transform: rotate(0deg) translateY(calc(var(--ball-track-radius) * -1));
        z-index: 4;
        will-change: transform;
      }

      .status-card {
        border: 1px solid rgba(255, 230, 0, 0.16);
        padding: 18px;
        background: rgba(0, 0, 0, 0.45);
      }

      .result-text {
        font-size: 26px;
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1.1;
      }

      .result-sub {
        margin-top: 8px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        opacity: 0.75;
      }

      .betting-panel {
        padding: 24px;
      }

      .section-label {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.65;
        margin-bottom: 12px;
      }

      .number-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(34px, 1fr));
        gap: 7px;
      }

      .zero-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 7px;
      }

      .bet-cell,
      .outside-bet,
      .chip,
      .action-btn {
        font-family: inherit;
        font-weight: 900;
      }

      .bet-cell,
      .outside-bet {
        position: relative;
        border: 1px solid rgba(255, 230, 0, 0.22);
        color: var(--yellow);
        background: #101010;
        min-height: 46px;
        padding: 8px 4px;
        border-radius: 0;
        cursor: pointer;
      }

      .bet-cell.red { background: #8e001d; }
      .bet-cell.black { background: #080808; }
      .bet-cell.green { background: #007849; }

      .bet-cell:hover:not(:disabled),
      .outside-bet:hover:not(:disabled) {
        filter: brightness(1.2);
      }

      .bet-cell.selected,
      .outside-bet.selected {
        outline: 2px solid var(--yellow);
        box-shadow: 0 0 18px var(--gold-glow);
      }

      .bet-cell.win,
      .outside-bet.win {
        animation: winPulse 0.9s ease-in-out 4;
      }

      .stake-dot {
        position: absolute;
        right: 3px;
        bottom: 3px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 50px;
        display: inline-grid;
        place-items: center;
        background: var(--yellow);
        color: #1a0007;
        font-size: 9px;
        font-weight: 900;
      }

      .outside-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 14px;
      }

      .outside-bet {
        min-height: 58px;
        background: #0a0a0a;
        border-color: var(--red);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .outside-bet.red-bet { background: #8e001d; }
      .outside-bet.black-bet { background: #080808; }

      .controls-panel {
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
      }

      .chip-rail {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .chip {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: 3px dashed var(--yellow);
        background: var(--red);
        color: var(--yellow);
        padding: 0;
        cursor: pointer;
      }

      .chip.selected {
        background: var(--yellow);
        color: var(--red);
        border-color: var(--red);
      }

      .action-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .action-btn {
        background: var(--yellow);
        color: #1a0007;
        padding: 14px 24px;
        border-radius: var(--border-radius);
        border: none;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .action-btn.secondary {
        background: transparent;
        border: 1px solid var(--red);
        color: var(--yellow);
      }

      .action-btn:disabled,
      .chip:disabled,
      .bet-cell:disabled,
      .outside-bet:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .side-panel {
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 22px;
      }

      .stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .stat-card {
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 230, 0, 0.13);
        padding: 14px;
      }

      .stat-label {
        display: block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.55;
      }

      .stat-value {
        display: block;
        margin-top: 4px;
        font-size: 22px;
        font-weight: 900;
      }

      .history-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        min-height: 32px;
      }

      .history-chip {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--yellow);
        font-size: 12px;
        font-weight: 900;
        border: 1px solid rgba(255, 230, 0, 0.25);
      }

      .history-chip.red { background: #8e001d; }
      .history-chip.black { background: #080808; }
      .history-chip.green { background: #007849; }

      .bet-slip {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 13px;
      }

      .bet-slip-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 230, 0, 0.08);
      }

      .rules-panel {
        margin-top: 24px;
        padding: 24px;
        background: var(--panel);
        border: 1px solid #1f1f1f;
        color: var(--yellow);
      }

      .rules-panel h2 {
        font-size: 16px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 10px;
      }

      .rules-panel p {
        font-size: 14px;
        line-height: 1.6;
        opacity: 0.85;
        margin-bottom: 8px;
      }

      @keyframes winPulse {
        50% { box-shadow: 0 0 26px var(--gold-glow); transform: translateY(-2px); }
      }

      @media (max-width: 1180px) {
        .roulette-shell {
          grid-template-columns: 1fr 1fr;
        }
        .side-panel {
          grid-column: 1 / -1;
        }
      }

      @media (max-width: 820px) {
        .roulette-main {
          padding: 24px;
        }
        .roulette-shell {
          grid-template-columns: 1fr;
        }
        .number-grid {
          grid-template-columns: repeat(6, minmax(38px, 1fr));
        }
        .outside-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 560px) {
        .roulette-main {
          padding: 12px;
        }
        .site-header {
          padding: 10px 14px;
        }
        .nav {
          gap: 12px;
        }
        .nav-link,
        .login-btn {
          font-size: 12px;
        }
        .login-btn {
          padding: 7px 12px;
        }
        .table-title {
          font-size: 34px;
        }
        .balance-box,
        .demo-badge {
          padding: 8px 12px;
        }
        .balance-label {
          font-size: 10px;
        }
        .balance-amount {
          min-width: 56px;
          font-size: 18px;
        }
        .wheel-panel,
        .betting-panel,
        .side-panel,
        .rules-panel {
          padding: 14px;
        }
        .ball {
          --ball-track-radius: 110px;
          --ball-pocket-radius: 92px;
        }
        .number-grid {
          grid-template-columns: repeat(4, minmax(42px, 1fr));
        }
        .outside-grid {
          grid-template-columns: 1fr;
        }
        .controls-panel {
          justify-content: center;
        }
        .chip-rail,
        .action-row {
          justify-content: center;
        }
        .site-footer {
          padding: 12px 14px;
        }
        .footer-row {
          margin-bottom: 8px;
        }
        .footer-link,
        .footer-copy {
          font-size: 9px;
        }
      }