/* ============================================================
   SLOT ARENA — main stylesheet
   Dark neon casino + glassmorphism + per-game theme vars
   ============================================================ */
:root {
  --bg: #07090f;
  --bg2: #0c101b;
  --card: rgba(255,255,255,.045);
  --card-border: rgba(255,255,255,.09);
  --text: #eef1f8;
  --muted: #9aa3b8;
  --gold: #ffd257;
  --gold2: #ffb03a;
  --accent: #ffd257;
  --accent2: #ff9d3d;
  --green: #3ddc84;
  --red: #ff5468;
  --blue: #38c7ff;
  --pink: #ff7ad0;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --r: 18px;
  --font-ui: 'Rajdhani', system-ui, sans-serif;
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255,210,87,.07), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(255,77,94,.06), transparent 55%),
    var(--bg);
}
#fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--gold); color: #000; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- boot ---------------- */
.boot-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.boot-logo { font-size: 64px; animation: bootpop 1s ease infinite alternate; }
.boot-title { font-family: var(--font-display); font-weight: 900; letter-spacing: .35em; font-size: 22px; color: var(--gold); }
.boot-bar { width: 220px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--gold), var(--accent2)); border-radius: 6px; animation: bootslide 1s ease-in-out infinite; }
@keyframes bootslide { 0% { transform: translateX(-120%);} 100% { transform: translateX(320%);} }
@keyframes bootpop { from { transform: scale(1) rotate(-4deg);} to { transform: scale(1.15) rotate(4deg);} }

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(12px, 4vw, 34px);
  background: rgba(7,9,15,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand-logo { font-size: 26px; filter: drop-shadow(0 0 10px rgba(255,210,87,.6)); }
.brand-name { font-family: var(--font-display); font-weight: 900; letter-spacing: .18em; font-size: 15px; }
.brand-name b { color: var(--gold); }
.topbar-spacer { flex: 1; }
.balance-chips { display: flex; gap: 8px; align-items: center; }
.bal-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-border); background: var(--card);
  font-weight: 700; font-size: 14px; transition: .2s; white-space: nowrap;
}
.bal-chip:hover { transform: translateY(-1px); }
.bal-chip.active { border-color: var(--gold); box-shadow: 0 0 16px rgba(255,210,87,.25); background: rgba(255,210,87,.08); }
.bal-chip .lbl { color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.bal-chip .val { color: var(--gold); }
.topbar .btn { padding: 8px 16px; }
.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-border);
  background: linear-gradient(135deg, var(--gold2), var(--red));
  color: #111; font-weight: 800; cursor: pointer; font-size: 15px;
}
.nav-user { color: var(--muted); font-weight: 700; font-size: 14px; }
@media (max-width: 640px) { .nav-user { display: none; } }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: var(--card); color: var(--text);
  font-weight: 700; font-size: 14px; padding: 10px 18px; cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s; user-select: none;
}
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #221600; border: none; box-shadow: 0 8px 24px rgba(255,176,58,.35); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(255,176,58,.5); background: linear-gradient(135deg, #ffd96e, var(--gold2)); }
.btn-danger { background: linear-gradient(135deg, #ff5468, #d92647); color: #fff; border: none; }
.btn-green { background: linear-gradient(135deg, #3ddc84, #1fae64); color: #04170c; border: none; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.btn-block { width: 100%; }

/* ---------------- badges & chips ---------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.badge-gold { background: rgba(255,210,87,.14); color: var(--gold); border: 1px solid rgba(255,210,87,.4); }
.badge-green { background: rgba(61,220,132,.12); color: var(--green); border: 1px solid rgba(61,220,132,.4); }
.badge-red { background: rgba(255,84,104,.12); color: var(--red); border: 1px solid rgba(255,84,104,.4); }
.badge-blue { background: rgba(56,199,255,.12); color: var(--blue); border: 1px solid rgba(56,199,255,.4); }
.badge-pink { background: rgba(255,122,208,.12); color: var(--pink); border: 1px solid rgba(255,122,208,.4); }
.badge-muted { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--card-border); }

/* ---------------- lobby ---------------- */
.page { max-width: 1240px; margin: 0 auto; padding: 26px clamp(14px, 4vw, 34px) 80px; }

.hero {
  position: relative; overflow: hidden; border-radius: 26px;
  padding: clamp(30px, 6vw, 64px);
  background: linear-gradient(120deg, rgba(255,77,94,.16), rgba(255,210,87,.1) 45%, rgba(56,199,255,.1));
  border: 1px solid var(--card-border);
  margin-bottom: 34px;
}
.hero::after {
  content: ''; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,210,87,.12) 85%, transparent 100%);
  animation: heroRay 9s linear infinite;
}
@keyframes heroRay { to { transform: rotate(360deg); } }
.hero > * { position: relative; z-index: 1; }
.hero-kicker { color: var(--gold); font-weight: 800; letter-spacing: .3em; font-size: 12px; margin-bottom: 12px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 5vw, 52px); line-height: 1.08; max-width: 700px;
  background: linear-gradient(100deg, #fff, var(--gold) 55%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); margin-top: 14px; max-width: 560px; font-size: 17px; font-weight: 500; }
.hero-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-float { position: absolute; font-size: 44px; opacity: .85; animation: floaty 5s ease-in-out infinite; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); z-index: 1; }
@keyframes floaty { 50% { transform: translateY(-16px) rotate(6deg); } }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 2px 18px; }
.section-head h2 { font-family: var(--font-display); font-size: clamp(18px, 3vw, 24px); letter-spacing: .06em; }
.section-head span { color: var(--muted); font-weight: 600; font-size: 14px; }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.game-card {
  position: relative; border-radius: var(--r); overflow: hidden; cursor: pointer;
  border: 1px solid var(--card-border); background: var(--card);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.2), box-shadow .25s, border-color .25s;
  transform-style: preserve-3d;
}
.game-card:hover { transform: translateY(-7px) scale(1.015); border-color: rgba(255,210,87,.45); box-shadow: var(--shadow); }
.game-thumb { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; }
.game-thumb .big-sym { font-size: 84px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); transition: transform .3s; z-index: 2; }
.game-card:hover .big-sym { transform: scale(1.16) rotate(-5deg); }
.game-thumb .orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; animation: floaty 6s ease-in-out infinite; }
.game-thumb .sym-row { position: absolute; bottom: 12px; display: flex; gap: 10px; font-size: 26px; z-index: 2; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.game-thumb .sym-row span { animation: floaty 4s ease-in-out infinite; }
.game-thumb .sym-row span:nth-child(2) { animation-delay: .7s; }
.game-thumb .sym-row span:nth-child(3) { animation-delay: 1.4s; }
.buy-flag { position: absolute; top: 12px; right: 12px; z-index: 3; }
.game-info { padding: 16px 18px 18px; }
.game-info h3 { font-family: var(--font-display); font-size: 16.5px; letter-spacing: .04em; margin-bottom: 5px; }
.game-info p { color: var(--muted); font-size: 13.5px; min-height: 38px; font-weight: 500; }
.game-meta { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }

/* ---------------- auth ---------------- */
.auth-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.auth-card {
  width: 100%; max-width: 430px; border-radius: 24px; padding: 34px 32px;
  background: var(--card); border: 1px solid var(--card-border); backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.auth-card h2 { font-family: var(--font-display); text-align: center; font-size: 24px; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-weight: 500; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(0,0,0,.35); border: 1px solid var(--card-border);
  color: var(--text); font-size: 15px; font-weight: 600; outline: none; transition: border .2s;
}
.field input:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,210,87,.14); }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; background: rgba(0,0,0,.3); padding: 5px; border-radius: 13px; }
.auth-tabs button { flex: 1; padding: 9px; border: none; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.auth-tabs button.active { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #221600; }
.demo-hint { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---------------- slot machine ---------------- */
.game-view { max-width: 1100px; margin: 0 auto; padding: 18px clamp(10px, 3vw, 30px) 70px; }
.game-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.game-topbar h2 { font-family: var(--font-display); font-size: clamp(17px, 3vw, 24px); letter-spacing: .05em; }
.game-topbar .rtp-badge { margin-left: auto; }

.slot-shell {
  position: relative; border-radius: 28px; padding: clamp(14px, 3vw, 26px);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,.35);
}
.slot-shell::before {
  content: ''; position: absolute; inset: -2px; border-radius: 30px; z-index: -1;
  background: linear-gradient(140deg, var(--acc, var(--gold)), transparent 35%, transparent 65%, var(--acc2, var(--accent2)));
  opacity: .5; filter: blur(14px);
}
.reel-window {
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
  border: 2px solid var(--frame, var(--gold));
  box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 0 30px var(--glow, rgba(255,210,87,.3));
}
.reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px; --cell: clamp(58px, 11.5vw, 104px); }
.reel { position: relative; height: calc(var(--cell) * 3); overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.028); }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.cell {
  height: var(--cell); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * 0.52);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.5));
  position: relative;
}
.cell span { position: relative; z-index: 2; transition: transform .2s; }
.reel.spinning .cell span { filter: blur(3px); }
.cell.win { animation: cellWin .7s ease infinite alternate; z-index: 5; }
.cell.win::after {
  content: ''; position: absolute; inset: 4px; border-radius: 12px; z-index: 1;
  background: radial-gradient(circle, var(--glow, rgba(255,210,87,.5)), transparent 70%);
}
@keyframes cellWin {
  from { transform: scale(1); } to { transform: scale(1.22); filter: drop-shadow(0 0 18px var(--acc, #ffd257)); }
}
.cell.scatter-hit span { animation: cellScatter .55s ease infinite alternate; }
@keyframes cellScatter { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.3) rotate(6deg); } }
.reel.anticipate { animation: reelAnt .3s ease infinite alternate; }
@keyframes reelAnt { from { box-shadow: inset 0 0 40px rgba(0,0,0,.7);} to { box-shadow: inset 0 0 40px var(--glow, rgba(255,210,87,.4)); } }

/* win lines svg */
.winlines { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

/* paytable hint row */
.payline-legend { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.payline-legend .pl { font-size: 11px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--card-border); padding: 3px 9px; border-radius: 999px; font-weight: 700; }

/* ---------------- controls ---------------- */
.slot-controls { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.ctrl-row { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.4vw, 22px); flex-wrap: wrap; }
.bet-box { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--card-border); border-radius: 16px; padding: 8px 12px; }
.bet-box .bet-lbl { font-size: 10.5px; color: var(--muted); letter-spacing: .14em; font-weight: 800; text-align: center; }
.bet-box .bet-val { font-family: var(--font-display); font-weight: 800; color: var(--gold); min-width: 74px; text-align: center; font-size: 16px; }
.bet-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(255,255,255,.06); color: var(--text); font-size: 17px; font-weight: 900; cursor: pointer; transition: .15s; }
.bet-btn:hover { background: rgba(255,255,255,.12); }
.spin-btn {
  width: clamp(86px, 15vw, 118px); height: clamp(86px, 15vw, 118px); border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); cursor: pointer;
  background: radial-gradient(circle at 32% 28%, #ff8a9c, var(--acc2, #ff9d3d) 58%, #b3480e);
  color: #fff; font-family: var(--font-display); font-weight: 900; font-size: clamp(13px, 2vw, 16px);
  letter-spacing: .08em; text-shadow: 0 2px 6px rgba(0,0,0,.4);
  box-shadow: 0 14px 36px var(--glow, rgba(255,157,61,.5)), inset 0 -8px 18px rgba(0,0,0,.3);
  transition: transform .12s, box-shadow .2s; position: relative;
}
.spin-btn:hover { transform: scale(1.05); }
.spin-btn:active { transform: scale(.94); }
.spin-btn:disabled { filter: grayscale(.5); opacity: .75; }
.spin-btn::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.28); animation: spinRing 14s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.spin-btn.turbo::after { animation-duration: 4s; border-color: var(--gold); }
.last-win {
  min-width: 130px; text-align: center; background: rgba(0,0,0,.35);
  border: 1px solid var(--card-border); border-radius: 16px; padding: 8px 16px;
}
.last-win .lw-lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.last-win .lw-val { font-family: var(--font-display); font-weight: 800; color: var(--green); font-size: 17px; }
.side-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.buy-btn {
  position: relative; padding: 12px 22px; border-radius: 14px; border: 1px solid rgba(255,210,87,.55);
  background: linear-gradient(135deg, rgba(255,210,87,.2), rgba(255,157,61,.14));
  color: var(--gold); font-weight: 800; letter-spacing: .04em; cursor: pointer; font-size: 14px;
  animation: buyPulse 2.2s ease infinite; transition: .2s;
}
.buy-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,210,87,.35); }
@keyframes buyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,87,.45); }
  50% { box-shadow: 0 0 0 12px rgba(255,210,87,0); }
}

/* ---------------- keyframes used by game.js ---------------- */
@keyframes stripLoop { from { transform: translateY(0); } to { transform: translateY(-33.3333%); } }
@keyframes cellDrop { from { transform: translateY(-90%) scale(.85); opacity: .25; } to { transform: none; opacity: 1; } }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------------- win banners / celebrations ---------------- */
.win-banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) scale(.6);
  z-index: 40; text-align: center; opacity: 0; pointer-events: none;
}
.win-banner.show { animation: bannerIn .55s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes bannerIn { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.wb-label {
  font-family: var(--font-display); font-weight: 900; letter-spacing: .1em;
  font-size: clamp(26px, 6vw, 52px);
  background: linear-gradient(180deg, #fff6d8, var(--gold) 55%, #ff8b2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(255,176,58,.55));
}
.wb-amount {
  margin-top: 6px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 4.5vw, 34px); color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.6);
}
.win-tier-basic .wb-label { background: linear-gradient(180deg,#fff,#cfd6e4); -webkit-background-clip: text; background-clip: text; }
.win-tier-mega .wb-label { background: linear-gradient(180deg,#fff6d8,#ffb03a 50%,#ff4d5e); -webkit-background-clip: text; background-clip: text; }
.win-tier-super_mega .wb-label {
  background: linear-gradient(180deg,#fff,#ffd257 40%,#ff4d5e 75%,#b52cff);
  -webkit-background-clip: text; background-clip: text;
  animation: superShake .3s linear infinite;
}
@keyframes superShake { 25% { transform: rotate(-1.4deg) scale(1.02);} 75% { transform: rotate(1.4deg) scale(1.04);} }
body.screen-shake .slot-shell { animation: shellShake .35s linear infinite; }
@keyframes shellShake { 25% { transform: translate(2px,-2px);} 50% { transform: translate(-2px,2px);} 75% { transform: translate(2px,2px);} }

/* rays behind super mega */
.rays {
  position: absolute; left: 50%; top: 42%; width: 140vmax; height: 140vmax;
  transform: translate(-50%,-50%); z-index: 35; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255,210,87,.12) 12deg, transparent 24deg,
    transparent 36deg, rgba(255,77,94,.1) 48deg, transparent 60deg,
    transparent 72deg, rgba(56,199,255,.1) 84deg, transparent 96deg,
    transparent 108deg, rgba(255,210,87,.12) 120deg, transparent 132deg,
    transparent 144deg, rgba(255,122,208,.1) 156deg, transparent 168deg,
    transparent 180deg, rgba(255,210,87,.12) 192deg, transparent 204deg,
    transparent 216deg, rgba(255,77,94,.1) 228deg, transparent 240deg,
    transparent 252deg, rgba(56,199,255,.1) 264deg, transparent 276deg,
    transparent 288deg, rgba(255,210,87,.12) 300deg, transparent 312deg,
    transparent 324deg, rgba(255,122,208,.1) 336deg, transparent 348deg);
}
.rays.show { opacity: 1; animation: heroRay 12s linear infinite; }

/* ---------------- bonus cinematic ---------------- */
.bonus-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,10,.86); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s;
}
.bonus-overlay.show { opacity: 1; }
.bonus-stage { text-align: center; max-width: min(560px, 92vw); }
.bonus-icon { font-size: clamp(64px, 14vw, 110px); animation: bonusIcon 1.1s ease infinite alternate; filter: drop-shadow(0 0 34px var(--glow, rgba(255,210,87,.7))); }
@keyframes bonusIcon { from { transform: scale(1) rotate(-5deg);} to { transform: scale(1.18) rotate(5deg);} }
.bonus-title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: .12em;
  font-size: clamp(24px, 6vw, 44px); margin: 14px 0 8px;
  background: linear-gradient(180deg, #fff, var(--acc, var(--gold)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bonus-sub { color: var(--muted); font-weight: 600; font-size: 15px; }
.bonus-count {
  margin-top: 18px; font-family: var(--font-display); font-size: clamp(30px, 7vw, 52px);
  font-weight: 900; color: var(--gold); text-shadow: 0 0 30px rgba(255,210,87,.5);
}
.bonus-progress { margin: 18px auto 0; width: 80%; height: 10px; border-radius: 8px; background: rgba(255,255,255,.09); overflow: hidden; }
.bonus-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--acc, var(--gold)), var(--acc2, var(--accent2))); transition: width .3s; }
.bonus-total-lbl { margin-top: 12px; color: var(--muted); font-weight: 700; letter-spacing: .18em; font-size: 12px; }
.bonus-total { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 5vw, 36px); color: var(--green); }
.bonus-spin-tag {
  display: inline-block; margin-bottom: 4px; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--card-border);
  font-weight: 800; font-size: 13px; color: var(--muted); letter-spacing: .1em;
}
.bonus-multiplier {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 9vw, 74px);
  background: linear-gradient(180deg, #fff, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 30px rgba(255,210,87,.5));
}

/* ---------------- history ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--card-border); background: var(--card); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th { text-align: left; padding: 13px 16px; font-size: 11.5px; letter-spacing: .12em; color: var(--muted); border-bottom: 1px solid var(--card-border); font-weight: 800; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.045); font-weight: 600; font-size: 14px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.028); }
.win-pos { color: var(--green); }
.win-neg { color: var(--muted); }
.tbl-scroll { max-height: 480px; overflow-y: auto; }

/* ---------------- admin ---------------- */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-tabs button {
  padding: 10px 18px; border-radius: 12px; border: 1px solid var(--card-border);
  background: var(--card); color: var(--muted); font-weight: 800; cursor: pointer; font-size: 13.5px;
}
.admin-tabs button.active { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #221600; border-color: transparent; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card { border-radius: 16px; padding: 16px 18px; background: var(--card); border: 1px solid var(--card-border); }
.stat-card .s-lbl { color: var(--muted); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.stat-card .s-val { font-family: var(--font-display); font-weight: 800; font-size: 21px; margin-top: 6px; }
.stat-card .s-val.gold { color: var(--gold); } .stat-card .s-val.green { color: var(--green); }
.stat-card .s-val.red { color: var(--red); } .stat-card .s-val.blue { color: var(--blue); }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mode-card {
  border-radius: 16px; padding: 15px 17px; cursor: pointer; transition: .2s;
  border: 1px solid var(--card-border); background: var(--card);
}
.mode-card:hover { transform: translateY(-2px); }
.mode-card.selected { border-color: var(--gold); background: rgba(255,210,87,.07); box-shadow: 0 0 22px rgba(255,210,87,.16); }
.mode-card h4 { font-size: 14.5px; margin-bottom: 5px; }
.mode-card p { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mode-card .m-tag { margin-top: 9px; display: inline-block; }
.warn-strip {
  display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 13px 16px;
  background: rgba(255,84,104,.08); border: 1px solid rgba(255,84,104,.35);
  color: #ffb3bd; font-size: 13.5px; font-weight: 600; margin-bottom: 18px; line-height: 1.55;
}
.action-row { display: flex; gap: 6px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------------- modal / toast ---------------- */
.modal-wrap { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .25s; }
.modal-wrap.show { opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,4,8,.72); backdrop-filter: blur(6px); }
.modal {
  position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(165deg, #12172a, #0b0e18); border: 1px solid var(--card-border);
  border-radius: 22px; box-shadow: var(--shadow); transform: translateY(14px) scale(.97); transition: transform .25s;
}
.modal-wrap.show .modal { transform: none; }
.modal-wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-head h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: .05em; }
.m-close { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--card-border); background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.m-close:hover { color: var(--text); background: rgba(255,255,255,.07); }
.modal-body { padding: 16px 22px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; }
.confirm-text { color: var(--muted); line-height: 1.65; font-weight: 500; }

#toasts { position: fixed; top: 14px; right: 14px; z-index: 500; display: flex; flex-direction: column; gap: 9px; }
.toast {
  display: flex; gap: 9px; align-items: center; padding: 11px 16px; border-radius: 13px;
  background: rgba(16,20,34,.94); border: 1px solid var(--card-border); font-weight: 600; font-size: 14px;
  transform: translateX(120%); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); max-width: 340px;
  box-shadow: var(--shadow);
}
.toast.show { transform: none; }
.toast-ok { border-color: rgba(61,220,132,.5); } .toast-error { border-color: rgba(255,84,104,.5); }
.toast-warn { border-color: rgba(255,210,87,.5); }

/* ---------------- rules ---------------- */
.rules-block h4 { margin: 16px 0 7px; color: var(--gold); font-size: 14.5px; letter-spacing: .06em; }
.rules-block p, .rules-block li { color: var(--muted); font-size: 13.8px; line-height: 1.7; font-weight: 500; }
.rules-block ul { padding-left: 20px; }
.paytable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.paytable td { padding: 7px 10px; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--text); font-weight: 600; }
.paytable td.sym { font-size: 19px; width: 46px; }
.paytable td.v { text-align: right; color: var(--gold); }

/* ---------------- profile ---------------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.panel { border-radius: var(--r); padding: 22px; background: var(--card); border: 1px solid var(--card-border); }
.panel h3 { font-family: var(--font-display); font-size: 15.5px; margin-bottom: 14px; letter-spacing: .06em; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-state .es-ico { font-size: 46px; margin-bottom: 10px; }

.footer { border-top: 1px solid var(--card-border); padding: 22px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 40px; }
.footer b { color: var(--gold); }

@media (max-width: 640px) {
  .bal-chip .lbl { display: none; }
  .hero-float { display: none; }
}