/* ============================================================
   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; }
}

/* ============================================================
   V2 ADDITIONS — geometry, GPU reels, intro, chat, cashier,
   tiers, autoplay, fullscreen, ways glow
   ============================================================ */

/* ---------- game view geometry ---------- */
.game-view{--cell:min(15vw, 128px)}
.slot-shell{max-width:calc(var(--cols) * var(--cell) + 120px);margin:0 auto}
.reel-window{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#00000088,#000000cc);border:3px solid var(--frame);box-shadow:0 0 44px var(--glow), inset 0 0 40px #00000066;padding:6px}
.reels{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:6px}
.reel{position:relative;overflow:hidden;border-radius:10px;background:#00000066;height:calc(var(--rows) * var(--cell) / 1.35)}
.reel .strip{will-change:transform}
.reel.blur .strip,.strip.blur{filter:blur(2px)}
.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,#ffffff0a,#00000055);box-shadow:inset 0 1px 0 #ffffff14}
.cell .symsvg{width:78%;height:78%;display:block;filter:drop-shadow(0 4px 8px #00000088)}
.cell.win{background:linear-gradient(180deg,var(--acc)33,#00000055);box-shadow:0 0 18px var(--glow);animation:cellPulse .7s infinite alternate}
.cell.scatter-hit{box-shadow:0 0 20px var(--glow);animation:cellPulse .5s infinite alternate}
.reel.anticipate{box-shadow:0 0 26px var(--glow), inset 0 0 24px var(--glow)}
@keyframes cellPulse{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes lineDraw{to{stroke-dashoffset:0}}
@keyframes waysGlow{from{opacity:.25}to{opacity:.95}}
.reel-window.shake{animation:reelShake .4s linear infinite}
@keyframes reelShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,3px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,-4px)}}

/* geometry variants: 3x3 narrower, 7x5 wider */
.slot-shell.lines{--cell:min(21vw, 150px)}
.slot-shell .reel-window{width:100%}

/* win banner tiers */
.win-banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s;z-index:5}
.win-banner.show{opacity:1}
.win-banner .wb-label{font-size:clamp(20px,4vw,42px);font-weight:900;letter-spacing:.14em;color:#fff;text-shadow:0 0 24px var(--acc),0 2px 4px #000;animation:wbIn .4s cubic-bezier(.2,1.4,.4,1) both}
.win-banner.win-tier-big .wb-label{color:var(--gold)}
.win-banner.win-tier-mega .wb-label{background:linear-gradient(90deg,#ffd257,#ff4d5e,#ffd257);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(26px,5vw,54px)}
.win-banner.win-tier-super_mega .wb-label{background:linear-gradient(90deg,#ffd257,#7dff8a,#4db8ff,#ff4d5e,#ffd257);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(30px,6vw,68px);animation:wbIn .4s both,wbSlide 2.4s linear infinite}
.win-banner .wb-amount{font-size:clamp(22px,4.5vw,52px);font-weight:900;color:var(--gold);text-shadow:0 2px 10px #000}
@keyframes wbIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes wbSlide{to{background-position:200% 0}}
.rays{position:absolute;inset:-50%;pointer-events:none;opacity:0;transition:opacity .3s;background:conic-gradient(from 0deg,transparent 0 14deg,var(--glow) 14deg 18deg,transparent 18deg 32deg,var(--glow) 32deg 36deg,transparent 36deg 50deg,var(--glow) 50deg 54deg,transparent 54deg 68deg,var(--glow) 68deg 72deg,transparent 72deg 360deg);animation:raysSpin 9s linear infinite;z-index:4}
.rays.show{opacity:.5}
@keyframes raysSpin{to{transform:rotate(360deg)}}

/* ---------- game intro (unique per game) ---------- */
.game-intro{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 620px at 50% 40%, var(--acc2, #ff5a1f)22, #000000ee 70%);backdrop-filter:blur(6px);transition:opacity .5s,transform .5s}
.game-intro.out{opacity:0;transform:scale(1.1);pointer-events:none}
.gi-inner{text-align:center;animation:giIn .7s cubic-bezier(.2,1.3,.4,1) both}
.gi-emblem{width:clamp(110px,22vw,190px);margin:0 auto 14px;filter:drop-shadow(0 12px 34px var(--acc, #ffb347));animation:giFloat 2.6s ease-in-out infinite}
.gi-emblem svg{width:100%;height:auto}
.gi-name{font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:.06em;color:#fff;text-shadow:0 4px 30px var(--acc, #ffb347),0 2px 4px #000}
.gi-tag{color:var(--acc, #ffd257);font-size:clamp(14px,2.4vw,20px);margin-top:6px;letter-spacing:.08em}
.gi-stamp{display:inline-block;margin-top:12px;padding:5px 16px;border:1px solid var(--acc, #ffd257);border-radius:99px;color:var(--acc, #ffd257);font-size:12px;letter-spacing:.22em;font-weight:700}
.gi-enter{margin-top:26px;padding:14px 44px;font-size:16px;letter-spacing:.1em}
@keyframes giIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes giFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- autoplay menu ---------- */
.auto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.auto-opt{padding:16px 6px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;text-align:center;transition:.15s;color:var(--text)}
.auto-opt:hover{border-color:var(--gold);transform:translateY(-2px)}
.ao-num{display:block;font-size:26px;font-weight:900;color:var(--gold)}
.ao-lbl{font-size:11px;color:var(--muted)}

/* ---------- fullscreen ---------- */
body.is-full .slot-shell{max-width:none;width:min(96vw,1200px)}
body.is-full .game-topbar{opacity:.35;transition:.2s}
body.is-full .game-topbar:hover{opacity:1}

/* ---------- bonus overlays ---------- */
.bonus-overlay{position:fixed;inset:0;z-index:850;display:flex;align-items:center;justify-content:center;background:#000000d9;opacity:0;transition:opacity .28s;pointer-events:none}
.bonus-overlay.show{opacity:1}
.bonus-stage{text-align:center;padding:30px}
.bonus-stage-light{background:#000000a8;border-radius:18px;padding:16px 30px}
.bonus-icon{width:110px;margin:0 auto 10px;animation:giFloat 2s ease-in-out infinite}
.bonus-icon svg{width:100%;height:auto}
.bonus-title{font-size:clamp(24px,5vw,46px);font-weight:900;color:var(--gold);text-shadow:0 0 30px #ffd25788}
.bonus-sub{color:var(--muted);margin-top:4px}
.bonus-count{font-size:clamp(40px,9vw,90px);font-weight:900;color:#fff;margin-top:10px;animation:wbIn .35s both}
.bonus-spin-tag{font-size:13px;letter-spacing:.18em;color:var(--gold);font-weight:800}
.bonus-progress{height:6px;border-radius:99px;background:#ffffff22;overflow:hidden;max-width:280px;margin:12px auto}
.bonus-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:99px;transition:width .4s}
.bonus-total-lbl{font-size:11px;letter-spacing:.2em;color:var(--muted);margin-top:8px}
.bonus-multiplier{font-size:30px;font-weight:900;color:#fff}
.bonus-total{font-size:34px;font-weight:900;color:var(--green)}

/* ---------- cashier ---------- */
.tabs{display:flex;gap:8px;margin:18px 0}
.tabs button{padding:10px 20px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);cursor:pointer;font-weight:700;display:flex;gap:8px;align-items:center}
.tabs button svg{width:16px;height:16px}
.tabs button.active{background:var(--gold);color:#1a1205;border-color:var(--gold)}
.dep-methods{display:grid;gap:10px;margin:14px 0}
.dep-method{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 16px;cursor:pointer;transition:.15s}
.dep-method:hover{border-color:var(--gold)}
.dep-method input{accent-color:var(--gold)}
.dep-method b{display:block}
.dep-method span{color:var(--muted);font-size:12.5px}
.bank-details{background:#00000066;border:1px dashed var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;font-size:13px;color:var(--gold);line-height:1.8}
.prog-row{display:grid;grid-template-columns:1fr 140px 60px;gap:12px;align-items:center;margin:10px 0;font-size:13.5px;color:var(--muted)}
.prog{height:10px;background:#ffffff14;border-radius:99px;overflow:hidden}
.prog span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#8ef0b4);border-radius:99px;transition:width .5s}
.prog-row b.ok{color:var(--green)}
.ok-strip{border-color:var(--green);color:#b6f3cd;background:#12331f66}

/* ---------- tiers ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.tier-card.current{border-color:var(--gold);box-shadow:0 0 24px #ffd25733}
.tier-head{font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tier-head svg{width:20px;height:20px;color:var(--gold)}
.tier-head.t0{color:#cd7f32}.tier-head.t1{color:#c0c0c0}.tier-head.t2{color:#ffd257}.tier-head.t3{color:#7de3ff}.tier-head.t4{color:#b48cff}
.tier-benefits{list-style:none;display:grid;gap:8px;margin-top:10px}
.tier-benefits li{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}
.tier-benefits svg{width:14px;height:14px;color:var(--green);flex:none}

/* ---------- referrals ---------- */
.ref-code-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ref-code{font-size:24px;font-weight:900;letter-spacing:.16em;color:var(--gold);background:#00000066;border:1px dashed var(--gold);border-radius:12px;padding:12px 22px}

/* ---------- chat widget ---------- */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:800;width:58px;height:58px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--gold),#ff9d3d);color:#1a1205;cursor:pointer;box-shadow:0 10px 30px #00000088;display:flex;align-items:center;justify-content:center;transition:.2s}
.chat-fab:hover{transform:scale(1.08)}
.chat-fab svg{width:26px;height:26px}
.chat-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-panel{position:fixed;right:18px;bottom:86px;z-index:801;width:min(360px,calc(100vw - 24px));height:min(480px,70vh);background:var(--panel);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s;box-shadow:0 24px 70px #000000cc}
.chat-panel.show{opacity:1;transform:none;pointer-events:auto}
.chat-head{padding:14px 16px;font-weight:800;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
.chat-head svg{width:18px;height:18px;color:var(--gold)}
.chat-head span{margin-left:auto;font-size:11px;color:var(--green);font-weight:600}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
.chat-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--gold),#f0a13c);color:#1a1205;border-bottom-right-radius:4px}
.chat-msg.admin{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-msg time{display:block;font-size:10px;opacity:.6;margin-top:4px}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-input input{flex:1}

/* ---------- policy body ---------- */
.policy-body{line-height:1.85}
.policy-body h4{margin:18px 0 8px;color:var(--gold)}
.policy-body ul{padding-left:20px;display:grid;gap:6px;color:var(--muted)}

/* ---------- misc v2 ---------- */
.bal-chip.bonus .val{color:#f0abfc}
.bal-chip.bonus{border-color:#f0abfc55}
.geo-flag{position:absolute;top:10px;left:10px}
.game-topbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 4px}
.game-topbar h2{font-size:20px;margin-right:auto}
.game-topbar .btn svg{width:14px;height:14px;vertical-align:-2px}
.btn svg{width:16px;height:16px;vertical-align:-3px}
.payline-legend .pl{display:inline-flex;gap:6px;align-items:center}
.payline-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.empty-state{color:var(--muted);text-align:center;padding:26px}

/* ---------- SVG symbol sizing ---------- */
.symsvg svg, .big-sym svg, .sym-row svg, .gi-emblem svg, .bonus-icon svg { width: 100%; height: 100%; display: block; }
.big-sym { width: 1.6em; height: 1.6em; }
.sym-row span { width: 30px; height: 30px; display: inline-block; }
.paytable .sym .symsvg { width: 34px; height: 34px; display: inline-block; vertical-align: middle; }
.rules-block h4 .symsvg, .rules-block li .symsvg, .rules-block p .symsvg { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; }