@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/* ═══ scrollbar ═══ */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--t4);
}

:root {
  --bg: #0a0a0a;
  --bg2: #121212;
  --surface: #181818;
  --card: #141414;
  --card2: #1a1a1a;
  --card-h: #1e1e1e;
  --gold: #ffcc00;
  --gold-g: linear-gradient(135deg, #ffcc00 0%, #ffaa00 100%);
  --gold-dim: rgba(255, 204, 0, 0.1);
  --accent: #ffcc00;
  --accent-dim: rgba(255, 204, 0, 0.1);
  --accent-g: rgba(255, 204, 0, 0.2);
  --r: 32px;
  --r-sm: 16px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --t1: #ffffff;
  --t2: rgba(255, 255, 255, 0.9);
  --t3: rgba(255, 255, 255, 0.6);
  --t4: rgba(255, 255, 255, 0.3);
  --border: rgba(255, 255, 255, 0.05);
  --border2: rgba(255, 255, 255, 0.1);
  --border3: rgba(255, 255, 255, 0.15);
  --shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

body {
  font-family: var(--font);
  font-weight: 700;
  /* Increased from 600 */
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none !important;
}


.wallet-btn {
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t1);
  cursor: pointer;
  transition: all 0.2s;
}

.wallet-btn:active {
  transform: scale(0.92);
  border-color: var(--gold);
}

/* ANTI-ZOOM & OVERFLOW */
html,
body {
  touch-action: manipulation;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: fixed;
}

#app {
  width: 100%;
  max-width: 500px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.tab-scrollable {
  flex: 1;
  display: flex;
  /* Flex layout to center content */
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 15px;
  /* Reduced bottom padding specifically for games to fit better */
  padding-bottom: 90px;
  -webkit-overflow-scrolling: touch;
}

/* Specific override for Wallet Tab to ensure scrolling and enough space */
#content-wallet .tab-scrollable {
  display: block;
  /* Standard block layout for wallet inputs */
  padding-bottom: 120px;
}

/* Hide scrollbars but keep functionality */
.tab-scrollable::-webkit-scrollbar {
  display: none;
}

/* Specific game view constraints */
[id^="game-view-"] {
  display: flex;
  flex-direction: column;
}

.shop-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shop-item {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
}

.shop-item:hover {
  border-color: var(--accent);
}

.premium-empty {
  text-align: center;
  padding: 40px 20px;
  position: relative;
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border2);
  grid-column: 1 / -1;
  overflow: hidden;
}

.empty-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  z-index: 9999;
  top: -10px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  to {
    transform: translateY(100vh) rotate(720deg);
  }
}


.empty-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--bg2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 1px solid var(--border3);
  position: relative;
}

.empty-icon-wrap svg {
  width: 32px;
  height: 32px;
  stroke: var(--t4);
  fill: none;
  stroke-width: 1.5;
}

.premium-empty h3 {
  font-size: 18px;
  font-weight: 900;
  color: var(--t1);
  margin-bottom: 8px;
}

.premium-empty p {
  font-size: 13px;
  font-weight: 500;
  color: var(--t3);
  line-height: 1.5;
}

.gift-preview {
  height: 120px;
  background: var(--bg2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gift-model {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.wallet-card {
  background: linear-gradient(135deg, var(--accent), #005588);
  border-radius: var(--r);
  padding: 16px;
  color: white;
  margin-bottom: 20px;
}

.ton-logo {
  font-size: 24px;
  margin-bottom: 8px;
}

.wallet-btn.connected {
  display: none !important;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gift-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .2s;
}

.gift-card:active {
  transform: scale(.97);
}

.gift-img-wrap {
  height: 100px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gift-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.gift-info {
  padding: 10px;
  text-align: center;
}

.gift-name {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-price {
  font-size: 12px;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 8px;
}

.gift-buy-btn {
  width: 100%;
  padding: 8px;
  border: none;
  background: var(--surface);
  color: var(--t2);
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}

.gift-card:hover .gift-buy-btn {
  background: var(--accent);
  color: white;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  text-align: center;
  animation: modalIn .3s cubic-bezier(.17, .67, .83, .67);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.9);
  }
}

.modal-gift-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.modal-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
}

.modal-desc {
  font-size: 14px;
  color: var(--t2);
  margin-bottom: 20px;
  line-height: 1.4;
}

.modal-btns {
  display: flex;
  gap: 10px;
}

.modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.modal-btn.cancel {
  background: var(--bg2);
  color: var(--t3);
}

.modal-btn.confirm {
  background: var(--accent);
  color: white;
}

/* Dep Manual */
.dep-manual-card {
  background: var(--accent-dim);
  border: 1px solid var(--accent-g);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.dep-row {
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--t2);
}

.dep-row code {
  color: white;
  font-weight: 700;
  background: rgba(0, 0, 0, .3);
  padding: 2px 6px;
  border-radius: 4px;
  display: block;
  margin-top: 4px;
  word-break: break-all;
}

.memo-highlight {
  color: var(--gold) !important;
  border: 1px dashed var(--gold2);
  font-size: 14px !important;
}

.dep-warning {
  font-size: 10px;
  color: var(--red);
  font-weight: 800;
  margin-top: 10px;
}

.deposit-status-list {
  margin-top: 20px;
}

.dep-item {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dep-status {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg2);
  color: var(--t4);
}

.dep-status.pending {
  color: var(--gold);
}

.dep-status.completed {
  color: var(--green);
}


.deposit-input-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.dep-input-group {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 0 12px;
}

.dep-input-group input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  padding: 12px 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  outline: none;
  width: 50px;
}

.dep-input-group span {
  color: var(--t4);
  font-weight: 700;
  font-size: 12px;
}

.dep-go-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}

.dep-hint {
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 16px;
  padding-left: 4px;
}

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

.deposit-opt {
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--t1);
  font-weight: 600;
  cursor: pointer;
}

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

html,
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  font-weight: 600;
  height: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* иконки */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-sm svg {
  stroke-width: 2;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* ═══ загрузка ═══ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--bg);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}

.loading-screen.fade-out {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

.loading-content {
  text-align: center;
}

.loader-cube {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  position: relative;
  transform-style: preserve-3d;
  animation: loaderSpin 3s ease-in-out infinite;
}

@keyframes loaderSpin {
  0% {
    transform: rotateX(-20deg) rotateY(0)
  }

  50% {
    transform: rotateX(-20deg) rotateY(180deg)
  }

  100% {
    transform: rotateX(-20deg) rotateY(360deg)
  }
}

.loader-face {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-face.lf-front {
  transform: translateZ(30px);
}

.loader-face.lf-back {
  transform: rotateY(180deg) translateZ(30px);
}

.loader-face.lf-right {
  transform: rotateY(90deg) translateZ(30px);
}

.loader-face.lf-left {
  transform: rotateY(-90deg) translateZ(30px);
}

.loader-face.lf-top {
  transform: rotateX(90deg) translateZ(30px);
}

.loader-face.lf-bottom {
  transform: rotateX(-90deg) translateZ(30px);
}

.loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-g);
}

.loading-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--t1);
}

.loading-sub {
  font-size: 10px;
  color: var(--t3);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 700;
}

.loading-bar {
  width: 140px;
  height: 1px;
  background: var(--card2);
  margin: 24px auto 0;
  overflow: hidden;
  border-radius: 1px;
}

.loading-bar-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  animation: loadBar 2.2s ease-out forwards;
}

@keyframes loadBar {
  0% {
    width: 0
  }

  50% {
    width: 60%
  }

  100% {
    width: 100%
  }
}

/* ═══ app ═══ */
.app {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  touch-action: pan-y;
}

/* header */
.header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}

/* Ensure #app is strictly hidden when class is present */
#app.hidden {
  display: none !important;
}

/* Navigation Bar Container - Forced Bottom Positioning */
.nav-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 0;
  /* Safe area respecting padding */
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 15px));
  background: rgba(18, 18, 18, 0.98);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid var(--border);
  /* Absolute positioning to guarantee bottom placement */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--t4);
  cursor: pointer;
  transition: all .2s;
  outline: none;
}

.nav-tab.active {
  background: var(--bg2);
  color: var(--gold);
}

.nav-tab .icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.nav-label {
  font-size: 10px;
  font-weight: 800;
}

/* Чуть более жирные шрифты по всему казино */
h1,
h2,
h3,
h4,
.section-title,
.method-title-wrap h4,
.deposit-hero h2,
.ref-hero h2 {
  font-weight: 700;
}

.bet-name,
.roll-text,
.modal-header h3,
label,
.stat-label,
.stat-value,
.bonus-title {
  font-weight: 600;
}

button,
.roll-button,
.claim-btn-premium,
.dealer-btn-gold,
.bet-type-btn {
  font-weight: 700;
}

.tab-content {
  flex: 1 1 0px;
  height: 100%;
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: tabFade .4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes tabFade {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.tab-content.active {
  display: flex !important;
}

button:active,
.clickable:active {
  transform: scale(0.96);
  opacity: 0.8;
}

[id^="game-view-"] {
  animation: gameIntro 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes gameIntro {
  from {
    opacity: 0;
    transform: scale(0.95);
    filter: brightness(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Standard Scrollable wrapper — компактно, чтобы кнопки были под рукой без прокрутки */
.tab-scrollable {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 10px 14px 80px;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

#content-wallet .tab-scrollable {
  padding-bottom: 120px;
}

#content-game {
  padding-bottom: env(safe-area-inset-bottom, 12px);
}

/* Dice arena — компактнее, чтобы кнопка ставки была видна без прокрутки */
.dice-arena {
  flex-shrink: 0;
  margin: 6px 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.roll-section-fixed {
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 10;
}

#content-game .daily-bonus {
  animation-delay: 0.1s;
}

#content-game .dice-arena {
  animation-delay: 0.2s;
}

#content-game .bet-section {
  animation-delay: 0.3s;
}

#content-game .bet-amount-section {
  animation-delay: 0.4s;
}

#content-game .roll-section {
  animation-delay: 0.5s;
}

.dice-arena {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
  margin: 10px 0;
}

@media (max-height: 600px) {
  .dice-arena {
    min-height: 100px;
    margin: 5px 0;
  }

  .daily-bonus {
    margin-bottom: 4px;
    padding: 6px 10px;
  }

  .bet-section {
    margin-bottom: 4px;
  }

  .bet-amount-section {
    margin-bottom: 4px;
  }
}

.roll-section {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: var(--t2);
  overflow: hidden;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--t1);
}

.user-id {
  font-size: 9px;
  color: var(--t4);
  font-family: monospace;
  letter-spacing: .5px;
}

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

/* стрик бейдж */
.streak-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  background: var(--gold-dim);
  border: 1px solid rgba(200, 165, 90, .15);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  transition: all .3s;
  opacity: 0;
  transform: scale(.8);
}

.streak-badge.visible {
  opacity: 1;
  transform: scale(1);
}

.streak-badge .streak-fire {
  display: inline-block;
  animation: firePulse 1s ease-in-out infinite;
}

@keyframes firePulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.2)
  }
}

.balance-display {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border2);
  transition: all .3s;
}

.balance-coin {
  display: none;
}

.balance-amount {
  font-weight: 800;
  font-size: 14px;
  color: var(--gold);
}

.wallet-btn.connected {
  background: var(--card2) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-g);
  display: flex !important;
}

.balance-amount {
  font-weight: 900;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: -.3px;
}

.balance-display.pulse {
  animation: bPulse .5s ease;
}

@keyframes bPulse {
  50% {
    border-color: var(--green);
    box-shadow: 0 0 12px var(--green-g);
  }
}

.balance-display.pulse-loss {
  animation: bPLoss .5s ease;
}

@keyframes bPLoss {
  50% {
    border-color: var(--red);
    box-shadow: 0 0 12px var(--red-g);
  }
}

/* --- PREMIUM UTILITIES --- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 15px;
}

.claim-btn-premium {
  background: linear-gradient(135deg, #ffd700 0%, #ffae00 100%);
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 174, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-transform: uppercase;
}

.claim-btn-premium:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255, 174, 0, 0.2);
}

.claim-btn-premium:disabled {
  filter: grayscale(0.8);
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  color: var(--t4);
  font-size: 11px;
  padding: 20px;
}

/* Modal sizing */
.inventory-box {
  max-width: 320px !important;
}

.inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding: 5px;
}

.inventory-hint {
  font-size: 9px;
  color: var(--t4);
  text-align: center;
  margin-top: 15px;
  line-height: 1.4;
}

.small-modal {
  max-width: 280px !important;
}

/* Physical Nav Tabs in flex flow */
.nav-tabs {
  flex-shrink: 0;
  display: flex;
  background: var(--card2);
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border2);
  gap: 2px;
  z-index: 1000;
  width: 100%;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: none;
  background: transparent;
  color: var(--t4);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all .2s;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.nav-tab .icon {
  color: var(--t4);
  transition: color .2s;
}

.nav-tab.active {
  color: var(--t1);
  background: var(--card);
}

.nav-tab.active .icon {
  color: var(--gold);
}

.nav-tab:active {
  transform: scale(.92);
}

.tab-content {
  display: none;
  flex: 1;
  /* Key: grows to fill space between header and footer */
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.tab-content.active {
  display: flex !important;
  /* flex: 1 already handles filling space correctly without pushing content off screen */
  animation: fadeUp .25s ease;
}

/* Using consolidated definition above */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(4px)
  }
}

.section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--t3);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ═══ дейли бонус ═══ */
.daily-bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(200, 165, 90, .06), rgba(200, 165, 90, .02));
  border: 1px solid rgba(200, 165, 90, .1);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .2s;
}

.daily-bonus:hover {
  border-color: rgba(200, 165, 90, .2);
  background: linear-gradient(135deg, rgba(200, 165, 90, .1), rgba(200, 165, 90, .04));
}

.daily-bonus:active {
  transform: scale(.98);
}

.daily-bonus.claimed {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.daily-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.daily-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.8;
}

.daily-text {
  display: flex;
  flex-direction: column;
}

.daily-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
}

.daily-desc {
  font-size: 10px;
  color: var(--t3);
}

.daily-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
}

/* ═══ арена кубиков ═══ */
.dice-arena {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 16px 12px;
  /* Reduced */
  margin-bottom: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* поверхность стола */
.dice-table {
  position: relative;
  min-height: 80px;
  /* Reduced to bring buttons up */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  perspective: 1000px;
  margin-bottom: 5px;
  /* Reduced */
}

/* тень на столе */
.dice-shadow {
  position: absolute;
  bottom: -4px;
  width: 50px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .35) 0%, transparent 70%);
  border-radius: 50%;
  transition: all .4s;
  pointer-events: none;
}

/* Game Container Adjustment */
.game-container {
  padding-bottom: 40px;
  /* Further reduced */
  display: flex;
  flex-direction: column;
}

/* Fix for dice button being too low */
.dice-controls {
  margin-bottom: 20px;
}

.dice-shadow.shadow-1 {
  left: calc(50% - 57px);
}

.dice-shadow.shadow-2 {
  left: calc(50% + 7px);
}

.dice-shadow.flying {
  width: 30px;
  opacity: .2;
}

/* 3d кубик */
.dice3d {
  width: 64px;
  height: 64px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(22deg);
  transition: transform .7s cubic-bezier(.25, .46, .45, .94);
  cursor: default;
}

.dice3d.rolling {
  animation: diceThrow 1.4s cubic-bezier(.15, .6, .3, 1);
}

@keyframes diceThrow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }

  8% {
    transform: translate3d(0, -50px, 0) rotateX(60deg) rotateY(30deg) rotateZ(20deg) scale(1.05);
  }

  20% {
    transform: translate3d(0, -70px, 0) rotateX(200deg) rotateY(140deg) rotateZ(80deg) scale(1.08);
  }

  38% {
    transform: translate3d(0, -10px, 0) rotateX(400deg) rotateY(280deg) rotateZ(180deg) scale(1);
  }

  50% {
    transform: translate3d(0, -30px, 0) rotateX(520deg) rotateY(350deg) rotateZ(250deg) scale(1.02);
  }

  65% {
    transform: translate3d(0, 5px, 0) rotateX(640deg) rotateY(390deg) rotateZ(320deg) scale(.98);
  }

  78% {
    transform: translate3d(0, -8px, 0) rotateX(690deg) rotateY(370deg) rotateZ(350deg) scale(1);
  }

  90% {
    transform: translate3d(0, 2px, 0) rotateX(715deg) rotateY(358deg) rotateZ(358deg) scale(1);
  }

  100% {
    transform: translate3d(0, 0, 0) rotateX(720deg) rotateY(360deg) rotateZ(360deg) scale(1);
  }
}

.dice-face {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible;
  background: linear-gradient(145deg, #2c2c2c, #1c1c1c);
  border: 1px solid var(--border3);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .03), inset 0 -1px 3px rgba(0, 0, 0, .2);
}

.front {
  transform: translateZ(32px);
}

.back {
  transform: rotateY(180deg) translateZ(32px);
}

.right {
  transform: rotateY(90deg) translateZ(32px);
}

.left {
  transform: rotateY(-90deg) translateZ(32px);
}

.top {
  transform: rotateX(90deg) translateZ(32px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(32px);
}

/* точки */
.dots {
  display: flex;
  flex-wrap: wrap;
  width: 42px;
  height: 42px;
  padding: 3px;
  position: relative;
}

.dots span {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 35%, #ffffff, var(--gold));
  border-radius: 50%;
  box-shadow: 0 0 5px var(--gold), 0 1px 1px rgba(0, 0, 0, .5);
}

.d1 {
  justify-content: center;
  align-items: center;
}

.d2 {
  justify-content: space-between;
  align-items: center;
}

.d2 span:first-child {
  align-self: flex-start;
}

.d2 span:last-child {
  align-self: flex-end;
}

.d3 {
  justify-content: space-between;
  align-items: center;
}

.d3 span:first-child {
  align-self: flex-start;
}

.d3 span:nth-child(2) {
  align-self: center;
}

.d3 span:last-child {
  align-self: flex-end;
}

.d4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: center;
  justify-items: center;
}

.d5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: center;
  justify-items: center;
}

/* Exact Number Picker */
.exact-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--t3);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.exact-num:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  color: var(--t1);
}

.exact-num.active {
  background: var(--gold-g);
  border-color: var(--gold);
  color: #000;
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
  transform: translateY(-3px) scale(1.1);
}

.d5 span:nth-child(5) {
  grid-column: 1/-1;
  justify-self: center;
}

.d6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  align-items: center;
  justify-items: center;
}

.dice-sum {
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.dice-sum-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
  transition: all .3s;
}

/* ═══ ставки ═══ */
.bet-section {
  margin-bottom: 12px;
}

.bet-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.bet-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font);
  color: var(--t3);
  position: relative;
}

.bet-type-btn.active {
  background: var(--card2);
  border-color: var(--border3);
  color: var(--t1);
  box-shadow: inset 0 0 0 1px var(--border2);
}

.bet-type-btn:active {
  transform: scale(.94);
}

.bet-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  margin-bottom: 2px;
  transition: all .2s;
}

.bet-type-btn.active .bet-icon {
  background: var(--gold-dim);
}

.bet-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--t3);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bet-type-btn.active .bet-icon svg {
  stroke: var(--gold);
}

.bet-name {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.bet-mult {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
}

.bet-desc {
  font-size: 8px;
  color: var(--t4);
}

/* сумма */
.bet-amount-section {
  margin-bottom: 12px;
}

.bet-input-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.bet-adjust {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  color: var(--t2);
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bet-adjust:hover {
  background: var(--bg2);
  border-color: var(--accent);
  color: var(--t1);
}

.bet-adjust:active {
  transform: scale(.88);
}

.bet-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 16px;
  height: 44px;
  transition: all .3s;
}

.bet-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 15px var(--accent-g);
}

.bet-input-unit {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--accent-dim);
  border-radius: 6px;
  text-transform: uppercase;
}

.bet-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--t1);
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font);
  outline: none;
  width: 100%;
  letter-spacing: -0.5px;
}

.bet-input::-webkit-inner-spin-button,
.bet-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.quick-bets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.quick-bet {
  padding: 6px 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--t3);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .12s;
}

.quick-bet:hover {
  color: var(--t2);
}

.quick-bet.active {
  color: var(--t1);
  border-color: var(--border2);
  background: var(--card2);
}

.quick-bet:active {
  transform: scale(.88);
}

/* кнопка ролл */
.roll-section {
  position: relative;
}

.roll-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--t1);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .2s;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.roll-button:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255, 255, 255, .08);
}

.roll-button:active {
  transform: translateY(0) scale(.98);
}

.roll-button:disabled {
  opacity: .25;
  cursor: not-allowed;
  transform: none;
}

.roll-button .icon {
  color: var(--bg);
  width: 18px;
  height: 18px;
}

.roll-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  animation: shine 5s infinite;
}

@keyframes shine {

  0%,
  100% {
    left: -100%
  }

  50% {
    left: 100%
  }
}

.roll-button.rolling .roll-shine {
  animation: none;
}

/* стрик бонус на кнопке */
.streak-multiplier {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--gold);
  color: var(--bg);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--gold-g);
  opacity: 0;
  transform: scale(.5);
  transition: all .3s;
}

.streak-multiplier.visible {
  opacity: 1;
  transform: scale(1);
}

.potential-win {
  text-align: center;
  padding: 6px;
  font-size: 11px;
  color: var(--t4);
  font-weight: 400;
}

.potential-win strong {
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
}

/* ═══ магазин ═══ */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 20px;
}

.gift-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  transition: all .2s;
  height: 100%;
}

.gift-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.gift-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
  position: relative;
}

.gift-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gift-card:hover .gift-img {
  transform: scale(1.05);
}

.gift-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.gift-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-price {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
}

.gift-buy-btn {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: var(--t1);
  color: var(--bg);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
}

/* ═══ кошелек ═══ */
.deposit-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deposit-input-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dep-input-group {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  gap: 10px;
}

.dep-input-group input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t1);
  font-size: 18px;
  font-weight: 800;
  outline: none;
}

.dep-go-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--gold);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.dep-manual-card {
  background: var(--card2);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dep-row {
  font-size: 11px;
  color: var(--t3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dep-row code {
  background: var(--bg);
  padding: 8px;
  border-radius: 6px;
  color: var(--t1);
  word-break: break-all;
  font-family: monospace;
}

.memo-highlight {
  color: var(--gold) !important;
  font-weight: 800;
}

/* ═══ история ═══ */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background .12s;
  animation: slideR .2s ease both;
}

@keyframes slideR {
  from {
    opacity: 0;
    transform: translateX(-8px)
  }
}

.history-item:hover {
  background: var(--card-h);
}

.history-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-dice-dots {
  display: flex;
  gap: 3px;
}

.history-die {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--card2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
}

.history-details {
  display: flex;
  flex-direction: column;
}

.history-bet-type {
  font-size: 11px;
  font-weight: 600;
}

.history-time {
  font-size: 9px;
  color: var(--t4);
}

.history-right {
  text-align: right;
}

.history-amount {
  font-size: 12px;
  font-weight: 700;
}

.history-amount.win {
  color: var(--green);
}

.history-amount.loss {
  color: var(--red);
}

.history-bet {
  font-size: 9px;
  color: var(--t4);
}

/* ═══ лидерборд ═══ */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  animation: slideR .2s ease both;
}

.leaderboard-item.top-3 {
  border-color: var(--border2);
}

.leaderboard-rank {
  width: 28px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--t3);
}

.leaderboard-item.top-3:nth-child(1) .leaderboard-rank {
  color: var(--gold);
}

.leaderboard-item.top-3:nth-child(2) .leaderboard-rank {
  color: #aaa;
}

.leaderboard-item.top-3:nth-child(3) .leaderboard-rank {
  color: #b87333;
}

.leaderboard-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.leaderboard-name {
  font-size: 12px;
  font-weight: 600;
}

.leaderboard-stats {
  font-size: 9px;
  color: var(--t4);
}

.leaderboard-balance {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}

/* ═══ fairness ═══ */
.fairness-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fair-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.fair-card h4 {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.fair-card p {
  font-size: 11px;
  color: var(--t3);
  line-height: 1.7;
}

.seed-field {
  margin-bottom: 6px;
}

.seed-field label {
  font-size: 9px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
}

.seed-value {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--t3);
  background: var(--bg2);
  padding: 7px 9px;
  border-radius: 6px;
  word-break: break-all;
  border: 1px solid var(--border);
}

.seed-input-row {
  display: flex;
  gap: 6px;
}

.seed-input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--t1);
  font-family: 'Courier New', monospace;
  font-size: 10px;
  outline: none;
  transition: border-color .2s;
}

.seed-input:focus {
  border-color: var(--border3);
}

.seed-btn {
  padding: 7px 10px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--t2);
  cursor: pointer;
  transition: all .12s;
  display: flex;
  align-items: center;
}

.seed-btn:hover {
  background: var(--surface);
}

.seed-btn .icon {
  width: 14px;
  height: 14px;
}

.rotate-btn {
  width: 100%;
  padding: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--t2);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rotate-btn:hover {
  background: var(--card-h);
  color: var(--t1);
}

.verify-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.verify-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--t1);
  font-family: var(--font);
  font-size: 11px;
  outline: none;
  transition: border-color .2s;
}

.verify-input:focus {
  border-color: var(--border3);
}

.verify-btn {
  padding: 9px;
  background: var(--t1);
  border: none;
  border-radius: 6px;
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all .12s;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.verify-btn:hover {
  background: #fff;
}

.verify-result {
  margin-top: 8px;
  padding: 10px;
  background: var(--bg2);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.verify-result p {
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 2px;
}

.verify-result code {
  font-size: 9px;
  word-break: break-all;
  color: var(--t2);
}

.hidden {
  display: none !important;
}

.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: oFade .2s;
}

.result-ov.manual-details {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 15px;
  margin-top: 15px;
  animation: slideIn 0.3s ease-out;
}

.manual-item {
  margin-bottom: 12px;
}

.manual-item label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 5px;
}

.copy-box {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.copy-box span {
  font-family: monospace;
  font-size: 0.9rem;
  word-break: break-all;
  color: #fff;
}

.copy-box button {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: background 0.2s;
}

.copy-box button:active {
  background: rgba(255, 255, 255, 0.1);
}

.copy-box.highlighted {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(255, 207, 64, 0.2);
}

.manual-warning {
  font-size: 0.75rem;
  color: #ff4d4d;
  margin-top: 10px;
  line-height: 1.3;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-overlay.hidden {
  display: none;
}

@keyframes oFade {
  from {
    opacity: 0
  }
}

.result-modal {
  background: var(--card);
  border: 1px solid var(--border3);
  border-radius: var(--r);
  padding: 28px 22px;
  text-align: center;
  max-width: 280px;
  width: 86%;
  animation: mPop .3s cubic-bezier(.34, 1.3, .64, 1);
  position: relative;
}

@keyframes mPop {
  from {
    opacity: 0;
    transform: scale(.85) translateY(16px)
  }
}

.result-modal.win {
  border-color: rgba(76, 175, 80, .15);
}

.result-modal.loss {
  border-color: rgba(229, 57, 53, .1);
}

.result-icon-wrap {
  margin-bottom: 6px;
}

.result-icon-svg {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  animation: rIconPop .4s ease;
}

@keyframes rIconPop {
  0% {
    transform: scale(0) rotateZ(-10deg)
  }

  60% {
    transform: scale(1.15) rotateZ(2deg)
  }

  100% {
    transform: scale(1)
  }
}

.result-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -.5px;
}

.result-title.win {
  color: var(--green);
}

.result-title.loss {
  color: var(--red);
}

.result-dice-display {
  margin: 8px 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.result-die-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--card2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
}

.result-amount {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -.5px;
}

.result-amount.win {
  color: var(--green);
}

.result-amount.loss {
  color: var(--red);
}

.result-streak {
  font-size: 10px;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .3s;
}

.result-streak.visible {
  opacity: 1;
}

.result-close {
  width: 100%;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .12s;
}

.result-close:hover {
  background: var(--card-h);
  color: var(--t1);
}

/* ═══ misc ═══ */
.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--t4);
}

.empty-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  color: var(--t4);
  opacity: .3;
}

.confetti-piece {
  position: fixed;
  z-index: 200;
  animation: cFall 2.5s cubic-bezier(.25, .46, .45, .94) forwards;
  pointer-events: none;
}

@keyframes cFall {
  0% {
    opacity: 1;
    transform: translateY(-10px) rotate(0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(.2)
  }
}

::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--card2);
  border-radius: 2px;
}

.toast {
  position: fixed;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 16px;
  color: var(--t1);
  font-size: 11px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: all .2s;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.error {
  border-color: var(--red-g);
  color: var(--red);
}

.toast.success {
  border-color: var(--green-g);
  color: var(--green);
}

/* Update Roll Button specific for open modal */
#open-bet-modal-btn:active {
  transform: scale(0.96);
}

/* ═══ МОДАЛЬНЫЕ ОКНА ═══ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5000;
  /* Перекрывает всё */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: oFade 0.2s ease;
}

.modal-box {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 24px;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: mPop 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 5001;
  /* Выше оверлея */
}

.roll-section {
  padding: 8px 0;
  text-align: center;
}

.roll-button {
  width: 100%;
  padding: 14px;
  background: var(--gold-g) !important;
  border: none;
  border-radius: 12px;
  color: #000 !important;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.2);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.roll-button:active {
  background: var(--gold-g) !important;
  color: #000 !important;
  transform: scale(0.98);
}

.bet-modal-box {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.close-modal-btn {
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0 5px;
}

.bet-amount-section-modal,
.bet-type-section-modal {
  margin-bottom: 10px;
}

.bet-amount-section-modal label,
.bet-type-section-modal label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* Adjust grid for modal if needed */
.bet-modal-box .bet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  /* row-gap: 12px, col-gap: 8px */
  margin-bottom: 20px;
}

/* Wallet / Deposit Premium Styles */
.wallet-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 30px;
}

.deposit-hero {
  text-align: center;
  padding: 20px 16px;
  /* Compacted */
  background: linear-gradient(180deg, rgba(255, 204, 0, 0.08) 0%, transparent 100%);
  border-radius: 20px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.deposit-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero-icon {
  font-size: 32px;
  /* Compacted */
  margin-bottom: 8px;
  filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.3));
}

.deposit-hero h2 {
  font-size: 18px;
  /* Compacted */
  font-weight: 950;
  margin-bottom: 4px;
  color: var(--t1);
  letter-spacing: -0.5px;
}

.deposit-hero p {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto;
}

.wallet-method-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  /* Compacted */
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

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

.method-icon,
.method-icon-shimmer {
  width: 44px;
  height: 44px;
  background: var(--bg);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid var(--border2);
  flex-shrink: 0;
}

.method-icon-shimmer {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.2) 0%, transparent 100%);
  border-color: var(--gold-dim);
  animation: iconGlow 2s infinite alternate;
}

@keyframes iconGlow {
  from {
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.1);
  }

  to {
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
  }
}

.method-title-wrap {
  display: flex;
  flex-direction: column;
}

.method-badge {
  font-size: 9px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(255, 204, 0, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
  width: fit-content;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.premium-card {
  border: 1px solid var(--gold-dim) !important;
  background: linear-gradient(160deg, rgba(255, 204, 0, 0.03) 0%, var(--card2) 100%) !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dealer-btn-gold {
  width: 100%;
  padding: 14px;
  background: var(--gold-g);
  color: #000;
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
}

.dealer-btn-gold:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}

.method-title-wrap h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
}

.method-desc {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.5;
}

.dep-input-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dep-input-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 4px;
}

.premium-input-group {
  background: var(--bg);
  border: 1px solid var(--border3);
  border-radius: 12px;
  padding: 10px 14px;
  /* Compacted */
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s;
}

.premium-input-group:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.2);
}

.premium-input-group input {
  background: none;
  border: none;
  color: white;
  flex: 1;
  outline: none;
  font-size: 20px;
  /* Reduced from 24px */
  font-weight: 800;
  font-family: var(--font);
  width: 100%;
}

.premium-input-group .unit {
  color: var(--gold);
  font-weight: 900;
  font-size: 18px;
}

.quick-amounts {
  display: flex;
  gap: 8px;
}

.quick-amount-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border3);
  color: var(--t2);
  padding: 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s;
  cursor: pointer;
}

.quick-amount-btn:active {
  background: var(--card-h);
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(0.95);
}

.pay-btn-premium,
.claim-btn-premium {
  width: 100%;
  padding: 12px;
  /* Compacted from 18px */
  border-radius: 12px;
  background: var(--gold-g);
  color: black;
  border: none;
  font-size: 13px;
  /* Compacted from 15px */
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 25px rgba(255, 204, 0, 0.25);
  transition: all 0.2s;
  text-transform: uppercase;
}

.pay-btn-premium:active {
  transform: scale(0.97);
  box-shadow: 0 4px 10px rgba(255, 204, 0, 0.15);
}

.dep-info-box {
  background: rgba(255, 204, 0, 0.05);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 204, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dep-info-box p {
  font-size: 11px;
  color: var(--t3);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

.dep-info-box .highlight {
  color: var(--gold);
  font-weight: 700;
}

.dealer-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-weight: 800;
  font-size: 13px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--t1);
  border: 1px solid var(--border3);
  transition: all 0.2s;
}

.dealer-btn:active {
  background: var(--card-h);
  border-color: var(--gold);
  transform: scale(0.98);
}

.copy-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.copy-box:active {
  background: var(--border);
}

.copy-box.highlight {
  border-color: var(--gold2);
}

.copy-box code {
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--t2);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-icon {
  font-size: 16px;
  opacity: 0.5;
}

.dep-warning {
  background: rgba(229, 57, 53, 0.1);
  border: 1px solid rgba(229, 57, 53, 0.2);
  padding: 10px;
  border-radius: 8px;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

/* Exact Picker Premium Styles */
.exact-picker-container {
  margin-bottom: 20px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.picker-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.exact-nums {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.exact-num {
  aspect-ratio: 1;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--t2);
  cursor: pointer;
  transition: all 0.2s;
}

.exact-num:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.exact-num.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 15px var(--accent-g);
  transform: scale(1.05);
}

/* Fix dice transition for better sync */
.dice3d {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bet-modal-box .roll-button {
  margin-top: 10px;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bet-modal-box .roll-button:hover {
  box-shadow: 0 6px 16px rgba(255, 204, 0, 0.35);
}

.bet-modal-box #bet-confirm-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

#bet-modal .modal-box {
  pointer-events: auto;
}

#toast {
  z-index: 10001;
}

/* ═══ premium history ═══ */
.badge-win {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  text-transform: uppercase;
}

.badge-loss {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  text-transform: uppercase;
}

.animated-history {
  animation: slideInLeft 0.3s ease-out forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hist-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hist-badge {
  text-align: center;
  min-width: 45px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.history-item:hover {
  background: var(--card2);
  border-color: var(--border2);
}

.hist-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hist-type {
  font-weight: 800;
  font-size: 13px;
  color: var(--t1);
  display: block;
}

.hist-time {
  font-size: 10px;
  color: var(--t4);
}

.hist-res {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.5px;
}

.hist-res.win {
  color: #2ecc71;
}

.hist-res.loss {
  color: #e74c3c;
  opacity: 0.8;
}

/* ═══ ban screen ═══ */
.ban-screen {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.ban-content {
  max-width: 320px;
  background: var(--card);
  padding: 32px;
  border-radius: var(--r);
  border: 1px solid var(--red);
  box-shadow: 0 0 50px rgba(229, 57, 53, 0.1);
}

/* ═══ dealer modal ═══ */
.dealer-modal {
  text-align: center;
  position: relative;
  overflow: hidden;
  border-color: var(--gold) !important;
}

.modal-glow-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 207, 64, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.modal-btns.column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.modal-btns.column .modal-btn {
  width: 100%;
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.shiny {
  position: relative;
  font-size: 60px;
  filter: drop-shadow(0 0 15px rgba(255, 207, 64, 0.4));
  animation: shine-float 3s infinite ease-in-out;
  margin-bottom: 20px;
}

@keyframes shine-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.pulse-btn {
  animation: btn-pulse 2s infinite;
  background: var(--gold-g) !important;
  color: #000 !important;
  font-weight: 800;
  border: none !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 207, 64, 0.4);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(255, 207, 64, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 207, 64, 0);
  }
}

.ban-icon {
  font-size: 64px;
  margin-bottom: 24px;
}

.ban-title {
  color: var(--t1);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 16px;
}

.ban-desc {
  color: var(--t3);
  font-size: 14px;
  line-height: 1.6;
}

/* settings */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Compacted from 20px */
}

.settings-group {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  /* Compacted from 16px 20px */
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background .2s;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item.clickable:active {
  background: var(--bg2);
}

.settings-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-name {
  font-size: 13px;
  /* Compacted from 15px */
  font-weight: 800;
  color: var(--t1);
}

.promo-section {
  padding: 12px 16px;
  /* Compacted */
}

.promo-input-group {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.promo-input-group input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border3);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--t1);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
}

.promo-input-group input:focus {
  border-color: var(--gold);
}

.promo-input-group button {
  background: var(--gold);
  color: black;
  border: none;
  border-radius: var(--r-sm);
  padding: 0 12px;
  min-width: 100px;
  font-weight: 800;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s;
}

.promo-input-group button:active {
  transform: scale(0.95);
}

.settings-desc {
  font-size: 11px;
  color: var(--t3);
}

/* toggle */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg2);
  transition: .4s;
  border-radius: 34px;
  border: 1px solid var(--border3);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--t4);
  transition: .4s;
  border-radius: 50%;
}

input:checked+.toggle-slider {
  background-color: var(--gold-dim);
  border-color: var(--gold);
}

input:checked+.toggle-slider:before {
  transform: translateX(20px);
  background-color: var(--gold);
}

/* onboarding */
.onboarding-box {
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  height: 85vh;
  position: absolute;
  bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  border: 1px solid var(--border3);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp .5s cubic-bezier(.17, .67, .83, .67);
  z-index: 2000;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
}

.close-cross {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border3);
  color: var(--t1);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.onboarding-media {
  flex: 1;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cube-media-container {
  width: 120px;
  height: 120px;
  position: relative;
  perspective: 1000px;
}

/* onboarding cube */
.ob-cube {
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;
  animation: obRotate 8s linear infinite;
}

@keyframes obRotate {
  from {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

.ob-face {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1.5px solid var(--gold);
  background: rgba(255, 204, 0, 0.05);
  box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.1);
  border-radius: 4px;
}

.ob-front {
  transform: translateZ(30px);
}

.ob-back {
  transform: rotateY(180deg) translateZ(30px);
}

.ob-right {
  transform: rotateY(90deg) translateZ(30px);
}

.ob-left {
  transform: rotateY(-90deg) translateZ(30px);
}

.ob-top {
  transform: rotateX(90deg) translateZ(30px);
}

.ob-bottom {
  transform: rotateX(-90deg) translateZ(30px);
}

.onboarding-body {
  padding: 30px;
  text-align: center;
}

.onboarding-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 12px;
}

.text-gold {
  color: var(--gold);
}

.direct-link-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 15px;
  text-align: center;
  margin-top: 15px;
  animation: slide-up 0.4s ease-out;
}

#direct-transfer-link {
  display: block;
  background: var(--blue-g);
  color: #fff;
  padding: 14px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 152, 234, 0.3);
  transition: all 0.2s;
}

#direct-transfer-link:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.manual-warning {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 12px;
}

.onboarding-text {
  font-size: 15px;
  color: var(--t2);
  margin-bottom: 8px;
}

.onboarding-subtext {
  font-size: 12px;
  color: var(--t4);
  margin-bottom: 30px;
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-btn {
  padding: 16px;
  border-radius: var(--r-sm);
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: transform .2s;
}

.onboarding-btn:active {
  transform: scale(.98);
}

.onboarding-btn.primary {
  background: var(--gold);
  color: black;
}

.onboarding-btn.secondary {
  background: var(--bg2);
  color: var(--t1);
  border: 1px solid var(--border3);
}

/* --- GAME SELECTOR --- */
.game-selector {
  display: flex;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 8px;
  gap: 3px;
}

.game-sel-btn {
  flex: 1;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--t3);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.game-sel-btn.active {
  background: var(--card1);
  color: var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* --- CROSSROAD GAME (MINIMALIST TOP-DOWN) --- */
.crossroad-board {
  position: relative;
  width: 100%;
  height: 240px;
  /* Показываем 3 линии по 80px */
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #333;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  margin-bottom: 12px;
}

.cr-lanes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  /* Курица внизу, дорога уходит вверх */
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cr-lane {
  height: 80px;
  /* Увеличили для лучшей видимости куба */
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
}

/* ═══ CRASH (ROCKET) ═══ */
#game-view-crash {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}

.crash-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  #game-view-crash {
    min-height: 55vh;
  }

  .crash-container {
    padding: 8px;
    margin-bottom: 10px;
    border: none;
    background: transparent;
  }

  .tab-scrollable {
    padding: 8px 5px !important;
  }
}

.crash-stats-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  min-height: 28px;
}

.crash-history-item {
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.crash-history-item.win {
  color: var(--green);
}

.crash-history-item.loss {
  color: var(--red);
}

.crash-main {
  position: relative;
  flex: 1;
  min-height: 50vh;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at center, #0a0a1a 0%, #050505 100%);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.5s ease;
}

@media (max-width: 600px) {
  .crash-main {
    aspect-ratio: 16 / 10;
    min-height: 40vh;
    flex: 1;
    width: calc(100% + 16px);
    margin: -8px -8px 10px -8px;
    border-radius: 0;
    border: none;
  }

  .crash-mult {
    font-size: 56px !important;
    transform: translateY(-10px);
  }
}

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

.crash-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 10;
  padding: 16px;
}

.crash-mult {
  align-self: center;
  margin: auto 0;
  font-size: 54px;
  font-weight: 950;
  color: var(--t1);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px var(--accent-g);
  font-variant-numeric: tabular-nums;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 100;
  pointer-events: none;
}

.crash-mult.flying {
  align-self: flex-end;
  margin: 0;
  font-size: 32px;
  text-shadow: 0 0 15px var(--accent);
}

.crash-status {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 3px;
  opacity: 0.8;
}

.crash-info.crashed .crash-mult {
  color: var(--red);
  font-size: 60px;
  text-shadow: 0 0 40px rgba(229, 57, 53, 0.6);
  z-index: 110;
}

.crash-waiting-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.waiting-timer {
  text-align: center;
  width: 80%;
}

.timer-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t4);
  margin-bottom: 8px;
}

.timer-progress-wrap {
  height: 4px;
  background: var(--bg2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.timer-progress {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.1s linear;
}

.timer-sec {
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
}

.crash-controls {
  background: var(--bg2);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border);
}

.crash-bet-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bet-input-wrap {
  display: flex;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 4px;
}

.bet-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  padding: 8px;
  font-family: var(--font);
  font-weight: 700;
  outline: none;
}

.bet-max {
  background: var(--border3);
  border: none;
  color: var(--t3);
  padding: 0 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.crash-btn {
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.crash-btn.bet {
  background: var(--accent) !important;
  color: #000 !important;
}

.crash-btn.bet:active {
  background: var(--accent) !important;
  color: #000 !important;
  transform: scale(0.98);
}

.crash-btn.cashout {
  background: linear-gradient(135deg, var(--gold) 0%, #f1c40f 100%) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
  animation: pulse-gold 1.5s infinite;
}

@keyframes pulse-gold {
  0% {
    box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(241, 196, 15, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
  }
}

/* --- WHEEL OF FORTUNE (DAILY SPIN) --- */
.wheel-container {
  width: 240px;
  height: 240px;
  margin: 20px auto;
  position: relative;
  border-radius: 50%;
  padding: 10px;
  background: var(--card2);
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.5);
  border: 4px solid var(--border3);
}

.wheel-visual {
  width: 100%;
  height: 100%;
  background: conic-gradient(#2c3e50 0deg 30deg, #34495e 30deg 60deg,
      #2c3e50 60deg 90deg, #34495e 90deg 120deg,
      #2c3e50 120deg 150deg, #34495e 150deg 180deg,
      #2c3e50 180deg 210deg, #34495e 210deg 240deg,
      #2c3e50 240deg 270deg, #34495e 270deg 300deg,
      #2c3e50 300deg 330deg, #34495e 330deg 360deg);
  border-radius: 50%;
  position: relative;
  transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}

.wheel-pointer {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 32px;
  filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.5));
  z-index: 5;
}

.spin-hint {
  text-align: center;
  font-size: 11px;
  color: var(--t4);
  margin-bottom: 20px;
}

/* --- SHOP TABS & MARKETPLACE --- */
.shop-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.shop-tab-btn {
  flex: 1;
  padding: 12px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  color: var(--t3);
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.shop-tab-btn.active {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 4px 15px rgba(255, 204, 0, 0.1);
}

.marketplace-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--blue-g);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
}

/* --- STATS GRID --- */
.stats-grid-detailed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-item {
  background: var(--bg);
  border: 1px solid var(--border2);
  padding: 12px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-item label {
  font-size: 9px;
  color: var(--t4);
  font-weight: 800;
  text-transform: uppercase;
}

.stat-item span {
  font-size: 16px;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
}

/* --- CRASH IMPROVEMENTS --- */
.crash-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.bet-input-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bet-input-container label {
  font-size: 9px;
  font-weight: 900;
  color: var(--t4);
  padding-left: 5px;
}

.crash-input-wrapper {
  background: var(--bg);
  border: 1.5px solid var(--border3);
  border-radius: 12px;
  overflow: hidden;
}

.crash-input-wrapper input {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  padding: 12px;
  font-weight: 800;
  outline: none;
  text-align: center;
}

.crash-btn.bet,
.crash-btn.cashout {
  grid-column: span 2;
}

.crash-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Plinko Game Styles */
.plinko-arena-safe {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  margin-bottom: 0px;
}

.plinko-canvas-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0f0f1a 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--border3);
}

@media (max-height: 800px) {
  .plinko-canvas-wrapper {
    aspect-ratio: 1 / 0.75;
  }

  .plinko-arena-safe {
    margin-bottom: 10px;
  }
}

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

.plinko-multipliers {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  margin-top: 5px;
}

#game-view-plinko .roll-section {
  margin-top: -8px;
  padding-top: 6px;
}

.plinko-multiplier-slot {
  flex: 1;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 6px 0;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  transition: all 0.3s;
}

.plinko-multiplier-slot.win {
  background: var(--gold-g);
  color: #000;
  box-shadow: 0 0 15px var(--gold);
  transform: scale(1.1);
  z-index: 10;
}

.plinko-multiplier-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 6px 0;
  text-align: center;
  min-height: 48px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mult-val {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 3px;
}

.mult-payout-preview {
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  opacity: 0.6;
}

.plinko-multiplier-slot.win {
  background: var(--gold-g) !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px var(--gold);
  transform: scale(1.15) translateY(-5px);
  z-index: 10;
}

.plinko-multiplier-slot.win .mult-payout-preview {
  color: #000 !important;
  opacity: 0.8;
}

/* MANUAL DEPOSIT */
.manual-deposit-box {
  width: 100%;
}

.manual-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.copy-field {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.copy-field:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.05);
}

.copy-field span {
  font-family: monospace;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.copy-field svg {
  color: var(--t3);
  flex-shrink: 0;
}

.crash-info.crashed .crash-mult {
  color: var(--red);
  text-shadow: 0 0 30px rgba(229, 57, 53, 0.5);
  animation: none !important;
}

/* Вибрация иксов */
.crash-mult.vibrating {
  animation: crash-vibrate 0.1s infinite linear;
}

/* Animations from previous session preserved below */
@keyframes crash-vibrate {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(1px, 1px) rotate(0.4deg);
  }

  50% {
    transform: translate(-1px, -1px) rotate(-0.4deg);
  }

  75% {
    transform: translate(1px, -1px) rotate(0.4deg);
  }

  100% {
    transform: translate(-1px, 1px) rotate(-0.4deg);
  }
}

/* --- WHEEL LABELS --- */
.wheel-labels {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.wheel-segment-label {
  position: absolute;
  width: 60px;
  height: 50%;
  left: calc(50% - 30px);
  top: 0;
  transform-origin: 50% 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 22px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  pointer-events: none;
  z-index: 10;
}

.wheel-segment-label span {
  display: block;
  transform: rotate(0deg);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  user-select: none;
}

.wheel-segment-label span {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
  display: block;
  user-select: none;
}

/* --- PROMO SECTION --- */
.promo-input-group {
  display: flex;
  gap: 8px;
  background: var(--bg);
  border: 1.5px solid var(--border3);
  border-radius: 14px;
  padding: 6px;
  margin-top: 10px;
}

.promo-input-group input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  font-family: 'Outfit', sans-serif;
}

.promo-input-group button {
  background: var(--gold);
  color: #000;
  border: none;
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: 0 4px 10px rgba(255, 174, 0, 0.2);
}

.promo-input-group button:active {
  transform: scale(0.96);
}

/* --- PREMIUM EMPTY STATE --- */
.premium-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--card2);
  border-radius: 20px;
  border: 1px solid var(--border);
  min-height: 200px;
}

.empty-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--blue-g);
  filter: blur(80px);
  opacity: 0.1;
  z-index: 0;
}

.empty-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--bg);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid var(--border3);
  position: relative;
  z-index: 1;
}

.empty-icon-wrap svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--t4);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-empty p {
  color: var(--t4);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

/* --- PREMIUM GIFT CARDS & SHOP --- */
.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 10px 0 !important;
}

.gift-card,
.shop-item {
  position: relative !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.gift-img-wrap,
.shop-item-icon {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.08) 0%, transparent 100%) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  border: 1.5px solid rgba(255, 204, 0, 0.12) !important;
  font-size: 32px !important;
}

.gift-img,
.shop-item-icon img,
.gift-avatar img {
  width: 75% !important;
  height: 75% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.3)) !important;
}

.gift-info-link {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 20px !important;
  height: 20px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  z-index: 20 !important;
  backdrop-filter: blur(4px) !important;
  transition: all 0.2s !important;
}

.gift-info-link:active {
  transform: scale(0.85) !important;
  background: var(--gold) !important;
  color: #000 !important;
}

.gift-name,
.shop-item-title {
  font-weight: 800 !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  margin-top: 4px !important;
}

.gift-price,
.shop-item-price {
  font-weight: 900 !important;
  font-size: 14px !important;
  color: var(--gold) !important;
}

.gift-buy-btn,
.buy-btn {
  width: 100% !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border3) !important;
  color: var(--t2) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-transform: uppercase !important;
}

.gift-buy-btn:active,
.buy-btn:active {
  background: var(--gold) !important;
  color: #000 !important;
  border-color: var(--gold) !important;
}

/* --- BET MODES --- */
.bet-modes-tabs {
  display: flex !important;
  gap: 6px !important;
  background: var(--bg) !important;
  padding: 4px !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--border3) !important;
}

.bet-mode-tab {
  flex: 1 !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--t4) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.bet-mode-tab.active {
  background: var(--card2) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.gift-selection-area {
  margin-top: 10px !important;
}

.gift-selection-scroll {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  padding: 4px !important;
}

/* Card in bet modal */
.gift-select-card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  position: relative !important;
}

.gift-select-card.active {
  border-color: var(--gold) !important;
  background: var(--gold-dim) !important;
  box-shadow: 0 0 10px rgba(255, 174, 0, 0.15) !important;
}

.gift-select-card .gift-avatar {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gift-select-card .gift-title {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: var(--t2) !important;
  display: block;
}

.gift-select-card .gift-cost {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
}

.marketplace-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  color: #000 !important;
  background: var(--gold) !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  z-index: 5 !important;
}

/* Fix mobile nav icon for bonuses */
[data-tab="bonuses"] svg {
  color: var(--t3);
}

.nav-tab.active[data-tab="bonuses"] svg {
  color: var(--gold);
}

/* --- PREMIUM INPUTS & BETTING --- */
.premium-bet-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.premium-bet-input:focus-within {
  border-color: var(--gold) !important;
  background: rgba(255, 204, 0, 0.05) !important;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.1), inset 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.premium-bet-input input {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: center !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: "Outfit", sans-serif !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.premium-bet-input input::placeholder {
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 20px !important;
}

.premium-bet-input .bet-max {
  font-size: 11px !important;
  padding: 6px 12px !important;
  background: var(--gold) !important;
  color: #000 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.bet-modal-box {
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.bet-mode-tab {
  border: none !important;
  background: transparent !important;
  color: var(--t3) !important;
  padding: 10px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.bet-mode-tab.active {
  background: var(--gold) !important;
  color: #000 !important;
}

.crash-canvas-wrap {
  background: #080808 !important;
  border-radius: 20px !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

.gift-select-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bet-amount-section-modal label {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.gift-select-card.active {
  border-color: var(--gold) !important;
  background: rgba(255, 204, 0, 0.05) !important;
}

/* HIDE AND SEEK STYLES */
.hide-arena {
  width: 100%;
  aspect-ratio: 16/10;
  background: #0a0a0a;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
}

#hide-canvas {
  width: 100%;
  height: 100%;
}

.hide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

.hide-timer {
  font-size: 64px;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 204, 0, 0.4);
}

.hide-phase-title {
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.hide-info-label {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--t4);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vote-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.vote-buttons-grid button {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 10px;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.vote-buttons-grid button:active {
  transform: scale(0.95);
  border-color: var(--gold);
  background: rgba(255, 204, 0, 0.05);
}

.vote-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 15px 10px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.vote-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold);
}

.hide-rooms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.room-node {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.room-node.active {
  background: rgba(255, 204, 0, 0.1);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.1);
}

.room-node.hit {
  background: rgba(231, 76, 60, 0.1);
  border-color: #e74c3c;
  box-shadow: 0 0 15px rgba(231, 76, 60, 0.1);
}

.room-node.full {
  opacity: 0.5;
  cursor: not-allowed;
}

.room-num {
  font-size: 14px;
  font-weight: 900;
}

.room-p-count {
  font-size: 9px;
  color: var(--t4);
}

/* ——— WALLET & DEPOSIT PREMIUM ——— */
.deposit-hero {
  text-align: center;
  padding: 40px 20px;
  background: radial-gradient(circle at center, rgba(255, 204, 0, 0.08) 0%, transparent 70%);
  border-radius: 30px;
  margin: 10px 0 25px;
  border: 1px solid rgba(255, 204, 0, 0.05);
}

.hero-icon {
  width: 80px;
  height: 80px;
  background: var(--bg2);
  border: 2px solid var(--gold-dim);
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  position: relative;
}

.hero-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--gold);
}

.deposit-hero h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 8px;
  background: var(--gold-g);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.deposit-hero p {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.5;
  max-width: 240px;
  margin: 0 auto;
}

.wallet-method-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 24px;
  margin-bottom: 20px;
}

.method-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 15px;
}

.method-icon,
.method-icon-shimmer {
  width: 48px;
  height: 48px;
  background: var(--bg);
  border-radius: 14px;
  border: 1.5px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.method-icon svg,
.method-icon-shimmer svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold);
}

.method-icon-shimmer {
  position: relative;
  overflow: hidden;
}

.method-icon-shimmer::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: shimmerW 3s infinite;
}

@keyframes shimmerW {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(50%);
  }
}

.method-title-wrap h4 {
  font-size: 17px;
  font-weight: 850;
  color: #fff;
}

.method-badge {
  font-size: 9px;
  font-weight: 950;
  background: var(--gold);
  color: #000;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-left: 8px;
}

.method-desc {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.6;
  margin-bottom: 20px;
}

.dealer-btn-gold {
  display: block;
  width: 100%;
  padding: 18px;
  text-align: center;
  background: var(--gold-g);
  color: #000;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
  transition: all 0.2s;
}

.dealer-btn-gold:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}

.dep-input-zone {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 24px;
  padding: 20px;
  border: 1px solid var(--border);
}

.premium-input-group {
  background: var(--bg);
  border: 2px solid var(--border3);
  border-radius: 18px;
  padding: 12px;
  margin: 15px 0;
}

.premium-input-group input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  text-align: center;
}

.dep-info-box {
  margin-top: 15px;
  padding: 15px;
  background: rgba(255, 204, 0, 0.05);
  border-radius: 15px;
  border: 1px dashed var(--gold-dim);
  font-size: 11px;
  color: var(--t3);
  line-height: 1.5;
  text-align: center;
}

.dep-info-box .highlight {
  color: var(--gold);
  font-weight: 800;
}

/* Referral Page */
.ref-page {
  padding: 16px;
}

.ref-hero {
  text-align: center;
  padding: 35px 20px 30px;
  background: radial-gradient(circle at center, rgba(255, 183, 0, 0.08) 0%, transparent 70%);
  border-radius: 28px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 183, 0, 0.06);
}

.ref-hero-icon {
  width: 80px;
  height: 80px;
  background: var(--bg2);
  border: 2px solid var(--gold-dim);
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.ref-hero h2 {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
  background: var(--gold-g);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ref-hero p {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
}

.ref-hero p b {
  color: var(--gold);
}

.ref-promo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 183, 0, 0.1), rgba(255, 145, 0, 0.06));
  border: 1px solid rgba(255, 183, 0, 0.2);
}

.ref-promo-emoji {
  font-size: 32px;
  flex-shrink: 0;
}

.ref-promo-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ref-promo-info b {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}

.ref-promo-info span {
  color: var(--t4);
  font-size: 11px;
}

.ref-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.ref-stat-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ref-stat-num {
  font-size: 26px;
  font-weight: 900;
  background: var(--gold-g);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ref-stat-label {
  font-size: 11px;
  color: var(--t4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ref-progress-section {
  margin-bottom: 20px;
}

.ref-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--t4);
  margin-bottom: 8px;
  font-weight: 500;
}

.ref-progress-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ref-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--gold), #ff9100);
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-link-section {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}

.ref-link-label {
  display: block;
  font-size: 12px;
  color: var(--t4);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ref-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}

.ref-link-box span {
  flex: 1;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--t2);
  word-break: break-all;
  line-height: 1.4;
}

.ref-copy-btn {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.ref-copy-btn:active {
  background: rgba(255, 183, 0, 0.12);
}

.ref-share-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), #ff9100);
  color: #000;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 15px rgba(255, 183, 0, 0.25);
}

.ref-share-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(255, 183, 0, 0.2);
}

.ref-how-section {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 30px;
}

.ref-how-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 16px;
}

.ref-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--t3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ref-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ref-step span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 183, 0, 0.15), rgba(255, 145, 0, 0.08));
  border: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
}

/* Demo Toggle Switch */
.demo-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.demo-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.demo-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  transition: 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--t3);
  border-radius: 50%;
  transition: 0.3s;
}

.demo-switch input:checked+.demo-slider {
  background: rgba(255, 183, 0, 0.2);
  border-color: rgba(255, 183, 0, 0.4);
}

.demo-switch input:checked+.demo-slider::before {
  transform: translateX(18px);
  background: var(--gold);
}