:root {
      --dark-bg: #000000;
      --gold: #ffc107;
      --red: #dc3545;
    }
    
    body {
      background-color:#2e1a4f;
      color: white;
      font-family: Arial, sans-serif;
    }
    
    .navbar-brand img {
      height: 40px;
    }
    .contentss{
	padding-bottom:80px;
	}
.warning-banner {
  background-color: #a172fe;
  color: #fff;
  height: 18px;            /* 设定整体高度 */
  padding: 0 12px;         /* 左右内边距 */
  box-sizing: border-box;
  display: flex;           /* 让内容可垂直居中 */
  align-items: center;     /* 垂直居中 */
  overflow: hidden;        /* 防止内容超出抖动 */
}

.warning-banner marquee {
  width: 100%;
  display: block;
  font-size: 14px;         /* 注意：0.rem 是无效值，改成具体大小 */
  line-height: 1;
}
    .warning-text {
      color: white;
    }
    
    .banned-game {
      color: red;
      font-weight: bold;
    }
    
    .warning-icon {
      color: #ff9800;
    }
    
  
    
    .category-item {
      background-color: #000;
      
      padding: 15px;
      text-align: center;
      transition: transform 0.3s;
    }
    
    .category-item:hover {
      transform: scale(1.05);
      border-color: var(--gold);
    }
    
   .category-icon {
  max-width: 100px;
  max-height: 100px;
  margin-bottom: 5px;
}
@media (max-width: 768px) {
  .category-icon {
    max-width: 65px;
    max-height:65px;
  }
}
    
    .game-card {
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;
      position: relative;
    }
    
    .game-card img {
      width: 100%;
      transition: transform 0.3s;
    }
    
    .game-card:hover img {
      transform: scale(1.05);
    }
    
    .game-provider {
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 70px;
    }
    
    .login-register-buttons .btn {
      font-weight: bold;
      padding: 8px 30px;
      margin: 0 5px;
    }
    
    .login-btn {
      background-color: var(--red);
      border: none;
    }
    
    .register-btn {
      background-color: var(--gold);
      color: black;
      border: none;
    }
    
    .account-section {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
    }
    
    .balance-amount {
      color: var(--gold);
      font-size:0.9rem;
      font-weight: bold;
    }
    
    .minimum-info {
      font-size: 0.8rem;
      color: #ccc;
    }
    
    .action-btn {
      background-color: transparent;
      border: 1px solid var(--gold);
      color: var(--gold);
      border-radius: 20px;
      padding: 8px 20px;
      margin: 5px 0;
      width: 100%;
      transition: all 0.3s;
    }
    
    .action-btn:hover {
      background-color: var(--gold);
      color: black;
    }
    
    .refresh-btn {
      background-color: transparent;
      border: 1px solid var(--gold);
      color: var(--gold);
      border-radius: 20px;
      padding: 8px 15px;
      transition: all 0.3s;
    }
    
    .refresh-btn:hover {
      background-color: var(--gold);
      color: black;
    }
    
    .transaction-table {
	width:100%;
      font-size: 0.8rem;
      background-color: rgba(0, 0, 0, 0.7);
    }
    
    .transaction-table th {
      background-color: var(--red);
      color: white;
      text-align: center;
    }
    
    .transaction-table td {
      padding: 8px;
      text-align: center;
    }
    
    .amount-positive {
      color: var(--gold);
    }
    
    .username-masked {
      color: #aaa;
    }
    
    .leaderboard-section {
      background-image: linear-gradient(to right, #000, #300, #000);
      border-radius: 10px;
      padding: 15px;
      margin-top: 20px;
      position: relative;
    }
    
    .leaderboard-title {
      color: var(--gold);
      font-size: 2rem;
      text-align: center;
      text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    }
    
    .game-tips-button {
      background-color: var(--red);
      color: white;
      position: absolute;
      right: 20px;
      bottom: 20px;
      padding: 5px 15px;
      border-radius: 5px;
      font-size: 0.8rem;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .nav-bottom {
      background-color: rgba(0, 0, 0, 0.8);
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px 0;
      text-align: center;
    }
    
    .nav-bottom-icon {
      width: 30px;
      height: 30px;
      display: inline-block;
      margin: 0 20px;
    }
    
    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: var(--red);
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .banner-logo {
      max-width: 100%;
      border-radius: 10px;
      border: 1px solid rgba(255, 193, 7, 0.3);
    }
    
    .steps-guide {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
    }
    
    .step {
      text-align: center;
      color: #ccc;
      font-size: 0.8rem;
      flex: 1;
    }
    
    .step-number {
      background-color: var(--gold);
      color: black;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .navbar .overlay {
  position: absolute;
  inset: 0;
  background: rgb(24 18 31 / 70%); /* 半透明层 */
}
.coin {
  width: 30px;
  height: 30px;
  background: url('/Public/mickey/coin.png') no-repeat center/contain;
   transform-style: preserve-3d;
  animation: coin-bounce 2s ease-in-out infinite;
}

@keyframes coin-bounce {
  0% {
    transform: translateY(0) rotateY(0deg);
  }
  20% {
    transform: translateY(-1px) rotateY(90deg); /* 跳起并翻转一半 */
  }
  40% {
    transform: translateY(-10px) rotateY(180deg); /* 到顶点翻转到背面 */
  }
  60% {
    transform: translateY(-1px) rotateY(270deg); /* 下落继续翻 */
  }
  100% {
    transform: translateY(0) rotateY(360deg); /* 回到原位并转完一圈 */
  }
}