* { box-sizing: border-box; margin: 0; padding: 0; }

img.emoji {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
  display: inline-block;
}

body {
  background: #0d0d1a;
  color: #f0e6ff;
  font-family: 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── AUTH ─────────────────────────────────────────── */
#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0033 0%, #0d0d1a 70%);
}

.auth-box {
  background: #1a0a2e;
  border: 2px solid #5500aa;
  border-radius: 20px;
  padding: 40px 36px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 0 40px #5500aa66;
}

.auth-box .logo { font-size: 2.2rem; text-align: center; }
.auth-box .slogan { text-align: center; font-size: 0.95rem; color: #cc99ff; font-style: italic; }

.auth-tabs { display: flex; gap: 8px; }

.tab-btn {
  flex: 1; padding: 8px;
  border-radius: 10px; border: 2px solid #5500aa;
  background: transparent; color: #cc99ff;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.tab-btn.active {
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #1a0033; border-color: transparent;
}

.auth-error { color: #ff4444; font-size: 0.85rem; text-align: center; min-height: 18px; }

.auth-box input {
  width: 100%; padding: 10px 14px;
  border-radius: 10px; border: 1px solid #5500aa;
  background: #2a0a4e; color: #fff; font-size: 1rem;
}
.auth-box input:focus { outline: none; border-color: #ffd700; }

.auth-submit {
  width: 100%; padding: 12px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #1a0033; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.auth-submit:hover { opacity: 0.85; }

.forgot-password-btn {
  width: 100%; padding: 8px; border-radius: 10px;
  border: 1px solid #5500aa;
  background: transparent; color: #cc99ff;
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.forgot-password-btn:hover { background: #2a0a4e; }

/* ── HEADER ───────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #1a0033, #3d0066);
  padding: 12px 24px;
  border-bottom: 3px solid #ffd700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.header-left { display: flex; flex-direction: column; }

.logo {
  font-size: 1.8rem; font-weight: 900;
  letter-spacing: 3px; color: #ffd700;
  text-shadow: 0 0 16px #ffd700aa;
}
.logo span { color: #ff4444; }
.slogan { font-size: 0.8rem; color: #cc99ff; font-style: italic; }

.header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.balance {
  background: #ffd700; color: #1a0033;
  font-weight: 700; font-size: 1rem;
  padding: 6px 18px; border-radius: 20px;
}

.user-info { display: flex; align-items: center; gap: 10px; color: #cc99ff; font-size: 0.9rem; }

.logout-btn {
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid #5500aa; background: transparent;
  color: #cc99ff; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.logout-btn:hover { background: #5500aa; color: #fff; }

.discord-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid #5865F2; background: #5865F2;
  color: #fff; font-size: 0.85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background 0.2s;
}
.discord-btn:hover { background: #4752c4; border-color: #4752c4; }

.music-btn {
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid #5500aa; background: transparent;
  font-size: 1.1rem; cursor: pointer; transition: all 0.2s;
  line-height: 1;
}
.music-btn:hover { background: #5500aa; }

/* ── NAV ──────────────────────────────────────────── */
.game-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 16px;
  background: #110022;
  border-bottom: 2px solid #2a0a4e;
}

.nav-btn {
  padding: 8px 16px; border-radius: 10px; border: none;
  background: #2a0a4e; color: #cc99ff;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.nav-btn:hover { background: #3d0a6e; color: #fff; }
.nav-btn.active {
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #1a0033;
}

/* ── PAGES ────────────────────────────────────────── */
#game-main { padding: 32px 16px; max-width: 700px; margin: 0 auto; }

.page { display: flex; justify-content: center; }
.page.hidden { display: none; }

.game-card {
  background: #1a0a2e;
  border: 2px solid #5500aa;
  border-radius: 20px;
  padding: 32px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 0 32px #5500aa44;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-card h2 { font-size: 1.5rem; color: #ffd700; text-align: center; }

/* ── SLOTS ────────────────────────────────────────── */
.slots { display: flex; justify-content: center; gap: 16px; }

.reel {
  width: 88px; height: 88px;
  background: #2a0a4e; border: 2px solid #ffd700;
  border-radius: 14px; font-size: 3rem;
  display: flex; align-items: center; justify-content: center;
}
.reel.spinning { animation: reel-spin 0.15s linear infinite; }

@keyframes reel-spin {
  0%,100% { transform: scaleY(1); }
  50%      { transform: scaleY(0); }
}

.paytable {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; font-size: 0.78rem; color: #9966cc;
}

/* ── ROULETTE ─────────────────────────────────────── */
.roulette-wheel {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(#cc0000 0deg 180deg, #111 180deg 360deg);
  border: 4px solid #ffd700; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 900; color: #fff;
}
.roulette-wheel.spinning {
  animation: rou-spin 1.5s cubic-bezier(0.2,0.8,0.4,1) forwards;
}
@keyframes rou-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1440deg); }
}

/* ── BLACKJACK ────────────────────────────────────── */
.cards-area { display: flex; justify-content: space-around; gap: 16px; }
.label { font-size: 0.85rem; color: #cc99ff; margin-bottom: 6px; text-align: center; }
.hand { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 44px; }
.card-chip {
  background: #fff; color: #1a0033;
  border-radius: 6px; padding: 5px 10px;
  font-weight: 700; font-size: 0.95rem;
}
.card-chip.red { color: #cc0000; }
.score { text-align: center; font-size: 0.8rem; color: #ffd700; margin-top: 4px; }

/* ── DICE ─────────────────────────────────────────── */
.dice-display { display: flex; justify-content: center; gap: 24px; }
.die {
  width: 80px; height: 80px;
  background: #2a0a4e; border: 2px solid #ffd700;
  border-radius: 14px; font-size: 2.8rem;
  display: flex; align-items: center; justify-content: center;
}
.die.rolling { animation: reel-spin 0.1s linear infinite; }

/* ── MINES ────────────────────────────────────────── */
.mines-card { max-width: 560px; }
.mines-info {
  display: flex; justify-content: space-between;
  font-size: 0.9rem; color: #cc99ff; align-items: center;
}
.mines-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 8px;
}
.mine-cell {
  aspect-ratio: 1; background: #2a0a4e;
  border: 2px solid #5500aa; border-radius: 10px;
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.mine-cell:hover:not(.revealed) { background: #3d0a6e; transform: scale(1.06); }
.mine-cell.safe  { background: #0a3d1a; border-color: #44ff88; cursor: default; }
.mine-cell.bomb  { background: #3d0a0a; border-color: #ff4444; cursor: default; }

/* ── HI-LO ────────────────────────────────────────── */
.hilo-display { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hilo-card {
  width: 80px; height: 110px;
  background: #fff; color: #1a0033;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  box-shadow: 0 4px 16px #0008;
}
.hilo-card.dim { opacity: 0.35; }
.hilo-card.red-card { color: #cc0000; }
.hilo-arrow { font-size: 2rem; color: #5500aa; }

/* ── COIN ─────────────────────────────────────────── */
.coin-display { font-size: 5rem; text-align: center; }
.coin-display.flipping { animation: coin-flip 0.6s linear; }
@keyframes coin-flip {
  0%,100% { transform: scaleX(1); }
  25%,75% { transform: scaleX(0); }
}

/* ── CRASH ────────────────────────────────────────── */
.crash-card { max-width: 620px; }

.crash-arena {
  position: relative;
  background: #0a0018;
  border: 2px solid #2a0a4e;
  border-radius: 12px;
  overflow: hidden;
}

#crash-canvas { display: block; width: 100%; height: auto; }

.crash-multiplier {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: 2.8rem; font-weight: 900; color: #ffd700;
  text-shadow: 0 0 20px #ffd700;
  pointer-events: none;
}

.crash-multiplier.crashed { color: #ff4444; text-shadow: 0 0 20px #ff4444; }
.crash-multiplier.cashed  { color: #44ff88; text-shadow: 0 0 20px #44ff88; }

.crash-status {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 0.85rem; color: #cc99ff; white-space: nowrap;
  pointer-events: none;
}

/* ── SHARED ───────────────────────────────────────── */
.bet-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
}
.bet-row label { font-size: 0.9rem; color: #cc99ff; }

input[type="number"],
input[type="text"][inputmode="numeric"] {
  width: 76px; padding: 6px 8px;
  border-radius: 8px; border: 1px solid #5500aa;
  background: #2a0a4e; color: #fff; font-size: 0.95rem;
}
input[type="number"]:focus,
input[type="text"][inputmode="numeric"]:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
#crash-speed-custom {
  width: 70px;
  transition: all 0.3s;
}
select {
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid #5500aa; background: #2a0a4e; color: #fff; font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
select:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
select:hover {
  border-color: #7700cc;
}
button {
  padding: 9px 18px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #1a0033; font-weight: 700; font-size: 0.9rem;
  cursor: pointer; transition: opacity 0.2s, transform 0.1s;
}
button:hover:not(:disabled) { opacity: 0.85; transform: scale(1.04); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.result {
  text-align: center; font-size: 1rem; font-weight: 600;
  min-height: 24px; color: #ffd700;
}
.result.lose { color: #ff4444; }
.result.win  { color: #44ff88; }

footer {
  text-align: center; padding: 16px;
  color: #664488; font-size: 0.78rem;
  border-top: 1px solid #2a0a4e;
}

/* ── PARTICLES ────────────────────────────────────── */
#particles-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0;
  animation: particle-fall linear infinite;
  user-select: none;
}

@keyframes particle-fall {
  0%   { transform: translateY(-40px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.45; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* make sure game content sits above particles */
header, .game-nav, #game-main, footer, #auth-screen {
  position: relative;
  z-index: 1;
}

/* ── HORSES ───────────────────────────────────────── */
.horses-card { max-width: 660px; }

.horses-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0a1a0a;
  border: 2px solid #2a4a2a;
  border-radius: 12px;
  padding: 10px 8px;
  overflow: hidden;
}

.track-lane {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 62px;
}

.lane-label {
  width: 28px;
  font-size: 0.75rem;
  color: #aaa;
  text-align: center;
  flex-shrink: 0;
}

.track-road {
  flex: 1;
  height: 58px;
  background: repeating-linear-gradient(
    90deg,
    #1a3a1a 0px, #1a3a1a 30px,
    #162e16 30px, #162e16 60px
  );
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.finish-line {
  position: absolute;
  right: 0;
  top: 0; bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(
    180deg,
    #fff 0px, #fff 6px,
    #000 6px, #000 12px
  );
  z-index: 2;
}

.horse-wrap {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 54px;
  transition: left 0.05s linear;
  z-index: 1;
}

.horse-svg {
  width: 100%;
  height: 100%;
}

/* leg gallop animation */
.horse-wrap.running .leg:nth-child(1) { animation: leg-a 0.22s ease-in-out infinite alternate; transform-origin: 53px 44px; }
.horse-wrap.running .leg:nth-child(2) { animation: leg-b 0.22s ease-in-out infinite alternate; transform-origin: 45px 44px; }
.horse-wrap.running .leg:nth-child(3) { animation: leg-b 0.22s ease-in-out infinite alternate; transform-origin: 31px 44px; }
.horse-wrap.running .leg:nth-child(4) { animation: leg-a 0.22s ease-in-out infinite alternate; transform-origin: 23px 44px; }

@keyframes leg-a {
  from { transform: rotate(-25deg); }
  to   { transform: rotate(25deg);  }
}
@keyframes leg-b {
  from { transform: rotate(25deg);  }
  to   { transform: rotate(-25deg); }
}

/* body bounce */
.horse-wrap.running { animation: horse-bounce 0.22s ease-in-out infinite alternate; }
@keyframes horse-bounce {
  from { top: calc(50% - 2px); }
  to   { top: calc(50% + 2px); }
}

/* winner flash */
.track-lane.winner .track-road { animation: winner-flash 0.4s ease-in-out 4; }
@keyframes winner-flash {
  0%,100% { background-color: transparent; }
  50%     { background-color: #ffd70033; }
}

/* bet selector */
.horses-bets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.horses-bet-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 2px solid #2a0a4e;
  background: #1a0a2e;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s;
  user-select: none;
}

.horses-bet-item:hover { border-color: #ffd700; }
.horses-bet-item.selected { border-color: #ffd700; background: #2a1a0e; }
.horses-bet-item.disabled { opacity: 0.5; cursor: default; pointer-events: none; }

.hbet-color {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.hbet-odds {
  color: #ffd700;
  font-size: 0.85rem;
  margin-left: 2px;
}

/* ── MEGA WIN OVERLAY ─────────────────────────────── */
#mega-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
  cursor: pointer;
  transition: opacity 0.5s;
}

#mega-overlay.mega-hidden {
  opacity: 0;
  pointer-events: none;
}

#fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mega-text {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: mega-pop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both;
}

@keyframes mega-pop {
  0%   { transform: scale(0.2) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}

.mega-title {
  font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(135deg, #ffd700, #ff8800, #ff4444, #ffd700);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mega-shimmer 1s linear infinite, mega-pulse 0.6s ease-in-out infinite alternate;
  text-shadow: none;
  filter: drop-shadow(0 0 30px #ffd700aa);
}

@keyframes mega-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes mega-pulse {
  from { filter: drop-shadow(0 0 20px #ffd700aa); transform: scale(1); }
  to   { filter: drop-shadow(0 0 50px #ff8800cc); transform: scale(1.04); }
}

.mega-amount {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 700;
  color: #44ff88;
  margin-top: 12px;
  text-shadow: 0 0 20px #44ff88;
  animation: mega-pulse 0.6s ease-in-out infinite alternate;
}

.mega-gif-slot {
  width: 260px;
  height: 180px;
  margin: 16px auto;
  border: 3px dashed #ffd70066;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0d0d1a88;
}

.mega-gif-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none; /* hidden until src is set */
}

.mega-gif-slot img.loaded {
  display: block;
}

.mega-gif-placeholder {
  color: #ffd70066;
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
  pointer-events: none;
}

.mega-tap-hint {
  font-size: 0.9rem;
  color: #cc99ff;
  margin-top: 20px;
  opacity: 0.7;
}

.mega-mute-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(26, 10, 46, 0.85);
  border: 2px solid #5500aa;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.mega-mute-btn:hover {
  background: rgba(85, 0, 170, 0.95);
  border-color: #ffd700;
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.4);
}

/* ── DEBTS ────────────────────────────────────────── */
.debts-card { max-width: 480px; }

.debt-empty {
  text-align: center;
  padding: 32px 0;
}
.debt-empty .debt-emoji { font-size: 4rem; }
.debt-empty p { color: #cc99ff; margin-top: 12px; font-size: 1rem; }

.debt-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.debt-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2a0a4e;
  border-radius: 12px;
  padding: 14px 18px;
}

.debt-row-item .dlabel { color: #cc99ff; font-size: 0.85rem; }
.debt-row-item .dvalue { font-size: 1.1rem; font-weight: 700; color: #ff4444; }
.debt-row-item .dvalue.ok { color: #ffd700; }

.debt-warning {
  background: #3d0a0a;
  border: 1px solid #ff4444;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #ff8888;
  text-align: center;
}

.debt-repay-btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.debt-repay-btn:hover { opacity: 0.85; }
.debt-repay-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.debt-work-btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #3a2a00, #5a3a00);
  color: #ffd700;
  border: 2px solid #ffd70066;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  letter-spacing: 1px;
}
.debt-work-btn:hover:not(:disabled) { opacity: 0.85; transform: scale(1.02); }
.debt-work-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.debt-work-btn .work-debt-remaining { color: #ff8800; font-size: 1.1em; }

/* ── Wallet buttons ─────────────────────────────────── */
.wallet-btn {
  background: none;
  border: 1px solid #5500aa;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: .85rem;
  padding: 2px 8px;
  margin-left: 4px;
  transition: background .2s;
}
.wallet-btn:hover { background: #5500aa44; }
.deposit-btn  { border-color: #27ae60; color: #27ae60; }
.deposit-btn:hover  { background: #27ae6033; }
.withdraw-btn { border-color: #e67e22; color: #e67e22; }
.withdraw-btn:hover { background: #e67e2233; }
.adfree-btn { border-color: #44ff88; color: #44ff88; }
.adfree-btn:hover { background: #44ff8833; }

/* ── Wallet modals ──────────────────────────────────── */
.wallet-modal-bg {
  position: fixed; inset: 0;
  background: #000a;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-modal {
  background: #1a0a3e;
  border: 1px solid #5500aa;
  border-radius: 14px;
  padding: 28px 32px;
  min-width: 300px;
  max-width: 380px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
}
.wallet-modal h3 { margin: 0; font-size: 1.3rem; }
.wallet-modal label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .9rem;
  color: #ccc;
}
.wallet-modal.wallet-modal input {
  width: 100%;
  background: #0d0025;
  border: 1px solid #5500aa;
  border-radius: 7px;
  color: #fff;
  font-size: 1rem;
  padding: 8px 12px;
  outline: none;
}
.wallet-modal input:focus { border-color: #aa44ff; }
.wallet-confirm-btn {
  background: #5500aa;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px;
  transition: background .2s;
}
.wallet-confirm-btn:hover { background: #7700cc; }
.wallet-confirm-btn:disabled { background: #333; cursor: not-allowed; }
.wallet-cancel-btn {
  background: none;
  border: 1px solid #444;
  border-radius: 8px;
  color: #aaa;
  cursor: pointer;
  font-size: .9rem;
  padding: 8px;
}
.wallet-cancel-btn:hover { border-color: #888; color: #fff; }

/* ── AD-FREE MODAL ──────────────────────────────────── */
.adfree-options {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}
.adfree-option {
  flex: 1;
  background: #0d0025;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.adfree-option:hover { border-color: #5500aa; }
.adfree-option.selected {
  border-color: #ffd700;
  background: #1a1030;
}
.adfree-duration {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.adfree-price {
  font-size: .9rem;
  color: #ffd700;
}
.adfree-orig {
  font-size: .7rem;
  color: #666;
  text-decoration: line-through;
}
.adfree-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4400;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}
.adfree-method {
  margin: 16px 0;
  padding: 12px;
  background: #0d0025;
  border-radius: 8px;
}
.adfree-method label {
  color: #ccc;
  font-size: .9rem;
}
.adfree-method input[type="radio"] {
  accent-color: #ffd700;
}

/* ── RACE ────────────────────────────────────────────── */
.race-card {
  max-width: 600px;
}

.race-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #110026;
  border: 1px solid #5500aa66;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  gap: 8px;
}

.race-status-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.race-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #2a0a4e;
  color: #cc99ff;
  border: 1px solid #5500aa;
  width: fit-content;
  text-shadow: 0 0 4px #cc99ffaa;
  box-shadow: 0 0 8px rgba(85, 0, 170, 0.3);
}

.race-badge.active-race {
  background: #0d2f1d;
  color: #01ffc3;
  border-color: #01ffc3;
  text-shadow: 0 0 6px #01ffc3cc;
  box-shadow: 0 0 12px rgba(1, 255, 195, 0.2);
}

.race-badge.done-race {
  background: #0c1c38;
  color: #05d9e8;
  border-color: #05d9e8;
  text-shadow: 0 0 6px #05d9e8cc;
  box-shadow: 0 0 12px rgba(5, 217, 232, 0.2);
}

.race-leader-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 6px #ffd70088;
}

.race-actions-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.race-speed-selector {
  display: flex;
  background: #0d001a;
  border: 1px solid #5500aa;
  border-radius: 8px;
  overflow: hidden;
}

.speed-btn {
  background: transparent;
  color: #9966cc;
  border: none;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
}

.speed-btn:hover:not(.active) {
  background: #2a0a4e44;
  color: #fff;
}

.speed-btn.active {
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #1a0033;
}

.race-sound-btn {
  background: #2a0a4e;
  border: 1px solid #5500aa;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}

.race-arena-container {
  position: relative;
  background: radial-gradient(circle at center, #0e031a 0%, #05000c 100%);
  border: 2px solid #5500aa;
  border-radius: 16px;
  box-shadow: 0 0 24px #5500aa33;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#race-canvas {
  display: block;
}

/* Floating Glassmorphic Leaderboard */
.race-leaderboard {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 140px;
  height: 160px; /* fixed height to allow relative offset slide */
  background: rgba(13, 0, 30, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(85, 0, 170, 0.4);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
}

.leaderboard-item {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.rank-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #2a0a4e;
  border: 1px solid #5500aa;
  color: #cc99ff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ball-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.ball-color-dot.color-1 { color: #ff2a6d; background-color: #ff2a6d; }
.ball-color-dot.color-2 { color: #05d9e8; background-color: #05d9e8; }
.ball-color-dot.color-3 { color: #01ffc3; background-color: #01ffc3; }
.ball-color-dot.color-4 { color: #f5a623; background-color: #f5a623; }

.ball-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f0e6ff;
}

/* Bet Panel Buttons */
.race-bet-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.race-ball-btn {
  background: #110026;
  border: 2px solid #5500aa66;
  border-radius: 12px;
  padding: 10px 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.race-ball-btn:hover {
  border-color: #ffd700;
  background: #2a0a4e55;
  transform: translateY(-2px);
}

.race-ball-btn[data-ball="1"].selected {
  border-color: #ff2a6d;
  background: rgba(255, 42, 109, 0.08);
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.35);
}

.race-ball-btn[data-ball="2"].selected {
  border-color: #05d9e8;
  background: rgba(5, 217, 232, 0.08);
  box-shadow: 0 0 14px rgba(5, 217, 232, 0.35);
}

.race-ball-btn[data-ball="3"].selected {
  border-color: #01ffc3;
  background: rgba(1, 255, 195, 0.08);
  box-shadow: 0 0 14px rgba(1, 255, 195, 0.35);
}

.race-ball-btn[data-ball="4"].selected {
  border-color: #f5a623;
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 14px rgba(245, 166, 35, 0.35);
}

.race-ball-preview {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.ball-ruby {
  background: radial-gradient(circle at 30% 30%, #ff5e97, #b0003b);
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.6);
}

.ball-sapphire {
  background: radial-gradient(circle at 30% 30%, #6be5ff, #007794);
  box-shadow: 0 0 10px rgba(5, 217, 232, 0.6);
}

.ball-aurora {
  background: radial-gradient(circle at 30% 30%, #68ffd8, #00936e);
  box-shadow: 0 0 10px rgba(1, 255, 195, 0.6);
}

.ball-amber {
  background: radial-gradient(circle at 30% 30%, #ffce74, #a05d00);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.6);
}

.race-ball-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cc99ff;
}

.race-ball-odds {
  font-size: 0.72rem;
  color: #ffd700;
  font-weight: 800;
}

#race-skip-btn {
  background: linear-gradient(135deg, #ff4444, #cc0000);
  border: 2px solid #ff6666;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.4);
}

#race-skip-btn:hover {
  background: linear-gradient(135deg, #ff6666, #ee0000);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.6);
  transform: translateY(-2px);
}

#race-skip-btn:active {
  transform: translateY(0);
}

/* ── PLINKO ───────────────────────────────────────────── */
.plinko-card { max-width: 620px; }

.plinko-arena {
  background: #0d0d2a;
  border: 2px solid #2a0a4e;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#plinko-canvas {
  display: block;
}

.plinko-buckets {
  display: flex;
  gap: 2px;
  justify-content: center;
  flex-wrap: nowrap;
}

.plinko-bucket {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 4px 2px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plinko-bucket.hit {
  transform: scale(1.15);
  box-shadow: 0 0 12px #fff8;
}

.zrbank-secure {
  margin-top: 10px;
  text-align: center;
  font-size: .75rem;
  color: #4caf50;
  letter-spacing: .05em;
  opacity: .85;
}

/* ── LEADERBOARD ──────────────────────────────────── */
.leaderboard-card { max-width: 480px; }
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.leaderboard-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  padding: 14px 18px;
  background: #2a0a4e;
  border: 1px solid #5500aa44;
  transition: transform 0.2s, box-shadow 0.2s;
}
.leaderboard-item-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(85, 0, 170, 0.2);
}
.leaderboard-item-row.place-1 {
  border-color: #ffd700;
  background: linear-gradient(135deg, #2a0a4e, #3a2200);
}
.leaderboard-item-row.place-2 {
  border-color: #c0c0c0;
  background: linear-gradient(135deg, #2a0a4e, #2b2b2b);
}
.leaderboard-item-row.place-3 {
  border-color: #cd7f32;
  background: linear-gradient(135deg, #2a0a4e, #311c08);
}
.leaderboard-item-row .lb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.leaderboard-item-row .lb-place {
  font-size: 1.2rem;
  font-weight: 900;
}
.leaderboard-item-row .lb-username {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.leaderboard-item-row .lb-balance {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}