/* =============================================================================
Fortune Apex — Neon luxury theme
Color scheme: deep dark bg, purple / gold / cyan glow accents.
============================================================================= */
:root {
--bg-0: #0a0613;
--bg-1: #120a24;
--bg-2: #1a0f30;
--panel: rgba(30, 18, 56, 0.55);
--panel-solid: #1a1030;
--border: rgba(168, 85, 247, 0.35);
--purple: #a855f7;
--purple-bright: #c084fc;
--cyan: #22d3ee;
--gold: #fbbf24;
--gold-bright: #fcd34d;
--green: #34d399;
--red: #fb7185;
--text: #ece7f7;
--text-dim: #a99fc6;
--shadow-purple: 0 0 18px rgba(168, 85, 247, 0.5);
--shadow-cyan: 0 0 18px rgba(34, 211, 238, 0.5);
--shadow-gold: 0 0 18px rgba(251, 191, 36, 0.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: 'Rajdhani', system-ui, sans-serif;
background:
radial-gradient(1200px 700px at 80% -10%, rgba(168, 85, 247, 0.18), transparent 60%),
radial-gradient(900px 600px at 0% 110%, rgba(34, 211, 238, 0.14), transparent 60%),
linear-gradient(160deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
letter-spacing: 0.3px;
}
h1, h2, h3, .display { font-family: 'Orbitron', sans-serif; }
.hidden { display: none !important; }
.gold { color: var(--gold); }
.cyan { color: var(--cyan); }
.purple { color: var(--purple-bright); }
.dim { color: var(--text-dim); }
/* Particle canvas overlay */
#fx-canvas {
position: fixed; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 9000;
}
/* Glassmorphism panel */
.glass {
background: var(--panel);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--border);
box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* ---------- Buttons ---------- */
.btn {
font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px;
letter-spacing: 0.6px; text-transform: uppercase;
padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, filter .2s;
color: #1a0b2e; user-select: none;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.btn-block { width: 100%; }
.btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: var(--shadow-gold); }
.btn-gold:hover:not(:disabled) { box-shadow: 0 0 26px rgba(251,191,36,0.8); }
.btn-cyan { background: linear-gradient(135deg, #67e8f9, var(--cyan)); box-shadow: var(--shadow-cyan); }
.btn-purple { background: linear-gradient(135deg, var(--purple-bright), var(--purple)); color: #fff; box-shadow: var(--shadow-purple); }
.btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: var(--purple); box-shadow: var(--shadow-purple); }
.btn-red { background: linear-gradient(135deg, #fda4af, var(--red)); color: #3a0d18; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
/* ============================ AUTH SCREEN ============================ */
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.auth-bg-glow { position: absolute; width: 480px; height: 480px; border-radius: 50%;
background: radial-gradient(circle, rgba(168,85,247,0.35), transparent 70%); filter: blur(40px); animation: pulse 6s ease-in-out infinite; }
.auth-card { position: relative; z-index: 2; width: 100%; max-width: 410px; padding: 38px 30px; border-radius: 22px; text-align: center; }
.logo-title { font-size: 34px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 22px rgba(168,85,247,0.7); }
.logo-title .gold { display: block; font-size: 38px; color: var(--gold); text-shadow: var(--shadow-gold); }
.tagline { color: var(--text-dim); margin: 6px 0 22px; font-size: 15px; letter-spacing: 1px; }
.auth-tabs { display: flex; gap: 8px; background: rgba(0,0,0,0.25); padding: 5px; border-radius: 12px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 10px; border: none; border-radius: 9px; background: transparent; color: var(--text-dim);
font-family: 'Rajdhani'; font-weight: 700; font-size: 15px; cursor: pointer; transition: .2s; text-transform: uppercase; }
.auth-tab.active { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; box-shadow: var(--shadow-purple); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form input { padding: 13px 16px; border-radius: 11px; border: 1px solid var(--border); background: rgba(0,0,0,0.3);
color: var(--text); font-family: 'Rajdhani'; font-size: 16px; outline: none; transition: .2s; }
.auth-form input:focus { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.auth-error { color: var(--red); font-size: 14px; min-height: 18px; font-weight: 600; }
.disclaimer { margin-top: 16px; font-size: 12px; color: var(--text-dim); opacity: 0.7; }
.avatar-picker { text-align: left; }
.picker-label { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.avatar-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
/* ---------- Avatars (CSS monograms) ---------- */
.avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%;
font-family: 'Orbitron'; font-weight: 700; color: #fff; position: relative;
border: 2px solid rgba(255,255,255,0.25); cursor: pointer; transition: .18s; flex: none; }
.avatar.avatar-lg { width: 92px; height: 92px; font-size: 38px; }
.avatar.avatar-md { width: 58px; height: 58px; font-size: 24px; }
.avatar.avatar-sm { width: 44px; height: 44px; font-size: 19px; }
.avatar.avatar-xs { width: 34px; height: 34px; font-size: 15px; }
.avatar.selected { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: scale(1.05); }
.avatar-grad-ace { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.avatar-grad-king { background: linear-gradient(135deg, #fbbf24, #b45309); }
.avatar-grad-queen { background: linear-gradient(135deg, #f472b6, #be185d); }
.avatar-grad-jack { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.avatar-grad-joker { background: linear-gradient(135deg, #34d399, #047857); }
.avatar-grad-diamond { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.avatar-grad-spade { background: linear-gradient(135deg, #94a3b8, #334155); }
.avatar-grad-club { background: linear-gradient(135deg, #fb7185, #9f1239); }
/* ============================ APP LAYOUT ============================ */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.hud { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; gap: 12px; border-radius: 0 0 18px 18px; }
.hud-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hud-identity { min-width: 0; }
.hud-username { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.hud-level-row { display: flex; align-items: center; gap: 7px; }
.level-badge { font-family: 'Orbitron'; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 7px;
background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; box-shadow: var(--shadow-purple); }
.level-title { font-size: 12px; color: var(--gold); font-weight: 600; }
.xp-bar { width: 150px; max-width: 38vw; height: 6px; background: rgba(0,0,0,0.4); border-radius: 5px; margin-top: 5px; overflow: hidden; }
.xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--purple-bright)); border-radius: 5px;
box-shadow: 0 0 10px var(--cyan); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.hud-right { display: flex; align-items: center; gap: 8px; }
.currency { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; background: rgba(0,0,0,0.3);
border: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.currency.chips, .currency.euros { color: var(--gold); }
.currency.tokens { color: var(--cyan); }
.cur-icon { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.icon-chip, .icon-euro { position: relative; background: radial-gradient(circle at 35% 30%, #fde68a, var(--gold)); border: 2px solid #b45309; }
/* Euro coin glyph stamped into the gold coin. */
.icon-euro::after { content: '\20AC'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 10px; line-height: 1; color: #7c3a06; }
.icon-token { background: radial-gradient(circle at 35% 30%, #a5f3fc, var(--cyan)); border: 2px solid #0e7490;
clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); border-radius: 0; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: rgba(0,0,0,0.3);
cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
.icon-btn:hover { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.icon-btn.muted { opacity: 0.4; }
.view-root { flex: 1; padding: 18px 16px 96px; max-width: 1100px; width: 100%; margin: 0 auto; }
/* Bottom nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-around;
padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
.nav-btn { flex: 1; background: none; border: none; color: var(--text-dim); cursor: pointer; display: flex; flex-direction: column;
align-items: center; gap: 3px; padding: 6px 2px; font-family: 'Rajdhani'; font-weight: 600; font-size: 11px; border-radius: 10px; transition: .18s; }
.nav-btn.active { color: var(--gold); }
.nav-btn.active .nav-ico { box-shadow: var(--shadow-gold); }
.nav-ico { width: 22px; height: 22px; border-radius: 6px; background: currentColor; -webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
/* ============================ SECTIONS / CARDS ============================ */
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; text-shadow: 0 0 14px rgba(168,85,247,0.5); }
.section-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.card { border-radius: 16px; padding: 18px; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* Lobby game cards */
.lobby-hero { border-radius: 18px; padding: 22px; margin-bottom: 18px; position: relative; overflow: hidden; }
.lobby-hero h2 { font-size: 24px; }
.daily-claim-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.streak-track { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.streak-day { width: 38px; height: 46px; border-radius: 9px; border: 1px solid var(--border); background: rgba(0,0,0,0.3);
display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--text-dim); position: relative; }
.streak-day.claimed { border-color: var(--gold); background: rgba(251,191,36,0.12); color: var(--gold); box-shadow: var(--shadow-gold); }
.streak-day.today { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.streak-day .sd-amt { font-weight: 700; font-size: 12px; }
.game-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; }
.game-card { border-radius: 18px; padding: 22px; cursor: pointer; position: relative; overflow: hidden; transition: transform .18s, box-shadow .2s;
min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; }
.game-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(168,85,247,0.4); }
.game-card .gc-art { position: absolute; inset: 0; opacity: 0.9; }
.game-card h3 { font-size: 22px; position: relative; }
.game-card p { color: var(--text-dim); font-size: 13px; position: relative; }
.gc-slots { background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(34,211,238,0.15)); }
.gc-blackjack { background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(168,85,247,0.18)); }
/* Generic .input class used by Hold'em buy-in, multiplayer code, etc. */
.input {
width: 100%;
padding: 11px 13px;
border-radius: 11px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 14px;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--purple-bright); box-shadow: 0 0 0 3px rgba(168,85,247,.15); }
.input::placeholder { color: var(--text-dim); opacity: .7; }
/* Fase 3: Texas Hold'em */
.ho-table { padding: 14px; background: radial-gradient(ellipse at top, rgba(34,211,238,.08), transparent 60%); border-radius: 14px; }
.ho-pot { text-align: center; margin-bottom: 14px; }
.ho-community { display: flex; gap: 8px; justify-content: center; margin: 12px 0; min-height: 70px; align-items: center; }
.ho-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ho-seat { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.03); text-align: center; }
.ho-seat.active { box-shadow: 0 0 0 2px var(--gold); }
.ho-seat.folded { opacity: .45; }
.ho-seat-name { font-weight: 600; }
.ho-seat-cards { display: flex; gap: 4px; justify-content: center; margin: 6px 0; }
.ho-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
width: 38px; height: 56px; background: #fff; color: #1c1917; border-radius: 6px;
font-weight: 800; font-family: 'Orbitron'; font-size: 14px; line-height: 1; }
.ho-card.red { color: #dc2626; }
.ho-card.back { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; }
.ho-actions { display: flex; gap: 8px; flex-direction: column; padding: 12px 0; }
.ho-actions-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ho-raise-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.ho-raise-presets { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ho-raise-row input[type="range"] { flex: 1; min-width: 140px; max-width: 220px; accent-color: var(--gold); }
.ho-raise-amt-val { font-family: 'Orbitron', sans-serif; font-size: 14px; min-width: 80px; text-align: right; }
.ho-history { background: rgba(0,0,0,.2); border-radius: 8px; padding: 8px 12px; max-height: 90px; overflow-y: auto; margin: 8px 0; }
.ho-showdown { text-align: center; padding: 18px; }
.holdem-buyin { max-width: 360px; margin: 0 auto; padding: 20px; text-align: center; }
/* Street badge + event banner give the player a visible cadence between rounds. */
.ho-street-badge {
display: inline-block; padding: 4px 14px; border-radius: 20px;
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
color: #2a1c02; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 2px;
margin: 0 auto 10px; box-shadow: var(--shadow-gold);
}
.ho-event-banner {
text-align: center; padding: 6px 12px; margin: 6px auto 10px; max-width: 380px;
font-size: 13px; background: rgba(34,211,238,.08); border-radius: 8px;
border: 1px solid rgba(34,211,238,.25);
animation: hoEventPop .35s cubic-bezier(.2,.9,.3,1.3) both;
}
.ho-event-banner.hidden { display: none; }
@keyframes hoEventPop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.ho-table > .ho-street-badge { display: block; width: max-content; }
.ho-card.placeholder { background: transparent; border: 2px dashed rgba(255,255,255,.12); color: transparent; }
.ho-seat-role {
display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 1px;
padding: 1px 6px; border-radius: 10px; margin-bottom: 4px;
background: rgba(255,255,255,.08); color: var(--text-dim);
}
.ho-seat-role.d { background: rgba(251,191,36,.2); color: var(--gold); }
.ho-seat-role.sb { background: rgba(34,211,238,.2); color: var(--cyan); }
.ho-seat-role.bb { background: rgba(168,85,247,.2); color: var(--purple-bright); }
/* Fase 4: multiplayer lobby */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mp-panel .lp-body { padding: 14px 16px; }
.mp-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin: 10px 0 4px; }
.mp-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.mp-seat { border-radius: 10px; padding: 8px 10px; min-height: 56px; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.mp-seat.occupied { background: linear-gradient(135deg, rgba(168,85,247,.15), rgba(34,211,238,.1)); border-color: rgba(168,85,247,.4); }
.mp-seat.empty { color: var(--text-dim); border-style: dashed; }
.mp-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mp-row:last-child { border-bottom: none; }
.mp-row code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px; }
/* Live multiplayer sidebar inside game views */
.mp-sidebar { padding: 10px 12px; margin-top: 12px; max-width: 280px; }
.mp-sidebar .lp-head { display: flex; justify-content: space-between; font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.mp-sidebar-seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mp-sb-seat { border-radius: 8px; padding: 6px 8px; min-height: 44px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: 12px; }
.mp-sb-seat.empty { border-style: dashed; color: var(--text-dim); }
.mp-sb-name { font-weight: 600; font-size: 12px; }
.mp-sb-last { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.mp-sb-last.win { color: var(--gold); }
.mp-sb-last.lose { color: var(--red); }
.mp-sidebar-feed { margin-top: 10px; max-height: 110px; overflow-y: auto; }
.mp-sb-feed-row { font-size: 11px; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.03); margin-bottom: 3px; transition: opacity .5s; }
.mp-sb-feed-row.fade { opacity: 0; }
.mp-sb-feed-row.win { background: rgba(251,191,36,.15); color: var(--gold); }
.mp-sidebar-chat { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.mp-sidebar-chat-log { max-height: 120px; overflow-y: auto; font-size: 12px; margin-bottom: 6px; }
.mp-sb-chat-row { padding: 2px 0; }
.mp-sidebar-chat-form { display: flex; gap: 4px; }
.mp-sidebar-chat-form input { flex: 1; background: rgba(0,0,0,.3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 12px; }
/* Fase 6: locked game card overlay */
.game-card.locked { filter: saturate(.55) brightness(.78); }
.game-card.locked:hover { transform: translateY(-2px) scale(1.005); }
.game-card .gc-lock {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
background: linear-gradient(180deg, rgba(8,8,16,0.35), rgba(8,8,16,0.78));
border-radius: inherit; pointer-events: none; backdrop-filter: blur(1px);
}
.game-card .gc-lock-ico { opacity: .9; }
.game-card .gc-lock-price { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 700; }
.game-card .gc-lock-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
/* ============================ SLOT MACHINE ============================ */
.game-shell { border-radius: 18px; padding: 20px; }
.game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.back-btn { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 7px 14px;
cursor: pointer; font-family: 'Rajdhani'; font-weight: 600; transition: .2s; }
.back-btn:hover { border-color: var(--cyan); }
.slot-machine { max-width: 520px; margin: 0 auto; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: linear-gradient(180deg, #1a0f30, #0f0820);
border: 2px solid var(--gold); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-gold), inset 0 0 30px rgba(0,0,0,0.6); }
.reel { height: 120px; border-radius: 12px; background: rgba(0,0,0,0.5); overflow: hidden; position: relative;
border: 1px solid rgba(255,255,255,0.1); }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; }
.reel-sym { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 56px; flex: none; }
.reel.win { border-color: var(--gold); box-shadow: var(--shadow-gold); animation: winpulse .6s ease infinite alternate; }
/* Scrolling-reel animation: motion blur while spinning, bounce on landing. */
.reel.spinning .reel-strip { filter: blur(2.5px); }
.reels-5 .reel.spinning .reel-strip { filter: blur(2px); }
.reel.landed { animation: reelLand .38s cubic-bezier(.2,1.3,.4,1); }
.reel.anticipation { border-color: var(--gold-bright); box-shadow: 0 0 18px rgba(252,211,77,0.45), inset 0 0 22px rgba(0,0,0,0.6); }
@keyframes reelLand {
0% { transform: translateY(-7px); }
55% { transform: translateY(4px); }
100% { transform: translateY(0); }
}
.slot-symbol { font-size: 54px; line-height: 1; filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)); }
.bet-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.bet-display { font-family: 'Orbitron'; font-size: 20px; color: var(--gold); min-width: 110px; text-align: center;
padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); }
.bet-step { width: 42px; height: 42px; border-radius: 10px; }
.payout-banner { text-align: center; min-height: 30px; font-family: 'Orbitron'; font-size: 20px; margin: 8px 0; }
.payout-banner.win { color: var(--gold); text-shadow: var(--shadow-gold); }
.payout-banner.lose { color: var(--text-dim); }
.paytable { margin-top: 18px; }
.paytable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.paytable td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.paytable td:last-child { text-align: right; color: var(--gold); font-weight: 700; }
/* Visual pay combos: rows of repeated symbol icons + the multiplier earned. */
.paytable td.pay-cell { padding: 4px 8px; }
.pay-combo { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 2px 0; }
.pay-icos { display: inline-flex; align-items: center; gap: 1px; }
.pay-ico .slot-symbol { width: 22px; height: 22px; display: inline-flex; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); }
.pay-eq { font-family: 'Orbitron', sans-serif; font-size: 13px; color: var(--gold); font-weight: 700; min-width: 46px; text-align: right; }
@media (max-width: 560px) {
.pay-ico .slot-symbol { width: 17px; height: 17px; }
.pay-eq { font-size: 12px; min-width: 40px; }
}
/* ============================ BLACKJACK ============================ */
.bj-table { max-width: 640px; margin: 0 auto; }
.bj-felt { background: radial-gradient(ellipse at center, #1c0f3a, #0c0720);
border: 2px solid var(--purple); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-purple), inset 0 0 40px rgba(0,0,0,0.6); }
.bj-zone { margin-bottom: 18px; }
.bj-zone-label { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.bj-hand { display: flex; gap: 8px; min-height: 96px; flex-wrap: wrap; }
.bj-value { font-family: 'Orbitron'; padding: 1px 8px; border-radius: 7px; background: rgba(0,0,0,0.4); font-size: 13px; color: var(--cyan); }
.card-pc { width: 66px; height: 92px; border-radius: 9px; background: #fdfdfb; color: #111; position: relative;
box-shadow: 0 4px 14px rgba(0,0,0,0.5); animation: dealin .35s cubic-bezier(.2,.9,.3,1.2) both; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 7px; }
.card-pc.red { color: #d11; }
.card-pc.back { background: repeating-linear-gradient(45deg, #6d28d9, #6d28d9 6px, #4c1d95 6px, #4c1d95 12px); border: 2px solid var(--gold); }
.card-rank { font-family: 'Orbitron'; font-weight: 700; font-size: 17px; line-height: 1; }
.card-suit { font-size: 22px; align-self: flex-end; }
.card-suit.top { align-self: flex-start; }
.bj-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.bj-outcome { text-align: center; font-family: 'Orbitron'; font-size: 22px; min-height: 30px; margin: 10px 0; }
.bj-outcome.win { color: var(--gold); text-shadow: var(--shadow-gold); }
.bj-outcome.lose { color: var(--red); }
.bj-outcome.push { color: var(--cyan); }
/* ---------------------------- Blackjack side bets ---------------------------- */
.bj-sidebets { border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; margin: 0 0 14px;
background: rgba(0,0,0,0.28); }
.bj-sidebets-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
margin-bottom: 10px; }
.bj-sidebets-hint { color: var(--text-dim); opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 11px; }
.bj-sidebet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.bj-sidebet-row + .bj-sidebet-row { border-top: 1px solid var(--border); }
.bj-sidebet-name { font-family: 'Orbitron'; font-size: 14px; color: var(--text); }
.bj-sidebet-odds { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.bj-sidebet-bet { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bj-sidebet-amt { min-width: 70px; text-align: center; font-family: 'Orbitron'; font-size: 15px; color: var(--gold); }
.bj-sidebet-result { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 0; margin: 4px 0; }
.bj-sb-chip { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 10px;
border: 1px solid var(--border); background: rgba(0,0,0,0.3); }
.bj-sb-chip.win { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.bj-sb-chip.lose { opacity: 0.7; }
.bj-sb-chip-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.bj-sb-chip-detail { font-family: 'Orbitron'; font-size: 13px; }
.bj-sb-chip.win .bj-sb-chip-detail { color: var(--gold); }
/* Perfect Pairs winning-card glow */
.card-pc.bj-pair-glow { animation: pairGlow 1.4s ease-in-out 2; z-index: 3; }
@keyframes pairGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0); transform: translateY(0); }
50% { box-shadow: 0 0 18px 6px rgba(245, 197, 66, 0.85), 0 0 36px 10px rgba(245, 197, 66, 0.45); transform: translateY(-6px); }
}
@media (max-width: 560px) {
.bj-sidebet-odds { font-size: 10px; }
.bj-sidebet-amt { min-width: 56px; font-size: 13px; }
}
/* ============================ PROFILE ============================ */
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin-top: 16px; }
.stat-box { border-radius: 13px; padding: 14px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); }
.stat-box .sv { font-family: 'Orbitron'; font-size: 22px; font-weight: 700; }
.stat-box .sl { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
/* Collection grid */
.coll-item { border-radius: 13px; padding: 14px; text-align: center; background: rgba(0,0,0,0.3); border: 1px solid var(--border); position: relative; transition: .2s; }
.coll-item.locked { opacity: 0.4; filter: grayscale(0.7); }
.coll-icon { font-size: 40px; margin-bottom: 6px; }
.coll-name { font-weight: 600; font-size: 14px; }
.rarity-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; margin-top: 6px; }
/* ============================ SHOP ============================ */
.shop-item { border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.shop-item .si-top { display: flex; align-items: center; gap: 10px; }
.shop-ico { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 24px;
background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(34,211,238,0.2)); border: 1px solid var(--border); }
.upgrade-level-dots { display: flex; gap: 5px; margin: 4px 0; }
.lvl-dot { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid var(--border); }
.lvl-dot.filled { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: var(--shadow-gold); border-color: var(--gold); }
.price-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
/* ============================ LEADERBOARD ============================ */
.lb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(0,0,0,0.25);
border: 1px solid var(--border); margin-bottom: 8px; }
.lb-rank { font-family: 'Orbitron'; font-weight: 700; font-size: 17px; width: 34px; text-align: center; color: var(--text-dim); }
.lb-rank.gold { color: var(--gold); text-shadow: var(--shadow-gold); }
.lb-rank.silver { color: #cbd5e1; }
.lb-rank.bronze { color: #d97706; }
.lb-row.me { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-weight: 700; }
.lb-meta { font-size: 12px; color: var(--text-dim); }
.lb-stat { font-family: 'Orbitron'; font-weight: 700; color: var(--gold); }
/* ============================ ACHIEVEMENTS ============================ */
.ach-card { border-radius: 14px; padding: 16px; display: flex; gap: 13px; align-items: flex-start; background: rgba(0,0,0,0.28);
border: 1px solid var(--border); transition: .2s; }
.ach-card.unlocked { border-color: var(--gold); box-shadow: 0 0 16px rgba(251,191,36,0.25); }
.ach-card.locked { opacity: 0.55; }
.ach-prog { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; margin: 6px 0 2px; overflow: hidden; }
.ach-prog > span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple-bright), var(--gold)); border-radius: 3px; }
.ach-prog-txt { font-size: 11px; }
.ach-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ach-chip { padding: 5px 12px; border-radius: 16px; background: rgba(255,255,255,.06); color: var(--text-dim); border: 1px solid var(--border); cursor: pointer; font-size: 13px; transition: background .15s, color .15s; }
.ach-chip.active { background: linear-gradient(135deg, var(--purple-bright), var(--purple)); color: #fff; border-color: transparent; }
.ach-chip:hover { color: var(--text); }
.ach-ico { width: 48px; height: 48px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 24px;
background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(34,211,238,0.15)); border: 1px solid var(--border); }
.ach-card.unlocked .ach-ico { background: linear-gradient(135deg, var(--gold), #b45309); }
.ach-body { min-width: 0; }
.ach-name { font-weight: 700; font-size: 16px; }
.ach-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--cyan); }
.ach-desc { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.ach-reward { font-size: 12px; color: var(--gold); margin-top: 5px; font-weight: 600; }
/* ============================ TOAST / MODAL ============================ */
.toast-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9500; display: flex; flex-direction: column; gap: 10px;
width: min(92vw, 420px); pointer-events: none; }
.toast { border-radius: 13px; padding: 13px 16px; display: flex; align-items: center; gap: 11px; animation: toastin .35s ease both;
border: 1px solid var(--border); background: rgba(26,16,48,0.95); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.toast.gold { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.toast.cyan { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.toast.red { border-color: var(--red); }
.toast .t-ico { font-size: 24px; flex: none; }
.toast .t-title { font-weight: 700; font-size: 15px; }
.toast .t-sub { font-size: 13px; color: var(--text-dim); }
.modal-overlay { position: fixed; inset: 0; z-index: 9600; background: rgba(5,3,12,0.75); display: flex; align-items: center; justify-content: center;
padding: 20px; animation: fadein .25s ease; }
.modal-card { width: 100%; max-width: 420px; border-radius: 20px; padding: 28px; text-align: center; animation: popin .35s cubic-bezier(.2,.9,.3,1.3) both; }
.levelup-modal h2 { font-size: 30px; color: var(--gold); text-shadow: var(--shadow-gold); }
.levelup-ring { width: 110px; height: 110px; margin: 14px auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: 'Orbitron'; font-size: 44px; font-weight: 900; color: #fff;
background: conic-gradient(var(--gold), var(--purple), var(--cyan), var(--gold)); box-shadow: var(--shadow-gold); animation: spin 4s linear infinite; }
.levelup-ring span { width: 86px; height: 86px; border-radius: 50%; background: var(--panel-solid); display: flex; align-items: center; justify-content: center; }
/* ---------- Animations ---------- */
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.15);opacity:1} }
@keyframes winpulse { from{box-shadow:0 0 10px rgba(251,191,36,.4)} to{box-shadow:0 0 26px rgba(251,191,36,.9)} }
@keyframes dealin { from{transform:translateY(-40px) rotate(-8deg);opacity:0} to{transform:none;opacity:1} }
@keyframes toastin { from{transform:translateY(-20px);opacity:0} to{transform:none;opacity:1} }
@keyframes fadein { from{opacity:0} to{opacity:1} }
@keyframes popin { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.shake { animation: shake .4s ease; }
/* ---------- Responsive ---------- */
@media (max-width: 560px) {
.hud-username { max-width: 90px; }
.currency { padding: 5px 8px; font-size: 13px; }
.xp-bar { width: 110px; }
.reel { height: 96px; } .reel-sym { height: 96px; font-size: 44px; }
.section-title { font-size: 19px; }
.card-pc { width: 56px; height: 80px; }
.hud-right { gap: 5px; }
.icon-btn { width: 34px; height: 34px; }
}
/* ---- Helpers added for JS-driven components ---- */
.ce-ico svg { width: 100%; height: 100%; }
.ce-badge { display: inline-block; font-family: 'Orbitron'; font-size: 12px; font-weight: 700; letter-spacing: 2px;
padding: 5px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--purple), var(--cyan)); color: #fff;
box-shadow: var(--shadow-purple); text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.center { text-align: center; }
.slot-symbol svg { width: 100%; height: 100%; }
.reel-sym .slot-symbol { width: 64px; height: 64px; display: inline-flex; }
.shop-ico .ce-ico, .ach-ico .ce-ico, .coll-icon .ce-ico { width: 26px; height: 26px; }
.coll-icon .ce-ico { width: 38px; height: 38px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
@media (max-width: 620px) {
.grid-2 { grid-template-columns: 1fr; }
.game-cards { grid-template-columns: 1fr; }
.profile-head { justify-content: center; text-align: center; }
}
/* =====================================================================
* EURO COIN ICON (inline, gold)
* ===================================================================== */
.euro-coin { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
background: radial-gradient(circle at 35% 28%, #fef3c7, #fbbf24 55%, #b45309);
border: 2px solid #92400e; color: #7c3a06; font-family: 'Orbitron', sans-serif; font-weight: 900;
font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.5); vertical-align: middle; }
/* =====================================================================
* POKER CHIPS — denominations with canonical casino colours
* ===================================================================== */
.poker-chip { --chip-size: 56px; position: relative; display: inline-flex; align-items: center; justify-content: center;
width: var(--chip-size); height: var(--chip-size); border-radius: 50%; flex: none;
font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: calc(var(--chip-size) * .3);
color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.15);
user-select: none; transition: transform .12s; }
/* The dashed edge ring (the painted spots around a real chip). */
.poker-chip .chip-ring { position: absolute; inset: 3px; border-radius: 50%;
border: 3px dashed rgba(255,255,255,.85); opacity: .9; }
.poker-chip .chip-face { position: relative; z-index: 1; width: 66%; height: 66%; border-radius: 50%;
display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.18);
box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
/* Denomination colours. */
.poker-chip.c1 { background: radial-gradient(circle at 38% 32%, #ffffff, #d4d4d8); color: #27272a; text-shadow: none; }
.poker-chip.c1 .chip-ring { border-color: rgba(120,120,130,.7); }
.poker-chip.c1 .chip-face { background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 2px rgba(120,120,130,.5); }
.poker-chip.c5 { background: radial-gradient(circle at 38% 32%, #f87171, #dc2626); }
.poker-chip.c10 { background: radial-gradient(circle at 38% 32%, #60a5fa, #2563eb); }
.poker-chip.c25 { background: radial-gradient(circle at 38% 32%, #4ade80, #16a34a); }
.poker-chip.c50 { background: radial-gradient(circle at 38% 32%, #fb923c, #ea580c); }
.poker-chip.c100 { background: radial-gradient(circle at 38% 32%, #4b5563, #111827); }
.poker-chip.c500 { background: radial-gradient(circle at 38% 32%, #c084fc, #7c3aed); }
.poker-chip.chip-pop { animation: chipPop .28s cubic-bezier(.2,.9,.3,1.4); }
@keyframes chipPop { 0% { transform: scale(.6) translateY(8px); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Chip rack (selection / quick-add row) */
.chip-rack { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 12px; }
.chip-btn { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform .14s; }
.chip-btn:hover:not(:disabled) { transform: translateY(-4px); }
.chip-btn.selected .poker-chip { transform: scale(1.12); box-shadow: 0 0 0 3px var(--gold), 0 5px 14px rgba(0,0,0,.5); }
.chip-btn:disabled { opacity: .45; cursor: default; }
/* Stacked chips display (blackjack bet) */
.bj-bet-stack { display: flex; justify-content: center; align-items: flex-end; min-height: 50px; margin-bottom: 6px; }
.stacked-chip { display: inline-block; margin-left: -26px; animation: stackDrop .3s cubic-bezier(.2,.9,.3,1.3) both;
animation-delay: calc(var(--i) * 60ms); }
.stacked-chip:first-child { margin-left: 0; }
@keyframes stackDrop { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
/* =====================================================================
* ROULETTE
* ===================================================================== */
.roulette-game { max-width: 860px; margin: 0 auto; }
.rl-wheel-wrap { position: relative; display: flex; flex-direction: column; align-items: center; margin: 10px 0 22px; }
.rl-wheel { position: relative; width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, #3b2410, #1a0f06); border: 8px solid #5b3a1a;
box-shadow: 0 0 0 6px #2a1a0c, 0 14px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.7); }
.rl-wheel-inner { position: absolute; inset: 6px; border-radius: 50%; overflow: hidden; will-change: transform; }
.rl-pocket { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: bottom center; }
.rl-pocket span { position: absolute; top: 6px; left: -9px; width: 18px; text-align: center; color: #fff;
font-family: 'Orbitron'; font-size: 9px; font-weight: 700; transform-origin: center; }
.rl-pocket::before { content: ''; position: absolute; left: -22px; top: 0; width: 44px; height: 46px;
clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); }
.rl-pocket.red::before { background: linear-gradient(#dc2626, #991b1b); }
.rl-pocket.black::before { background: linear-gradient(#27272a, #0a0a0a); }
.rl-pocket.green::before { background: linear-gradient(#16a34a, #15803d); }
.rl-hub { position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fcd34d, #b45309);
box-shadow: 0 0 14px rgba(251,191,36,.6), inset 0 0 8px rgba(0,0,0,.4); border: 3px solid #7c3a06; }
.rl-ball-track { position: absolute; inset: 10px; will-change: transform; }
.rl-ball { position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #cbd5e1); box-shadow: 0 0 8px rgba(255,255,255,.9); }
.rl-result { margin-top: 14px; font-family: 'Orbitron'; font-size: 18px; font-weight: 700; min-height: 30px;
display: flex; align-items: center; gap: 10px; }
.rl-result.green { color: var(--green); } .rl-result.red { color: #f87171; } .rl-result.black { color: var(--text); }
.rl-result-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
font-size: 17px; color: #fff; }
.rl-result-num.red { background: #dc2626; } .rl-result-num.black { background: #18181b; } .rl-result-num.green { background: #16a34a; }
/* Betting table */
.rl-table { background: radial-gradient(ellipse at center, #0f5132, #06351f);
border: 2px solid #064e2b; border-radius: 14px; padding: 12px; display: grid;
grid-template-columns: 44px 1fr; gap: 6px; box-shadow: inset 0 0 40px rgba(0,0,0,.5);
background-image: radial-gradient(ellipse at center, #0f5132, #06351f), repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px); }
.rl-zero { grid-row: span 1; display: flex; align-items: center; justify-content: center; }
.rl-grid { grid-column: 2; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; }
.rl-num { display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 6px; cursor: pointer;
font-family: 'Orbitron'; font-weight: 700; font-size: 13px; color: #fff; transition: transform .1s, box-shadow .15s; position: relative; }
.rl-num.red { background: linear-gradient(#dc2626, #b91c1c); }
.rl-num.black { background: linear-gradient(#27272a, #111); }
.rl-num.green { background: linear-gradient(#16a34a, #15803d); }
.rl-num:hover, .rl-cell:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold); }
.rl-cols { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rl-dozens { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rl-evens { grid-column: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.rl-cell { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 6px; cursor: pointer;
background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: .5px; transition: transform .1s, box-shadow .15s; position: relative; }
.rl-cell.red { background: linear-gradient(#dc2626, #b91c1c); color: #fff; }
.rl-cell.black { background: linear-gradient(#27272a, #111); color: #fff; }
.rl-chip-marker { position: absolute; bottom: -4px; right: -4px; z-index: 2; pointer-events: none;
animation: chipPop .25s cubic-bezier(.2,.9,.3,1.4); }
.rl-win { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold) !important; animation: winpulse .5s ease infinite alternate; }
.rl-lose { opacity: .4; }
.rl-hit { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--cyan) !important; }
.rl-bet-info { text-align: center; font-size: 15px; margin: 4px 0 10px; }
.rl-controls { margin-top: 16px; }
/* =====================================================================
* NEON GLOW + ANIMATED BACKGROUND ENHANCEMENTS
* ===================================================================== */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(2px 2px at 20% 30%, rgba(251,191,36,.5), transparent),
radial-gradient(2px 2px at 70% 60%, rgba(34,211,238,.4), transparent),
radial-gradient(1.5px 1.5px at 40% 80%, rgba(168,85,247,.5), transparent),
radial-gradient(1.5px 1.5px at 85% 20%, rgba(251,191,36,.4), transparent);
background-size: 100% 100%; animation: bgFloat 16s ease-in-out infinite alternate; opacity: .7; }
@keyframes bgFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-18px); } }
.logo-title .gold { animation: neonFlicker 3.5s ease-in-out infinite; }
@keyframes neonFlicker { 0%,100% { text-shadow: 0 0 8px var(--gold), 0 0 18px rgba(251,191,36,.6); }
50% { text-shadow: 0 0 14px var(--gold), 0 0 28px rgba(251,191,36,.9); } }
.btn-gold:hover:not(:disabled) { box-shadow: 0 0 16px rgba(251,191,36,.7), var(--shadow-gold); }
.btn-cyan:hover:not(:disabled) { box-shadow: 0 0 16px rgba(34,211,238,.7), var(--shadow-cyan); }
.btn-purple:hover:not(:disabled) { box-shadow: 0 0 16px rgba(168,85,247,.7), var(--shadow-purple); }
.section-title { text-shadow: 0 0 14px rgba(168,85,247,.4); }
.game-card.gc-roulette:hover { box-shadow: 0 12px 40px rgba(239,68,68,.4); }
/* Felt texture helper (used by blackjack felt + roulette already styled) */
.bj-felt { background-image:
radial-gradient(ellipse at center, #14532d, #052012),
repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px) !important;
border-color: #065f46 !important; box-shadow: 0 0 24px rgba(6,95,70,.4), inset 0 0 50px rgba(0,0,0,.7) !important; }
/* Enhanced playing-card face: corner pips on both ends + centre suit */
.card-pc { background: linear-gradient(160deg, #ffffff, #f1f5f9); border: 1px solid #cbd5e1; }
.card-pc::after { content: attr(data-corner); position: absolute; bottom: 5px; right: 7px; font-family: 'Orbitron';
font-weight: 700; font-size: 13px; transform: rotate(180deg); opacity: .85; }
.card-pc.flip { animation: cardFlip .4s ease both; }
@keyframes cardFlip { 0% { transform: rotateY(90deg); opacity: 0; } 100% { transform: rotateY(0); opacity: 1; } }
/* ---- Reusable card-deal animation (slide from deck + flip + settle) ---- */
.card-pc.dealt {
animation: cardDeal .52s cubic-bezier(.18,.85,.3,1.18) both;
transform-origin: center center;
will-change: transform, opacity;
}
@keyframes cardDeal {
0% { transform: translate3d(var(--deal-dx,-180px), var(--deal-dy,-120px), 0) rotateZ(calc(var(--deal-rot,4deg) * 4)) rotateY(85deg) scale(.86); opacity: 0; }
35% { opacity: 1; }
70% { transform: translate3d(0,0,0) rotateZ(var(--deal-rot,4deg)) rotateY(0deg) scale(1.04); }
100% { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg) scale(1); opacity: 1; }
}
/* Face-down cards slide in without the face-flip (no reveal yet) */
.card-pc.back.dealt {
animation: cardDealBack .46s cubic-bezier(.18,.85,.3,1.18) both;
}
@keyframes cardDealBack {
0% { transform: translate3d(var(--deal-dx,-180px), var(--deal-dy,-120px), 0) rotateZ(calc(var(--deal-rot,4deg) * 4)) scale(.88); opacity: 0; }
40% { opacity: 1; }
100% { transform: translate3d(0,0,0) rotateZ(0deg) scale(1); opacity: 1; }
}
@media (max-width: 620px) {
.rl-wheel { width: 220px; height: 220px; }
.rl-num { min-height: 28px; font-size: 11px; }
.rl-table { grid-template-columns: 36px 1fr; }
}
/* =====================================================================
* SOVEREIGN CASINO — v2 ENHANCEMENTS
* Brand-mark, play-money banner, footer, slots modes, baccarat, craps,
* legal modal, immersive felt/rail/lighting depth.
* ===================================================================== */
/* ---- Brand-mark crown (auth screen) ---- */
.brand-mark { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 38% 30%, #2a1a52, #120a24);
border: 2px solid var(--gold); box-shadow: var(--shadow-gold), inset 0 0 18px rgba(251,191,36,.25); }
.brand-crown { width: 34px; height: 26px; display: inline-block;
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0 6px rgba(251,191,36,.7)); }
/* ---- Auth legal links ---- */
.auth-legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 14px; }
.auth-legal-links a { color: var(--text-dim); font-size: 12px; text-decoration: none; border-bottom: 1px dotted transparent; transition: .15s; }
.auth-legal-links a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
/* ---- Play-money banner (top of app) ---- */
.playmoney-banner { display: flex; align-items: center; justify-content: center; gap: 9px;
padding: 7px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; text-align: center;
color: #f7e9c9; background: linear-gradient(90deg, rgba(180,83,9,.28), rgba(251,191,36,.12), rgba(180,83,9,.28));
border-bottom: 1px solid rgba(251,191,36,.3); }
.pm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
background: radial-gradient(circle at 35% 30%, #fde68a, var(--gold));
box-shadow: 0 0 8px rgba(251,191,36,.8); animation: pulse 2.4s ease-in-out infinite; }
/* ---- App footer ---- */
.app-footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 6px 12px; padding: 18px 16px 96px; font-size: 12px; color: var(--text-dim);
border-top: 1px solid var(--border); background: rgba(0,0,0,.2); }
.app-footer a { color: var(--text-dim); text-decoration: none; transition: .15s; }
.app-footer a:hover { color: var(--gold); }
.foot-brand { font-family: 'Orbitron'; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
.foot-sep { opacity: .5; }
.foot-note { flex-basis: 100%; text-align: center; opacity: .7; margin-top: 4px; }
/* =====================================================================
* SLOTS — mode selector + themed cabinets
* ===================================================================== */
.slot-mode-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 20px; }
.slot-mode-card { cursor: pointer; border-radius: 15px; padding: 14px 10px; text-align: center;
border: 1px solid var(--border); background: rgba(0,0,0,.3); color: var(--text); transition: transform .16s, box-shadow .2s, border-color .2s; }
.slot-mode-card:hover { transform: translateY(-3px); }
.slot-mode-card.active { border-color: var(--gold); box-shadow: var(--shadow-gold), inset 0 0 24px rgba(251,191,36,.08); }
.smc-reels { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.smc-reels span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.45); border-radius: 7px; padding: 3px; }
.smc-reels span svg { width: 100%; height: 100%; }
.smc-name { font-family: 'Orbitron'; font-weight: 700; font-size: 14px; }
.smc-tag { font-size: 11px; color: var(--text-dim); margin-top: 2px; min-height: 26px; }
.smc-meta { font-size: 11px; color: var(--gold); margin-top: 4px; font-weight: 600; }
.slot-mode-card.mode-classic.active { border-color: #f59e0b; }
.slot-mode-card.mode-deluxe.active { border-color: #60a5fa; box-shadow: 0 0 18px rgba(96,165,250,.5), inset 0 0 24px rgba(96,165,250,.08); }
.slot-mode-card.mode-neon.active { border-color: var(--cyan); box-shadow: var(--shadow-cyan), inset 0 0 24px rgba(34,211,238,.08); }
/* Cabinet — wood/metal housing around reels */
.slot-cabinet { max-width: 540px; margin: 0 auto; border-radius: 20px; padding: 16px 16px 10px;
background: linear-gradient(180deg, #241439, #160c28);
border: 2px solid rgba(168,85,247,.4); box-shadow: 0 16px 44px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.5);
position: relative; }
.slot-cabinet::before { content: ''; position: absolute; inset: 6px; border-radius: 14px;
border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.cabinet-marquee { text-align: center; font-family: 'Orbitron'; font-weight: 800; letter-spacing: 2px;
font-size: 16px; padding: 6px 0 12px; text-transform: uppercase;
background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 8px rgba(251,191,36,.5)); }
.slot-cabinet.mode-deluxe { border-color: rgba(96,165,250,.5); background: linear-gradient(180deg, #102036, #0a1322); }
.slot-cabinet.mode-deluxe .cabinet-marquee { background: linear-gradient(90deg, #60a5fa, #bae6fd, #60a5fa);
-webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 8px rgba(96,165,250,.6)); }
.slot-cabinet.mode-neon { border-color: rgba(34,211,238,.5); background: linear-gradient(180deg, #07212a, #0a0820); }
.slot-cabinet.mode-neon .cabinet-marquee { background: linear-gradient(90deg, var(--cyan), #a5f3fc, var(--purple-bright));
-webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 10px rgba(34,211,238,.7)); }
/* 5-reel layouts must shrink to fit */
.reels.reels-5 { grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 14px; }
.reels-5 .reel { height: 96px; }
.reels-5 .reel-sym { height: 96px; }
.reels-5 .reel-sym .slot-symbol { width: 50px; height: 50px; }
.reels-3 { grid-template-columns: repeat(3, 1fr); }
/* =====================================================================
* BACCARAT
* ===================================================================== */
.bac-table { max-width: 680px; margin: 0 auto; }
.bac-felt { position: relative; border-radius: 20px; padding: 26px 18px 22px; margin-bottom: 16px; overflow: hidden;
background:
radial-gradient(ellipse at 50% 0%, #1f5a3a, #0c3a22 60%, #062417),
repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 9px, transparent 9px 18px);
border: 2px solid #b8860b;
box-shadow: 0 0 30px rgba(0,0,0,.6), inset 0 0 70px rgba(0,0,0,.55), inset 0 0 0 6px rgba(184,134,11,.12); }
.bac-spotlight { position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
width: 120%; height: 90%; pointer-events: none;
background: radial-gradient(ellipse at center, rgba(255,250,230,.16), transparent 60%); }
.bac-hands { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 14px; }
.bac-zone { flex: 1; border-radius: 14px; padding: 12px; background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.08); }
.bac-player { border-top: 3px solid var(--cyan); }
.bac-banker { border-top: 3px solid var(--gold); }
.bac-zone-head { font-family: 'Orbitron'; font-size: 13px; letter-spacing: 1px; color: var(--text-dim);
display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bac-score { font-family: 'Orbitron'; font-size: 20px; font-weight: 700; color: var(--gold);
background: rgba(0,0,0,.4); padding: 1px 10px; border-radius: 8px; }
.bac-hand { display: flex; gap: 7px; flex-wrap: wrap; min-height: 92px; }
.bac-vs { align-self: center; font-family: 'Orbitron'; font-weight: 800; font-size: 15px; color: var(--text-dim);
opacity: .7; flex: none; }
.bac-outcome { position: relative; text-align: center; font-family: 'Orbitron'; font-size: 22px; min-height: 30px; margin-top: 16px; }
.bac-outcome.win { color: var(--gold); text-shadow: var(--shadow-gold); }
.bac-outcome.lose { color: var(--red); }
.bac-outcome.push { color: var(--cyan); }
.bac-bets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.bac-bet-area { cursor: pointer; border-radius: 13px; padding: 14px 10px; text-align: center;
border: 2px solid var(--border); background: rgba(0,0,0,.3); color: var(--text); transition: .16s; }
.bac-bet-area:hover { transform: translateY(-2px); border-color: var(--purple-bright); }
.bac-bet-area.active { border-color: var(--gold); box-shadow: var(--shadow-gold), inset 0 0 22px rgba(251,191,36,.1); }
.bba-name { font-family: 'Orbitron'; font-weight: 700; font-size: 15px; }
.bba-pay { font-size: 12px; color: var(--gold); margin-top: 3px; }
.card-pc.bac-deal { animation: dealin .4s ease both; }
.card-pc.bac-squeeze { animation: squeezeIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes squeezeIn { 0% { transform: translateY(-30px) rotateY(80deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* =====================================================================
* CRAPS
* ===================================================================== */
.craps-table { max-width: 720px; margin: 0 auto; }
.craps-status { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.craps-phase, .craps-point { font-family: 'Orbitron'; font-weight: 700; font-size: 14px; padding: 7px 16px; border-radius: 10px;
background: rgba(0,0,0,.35); border: 1px solid var(--border); color: var(--text-dim); letter-spacing: 1px; }
.craps-phase.on { color: #07212a; background: linear-gradient(135deg, #67e8f9, var(--cyan)); border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.craps-point.on { color: #3a0d18; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: var(--gold); box-shadow: var(--shadow-gold); }
/* Dice tray + 3D dice */
.dice-tray { display: flex; justify-content: center; gap: 22px; padding: 20px; margin-bottom: 12px; border-radius: 16px;
background: radial-gradient(ellipse at center, #1f5a3a, #0c3a22 65%, #062417);
border: 2px solid #7c4a12; box-shadow: inset 0 0 50px rgba(0,0,0,.6); perspective: 600px; }
.die { width: 64px; height: 64px; border-radius: 13px; background: linear-gradient(150deg, #ffffff, #e2e8f0);
box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.9), inset 0 -3px 6px rgba(0,0,0,.18);
transform-style: preserve-3d; }
.die-face { width: 100%; height: 100%; display: block; }
.die-face circle { fill: #1a1030; }
.die.rolling { animation: diceTumble .5s linear infinite; }
@keyframes diceTumble { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 25% { transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg); }
50% { transform: rotateX(360deg) rotateY(180deg) rotateZ(0); } 75% { transform: rotateX(180deg) rotateY(270deg) rotateZ(-45deg); }
100% { transform: rotateX(0) rotateY(360deg) rotateZ(0); } }
.craps-roll-msg { text-align: center; font-size: 14.5px; min-height: 24px; margin-bottom: 14px; color: var(--text-dim); font-weight: 600; }
.craps-roll-msg.win { color: var(--gold); text-shadow: var(--shadow-gold); }
.craps-roll-msg.lose { color: var(--red); }
/* Craps felt — betting layout */
.craps-felt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; border-radius: 16px; margin-bottom: 14px;
background:
radial-gradient(ellipse at 50% 30%, #1f5a3a, #0c3a22 65%, #062417),
repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 9px, transparent 9px 18px);
border: 2px solid #b8860b; box-shadow: inset 0 0 60px rgba(0,0,0,.5), inset 0 0 0 5px rgba(184,134,11,.1); }
.craps-area { cursor: pointer; border-radius: 11px; padding: 12px 8px; text-align: center; min-height: 74px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); color: var(--text); transition: .15s; }
.craps-area:hover { transform: translateY(-2px); border-color: var(--gold); }
.craps-area.has-bet { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(251,191,36,.14); }
.craps-area.area-pass { grid-column: span 2; }
.craps-area.area-field { grid-column: span 3; }
.ca-label { font-family: 'Orbitron'; font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.ca-hint { font-size: 10.5px; color: var(--text-dim); }
.ca-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 2px; min-height: 16px; }
.ca-active { font-family: 'Orbitron'; font-size: 12px; color: var(--gold); font-weight: 700; }
.ca-pending { font-family: 'Orbitron'; font-size: 12px; color: var(--cyan); font-weight: 700; }
.craps-chiprack { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 4px; }
.chip-select.sel .poker-chip { transform: scale(1.12); box-shadow: 0 0 0 3px var(--gold), 0 5px 14px rgba(0,0,0,.5); }
/* =====================================================================
* LEGAL / COMPLIANCE MODAL
* ===================================================================== */
.legal-modal { width: 100%; max-width: 640px; text-align: left; max-height: 86vh; display: flex; flex-direction: column; padding: 0; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
.legal-head h2 { font-size: 21px; color: var(--gold); }
.legal-close { background: rgba(0,0,0,.3); border: 1px solid var(--border); color: var(--text); width: 34px; height: 34px;
border-radius: 9px; cursor: pointer; font-size: 18px; line-height: 1; flex: none; transition: .15s; }
.legal-close:hover { border-color: var(--red); color: var(--red); }
.legal-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 22px 0; }
.legal-tab { background: rgba(0,0,0,.25); border: 1px solid var(--border); color: var(--text-dim); border-radius: 9px;
padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s; font-family: inherit; }
.legal-tab:hover { color: var(--text); }
.legal-tab.active { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; border-color: var(--purple); }
.legal-body { padding: 16px 22px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: var(--text); }
.legal-body h3 { font-size: 16px; color: var(--cyan); margin: 16px 0 6px; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--text-dim); margin-bottom: 8px; }
.legal-body ul { padding-left: 20px; }
.legal-body strong { color: var(--text); }
.legal-callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin: 4px 0 14px;
background: linear-gradient(90deg, rgba(180,83,9,.22), rgba(251,191,36,.08));
border: 1px solid rgba(251,191,36,.35); color: #f7e9c9; font-size: 13px; line-height: 1.5; }
.legal-callout .pm-dot { margin-top: 5px; }
.legal-foot { padding: 12px 22px 18px; border-top: 1px solid var(--border); }
.legal-meta { font-size: 11.5px; color: var(--text-dim); opacity: .8; }
/* =====================================================================
* LOBBY game-card accents (new games)
* ===================================================================== */
.gc-baccarat { background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(251,191,36,.14)); }
.gc-baccarat:hover { box-shadow: 0 12px 40px rgba(52,211,153,.4); }
.gc-craps { background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(168,85,247,.18)); }
.gc-craps:hover { box-shadow: 0 12px 40px rgba(34,211,238,.4); }
/* =====================================================================
* IMMERSIVE depth — felt rails + lighting on all table games
* ===================================================================== */
.bj-felt, .bac-felt, .craps-felt, .dice-tray, .rl-table {
position: relative; }
.bj-felt::after, .bac-felt::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 3px 12px rgba(255,255,255,.06), inset 0 -8px 26px rgba(0,0,0,.5); }
/* =====================================================================
* RESPONSIVE — slots 5-reel + craps grid + baccarat + legal
* ===================================================================== */
@media (max-width: 620px) {
.slot-mode-select { grid-template-columns: 1fr; }
.reels-5 { gap: 5px; padding: 10px; }
.reels-5 .reel { height: 76px; }
.reels-5 .reel-sym { height: 76px; }
.reels-5 .reel-sym .slot-symbol { width: 38px; height: 38px; }
.bac-hands { flex-direction: column; }
.bac-vs { padding: 4px 0; }
.bac-bets { grid-template-columns: 1fr; }
.die { width: 52px; height: 52px; }
.craps-area.area-pass { grid-column: span 3; }
.legal-tabs { gap: 4px; }
.legal-tab { padding: 6px 9px; font-size: 11.5px; }
}
/* =============================================================================
* THEMED TABLE ENVIRONMENTS — live dealer figure + card shoes
* ========================================================================== */
.croupier { position: relative; width: 150px; max-width: 42%; margin: -8px auto 6px; display: flex;
flex-direction: column; align-items: center; pointer-events: none; filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.croupier-svg { width: 100%; height: auto; display: block; animation: croupier-breathe 5s ease-in-out infinite; }
.croupier-label { font-family: 'Orbitron'; font-size: 10px; letter-spacing: 2px; color: var(--text-dim);
margin-top: -6px; padding: 2px 12px; border: 1px solid var(--border); border-radius: 999px;
background: rgba(0,0,0,.4); text-transform: uppercase; }
@keyframes croupier-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* Card shoe (dealing block) sitting on the felt */
.bj-shoe, .bac-shoe { position: absolute; top: 18px; right: 18px; display: flex; gap: 3px; opacity: .85;
padding: 6px 7px; border-radius: 6px; background: linear-gradient(160deg, #2a1a4a, #140c28);
border: 1px solid var(--border); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); transform: skewX(-8deg); }
.bj-shoe span, .bac-shoe span { width: 7px; height: 38px; border-radius: 2px;
background: repeating-linear-gradient(45deg, #6d28d9, #6d28d9 3px, #4c1d95 3px, #4c1d95 6px); }
.bj-felt, .bac-felt { position: relative; }
/* =============================================================================
* VIDEO POKER — Jacks or Better cabinet
* ========================================================================== */
.vp-cabinet .vp-marquee { background: linear-gradient(180deg, #1a0f30, #0c0720);
border: 1px solid var(--purple); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px;
box-shadow: inset 0 0 26px rgba(168,85,247,.25), 0 0 18px rgba(168,85,247,.2); }
.vp-paytable { width: 100%; border-collapse: collapse; font-size: 13px; }
.vp-paytable td { padding: 4px 8px; }
.vp-pt-name { color: var(--text-dim); }
.vp-pt-x { text-align: right; font-family: 'Orbitron'; color: var(--gold); font-weight: 700; }
.vp-paytable tr { transition: background .2s; }
.vp-paytable tr.lit { background: rgba(251,191,36,.18); border-radius: 6px; }
.vp-paytable tr.lit .vp-pt-name { color: var(--gold-bright); }
.vp-paytable tr.lit .vp-pt-x { text-shadow: var(--shadow-gold); }
.vp-screen { background: radial-gradient(ellipse at 50% 0%, #1d1142, #0b0620);
border: 2px solid var(--cyan); border-radius: 18px; padding: 22px 16px;
box-shadow: var(--shadow-cyan), inset 0 0 40px rgba(0,0,0,.6); }
.vp-cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vp-bay { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.vp-bay.vp-interactive { cursor: pointer; }
.vp-card-slot { width: 66px; height: 92px; display: flex; align-items: center; justify-content: center; }
.vp-card-slot .card-pc { width: 66px; height: 92px; }
.vp-hold-tag { font-family: 'Orbitron'; font-size: 10px; letter-spacing: 1px; color: var(--gold);
background: rgba(251,191,36,.15); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 9px;
opacity: 0; transform: translateY(4px); transition: .18s; }
.vp-bay.held .vp-hold-tag { opacity: 1; transform: translateY(0); }
.vp-bay.held .vp-card-slot .card-pc { box-shadow: 0 0 0 3px var(--gold), 0 6px 16px rgba(0,0,0,.5); transform: translateY(-4px); }
.vp-hold-btn { font-family: 'Orbitron'; font-size: 11px; letter-spacing: 1px; padding: 5px 12px; border-radius: 8px;
border: 1px solid var(--border); background: rgba(0,0,0,.3); color: var(--text-dim); cursor: pointer; transition: .15s; }
.vp-hold-btn:disabled { opacity: .4; cursor: default; }
.vp-bay.held .vp-hold-btn { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #2a1a04; border-color: var(--gold); }
.vp-deal { animation: dealin .3s cubic-bezier(.2,.9,.3,1.2) both; }
.vp-outcome { text-align: center; font-family: 'Orbitron'; font-size: 19px; min-height: 28px; margin-top: 16px; color: var(--text-dim); }
.vp-outcome.win { color: var(--gold); text-shadow: var(--shadow-gold); }
.vp-outcome.lose { color: var(--red); }
.vp-outcome.push { color: var(--cyan); }
/* =============================================================================
* KENO — number parlour
* ========================================================================== */
.keno-parlour .keno-stage { display: flex; gap: 16px; flex-wrap: wrap; }
.keno-board-wrap { flex: 1 1 420px; background: radial-gradient(ellipse at center, #103a2c, #06160f);
border: 2px solid #2f7d5b; border-radius: 18px; padding: 14px; box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 0 18px rgba(45,212,191,.18); }
.keno-board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.keno-cell { aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.3); color: #cfeede; font-family: 'Orbitron'; font-size: 13px; font-weight: 700;
cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; }
.keno-cell:hover { transform: translateY(-2px); border-color: var(--cyan); }
.keno-cell.picked { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #2a1a04;
border-color: var(--gold); box-shadow: var(--shadow-gold); }
.keno-cell.drawn { background: rgba(34,211,238,.22); border-color: var(--cyan); color: #fff; }
.keno-cell.hit { background: radial-gradient(circle at 50% 35%, #fff6c2, var(--gold)); color: #2a1a04;
border-color: #fff; box-shadow: 0 0 14px var(--gold); animation: keno-pop .4s ease; }
@keyframes keno-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.keno-side { flex: 1 1 220px; display: flex; flex-direction: column; gap: 12px; }
.keno-readout { display: flex; gap: 8px; }
.kn-stat { flex: 1; text-align: center; background: rgba(0,0,0,.3); border: 1px solid var(--border);
border-radius: 12px; padding: 10px 6px; }
.kn-stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.kn-stat b { font-family: 'Orbitron'; font-size: 18px; }
.keno-pay { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 12px; padding: 12px; flex: 1; }
.kn-pay-title { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.kn-pay-rows { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.kn-pay-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 4px; border-bottom: 1px dashed rgba(255,255,255,.08); }
.keno-outcome { text-align: center; font-family: 'Orbitron'; font-size: 19px; min-height: 28px; margin: 12px 0; }
.keno-outcome.win { color: var(--gold); text-shadow: var(--shadow-gold); }
.keno-outcome.lose { color: var(--red); }
/* =============================================================================
* LOBBY card accents — new games
* ========================================================================== */
.gc-videopoker { background: linear-gradient(135deg, rgba(244,114,182,.22), rgba(168,85,247,.16)); }
.gc-videopoker:hover { box-shadow: 0 12px 40px rgba(244,114,182,.4); }
.gc-keno { background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(251,191,36,.14)); }
.gc-keno:hover { box-shadow: 0 12px 40px rgba(45,212,191,.4); }
/* =============================================================================
* RESPONSIVE — new environments
* ========================================================================== */
@media (max-width: 620px) {
.croupier { width: 108px; max-width: 50%; }
.croupier-label { font-size: 9px; }
.bj-shoe, .bac-shoe { top: 10px; right: 10px; }
.bj-shoe span, .bac-shoe span { height: 28px; }
.vp-cards { gap: 6px; }
.vp-card-slot, .vp-card-slot .card-pc { width: 54px; height: 76px; }
.vp-hold-btn { padding: 4px 9px; font-size: 10px; }
.vp-paytable td { padding: 3px 5px; font-size: 12px; }
.keno-cell { font-size: 11px; border-radius: 6px; }
.keno-board { gap: 4px; }
.keno-stage { gap: 12px; }
}
/* ===========================================================================
* FEATURE UPDATE — events, combo streak, daily challenges, tournament, VIP,
* Three Card Poker table, and global animation polish.
* ========================================================================= */
/* ---- Global button hover lift (polish) ---- */
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.game-card { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.game-card:hover { transform: translateY(-6px) scale(1.015); }
/* ---- Three Card Poker game card art ---- */
.gc-threecardpoker { background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(52,211,153,.14)); }
.gc-threecardpoker:hover { box-shadow: 0 12px 40px rgba(251,191,36,.4); }
/* ---- Live events banner ---- */
.events-banner { padding: 14px 16px; margin-bottom: 16px; border-radius: 16px; border: 1px solid rgba(251,191,36,.35);
position: relative; overflow: hidden; }
.events-banner::before { content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(251,191,36,.10), transparent); background-size: 200% 100%;
animation: eventSweep 4s linear infinite; pointer-events: none; }
@keyframes eventSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.events-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; position: relative; }
.event-chip { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px;
background: rgba(0,0,0,.35); border: 1px solid var(--evc, var(--gold)); min-width: 200px;
box-shadow: 0 0 14px color-mix(in srgb, var(--evc, #fbbf24) 35%, transparent); animation: eventPulse 2.6s ease-in-out infinite; }
@keyframes eventPulse { 0%,100% { box-shadow: 0 0 10px color-mix(in srgb, var(--evc,#fbbf24) 25%, transparent); }
50% { box-shadow: 0 0 22px color-mix(in srgb, var(--evc,#fbbf24) 55%, transparent); } }
.event-ico { color: var(--evc, var(--gold)); display: inline-flex; }
.event-name { font-family: 'Orbitron'; font-weight: 700; font-size: 14px; color: var(--evc, var(--gold)); }
.event-desc { font-size: 12px; color: var(--text-dim); }
/* ---- Combo / win-streak badge ---- */
.combo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
font-family: 'Orbitron'; font-weight: 700; font-size: 14px; color: var(--cyan);
background: rgba(34,211,238,.12); border: 1px solid var(--cyan); box-shadow: var(--shadow-cyan); }
.combo-badge small { font-family: 'Rajdhani'; font-size: 12px; opacity: .85; }
.combo-badge.on-fire { color: var(--gold-bright); background: rgba(251,191,36,.14); border-color: var(--gold);
box-shadow: 0 0 18px rgba(251,191,36,.6); animation: comboFlame 1.1s ease-in-out infinite; }
@keyframes comboFlame { 0%,100% { transform: scale(1); box-shadow: 0 0 14px rgba(251,191,36,.5); }
50% { transform: scale(1.05); box-shadow: 0 0 26px rgba(251,140,0,.85); } }
/* ---- Lobby side panels (challenges + tournament) ---- */
.lobby-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.lobby-panel { padding: 16px; border-radius: 16px; }
.lp-head { display: flex; align-items: center; justify-content: space-between; font-family: 'Orbitron'; font-weight: 700;
font-size: 15px; margin-bottom: 12px; color: var(--gold); }
.lp-head span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.lp-head .dim { font-family: 'Rajdhani'; font-size: 12px; font-weight: 600; }
/* ---- Daily challenge rows ---- */
.challenge-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
background: rgba(0,0,0,.25); border: 1px solid var(--border); margin-bottom: 8px; transition: .2s; }
.challenge-row.ready { border-color: var(--gold); box-shadow: var(--shadow-gold); animation: chReady 1.8s ease-in-out infinite; }
@keyframes chReady { 0%,100% { box-shadow: 0 0 8px rgba(251,191,36,.4); } 50% { box-shadow: 0 0 18px rgba(251,191,36,.7); } }
.ch-ico { color: var(--cyan); flex: none; display: inline-flex; }
.ch-main { flex: 1; min-width: 0; }
.ch-name { font-family: 'Rajdhani'; font-weight: 700; font-size: 15px; }
.ch-desc { font-size: 12px; }
.ch-bar { height: 7px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.ch-bar span { display: block; height: 100%; border-radius: 6px;
background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ch-side { text-align: right; flex: none; min-width: 84px; }
.ch-reward { font-family: 'Orbitron'; font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.ch-prog-txt { font-family: 'Rajdhani'; font-weight: 700; font-size: 13px; color: var(--text-dim); }
.ch-done { font-family: 'Rajdhani'; font-weight: 700; font-size: 13px; color: var(--green); }
/* ---- Tournament teaser ---- */
.tn-cat { padding: 9px 0; border-bottom: 1px solid var(--border); }
.tn-cat:last-of-type { border-bottom: none; }
.tn-cat-name { font-family: 'Orbitron'; font-weight: 700; font-size: 14px; color: var(--purple-bright); }
.tn-cat-lead { font-size: 13px; margin: 2px 0; }
.tn-cat-rank { font-size: 13px; font-family: 'Rajdhani'; font-weight: 600; }
/* ---- Leaderboard tournament tabs ---- */
.lb-tabs { flex-wrap: wrap; align-items: center; }
.lb-tab-sep { width: 100%; font-family: 'Orbitron'; font-size: 12px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1px; margin: 6px 0 2px; }
.lb-tourn-note { font-size: 13px; margin-bottom: 10px; }
.lb-prize { font-family: 'Orbitron'; font-size: 11px; }
/* ---- VIP club ---- */
.vip-card { border: 1px solid color-mix(in srgb, var(--vip, #fbbf24) 45%, var(--border)); }
.vip-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
font-family: 'Orbitron'; font-weight: 700; font-size: 15px; color: var(--vip, var(--gold));
background: color-mix(in srgb, var(--vip, #fbbf24) 14%, transparent); border: 1px solid var(--vip, var(--gold));
box-shadow: 0 0 16px color-mix(in srgb, var(--vip, #fbbf24) 45%, transparent); }
.vip-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.vip-perk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: 'Rajdhani'; font-weight: 600;
padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid var(--border); color: var(--text); }
.vip-perk .ce-ico { color: var(--vip, var(--gold)); }
.vip-progress { margin: 12px 0 18px; }
.vip-prog-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.vip-prog-bar span { display: block; height: 100%; border-radius: 6px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.vip-ladder { display: flex; justify-content: space-between; gap: 6px; position: relative; }
.vip-ladder::before { content: ''; position: absolute; top: 7px; left: 6%; right: 6%; height: 2px; background: var(--border); }
.vip-step { text-align: center; flex: 1; position: relative; z-index: 1; opacity: .5; transition: .2s; }
.vip-step.reached { opacity: 1; }
.vip-step-dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 6px; background: rgba(0,0,0,.5);
border: 2px solid var(--vip, var(--border)); }
.vip-step.reached .vip-step-dot { background: var(--vip, var(--gold)); box-shadow: 0 0 12px var(--vip, var(--gold)); }
.vip-step.current .vip-step-dot { transform: scale(1.35); animation: vipPulse 1.6s ease-in-out infinite; }
@keyframes vipPulse { 0%,100% { box-shadow: 0 0 8px var(--vip,#fbbf24); } 50% { box-shadow: 0 0 18px var(--vip,#fbbf24); } }
.vip-step-name { font-family: 'Orbitron'; font-weight: 700; font-size: 11px; color: var(--vip, var(--text)); }
.vip-step-lvl { font-size: 10px; }
/* ---- Three Card Poker table ---- */
.tcp-felt { display: grid; grid-template-columns: 180px 1fr; gap: 16px; margin: 14px 0;
background: radial-gradient(ellipse at 50% 30%, rgba(52,211,153,.10), transparent 70%); border-radius: 18px; padding: 14px; }
.tcp-side { display: flex; flex-direction: column; gap: 12px; }
.tcp-paytable { background: rgba(0,0,0,.35); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 12px;
box-shadow: var(--shadow-gold); }
.tcp-pt-title { font-family: 'Orbitron'; font-weight: 700; font-size: 13px; color: var(--gold); text-align: center; margin-bottom: 6px; }
.tcp-paytable table { width: 100%; border-collapse: collapse; }
.tcp-paytable td { padding: 3px 2px; font-family: 'Rajdhani'; font-weight: 600; font-size: 13px; }
.tcp-paytable td:last-child { text-align: right; color: var(--gold-bright); font-family: 'Orbitron'; font-weight: 700; }
.tcp-arena { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 320px; justify-content: center; }
.tcp-hand-row { width: 100%; text-align: center; }
.tcp-hand-label { font-family: 'Orbitron'; font-weight: 700; font-size: 13px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.tcp-qual { font-family: 'Rajdhani'; font-size: 12px; color: var(--cyan); text-transform: none; letter-spacing: 0; }
.tcp-cards { display: flex; gap: 10px; justify-content: center; min-height: 96px; perspective: 1000px; }
.tcp-hand-name { font-family: 'Orbitron'; font-weight: 700; font-size: 15px; color: var(--gold-bright); margin-top: 8px; min-height: 20px; }
.tcp-outcome { font-family: 'Orbitron'; font-weight: 700; font-size: 18px; text-align: center; min-height: 30px;
padding: 6px 0; color: var(--text-dim); }
.tcp-outcome.win { color: var(--gold-bright); text-shadow: 0 0 18px rgba(251,191,36,.7); animation: winpulse .6s ease; }
.tcp-outcome.lose { color: var(--red); }
.tcp-outcome.push { color: var(--cyan); }
.tcp-outcome-main { font-size: 19px; }
.tcp-outcome-sub { font-family: 'Rajdhani'; font-weight: 600; font-size: 13px; color: var(--text-dim); margin-top: 4px; text-shadow: none; }
.tcp-bets { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.tcp-bet-box { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; min-width: 220px; }
.tcp-bet-name { font-family: 'Orbitron'; font-weight: 700; font-size: 13px; color: var(--gold); text-align: center; margin-bottom: 8px; }
.tcp-bet-name .dim { font-family: 'Rajdhani'; font-weight: 500; }
.tcp-actions { display: flex; gap: 12px; justify-content: center; }
.tcp-actions .btn { min-width: 150px; font-size: 17px; padding: 14px; }
@media (max-width: 820px) {
.lobby-panels { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.tcp-felt { grid-template-columns: 1fr; }
.tcp-side { flex-direction: row; }
.tcp-paytable { flex: 1; }
.vip-step-name { font-size: 10px; }
.vip-step-lvl { display: none; }
}
/* =============================================================================
EXPANSION v2 — Shop tabs, Friends, Chat, Mega slots, Blackjack split,
Cosmetic themes, Password reset, Security picker.
============================================================================= */
/* ----- Shop: tabs + cosmetics grid ------------------------------------------ */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; justify-content: center; }
.shop-tab {
font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 0.5px;
padding: 9px 16px; border-radius: 10px; cursor: pointer; color: var(--text-dim);
background: rgba(255,255,255,0.04); border: 1px solid var(--border);
transition: all 0.16s ease;
}
.shop-tab:hover { color: var(--text); border-color: var(--purple); }
.shop-tab.active { color: #2a1c02; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: transparent; }
.shop-body { min-height: 120px; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.cos-card {
border-radius: 16px; padding: 16px 14px; text-align: center;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid var(--border); transition: transform 0.18s ease, border-color 0.18s ease;
}
.cos-card:hover { transform: translateY(-3px); border-color: var(--purple-bright); }
.cos-card.cos-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, var(--shadow-gold); }
.cos-preview { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; }
.cos-name { font-family: 'Orbitron', sans-serif; font-size: 13px; margin-bottom: 4px; }
.cos-rarity { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
.cos-card .btn { width: 100%; }
/* avatar preview: gradient disc */
.cos-prev-avatar { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 34px; font-family: 'Orbitron'; }
/* card-back preview */
.cb-prev { width: 56px; height: 78px; border-radius: 8px; border: 2px solid var(--gold);
background: repeating-linear-gradient(45deg, #6d28d9, #6d28d9 6px, #4c1d95 6px, #4c1d95 12px); }
.cb-prev.cb-royal { background: repeating-linear-gradient(45deg, #7c3aed, #7c3aed 6px, #4c1d95 6px, #4c1d95 12px); border-color: var(--purple-bright); }
.cb-prev.cb-neon { background: repeating-linear-gradient(45deg, #06b6d4, #06b6d4 5px, #0e7490 5px, #0e7490 10px); border-color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,0.6); }
.cb-prev.cb-gold { background: repeating-linear-gradient(45deg, #fbbf24, #fbbf24 5px, #b45309 5px, #b45309 10px); border-color: var(--gold-bright); }
.cb-prev.cb-diamond { background: repeating-conic-gradient(from 45deg, #67e8f9 0deg 20deg, #0891b2 20deg 40deg); border-color: #67e8f9; }
/* theme felt preview */
.cos-felt { width: 100%; height: 100%; border-radius: 12px; box-shadow: inset 0 0 18px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(255,255,255,0.06); }
/* badge preview */
.cos-badge { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-bright);
background: radial-gradient(circle at 35% 30%, rgba(251,191,36,0.25), rgba(168,85,247,0.18)); border: 1px solid rgba(251,191,36,0.4); }
/* ----- Friends -------------------------------------------------------------- */
.friends-search { margin-bottom: 18px; }
.fr-search-row { position: relative; display: flex; align-items: center; }
.fr-search-ico { position: absolute; left: 12px; color: var(--text-dim); pointer-events: none; display: inline-flex; }
.fr-search-row input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 12px; background: rgba(255,255,255,0.05);
border: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani'; font-size: 16px; }
.fr-search-row input:focus { outline: none; border-color: var(--purple); }
.fr-section-title { font-family: 'Orbitron'; font-size: 13px; letter-spacing: 0.5px; color: var(--gold-bright);
margin: 18px 0 10px; text-transform: uppercase; }
.fr-results, .fr-list { display: flex; flex-direction: column; gap: 10px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)); border: 1px solid var(--border); }
.fr-avatar-wrap { position: relative; flex-shrink: 0; }
.fr-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--panel-solid); }
.fr-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.fr-dot.off { background: #555; }
.fr-meta { flex: 1; min-width: 0; }
.fr-name { font-family: 'Orbitron'; font-size: 15px; }
.fr-lvl { font-size: 13px; color: var(--text-dim); }
.fr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fr-tag { font-size: 11px; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.4px; text-transform: uppercase; font-family: 'Orbitron'; }
.fr-tag.ok { color: var(--green); border: 1px solid rgba(52,211,153,0.5); }
.fr-tag.pending { color: var(--gold-bright); border: 1px solid rgba(251,191,36,0.5); }
.fr-tag.blocked { color: var(--red); border: 1px solid rgba(251,113,133,0.5); }
.fr-block { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.fr-block:hover { color: var(--red); }
.fr-empty { text-align: center; color: var(--text-dim); padding: 22px; font-style: italic; }
.nav-badge, .fr-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; font-family: 'Orbitron'; margin-left: 6px; }
/* ----- Chat ----------------------------------------------------------------- */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
border: none; cursor: pointer; display: grid; place-items: center; color: #2a1c02;
background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: var(--shadow-gold); transition: transform 0.18s ease; }
.chat-fab:hover { transform: scale(1.07); }
.chat-fab-ico { display: inline-flex; }
.chat-fab-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
background: var(--red); color: #fff; font-size: 11px; font-weight: 700; font-family: 'Orbitron'; display: grid; place-items: center; border: 2px solid var(--bg-0); }
.chat-panel { position: fixed; right: 22px; bottom: 92px; z-index: 60; width: 340px; max-width: calc(100vw - 32px);
height: 480px; max-height: calc(100vh - 130px); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.chat-panel.hidden { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(168,85,247,0.16), transparent); }
.chat-title { font-family: 'Orbitron'; font-size: 15px; flex: 1; }
.chat-back, .chat-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; display: inline-flex; }
.chat-back:hover, .chat-x:hover { color: var(--text); }
.chat-friend-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-friend { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer;
background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: all 0.15s; }
.chat-friend:hover { background: rgba(168,85,247,0.12); border-color: var(--border); }
.chat-friend .fr-name { font-size: 14px; }
.chat-empty { text-align: center; color: var(--text-dim); padding: 26px 16px; font-style: italic; }
.chat-peer { display: flex; align-items: center; gap: 8px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 78%; display: flex; flex-direction: column; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; word-break: break-word; }
.chat-msg.mine .chat-bubble { background: linear-gradient(135deg, var(--purple-bright), var(--purple)); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs .chat-bubble { background: rgba(255,255,255,0.07); color: var(--text); border-bottom-left-radius: 4px; }
/* Fase 7: table invite card rendered inline in the conversation */
.chat-invite-card { display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px; border-radius: 14px; min-width: 180px;
background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(168,85,247,.18));
border: 1px solid rgba(251,191,36,.4); }
.chat-invite-card .cic-head { font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--gold); }
.chat-invite-card .cic-game { text-transform: capitalize; font-weight: 600; }
.chat-invite-card code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; }
.chat-invite-card .cic-join { margin-top: 4px; align-self: flex-start; }
.chat-time { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.chat-typing { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 0 14px 6px; min-height: 18px; }
.chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-input-row input { flex: 1; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.05);
border: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani'; font-size: 15px; }
.chat-input-row input:focus { outline: none; border-color: var(--purple); }
.chat-send { border: none; cursor: pointer; width: 42px; border-radius: 12px; display: grid; place-items: center; color: #2a1c02;
background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.chat-send:disabled { opacity: 0.5; cursor: default; }
/* ----- Mega Slots (5x5) ----------------------------------------------------- */
.mega-cabinet { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 16px; border-radius: 18px;
background: radial-gradient(ellipse at center, #221340, #0d0720); border: 2px solid var(--gold);
box-shadow: inset 0 0 30px rgba(0,0,0,0.6), var(--shadow-gold); width: min(100%, 460px); }
.mega-cell { aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center;
background: linear-gradient(160deg, #2a1850, #1a0f30); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; position: relative; }
.mega-cell .slot-symbol { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; line-height: 0; }
.mega-cell svg, .mega-cell img { width: 72%; height: 72%; display: block; }
.mega-cell.cell-land { animation: megaLand 0.32s cubic-bezier(.2,.9,.3,1.3) both; }
.mega-cell.win { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, var(--shadow-gold); background: linear-gradient(160deg, #3a2860, #241540); }
@keyframes megaLand { 0% { transform: translateY(-22px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mega-buy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; cursor: pointer;
font-family: 'Orbitron'; font-size: 14px; color: #2a1c02; border: none;
background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: var(--shadow-gold); }
.mega-buy-btn:hover:not(:disabled) { filter: brightness(1.08); }
.mega-buy-btn:disabled { opacity: 0.5; cursor: default; }
.freespin-modal { text-align: center; max-width: 420px; }
.freespin-modal h2 { font-family: 'Orbitron'; color: var(--gold-bright); margin-bottom: 12px; }
.fs-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.fs-table th, .fs-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: center; }
.fs-table th { color: var(--gold-bright); font-family: 'Orbitron'; font-size: 12px; }
.fs-total { font-family: 'Orbitron'; font-size: 20px; color: var(--green); margin-top: 10px; }
/* Live free-spins counter overlay shown above the grid during playback */
.fs-counter { display: none; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 10px; padding: 8px 16px; border-radius: 12px; font-family: 'Orbitron';
background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(251,191,36,0.18));
border: 1px solid var(--gold); box-shadow: var(--shadow-gold); animation: fsPulse 1.4s ease-in-out infinite; }
.fs-counter.show { display: flex; }
.fs-c-label { font-size: 12px; letter-spacing: 1.5px; color: var(--gold-bright); }
.fs-c-num { font-size: 18px; color: #fff; }
.fs-c-total { font-size: 15px; color: var(--green); }
@keyframes fsPulse { 0%,100% { box-shadow: 0 0 12px rgba(251,191,36,0.4); } 50% { box-shadow: 0 0 26px rgba(251,191,36,0.8); } }
/* ----- Free Spins control bar (sequential playback) ------------------------- */
.fs-bar { display: none; flex-direction: column; gap: 8px; width: min(100%, 460px);
margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; font-family: 'Orbitron';
background: linear-gradient(135deg, rgba(168,85,247,0.28), rgba(251,191,36,0.20));
border: 1px solid var(--gold); box-shadow: var(--shadow-gold);
animation: fsPulse 1.6s ease-in-out infinite; }
.fs-bar.show { display: flex; }
.fs-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fs-bar-title { font-size: 14px; letter-spacing: 2px; color: var(--gold-bright); }
.fs-bar-mult { font-size: 11px; letter-spacing: 1px; color: #2a1c02; padding: 3px 9px; border-radius: 999px;
background: linear-gradient(135deg, var(--gold-bright), var(--gold)); animation: multBadgePulse 1.2s ease-in-out infinite; }
@keyframes multBadgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.fs-bar-stats { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 15px; color: #fff; }
.fs-bar-sep { color: var(--border); }
.fs-bar-total b { font-size: 17px; }
.fs-bar-total b.counting { color: var(--green); text-shadow: 0 0 10px rgba(16,185,129,0.7); }
.fs-bar-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fs-bar-controls .btn-sm { padding: 6px 12px; font-size: 12px; }
#fs-next.ready { animation: chReady 1s ease-in-out infinite; }
#fs-next:disabled { opacity: 0.4; cursor: default; }
#fs-auto.on { border-color: var(--green); color: var(--green); }
.fs-speed { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.fs-speed-btn { background: transparent; border: none; color: var(--text-dim); font-family: 'Orbitron';
font-size: 11px; padding: 6px 10px; cursor: pointer; transition: all 0.15s ease; }
.fs-speed-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.fs-speed-btn.active { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #2a1c02; }
/* Premium "bonus mode" treatment on the cabinet during free spins. */
.slot-cabinet.bonus-mode { position: relative; }
.slot-cabinet.bonus-mode .mega-grid { border-color: var(--gold-bright);
box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 34px rgba(251,191,36,0.65); animation: bonusGlow 1.8s ease-in-out infinite; }
@keyframes bonusGlow { 0%,100% { box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 24px rgba(251,191,36,0.5); }
50% { box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 44px rgba(251,191,36,0.9); } }
/* Completion modal breakdown line. */
.fs-complete .fs-breakdown { font-family: 'Orbitron'; font-size: 12px; letter-spacing: 1px;
color: var(--gold-bright); margin: 4px 0 6px; }
/* ----- Blackjack split ------------------------------------------------------ */
.bj-split-hands { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.bj-split-hand { padding: 10px 12px; border-radius: 14px; border: 2px solid transparent; transition: all 0.2s ease;
background: rgba(0,0,0,0.18); min-width: 130px; }
.bj-split-hand.active { border-color: var(--gold); box-shadow: var(--shadow-gold); background: rgba(251,191,36,0.08); }
.bj-split-hand.bust { opacity: 0.6; }
.bj-split-meta { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 8px; }
.bj-split-tag { font-family: 'Orbitron'; font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; }
.bj-split-val { font-family: 'Orbitron'; font-size: 15px; color: var(--gold-bright); }
.bj-split-cards { display: flex; gap: 5px; justify-content: center; }
.bj-split-cards .card-pc { width: 50px; height: 70px; }
.bj-split-bet { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: 6px; font-family: 'Orbitron'; }
.bj-hand-oc { font-family: 'Orbitron'; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.bj-hand-oc.win { color: var(--green); border: 1px solid rgba(52,211,153,0.6); }
.bj-hand-oc.lose { color: var(--red); border: 1px solid rgba(251,113,133,0.6); }
.bj-hand-oc.push { color: var(--text-dim); border: 1px solid var(--border); }
/* ----- Password reset modal ------------------------------------------------- */
.pw-reset { max-width: 420px; }
.pw-head { text-align: center; margin-bottom: 18px; }
.pw-title { font-family: 'Orbitron'; font-size: 20px; color: var(--gold-bright); margin-bottom: 6px; }
.pw-sub { color: var(--text-dim); font-size: 14px; }
.pw-question { background: rgba(168,85,247,0.1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
margin-bottom: 14px; font-size: 15px; }
.pw-reset .input, .pw-reset input { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.05);
border: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani'; font-size: 16px; margin-bottom: 12px; }
.pw-reset input:focus { outline: none; border-color: var(--purple); }
.pw-error { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; text-align: center; }
.pw-next { width: 100%; }
.pw-token { font-family: 'Orbitron'; color: var(--gold-bright); word-break: break-all; }
/* ----- Security question picker (auth) -------------------------------------- */
.security-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.security-picker.hidden { display: none; }
.security-picker .picker-label { font-size: 12px; color: var(--text-dim); }
.security-picker select, .security-picker input { width: 100%; padding: 11px 13px; border-radius: 11px;
background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani'; font-size: 15px; }
.security-picker select:focus, .security-picker input:focus { outline: none; border-color: var(--purple); }
/* ----- Legal helplines list ------------------------------------------------- */
.legal-helplines { margin: 10px 0; padding-left: 18px; }
.legal-helplines li { margin-bottom: 8px; line-height: 1.5; }
/* ----- Cosmetic THEMES (table felt overrides via body class) ---------------- */
body.theme-midnight .bj-felt,
body.theme-midnight .bac-felt,
body.theme-midnight .craps-felt,
body.theme-midnight .tcp-felt,
body.theme-midnight .rl-table { background-image: radial-gradient(ellipse at center, #16335c, #0b1f3a) !important; }
body.theme-emerald .bj-felt,
body.theme-emerald .bac-felt,
body.theme-emerald .craps-felt,
body.theme-emerald .tcp-felt,
body.theme-emerald .rl-table { background-image: radial-gradient(ellipse at center, #114a31, #0a2e1f) !important; }
body.theme-ruby .bj-felt,
body.theme-ruby .bac-felt,
body.theme-ruby .craps-felt,
body.theme-ruby .tcp-felt,
body.theme-ruby .rl-table { background-image: radial-gradient(ellipse at center, #5e1320, #3a0b14) !important; }
/* ----- Cosmetic CARD BACKS (override .card-pc.back via body class) ---------- */
body.cb-royal .card-pc.back { background: repeating-linear-gradient(45deg, #7c3aed, #7c3aed 6px, #4c1d95 6px, #4c1d95 12px); border-color: var(--purple-bright); }
body.cb-neon .card-pc.back { background: repeating-linear-gradient(45deg, #06b6d4, #06b6d4 5px, #0e7490 5px, #0e7490 10px); border-color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,0.6); }
body.cb-gold .card-pc.back { background: repeating-linear-gradient(45deg, #fbbf24, #fbbf24 5px, #b45309 5px, #b45309 10px); border-color: var(--gold-bright); }
body.cb-diamond .card-pc.back { background: repeating-conic-gradient(from 45deg, #67e8f9 0deg 20deg, #0891b2 20deg 40deg); border-color: #67e8f9; }
/* ----- Fase 11: new table themes (felt overrides) ----- */
body.theme-obsidian .bj-felt, body.theme-obsidian .bac-felt, body.theme-obsidian .craps-felt,
body.theme-obsidian .tcp-felt, body.theme-obsidian .rl-table { background-image: radial-gradient(ellipse at center, #14141f, #0a0a14) !important; }
body.theme-sunset .bj-felt, body.theme-sunset .bac-felt, body.theme-sunset .craps-felt,
body.theme-sunset .tcp-felt, body.theme-sunset .rl-table { background-image: radial-gradient(ellipse at center, #8b2e10, #3a0e02) !important; }
body.theme-arctic .bj-felt, body.theme-arctic .bac-felt, body.theme-arctic .craps-felt,
body.theme-arctic .tcp-felt, body.theme-arctic .rl-table { background-image: radial-gradient(ellipse at center, #145a72, #06222e) !important; }
body.theme-sand .bj-felt, body.theme-sand .bac-felt, body.theme-sand .craps-felt,
body.theme-sand .tcp-felt, body.theme-sand .rl-table { background-image: radial-gradient(ellipse at center, #8a5a22, #3d2208) !important; }
body.theme-royal .bj-felt, body.theme-royal .bac-felt, body.theme-royal .craps-felt,
body.theme-royal .tcp-felt, body.theme-royal .rl-table { background-image: radial-gradient(ellipse at center, #4b1d80, #1d0738) !important; }
body.theme-jungle .bj-felt, body.theme-jungle .bac-felt, body.theme-jungle .craps-felt,
body.theme-jungle .tcp-felt, body.theme-jungle .rl-table { background-image: radial-gradient(ellipse at center, #135a26, #08280f) !important; }
body.theme-apex .bj-felt, body.theme-apex .bac-felt, body.theme-apex .craps-felt,
body.theme-apex .tcp-felt, body.theme-apex .rl-table { background-image: radial-gradient(ellipse at center, #2a2a3e, #0a0a18) !important; }
/* ----- Fase 11: new card backs ----- */
body.cb-emerald .card-pc.back { background: repeating-linear-gradient(45deg, #10b981, #10b981 5px, #065f46 5px, #065f46 10px); border-color: #34d399; }
body.cb-ruby .card-pc.back { background: repeating-conic-gradient(from 0deg, #ef4444 0deg 15deg, #7f1d1d 15deg 30deg); border-color: #fca5a5; }
body.cb-ocean .card-pc.back { background: linear-gradient(135deg, #0e7490, #075985, #1e3a8a); border-color: #67e8f9; }
body.cb-skull .card-pc.back { background: radial-gradient(circle at 50% 50%, #1f2937, #0a0a14); border-color: #e5e7eb; }
body.cb-circuit .card-pc.back { background: repeating-linear-gradient(90deg, #1e1b4b, #1e1b4b 4px, #22d3ee 4px, #22d3ee 5px); border-color: #67e8f9; }
body.cb-sunset .card-pc.back { background: linear-gradient(180deg, #fbbf24, #ea580c, #7c2d12); border-color: #fde047; }
body.cb-void .card-pc.back { background: radial-gradient(circle at 30% 30%, #1c1917, #000); border-color: #6b7280; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
body.cb-prism .card-pc.back { background: conic-gradient(from 0deg, #ef4444, #fbbf24, #22d3ee, #a855f7, #ef4444); border-color: #fff; }
@media (max-width: 560px) {
.chat-panel { right: 8px; left: 8px; width: auto; }
.cos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* =============================================================
* Fase 9 — Mobile UX refinements
* - dvh-based heights so mobile browser chrome doesn't crop content
* - sticky action bars at the bottom of game shells
* - 44px minimum tap targets on actionable controls
* - compact bet boards + horizontally scrollable chip trays
* ============================================================= */
@media (max-width: 640px) {
/* Use dvh so 100% of the visible viewport is honoured even when the address
bar shows/hides on scroll. Older browsers fall back to vh. */
.view-root { min-height: 100vh; min-height: 100dvh; padding-bottom: 96px; }
/* Touch targets — every actionable button at least 44x44px. */
.btn, .nav-btn, .chip-btn, .ho-card, [data-bet], .chip-select,
.chat-friend, .nav-btn .nav-ico-svg { min-height: 44px; }
.btn-sm { min-height: 38px; }
/* Chip selector trays: horizontal scroll on small screens so a 7-denom tray
never wraps to two rows and steals vertical space. */
.chip-tray, .roulette-chips, .craps-chips, .chip-selector {
display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.chip-tray > *, .roulette-chips > *, .craps-chips > * { scroll-snap-align: start; flex-shrink: 0; }
/* Sticky action bar at the bottom of every game shell so primary controls
stay reachable without scrolling. Sits above the global bottom nav. */
.game-shell .actions, .ho-actions, .craps-controls, .bj-actions, .vp-actions {
position: sticky; bottom: 78px; z-index: 5;
background: rgba(8, 8, 16, 0.86); backdrop-filter: blur(6px);
padding: 10px; border-radius: 12px;
border: 1px solid var(--border);
}
/* Bet board compaction — let labels wrap instead of pushing layout wide. */
[data-bet] { font-size: 12px; padding: 6px 4px; line-height: 1.15; }
/* Hold'em table: cards smaller so all seats fit without scroll. */
.ho-card { width: 32px; height: 46px; font-size: 12px; }
.ho-seats { grid-template-columns: repeat(2, 1fr); }
/* Header HUD lighter on mobile so it doesn't eat vertical real estate. */
.hud { padding: 8px 12px; }
.hud .level-title { display: none; }
/* Modal full-width on small screens (more readable). */
.modal-card { width: calc(100vw - 28px); max-width: 100%; }
}
/* Very narrow phones (iPhone SE ≈ 375px): drop nav text labels, keep icons. */
@media (max-width: 380px) {
.nav-btn span:not(.nav-ico-svg):not(.nav-badge) { display: none; }
.game-shell { padding: 12px; }
}
/* ============================ Fase 12: ENDGAME ============================ */
.vault-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vault-card { padding: 18px; text-align: center; }
.vault-balance { font-family: 'Orbitron', sans-serif; font-size: 32px; line-height: 1.2; margin: 6px 0; }
.vault-info { margin-top: 14px; padding: 14px 18px; }
.vault-info-list { list-style: disc; padding-left: 20px; line-height: 1.7; font-size: 13px; }
.vault-info-list b { color: var(--gold); }
.lottery-hero { padding: 24px; text-align: center; margin-bottom: 14px; background: radial-gradient(ellipse at center, rgba(251,191,36,.18), transparent 65%); }
.lottery-jackpot { font-family: 'Orbitron', sans-serif; font-size: 44px; line-height: 1.2; margin-top: 6px; text-shadow: 0 0 18px rgba(251,191,36,.4); }
.lottery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.lottery-card { padding: 16px; text-align: center; }
.lottery-recent { padding: 12px 16px; }
.lottery-recent-list { display: flex; flex-direction: column; gap: 6px; }
.lottery-recent-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.03); font-size: 13px; }
.prestige-stars { font-family: 'Orbitron', sans-serif; font-size: 18px; color: var(--gold); letter-spacing: 2px; }
.hr-card.hr-on { background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(34,211,238,.04)); border-color: rgba(168,85,247,.4); }
.mastery-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mastery-row { display: grid; grid-template-columns: 130px 1fr 220px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.03); }
.mastery-label { font-weight: 600; font-size: 13px; }
.mastery-bar { background: rgba(255,255,255,.08); height: 6px; border-radius: 3px; overflow: hidden; }
.mastery-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.mastery-meta { font-size: 11px; text-align: right; }
@media (max-width: 640px) {
.mastery-row { grid-template-columns: 1fr; gap: 4px; }
.mastery-meta { text-align: left; }
}