/* ZONE 51 — soft & elegant theme (index.html). Loaded after style.css + sidebar.css; overrides neon/boxy defaults. */
:root {
--bg: #08060b;
--bg-elevated: #0e0a13;
--panel: #120d19;
--panel-2: #181120;
--panel-3: #1f1629;
--surface: rgba(255,255,255,0.035);
--surface-2: rgba(255,255,255,0.055);
--line: rgba(240,225,235,0.08);
--line-bright: rgba(240,225,235,0.14);
--line-accent: rgba(36,171,122,0.28);
--line-gold: rgba(234,179,8,0.24);
--text: #f4eef6;
--text-2: #c9bfd0;
--muted: #968aa3;
--red: #22a273;
--red-bright: #28bb85;
--red-vivid: #24ab7a;
--red-tint: rgba(36,171,122,0.12);
--pink: #2ac48c;
--gold: #e6b53b;
--gold-bright: #f3c95a;
--gold-dim: rgba(234,179,8,0.14);
--green: #22a35c;
--green-bright: #34d399;
--cyan: #5cc8d8;
--cyan-bright: #7fd8e6;
--glow-gold: 0 8px 28px rgba(234,179,8,0.14);
--glow-red: 0 8px 32px rgba(36,171,122,0.16);
--glow-cyan: none;
--shadow-soft: 0 10px 30px -10px rgba(0,0,0,0.5);
--shadow-card: 0 14px 36px -12px rgba(0,0,0,0.65);
--r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-pill: 9999px;
}
body {
background: var(--bg) !important;
background-image:
radial-gradient(ellipse 70% 45% at 15% 0%, rgba(36,171,122,0.07), transparent 60%),
radial-gradient(ellipse 55% 40% at 90% 100%, rgba(234,179,8,0.045), transparent 60%) !important;
}
body::before { opacity: 0.04 !important; }
#stars-canvas { opacity: 0.35; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; border-radius: 4px; }
/* ── TOPBAR ── */
.topbar {
background: rgba(12,9,16,0.82) !important;
backdrop-filter: blur(18px) !important;
border-bottom: 1px solid var(--line) !important;
height: 64px !important;
justify-content: flex-start !important;
box-shadow: none !important;
}
.topbar::before { display: none !important; }
.brand-emblem {
border-radius: 13px !important; border: 1px solid rgba(36,171,122,0.35) !important;
background: linear-gradient(145deg, rgba(36,171,122,0.28), rgba(36,171,122,0.08)) !important;
animation: none !important; box-shadow: 0 6px 18px -6px rgba(36,171,122,0.45) !important;
}
.brand-emblem::before, .brand-emblem::after { display: none !important; }
.brand-emblem span { color: #fff !important; text-shadow: none !important; animation: none !important; background: none !important; -webkit-text-fill-color: #fff !important; }
.brand-text h1 { letter-spacing: 3px !important; color: var(--text) !important; text-shadow: none !important; animation: none !important; background: none !important; -webkit-text-fill-color: var(--text) !important; }
.brand-text p { color: var(--muted) !important; letter-spacing: 2px !important; text-shadow: none !important; }
.brand-text p::after { display: none !important; }
.live-hub, #live-hub {
background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-pill) !important;
padding: 6px 22px !important; box-shadow: none !important;
}
.live-hub::before, .live-hub::after { display: none !important; }
.live-count-num { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; filter: none !important; font-size: 1.15rem !important; letter-spacing: 1px !important; }
.live-count-label { color: var(--muted) !important; letter-spacing: 2px !important; font-size: 0.5rem !important; }
.live-bal-num { color: var(--gold-bright) !important; text-shadow: none !important; filter: none !important; }
.live-hub-sep { background: var(--line-bright) !important; }
.btn { border-radius: 12px !important; height: 38px !important; letter-spacing: 1.2px !important; font-weight: 700 !important; font-size: 0.72rem !important; }
.btn::after { display: none !important; }
.btn-ghost { border-color: var(--line-bright) !important; color: var(--text-2) !important; background: var(--surface) !important; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.22) !important; color: #fff !important; background: var(--surface-2) !important; box-shadow: none !important; }
.btn-primary { border-color: transparent !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(36,171,122,0.6) !important; }
.btn-primary:hover { background: linear-gradient(135deg, #28bb85, #219a6d) !important; color: #fff !important; box-shadow: 0 10px 26px -8px rgba(36,171,122,0.75) !important; }
.btn-icon { display: none !important; }
.user-chip { border-radius: var(--r-pill) !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; box-shadow: none !important; }
.user-chip-name { color: var(--text) !important; text-shadow: none !important; letter-spacing: 1px !important; }
.user-chip-status { color: var(--green-bright) !important; text-shadow: none !important; }
.user-chip-dot { background: var(--green-bright) !important; box-shadow: 0 0 8px rgba(52,211,153,0.6) !important; }
/* ── CONTENT ── */
.content { padding: 20px 26px 32px !important; gap: 22px !important; }
#section-home { display: flex; flex-direction: column; gap: 22px; }
#section-home > .games-header-block { margin-bottom: -10px !important; }
#section-home > .load-more-wrap { margin-top: -12px !important; }
/* jackpot bar */
.jackpot-bar {
border-radius: 20px !important; padding: 14px 16px 14px 20px !important; gap: 18px !important;
border: 1px solid var(--line-gold) !important;
background:
radial-gradient(ellipse 40% 120% at 0% 50%, rgba(234,179,8,0.10), transparent 70%),
linear-gradient(135deg, rgba(31,22,41,0.92), rgba(14,10,19,0.96)) !important;
box-shadow: var(--shadow-soft), 0 0 30px -10px rgba(234,179,8,0.18) !important;
}
.jackpot-bar::before, .jackpot-bar::after { display: none !important; }
.jl { gap: 14px !important; flex-shrink: 0; }
.j-box { width: 44px !important; height: 44px !important; border-radius: 13px !important; border: 1px solid var(--line-gold) !important; background: linear-gradient(145deg, rgba(234,179,8,0.28), rgba(234,179,8,0.06)) !important; box-shadow: 0 6px 18px -8px rgba(234,179,8,0.5); }
.j-box span { color: var(--gold-bright) !important; font-size: 0.62rem !important; }
.jlabel { letter-spacing: 1.8px !important; color: var(--muted) !important; font-size: 0.58rem !important; margin-bottom: 3px !important; }
.jackpot-amount { color: var(--gold-bright) !important; text-shadow: 0 2px 18px rgba(234,179,8,0.25) !important; letter-spacing: 1px !important; animation: none !important; font-size: clamp(1.25rem, 1.8vw, 1.6rem) !important; }
.jr { display: flex !important; align-items: center; gap: 10px !important; margin-left: auto; flex-wrap: nowrap; min-width: 0; }
.jp-stat {
display: flex !important; align-items: center; gap: 10px; text-align: left !important; text-decoration: none; color: inherit;
padding: 8px 14px !important; height: 50px; border-radius: 14px !important;
border: 1px solid rgba(255,255,255,0.07) !important; background: rgba(255,255,255,0.035) !important;
transition: border-color .2s, background-color .2s, transform .2s;
}
.jp-stat-win { padding-left: 8px !important; }
.jp-stat-win:hover { border-color: var(--line-gold) !important; background: var(--gold-dim) !important; transform: translateY(-1px); }
.jp-stat-win.flash { border-color: rgba(234,179,8,0.55) !important; background: rgba(234,179,8,0.18) !important; }
.jp-last-thumb { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: #1a1525; border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.jp-stat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jp-stat-lbl { font-size: 0.56rem !important; letter-spacing: 1.3px !important; text-transform: uppercase; color: var(--muted) !important; white-space: nowrap; line-height: 1; }
.jp-stat-val { display: inline-flex !important; align-items: center; gap: 6px; font-family: 'Orbitron', sans-serif !important; font-size: 0.82rem !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: 0.4px !important; white-space: nowrap; line-height: 1; }
.jp-stat .jp-stat-val span { font-size: inherit !important; color: inherit !important; text-transform: none !important; letter-spacing: inherit !important; }
.jp-stat-win .jp-stat-val > span { color: var(--gold-bright) !important; }
.jp-stat-val em { font-style: normal; font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 600; color: var(--muted); }
.jp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 8px rgba(52,211,153,0.7); animation: sbPulse 2.2s ease-in-out infinite; }
#live-paid, #live-count-num { transition: opacity .13s, transform .13s; display: inline-block; }
#live-count-num.flip { opacity: 0; transform: translateY(-4px); }
.jp-cta {
display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 14px; text-decoration: none;
background: linear-gradient(135deg, #24ab7a, #1e8c64); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.3px; white-space: nowrap;
box-shadow: 0 10px 24px -10px rgba(36,171,122,0.7); transition: transform .2s, box-shadow .2s, filter .2s;
}
.jp-cta span { transition: transform .2s; }
.jp-cta:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(36,171,122,0.85); }
.jp-cta:hover span { transform: translateX(3px); }
@media (max-width: 1400px) { .jp-stat:nth-child(2) { display: none !important; } }
@media (max-width: 860px) { .jackpot-bar { align-items: stretch !important; } .jr { margin-left: 0; flex-wrap: wrap !important; } .jp-stat:nth-child(2) { display: flex !important; } .jp-cta { flex: 1; justify-content: center; } }
@media (max-width: 620px) { .jr { display: flex !important; } .jp-stat:not(.jp-stat-win) { display: none !important; } }
/* banner */
.banner-main {
border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,0.07) !important;
animation: none !important; box-shadow: var(--shadow-card) !important;
margin-bottom: 4px !important;
}
.banner-main::before, .banner-main::after { display: none !important; }
.banner-main img { border-radius: 19px !important; height: auto !important; aspect-ratio: 3.6 / 1; display: block; width: 100%; object-fit: cover; }
.banner-main { position: relative; }
.banner-copy {
position: absolute; left: 0; top: 0; bottom: 0; width: 52%; padding: 0 0 0 clamp(24px, 4vw, 64px);
display: flex; flex-direction: column; justify-content: center; gap: 12px; z-index: 2; pointer-events: none;
}
.banner-copy > * { pointer-events: auto; }
.banner-kicker {
display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9999px;
border: 1px solid rgba(36,171,122,0.35); background: rgba(36,171,122,0.14); backdrop-filter: blur(8px);
color: #47d8a3; font-size: 0.6rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
}
.banner-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 8px rgba(52,211,153,0.7); }
.banner-title {
margin: 4px 0 0; font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; text-transform: uppercase;
font-size: clamp(1.9rem, 3.6vw, 3.6rem); color: #fff; text-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.banner-title span { color: var(--gold-bright); }
.banner-sub { margin: 4px 0 0; max-width: 34ch; color: rgba(244,238,246,0.78); font-size: clamp(0.78rem, 1vw, 0.98rem); line-height: 1.5; }
.banner-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.banner-btn {
display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 13px;
font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.2px; text-decoration: none; cursor: pointer;
transition: transform .2s, box-shadow .2s, filter .2s, background-color .2s, border-color .2s;
}
.banner-btn-primary { background: linear-gradient(135deg, #24ab7a, #1e8c64); color: #fff; border: 1px solid transparent; box-shadow: 0 12px 28px -10px rgba(36,171,122,0.75); }
.banner-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 32px -10px rgba(36,171,122,0.9); }
.banner-btn-ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); }
.banner-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); transform: translateY(-2px); }
@media (max-width: 1100px) { .banner-copy { width: 58%; gap: 8px; } .banner-sub { display: none; } .banner-btn { height: 38px; padding: 0 16px; font-size: 0.74rem; } }
@media (max-width: 620px) {
.banner-main img { aspect-ratio: 16 / 9; object-position: 78% 50%; }
.banner-copy { width: 100%; padding: 0 18px; justify-content: flex-end; padding-bottom: 16px; background: linear-gradient(90deg, rgba(8,6,11,0.72) 0%, rgba(8,6,11,0.35) 55%, transparent 100%); border-radius: 19px; }
.banner-kicker { font-size: 0.52rem; }
.banner-title { font-size: 1.7rem; }
.banner-actions { margin-top: 6px; }
}
/* promo cards */
.promo-grid { gap: 14px !important; align-items: stretch; }
.promo-card {
display: flex !important; flex-direction: column; gap: 10px; height: 100%;
border-radius: 20px !important; padding: 20px 20px 18px !important; overflow: hidden;
border: 1px solid rgba(255,255,255,0.07) !important; box-shadow: var(--shadow-soft) !important;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s, border-color 0.25s !important;
}
.promo-card.gold { background: radial-gradient(120% 90% at 100% 0%, rgba(234,179,8,0.16), transparent 55%), linear-gradient(160deg, rgba(28,19,38,0.85), rgba(13,9,18,0.95)) !important; }
.promo-card.red-c { background: radial-gradient(120% 90% at 100% 0%, rgba(36,171,122,0.2), transparent 55%), linear-gradient(160deg, rgba(28,19,38,0.85), rgba(13,9,18,0.95)) !important; }
.promo-card.grey-c{ background: radial-gradient(120% 90% at 100% 0%, rgba(150,120,200,0.16), transparent 55%), linear-gradient(160deg, rgba(28,19,38,0.85), rgba(13,9,18,0.95)) !important; }
.promo-card::before, .promo-card::after { display: none !important; }
.promo-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.7) !important; }
.promo-card.gold:hover { border-color: rgba(234,179,8,0.35) !important; }
.promo-card.red-c:hover { border-color: rgba(36,171,122,0.35) !important; }
.promo-card.grey-c:hover { border-color: rgba(180,150,230,0.3) !important; }
.promo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.promo-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); flex-shrink: 0; }
.promo-icon svg { width: 18px; height: 18px; }
.promo-card.gold .promo-icon { color: var(--gold-bright); border-color: var(--line-gold); background: var(--gold-dim); }
.promo-card.red-c .promo-icon { color: #47d8a3; border-color: var(--line-accent); background: var(--red-tint); }
.promo-card.grey-c .promo-icon{ color: #c9b8e8; border-color: rgba(180,150,230,0.25); background: rgba(150,120,200,0.12); }
.promo-num {
margin: 0 !important; padding: 4px 10px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
font-family: 'Inter', sans-serif !important; font-size: 0.58rem !important; font-weight: 700; letter-spacing: 1.2px !important; text-transform: uppercase;
color: var(--muted) !important; opacity: 1 !important; white-space: nowrap;
}
.promo-card h3 { margin: 4px 0 0 !important; text-shadow: none !important; font-size: 1.05rem !important; letter-spacing: -0.01em !important; font-weight: 800 !important; color: var(--text) !important; }
.promo-card.gold h3 { color: var(--gold-bright) !important; }
.promo-card.red-c h3 { color: #47d8a3 !important; }
.promo-card p { margin: 0 !important; flex: 1; color: var(--text-2) !important; font-weight: 400 !important; font-size: 0.8rem !important; line-height: 1.6 !important; }
.promo-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.promo-val {
margin: 0 !important; display: flex; flex-direction: column; gap: 4px; text-shadow: none !important;
font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 1.35rem !important; line-height: 1 !important; letter-spacing: -0.01em !important; color: var(--text) !important;
}
.promo-card.gold .promo-val { color: var(--gold-bright) !important; }
.promo-card.red-c .promo-val { color: #47d8a3 !important; }
.promo-val small { font-size: 0.56rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); font-weight: 700; font-family: 'Inter', sans-serif; }
.promo-btn {
margin: 0 !important; white-space: nowrap; border-radius: 12px !important; text-transform: none !important; letter-spacing: 0.2px !important;
font-family: 'Inter', sans-serif !important; font-size: 0.76rem !important; font-weight: 700 !important; padding: 10px 16px !important; text-shadow: none !important; box-shadow: none !important;
transition: background-color .18s, border-color .18s, color .18s, transform .18s !important;
}
.promo-btn:hover { transform: translateY(-1px); }
.promo-btn::before { display: none !important; }
.promo-btn-gold { border-color: var(--line-gold) !important; background: var(--gold-dim) !important; color: var(--gold-bright) !important; }
.promo-btn-gold:hover { background: rgba(234,179,8,0.22) !important; border-color: rgba(234,179,8,0.45) !important; color: #ffe08a !important; box-shadow: none !important; }
.promo-btn-red { border-color: var(--line-accent) !important; background: var(--red-tint) !important; color: #47d8a3 !important; }
.promo-btn-red:hover { background: rgba(36,171,122,0.22) !important; border-color: rgba(36,171,122,0.5) !important; color: #70e1b7 !important; box-shadow: none !important; }
.promo-btn-white { border-color: var(--line-bright) !important; background: var(--surface) !important; color: var(--text) !important; }
.promo-btn-white:hover { background: var(--surface-2) !important; box-shadow: none !important; }
@media (max-width: 1300px) { .promo-foot { flex-direction: column; align-items: flex-start; } .promo-btn { width: 100%; text-align: center; } }
/* section header */
.sec-line { width: 22px !important; height: 3px !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--red-vivid), var(--gold)) !important; animation: none !important; opacity: 1 !important; }
.section-header h3 { letter-spacing: 1.6px !important; font-size: 0.86rem !important; background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; }
.section-header .cnt { color: var(--muted) !important; letter-spacing: 0.5px !important; text-transform: none !important; font-size: 0.7rem !important; }
.section-header a {
border-radius: var(--r-pill) !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important;
color: var(--text) !important; letter-spacing: 1.2px !important; padding: 9px 18px !important; text-shadow: none !important; box-shadow: none !important; font-size: 0.66rem !important;
}
.section-header a:hover { background: var(--red-tint) !important; border-color: var(--line-accent) !important; box-shadow: none !important; }
/* games header + filters */
.games-header-block {
border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.06) !important; border-bottom-width: 1px !important;
background: linear-gradient(160deg, rgba(24,17,32,0.85), rgba(13,9,18,0.9)) !important; padding: 18px 20px !important;
box-shadow: var(--shadow-soft) !important;
}
.filter-bar, .prov-filter-bar { border-radius: var(--r-pill) !important; border: 1px solid rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.03) !important; padding: 5px !important; gap: 4px !important; }
.filter-pill, .prov-pill { border-radius: var(--r-pill) !important; padding: 8px 16px !important; letter-spacing: 0.6px !important; text-transform: none !important; font-size: 0.74rem !important; font-weight: 600 !important; color: var(--muted) !important; text-shadow: none !important; box-shadow: none !important; }
.prov-pill { padding: 6px 14px !important; font-size: 0.7rem !important; }
.filter-pill:hover, .prov-pill:hover { color: var(--text) !important; background: rgba(255,255,255,0.05) !important; border-color: transparent !important; }
.filter-pill.active, .prov-pill.active { color: #fff !important; background: rgba(36,171,122,0.2) !important; border-color: rgba(36,171,122,0.4) !important; text-shadow: none !important; box-shadow: none !important; }
/* game cards */
.games { gap: 14px !important; padding: 14px 0 4px !important; }
.game {
border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: #0e0a14 !important;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, border-color 0.3s !important;
}
.game::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); pointer-events: none; z-index: 3; }
.game:hover { transform: translateY(-5px) !important; box-shadow: 0 22px 44px -14px rgba(0,0,0,0.8), 0 0 0 1px rgba(36,171,122,0.25) !important; border-color: rgba(36,171,122,0.35) !important; }
.game-thumb img { transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.3s !important; }
.game:hover .game-thumb img { transform: scale(1.07) !important; filter: saturate(1.05); }
.game-info { padding: 34px 12px 11px !important; background: linear-gradient(to top, rgba(8,6,11,0.94) 0%, rgba(8,6,11,0.55) 55%, transparent 100%) !important; transition: transform .3s, opacity .3s; }
.game-info strong { font-size: 0.74rem !important; font-weight: 700 !important; letter-spacing: -0.005em; margin-bottom: 5px !important; text-shadow: none !important; }
.game-info small {
display: inline-block; padding: 3px 8px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.07);
color: var(--text-2) !important; font-size: 0.55rem !important; letter-spacing: 0.4px !important; font-weight: 600;
}
.game:hover .game-info { transform: translateY(6px); opacity: 0; }
.game-overlay { flex-direction: column; gap: 10px; background: radial-gradient(80% 80% at 50% 50%, rgba(8,6,11,0.55), rgba(8,6,11,0.82)) !important; backdrop-filter: blur(3px); transition: opacity .25s !important; }
.play-btn {
display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px !important; border: none !important;
background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important;
letter-spacing: 0.3px !important; text-transform: none !important; font-size: 0.8rem !important; padding: 11px 22px 11px 18px !important;
box-shadow: 0 10px 26px -8px rgba(36,171,122,0.8) !important; transform: translateY(6px); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .2s !important;
}
.play-btn::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.game:hover .play-btn { transform: translateY(0); }
.play-btn:hover { filter: brightness(1.08); transform: scale(1.04) !important; box-shadow: 0 14px 30px -8px rgba(36,171,122,0.95) !important; }
.game-badge { border-radius: 9999px !important; letter-spacing: 1px !important; padding: 4px 9px !important; font-size: 0.52rem !important; text-shadow: none !important; box-shadow: none !important; backdrop-filter: blur(6px); z-index: 4 !important; }
.game-badge.hot { background: rgba(36,171,122,0.7) !important; color: #fff !important; border-color: rgba(255,255,255,0.18) !important; }
.game-badge.new { background: rgba(34,197,94,0.45) !important; color: #eafff2 !important; border-color: rgba(255,255,255,0.18) !important; }
.game-badge.vip { background: rgba(234,179,8,0.45) !important; color: #fff6d8 !important; border-color: rgba(255,255,255,0.18) !important; }
.games-empty { grid-column: 1 / -1; padding: 34px 20px; text-align: center; color: var(--muted); font-size: 0.86rem; border: 1px dashed rgba(255,255,255,0.1); border-radius: 16px; }
.games-empty a { color: var(--gold-bright); font-weight: 700; text-decoration: none; }
/* load more */
.load-more-wrap .lm-sep { background: var(--line) !important; }
.btn-load-more { border-radius: var(--r-pill) !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; color: var(--text) !important; letter-spacing: 1.2px !important; padding: 11px 26px !important; }
.btn-load-more:hover { background: var(--red-tint) !important; border-color: var(--line-accent) !important; box-shadow: none !important; color: #fff !important; }
.btn-load-more .lm-count { color: var(--muted) !important; }
/* live drop */
.lw-block { border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: rgba(20,14,27,0.75) !important; box-shadow: var(--shadow-soft) !important; padding: 18px 20px 20px !important; }
.lw-trophy { border-radius: 11px !important; border: 1px solid var(--line-gold) !important; background: var(--gold-dim) !important; color: var(--gold-bright) !important; box-shadow: none !important; }
.lw-online { border-radius: var(--r-pill) !important; border: 1px solid rgba(52,211,153,0.22) !important; background: rgba(52,211,153,0.07) !important; padding: 6px 12px !important; }
.lw-online-dot { background: var(--green-bright) !important; box-shadow: 0 0 8px rgba(52,211,153,0.7) !important; }
.lw-online-lbl { color: var(--muted) !important; letter-spacing: 1.2px !important; }
.lw-fade-l { background: linear-gradient(90deg, rgba(20,14,27,0.95), transparent) !important; }
.lw-fade-r { background: linear-gradient(270deg, rgba(20,14,27,0.95), transparent) !important; }
.lw-card { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.035) !important; padding: 7px 14px 7px 7px !important; }
.lw-card:hover { border-color: rgba(36,171,122,0.35) !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.7) !important; }
.lw-card.fresh { animation: lw-card-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.2) both !important; }
.lw-card.hot { animation: lw-card-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.2) both !important; border-color: rgba(234,179,8,0.4) !important; box-shadow: 0 0 0 1px rgba(234,179,8,0.15), 0 8px 24px -10px rgba(234,179,8,0.35) !important; background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(255,255,255,0.03)) !important; }
.lw-card-thumb { border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.lw-card-amt { color: var(--gold-bright) !important; text-shadow: none !important; }
.lw-card.hot .lw-card-amt { color: #ffe08a !important; text-shadow: none !important; }
.lw-card-user { color: var(--muted) !important; font-family: 'Inter', sans-serif !important; }
/* stats */
.stats-row { gap: 12px !important; background: transparent !important; border: none !important; }
.stat-card { border-radius: 18px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: linear-gradient(150deg, rgba(28,19,38,0.75), rgba(13,9,18,0.85)) !important; padding: 20px 22px !important; box-shadow: var(--shadow-soft) !important; }
.stat-card:hover { box-shadow: var(--shadow-card) !important; border-color: rgba(255,255,255,0.1) !important; }
.stat-card::before { display: none !important; }
.s-lbl { letter-spacing: 1.6px !important; opacity: 0.85 !important; color: var(--muted) !important; }
.s-val { color: var(--text) !important; text-shadow: none !important; }
.s-sub { color: var(--muted) !important; font-weight: 400 !important; }
/* footer */
.site-footer { background: #0a070d !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-radius: 28px 28px 0 0 !important; margin-top: 40px !important; }
.sf-top { border-bottom: 1px solid var(--line) !important; }
.sf-logo { letter-spacing: 3px !important; }
.sf-logo span { color: var(--red-bright) !important; text-shadow: none !important; }
.sf-social { border-radius: 12px !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; color: var(--text-2) !important; }
.sf-social:hover { border-color: var(--line-accent) !important; background: var(--red-tint) !important; color: #fff !important; }
.sf-col-head { color: var(--gold-bright) !important; letter-spacing: 1.6px !important; text-shadow: none !important; }
.sf-link { color: var(--text-2) !important; }
.sf-link:hover { color: #fff !important; }
.sf-pay-icon { border-radius: 10px !important; opacity: 0.65 !important; }
.sf-pay-icon:hover { opacity: 1 !important; }
.sf-lang-btn { border-radius: 12px !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; }
.sf-lang-dropdown { border-radius: 14px !important; }
.sf-18-badge { border-radius: 10px !important; }
.sf-bottom, .sf-license, .sf-copyright { color: var(--muted) !important; }
/* sidebar accents → soft palette */
.sidebar { background: linear-gradient(180deg, #0f0b14 0%, #0a070d 100%) !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; }
.sb-auth-card { border-color: rgba(36,171,122,0.25) !important; background: linear-gradient(135deg, rgba(36,171,122,0.16), rgba(255,255,255,0.03)) !important; }
.sb-avatar { background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.6), rgba(19,90,64,0.6)) !important; border-color: rgba(36,171,122,0.35) !important; }
.sb-seg-btn.active { background: linear-gradient(135deg, rgba(36,171,122,0.3), rgba(36,171,122,0.12)) !important; border-color: rgba(36,171,122,0.45) !important; box-shadow: none !important; }
.sb-wheel { border-color: rgba(234,179,8,0.3) !important; background: linear-gradient(90deg, rgba(13,45,33,0.9), rgba(8,18,14,0.9) 60%, rgba(36,171,122,0.16)) !important; }
.sb-wheel-text span { color: var(--gold-bright) !important; }
.sb-wheel-art i { background: conic-gradient(#24ab7a 0 45deg, #e6b53b 45deg 90deg, #24ab7a 90deg 135deg, #2b1b26 135deg 180deg, #24ab7a 180deg 225deg, #e6b53b 225deg 270deg, #24ab7a 270deg 315deg, #2b1b26 315deg 360deg) !important; border-color: rgba(243,201,90,0.85) !important; box-shadow: 0 0 18px rgba(36,171,122,0.4), inset 0 0 0 4px rgba(0,0,0,0.5) !important; }
.sidebar .sb-group .menu-item .mi-icon { color: #47d8a3 !important; }
.sidebar .sb-group .menu-item.active { background: linear-gradient(90deg, rgba(36,171,122,0.26), rgba(36,171,122,0.07)) !important; }
.sidebar .sb-group .menu-item.active .mi-icon { background: var(--red-vivid) !important; box-shadow: 0 6px 14px -4px rgba(36,171,122,0.6) !important; }
.sb-promo { background: linear-gradient(135deg, #16694b 0%, #24ab7a 60%, #48d8a3 100%) !important; box-shadow: 0 12px 28px -10px rgba(36,171,122,0.5) !important; }
.sb-soc { color: #47d8a3 !important; }
.sb-247 { background: var(--green-bright) !important; }
.m-badge.red { color: #47d8a3 !important; border-color: rgba(36,171,122,0.35) !important; background: var(--red-tint) !important; }
.m-badge.gold { color: var(--gold-bright) !important; border-color: var(--line-gold) !important; background: var(--gold-dim) !important; }
.m-badge.green { color: var(--green-bright) !important; border-color: rgba(52,211,153,0.3) !important; background: rgba(52,211,153,0.08) !important; }
.sb-live-dot { background: var(--green-bright) !important; box-shadow: 0 0 8px rgba(52,211,153,0.6) !important; }
/* ── WHEEL OF FORTUNE modal ── */
#fw-overlay { background: rgba(9,7,11,0.86) !important; backdrop-filter: blur(14px) !important; }
#fw-stars span { background: rgba(255,255,255,0.55) !important; }
#fw-modal {
background: linear-gradient(170deg, #17121c 0%, #0d0a10 100%) !important;
border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 26px !important;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 60px -20px rgba(36,171,122,0.25) !important;
padding: 30px 28px 26px !important;
}
#fw-modal::before { display: none !important; }
#fw-close-btn { width: 32px !important; height: 32px !important; background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important; }
#fw-close-btn:hover { background: rgba(36,171,122,0.3) !important; border-color: rgba(36,171,122,0.5) !important; }
.fw-eyebrow {
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
padding: 5px 12px; border-radius: 9999px; background: var(--red-tint); border: 1px solid var(--line-accent);
color: #47d8a3; font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
}
.fw-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 8px rgba(52,211,153,0.7); }
.fw-headline { color: var(--text) !important; animation: none !important; text-shadow: none !important; letter-spacing: 1px !important; font-size: 1.35rem !important; font-weight: 800 !important; }
.fw-sub { color: var(--text-2) !important; font-size: 0.82rem !important; margin-bottom: 22px !important; }
#fw-glow-ring { background: conic-gradient(rgba(36,171,122,0.9), rgba(234,179,8,0.9), rgba(36,171,122,0.9)) !important; opacity: 0.32 !important; filter: blur(10px) !important; }
#fw-glow-ring.spinning { opacity: 0.6 !important; filter: blur(6px) !important; }
#fw-pointer-svg { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) !important; }
#fw-spin-btn {
background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; border-radius: 14px !important;
padding: 14px 52px !important; letter-spacing: 1.6px !important; font-size: 0.92rem !important; animation: none !important;
box-shadow: 0 12px 30px -10px rgba(36,171,122,0.7), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
#fw-spin-btn:hover:not(:disabled) { filter: brightness(1.08) !important; transform: translateY(-1px) !important; box-shadow: 0 16px 34px -10px rgba(36,171,122,0.85) !important; }
#fw-cooldown { border-radius: 16px !important; background: var(--surface) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: var(--text-2) !important; padding: 16px 18px !important; }
#fw-timer { color: var(--gold-bright) !important; letter-spacing: 3px !important; text-shadow: none !important; }
.fw-result-prize { background: linear-gradient(135deg, #ffe08a, #e6b53b) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: none !important; }
.fw-result-sub { color: var(--muted) !important; letter-spacing: 1.6px !important; }
.fw-result-msg { color: var(--text-2) !important; }
.fw-result-msg strong { color: var(--gold-bright) !important; }
.fw-result-cta { background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; border-radius: 14px !important; box-shadow: 0 12px 30px -10px rgba(36,171,122,0.7) !important; }
#fw-trigger { border-radius: 50% !important; }
/* ── AUTH MODAL (login / register) ── */
.modal-overlay { background: rgba(6,4,9,0.78) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
.modal-box {
width: 440px !important; border-radius: 26px !important; border: 1px solid rgba(255,255,255,0.08) !important;
background: linear-gradient(170deg, #17121c 0%, #0e0a12 100%) !important; padding: 58px 34px 30px !important;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 60px -20px rgba(36,171,122,0.22) !important;
}
.modal-box::before { display: none !important; }
.modal-close, .pmenu-close, .pp-dep-close-btn, #fw-close-btn {
width: 32px !important; height: 32px !important; border-radius: 50% !important; padding: 0 !important;
background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important;
display: flex !important; align-items: center; justify-content: center; font-size: 0.72rem !important; line-height: 1; transition: background-color .15s, border-color .15s, color .15s;
}
.modal-close { top: 16px !important; right: 16px !important; }
.modal-close:hover, .pmenu-close:hover, .pp-dep-close-btn:hover, #fw-close-btn:hover { background: rgba(36,171,122,0.3) !important; border-color: rgba(36,171,122,0.5) !important; color: #fff !important; }
.modal-tabs { border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 9999px !important; background: rgba(255,255,255,0.035) !important; padding: 4px !important; gap: 4px !important; margin-bottom: 26px !important; }
.modal-tab {
border-radius: 9999px !important; border-bottom: none !important; margin-bottom: 0 !important; padding: 9px 12px !important;
letter-spacing: 0.4px !important; text-transform: none !important; font-size: 0.82rem !important; font-weight: 700 !important; color: var(--muted) !important;
transition: background-color .18s, color .18s, box-shadow .18s !important;
}
.modal-tab:hover { color: var(--text) !important; background: rgba(255,255,255,0.04); }
.modal-tab.active { color: #fff !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; box-shadow: 0 8px 20px -8px rgba(36,171,122,0.7); }
.modal-eyebrow { color: #47d8a3 !important; opacity: 1 !important; letter-spacing: 1.6px !important; font-size: 0.6rem !important; font-weight: 800; }
.modal-title { color: var(--text) !important; font-size: 1.45rem !important; letter-spacing: 0.3px !important; font-weight: 800 !important; margin-bottom: 22px !important; }
.modal-title .hl { color: var(--gold-bright) !important; text-shadow: none !important; }
.field-group label { color: var(--muted) !important; opacity: 1 !important; letter-spacing: 1.2px !important; font-size: 0.62rem !important; font-weight: 700; }
.m-input {
border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important;
padding: 12px 14px !important; font-size: 0.86rem !important; color: var(--text) !important;
transition: border-color .18s, background-color .18s, box-shadow .18s !important;
}
.m-input:focus { border-color: rgba(36,171,122,0.55) !important; background: rgba(36,171,122,0.05) !important; box-shadow: 0 0 0 3px rgba(36,171,122,0.14) !important; }
.m-input.invalid { border-color: rgba(36,171,122,0.7) !important; }
select.m-input option { background: #17121c; }
.m-check { color: var(--text-2) !important; }
.m-check input[type="checkbox"] { accent-color: #24ab7a !important; width: 15px !important; height: 15px !important; border-radius: 4px; }
.m-link { color: var(--gold-bright) !important; opacity: 0.9 !important; }
.modal-submit { border-radius: 12px !important; height: 44px !important; font-size: 0.8rem !important; letter-spacing: 0.4px !important; text-transform: none !important; justify-content: center !important; }
.modal-hint { color: var(--muted) !important; }
/* ── PROFILE PANEL ── */
.pmenu-overlay { background: rgba(6,4,9,0.72) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.pmenu-box-frame {
border-radius: 26px !important; padding: 1px !important; background: rgba(255,255,255,0.08) !important; animation: none !important;
box-shadow: 0 30px 90px -20px rgba(0,0,0,0.9), 0 0 60px -20px rgba(36,171,122,0.2) !important;
}
.pmenu-box-frame::before { display: none !important; }
.pmenu-box { border-radius: 25px !important; background: linear-gradient(170deg, #17121c 0%, #0d0a10 100%) !important; height: 640px !important; max-height: calc(100vh - 40px) !important; }
.pmenu-box::after, .pmenu-bg-orb1, .pmenu-bg-orb2, .pmenu-bg-orb3, .pmenu-bg-shimmer, .pmenu-bg-51 { display: none !important; }
.pp-topbar { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; height: 56px !important; padding: 0 22px !important; backdrop-filter: none !important; }
.pp-logo-mark { color: var(--text) !important; text-shadow: none !important; letter-spacing: 3px !important; font-size: 0.66rem !important; }
.pp-online-badge { color: var(--green-bright) !important; padding: 4px 10px; border-radius: 9999px; background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); }
.pp-side { background: rgba(255,255,255,0.02) !important; border-right: 1px solid rgba(255,255,255,0.06) !important; backdrop-filter: none !important; padding: 6px 12px 12px !important; width: 236px !important; }
.pp-user-block { border-bottom: none !important; padding: 10px 8px 10px !important; }
.pp-avatar {
width: 60px !important; height: 60px !important; border: 2px solid rgba(36,171,122,0.45) !important;
background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.55), rgba(10,48,34,0.9)) !important; color: #fff !important; font-size: 0.85rem !important;
box-shadow: 0 10px 24px -10px rgba(36,171,122,0.6);
}
.pp-avatar svg { width: 60px !important; height: 60px !important; }
.pp-avatar-hover { color: #fff !important; }
.pp-vip-badge { border-radius: 9999px !important; border-color: #17121c !important; }
.pp-username { color: var(--text) !important; text-shadow: none !important; font-family: 'Inter', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.98rem !important; font-weight: 800 !important; }
.pp-uid { color: var(--muted) !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0.5px !important; font-size: 0.66rem !important; }
.pp-since { color: var(--muted) !important; opacity: 0.8; }
.pp-bal-block { border-radius: 16px !important; border: 1px solid var(--line-gold) !important; background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(255,255,255,0.03)) !important; padding: 12px 14px 12px !important; }
.pp-bal-block::before { display: none !important; }
.pp-bal-lbl { letter-spacing: 1.4px !important; color: var(--muted) !important; }
.pp-bal-val { color: var(--gold-bright) !important; text-shadow: none !important; font-size: 1.3rem !important; }
.pp-bal-btns { gap: 8px !important; }
.pp-bal-btns .btn { height: 34px !important; border-radius: 10px !important; font-size: 0.66rem !important; letter-spacing: 0.3px !important; text-transform: none !important; }
.pp-nav { padding: 6px 0 4px !important; }
.pp-nav-lbl { letter-spacing: 1.6px !important; color: var(--muted) !important; padding: 0 12px !important; margin: 8px 0 4px !important; }
.pp-nav-item { border-radius: 12px !important; border-left: none !important; padding: 8px 12px !important; margin-bottom: 2px; color: var(--text-2) !important; font-weight: 600 !important; font-size: 0.8rem !important; }
.pp-nav-item:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; }
.pp-nav-item.active { color: #fff !important; background: linear-gradient(90deg, rgba(36,171,122,0.26), rgba(36,171,122,0.07)) !important; text-shadow: none !important; }
.pp-nav-item .pni { color: #47d8a3; opacity: 1 !important; }
.pp-nav-item.pp-logout { border-radius: 12px !important; border: 1px solid rgba(36,171,122,0.25) !important; background: rgba(36,171,122,0.06) !important; color: #47d8a3 !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.pp-nav-item.pp-logout:hover { background: rgba(36,171,122,0.16) !important; border-color: rgba(36,171,122,0.5) !important; color: #fff !important; box-shadow: none !important; }
.pp-main { background: transparent !important; padding: 22px 24px !important; }
.pp-sec-head .ln { width: 22px !important; height: 3px !important; border-radius: 3px; background: linear-gradient(90deg, var(--red-vivid), var(--gold)) !important; }
.pp-sec-head h3 { letter-spacing: 1.6px !important; font-size: 0.72rem !important; }
.pp-stats { gap: 10px !important; background: transparent !important; border: none !important; }
.pp-stats .stat-card { padding: 14px 16px !important; border-radius: 16px !important; }
.pp-stats .s-val { font-size: 1.05rem !important; }
.pp-level, .pp-card, .pp-sec-block { border-radius: 18px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: rgba(255,255,255,0.03) !important; padding: 16px 18px !important; }
.pp-card:hover, .pp-level:hover { border-color: rgba(255,255,255,0.12) !important; box-shadow: none !important; }
.pp-level-name { letter-spacing: 0.5px !important; font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; }
.pp-level-track { height: 6px !important; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.06) !important; }
.pp-level-fill { border-radius: 3px; }
.pp-card-title { letter-spacing: 1.4px !important; color: var(--muted) !important; font-size: 0.62rem !important; }
.pp-info-row { border-bottom-color: rgba(255,255,255,0.06) !important; }
.pp-info-row .val.gold { color: var(--gold-bright) !important; }
.pp-table { border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.07) !important; }
.pp-table-head { background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.pp-table-head .pp-tc { color: var(--muted) !important; letter-spacing: 1.2px !important; font-size: 0.58rem !important; }
.pp-tc { border-right: none !important; }
.pp-table-row { border-bottom-color: rgba(255,255,255,0.05) !important; }
.pp-table-row .pp-tc.win { color: var(--green-bright) !important; }
.pp-table-row .pp-tc.loss { color: #47d8a3 !important; }
.pp-sec-row { border-bottom-color: rgba(255,255,255,0.06) !important; }
.toggle-switch { width: 42px !important; height: 24px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.06) !important; }
.toggle-switch::after { width: 16px !important; height: 16px !important; top: 3px !important; left: 3px !important; background: rgba(255,255,255,0.5) !important; }
.toggle-switch.on { background: rgba(36,171,122,0.55) !important; border-color: rgba(36,171,122,0.6) !important; }
.toggle-switch.on::after { background: #fff !important; left: calc(100% - 19px) !important; box-shadow: none !important; }
.pp-settings-save .btn { border-radius: 12px !important; }
/* avatar picker */
.pp-ap-box { border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: linear-gradient(170deg, #17121c, #0d0a10) !important; }
.pp-ap-title { color: var(--text) !important; font-family: 'Inter', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; }
.pp-ap-thumb { border-radius: 14px !important; border: 2px solid rgba(255,255,255,0.06) !important; }
.pp-ap-thumb:hover { border-color: rgba(36,171,122,0.45) !important; box-shadow: none !important; }
.pp-ap-thumb.sel { border-color: var(--red-vivid) !important; box-shadow: 0 0 0 3px rgba(36,171,122,0.2) !important; }
/* deposit / withdraw / txn modals */
.pp-dep-overlay { background: rgba(6,4,9,0.78) !important; backdrop-filter: blur(14px) !important; }
.pp-dep-box {
border-radius: 24px !important; border: 1px solid rgba(255,255,255,0.08) !important;
background: linear-gradient(170deg, #17121c 0%, #0d0a10 100%) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85) !important; padding: 26px 26px 24px !important;
}
.pp-dep-box::before { display: none !important; }
.pp-dep-title { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: 'Inter', sans-serif !important; font-size: 1.15rem !important; font-weight: 800 !important; }
.pp-dep-sub, .pp-dep-hint { color: var(--muted) !important; }
.pay-methods-label { color: var(--muted) !important; letter-spacing: 1.2px !important; font-size: 0.6rem !important; font-weight: 700; }
.pay-method { border-radius: 14px !important; }
.pay-qa { border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; color: var(--text-2) !important; font-family: 'Inter', sans-serif !important; font-size: 0.76rem !important; }
.pay-qa:hover { border-color: rgba(234,179,8,0.4) !important; color: var(--gold-bright) !important; background: var(--gold-dim) !important; }
.pay-qa.active { border-color: rgba(234,179,8,0.55) !important; color: var(--gold-bright) !important; background: rgba(234,179,8,0.16) !important; box-shadow: none !important; }
.pay-amount-input { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; color: var(--gold-bright) !important; }
.pay-amount-input:focus { border-color: rgba(234,179,8,0.55) !important; }
.pay-amount-currency { color: var(--gold) !important; }
.pay-modal-actions .btn { height: 42px !important; border-radius: 12px !important; text-transform: none !important; letter-spacing: 0.3px !important; font-size: 0.8rem !important; justify-content: center !important; }
/* misc panels that still use inline purple */
#bonus-basket-panel { background: linear-gradient(135deg, #17121c, #0e0a12) !important; border-bottom: 1px solid var(--line) !important; }
#ref-banner { background: linear-gradient(90deg, #17121c, rgba(36,171,122,0.25), #17121c) !important; border-bottom: 1px solid var(--line-accent) !important; }
/* footer modals (i18n.js) */
.fm-box { border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: linear-gradient(170deg, #17121c, #0d0a10) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85) !important; }
.fm-box::before { display: none !important; }
.fm-h { color: var(--text) !important; text-shadow: none !important; }
.fm-stat { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; }
.fm-stat-val { color: var(--gold-bright) !important; text-shadow: none !important; }
.fm-cta { border-radius: 12px !important; }
.fm-note { border-radius: 12px !important; }
.fm-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14) !important; }
/* live win toast (livefeed.js) */
.z51-fw { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.08) !important; border-left: 3px solid var(--red-vivid) !important; background: rgba(18,13,25,0.94) !important; box-shadow: 0 14px 36px -12px rgba(0,0,0,0.7) !important; }
/* ── HEADER SEARCH ── */
.topbar-search {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 10px; width: min(460px, 34vw); height: 40px; padding: 0 12px 0 14px; border-radius: 9999px;
border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.045); color: var(--muted);
transition: border-color .2s, background-color .2s, box-shadow .2s, width .25s;
}
.topbar-search:focus-within { border-color: rgba(36,171,122,0.5); background: rgba(36,171,122,0.06); box-shadow: 0 0 0 3px rgba(36,171,122,0.12); width: min(520px, 38vw); }
.topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.84rem; }
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search-kbd { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700; color: var(--muted); padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); line-height: 1.3; }
.topbar-search-clear { display: none; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: var(--text); font-size: 0.9rem; line-height: 1; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.topbar-search.has-value .topbar-search-clear { display: inline-flex; }
.topbar-search.has-value .topbar-search-kbd { display: none; }
.topbar-search-clear:hover { background: rgba(36,171,122,0.4); }
@media (max-width: 1100px) { .topbar-search { position: static; transform: none; margin-left: auto; width: min(360px, 55vw); } .topbar-search-kbd { display: none; } }
@media (max-width: 620px) { .topbar-search { width: 100%; margin-left: 12px; height: 36px; } }
/* ── TYPOGRAPHY: Orbitron only for logo, jackpot & balances ── */
.live-badge-text, .sb-jp-tag, .sb-ls-val, .sb-brand-name, .vip-label, .jp-stat strong, .hero h2, .h-stat strong, .lw-online-num,
.lw-card-amt, .s-val, .modal-title, .pp-logo-mark, .pp-avatar, .z51-notif-title, .z51-notif-amount, .z51-notif-btn, .pp-mobile-strip-val,
.reg-success h3, .sf-col-head, .sf-18-badge, .fm-h, .fm-stat-val, .fm-tier-val, .crypto-dep-title, .crypto-dep-timer, .pay-amount-input, .amount-stepper.m-input,
.jlabel, .jp-stat-val, .lw-title, .sec-title h3, .section-header h3, .stat-card .s-lbl, .btn-load-more, .fw-headline, .fw-eyebrow, .sb-nav-lbl, .sb-online-lbl {
font-family: 'Inter', sans-serif !important;
}
.s-val, .lw-card-amt, .jp-stat-val, .fm-stat-val, .fm-tier-val, .pay-amount-input, .z51-notif-amount { font-weight: 800 !important; letter-spacing: -0.01em !important; }
.sec-title h3, .section-header h3 { font-weight: 800 !important; letter-spacing: 0.2px !important; text-transform: none !important; font-size: 1rem !important; background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; }
.sec-title h3 .cnt, .section-header h3 .cnt { font-weight: 500 !important; color: var(--muted) !important; font-size: 0.78rem !important; margin-left: 6px; }
.lw-title { font-weight: 800 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; }
.s-lbl, .jlabel, .jp-stat-lbl, .lw-online-lbl, .sb-online-lbl, .sb-nav-lbl { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; }
.btn-load-more { font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: none !important; font-size: 0.8rem !important; }
.btn-load-more .lm-count { font-weight: 500 !important; }
.modal-title, .fm-h, .reg-success h3 { text-transform: none !important; letter-spacing: -0.01em !important; font-weight: 800 !important; }
.sf-col-head { letter-spacing: 1.6px !important; font-weight: 700 !important; }
/* wheel result badge (svg instead of emoji) */
.fw-result-badge { display: inline-grid !important; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; border: 1px solid var(--line-gold); background: var(--gold-dim); color: var(--gold-bright); font-size: 0 !important; animation: none !important; }
.fw-result-badge svg { width: 26px; height: 26px; }
/* ── SIDEBAR: logged-in user block ── */
.sb-user-block { display: flex; flex-direction: column; gap: 8px; }
.sb-user-actions { display: flex; gap: 8px; }
.sb-deposit-btn, .sb-profile-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 12px; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.2px;
transition: transform .18s, filter .18s, background-color .18s, border-color .18s, box-shadow .18s;
}
.sb-deposit-btn { flex: 1; border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, #24ab7a, #1e8c64); box-shadow: 0 10px 22px -10px rgba(36,171,122,0.75); }
.sb-deposit-btn svg { width: 15px; height: 15px; }
.sb-deposit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(36,171,122,0.9); }
.sb-profile-btn { width: 38px; flex: none; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--text-2); }
.sb-profile-btn svg { width: 16px; height: 16px; }
.sb-profile-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
.sb-auth-bal { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 0.82rem !important; letter-spacing: 0 !important; }
/* sidebar support → opens chat on desktop; unread dot */
.sb-support { position: relative; }
.sb-support-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red-vivid); box-shadow: 0 0 8px rgba(36,171,122,0.8); margin-right: 8px; }
.sb-support-dot.show { display: inline-block; animation: sbPulse 1.6s ease-in-out infinite; }
/* jackpot icon box */
.j-box { color: var(--gold-bright); display: grid; place-items: center; }
.j-box svg { width: 20px; height: 20px; }
/* support FAB: hidden on desktop (sidebar has Support), chat panel softened */
@media (min-width: 1101px) {
#support-fab { display: none !important; }
#support-chat { bottom: 24px !important; right: 24px !important; }
}
#support-fab { width: 54px !important; height: 54px !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; box-shadow: 0 12px 28px -8px rgba(36,171,122,0.7), 0 2px 10px rgba(0,0,0,.5) !important; }
#support-fab svg { color: #fff !important; width: 24px !important; height: 24px !important; }
#support-chat { border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 22px !important; background: linear-gradient(170deg, #17121c 0%, #0d0a10 100%) !important; box-shadow: 0 40px 90px -20px rgba(0,0,0,.9), 0 0 60px -20px rgba(36,171,122,0.25) !important; }
/* support chat panel */
.sc-header { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.sc-header::after { display: none !important; }
.sc-htitle { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; font-size: 0.92rem !important; }
.sc-hsub { color: var(--green-bright) !important; }
.sc-hav { border-radius: 14px !important; border: 1px solid var(--line-gold) !important; background: var(--gold-dim) !important; }
.sc-hclose { border-radius: 50% !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important; }
.sc-hclose:hover { background: rgba(36,171,122,0.3) !important; color: #fff !important; }
.sc-pct { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; font-size: 1rem !important; text-shadow: none !important; }
.sc-pcs { color: var(--muted) !important; }
.sc-fl { color: var(--muted) !important; letter-spacing: 1.2px !important; font-weight: 700; }
.sc-fi, .sc-input { border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; color: var(--text) !important; }
.sc-fi:focus, .sc-input:focus { border-color: rgba(36,171,122,0.55) !important; box-shadow: 0 0 0 3px rgba(36,171,122,0.14) !important; }
.sc-pcbtn { border-radius: 12px !important; border: none !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: 0.2px !important; text-transform: none !important; box-shadow: 0 10px 22px -10px rgba(36,171,122,0.75) !important; }
.sc-pcbtn:disabled { opacity: 0.45; box-shadow: none !important; }
.sc-msg.user .sc-bubble { background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; border-radius: 16px 16px 4px 16px !important; }
.sc-msg.bot .sc-bubble { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.07) !important; color: var(--text) !important; border-radius: 16px 16px 16px 4px !important; }
.sc-qr { border-radius: 9999px !important; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.05) !important; color: var(--text-2) !important; }
.sc-qr:hover { border-color: rgba(36,171,122,0.45) !important; background: var(--red-tint) !important; color: #fff !important; }
.sc-footer { border-top: 1px solid rgba(255,255,255,0.07) !important; background: transparent !important; }
.sc-send { border-radius: 12px !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; border: none !important; color: #fff !important; }
.sc-attach-btn { border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.05) !important; color: var(--text-2) !important; }
/* ══════════════════════════════════════════════════════════
MOBILE / TABLET (sidebar hidden ≤1100px)
══════════════════════════════════════════════════════════ */
.topbar-mob-auth, .mob-welcome { display: none; }
/* modals: must scroll when the on-screen keyboard eats the viewport */
.modal-overlay, .pp-dep-overlay, .pmenu-overlay { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
@media (max-height: 760px), (max-width: 620px) {
.modal-overlay { align-items: flex-start !important; padding: 16px 12px 32px !important; }
.modal-box { margin: auto 0 !important; max-height: none !important; }
}
@media (max-width: 620px) {
.modal-box { width: 100% !important; max-width: 100% !important; padding: 54px 20px 24px !important; border-radius: 22px !important; }
.modal-title { font-size: 1.3rem !important; }
.m-input { font-size: 16px !important; padding: 13px 14px !important; } /* 16px prevents iOS zoom */
.m-check input[type="checkbox"] { width: 20px !important; height: 20px !important; }
.m-check { font-size: 0.8rem !important; gap: 10px !important; align-items: center !important; }
.modal-submit { height: 48px !important; font-size: 0.86rem !important; }
}
@media (max-width: 1100px) {
/* header: emblem · search · auth */
.topbar { padding: 0 12px !important; gap: 10px !important; }
.topbar-search { position: static !important; transform: none !important; flex: 1 !important; width: auto !important; min-width: 0; margin-left: 0 !important; height: 38px; }
.topbar-search:focus-within { width: auto !important; }
.topbar-search-kbd { display: none !important; }
.topbar-mob-auth { display: flex; align-items: center; flex-shrink: 0; }
.tm-login {
display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 9999px; cursor: pointer;
border: 1px solid transparent; background: linear-gradient(135deg, #24ab7a, #1e8c64); color: #fff;
font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.2px; white-space: nowrap;
box-shadow: 0 8px 20px -8px rgba(36,171,122,0.7);
}
.tm-login svg { width: 15px; height: 15px; }
.tm-avatar {
width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
border: 1px solid rgba(36,171,122,0.45); background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.55), rgba(10,48,34,0.9)); color: #fff;
font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.9rem;
}
/* welcome / account card */
.mob-welcome { display: block; }
.mw-guest {
position: relative; overflow: hidden; border-radius: 20px; padding: 22px 20px 20px;
border: 1px solid rgba(36,171,122,0.28);
background:
radial-gradient(120% 120% at 100% 0%, rgba(36,171,122,0.28), transparent 55%),
radial-gradient(80% 80% at 0% 100%, rgba(234,179,8,0.14), transparent 60%),
linear-gradient(160deg, #1c1326, #0e0a13);
box-shadow: var(--shadow-soft);
}
.mw-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 9999px; border: 1px solid rgba(36,171,122,0.35); background: rgba(36,171,122,0.14); color: #47d8a3; font-size: 0.58rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.mw-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 8px rgba(52,211,153,0.7); }
.mw-title { margin: 12px 0 0; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1.02; letter-spacing: -0.02em; color: #fff; text-transform: uppercase; }
.mw-title span { color: var(--gold-bright); }
.mw-sub { margin: 10px 0 0; color: var(--text-2); font-size: 0.86rem; line-height: 1.5; max-width: 34ch; }
.mw-actions { display: flex; gap: 10px; margin-top: 16px; }
.mw-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 16px; border-radius: 13px; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.2px; white-space: nowrap; transition: transform .18s, filter .18s, background-color .18s;
}
.mw-btn:active { transform: scale(0.98); }
.mw-btn-primary { border: 1px solid transparent; background: linear-gradient(135deg, #24ab7a, #1e8c64); color: #fff; box-shadow: 0 12px 26px -10px rgba(36,171,122,0.8); }
.mw-btn-ghost { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #fff; }
.mw-user { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 18px; border: 1px solid var(--line-gold); background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(255,255,255,0.03)); }
.mw-user-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.mw-avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(36,171,122,0.45); background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.55), rgba(10,48,34,0.9)); color: #fff; font-family: 'Inter', sans-serif; font-weight: 800; }
.mw-user-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mw-user-name { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.86rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-user-bal { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--gold-bright); letter-spacing: -0.01em; }
.mw-user .mw-btn { flex: none; height: 42px; padding: 0 16px; }
/* content rhythm */
.content { padding: 14px 14px 20px !important; }
#section-home { gap: 14px; }
#section-home > .games-header-block { margin-bottom: -4px !important; }
#section-home > .load-more-wrap { margin-top: -6px !important; }
.mob-cats { margin: 0 !important; gap: 8px !important; }
.mob-cat { border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: rgba(255,255,255,0.035) !important; animation: mob-cat-in 0.45s cubic-bezier(.22,1,.36,1) forwards !important; padding: 14px 16px !important; }
.mob-cat::before { display: none !important; }
.mob-cat-icon { border-radius: 12px !important; border: 1px solid rgba(36,171,122,0.28) !important; background: rgba(36,171,122,0.12) !important; color: #47d8a3 !important; }
.mob-cat span:not(.mob-cat-icon) { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; animation: none !important; font-weight: 700; }
.games-header-block { padding: 14px 14px 12px !important; border-radius: 18px !important; }
.lw-block { padding: 16px 14px 16px !important; }
.stats-row { gap: 10px !important; }
.jackpot-bar { padding: 14px 14px !important; }
}
/* phones: no hero banner, 2-column game grid */
@media (max-width: 860px) {
.banner-main { display: none !important; }
}
@media (max-width: 620px) {
.games {
display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
overflow: visible !important; background: none !important; border: none !important; padding: 10px 0 0 !important;
}
.games .game { flex: none !important; min-width: 0 !important; max-width: none !important; border-right: 1px solid rgba(255,255,255,0.06) !important; min-height: 0 !important; }
.game-info { padding: 26px 10px 9px !important; }
.game-info strong { font-size: 0.7rem !important; }
.jackpot-amount { font-size: 1.45rem !important; }
.jr { display: flex !important; }
.stats-row { grid-template-columns: 1fr 1fr !important; }
.topbar { height: 58px !important; }
}
/* hide floating chat button while any modal / profile / cashier is open (it covered submit buttons on phones) */
body:has(.modal-overlay.open) #support-fab,
body:has(.pmenu-overlay.open) #support-fab,
body:has(.pp-dep-overlay.open) #support-fab,
body:has(#fw-overlay.open) #support-fab,
body:has(#fw-overlay.show) #support-fab { display: none !important; }
/* ══════════════════════════════════════════════════════════
AUTH FLOW v2: fields with icons, steps, PIN, success
══════════════════════════════════════════════════════════ */
.m-field { position: relative; display: flex; align-items: center; }
.m-field > svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; transition: color .18s; }
.m-field:focus-within > svg { color: #47d8a3; }
.m-field .m-input { padding-left: 40px !important; }
.m-field .m-eye { position: absolute; right: 8px; width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, color .15s; }
.m-field .m-eye svg { width: 17px; height: 17px; }
.m-field .m-eye:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.m-field .m-eye + .m-input, .m-field .m-input:has(+ .m-eye) { padding-right: 42px !important; }
.field-err { color: #47d8a3 !important; font-size: 0.7rem; margin-top: 6px; }
.m-input.invalid { border-color: rgba(36,171,122,0.7) !important; box-shadow: 0 0 0 3px rgba(36,171,122,0.12) !important; }
/* password strength */
.pw-meter { display: none; grid-template-columns: repeat(4, 1fr) auto; gap: 5px; align-items: center; margin-top: 8px; }
.pw-meter[class*=" s"] { display: grid; }
.pw-meter span { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); transition: background-color .25s; }
.pw-meter em { font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.6px; color: var(--muted); margin-left: 6px; min-width: 52px; text-align: right; }
.pw-meter.s0 span:nth-child(-n+1), .pw-meter.s1 span:nth-child(-n+1) { background: #24ab7a; }
.pw-meter.s2 span:nth-child(-n+2) { background: #f59e0b; }
.pw-meter.s3 span:nth-child(-n+3) { background: #e6b53b; }
.pw-meter.s4 span:nth-child(-n+4) { background: var(--green-bright); }
.pw-meter.s0 em, .pw-meter.s1 em { color: #47d8a3; }
.pw-meter.s2 em { color: #f59e0b; }
.pw-meter.s3 em { color: var(--gold-bright); }
.pw-meter.s4 em { color: var(--green-bright); }
/* trust row */
.reg-trust { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; margin-bottom: 4px; }
#reg-form .modal-hint { margin-top: 12px !important; }
.reg-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 600; color: var(--muted); letter-spacing: 0.3px; }
.reg-trust svg { width: 13px; height: 13px; color: var(--gold); }
/* step indicator */
.reg-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: none; }
.reg-steps li { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.reg-steps li::before { content: ''; position: absolute; top: 12px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; border-radius: 2px; background: rgba(255,255,255,0.08); }
.reg-steps li:last-child::before { display: none; }
.reg-steps li.done::before { background: linear-gradient(90deg, var(--red-vivid), var(--gold)); }
.rs-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.7rem; color: var(--muted); border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; position: relative; z-index: 1; }
.rs-lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.reg-steps li.active .rs-num { background: linear-gradient(135deg, #24ab7a, #1e8c64); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(36,171,122,0.8), 0 0 0 4px rgba(36,171,122,0.14); }
.reg-steps li.active .rs-lbl { color: var(--text); }
.reg-steps li.done .rs-num { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.4); color: var(--green-bright); font-size: 0; }
.reg-steps li.done .rs-num::after { content: ''; width: 6px; height: 10px; border: solid var(--green-bright); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.reg-steps li.done .rs-lbl { color: var(--text-2); }
#auth-modal.flow-step .modal-tabs { display: none !important; }
#auth-modal.flow-step .modal-box { padding-top: 54px !important; }
/* PIN step */
#reg-pin-step { padding: 0 0 4px !important; }
.pin-hero { text-align: center; margin-bottom: 18px; }
.pin-hero-icon { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid var(--line-gold); background: radial-gradient(120% 120% at 30% 20%, rgba(234,179,8,0.28), rgba(234,179,8,0.06)); box-shadow: 0 14px 30px -14px rgba(234,179,8,0.6); }
.pin-hero-icon svg { width: 28px; height: 28px; }
.pin-step-eyebrow { color: #47d8a3 !important; font-weight: 800; letter-spacing: 1.6px !important; font-size: 0.6rem !important; margin-bottom: 8px !important; }
.pin-step-title, .pin-v-title { font-family: 'Inter', sans-serif !important; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--text) !important; margin-bottom: 6px !important; }
.pin-step-sub, .pin-v-sub { color: var(--text-2) !important; font-size: 0.82rem !important; line-height: 1.55 !important; max-width: 34ch; margin: 0 auto 0 !important; }
.pin-len-toggle { display: inline-flex !important; gap: 4px !important; padding: 4px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.035); margin: 0 auto 20px !important; }
#reg-pin-step .pin-len-toggle { display: inline-flex !important; }
#reg-pin-step { display: flex; flex-direction: column; align-items: center; }
#reg-pin-step.hidden { display: none !important; }
.pin-len-btn { border-radius: 9999px !important; border: 1px solid transparent !important; padding: 8px 18px !important; font-family: 'Inter', sans-serif; font-weight: 700 !important; font-size: 0.76rem !important; color: var(--muted) !important; background: transparent !important; transition: background-color .18s, color .18s, box-shadow .18s !important; }
.pin-len-btn.active { color: #fff !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; box-shadow: 0 8px 18px -8px rgba(36,171,122,0.7); }
.pin-dots { gap: 12px !important; margin-bottom: 14px !important; }
.pin-dot { width: 40px !important; height: 48px !important; border-radius: 13px !important; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.04) !important; position: relative; transition: border-color .18s, background-color .18s, transform .18s !important; }
.pin-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); transition: transform .18s cubic-bezier(.2,.9,.3,1.4); }
.pin-dot.filled { background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; border-color: transparent !important; box-shadow: 0 10px 22px -10px rgba(36,171,122,0.8) !important; }
.pin-dot.filled::after { transform: translate(-50%, -50%) scale(1); }
.pin-dot.error { background: rgba(36,171,122,0.16) !important; border-color: rgba(36,171,122,0.7) !important; box-shadow: none !important; }
.pin-dot.error::after { background: #47d8a3; }
.pin-dot.success { background: rgba(52,211,153,0.2) !important; border-color: rgba(52,211,153,0.6) !important; box-shadow: 0 10px 22px -10px rgba(52,211,153,0.7) !important; }
.pin-dot.success::after { background: var(--green-bright); }
.pin-dots.shake { animation: pinShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes pinShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.pin-status-msg { font-size: 0.78rem !important; color: var(--muted) !important; min-height: 18px !important; margin-bottom: 14px !important; font-weight: 600; }
.pin-status-msg.error { color: #47d8a3 !important; }
.pin-status-msg.success { color: var(--green-bright) !important; }
.pin-numpad { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; gap: 10px !important; max-width: 240px !important; margin: 0 auto 14px !important; }
.pin-key { height: 56px !important; border-radius: 16px !important; background: rgba(255,255,255,0.045) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: var(--text) !important; font-family: 'Inter', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; transition: background-color .12s, transform .12s, border-color .12s !important; }
.pin-key:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.14) !important; }
.pin-key:active { transform: scale(0.94) !important; background: rgba(36,171,122,0.22) !important; border-color: rgba(36,171,122,0.45) !important; }
.pin-key.pin-del { color: var(--muted) !important; }
.pin-key.pin-del svg { width: 22px; height: 22px; }
.pin-skip-link { background: none; border: none; font-family: 'Inter', sans-serif; font-size: 0.78rem !important; font-weight: 600; color: var(--muted) !important; text-decoration: none !important; padding: 8px 14px; border-radius: 9999px; cursor: pointer; transition: color .15s, background-color .15s; }
.pin-skip-link:hover { color: var(--text) !important; background: rgba(255,255,255,0.05); }
/* PIN verify overlay */
#pin-verify-overlay { background: rgba(6,4,9,0.8) !important; backdrop-filter: blur(14px) !important; }
#pin-verify-modal { border-radius: 26px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: linear-gradient(170deg, #17121c 0%, #0e0a12 100%) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 60px -20px rgba(234,179,8,0.18) !important; padding: 30px 26px 24px !important; max-width: 360px !important; }
#pin-verify-modal .pin-hero { margin-bottom: 20px; }
#pin-verify-forgot { font-family: 'Inter', sans-serif; font-size: 0.78rem !important; font-weight: 600; color: var(--muted) !important; text-decoration: none !important; padding: 8px 14px; border-radius: 9999px; margin-top: 2px !important; }
#pin-verify-forgot:hover { color: var(--text) !important; background: rgba(255,255,255,0.05); }
/* success */
.reg-success { text-align: center; padding: 6px 0 2px; }
.reg-success-icon { width: 78px; height: 78px; margin: 0 auto 16px; color: var(--green-bright); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(52,211,153,0.18), rgba(52,211,153,0.04) 70%); font-size: 0 !important; border: none !important; }
.reg-success-icon svg { width: 64px; height: 64px; }
.rs-ring { stroke-dasharray: 176; stroke-dashoffset: 176; animation: rsDraw .7s cubic-bezier(.2,.8,.2,1) forwards; opacity: 0.55; }
.rs-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: rsDraw .45s .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rsDraw { to { stroke-dashoffset: 0; } }
.reg-success .modal-eyebrow { color: var(--green-bright) !important; }
.reg-success h3 { font-family: 'Inter', sans-serif !important; font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: var(--text) !important; text-shadow: none !important; margin: 4px 0 8px !important; text-transform: none !important; }
.reg-success p { color: var(--text-2) !important; font-size: 0.86rem !important; line-height: 1.55; margin: 0 auto !important; max-width: 36ch; }
.reg-success p b { color: var(--gold-bright); font-weight: 800; }
.reg-success-card { display: flex; align-items: center; gap: 12px; text-align: left; margin: 18px 0 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-gold); background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(255,255,255,0.03)); }
.rsc-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--gold-bright); border: 1px solid var(--line-gold); background: var(--gold-dim); }
.rsc-icon svg { width: 18px; height: 18px; }
.reg-success-card b { display: block; font-size: 0.84rem; font-weight: 800; color: var(--text); }
.reg-success-card span { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.reg-success-actions { display: flex; flex-direction: column; gap: 8px; }
.reg-success-actions .btn { width: 100%; }
.reg-success-actions .btn-ghost.modal-submit { background: var(--surface) !important; color: var(--text) !important; }
/* ── CASHIER (deposit: permanent address per coin · withdraw) ── */
.pp-dep-box.cash-box { max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px 24px 22px !important; }
.pp-dep-box.cash-box-dep { width: 680px !important; max-width: calc(100vw - 20px) !important; }
.pp-dep-box.cash-box-wdr { width: 520px !important; max-width: calc(100vw - 20px) !important; }
.cash-head { margin-bottom: 18px !important; }
.cash-head .pp-dep-sub { margin-top: 3px; font-size: 0.76rem !important; }
.cash-head .pp-dep-sub b { color: var(--gold-bright); font-weight: 800; }
.cash-lbl { display: block; font-size: 0.6rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cash-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); opacity: 0.8; margin-left: 4px; }
/* layout */
.cash-grid { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cash-grid > * { min-width: 0; }
.cash-coins-wrap { position: relative; min-height: 300px; }
.cash-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* coin list (vertical, deposit) */
.cash-coins { position: absolute; inset: -4px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
.cash-coins::-webkit-scrollbar { width: 5px; }
.cash-coins::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 9999px; }
.cash-coin {
display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer;
font-family: 'Inter', sans-serif; transition: background-color .16s, border-color .16s, transform .16s;
}
.cash-coin svg { grid-row: 1 / span 2; border-radius: 50%; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.6); }
.cash-coin-name { font-size: 0.8rem; font-weight: 700; color: var(--text); line-height: 1.15; }
.cash-coin-net { font-size: 0.6rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1.2; }
.cash-coin:hover { background: var(--surface-2); border-color: var(--line); }
.cash-coin.active { background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 16%, transparent), var(--surface)); border-color: color-mix(in srgb, var(--cc) 45%, transparent); }
.cash-coin.active .cash-coin-net { color: var(--cc); }
.cash-coin:active { transform: scale(0.985); }
/* coin chips (wrapping, withdraw) */
.cash-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.cash-chips .cash-coin { grid-template-columns: 20px auto auto; grid-template-rows: auto; padding: 6px 12px 6px 8px; border-radius: 9999px; border-color: var(--line); background: var(--surface); column-gap: 7px; }
.cash-chips .cash-coin svg { grid-row: auto; width: 20px; height: 20px; }
.cash-chips .cash-coin-name { font-size: 0.74rem; }
.cash-chips .cash-coin-net { font-size: 0.58rem; padding-left: 5px; border-left: 1px solid var(--line-bright); }
.cash-chips .cash-coin.active { border-color: color-mix(in srgb, var(--cc) 55%, transparent); background: color-mix(in srgb, var(--cc) 14%, transparent); }
/* address card */
.cash-addr-card { display: flex; gap: 16px; align-items: stretch; padding: 14px; border-radius: 20px; border: 1px solid var(--line-gold); background: linear-gradient(135deg, rgba(234,179,8,0.10), rgba(255,255,255,0.025)); }
.cash-qr { position: relative; flex-shrink: 0; width: 148px; height: 148px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px -14px rgba(0,0,0,0.8); overflow: hidden; }
.cash-qr img { width: 100%; height: 100%; display: block; border-radius: 6px; transition: opacity .25s; }
.cash-qr-shimmer { position: absolute; inset: 8px; border-radius: 8px; background: linear-gradient(100deg, #eee 30%, #f9f9f9 50%, #eee 70%); background-size: 200% 100%; animation: cashShimmer 1.3s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cash-addr-card.loading .cash-qr-shimmer, .cash-addr-card.error .cash-qr-shimmer { opacity: 1; }
.cash-addr-card.error .cash-qr-shimmer { animation: none; background: #eee; }
.cash-addr-card.loading .cash-qr img, .cash-addr-card.error .cash-qr img { opacity: 0; }
@keyframes cashShimmer { to { background-position: -200% 0; } }
.cash-addr-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cash-coin-title { display: flex; align-items: baseline; gap: 8px; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.cash-coin-title em { font-style: normal; font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--gold-bright); padding: 3px 8px; border-radius: 9999px; border: 1px solid var(--line-gold); background: var(--gold-dim); }
.cash-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; line-height: 1.5; color: var(--text); word-break: break-all; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); min-height: 42px; transition: color .2s; }
.cash-addr-card.loading .cash-addr { color: var(--muted); font-family: 'Inter', sans-serif; }
.cash-addr-card.error .cash-addr { color: #47d8a3; font-family: 'Inter', sans-serif; }
.cash-copy { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-gold); background: var(--gold-dim); color: var(--gold-bright); font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.78rem; cursor: pointer; transition: background-color .15s, transform .15s, color .15s; align-self: flex-start; }
.cash-copy:hover { background: rgba(234,179,8,0.24); }
.cash-copy:active { transform: scale(0.98); }
.cash-copy.done { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.4); color: var(--green-bright); }
.cash-addr-card.loading .cash-copy, .cash-addr-card.error .cash-copy { opacity: 0.45; pointer-events: none; }
/* facts */
.cash-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.cash-fact { font-size: 0.7rem; color: var(--text-2); padding: 6px 10px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); }
.cash-fact b { color: var(--text); font-weight: 700; }
.cash-fact-warn { border-color: rgba(36,171,122,0.25); background: rgba(36,171,122,0.07); color: #68dfb3; }
.cash-fact-warn b { color: #88e6c4; }
/* recent deposits */
.cash-recent { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); padding: 10px 12px 6px; }
.cash-recent-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.6rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 0 2px 6px; }
.cash-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 8px rgba(52,211,153,0.7); animation: sbPulse 2.2s ease-in-out infinite; }
.cash-recent-list { max-height: 148px; overflow-y: auto; scrollbar-width: thin; }
.cash-empty { font-size: 0.74rem; line-height: 1.5; color: var(--muted); padding: 6px 2px 8px; }
.cash-dep { display: grid; grid-template-columns: 24px 1fr auto 18px; gap: 10px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--line); }
.cash-dep:first-child { border-top: none; }
.cash-dep-main { min-width: 0; }
.cash-dep-main b { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-dep-main b small { font-size: 0.6rem; color: var(--muted); font-weight: 600; letter-spacing: 0.5px; }
.cash-dep-main span { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.cash-dep.ok .cash-dep-main span { color: var(--green-bright); font-weight: 700; }
.cash-bar { display: block; height: 3px; border-radius: 9999px; background: rgba(255,255,255,0.07); margin-top: 6px; overflow: hidden; position: relative; }
.cash-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: var(--gold-bright); transition: width .6s ease; }
.cash-dep.ok .cash-bar::after { background: var(--green-bright); }
.cash-dep-time { font-size: 0.64rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cash-dep-ico { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.14); border-top-color: var(--gold-bright); animation: depSpin .9s linear infinite; justify-self: end; }
.cash-dep.ok .cash-dep-ico { border: none; background: var(--green-bright); animation: none; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
@keyframes depSpin { to { transform: rotate(360deg); } }
/* withdraw form */
.cash-field { display: block; margin-bottom: 14px; }
.cash-field[hidden] { display: none; }
.cash-field .cash-lbl { margin-bottom: 7px; }
.cash-input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); color: var(--text); font-family: 'Inter', sans-serif; font-size: 16px; outline: none; transition: border-color .15s, background-color .15s; }
.cash-input.cash-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.cash-input::placeholder { color: var(--muted); opacity: 0.7; }
.cash-input:focus { border-color: rgba(234,179,8,0.55); background: rgba(0,0,0,0.32); }
.cash-amount { position: relative; display: flex; align-items: center; height: 60px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); transition: border-color .15s; }
.cash-amount:focus-within { border-color: rgba(234,179,8,0.55); }
.cash-amount-cur { padding: 0 6px 0 16px; font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.cash-amount-input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; color: var(--gold-bright); font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; -moz-appearance: textfield; }
.cash-amount-input::-webkit-outer-spin-button, .cash-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cash-amount-input::placeholder { color: rgba(243,201,90,0.3); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: 0; }
.cash-max { margin-right: 8px; height: 34px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--line-gold); background: var(--gold-dim); color: var(--gold-bright); font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.5px; cursor: pointer; transition: background-color .15s; }
.cash-max:hover { background: rgba(234,179,8,0.24); }
.cash-est { min-height: 18px; margin: 8px 2px 0; font-size: 0.74rem; color: var(--muted); }
.cash-est b { color: var(--gold-bright); font-weight: 800; }
.cash-est-warn { color: #47d8a3; font-weight: 600; }
.cash-submit { width: 100%; height: 48px !important; border-radius: 14px !important; text-transform: none !important; letter-spacing: 0.2px !important; font-size: 0.9rem !important; font-weight: 800 !important; justify-content: center !important; margin-top: 4px; }
.cash-submit:disabled { opacity: 0.6; cursor: wait; }
.cash-note { margin-top: 12px; font-size: 0.7rem; line-height: 1.5; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
.pp-dep-box.cash-box { padding: 20px 16px 18px !important; }
.cash-grid { grid-template-columns: 1fr; gap: 14px; }
.cash-coins-wrap { min-height: 0; }
.cash-coins { position: static; inset: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 4px; margin: -4px; scroll-snap-type: x proximity; }
.cash-coins .cash-coin { flex: 0 0 auto; grid-template-columns: 22px auto; grid-template-rows: auto auto; padding: 7px 12px 7px 9px; border-radius: 9999px; border-color: var(--line); background: var(--surface); column-gap: 8px; scroll-snap-align: start; }
.cash-coins .cash-coin svg { width: 22px; height: 22px; }
.cash-coins .cash-coin-name { font-size: 0.74rem; }
.cash-addr-card { flex-direction: column; align-items: center; text-align: center; }
.cash-qr { width: 172px; height: 172px; }
.cash-addr-meta { width: 100%; align-items: center; }
.cash-coin-title { justify-content: center; }
.cash-addr { width: 100%; box-sizing: border-box; text-align: left; }
.cash-copy { align-self: stretch; }
.cash-facts { justify-content: center; }
}
/* ── EMAIL OTP (signup verification · login 2FA · cashier gate) ── */
.otp-inline { text-align: center; padding: 6px 0 2px; }
.otp-cells { display: flex; justify-content: center; gap: 8px; margin: 18px 0 10px; }
.otp-cell { width: 44px; height: 54px; border-radius: 14px; border: 1px solid var(--line-bright); background: rgba(0,0,0,0.28); color: var(--text); font-family: 'Inter', sans-serif; font-size: 1.45rem; font-weight: 800; text-align: center; outline: none; caret-color: var(--gold-bright); transition: border-color .15s, background-color .15s, transform .15s; -moz-appearance: textfield; }
.otp-cell:focus { border-color: rgba(234,179,8,0.6); background: rgba(0,0,0,0.36); transform: translateY(-1px); }
.otp-cell:disabled { opacity: 0.85; }
.otp-cells.error .otp-cell { border-color: rgba(36,171,122,0.6); color: #47d8a3; }
.otp-cells.success .otp-cell { border-color: rgba(52,211,153,0.6); color: var(--green-bright); }
.otp-cells.busy .otp-cell { border-color: var(--line-gold); }
.otp-cells.shake { animation: pinShake .45s cubic-bezier(.36,.07,.19,.97); }
.otp-status { min-height: 18px; font-size: 0.76rem; font-weight: 600; color: var(--muted); text-align: center; }
.otp-status.error { color: #47d8a3; }
.otp-status.success { color: var(--green-bright); }
.otp-actions { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.otp-resend { background: none; border: 1px solid var(--line-gold); color: var(--gold-bright); font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700; padding: 8px 16px; border-radius: 9999px; cursor: pointer; transition: background-color .15s, opacity .15s; }
.otp-resend:hover { background: var(--gold-dim); }
.otp-resend:disabled { opacity: 0.5; cursor: default; border-color: var(--line); color: var(--muted); }
.otp-trust { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; font-size: 0.78rem; color: var(--text-2); cursor: pointer; user-select: none; }
.otp-trust input { width: 18px; height: 18px; accent-color: #24ab7a; margin: 0; }
.otp-overlay { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6,4,9,0.8); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .22s; overflow-y: auto; }
.otp-overlay.show { opacity: 1; pointer-events: auto; }
.otp-modal { position: relative; width: 100%; max-width: 380px; padding: 30px 26px 24px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(170deg, #17121c 0%, #0d0a10 100%); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85); text-align: center; transform: translateY(8px); transition: transform .22s; }
.otp-overlay.show .otp-modal { transform: none; }
.otp-close { position: absolute; top: 14px; right: 14px; }
@media (max-width: 420px) { .otp-cell { width: 40px; height: 50px; font-size: 1.3rem; } .otp-cells { gap: 6px; } }
/* ── HERO CAROUSEL ── */
.banner-carousel { user-select: none; touch-action: pan-y; }
.banner-track { display: flex; width: 100%; transition: transform .65s cubic-bezier(.4,0,.2,1); will-change: transform; }
.banner-slide { position: relative; flex: 0 0 100%; min-width: 0; aspect-ratio: 3.6 / 1; background: radial-gradient(90% 120% at 85% 40%, rgba(34,162,115,0.35), transparent 60%), linear-gradient(120deg, #17101d 0%, #0d0911 55%, #1a0f16 100%); }
.banner-slide img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; }
.banner-slide-main { background: radial-gradient(70% 120% at 84% 40%, rgba(36,171,122,0.34), transparent 62%), radial-gradient(45% 70% at 60% 100%, rgba(30,140,100,0.26), transparent 70%), radial-gradient(30% 50% at 95% 90%, rgba(230,181,59,0.16), transparent 70%), linear-gradient(120deg, #17101d 0%, #0d0911 55%, #1a0f16 100%); }
.banner-slide-main::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(60% 90% at 80% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(60% 90% at 80% 50%, #000, transparent 75%); pointer-events: none; }
.banner-slide-welcome { background: radial-gradient(70% 110% at 82% 45%, rgba(230,181,59,0.32), transparent 62%), linear-gradient(120deg, #17101d 0%, #0d0911 55%, #1c1310 100%); }
.banner-slide-tournament { background: radial-gradient(70% 110% at 82% 45%, rgba(230,181,59,0.26), transparent 62%), radial-gradient(40% 60% at 70% 90%, rgba(34,162,115,0.28), transparent 70%), linear-gradient(120deg, #17101d 0%, #0d0911 60%, #120c14 100%); }
.banner-slide-live { background: radial-gradient(70% 110% at 82% 45%, rgba(34,162,115,0.42), transparent 62%), linear-gradient(120deg, #17101d 0%, #0d0911 55%, #0b1713 100%); }
.banner-slide-crypto { background: radial-gradient(60% 100% at 84% 40%, rgba(38,161,123,0.28), transparent 62%), radial-gradient(40% 70% at 65% 100%, rgba(230,181,59,0.22), transparent 70%), linear-gradient(120deg, #17101d 0%, #0d0911 55%, #0f1214 100%); }
.banner-slide .banner-copy > * { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.banner-slide.is-active .banner-copy > * { opacity: 1; transform: none; }
.banner-slide.is-active .banner-copy > :nth-child(2) { transition-delay: .08s; }
.banner-slide.is-active .banner-copy > :nth-child(3) { transition-delay: .16s; }
.banner-slide.is-active .banner-copy > :nth-child(4) { transition-delay: .24s; }
.banner-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.14); background: rgba(8,6,11,0.55); color: #fff; backdrop-filter: blur(10px);
display: grid; place-items: center; font-size: 1.5rem; line-height: 1; padding: 0 0 3px; cursor: pointer;
opacity: 0; transition: opacity .2s, background-color .2s, transform .2s;
}
.banner-carousel:hover .banner-nav, .banner-carousel:focus-within .banner-nav { opacity: 1; }
.banner-nav:hover { background: rgba(36,171,122,0.55); border-color: rgba(36,171,122,0.6); }
.banner-prev { left: 14px; } .banner-next { right: 14px; }
.banner-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; display: flex; gap: 6px; padding: 6px 8px; border-radius: 9999px; background: rgba(8,6,11,0.4); backdrop-filter: blur(8px); }
.banner-dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 9999px; background: rgba(255,255,255,0.35); cursor: pointer; transition: width .3s cubic-bezier(.2,.8,.2,1), background-color .3s; }
.banner-dot.active { width: 22px; background: var(--gold-bright); }
@media (max-width: 620px) {
.banner-slide { aspect-ratio: 16 / 9; }
.banner-slide img { object-position: 78% 50%; }
.banner-nav { display: none; }
.banner-dots { bottom: 8px; left: auto; right: 12px; transform: none; }
}
/* ── PROFILE (pmenu) on phones: fullscreen, horizontal tab strip instead of the side rail ── */
@media (max-width: 720px) {
.pmenu-overlay { padding: 0 !important; align-items: stretch !important; }
.pmenu-box-frame { border-radius: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; box-shadow: none !important; }
.pmenu-box { border-radius: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: 100dvh !important; }
.pp-topbar { padding: 0 14px !important; height: calc(52px + env(safe-area-inset-top, 0)) !important; padding-top: env(safe-area-inset-top, 0) !important; }
.pp-mobile-strip { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding: 10px 14px !important; }
.pp-mobile-strip-lbl { letter-spacing: 1.4px !important; }
.pp-mobile-strip-val { font-family: 'Inter', sans-serif !important; font-size: 1.15rem !important; font-weight: 800 !important; text-shadow: none !important; }
.pp-mobile-strip-btns .btn { height: 36px !important; border-radius: 10px !important; font-size: 0.72rem !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 12px !important; }
.pp-body { flex-direction: column !important; min-height: 0; }
.pp-side { width: 100% !important; flex: none !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding: 8px 10px !important; overflow: visible !important; background: transparent !important; }
.pp-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding: 0 !important; overflow: visible !important; }
.pp-nav-lbl { display: none !important; }
.pp-nav-item { width: auto !important; min-width: 0 !important; flex: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 34px !important; padding: 0 8px !important; margin: 0 !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.03) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.pp-nav-item span:not(.pni) { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-nav-item .pni { display: none !important; }
.pp-nav-item.active { background: linear-gradient(135deg, rgba(36,171,122,0.3), rgba(36,171,122,0.12)) !important; border-color: rgba(36,171,122,0.45) !important; color: #fff !important; }
.pp-nav-item.pp-logout { margin: 0 !important; }
.pp-main { flex: 1 !important; min-height: 0; overflow-y: auto !important; padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0)) !important; gap: 12px !important; }
.pp-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.pp-stats .stat-card { padding: 12px !important; border-radius: 14px !important; }
.pp-level, .pp-card, .pp-sec-block { padding: 14px !important; border-radius: 16px !important; }
.pp-level-head { flex-wrap: wrap; gap: 6px; }
}
/* ── SEARCH LAUNCHER (home) ── */
.search-launch {
width: 100%; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 16px 0 14px; border-radius: 18px; cursor: text; text-align: left;
border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(160deg, rgba(28,19,38,0.85), rgba(13,9,18,0.95)); color: var(--muted);
font-family: 'Inter', sans-serif; box-shadow: var(--shadow-soft); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.search-launch:hover { border-color: rgba(36,171,122,0.4); box-shadow: 0 0 0 3px rgba(36,171,122,0.1), var(--shadow-soft); transform: translateY(-1px); }
.search-launch-ico { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(36,171,122,0.14); border: 1px solid rgba(36,171,122,0.3); color: #47d8a3; }
.search-launch-ico svg { width: 17px; height: 17px; }
.search-launch-text { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-launch-cats { display: flex; gap: 6px; }
.search-launch-cats i { font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--text-2); padding: 6px 11px; border-radius: 9999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.search-launch-cats i:hover { background: rgba(36,171,122,0.16); color: #fff; border-color: rgba(36,171,122,0.4); }
.search-launch-kbd { font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700; color: var(--muted); padding: 3px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
@media (max-width: 860px) { .search-launch-cats i:nth-child(n+4) { display: none; } .search-launch-kbd { display: none; } }
@media (max-width: 620px) { .search-launch { height: 50px; border-radius: 15px; gap: 10px; } .search-launch-cats { display: none; } .search-launch-text { font-size: 0.84rem; } }
/* ── SEARCH OVERLAY ── */
body.srch-lock { overflow: hidden; }
.srch-overlay { position: fixed; inset: 0; z-index: 9300; display: flex; justify-content: center; align-items: flex-start; padding: clamp(24px, 7vh, 80px) 16px 24px; transition: padding-left .28s cubic-bezier(.4,0,.2,1), opacity .22s; background: rgba(6,4,9,0.72); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity .22s; }
.srch-overlay.show { opacity: 1; pointer-events: auto; }
.srch-panel { position: relative; width: 100%; max-width: 680px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-radius: 26px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(170deg, #17121c 0%, #0d0a10 100%); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9); transform: translateY(-10px) scale(.985); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.srch-overlay.show .srch-panel { transform: none; }
.srch-panel > * { flex: none; }
.srch-panel > .srch-grid { flex: 1 1 auto; min-height: 120px; }
.srch-bar { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 12px 0 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.09); background: rgba(0,0,0,0.32); color: var(--muted); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.srch-bar:focus-within { border-color: rgba(234,179,8,0.5); background: rgba(0,0,0,0.4); box-shadow: 0 0 0 4px rgba(234,179,8,0.08); }
.srch-bar svg { width: 21px; height: 21px; flex: none; color: var(--gold-bright); }
.srch-bar input { flex: 1; min-width: 0; height: 100%; background: transparent; border: none; outline: none; color: var(--text); font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; caret-color: var(--gold-bright); }
.srch-bar input::placeholder { color: var(--muted); font-weight: 500; }
.srch-clear { display: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.srch-bar.has-value .srch-clear { display: inline-flex; }
.srch-clear:hover { background: rgba(36,171,122,0.45); }
.srch-close { position: absolute; top: -16px; right: -16px; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #1d1624 !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.9); }
.srch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.srch-chip { height: 30px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text-2); font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background-color .15s, color .15s, border-color .15s; }
.srch-chip:hover { background: rgba(255,255,255,0.08); color: #fff; }
.srch-chip.active { background: linear-gradient(135deg, #24ab7a, #1e8c64); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(36,171,122,0.7); }
.srch-chip-sm { height: 26px; padding: 0 10px; font-size: 0.66rem; font-weight: 600; }
.srch-chip-sm.active { background: rgba(234,179,8,0.16); border-color: var(--line-gold); color: var(--gold-bright); box-shadow: none; }
.srch-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; color: var(--muted); font-weight: 600; padding: 0 4px; }
.srch-meta a { color: var(--gold-bright); text-decoration: none; font-weight: 700; }
.srch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; overflow-y: auto; padding: 2px 2px 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
.srch-game { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; padding: 0; border: none; background: none; color: var(--text); font-family: 'Inter', sans-serif; text-align: left; cursor: pointer; }
.srch-game b, .srch-game small { display: block; max-width: 100%; }
.srch-thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); }
.srch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.srch-game:hover .srch-thumb img { transform: scale(1.07); }
.srch-game:hover .srch-thumb { border-color: rgba(36,171,122,0.5); }
.srch-badge { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; background: rgba(8,6,11,0.75); color: #fff; backdrop-filter: blur(6px); }
.srch-badge.hot { color: #47d8a3; } .srch-badge.new { color: var(--green-bright); } .srch-badge.vip { color: var(--gold-bright); }
.srch-game b { font-size: 0.74rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-game small { font-size: 0.62rem; color: var(--muted); margin-top: -3px; }
.srch-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 16px; color: var(--text-2); }
.srch-empty b { font-size: 0.95rem; color: var(--text); }
.srch-empty span { font-size: 0.78rem; max-width: 42ch; line-height: 1.5; color: var(--muted); }
.srch-empty .srch-chip { margin-top: 6px; }
@media (max-width: 620px) { .srch-overlay { padding: 22px 10px 10px; align-items: stretch; } .srch-panel { max-height: none; border-radius: 20px; padding: 14px 12px 12px; } .srch-bar { height: 50px; padding-left: 14px; } .srch-bar input { font-size: 0.95rem; } .srch-close { top: -12px; right: -4px; } .srch-grid { grid-template-columns: repeat(3, 1fr); } .srch-chips-prov { display: none; } }
/* ── GAMES HEADER: one clean row (title · category tabs · provider select · catalog link) ── */
.games-header-block, #section-home > .games-header-block { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 4px !important; }
.games-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 !important; }
.games-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cat-tabs.filter-bar { border: none !important; background: none !important; padding: 0 !important; gap: 0 !important; overflow-x: auto; scrollbar-width: none; }
.cat-tabs.filter-bar::-webkit-scrollbar { display: none; }
.cat-tabs .filter-pill { position: relative; background: none !important; border: none !important; padding: 8px 10px !important; color: var(--muted) !important; font-weight: 600 !important; font-size: 0.78rem !important; letter-spacing: 0 !important; white-space: nowrap; }
.cat-tabs .filter-pill::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--gold-bright); transform: scaleX(0); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.cat-tabs .filter-pill:hover { color: var(--text) !important; background: none !important; }
.cat-tabs .filter-pill.active { color: var(--text) !important; background: none !important; }
.cat-tabs .filter-pill.active::after { transform: scaleX(1); }
.prov-select-wrap { position: relative; display: inline-flex; align-items: center; }
.prov-select { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text-2); font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; cursor: pointer; outline: none; transition: border-color .15s, background-color .15s; }
.prov-select:hover, .prov-select:focus { border-color: var(--line-bright); background: rgba(255,255,255,0.07); color: var(--text); }
.prov-select option { background: #17121c; color: var(--text); }
.prov-select-wrap svg { position: absolute; right: 10px; width: 12px; height: 12px; pointer-events: none; color: var(--muted); }
.section-header a.games-all { background: none !important; border: none !important; padding: 0 2px !important; box-shadow: none !important; font-size: 0.74rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gold-bright) !important; }
.section-header a.games-all:hover { color: #fff !important; background: none !important; }
@media (max-width: 860px) { .games-head { align-items: flex-start; } .games-tools { width: 100%; justify-content: space-between; } .cat-tabs.filter-bar { width: 100%; order: 3; } }
/* ══ EMERALD GRADIENT POLISH (accent = Pantone 3405 / 340 / 3385) ══ */
:root { --em-1: #3ccf9a; --em-2: #24ab7a; --em-3: #178a62; --em-4: #0f5f45; --em-glow: rgba(36,171,122,0.55); }
.btn-primary, .banner-btn-primary, .sb-deposit-btn, .mw-btn-primary {
background: linear-gradient(135deg, var(--em-1) 0%, var(--em-2) 48%, var(--em-3) 100%) !important;
background-size: 160% 160% !important; background-position: 0% 50% !important;
box-shadow: 0 12px 28px -12px var(--em-glow), inset 0 1px 0 rgba(255,255,255,0.18) !important;
transition: background-position .35s ease, transform .18s ease, box-shadow .25s ease !important;
}
.btn-primary:hover, .banner-btn-primary:hover, .sb-deposit-btn:hover, .mw-btn-primary:hover {
background-position: 100% 50% !important; transform: translateY(-1px);
box-shadow: 0 16px 32px -12px var(--em-glow), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.sb-promo { background: linear-gradient(135deg, var(--em-4) 0%, var(--em-3) 35%, var(--em-2) 70%, var(--em-1) 100%) !important; box-shadow: 0 14px 30px -12px var(--em-glow) !important; }
.sb-auth-card { background: linear-gradient(135deg, rgba(36,171,122,0.20), rgba(255,255,255,0.03)) !important; }
.sb-seg-btn.active, .sidebar .sb-group .menu-item.active { background: linear-gradient(90deg, rgba(36,171,122,0.30), rgba(36,171,122,0.06)) !important; }
.banner-slide-main {
background:
radial-gradient(58% 105% at 82% 32%, rgba(60,207,154,0.55) 0%, rgba(36,171,122,0.22) 38%, transparent 62%),
radial-gradient(40% 60% at 62% 108%, rgba(23,138,98,0.5), transparent 70%),
radial-gradient(26% 42% at 97% 90%, rgba(230,181,59,0.22), transparent 70%),
linear-gradient(105deg, transparent 52%, rgba(60,207,154,0.07) 53%, rgba(60,207,154,0.07) 60%, transparent 61%),
linear-gradient(115deg, #0b1511 0%, #0a1210 45%, #0c2a20 100%) !important;
}
.banner-slide-main::after { background-image: radial-gradient(rgba(60,207,154,0.16) 1px, transparent 1px) !important; }