:root {
  --bg-base:   #06111f;
  --bg-mid:    #091929;
  --bg-top:    #0c2035;
  --card:      rgba(255,255,255,0.04);
  --card-b:    rgba(255,255,255,0.07);
  --text:      #dde8f4;
  --hint:      #6a8eaa;
  --accent:    #2dd4bf;
  --accent-2:  #38bdf8;
  --acc-glow:  rgba(45,212,191,0.28);
  --win:       #2ecc71;
  --lose:      #e74c3c;
  --tie:       #f39c12;
  --red:       #e74c3c;
  --black:     #2c3e50;
  --green:     #27ae60;
  --radius:    18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; font-family: inherit; }

html, body { min-height: 100%; }

body {
  background:
    radial-gradient(ellipse 900px 500px at 20% -5%, rgba(168,85,247,0.14), transparent 55%),
    radial-gradient(ellipse 700px 400px at 85% 10%, rgba(45,212,191,0.08), transparent 50%),
    radial-gradient(ellipse 600px 600px at 50% 90%, rgba(60,20,90,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-mid) 50%, var(--bg-base) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 32px;
  -webkit-tap-highlight-color: transparent;
}

/* ─── TOPBAR ─── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6,17,31,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 16px;
  display: flex; justify-content: center;
  border-bottom: 1px solid var(--card-b);
}
.balance { display: flex; gap: 16px; font-size: 14px; }
.balance-item {
  background: var(--card);
  border: 1px solid var(--card-b);
  padding: 6px 14px;
  border-radius: 999px;
  transition: transform 0.2s ease;
}
.balance-item.bump { animation: bump 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); box-shadow: 0 0 0 5px var(--acc-glow); }
  100% { transform: scale(1); }
}

/* ─── TABS ─── */
.tabs {
  display: flex; gap: 6px;
  padding: 12px 12px 0;
}
.tab {
  flex: 1; padding: 10px 4px;
  border: 1px solid var(--card-b);
  border-radius: 13px;
  background: var(--card);
  color: var(--hint);
  font-size: 13px; font-weight: 600;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px var(--acc-glow);
}
.tab:active { transform: scale(0.96); }

main { padding: 10px 14px 0; }

.screen { display: none; }
.screen.active {
  display: block;
  animation: fadeUp 0.3s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

h2 { font-size: 18px; margin: 14px 0 10px; font-weight: 700; }
h3 { font-size: 11px; color: var(--hint); margin: 18px 0 7px; text-transform: uppercase; letter-spacing: 0.8px; }

.card {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
}

.field-row { margin-bottom: 13px; }
.field-row label { display: block; font-size: 12px; color: var(--hint); margin-bottom: 6px; }

input[type="number"] {
  width: 100%; padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-b);
  background: rgba(0,0,0,0.2);
  color: var(--text); font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--acc-glow); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.segmented { display: flex; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); padding: 3px; }
.seg {
  flex: 1; border: none; background: transparent; color: var(--hint);
  padding: 8px 0; border-radius: 9px;
  font-size: 13px; font-weight: 600;
  transition: background .2s, color .2s;
}
.seg.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

.primary-btn {
  width: 100%; padding: 13px;
  border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 20px -8px var(--acc-glow);
  transition: transform .15s, opacity .2s, box-shadow .2s;
}
.primary-btn:active { transform: scale(0.97); box-shadow: 0 3px 10px -6px var(--acc-glow); }
.primary-btn:disabled { opacity: 0.4; box-shadow: none; }

.secondary-btn {
  width: 100%; padding: 11px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--card-b);
  color: var(--hint); font-size: 14px;
  margin-top: 10px;
  transition: border-color .2s, color .2s;
}
.secondary-btn:active { transform: scale(0.97); }

/* ─── CASINO GAME TABS ─── */
.game-tabs {
  display: flex; gap: 5px;
  margin: 8px 0 10px;
}
.game-tab {
  flex: 1; padding: 9px 2px;
  border-radius: 11px;
  border: 1px solid var(--card-b);
  background: rgba(0,0,0,0.18);
  color: var(--hint);
  font-size: 18px;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.game-tab.active {
  background: linear-gradient(135deg, rgba(45,212,191,0.3), rgba(56,189,248,0.25));
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: 0 0 10px rgba(45,212,191,0.25);
}
.game-tab:active { transform: scale(0.9); }

.game-panel { display: block; }
.game-panel.hidden { display: none; }

/* ─── SLOT MACHINE ─── */
.game-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px; margin-bottom: 8px;
}

.slot-machine {
  position: relative;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--card-b);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4), 0 0 30px rgba(45,212,191,0.08);
}
.slot-shine {
  position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.slot-window {
  display: flex; gap: 8px;
}
.reel-strip {
  width: 64px; height: 70px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.reel-cell {
  font-size: 34px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 70px;
}
.reel-strip.spinning .reel-cell {
  animation: reel-blur 0.1s linear infinite;
}
@keyframes reel-blur {
  0%   { transform: translateY(-8px); filter: blur(1.5px); }
  50%  { transform: translateY(8px);  filter: blur(1.5px); }
  100% { transform: translateY(-8px); filter: blur(1.5px); }
}
.reel-strip.landed .reel-cell {
  animation: reel-land 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes reel-land {
  0%   { transform: scale(1.4) rotate(-8deg); opacity:0.5; }
  100% { transform: scale(1)   rotate(0deg);  opacity:1; }
}

/* ─── BET ROW ─── */
.bet-row {
  display: flex; gap: 7px; align-items: center;
  margin-bottom: 8px;
}
.bet-row .currency-seg { min-width: 72px; flex-shrink: 0; }
.bet-row input[type="number"] { flex: 1; }
.bet-row .primary-btn { min-width: 88px; width: auto; padding: 12px 16px; }

.spin-btn { min-width: 88px; }

/* ─── ПОДСКАЗКИ (шансы игры, MAX-ставка) ─── */
.game-info-line {
  font-size: 11px; color: var(--hint);
  text-align: center; margin: -2px 0 8px;
  line-height: 1.4;
}
.bet-hint {
  font-size: 11px; color: var(--hint);
  text-align: center; margin: 6px 0 0;
}

.bet-presets { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.bet-presets button {
  flex: 1; min-width: 44px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--card-b);
  color: var(--text); border-radius: 9px;
  padding: 7px 0; font-size: 12px;
  transition: background .15s, transform .12s;
}
.bet-presets button:active { transform: scale(0.93); background: rgba(45,212,191,0.18); }

.result-text {
  min-height: 22px; font-weight: 700; font-size: 15px;
  text-align: center; margin: 6px 0 10px;
}
.result-text.win  { color: var(--win);  animation: pop .4s cubic-bezier(.34,1.56,.64,1); }
.result-text.lose { color: var(--lose); animation: pop .3s ease; }
.result-text.tie  { color: var(--tie);  animation: pop .35s ease; }
.result-text.error { color: var(--lose); font-weight: 600; font-size: 13px; }
@keyframes pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ─── ROULETTE ─── */
.roulette-container {
  position: relative; width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
#rouletteCanvas {
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(45,212,191,0.28));
}
.roulette-center {
  position: absolute; font-size: 22px;
  pointer-events: none;
}

.roulette-bets { margin-bottom: 10px; }
.roul-section { margin-bottom: 8px; }
.roul-label { font-size: 11px; color: var(--hint); margin-bottom: 5px; }
.roul-options { display: flex; gap: 5px; }
.roul-btn {
  flex: 1; padding: 8px 4px;
  border-radius: 9px;
  border: 1px solid var(--card-b);
  background: rgba(0,0,0,0.18);
  color: var(--hint); font-size: 12px; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.roul-btn.active {
  background: rgba(45,212,191,0.22);
  border-color: var(--accent);
  color: var(--accent-2);
}
.roul-btn[data-bet="red"].active  { background: rgba(231,76,60,0.25);  border-color: var(--red);   color: #ff7979; }
.roul-btn[data-bet="black"].active { background: rgba(44,62,80,0.5);   border-color: #4a5568;      color: #a0aec0; }
.roul-btn[data-bet="green"].active { background: rgba(39,174,96,0.25); border-color: var(--green); color: #55efc4; }

/* ─── BLACKJACK ─── */
.bj-table {
  background: rgba(0, 40, 20, 0.35);
  border: 1px solid rgba(39,174,96,0.2);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 160px;
}
.bj-divider {
  height: 1px; background: rgba(39,174,96,0.2);
}
.bj-side { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bj-label { font-size: 11px; color: var(--hint); text-transform: uppercase; letter-spacing: 0.6px; }
.bj-total { font-size: 18px; font-weight: 700; min-height: 22px; }
.bj-cards { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; min-height: 60px; align-items: center; }

.playing-card {
  width: 42px; height: 58px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; line-height: 1;
  flex-direction: column;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  color: #222;
  animation: card-deal 0.35s cubic-bezier(.34,1.4,.64,1);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.playing-card.red { color: #c0392b; }
.playing-card.hidden-card {
  background: linear-gradient(135deg, #1a3a8f 25%, #0f2463 75%);
  color: transparent; border: 1px solid rgba(255,255,255,0.1);
}
.playing-card.hidden-card::after {
  content: "🂠";
  font-size: 28px; color: rgba(255,255,255,0.3);
  position: absolute;
}
.card-rank { font-size: 15px; line-height: 1; }
.card-suit { font-size: 13px; line-height: 1; }
@keyframes card-deal {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.bj-action-row {
  display: flex; gap: 10px; margin-bottom: 8px;
}
.bj-btn {
  flex: 1; padding: 13px;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700;
  border: none;
  transition: transform .15s, opacity .15s;
}
.bj-btn:active { transform: scale(0.96); }
.bj-btn.hit { background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; }
.bj-btn.stand { background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; }
.bj-btn:disabled { opacity: 0.4; }

/* ─── DICE ─── */
.dice-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.dice-box {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(45,212,191,0.18), rgba(0,0,0,0.4));
  border: 1px solid var(--card-b);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.dice-shadow {
  width: 64px; height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%);
  margin-top: 4px;
}
.dice-box.rolling { animation: dice-roll 0.09s linear infinite; }
@keyframes dice-roll {
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(90deg)  scale(1.05); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
.dice-box.landed { animation: land-bounce .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes land-bounce {
  0%   { transform: scale(1.4) rotate(-10deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* ─── COIN 3D ─── */
.coin-wrap { perspective: 600px; }
.coin-pick-row { text-align: center; }
.coin3d {
  width: 80px; height: 80px;
  position: relative; transform-style: preserve-3d;
  margin: 0 auto;
  /* Раньше тут был transition: transform 0.3s -- пока играла бесконечная
     0.14s-анимация вращения, она обрывалась в СЛУЧАЙНОЙ точке (не кратной
     180°), а затем этот transition плавно "довращивал" монету до итогового
     0/180deg через рандомную дельту каждый раз — отсюда ощущение
     "лагает"/дёргается при приземлении. Без transition финальный transform
     применяется мгновенно, а сама анимация ниже теперь считает целое
     число оборотов, так что обрыва в некрасивой точке не будет. */
}
.coin-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.coin-face.front {
  background: linear-gradient(135deg, #f6d365, #fda085);
  box-shadow: 0 0 0 3px rgba(255,200,100,0.3), 0 8px 20px rgba(0,0,0,0.4);
}
.coin-face.back {
  background: linear-gradient(135deg, #b0bec5, #78909c);
  box-shadow: 0 0 0 3px rgba(150,150,150,0.3), 0 8px 20px rgba(0,0,0,0.4);
  transform: rotateY(180deg);
}
/* Ровно 5 полных оборотов (1800deg — кратно 360) за то же время, что и JS
   ждёт ответ сервера -- заканчивается визуально ровно в rotateY(0), без
   обрыва анимации на произвольном угле. */
.coin3d.flipping { animation: coin-flip3d 0.9s linear 1; }
@keyframes coin-flip3d {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(1800deg); }
}
.coin3d.show-tails { transform: rotateY(180deg); }
.coin3d.landed { animation: coin-land .5s cubic-bezier(.34,1.4,.64,1); }
@keyframes coin-land {
  0%   { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ─── BANK ─── */
.predicted-payout { font-size: 13px; color: var(--hint); margin-bottom: 12px; }
.predicted-payout b { color: var(--win); }

.deposits-list { display: flex; flex-direction: column; gap: 7px; }
.deposit-row {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; gap: 10px;
}
.deposit-row .dep-status { color: var(--hint); white-space: nowrap; }
.deposit-row .claim-btn {
  background: linear-gradient(135deg, var(--win), #27ae60);
  color: #071d0f;
  border: none; border-radius: 8px;
  padding: 7px 12px;
  font-weight: 700; font-size: 12px;
  animation: pulse-ready 2s ease infinite;
}
@keyframes pulse-ready {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(46,204,113,0); }
}

.active-deposit-banner {
  background: linear-gradient(135deg, rgba(168,85,247,0.14), rgba(45,212,191,0.08));
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 13px; font-size: 13px;
}
.active-deposit-banner .adb-title { font-weight: 700; margin-bottom: 4px; }
.active-deposit-banner .adb-hint { color: var(--hint); }

/* ─── PVP ─── */
.radar {
  width: 90px; height: 90px;
  margin: 10px auto 16px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.radar::before, .radar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: radar-pulse 1.8s ease-out infinite;
}
.radar::after { animation-delay: 0.9s; }
@keyframes radar-pulse {
  0%   { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.radar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 2px var(--acc-glow); }

#pvpSearching { text-align: center; }

.vs-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.player-badge {
  background: rgba(0,0,0,0.2); border: 1px solid var(--card-b);
  border-radius: 11px; padding: 9px 12px;
  font-size: 13px; font-weight: 600; flex: 1; text-align: center;
}
.vs-label { padding: 0 10px; color: var(--hint); font-weight: 700; font-size: 12px; }

.pvp-timer { height: 5px; background: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.pvp-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 100%; transform-origin: left;
}
.pvp-timer-bar.running { animation: countdown linear forwards; }
@keyframes countdown { from { width: 100%; } to { width: 0%; } }

.choices { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; }
.choice-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--card-b);
  background: rgba(0,0,0,0.2); font-size: 26px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s;
}
.choice-btn:active { transform: scale(0.86); }
.choice-btn.selected {
  border-color: var(--accent);
  transform: scale(1.1);
  box-shadow: 0 0 0 5px var(--acc-glow);
}

.muted { text-align: center; color: var(--hint); font-size: 13px; }

.reveal-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.reveal-emoji {
  font-size: 44px;
  animation: reveal-pop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes reveal-pop {
  0%   { transform: rotate(0) scale(0.2); opacity:0; }
  50%  { transform: rotate(-12deg) scale(1.25); opacity:1; }
  100% { transform: rotate(0) scale(1); }
}

/* ─── TOAST ─── */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: rgba(6,17,31,0.96);
  border: 1px solid var(--card-b);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 12px; font-size: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  animation: toast-in .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 99; max-width: 88vw; text-align: center;
}
@keyframes toast-in {
  from { opacity:0; transform: translate(-50%, 14px) scale(0.94); }
  to   { opacity:1; transform: translate(-50%, 0) scale(1); }
}
.hidden { display: none !important; }

/* ─── ПРОФИЛЬ ─── */
.profile-card { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 16px; font-weight: 700; }
.profile-username { font-size: 13px; color: var(--hint); margin-top: 2px; }
.profile-id-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--hint); margin-top: 6px;
}
.profile-id-row code {
  background: rgba(0,0,0,0.25); padding: 2px 7px; border-radius: 6px;
  color: var(--text); font-size: 12px;
}
.profile-copy-btn {
  background: rgba(0,0,0,0.25); border: 1px solid var(--card-b);
  color: var(--hint); border-radius: 6px; padding: 2px 8px; font-size: 11px;
}
.profile-stats { display: flex; gap: 8px; margin-top: 4px; }
.profile-stat {
  flex: 1; text-align: center; background: var(--card);
  border: 1px solid var(--card-b); border-radius: var(--radius-sm);
  padding: 12px 6px;
}
.profile-stat .val { font-size: 17px; font-weight: 800; }
.profile-stat .lbl { font-size: 11px; color: var(--hint); margin-top: 3px; }

/* ─── ПЕРЕВОД: поле "Кому" покрупнее и с иконкой ─── */
.transfer-target-wrap { position: relative; }
.transfer-target-wrap .transfer-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 16px; pointer-events: none; opacity: 0.7;
}
.transfer-target-wrap input {
  padding-left: 38px; font-size: 16px; font-weight: 600;
}
.field-hint { font-size: 11px; color: var(--hint); margin-top: 5px; }

/* ─── АДМИНКА ─── */
.admin-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.admin-stat {
  background: rgba(0,0,0,0.18); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.admin-stat .val { font-size: 18px; font-weight: 800; }
.admin-stat .lbl { font-size: 11px; color: var(--hint); margin-top: 2px; }
.admin-user-card {
  background: rgba(0,0,0,0.18); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 12px; font-size: 13px;
}
.admin-user-card .row { display: flex; justify-content: space-between; padding: 3px 0; }
.admin-user-card .row .lbl { color: var(--hint); }
.admin-flag-bad { color: var(--lose); font-weight: 700; }
.audit-row-reason { display: block; font-size: 11px; color: var(--hint); margin-top: 2px; }

/* Новые вкладки используют оформление исходного приложения. */
.extra-games{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.extra-games button{flex:1}
.page-heading{margin-bottom:18px}
.vip-intro,.vip-current{color:var(--hint);margin:12px 0}
.vip-plans{display:grid;gap:14px}
.vip-plan,.terms-card,.quick-game{padding:20px;border:1px solid var(--card-b);border-radius:var(--radius);background:var(--card);margin:14px 0}
.vip-plan{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vip-plan button{grid-column:1/-1}
.plan-mult{text-align:right;font-size:28px;color:var(--accent)}
.terms-card p{font-size:12px;line-height:1.5;color:var(--hint);margin-top:10px}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.quick-bet{display:flex;gap:12px;align-items:end;margin:14px 0}
.quick-bet input{display:block;width:100px}
.quick-choices{display:flex;gap:10px}
.quick-choices button,.text-button{padding:10px 14px;border:1px solid var(--card-b);border-radius:var(--radius-sm);background:var(--card);color:var(--text)}
.mine-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.mine-grid button{min-height:44px}
.mine-grid button.mine{color:var(--lose)}
.mine-grid button.picked{outline:2px solid var(--accent)}
#quickResult,#quickRules{margin:12px 0;color:var(--hint)}
#tab-home .bank-card p{margin:10px 0}
#cryBtn{width:100%;margin:12px 0}
#diceSide{margin:12px auto;width:max-content}
:root{--bg-base:#131519;--bg-mid:#171a20;--bg-top:#1e222a;--card:#1b1e25;--card-b:#2b2f38;--text:#f4f5f8;--hint:#9297a4;--accent:#2dd4bf;--accent-2:#38bdf8;--acc-glow:rgba(45,212,191,.16);--radius:22px;--radius-sm:14px}
body{background:#131519;padding-bottom:calc(106px + env(safe-area-inset-bottom));font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:600px;margin:auto;line-height:1.45}
button,input,select{font:inherit}button{touch-action:manipulation;transition:transform .18s,background .18s,border-color .18s}button:active:not(:disabled){transform:scale(.96)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #2dd4bf;outline-offset:3px}button:disabled{opacity:.42;cursor:default}
.wallet-header{position:relative;padding:24px 22px 12px;background:linear-gradient(180deg,#3a2350 0%,#241a30 30%,#18141c 67%,#131519 100%)}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.wordmark{font-size:20px;font-weight:800;letter-spacing:-.8px}.brand-dot{font-size:10px;margin-left:6px;vertical-align:middle;color:#5eead4}.user-chip{display:flex;align-items:center;gap:7px;color:#fff;background:#ffffff23;border:1px solid #ffffff13;border-radius:24px;padding:5px 10px 5px 5px;font-size:12px}.mini-avatar{display:grid;place-items:center;background:#15263966;width:27px;height:27px;border-radius:50%;font-weight:700}.wallet-label{text-align:center;margin-top:33px;font-size:13px;color:#cdb9e0}.balance{display:flex;align-items:center;flex-direction:column;gap:10px;margin:1px 0 22px}.balance-item{border:0;background:none;box-shadow:none}.main-balance{font-size:54px;letter-spacing:-2px;padding:0;line-height:1.18;font-variant-numeric:tabular-nums}.main-balance b{font-weight:750}.balance-unit{font-size:24px;letter-spacing:-1px;color:#7dd3fc;margin-left:8px}.attempts-pill{padding:5px 12px;font-size:12px;border-radius:30px;color:#cbdce9;background:#ffffff0b}.attempts-pill>span{color:#5eead4;margin-right:4px}
.wallet-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.wallet-actions button{border:0;background:none;color:#d9e0e8;font-size:11px;font-weight:600;display:grid;justify-items:center;gap:7px}.wallet-actions button>span{width:49px;height:49px;border:1px solid #ffffff08;background:#252e38;display:grid;place-items:center;border-radius:50%;font-size:25px;color:#eef4ff}
.tabs{position:fixed;top:auto;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:600px;z-index:40;background:#171b25ed;backdrop-filter:blur(24px);border-top:1px solid #ffffff0b;padding:10px 8px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);gap:2px;border-bottom:0;overflow:visible}.tabs .tab{background:transparent;border:0;color:#858b99;padding:3px 0;min-width:0;font-size:10px;font-weight:600;border-radius:12px;display:flex;flex-direction:column;gap:3px;align-items:center}.tabs .tab>span{font-size:24px;line-height:30px;transition:transform .22s}.tabs .tab.active{color:#2dd4bf;box-shadow:none;background:transparent}.tabs .tab.active>span{transform:translateY(-2px)}
.utility-tabs{display:flex;gap:8px;padding:10px 18px 0;overflow:auto;scrollbar-width:none}.utility-tabs .tab{padding:7px 12px;background:#1e222a;border:1px solid #292f39;border-radius:20px;color:#a2adba;font-size:11px;white-space:nowrap}.utility-tabs .tab.active{color:#5eead4;background:#123536}
main{padding:20px 18px;max-width:none}.screen.active{animation:screen-enter .3s ease both}h1,h2{font-size:22px;letter-spacing:-.7px;font-weight:750}h2{margin-bottom:16px}h3{font-size:16px;font-weight:700}.section-heading{margin:4px 0 15px}.section-heading h2{margin:0}.section-note{color:#858e9d;font-size:11px}
.feature-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;min-height:154px;padding:22px;border:1px solid #c026d355;border-radius:24px;background:linear-gradient(115deg,#4c1d78,#c026d3);color:white;margin:0 0 26px}.feature-banner small{display:block;font-size:8px;letter-spacing:1.1px;color:#f0d9ff;margin-bottom:10px}.feature-banner strong{display:block;font-size:27px;letter-spacing:-.8px;line-height:1.04}.banner-link{display:block;font-size:11px;margin-top:14px;color:#f6e3ff}.banner-art{position:absolute;right:25px;top:20px;font-size:105px;line-height:1;color:#5eead4;text-shadow:4px 7px 0 #7c1fa8,8px 12px 30px #2a0a3d;transform:rotate(12deg);animation:star-float 6s ease-in-out infinite;pointer-events:none}.feature-banner:after{content:"";position:absolute;width:150px;height:150px;right:-35px;bottom:-85px;border-radius:50%;border:24px solid #ffffff09;z-index:-1}
.cry-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bank-card,.card,.vip-plan,.terms-card,.profile-stat,.deposit-row{background:#1b1e25;border:1px solid #2b2f38;box-shadow:none}.bank-card{padding:17px;border-radius:21px;min-width:0}.action-symbol{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#123536;color:#5eead4;font-size:26px;margin-bottom:12px}.bank-card p{font-size:12px;color:#959daa}.bank-card b{color:#e0e7f2}
.primary-btn{background:#0d9488;box-shadow:none;border:1px solid #2dd4bf20;border-radius:13px;color:white;font-size:14px;font-weight:650;padding:12px 16px}.primary-btn:hover{background:#14b8a6;box-shadow:none}.secondary-btn{background:#242a33;border:1px solid #353d49;border-radius:13px;color:#cbd6e5}.bank-card .primary-btn{width:100%;margin:12px 0 0;font-size:12px;padding:11px 5px}.bank-card .result-text:empty{display:none}input[type=number],input[type=text],select{background:#14171d;border:1px solid #303743;border-radius:12px;color:#e4edf7;min-height:44px}.segmented{background:#14171d;border:1px solid #2b313c}.seg.active{background:#3a2354;color:#f0d1ff;box-shadow:none}
.game-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 17px;background:none;border:0;padding:0}.game-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:79px;border:1px solid #2c313b;background:#1c2028;border-radius:18px;color:#949eae;padding:10px;font-size:15px;box-shadow:none}.game-tab.active{border-color:#a855f7;background:#2e1f45;color:#f1d9ff;box-shadow:none}.game-icon{font-size:25px;line-height:30px}.game-tab small{font-size:11px;font-weight:650}.game-panel{background:#1a1e25;border:1px solid #2b313b;border-radius:23px;padding:16px}.game-stage{background:radial-gradient(ellipse at center,#2b4057,#1b222d 75%);border-radius:18px;min-height:160px}.slot-machine{box-shadow:none;background:#161f2b;border-color:#43536b}.slot-window{background:#e7edf4;border-color:#222f40}.game-info-line{color:#8c99a9;font-size:12px;margin:14px 0}.bet-row{gap:7px}.bet-row input{min-width:0;width:70px;flex:1}.bet-row .primary-btn{font-size:12px;padding:12px}.bet-presets{gap:5px}.bet-presets button{background:#252b36;border:1px solid #333c49;border-radius:9px;color:#aabbd1;font-size:11px}.bet-hint{color:#738095;font-size:10px}.result-text{font-size:14px}.mine-grid button{height:65px;background:#29384b;border:1px solid #405774;border-radius:14px;font-size:25px}.mine-grid button.mine{background:#4a2630;border-color:#864352}.mine-grid button.picked{background:#4a1f6e}.quick-bet{justify-content:space-between}.quick-bet select{max-width:130px}.toast{bottom:calc(94px + env(safe-area-inset-bottom));background:#241c30;border:1px solid #6b3fa0}.vip-plan{background:linear-gradient(130deg,#1e2e42,#1b1e25);border-radius:22px}.plan-mult{color:#5eead4}.profile-avatar{background:#3d2358}.profile-stats{flex-wrap:wrap}.profile-stat{min-width:85px}.active-deposit-banner{background:#2c1f45;border:1px solid #7c3aed;box-shadow:none}.roul-btn.active{box-shadow:none}.terms-card input{accent-color:#2dd4bf}
@keyframes screen-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes star-float{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-7px) rotate(19deg)}}
@media(min-width:520px){.wallet-header{padding:28px 30px 16px}.main-balance{font-size:64px}.banner-art{right:70px}main{padding:24px}.cry-grid .bank-card{padding:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

h3{color:var(--text);text-transform:none;letter-spacing:-.3px;margin:10px 0 7px}.wallet-label{margin-top:22px}.wallet-actions button>span{width:44px;height:44px}.balance{margin-bottom:16px}.feature-banner{min-height:132px;padding:18px;margin-bottom:20px}.feature-banner strong{font-size:25px}.banner-art{font-size:92px}.bank-card .action-symbol{margin-bottom:7px}.bank-card p{line-height:1.3}.bank-card .primary-btn{min-height:42px}

/* Floating navigation */
.tabs {
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: calc(100% - 24px);
  max-width: 568px;
  padding: 6px;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  background: rgba(27, 30, 36, .48);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.tabs .tab {
  min-height: 56px;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 23px;
  color: #a7acb5;
}
.tabs .tab.active {
  background: rgba(13, 17, 23, .48);
  border-color: rgba(255, 255, 255, .1);
  color: #2dd4bf;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.tabs .tab:hover:not(.active) { background: rgba(255, 255, 255, .05); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabs { background: rgba(27, 30, 36, .94); }
}