/* Game Page Styles */
      .game-page-container {
      display: flex;
      min-height: calc(100vh - 300px);
      background: linear-gradient(135deg, #FBB42E, #F68D33, #00A859);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      padding: 20px;
      position: relative;
      }
      @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
      }
      .floating-dice {
      position: absolute;
      font-size: 30px;
      color: rgba(255, 255, 255, 0.1);
      animation: float 20s infinite linear;
      z-index: 0;
      }
      @keyframes float {
      0% { transform: translateY(100vh) rotate(0deg); }
      100% { transform: translateY(-100px) rotate(360deg); }
      }
      .main-game-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 1;
      padding-right: 20px;
      }
      .game-box {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
      }
      .game-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      flex-wrap: wrap;
      gap: 15px;
      }
      .game-title {
      font-size: 28px;
      font-weight: bold;
      color: #333;
      margin: 0;
      }

      /* === Balance area with Invite & Dashboard buttons === */
      .balance-action-wrapper {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
      }
      .user-balance {
      background: #000;
      color: #FBB42E;
      border: 2px solid #FBB42E;
      padding: 8px 15px;
      border-radius: 30px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 0;
      }
      .action-btn {
          background: #000;
          color: #FBB42E;
          border: 2px solid #FBB42E;
          padding: 8px 16px;
          border-radius: 30px;
          font-weight: bold;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;
      }
      .action-btn:hover {
          background: #FBB42E;
          color: #000;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(251, 180, 46, 0.5);
      }
      .action-btn i {
          font-size: 14px;
      }

      .current-bet-display {
          position: absolute;
          top: 20px;
          right: 20px;
          background: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 10px 15px;
          border-radius: 10px;
          display: none;
          z-index: 100;
          animation: fadeIn 0.3s ease;
      }
      .current-bet-display.active {
          display: flex;
          align-items: center;
          gap: 10px;
      }
      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }
      .game-content {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-bottom: 20px;
      }
      .game-display-area {
      display: flex;
      gap: 20px;
      height: 400px;
      }
      .counting-box {
      margin-top: -33px;
      width: 30%;
      display: flex;
      flex-direction: column;
      gap: 15px;
      }
      .wheel-container {
      width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      }
      .dice-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      position: relative;
      }
      .spin-container {
      width: 350px;
      height: 350px;
      position: relative;
      margin: 0 auto 20px;
      }
      .spin-wheel {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      box-shadow:
      0 0 20px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.3);
      transform-origin: center;
      background: transparent !important;
      }
      #wheelCanvas {
      border-radius: 50%;
      position: relative;
      z-index: 1;
      }
      
      /* === Casino Style Rotating Pointer === */
      #pointerRotator {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          transform: translate(-50%, -50%) rotate(0deg);
          pointer-events: none;
          z-index: 20;
      }
      .spin-pointer {
          position: absolute;
          top: -15px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          border-top: 40px solid #FF0000;
          filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
      }
      .wheel-highlight {
          display: none; 
      }
      
      .dice-result {
      width: 100px;
      height: 100px;
      background: #11804C;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 40px;
      font-weight: bold;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      margin: 0 auto;
      }
      .fake-players-container {
      width: 30%;
      display: flex;
      flex-direction: column;
      gap: 15px;
      }
      .fake-players {
      background: rgba(0, 0, 0, 0.7);
      border-radius: 10px;
      padding: 10px;
      color: white;
      font-size: 12px;
      }
      .top-winners {
      font-weight: bold;
      margin-bottom: 10px;
      text-align: center;
      }

      /* === Top Winners with black bg, golden text, profile pics === */
      .top-winners-section-new {
          background: #000;
          border-radius: 12px;
          padding: 15px;
          color: #FFD700;
          border: 2px solid #FBB42E;
          box-shadow: 0 5px 20px rgba(251, 180, 46, 0.3);
      }
      .top-winners-title {
          text-align: center;
          font-weight: bold;
          margin-bottom: 12px;
          font-size: 15px;
          color: #FFD700;
          text-transform: uppercase;
          letter-spacing: 1px;
          border-bottom: 1px solid #FBB42E;
          padding-bottom: 8px;
      }
      .winner-row {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 5px;
          border-bottom: 1px solid rgba(251, 180, 46, 0.2);
      }
      .winner-row:last-child {
          border-bottom: none;
      }
      .winner-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid #FBB42E;
          flex-shrink: 0;
      }
      .winner-name {
          flex: 1;
          font-size: 13px;
          color: #FFD700;
          font-weight: 600;
      }
      .winner-coins {
          font-size: 12px;
          color: #FBB42E;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 4px;
      }
      .winner-coins i {
          font-size: 10px;
      }

      .fake-player {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      .fake-player:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
      }
      .player-name {
      font-size: 14px;
      color: #ffec64;
      }
      .player-coins {
      font-size: 12px;
      }
      .player-id {
      font-weight: bold;
      }
      .player-coins {
      color: #FBB42E;
      }
      .top-players-section {
      background: white;
      border-radius: 10px;
      padding: 10px;
      color: #333;
      margin-bottom: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      .top-players-header {
      text-align: center;
      font-weight: bold;
      margin-bottom: 10px;
      font-size: 14px;
      }
      .top-players-grid {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      }
      .top-player-card {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #FBB42E;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 3px;
      cursor: pointer;
      }
      .top-player-card:hover {
      transform: scale(1.1);
      box-shadow: 0 0 10px rgba(251, 180, 46, 0.5);
      }
      .top-player-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      }
      .player-online-status {
      font-size: 10px;
      color: #00A859;
      text-align: center;
      margin-top: 2px;
      }
      .live-count {
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 8px;
        margin-left: 6px;
        font-size: 11px;
        font-weight: 600;
        color: #00A859;
        background: rgba(0,168,89,0.1);
        border-radius: 20px;
        white-space: nowrap;
    }
      .game-controls-container {
      width: 100%;
      }
      .game-controls {
      width: 100%;
      max-width: 100%;
      }
      .recent-results {
      margin-bottom: 20px;
      text-align: center;
      }
      .recent-results h3 {
      font-size: 18px;
      margin-bottom: 10px;
      }
      .results-list {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 10px 0;
      width: 100%;
      max-width: 100%;
      scrollbar-width: thin;
      scrollbar-color: #FBB42E #f1f1f1;
      }
      .results-list::-webkit-scrollbar {
      height: 8px;
      }
      .results-list::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
      }
      .results-list::-webkit-scrollbar-thumb {
      background: #FBB42E;
      border-radius: 10px;
      }
      .result-number {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
      font-size: 16px;
      flex-shrink: 0;
      }
      .result-number.range-a { background: #FF0000; }
      .result-number.range-b { background: #0000FF; }
      .result-number.range-c { background: #00A859; }

      /* === Custom Bet Input Field (Wider) === */
      .custom-bet-input-wrapper {
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
      }
      .custom-bet-input-group {
          display: flex;
          align-items: center;
          background: #000;
          border-radius: 30px;
          overflow: hidden;
          border: 2px solid #FBB42E;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }
      .bet-input-btn {
          background: #000;
          color: #FBB42E;
          border: none;
          width: 50px;
          height: 50px;
          font-size: 24px;
          font-weight: bold;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .bet-input-btn:hover {
          background: #FBB42E;
          color: #000;
      }
      .bet-input-btn:active {
          transform: scale(0.95);
      }
      .custom-bet-input {
          background: #000;
          color: #FFD700;
          border: none;
          width: 160px;
          height: 50px;
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          outline: none;
          -moz-appearance: textfield;
      }
      .custom-bet-input::-webkit-outer-spin-button,
      .custom-bet-input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }

      .betting-card {
        background:red;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        position: relative; 
        overflow: hidden;
        height: 180px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
      .betting-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      }
      .betting-card[data-range="1-7"]::before { background: linear-gradient(90deg, #FBB42E, #F68D33); }
      .betting-card[data-range="8-14"]::before { background: linear-gradient(90deg, #F68D33, #FBB42E); }
      .betting-card[data-range="15-21"]::before { background: linear-gradient(90deg, #00A859, #11804C); }
      .betting-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }
      .betting-card.selected {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      border: 3px solid #fff;
      transform: scale(1.05);
      }
      .betting-card[data-range="1-7"].selected {
      background: linear-gradient(135deg, #FBB42E, #F68D33);
      color: black;
      box-shadow: 0 0 20px rgba(251, 180, 46, 0.7);
      border: 3px solid #FF0000;
      }
      .betting-card[data-range="8-14"].selected {
      background: linear-gradient(135deg, #F68D33, #FBB42E);
      color: black;
      box-shadow: 0 0 20px rgba(246, 141, 51, 0.7);
      border: 3px solid #0000FF;
      }
      .betting-card[data-range="15-21"].selected {
      background: linear-gradient(135deg, #00A859, #11804C);
      color: black;
      box-shadow: 0 0 20px rgba(0, 168, 89, 0.7);
      border: 3px solid #00A859;
      }
      .betting-card.result-highlight {
      box-shadow: 0 0 20px yellow;
      animation: pulse 1s ease-in-out;
      }
      .betting-card.result-highlight .betting-header {
      animation: textPulse 1s ease-in-out;
      }
      .betting-card.result-highlight .numbers-row {
      animation: textPulse 1s ease-in-out;
      }
      @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
      }
      @keyframes textPulse {
      0% { font-size: 24px; }
      50% { font-size: 28px; }
      100% { font-size: 24px; }
      }

      /* === Winning row & number highlight === */
      .betting-card.winning-card {
          box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255, 215, 0, 0.5);
          animation: winningGlow 1.5s ease-in-out infinite;
      }
      @keyframes winningGlow {
          0%, 100% { box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255, 215, 0, 0.5); }
          50% { box-shadow: 0 0 50px #FFD700, 0 0 80px rgba(255, 215, 0, 0.8); }
      }
      .betting-card.winning-card .numbers-row {
          background: rgba(0, 0, 0, 0.9) !important; 
          border-radius: 8px;
          padding: 5px;
      }
      .num-box.winning-number {
          background: #000 !important;
          color: #FFD700 !important; 
          border-color: #FFD700 !important;
          width: 45px !important;
          height: 45px !important;
          font-size: 22px !important; 
          font-weight: 900 !important;
          transform: scale(1.3);
          box-shadow: 0 0 20px #FFD700, 0 0 40px rgba(255, 215, 0, 0.7);
          animation: winningNumberPulse 1s ease-in-out infinite;
          z-index: 10;
      }
      @keyframes winningNumberPulse {
          0%, 100% { transform: scale(1.3); box-shadow: 0 0 20px #FFD700; }
          50% { transform: scale(1.4); box-shadow: 0 0 35px #FFD700, 0 0 50px rgba(255, 215, 0, 0.9); }
      }

      .betting-header {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      color: white;
      }
      .numbers-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1px;
      justify-content: center;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      }
      .num-box {
      width: 30px;
      height: 30px;
      border: 2px solid #F68D33;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      background: #fff;
      transition: all 0.3s ease;
      }
      .num-box:hover {
      background: #F68D33;
      color: #fff;
      }
      .num-box.selected-number {
      background: #000 !important;
      color: #FBB42E !important;
      border-color: #FBB42E !important;
      width: 40px !important;
      height: 40px !important;
      font-size: 18px !important;
      transform: scale(1.2);
      box-shadow: 0 0 15px rgba(251, 180, 46, 0.7);
      animation: numberPulse 2s ease-in-out;
      }
      @keyframes numberPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1.2); }
      }
      .betting-payout {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        margin-top: 5px;
        background: rgba(0, 0, 0, 0.7);
        display: block;
        text-align: center;
        width: 100%;
        position: relative;
        z-index: 5;
      }
      
      /* Bet amount display on card top right corner */
      .bet-amount-display {
          position: absolute;
          top: 8px;
          right: 8px;
          background: rgba(0, 0, 0, 0.85);
          color: #FBB42E;
          padding: 4px 8px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 4px;
          z-index: 15;
          border: 1px solid #FBB42E;
      }
      .bet-amount-display.my-bet {
          background: rgba(0, 168, 89, 0.9);
          color: #fff;
          border: 1px solid #fff;
      }
      .bet-amount-display.my-bet i {
          color: #fff;
      }
      .bet-amount-display i {
          color: #FBB42E;
          font-size: 10px;
      }

      /* === Visible Stacked Coins in Box === */
      .coins-stack {
          position: absolute;
          bottom: 5px;
          width: 45%;
          height: 24px;
          display: flex;
          align-items: flex-end;
          gap: 2px;
          pointer-events: none;
          z-index: 6;
      }
      .left-stack { left: 5px; justify-content: flex-start; }
      .right-stack { right: 5px; justify-content: flex-end; }
      .mini-coin {
          width: 16px;
          height: 16px;
          background: linear-gradient(135deg, #FBB42E, #F68D33);
          border-radius: 50%;
          border: 1px solid #fff;
          box-shadow: 0 2px 4px rgba(0,0,0,0.4);
          display: inline-block;
          animation: coinDrop 0.3s ease-out;
      }
      @keyframes coinDrop {
          0% { transform: translateY(-20px) scale(0.5); opacity: 0; }
          100% { transform: translateY(0) scale(1); opacity: 1; }
      }
      
      .coin-slider-container {
      margin-bottom: 20px;
      }
      .slider-label {
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
      }
      .coin-carousel {
      margin-bottom: 10px;
      }
      .carousel-container {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      background: #f8f9fa;
      padding: 10px 40px;
      }
      .carousel-track {
      display: flex;
      transition: transform 0.3s ease;
      width: max-content;
      }
      .coin-option {
      min-width: 60px;
      height: 60px;
      background: #f8f9fa;
      border: 2px solid #e9ecef;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-right: 10px;
      }
      .coin-option:hover {
      transform: scale(1.1);
      }
      .coin-option.active {
      background: linear-gradient(135deg, #FBB42E, #F68D33);
      color: white;
      border-color: #FBB42E;
      }
      .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 16px;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .prev-btn { left: 5px; }
      .next-btn { right: 5px; }
      .selected-bet {
      text-align: center;
      font-weight: bold;
      color: #333;
      }
      .countdown-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      }
      .countdown-container.active {
      display: flex;
      }
      .countdown-timer {
      width: 60px;
      height: 60px;
      background: #11804C;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      }
      .countdown-timer.low-time {
      animation: pulse 1s infinite;
      background: #CC0000 !important;
      }
      @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
      }
      .countdown-text {
      font-weight: bold;
      color: #333;
      }

      /* === Low Time Warning - Centered & Bigger === */
      .low-time-warning {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 36px;
      color: #FF0000;
      font-weight: 900;
      text-shadow: 0 0 10px rgba(0,0,0,1), 0 0 20px rgba(255,0,0,0.8);
      display: none;
      animation: flash 0.5s infinite;
      z-index: 1001;
      background: rgba(0, 0, 0, 0.8);
      padding: 15px 30px;
      border-radius: 15px;
      border: 3px solid #FF0000;
      box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
      white-space: nowrap;
      text-align: center;
      }
      @keyframes flash {
      0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      }

      /* === Game History Black & Gold Theme === */
      .game-history {
      background: #000;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 2px solid #FBB42E;
      color: #FBB42E;
      }
      .game-history h3 {
      margin-top: 0;
      margin-bottom: 15px;
      color: #FFD700;
      }
      .history-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      }
      .history-item {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: rgba(251, 180, 46, 0.1);
      border-radius: 8px;
      color: #FBB42E;
      }
      .history-item.win { border-left: 4px solid #00A859; }
      .history-item.lose { border-left: 4px solid #F68D33; }

      .right-sidebar {
      width: 300px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      z-index: 1;
      }
      .sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e9ecef;
      }
      .sidebar-header h3 { margin: 0; color: #333; }
      .online-count {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      color: #6c757d;
      }
      .online-indicator {
      width: 10px;
      height: 10px;
      background: #00A859;
      border-radius: 50%;
      display: inline-block;
      }
      .users-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
      }
      .user-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
      transition: background 0.3s ease;
      }
      .user-item:hover { background: #f8f9fa; }
      .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      }
      .user-info { flex: 1; }
      .user-name { font-weight: bold; margin-bottom: 2px; }
      .user-status {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: #6c757d;
      }
      .status-dot {
      width: 8px;
      height: 8px;
      background: #00A859;
      border-radius: 50%;
      }
      .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
      }
      .modal.active { display: flex; }
      .modal-content {
      background-color: white;
      border-radius: 15px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      animation: modalFadeIn 0.3s ease;
      }
      
      /* === Attractive Win / Lose Modals === */
      .modal-content.win-state {
          border: 4px solid #00A859;
          box-shadow: 0 0 30px rgba(0, 168, 89, 0.6);
      }
      .modal-content.lose-state {
          border: 4px solid #CC0000;
          box-shadow: 0 0 30px rgba(204, 0, 0, 0.6);
          animation: shake 0.5s ease-in-out;
      }
      @keyframes shake {
          0%, 100% { transform: translateX(0); }
          20% { transform: translateX(-10px); }
          40% { transform: translateX(10px); }
          60% { transform: translateX(-5px); }
          80% { transform: translateX(5px); }
      }
      @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
      }
      .modal-header {
      padding: 15px 20px;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      justify-content: flex-end;
      }
      .close {
      color: #aaa;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      }
      .close:hover { color: #000; }
      .modal-body {
      padding: 20px;
      text-align: center;
      }
      .result-message {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      }
      .result-message i { font-size: 80px; }
      #winMessage i { 
          color: #FBB42E; 
          animation: pulseGold 1.5s infinite; 
      }
      #loseMessage i { 
          color: #CC0000; 
          animation: pulseRed 1.5s infinite; 
      }
      @keyframes pulseGold {
          0%, 100% { text-shadow: 0 0 10px rgba(251,180,46,0.5); transform: scale(1); }
          50% { text-shadow: 0 0 25px rgba(251,180,46,0.9); transform: scale(1.1); }
      }
      @keyframes pulseRed {
          0%, 100% { text-shadow: 0 0 10px rgba(204,0,0,0.5); transform: scale(1); }
          50% { text-shadow: 0 0 25px rgba(204,0,0,0.9); transform: scale(1.1); }
      }
      .win-number-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      }
      .number-circle {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: #11804C;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 60px;
      font-weight: bold;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      animation: numberPop 0.5s ease;
      }
      @keyframes numberPop {
      0% { transform: scale(0); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
      }
      .modal-footer {
      padding: 15px 20px;
      border-top: 1px solid #e9ecef;
      text-align: center;
      display: none;
      }
      .btn-continue {
      background: linear-gradient(135deg, #00A859, #11804C);
      color: white;
      border: none;
      border-radius: 30px;
      padding: 10px 30px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      }
      .btn-continue:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }
      #fireworksCanvas, #confettiCanvas, #flyingCoinsCanvas, #randomCoinsCanvas, #cardCoinsCanvas, #playerCoinsCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: none;
      }
      #fireworksCanvas { z-index: 999; }
      #confettiCanvas { z-index: 998; }
      #flyingCoinsCanvas { z-index: 997; }
      #randomCoinsCanvas { z-index: 996; display: block; }
      #cardCoinsCanvas { z-index: 995; display: block; }
      #playerCoinsCanvas { z-index: 994; display: block; }
      #fireworksCanvas.active, #confettiCanvas.active, #flyingCoinsCanvas.active { display: block; }
      @keyframes celebrate {
      0% { transform: scale(1) rotate(0deg); }
      50% { transform: scale(1.2) rotate(180deg); }
      100% { transform: scale(1) rotate(360deg); }
      }
      @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      }
      .celebrate-animation { animation: celebrate 1s ease-in-out; }
      .bounce-animation { animation: bounce 0.5s ease-in-out; }

      /* === Bet All Button Black & Gold Theme === */
      .bet-all-button {
          background: #000;
          color: #FBB42E;
          border: 2px solid #FBB42E;
          border-radius: 30px;
          padding: 10px 30px;
          font-weight: bold;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-top: 15px;
          width: 100%;
      }
      .bet-all-button:hover {
          background: #FBB42E;
          color: #000;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }
      .bet-all-button:disabled {
          background: #333;
          color: #666;
          border-color: #666;
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
      }
      .user-item.coin-animation {
          box-shadow: 0 0 15px rgba(251, 180, 46, 0.7);
          transform: scale(1.05);
      }
      
      /* === Mobile Responsive Layout Reorder === */
      @media (max-width: 992px) {
      .game-page-container { flex-direction: column; padding: 15px; }
      .main-game-area { padding-right: 0; margin-bottom: 20px; }
      .right-sidebar { width: 100%; order: 2; }
      .game-box { padding: 20px; position: relative; }
      .game-header { position: relative; z-index: 20; margin-bottom: 15px; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; }
      .game-title { display: none; }
      .balance-action-wrapper { width: 100%; justify-content: center; gap: 10px; }
      
      .game-content { position: relative; display: flex; flex-direction: column; gap: 25px; }
      .game-display-area { display: contents; }
      .game-controls-container { display: contents; }
      .game-controls { display: contents; }
      
      .wheel-container { order: 1; width: 100%; max-width: 280px; margin: 30px auto 0; position: relative; z-index: 1; }
      
      .counting-box { order: 2; width: 100%; margin-top: 40px; flex-direction: column; gap: 15px; }
      .counting-box .betting-card { height: auto; padding: 15px; display: flex; flex-direction: column; }
      .counting-box .betting-header { font-size: 22px; margin-bottom: 10px; }
      .counting-box .numbers-row { display: flex !important; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; }
      .counting-box .num-box { width: 32px; height: 32px; font-size: 12px; }
      .counting-box .betting-payout { font-size: 18px; margin-top: auto; }
      .bet-all-button { padding: 12px; font-size: 16px; margin-top: 5px; width: 100%; }

      .custom-bet-input-wrapper { order: 3; width: 100%; max-width: 280px; margin: 0 auto; }
      .custom-bet-input-group { width: 100%; }
      .custom-bet-input { width: 100%; height: 50px; font-size: 20px; }
      .bet-input-btn { width: 50px; height: 50px; font-size: 24px; }
      
      .coin-slider-container { order: 4; width: 100%; margin-bottom: 0; }
      
      .recent-results { 
          order: 5; 
          width: 100%; 
          margin-bottom: 0; 
          position: static; 
          background: rgba(255, 255, 255, 0.95); 
          padding: 15px; 
          border-radius: 10px; 
          box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }
      .recent-results h3 { font-size: 16px; margin-bottom: 10px; }
      .results-list { gap: 8px; padding: 0; overflow-x: auto; justify-content: center; }
      .result-number { width: 35px; height: 35px; font-size: 14px; }
      
      .fake-players-container { order: 6; width: 100%; margin-top: 0; flex-direction: column; gap: 15px; }
      .top-players-section { width: 100%; margin-bottom: 0; }
      .top-winners-section-new { width: 100%; }

      .countdown-container { order: 7; margin-top: 10px; }

      .spin-container { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1/1; margin: 0 auto; }
      .dice-container { position: relative; margin-bottom: 0; }
      .dice-result { 
          position: absolute; 
          top: 50%; 
          left: 50%; 
          transform: translate(-50%, -50%); 
          width: 60px; 
          height: 60px; 
          font-size: 28px; 
          margin: 0; 
          z-index: 10; 
          border: 3px solid #fff; 
      }

      .modal-content { width: 95%; margin: 10px; }
      .low-time-warning { font-size: 28px; padding: 10px 20px; }
      }
      @media (max-width: 768px) {
      .game-box { padding: 15px; }
      .user-balance { font-size: 14px; }
      .spin-container { max-width: 100%; }
      .dice-result { width: 50px; height: 50px; font-size: 24px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
      .coin-option { width: 45px; height: 45px; font-size: 12px; min-width: 45px; }
      .carousel-container { padding: 8px 35px; }
      .carousel-btn { width: 28px; height: 28px; font-size: 14px; }
      .countdown-timer { width: 50px; height: 50px; font-size: 20px; }
      .history-item { flex-direction: column; gap: 5px; font-size: 14px; padding: 8px; }
      .users-list { gap: 10px; }
      .user-item { padding: 8px; }
      .user-avatar { width: 35px; height: 35px; }
      .user-name { font-size: 14px; }
      .user-status { font-size: 11px; }
      .low-time-warning { font-size: 24px; }
      }
      @media (max-width: 576px) {
      .game-page-container { padding: 10px; }
      .game-box { padding: 10px; }
      .spin-container { max-width: 180px; }
      .dice-result { width: 45px; height: 45px; font-size: 22px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
      .coin-option { width: 40px; height: 40px; font-size: 11px; min-width: 40px; }
      .carousel-container { padding: 6px 30px; }
      .carousel-btn { width: 26px; height: 26px; font-size: 12px; }
      .countdown-timer { width: 40px; height: 40px; font-size: 18px; }
      .countdown-text { font-size: 14px; }
      .modal-body { padding: 15px; }
      .result-message h2 { font-size: 20px; }
      .result-message p { font-size: 14px; }
      .btn-continue { padding: 8px 20px; font-size: 14px; }
      .low-time-warning { font-size: 20px; padding: 8px 15px; }
      .top-player-card { width: 24px; height: 24px; margin: 0 2px; }
      .player-online-status { font-size: 8px; }
      .live-count { font-size: 12px; }
      .balance-action-wrapper { gap: 8px; }
      .action-btn { padding: 6px 12px; font-size: 11px; }
      .custom-bet-input { font-size: 18px; height: 45px; }
      .bet-input-btn { width: 45px; height: 45px; font-size: 22px; }
      .counting-box .betting-header { font-size: 18px; }
      .counting-box .betting-payout { font-size: 16px; }
      .counting-box .num-box { width: 28px; height: 28px; font-size: 11px; }
      }