/* IGAXMING CASINO β€” Stake-inspired ultramodern theme (2026) */ :root { --cyan: #00E5FF; --cyan-dim: #00C8FF; --blue: #1A65F6; --gold: #F7931A; --gold-dim: #FF7A00; --green: #00D084; --green-deep: #00A86B; --red: #FF4D4D; --red-dim: #C82E3A; --bg: #0B1020; --bg-1: #111622; --bg-2: #171A2B; --bg-3: #233152; --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.12); --text: #EEEEF0; --text-dim: #9DA0A5; --text-muted: #565A64; color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); color-scheme: dark; -webkit-font-smoothing: antialiased; } body { background: radial-gradient(ellipse at 12% 0%, rgba(0, 229, 255, 0.07), transparent 55%), radial-gradient(ellipse at 88% 8%, rgba(247, 147, 26, 0.05), transparent 45%), var(--bg); color: var(--text); font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; } [dir="rtl"] body { direction: rtl; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } ::-webkit-scrollbar-track { background: transparent; } /* Gradient text */ .text-grad { background: linear-gradient(110deg, var(--cyan), var(--green) 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-grad-cyan { background: linear-gradient(180deg, var(--cyan), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-grad-gold { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-grad-win { background: linear-gradient(180deg, var(--green), #00FF99); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Layout */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } @media (max-width: 900px) { .app { grid-template-columns: 1fr !important; } /* Prevent flex/grid children from inflating beyond the viewport */ .app > main, .app > .main, main.main { min-width: 0; max-width: 100vw; overflow-x: hidden; padding-left: 10px; padding-right: 10px; } .topbar { max-width: 100vw; } .dice-layout, .dice-control, aside.card-strong { min-width: 0; max-width: 100%; box-sizing: border-box; } aside.sidebar { position: fixed !important; top: 0; left: 0; width: 270px; max-width: 80vw; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 50; box-shadow: 4px 0 20px rgba(0,0,0,0.5); } aside.sidebar.open { transform: translateX(0); } aside.sidebar.open::after { content: ''; position: fixed; top: 0; left: 270px; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: -1; } } *, *::before, *::after { box-sizing: border-box; } /* `overflow-x: hidden` on body breaks `position: sticky` for the sidebar because it creates a scroll-containing block. Use `overflow-x: clip` so we still suppress accidental horizontal scroll but keep sticky working. */ html, body { overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* Sidebar */ .sidebar { background: linear-gradient(180deg, rgba(17, 22, 34,0.96), rgba(11, 16, 32,0.96)); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; backdrop-filter: blur(12px); display: flex; flex-direction: column; width: 240px; transition: width 0.22s ease; } [dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); } /* Sidebar head β€” same 64px height as topbar so they sit on the same baseline */ .sidebar-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-decoration: none; } .sidebar-brand-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--cyan), var(--blue)); display: grid; place-items: center; box-shadow: 0 0 16px rgba(0, 229, 255, 0.4); font-weight: 800; color: #000; font-size: 13px; flex-shrink: 0; } .sidebar-brand-text { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; white-space: nowrap; transition: opacity 0.18s ease; } .sidebar-toggle { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, transform 0.22s; font-size: 11px; } .sidebar-toggle:hover { background: rgba(0, 229, 255,0.12); color: var(--cyan); border-color: rgba(0, 229, 255,0.3); } .sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); } .sidebar-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); padding: 14px 10px 8px; white-space: nowrap; overflow: hidden; transition: opacity 0.18s; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text-dim); font-size: 13px; font-weight: 500; transition: 0.15s; white-space: nowrap; position: relative; } .sidebar-link i { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; } .sidebar-link:hover { background: rgba(255,255,255,0.04); color: var(--text); } .sidebar-link.active { background: linear-gradient(90deg, rgba(0, 229, 255,0.12), rgba(0, 229, 255,0.02)); color: var(--cyan); border: 1px solid rgba(0, 229, 255,0.25); box-shadow: inset 0 0 20px rgba(0, 229, 255,0.08); } .sidebar-live { padding: 18px 10px; margin-top: 18px; border-top: 1px solid var(--line); } .sidebar-live-stats { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-muted); transition: opacity 0.18s; } /* ====== Collapsed (icon-only) state (desktop) ====== */ .sidebar[data-collapsed="true"] { width: 68px; } .sidebar[data-collapsed="true"] .sidebar-brand-text, .sidebar[data-collapsed="true"] .sidebar-text, .sidebar[data-collapsed="true"] .sidebar-section, .sidebar[data-collapsed="true"] .sidebar-live-stats { opacity: 0; pointer-events: none; height: 0; padding: 0; margin: 0; } .sidebar[data-collapsed="true"] .sidebar-section { padding: 6px 0; } .sidebar[data-collapsed="true"] .sidebar-link { justify-content: center; padding: 11px 0; } .sidebar[data-collapsed="true"] .sidebar-link i { width: auto; font-size: 16px; } .sidebar[data-collapsed="true"] .sidebar-toggle i { transform: rotate(180deg); } .sidebar[data-collapsed="true"] .sidebar-live { padding: 8px 0; } /* Tooltip on hover when collapsed */ .sidebar[data-collapsed="true"] .sidebar-link:hover::after { content: attr(data-tip); position: absolute; left: 100%; top: 50%; transform: translate(8px, -50%); background: rgba(17, 22, 34,0.98); border: 1px solid var(--line); color: var(--text); font-size: 12px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 60; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } /* Adjust the grid column when collapsed (desktop) */ .app:has(.sidebar[data-collapsed="true"]) { grid-template-columns: 68px 1fr; } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; background: rgba(11, 16, 32, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .topbar-search { flex: 1; max-width: 380px; position: relative; } .topbar-search input { width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--text); font-size: 13px; outline: none; } .topbar-search input:focus { border-color: rgba(0, 229, 255, 0.4); background: rgba(255,255,255,0.06); } .topbar-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; } .balance-pill { display: flex; align-items: center; gap: 0; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); overflow: hidden; } .balance-pill .currency-tab { display: flex; align-items: center; gap: 7px; padding: 0 12px; height: 100%; font-weight: 700; font-size: 13px; cursor: pointer; } .balance-pill .amount { padding: 0 12px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; color: var(--text); } .balance-pill .deposit-btn { height: 100%; padding: 0 14px; background: linear-gradient(180deg, var(--green), var(--green-deep)); color: #001a14; font-weight: 700; font-size: 12px; transition: 0.15s; } .balance-pill .deposit-btn:hover { filter: brightness(1.1); } .user-pill { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); font-size: 13px; } .avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--gold)); display: grid; place-items: center; color: #000; font-weight: 700; font-size: 11px; } /* Main content */ .main { padding: 24px; max-width: 1500px; margin: 0 auto; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; font-weight: 600; font-size: 13px; transition: 0.15s; } .btn-primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #1A2035; box-shadow: 0 4px 16px rgba(0, 229, 255, 0.25); } .btn-primary:hover { box-shadow: 0 4px 24px rgba(0, 229, 255, 0.45); transform: translateY(-1px); } .btn-win { background: linear-gradient(135deg, var(--green), #00FF99); color: #001a14; box-shadow: 0 4px 24px rgba(0, 208, 132, 0.45); } .btn-win:hover { transform: translateY(-1px); box-shadow: 0 6px 32px rgba(0, 208, 132, 0.7); } .btn-ghost { background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--text); } .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* Cards */ .card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--line); border-radius: 16px; } .card-strong { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid var(--line-strong); border-radius: 18px; } /* Inputs (Stake-style) */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; } .field-input, input.field-input, select.field-input { width: 100%; height: 42px; padding: 0 14px; background: rgba(255,255,255,0.04) !important; border: 1px solid var(--line) !important; border-radius: 10px; color: var(--text) !important; font: 600 14px 'JetBrains Mono', monospace; outline: none; -webkit-text-fill-color: var(--text); caret-color: var(--cyan); appearance: none; -webkit-appearance: none; transition: border 0.15s, background 0.15s; } .field-input:focus { border-color: rgba(0, 229, 255,0.5) !important; background: rgba(255,255,255,0.06) !important; } .field-input::placeholder { color: var(--text-muted); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px rgba(11, 16, 32,0.96) inset !important; caret-color: var(--cyan) !important; } .field-suffix-input { position: relative; } /* CRYPTO ICON AS PREFIX (left of the number) β€” Stake/Rainbet style */ .field-suffix-input .prefix-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; pointer-events: none; z-index: 2; } .field-suffix-input .prefix-icon img, .field-suffix-input .prefix-icon .crypto-icon { width: 22px; height: 22px; border-radius: 50%; padding: 1px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); flex-shrink: 0; } [dir="rtl"] .field-suffix-input .prefix-icon { left: auto; right: 12px; } .field-suffix-input input.field-input { padding-left: 44px; padding-right: 96px; } [dir="rtl"] .field-suffix-input input.field-input { padding-left: 96px; padding-right: 44px; } .field-suffix-input input.field-input.no-suffix-btns { padding-right: 44px; } .field-suffix-input .suffix { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; align-items: center; } [dir="rtl"] .field-suffix-input .suffix { right: auto; left: 8px; } .suffix-btn { padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--text-dim); transition: 0.15s; } .suffix-btn:hover { background: rgba(0, 229, 255, 0.12); color: var(--cyan); border-color: rgba(0, 229, 255, 0.3); } /* Hero */ .hero { position: relative; padding: 40px 32px; border-radius: 24px; background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(247, 147, 26, 0.06)); border: 1px solid var(--line); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(0, 229, 255, 0.15), transparent 50%), radial-gradient(circle at 30% 80%, rgba(0, 208, 132, 0.1), transparent 50%); pointer-events: none; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); font-size: 11px; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; } .hero h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; } .hero p { color: var(--text-dim); max-width: 540px; margin-bottom: 24px; } /* Game cards */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .game-card { aspect-ratio: 3 / 4; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; } .game-card:hover { border-color: rgba(0, 229, 255, 0.4); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 229, 255, 0.2); } .game-card-bg { position: absolute; inset: 0; opacity: 0.95; transition: 0.3s; } .game-card:hover .game-card-bg { transform: scale(1.05); opacity: 1; } .game-card-badge { position: absolute; top: 12px; left: 12px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } [dir="rtl"] .game-card-badge { left: auto; right: 12px; } .badge-hot { background: var(--red); color: #fff; } .badge-new { background: var(--green); color: #001a14; } .badge-soon { background: rgba(255,255,255,0.15); color: var(--text-dim); border: 1px solid var(--line); } .game-card-name { position: relative; z-index: 2; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; } .game-card-meta { position: relative; z-index: 2; font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; } /* Game backgrounds (CSS-only artwork β€” no external assets) */ .gbg-dice { background: radial-gradient(circle at 30% 30%, rgba(0, 229, 255, 0.6), transparent 50%), radial-gradient(circle at 70% 70%, rgba(26, 101, 246, 0.5), transparent 50%), linear-gradient(135deg, #1A2035, #000510); } .gbg-dice::after { content: '🎲'; position: absolute; right: -10px; bottom: -10px; font-size: 140px; opacity: 0.3; transform: rotate(-15deg); } .gbg-crash { background: radial-gradient(circle at 80% 80%, rgba(247, 147, 26, 0.6), transparent 50%), linear-gradient(135deg, #2a1500, #000); } .gbg-crash::after { content: 'πŸš€'; position: absolute; right: -20px; bottom: -20px; font-size: 140px; opacity: 0.35; transform: rotate(-25deg); } .gbg-coinflip { background: radial-gradient(circle at 50% 30%, rgba(247, 147, 26, 0.5), transparent 60%), linear-gradient(135deg, #1a0f00, #050000); } .gbg-coinflip::after { content: 'πŸͺ™'; position: absolute; right: -10px; bottom: -10px; font-size: 130px; opacity: 0.35; } .gbg-mines { background: radial-gradient(circle at 30% 70%, rgba(255, 77, 77, 0.45), transparent 50%), linear-gradient(135deg, #1a0010, #050003); } .gbg-mines::after { content: 'πŸ’£'; position: absolute; right: -10px; bottom: -10px; font-size: 130px; opacity: 0.35; } .gbg-plinko { background: radial-gradient(circle at 50% 30%, rgba(0, 208, 132, 0.4), transparent 50%), linear-gradient(135deg, #002518, #000); } .gbg-plinko::after { content: '🟒'; position: absolute; right: -10px; bottom: -10px; font-size: 130px; opacity: 0.35; } /* Live bets table */ .bets-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: 'JetBrains Mono', monospace; } .bets-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); } [dir="rtl"] .bets-table th { text-align: right; } .bets-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-dim); } .bets-table tr:hover td { background: rgba(255,255,255,0.02); color: var(--text); } .win-color { color: var(--green); } .loss-color { color: var(--red); } /* DICE GAME */ .dice-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: stretch; } @media (max-width: 1024px) { /* Mobile UX (Stake/Rainbet style): GAME CANVAS first (top), bet panel BELOW. Using flex with explicit order guarantees source-order-independent stacking. */ .dice-layout { display: flex; flex-direction: column; gap: 14px; } .dice-layout > section { order: 1; } .dice-layout > aside.dice-control { order: 2; } } .dice-control { padding: 22px; } .dice-canvas { padding: 32px; display: flex; flex-direction: column; justify-content: center; min-height: 480px; position: relative; } .dice-mode-tabs { display: flex; gap: 0; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 10px; margin-bottom: 18px; } .dice-mode-tabs button { flex: 1; height: 36px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-dim); } .dice-mode-tabs button.active { background: rgba(255,255,255,0.08); color: var(--text); } .dice-result-display { text-align: center; margin-bottom: 28px; } .dice-result-num { font: 800 84px 'JetBrains Mono', monospace; line-height: 1; letter-spacing: -0.04em; } .dice-result-num.win { color: var(--green); text-shadow: 0 0 32px rgba(0, 208, 132, 0.5); } .dice-result-num.loss { color: var(--red); } .dice-result-num.idle { color: var(--text-dim); opacity: 0.6; } .dice-slider-wrap { padding: 16px 24px 32px; position: relative; } .dice-slider-track { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--red) 0%, var(--red) var(--target,50%), var(--green) var(--target,50%), var(--green) 100%); } .dice-slider-track.under { background: linear-gradient(90deg, var(--green) 0%, var(--green) var(--target,50%), var(--red) var(--target,50%), var(--red) 100%); } .dice-slider-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--blue)); border: 4px solid var(--bg); box-shadow: 0 4px 16px rgba(0, 229, 255, 0.5); cursor: grab; display: grid; place-items: center; color: #1A2035; font-weight: 800; font-size: 11px; } .dice-slider-thumb:active { cursor: grabbing; } .dice-slider-roll-marker { position: absolute; top: -4px; width: 4px; height: 20px; background: #fff; border-radius: 2px; box-shadow: 0 0 12px #fff, 0 0 24px var(--cyan); transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translateX(-50%); } .dice-slider-ticks { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .dice-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; } .dice-stat { padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; text-align: center; } .dice-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .dice-stat-value { font: 700 16px 'JetBrains Mono', monospace; color: var(--text); } .dice-stat-value.cyan { color: var(--cyan); } .dice-history-row { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 5px 10px; border-radius: 6px; font: 700 11px 'JetBrains Mono', monospace; } .dice-history-row.win { background: rgba(0, 208, 132, 0.12); color: var(--green); } .dice-history-row.loss { background: rgba(255, 77, 77, 0.12); color: var(--red); } /* Provably fair drawer */ .pf-drawer { margin-top: 18px; padding: 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; } .pf-drawer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 10px; } .pf-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; gap: 8px; } .pf-row code { font: 600 11px 'JetBrains Mono', monospace; color: var(--cyan); background: rgba(0, 229, 255, 0.08); padding: 2px 6px; border-radius: 4px; word-break: break-all; max-width: 70%; } /* Toast */ .toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 100; } .toast { padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: slide-up 0.25s ease; } .toast.win { border-color: rgba(0, 208, 132, 0.4); } .toast.loss { border-color: rgba(255, 77, 77, 0.4); } .toast.error { border-color: rgba(255, 77, 77, 0.4); color: var(--red); } @keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Auth pages */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.08), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 440px; padding: 36px; } .auth-header { text-align: center; margin-bottom: 28px; } .auth-header h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; } .auth-header p { color: var(--text-dim); font-size: 13px; } /* Misc */ .hr { height: 1px; background: var(--line); margin: 16px 0; } .kbd { font: 600 10px monospace; padding: 2px 6px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 4px; color: var(--text-dim); } .flag { font-size: 14px; } .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 6px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 40; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: 0.15s; } .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text-dim); transition: 0.1s; } .dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--text); } .dropdown-divider { height: 1px; background: var(--line); margin: 4px 0; } /* Mobile sidebar toggle */ .menu-btn { display: none; } @media (max-width: 900px) { .menu-btn { display: inline-flex; } } /* ============ MODALS (Stake-style) ============ */ .modal-overlay { position: fixed; inset: 0; background: rgba(11, 16, 32, 0.78); backdrop-filter: blur(8px); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow-y: auto; animation: fade-in 0.18s ease; } .modal-overlay.open { display: flex; } .modal { width: 100%; max-width: 640px; background: linear-gradient(180deg, #0e1729, #060b1a); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(0, 229, 255,0.05); overflow: hidden; animation: modal-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal.modal-lg { max-width: 880px; } .modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .modal-head h2 { font-size: 16px; font-weight: 800; flex: 1; letter-spacing: -0.01em; } .modal-head .close { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.05); display: grid; place-items: center; color: var(--text-dim); transition: 0.15s; } .modal-head .close:hover { background: rgba(255, 77, 77,0.12); color: var(--red); } .modal-body { padding: 22px; max-height: calc(100vh - 200px); overflow-y: auto; } .modal-tabs { display: flex; gap: 4px; padding: 6px; background: rgba(255,255,255,0.03); border-radius: 10px; margin-bottom: 18px; } .modal-tabs button { flex: 1; height: 36px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-dim); transition: 0.15s; } .modal-tabs button.active { background: linear-gradient(180deg, rgba(0, 229, 255,0.15), rgba(0, 229, 255,0.05)); color: var(--cyan); box-shadow: inset 0 0 12px rgba(0, 229, 255,0.1); } .modal-tabs button:hover:not(.active) { background: rgba(255,255,255,0.04); color: var(--text); } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Currency grid (modal) */ .cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .cur-tile { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); cursor: pointer; transition: 0.15s; } .cur-tile:hover { border-color: rgba(0, 229, 255,0.4); transform: translateY(-2px); background: rgba(255,255,255,0.04); } .cur-tile.active { border-color: var(--cyan); background: rgba(0, 229, 255,0.06); } .cur-tile-head { display: flex; align-items: center; gap: 10px; } .cur-tile-head .currency-icon { width: 28px; height: 28px; font-size: 12px; } .cur-tile-name { font-weight: 700; } .cur-tile-bal { font: 700 16px 'JetBrains Mono', monospace; margin-top: 8px; color: var(--text); } .cur-tile-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* Crypto deposit address card */ .deposit-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 229, 255,0.04); } .deposit-addr { font: 600 12px 'JetBrains Mono', monospace; word-break: break-all; padding: 10px 12px; background: rgba(0,0,0,0.4); border-radius: 8px; color: var(--cyan); margin-top: 10px; } .qr-box { width: 168px; height: 168px; background: #fff; border-radius: 12px; padding: 8px; margin: 0 auto 12px; } .qr-box img { width: 100%; height: 100%; } /* ============ DICE NEW LAYOUT (Stake stat row) ============ */ .dice-stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 18px; background: rgba(255,255,255,0.025); border-radius: 14px; margin-bottom: 22px; border: 1px solid var(--line); } .dice-stat-card { padding: 6px 10px; } .dice-stat-card label { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; display: block; font-weight: 500; } .dice-stat-card .input-group { position: relative; } .dice-stat-card input { width: 100%; height: 40px; padding: 0 30px 0 12px; background: rgba(0,0,0,0.4); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: 700 15px 'JetBrains Mono', monospace; outline: none; } .dice-stat-card input:focus { border-color: rgba(0, 229, 255,0.5); } .dice-stat-card input:disabled { color: var(--text-dim); } .dice-stat-card .input-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; pointer-events: none; } .dice-stat-card .input-suffix.btn-suffix { pointer-events: auto; cursor: pointer; } .dice-stat-card .input-suffix.btn-suffix:hover { color: var(--cyan); } /* Dice game footer toolbar (Stake-style) */ .game-footer { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.25); } .game-footer .icons { display: flex; gap: 4px; } .gf-icon { width: 36px; height: 36px; border-radius: 8px; background: transparent; color: var(--text-dim); display: grid; place-items: center; transition: 0.15s; cursor: pointer; } .gf-icon:hover { background: rgba(255,255,255,0.05); color: var(--text); } .gf-icon.active { color: var(--cyan); background: rgba(0, 229, 255,0.08); } .game-footer .brand { flex: 1; text-align: center; font-size: 18px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-muted); font-style: italic; opacity: 0.7; } .gf-verify { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; background: rgba(0, 229, 255,0.1); border: 1px solid rgba(0, 229, 255,0.25); color: var(--cyan); font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.15s; } .gf-verify:hover { background: rgba(0, 229, 255,0.2); } /* Auto mode panel */ .auto-panel { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .auto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .auto-row .field-input { height: 38px; padding: 0 10px; font-size: 13px; } .auto-row label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .seg-toggle { display: flex; gap: 0; background: rgba(0,0,0,0.3); padding: 3px; border-radius: 8px; } .seg-toggle button { flex: 1; height: 28px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-dim); transition: 0.15s; } .seg-toggle button.active { background: rgba(0, 229, 255,0.15); color: var(--cyan); } /* ============ CRASH ============ */ .crash-canvas-wrap { position: relative; padding: 24px; min-height: 480px; display: flex; flex-direction: column; } .crash-canvas { width: 100%; height: 360px; background: radial-gradient(ellipse at 50% 100%, rgba(0, 229, 255,0.08), transparent 60%); border-radius: 12px; position: relative; overflow: hidden; } .crash-mult { position: absolute; inset: 0; display: grid; place-items: center; font: 800 96px 'JetBrains Mono', monospace; letter-spacing: -0.04em; color: var(--text); transition: color 0.2s; pointer-events: none; } .crash-mult.flying { color: var(--cyan); text-shadow: 0 0 40px rgba(0, 229, 255,0.4); } .crash-mult.busted { color: var(--red); text-shadow: 0 0 40px rgba(255, 77, 77,0.5); animation: shake 0.3s; } .crash-mult.cashed { color: var(--green); text-shadow: 0 0 50px rgba(0, 208, 132,0.6); animation: pop 0.4s; } @keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } } @keyframes pop { 0% { transform: scale(1) } 40% { transform: scale(1.08) } 100% { transform: scale(1) } } .crash-status { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 6px 14px; background: rgba(0,0,0,0.5); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); } .crash-history-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; } .crash-h { padding: 4px 10px; border-radius: 999px; font: 700 12px 'JetBrains Mono', monospace; } .crash-h.low { background: rgba(255, 77, 77,0.12); color: var(--red); } .crash-h.mid { background: rgba(0, 229, 255,0.12); color: var(--cyan); } .crash-h.high { background: rgba(0, 208, 132,0.12); color: var(--green); } .crash-h.epic { background: linear-gradient(90deg, rgba(247, 147, 26,0.2), rgba(255, 77, 77,0.2)); color: var(--gold); border: 1px solid rgba(247, 147, 26,0.3); } /* Affiliate professional */ .aff-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 20px; } @media (max-width: 900px) { .aff-hero { grid-template-columns: 1fr; } } .aff-tier-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(0, 208, 132,0.15), rgba(0, 229, 255,0.1)); border: 1px solid rgba(0, 208, 132,0.3); color: var(--green); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; } .aff-progress { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; margin-top: 12px; } .aff-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 4px; transition: width 0.6s ease; } .aff-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .aff-funnel-step { padding: 16px 14px; background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 12px; position: relative; } .aff-funnel-step::after { content: 'β†’'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; z-index: 2; } .aff-funnel-step:last-child::after { display: none; } [dir="rtl"] .aff-funnel-step::after { right: auto; left: -12px; content: '←'; } .aff-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text); transition: 0.15s; cursor: pointer; } .aff-share-btn:hover { border-color: rgba(0, 229, 255,0.4); color: var(--cyan); } /* Settings panel inside dice modal */ .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); } .settings-row:last-child { border-bottom: 0; } .switch { width: 40px; height: 22px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; cursor: pointer; transition: 0.2s; } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: 0.2s; } .switch.on { background: var(--cyan); } .switch.on::after { left: 20px; background: #1A2035; } /* ============ Real crypto icons & Stake-style currency dropdown ============ */ .crypto-icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: inline-block; vertical-align: middle; } .crypto-icon-lg { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .crypto-icon-xl { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } /* Stake-style currency dropdown anchored to topbar pill */ .currency-dropdown { position: fixed; top: 60px; right: 16px; width: 360px; max-height: 70vh; background: #0c1426; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); z-index: 150; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: 0.18s; display: flex; flex-direction: column; } .currency-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .cd-head { padding: 14px; border-bottom: 1px solid var(--line); } .cd-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 38px; background: rgba(255,255,255,0.04); border-radius: 8px; } .cd-search i { color: var(--text-muted); font-size: 12px; } .cd-search input { flex: 1; background: transparent; outline: none; border: 0; color: var(--text); font-size: 14px; } .cd-list { flex: 1; overflow-y: auto; padding: 6px; } .cd-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; background: transparent; cursor: pointer; transition: 0.12s; } .cd-row:hover { background: rgba(255,255,255,0.04); } .cd-row.active { background: rgba(0, 229, 255,0.06); } .cd-row-name { flex: 1; text-align: left; } .cd-row-symbol { font-weight: 700; font-size: 14px; } .cd-row-net { font-size: 11px; color: var(--text-muted); } .cd-row-bal { text-align: right; } .cd-row-amt { font: 700 14px 'JetBrains Mono', monospace; } .cd-row-unit { font-size: 11px; color: var(--text-muted); } .cd-foot { padding: 12px 14px; border-top: 1px solid var(--line); } /* Wallet Modal v2 β€” Stake style */ .wallet-mtabs { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .wallet-mtabs button { padding: 12px 18px; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; transition: 0.15s; } .wallet-mtabs button.active { color: var(--text); border-bottom-color: var(--cyan); } .wallet-mtabs button:hover:not(.active) { color: var(--text); } .wm-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .wm-row label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .wm-select { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: 0.15s; } .wm-select:hover { border-color: rgba(0, 229, 255,0.4); } .wm-select-name { flex: 1; } .wm-select-name .symbol { font-weight: 700; font-size: 14px; } .wm-select-name .full { font-size: 11px; color: var(--text-muted); } .wm-select-bal { text-align: right; font: 700 13px 'JetBrains Mono', monospace; } .wm-select-bal .unit { color: var(--text-muted); font-size: 10px; font-weight: 600; } .wm-input-wrap { position: relative; } .wm-input { width: 100%; height: 46px; padding: 0 80px 0 16px; background: rgba(0,0,0,0.4); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 600 14px 'JetBrains Mono', monospace; outline: none; } .wm-input:focus { border-color: rgba(0, 229, 255,0.5); } .wm-input-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; } .wm-pct-btn { height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--text); font-size: 11px; font-weight: 700; transition: 0.12s; } .wm-pct-btn:hover { background: rgba(0, 229, 255,0.15); color: var(--cyan); } .wm-address-card { padding: 18px; background: linear-gradient(180deg, rgba(0, 229, 255,0.05), rgba(0, 229, 255,0.02)); border: 1px solid rgba(0, 229, 255,0.2); border-radius: 14px; } .wm-address { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(0,0,0,0.4); border: 1px solid var(--line); border-radius: 10px; font: 600 12px 'JetBrains Mono', monospace; color: var(--cyan); } .wm-address span { flex: 1; word-break: break-all; } .wm-address button { padding: 6px 10px; background: rgba(0, 229, 255,0.15); color: var(--cyan); border-radius: 6px; font-size: 11px; font-weight: 700; transition: 0.15s; } .wm-address button:hover { background: rgba(0, 229, 255,0.3); } .wm-qr-wrap { display: flex; justify-content: center; padding: 14px; } .wm-qr { background: #fff; padding: 10px; border-radius: 10px; } .wm-qr canvas, .wm-qr img { display: block; width: 168px; height: 168px; } .wm-net-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .wm-net-tile { padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: 0.15s; text-align: left; } .wm-net-tile:hover { border-color: rgba(0, 229, 255,0.4); } .wm-net-tile.active { border-color: var(--cyan); background: rgba(0, 229, 255,0.06); } .wm-net-tile .label { font-weight: 700; font-size: 13px; } .wm-net-tile .short { font-size: 11px; color: var(--text-muted); } .wm-warn { display: flex; gap: 10px; padding: 12px 14px; background: rgba(247, 147, 26,0.06); border: 1px solid rgba(247, 147, 26,0.2); border-radius: 10px; color: var(--gold); font-size: 12px; line-height: 1.5; margin-top: 14px; } .wm-warn i { flex-shrink: 0; margin-top: 2px; } /* Currency picker modal (selects token from wallet) */ .cur-search-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .cur-search-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: transparent; cursor: pointer; transition: 0.12s; border: 0; width: 100%; text-align: left; color: var(--text); } .cur-search-row:hover { background: rgba(255,255,255,0.04); } /* Coinflip game β€” Ultra-modern 3D coin */ .coin-stage { display: grid; place-items: center; padding: 50px 0; min-height: 380px; perspective: 1200px; position: relative; } .coin-stage::before { /* Spotlight */ content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(247, 147, 26,0.18), transparent 55%); pointer-events: none; } .coin-stage::after { /* Floor shadow */ content: ''; position: absolute; bottom: 60px; left: 50%; width: 180px; height: 22px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%); filter: blur(6px); pointer-events: none; z-index: 1; } .coin { width: 200px; height: 200px; border-radius: 50%; position: relative; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(0.34, 1.2, 0.64, 1); z-index: 2; filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)); } .coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; overflow: hidden; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.18), inset 0 0 0 10px rgba(0,0,0,0.25), inset 0 0 60px rgba(0,0,0,0.35), inset 0 12px 24px rgba(255,255,255,0.18), inset 0 -12px 24px rgba(0,0,0,0.4), 0 0 0 2px rgba(0,0,0,0.6), 0 16px 40px rgba(0,0,0,0.6); } .coin .face::before { /* Outer rim ridges */ content: ''; position: absolute; inset: -2px; border-radius: 50%; background: repeating-conic-gradient( rgba(0,0,0,0.35) 0deg 2deg, rgba(255,255,255,0.18) 2deg 4deg ); -webkit-mask: radial-gradient(circle, transparent 47%, #000 49%, #000 50%, transparent 51%); mask: radial-gradient(circle, transparent 47%, #000 49%, #000 50%, transparent 51%); pointer-events: none; } .coin .face::after { /* Specular gloss */ content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 32% 22%, rgba(255,255,255,0.55) 0%, transparent 35%), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.35) 0%, transparent 45%); pointer-events: none; } .coin .heads { background: radial-gradient(circle at 35% 30%, #FFF1A8 0%, transparent 38%), radial-gradient(circle at 65% 70%, #6F4A0A 0%, transparent 55%), linear-gradient(135deg, #FFD24A 0%, #F7931A 45%, #C57E00 80%, #8B5A00 100%); } .coin .tails { background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, transparent 38%), radial-gradient(circle at 65% 70%, #4B5563 0%, transparent 55%), linear-gradient(135deg, #EEEEF0 0%, #C0C5CE 45%, #8A93A6 80%, #565A64 100%); transform: rotateY(180deg); } .coin .face span { position: relative; z-index: 2; font-size: 78px; font-weight: 900; color: rgba(0,0,0,0.78); text-shadow: 0 2px 0 rgba(255,255,255,0.35), 0 -2px 0 rgba(0,0,0,0.3), 0 0 18px rgba(255,255,255,0.25); letter-spacing: -0.02em; } .coin.flipping { animation: coin-flip-anim 1.6s cubic-bezier(0.18, 0.55, 0.4, 1) forwards; } @keyframes coin-flip-anim { 0% { transform: rotateY(0) translateY(0) scale(1); } 20% { transform: rotateY(720deg) translateY(-80px) scale(1.05); } 50% { transform: rotateY(1800deg) translateY(-120px) scale(1.08); } 80% { transform: rotateY(2880deg) translateY(-30px) scale(1.02); } 100% { transform: rotateY(3600deg) translateY(0) scale(1); } } .coin.land-tails { transform: rotateY(180deg); } .coin.land-heads { transform: rotateY(0); } /* Win glow burst */ .coin.win-burst::after { content: ''; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 208, 132,0.45), transparent 60%); animation: coin-win-burst 0.9s ease-out forwards; pointer-events: none; z-index: -1; } @keyframes coin-win-burst { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.6); } } .cf-side-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .cf-side-btn { padding: 18px; border-radius: 12px; border: 2px solid var(--line); background: rgba(255,255,255,0.025); cursor: pointer; transition: 0.15s; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); } .cf-side-btn:hover { border-color: rgba(0, 229, 255,0.4); } .cf-side-btn.active { border-color: var(--cyan); background: rgba(0, 229, 255,0.06); box-shadow: 0 0 0 3px rgba(0, 229, 255,0.08); } .cf-side-btn .face-mini { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } .cf-side-btn .face-mini svg { width: 100%; height: 100%; display: block; } .cf-side-btn .name { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } /* ============ MINES 5x5 ============ */ .mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; } .mine-tile { border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid var(--line-strong); cursor: pointer; position: relative; transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.2s; font-size: 24px; display: grid; place-items: center; } .mine-tile:hover:not(:disabled):not(.revealed) { border-color: rgba(0, 229, 255, 0.4); background: linear-gradient(180deg, rgba(0, 229, 255,0.1), rgba(0, 229, 255,0.02)); transform: translateY(-2px); } .mine-tile:disabled { cursor: not-allowed; } .mine-tile.revealed { cursor: default; pointer-events: none; } .mine-tile.safe { background: linear-gradient(180deg, rgba(0, 208, 132, 0.16), rgba(0, 208, 132, 0.04)); border-color: rgba(0, 208, 132, 0.5); box-shadow: 0 0 20px rgba(0, 208, 132, 0.18); animation: gem-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .mine-tile.mine { background: linear-gradient(180deg, rgba(255, 77, 77, 0.18), rgba(255, 77, 77, 0.04)); border-color: rgba(255, 77, 77, 0.55); box-shadow: 0 0 24px rgba(255, 77, 77, 0.25); animation: mine-shake 0.4s; } .mine-tile.pulse { animation: tile-pulse 0.6s infinite; } .mine-tile.auto-picked { border-color: rgba(0, 229, 255, 0.55); background: linear-gradient(180deg, rgba(0, 229, 255,0.16), rgba(0, 229, 255,0.04)); box-shadow: 0 0 16px rgba(0, 229, 255,0.18); } .mine-tile .auto-marker { position: absolute; top: 6px; right: 6px; line-height: 1; } .mine-face { display: inline-grid; place-items: center; transition: transform 0.2s; } .mine-tile.revealed .mine-face { transform: scale(1.18); } @keyframes gem-pop { 0% { transform: scale(0.85); opacity: 0.5; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes mine-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes tile-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); } } /* ============ PLINKO ============ */ .plinko-stage { /* Zero bottom-padding so the multiplier row sits flush against the canvas (matches the Stake reference where the buckets touch the bottom pegs). */ padding: 20px 24px 14px; display: flex; flex-direction: column; align-items: center; min-height: auto; max-width: 580px; margin: 0 auto; width: 100%; } .plinko-stage canvas { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 16px 16px 0 0; background: #0B1020; border: 1px solid var(--line); border-bottom: 0; display: block; box-sizing: border-box; } .plinko-stage { overflow: hidden; box-sizing: border-box; } #plCanvas { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; } .plinko-multipliers { width: 100%; box-sizing: border-box; } .plinko-multipliers { display: flex; gap: 4px; width: 100%; max-width: 100%; /* Sit directly below the canvas β€” no gap, share the same internal padding. */ margin-top: 0; padding: 6px 8px 0; background: #0B1020; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; } .pl-bucket { flex: 1; text-align: center; padding: 9px 4px; border-radius: 8px; font: 800 12px 'JetBrains Mono', monospace; border: 1px solid; transition: transform 0.15s, box-shadow 0.2s, filter 0.15s; min-width: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); letter-spacing: -0.01em; box-shadow: 0 4px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); } .pl-bucket .pl-x { font-size: 9px; font-weight: 700; opacity: 0.85; margin-left: 1px; vertical-align: super; } .pl-bucket.flash { transform: translateY(-6px) scale(1.08); filter: brightness(1.2); box-shadow: 0 8px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 24px currentColor; } /* ============ PLINKO β€” premium extras (ticker, stats, glow) ============ */ .pl-ticker-wrap { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 14px 16px 0; background: linear-gradient(90deg, rgba(122, 95, 255,0.06), rgba(0, 229, 255,0.04)); border: 1px solid rgba(122, 95, 255,0.18); border-radius: 12px; overflow: hidden; } .pl-ticker-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; } .pl-ticker { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .pl-ticker::-webkit-scrollbar { display: none; } .pl-ticker-empty { font-size: 12px; color: var(--text-dim); font-style: italic; } .pl-tick { flex-shrink: 0; padding: 4px 10px; border-radius: 6px; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: -0.01em; animation: pl-tick-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid; } .pl-tick.jackpot { background: rgba(255, 77, 77,0.15); color: #FF5A5A; border-color: rgba(255, 77, 77,0.4); box-shadow: 0 0 12px rgba(255, 77, 77,0.3); } .pl-tick.big { background: rgba(247, 147, 26,0.15); color: #FFC56B; border-color: rgba(247, 147, 26,0.4); } .pl-tick.mid { background: rgba(157, 160, 165,0.1); color: #D8DCE8; border-color: rgba(157, 160, 165,0.3); } .pl-tick.low { background: rgba(86, 90, 100,0.08); color: var(--text-dim); border-color: rgba(86, 90, 100,0.25); } @keyframes pl-tick-in { from { opacity: 0; transform: translateY(-8px) scale(0.7); } to { opacity: 1; transform: translateY(0) scale(1); } } .pl-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px 16px 4px; } .pl-stat { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 10px 12px; position: relative; overflow: hidden; } .pl-stat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(122, 95, 255,0.05), transparent 50%); pointer-events: none; } .pl-stat-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .pl-stat-val { font: 800 13px 'JetBrains Mono', monospace; letter-spacing: -0.01em; color: var(--text); position: relative; } .pl-stat-cyan { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255,0.4); } .pl-stat-gold { color: #F7931A; text-shadow: 0 0 8px rgba(247, 147, 26,0.4); } @media (max-width: 768px) { .pl-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 12px 4px; } .pl-stat:nth-child(4), .pl-stat:nth-child(5) { grid-column: span 1; } .pl-stat-val { font-size: 11px; } .pl-ticker-wrap { margin: 12px 12px 0; padding: 10px 12px; } } /* ============ Live Stats Modal (all games) β€” draggable, less invasive ============ */ .ls-modal { max-width: 460px; } /* Floating, non-blocking dock. Default position pinned top-right, but the user can drag it freely. We expose CSS vars --ls-x / --ls-y that the JS updates on drag (in px from top-left of viewport). */ .modal-overlay.ls-dock { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; /* Important: do NOT use flexbox once dragging β€” JS sets position:fixed on the inner modal directly. */ justify-content: flex-end !important; align-items: flex-start !important; padding: 90px 18px 18px 18px; } .modal-overlay.ls-dock .modal { pointer-events: auto; margin: 0; width: 340px; max-width: 340px; max-height: calc(100vh - 110px); box-shadow: 0 18px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(122, 95, 255,0.18); animation: ls-dock-in 0.24s ease-out; /* When dragged, JS sets position:fixed + left/top */ } .modal-overlay.ls-dock .modal.dragged { position: fixed !important; margin: 0 !important; } /* Drag handle styling */ .ls-head { cursor: grab; user-select: none; touch-action: none; } .ls-head:active { cursor: grabbing; } .ls-head.dragging * { pointer-events: none; } /* The header icon buttons keep their pointer */ .ls-head .ls-icon-btn, .ls-head .close { cursor: pointer; } @keyframes ls-dock-in { from { opacity: 0; transform: translate(20px, -8px) scale(0.96); } to { opacity: 1; transform: translate(0, 0) scale(1); } } @media (max-width: 768px) { .modal-overlay.ls-dock { padding: 0; /* Bottom-sheet on mobile β€” less invasive, easier to dismiss */ justify-content: center !important; align-items: flex-end !important; } .modal-overlay.ls-dock .modal { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: 70vh; margin: 0 6px 8px !important; border-radius: 18px 18px 14px 14px; } .modal-overlay.ls-dock .modal.minimized { max-height: 56px; overflow: hidden; } /* Grab handle visual on mobile */ .modal-overlay.ls-dock .modal::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.20); margin: 6px auto -2px; } } /* Crypto-icon replacement for the currency dot β€” JS sets an inside. */ .ls-cur-dot.icon-mode { background: transparent !important; box-shadow: none !important; width: 20px !important; height: 20px !important; overflow: hidden; } .ls-cur-dot.icon-mode img { width: 100%; height: 100%; border-radius: 50%; display: block; } .ls-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .ls-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; transition: 0.15s; } .ls-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); } .ls-body { padding: 6px 18px 18px; } .ls-filter-wrap { position: relative; margin-bottom: 14px; } .ls-filter { width: 100%; appearance: none; -webkit-appearance: none; background: rgba(35, 49, 82, 0.7); border: 1px solid var(--line); border-radius: 10px; padding: 11px 38px 11px 14px; color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; } .ls-filter:focus { outline: none; border-color: rgba(122, 95, 255,0.5); } .ls-filter-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-dim); } .ls-grid { display: grid; grid-template-columns: 1fr 1fr; background: rgba(35, 49, 82, 0.55); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; } .ls-cell { padding: 14px 16px; border-right: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); } .ls-cell:nth-child(even) { border-right: 0; } .ls-cell:nth-last-child(-n+2) { border-bottom: 0; } .ls-cell-label { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; } .ls-cell-val { font: 800 18px/1 'JetBrains Mono', monospace; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } .ls-cur-dot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #00D084, #00E5FF); flex-shrink: 0; box-shadow: 0 0 12px rgba(0, 208, 132, 0.4); } .ls-num { font-size: 22px; } .ls-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .ls-meta-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .ls-meta-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .ls-meta-val { font: 800 12px/1 'JetBrains Mono', monospace; } .ls-history-wrap { background: rgba(35, 49, 82,0.5); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; max-height: 240px; overflow-y: auto; } .ls-history-title { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .ls-history { display: flex; flex-direction: column; gap: 6px; } .ls-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .ls-tick { padding: 3px 8px; border-radius: 6px; font-weight: 800; font-size: 11px; border: 1px solid; } .ls-tick.jackpot { background: rgba(255, 77, 77,0.15); color: #FF5A5A; border-color: rgba(255, 77, 77,0.4); } .ls-tick.big { background: rgba(247, 147, 26,0.15); color: #FFC56B; border-color: rgba(247, 147, 26,0.4); } .ls-tick.mid { background: rgba(157, 160, 165,0.1); color: #D8DCE8; border-color: rgba(157, 160, 165,0.3); } .ls-tick.low { background: rgba(86, 90, 100,0.08); color: var(--text-dim); border-color: rgba(86, 90, 100,0.25); } .ls-profit { font-weight: 700; } .ls-empty { color: var(--text-dim); text-align: center; padding: 16px; font-size: 12px; font-style: italic; } /* Side history sidebar β€” vertical strip on canvas right edge */ .side-history { position: absolute; top: 18px; right: 18px; bottom: 80px; /* leave room for multiplier row */ width: 56px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: 3; overflow: hidden; } .side-history .sh-pill { background: rgba(35, 49, 82,0.85); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 4px; font: 800 11px/1 'JetBrains Mono', monospace; letter-spacing: -0.01em; text-align: center; pointer-events: auto; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: sh-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .side-history .sh-pill:hover { transform: translateX(-3px) scale(1.06); border-color: rgba(0, 229, 255,0.5); box-shadow: 0 4px 16px rgba(0, 229, 255,0.18); } .side-history .sh-pill.jackpot { background: rgba(255, 77, 77,0.18); color: #FF8088; border-color: rgba(255, 77, 77,0.5); box-shadow: 0 0 14px rgba(255, 77, 77,0.35); } .side-history .sh-pill.big { background: rgba(247, 147, 26,0.18); color: #FFC56B; border-color: rgba(247, 147, 26,0.5); } .side-history .sh-pill.mid { background: rgba(157, 160, 165,0.12); color: #D8DCE8; border-color: rgba(157, 160, 165,0.3); } .side-history .sh-pill.low { background: rgba(86, 90, 100,0.1); color: var(--text-dim); border-color: rgba(86, 90, 100,0.25); } @keyframes sh-pop-in { from { opacity: 0; transform: translateX(20px) scale(0.6); } to { opacity: 1; transform: translateX(0) scale(1); } } @media (max-width: 768px) { .ls-modal { max-width: 96vw; } .ls-meta { grid-template-columns: repeat(2, 1fr); } .ls-cell-val { font-size: 15px; } .ls-num { font-size: 18px; } .side-history { width: 44px; top: 10px; right: 10px; bottom: 70px; } .side-history .sh-pill { font-size: 9px; padding: 5px 2px; } } /* ============ TopBar polish β€” currency pill more prominent ============ */ .balance-pill .currency-tab { padding: 0 14px; min-width: 0; } .balance-pill .amount { white-space: nowrap; padding: 0 14px; } /* ============ Live ticker (homepage trust strip animation) ============ */ @keyframes ticker-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.3); } 50% { box-shadow: 0 0 0 4px rgba(0, 229, 255, 0); } } /* ============ 2026 ultramodern: subtle grain + glow on the hero ============ */ .hero { background-image: radial-gradient(circle at 70% 20%, rgba(0, 229, 255, 0.10), transparent 50%), radial-gradient(circle at 30% 80%, rgba(0, 208, 132, 0.08), transparent 50%), linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(247, 147, 26, 0.04)); } .hero::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; mix-blend-mode: overlay; } /* Animated gradient border for win flash */ @keyframes shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ============ Sidebar nav: hover line indicator ============ */ .sidebar-link { position: relative; } .sidebar-link::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; background: var(--cyan); border-radius: 2px; transition: transform 0.2s ease; } .sidebar-link.active::before { transform: translateY(-50%) scaleY(1); } .sidebar-link:hover::before { transform: translateY(-50%) scaleY(0.6); } /* ============ Coming-soon badge removal helper ============ */ .game-card:not([data-soon]) .badge-soon { display: none; } /* ============ GAME CARD HOVER TRAILERS (CSS-only animated previews) ============ */ .game-card { overflow: hidden; isolation: isolate; } .game-card .game-card-bg { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; } .game-card:hover .game-card-bg { transform: scale(1.18); filter: brightness(1.1) saturate(1.2); } .game-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(0, 229, 255, 0.18) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } .game-card:hover::before { opacity: 1; } /* Dice trailer β€” uses ::before so we don't override the base ::after dice emoji */ .gbg-dice { position: relative; } .gbg-dice::before { content: ''; position: absolute; width: 32px; height: 32px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #00E5FF, #00D084); border-radius: 8px; box-shadow: 0 0 0 4px rgba(0, 229, 255,0.08), 0 4px 18px rgba(0, 229, 255,0.5); opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .game-card:hover .gbg-dice::before { opacity: 1; animation: dice-tumble 1.5s infinite; } @keyframes dice-tumble { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50%, -55%) rotate(90deg); } 50% { transform: translate(-50%, -50%) rotate(180deg); } 75% { transform: translate(-50%, -45%) rotate(270deg); } } /* Crash trailer */ .game-card:hover .gbg-crash::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 2px; background: linear-gradient(90deg, transparent, #00D084, transparent); animation: crash-line 1.2s ease-out infinite; } @keyframes crash-line { 0% { transform: scaleX(0) translateY(0); transform-origin: left; opacity: 0; } 20% { transform: scaleX(0.2) translateY(-2px); opacity: 1; } 60% { transform: scaleX(0.8) translateY(-12px); opacity: 1; } 100% { transform: scaleX(1) translateY(-30px); opacity: 0; } } /* Coinflip trailer */ .game-card:hover .gbg-coinflip::after { content: ''; position: absolute; width: 36px; height: 36px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(135deg, #F7931A, #FFD24A); box-shadow: 0 0 24px rgba(247, 147, 26,0.5); animation: coin-flip-trailer 1.2s infinite; } @keyframes coin-flip-trailer { 0%, 100% { transform: translate(-50%, -50%) rotateY(0deg); } 50% { transform: translate(-50%, -55%) rotateY(180deg); } } /* Mines trailer */ .game-card:hover .gbg-mines::after { content: '\f1e2'; /* fa-bomb */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: #FF4D4D; text-shadow: 0 0 24px rgba(255, 77, 77,0.5); animation: mine-bob 1.3s ease-in-out infinite; } @keyframes mine-bob { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -55%) scale(1.15); } } /* Plinko trailer */ .game-card:hover .gbg-plinko::after { content: ''; position: absolute; width: 10px; height: 10px; top: 10%; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #F7931A; box-shadow: 0 0 12px rgba(247, 147, 26,0.7); animation: plinko-drop 1.4s ease-in infinite; } @keyframes plinko-drop { 0% { top: 10%; opacity: 1; } 100% { top: 85%; opacity: 0.2; } } /* ============ SOUND ICON STATE ============ */ .gf-icon.muted { opacity: 0.35; } .gf-icon.muted i::after { content: ''; } /* ============ LIVE ROW (SSE pushed) ============ */ .live-row { animation: none; } .live-row-fresh { animation: live-flash 0.7s ease-out; } @keyframes live-flash { 0% { background: rgba(0, 229, 255, 0.25); transform: translateY(-4px); } 100% { background: transparent; transform: translateY(0); } } #liveBetsCounter.pulse { animation: counter-pulse 0.5s ease-out; } @keyframes counter-pulse { 0% { color: #00D084; transform: scale(1.18); } 100% { color: var(--cyan); transform: scale(1); } } /* Crypto icon legacy suffix styles β€” kept for backwards compatibility but icons now use the .prefix-icon position (left of the input). */ .field-suffix-input .suffix img.currency-pic { display: none; } .field-suffix-input .suffix { display: flex; align-items: center; gap: 6px; } /* Suffix buttons β€” make Β½ and 2Γ— clearly tappable */ .field-suffix-input .suffix-btn { min-width: 36px; height: 30px; padding: 0 10px; font: 700 12px 'JetBrains Mono', monospace; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 6px; color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .field-suffix-input .suffix-btn:hover { background: rgba(0, 229, 255, 0.12); border-color: rgba(0, 229, 255, 0.35); color: var(--cyan); } .field-suffix-input .suffix-btn:active { transform: scale(0.96); } /* ============ CONFIGURE AUTO MODAL ============ */ .btn-violet { background: linear-gradient(180deg, #A754E3 0%, #7A5FFF 50%, #6D28D9 100%); border: 1px solid rgba(167, 84, 227, 0.6); color: #fff; cursor: pointer; transition: filter 0.18s, transform 0.1s, box-shadow 0.2s; border-radius: 14px; font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 1px 2px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -8px 18px rgba(0,0,0,0.25), 0 8px 22px rgba(122, 95, 255, 0.55), 0 0 28px rgba(167, 84, 227, 0.35); } .btn-violet:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -8px 18px rgba(0,0,0,0.2), 0 10px 32px rgba(122, 95, 255, 0.7), 0 0 36px rgba(167, 84, 227, 0.55); } .btn-violet:active { transform: scale(0.98); } /* ============ Primary BET button β€” clean, brand-cyan, no overload. Single accent color, subtle border, minimal shadow. Replaces the previous gradient/shine-sweep variant. ============ */ .btn-bet { position: relative; background: var(--cyan, #00E5FF); border: 1px solid rgba(255,255,255,0.10); color: #00131f; cursor: pointer; transition: background 0.15s, transform 0.08s, box-shadow 0.18s; border-radius: 12px; font-weight: 800; letter-spacing: 0.06em; box-shadow: 0 2px 10px rgba(0, 229, 255, 0.18); } .btn-bet::after { content: none; } .btn-bet:hover { background: #19d2ff; box-shadow: 0 4px 16px rgba(0, 229, 255, 0.28); } .btn-bet:active { transform: scale(0.985); } .btn-bet:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; } /* Mines CASHOUT β€” green to differentiate from the violet BET on the same panel */ .btn-cashout { background: linear-gradient(135deg, var(--green), #00FF99); color: #001a14; box-shadow: 0 4px 20px rgba(0, 208, 132, 0.45); border: 1px solid rgba(0, 208, 132, 0.4); } .btn-cashout:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0, 208, 132, 0.6); } .auto-configure-btn { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--line) !important; color: var(--text-dim) !important; border-radius: 12px; cursor: pointer; } .auto-configure-btn:hover { background: rgba(0, 229, 255,0.08) !important; color: var(--cyan) !important; border-color: rgba(0, 229, 255,0.3) !important; } .modal-grabber { width: 48px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); } .auto-seg { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: center; gap: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .auto-seg-btn { height: 38px; padding: 0 8px; background: transparent; border: 0; color: var(--text-dim); font: 600 13px 'Inter', system-ui, sans-serif; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; } .auto-seg-btn:hover { color: var(--text); } .auto-seg-btn.active { background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } .auto-seg-input { background: transparent; border: 0; color: var(--text); font: 700 13px 'JetBrains Mono', monospace; width: 70px; text-align: right; padding: 0 4px; outline: none; } .auto-seg-input:disabled { color: var(--text-muted); } .auto-seg-suffix { color: var(--text-muted); font-size: 13px; padding-right: 10px; } .auto-usd-hint { font-size: 12px; color: var(--text-muted); font-weight: 600; } .auto-reset-all:hover { color: var(--text) !important; } @media (max-width: 480px) { .auto-seg { grid-template-columns: 1fr 1fr; row-gap: 4px; } .auto-seg-input, .auto-seg-suffix { grid-column: span 2; text-align: left; padding: 4px 8px; width: 100%; } } /* ============ MOBILE-FIRST OPTIMIZATIONS ============ */ @media (max-width: 1024px) { /* Reorder control aside so the structure matches the reference image: Bet button on top, then wager / profit / other controls, mode tabs at bottom. This applies to all 5 in-house games which share the .dice-control aside. */ .dice-control { display: flex; flex-direction: column; gap: 12px; } .dice-control > .field, .dice-control > .auto-panel, .dice-control > .dice-stat-row, .dice-control > .cf-side-btns, .dice-control > .seg-toggle { margin-bottom: 0 !important; margin-top: 0 !important; } .dice-control > .dice-mode-tabs { order: 99; margin: 6px 0 0 !important; } .dice-control > .btn-win, .dice-control > .btn-primary, .dice-control > .btn-violet, .dice-control > .btn-bet, .dice-control > .btn-cashout { order: -1; margin-top: 0 !important; } } @media (max-width: 768px) { .main { padding: 12px 10px; } .dice-layout { gap: 12px; } .dice-control { padding: 14px; } /* Reduce minimum heights so the canvas section doesn't dominate the viewport */ .dice-control { min-height: auto; } .dice-layout > section > div:first-child { min-height: 360px !important; padding: 18px !important; } .dice-result-num { font-size: 56px; } .crash-mult { font-size: 60px; } /* Keep the 3 stat cards side-by-side on mobile (user request: save vertical space). */ .dice-stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px; } .dice-stat-card { padding: 2px 4px; } .dice-stat-card label { font-size: 9px; margin-bottom: 4px; letter-spacing: 0; } .dice-stat-card input { height: 36px; font-size: 12px; padding: 0 22px 0 8px; } .dice-stat-card .input-suffix { right: 6px; font-size: 11px; } .topbar { padding: 0 12px; gap: 8px; height: 56px; } .topbar-search { display: none; } .balance-pill { height: 36px; } .balance-pill .currency-tab { padding: 0 8px; gap: 5px; } .balance-pill .currency-tab .amount, .balance-pill .amount { font-size: 11px; padding: 0 8px; } .balance-pill .deposit-btn { padding: 0 10px; font-size: 11px; } .user-pill { padding: 0 8px; font-size: 12px; } .user-pill .avatar { width: 22px; height: 22px; } .user-pill > span:not(.avatar) { display: none; } .mines-grid { gap: 6px; max-width: 100%; } .mine-tile { font-size: 16px; border-radius: 10px; } .game-footer { padding: 10px 12px; flex-wrap: wrap; gap: 8px; } .game-footer .brand { font-size: 14px; flex: 0 0 100%; order: 3; text-align: left; padding-top: 4px; } .gf-icon { width: 32px; height: 32px; } .gf-verify { height: 32px; padding: 0 10px; font-size: 11px; } .crash-canvas { height: 240px; } .crash-canvas-wrap { padding: 12px; min-height: 280px; } .coin-stage { padding: 24px 0; min-height: 220px; } .coin { width: 130px; height: 130px; } .plinko-stage { padding: 10px; min-height: 320px; } .plinko-multipliers { gap: 2px; } .pl-bucket { font-size: 9px; padding: 6px 2px; } .auto-row { grid-template-columns: 1fr; } .currency-dropdown { width: calc(100vw - 24px); right: 12px; } .dice-slider-wrap { padding: 10px 6px 20px; } .dice-slider-thumb { width: 32px; height: 32px; font-size: 10px; } .modal-body { padding: 14px; } .modal-head { padding: 12px 14px; } /* Sidebar slides over content on mobile */ .sidebar { width: 270px; } .app { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .dice-result-num { font-size: 42px; } .crash-mult { font-size: 52px; } .field-suffix-input input.field-input { padding-left: 38px; padding-right: 80px; font-size: 13px; } .field-suffix-input .prefix-icon img { width: 18px; height: 18px; } .field-suffix-input .suffix-btn { min-width: 30px; height: 26px; padding: 0 6px; font-size: 10px; } } /* ========================================================================== IGAXMING β€” PATCH v5 Β· Shuffle-style + Tailwind CDN + Recent Bets Stake (2026-05) β€” replaces v1–v4 completely -------------------------------------------------------------------------- - Sidebar: flat solid, 240px wide, Casino/Sports pills, NO search. - Topbar: brand on the left. - Lobby: prominent search bar (moved from sidebar). - Recent Bets: Stake-style tabs (Mine / All / Whales / Race) with crypto icons in wager + payout columns and SVG game icons. - Mobile: drawer 78vw max with proper backdrop + body-scroll-lock. - Mobile games: canvas top, controls bottom. ========================================================================== */ /* ============================================================ 1. SIDEBAR β€” flat, solid, Shuffle-style ============================================================ */ .sidebar { background: #111622 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; position: sticky !important; top: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; width: 240px !important; overflow: visible !important; transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex; flex-direction: column; z-index: 30; } .app { grid-template-columns: 240px 1fr; } @media (min-width: 901px) { .app:has(.sidebar[data-collapsed="true"]) { grid-template-columns: 76px 1fr !important; } .app:has(.sidebar:not([data-collapsed="true"])) { grid-template-columns: 240px 1fr !important; } } .sidebar-head { display: flex !important; align-items: center !important; gap: 10px !important; height: 64px !important; padding: 0 14px !important; border-bottom: 0 !important; justify-content: flex-start !important; flex-shrink: 0; } .sidebar-brand { display: none !important; } .sidebar-toggle { position: static !important; width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 10px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: var(--text) !important; box-shadow: none !important; font-size: 14px !important; flex-shrink: 0; } .sidebar-toggle:hover { background: rgba(0, 229, 255,0.1) !important; border-color: rgba(0, 229, 255,0.3) !important; color: var(--cyan) !important; } /* Casino/Sports pills */ .sidebar-pill-toggle { display: flex; flex: 1; height: 38px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 3px; gap: 2px; min-width: 0; } .pill-btn { flex: 1; height: 100%; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; white-space: nowrap; min-width: 0; } .pill-btn:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.03); } .pill-btn.active { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #1A2035; box-shadow: 0 2px 10px rgba(0, 229, 255,0.35); } .pill-btn i { font-size: 11px; } /* Nav links */ .sidebar-scroll { padding: 10px 10px 24px !important; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .sidebar-scroll::-webkit-scrollbar { width: 5px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255,0.4); } .sidebar-section { padding: 16px 14px 8px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: rgba(157, 160, 165,0.6) !important; white-space: nowrap; } .sidebar-link { display: flex !important; align-items: center !important; gap: 14px !important; padding: 11px 14px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.72) !important; margin-bottom: 2px; border: 0 !important; background: transparent !important; box-shadow: none !important; position: relative !important; transition: background 0.15s ease, color 0.15s ease !important; white-space: nowrap; } .sidebar-link i { width: 20px !important; text-align: center !important; font-size: 15px !important; color: rgba(255,255,255,0.55) !important; transition: color 0.15s ease !important; flex-shrink: 0; } .sidebar-link:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; transform: none !important; } .sidebar-link:hover i { color: rgba(255,255,255,0.9) !important; } .sidebar-link.active { background: rgba(255,255,255,0.07) !important; color: #fff !important; } .sidebar-link.active i { color: var(--cyan) !important; } .sidebar-link::before { display: none !important; } .sidebar-live { padding: 16px 14px 8px !important; margin-top: 12px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; } .sidebar-live-stats { font-size: 11px !important; line-height: 1.7 !important; } /* Collapsed state (desktop only) */ @media (min-width: 901px) { .sidebar[data-collapsed="true"] { width: 76px !important; } .sidebar[data-collapsed="true"] .sidebar-head { justify-content: center !important; padding: 0 !important; gap: 0 !important; } .sidebar[data-collapsed="true"] .sidebar-pill-toggle, .sidebar[data-collapsed="true"] .sidebar-text, .sidebar[data-collapsed="true"] .sidebar-section, .sidebar[data-collapsed="true"] .sidebar-live { display: none !important; } .sidebar[data-collapsed="true"] .sidebar-link { padding: 12px 0 !important; justify-content: center !important; gap: 0 !important; margin: 0 0 4px 0 !important; } .sidebar[data-collapsed="true"] .sidebar-link i { width: auto !important; font-size: 17px !important; } .sidebar[data-collapsed="true"] .sidebar-link.active { background: rgba(0, 229, 255,0.08) !important; } .sidebar[data-collapsed="true"] .sidebar-link:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: #0F1424; border: 1px solid rgba(255,255,255,0.08); color: var(--text); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 8px; white-space: nowrap; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.6); pointer-events: none; } } /* ============================================================ 2. TOPBAR brand ============================================================ */ .topbar-brand { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; padding: 0 10px; height: 42px; border-radius: 10px; transition: background 0.15s ease; flex-shrink: 0; } .topbar-brand:hover { background: rgba(255,255,255,0.04); } .topbar-brand-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--cyan), var(--blue)); display: grid; place-items: center; font-weight: 800; color: #1A2035; font-size: 13px; box-shadow: 0 0 0 1px rgba(0, 229, 255,0.25), 0 4px 12px rgba(0, 229, 255,0.25), inset 0 1px 0 rgba(255,255,255,0.2); flex-shrink: 0; } .topbar-brand-text { font-size: 16px; font-weight: 800; letter-spacing: 0.06em; color: #fff; white-space: nowrap; } .topbar > .topbar-search { display: none !important; } /* ============================================================ 3. LOBBY SEARCH (moved from sidebar) ============================================================ */ .lobby-search-wrap { width: 100%; } .lobby-search-box { position: relative; width: 100%; } .lobby-search { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; background: var(--surface-1, #141B30); border: 1px solid rgba(122,95,255,0.18); border-radius: 14px; transition: border-color 0.18s ease, background 0.18s ease, box-shadow .18s ease; max-width: none; width: 100%; } .lobby-search:focus-within { border-color: rgba(0, 229, 255,0.55); background: var(--surface-1, #141B30); box-shadow: 0 0 0 3px rgba(0,229,255,0.12), 0 0 22px -8px rgba(0,229,255,0.5); } /* Results dropdown */ .lobby-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; background: #141B30; border: 1px solid rgba(122,95,255,0.24); border-radius: 14px; box-shadow: 0 26px 60px -22px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,229,255,0.05); padding: 8px; max-height: 60vh; overflow-y: auto; } .lobby-search-results.hidden { display: none; } .lsr-group { margin-bottom: 6px; } .lsr-head { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8b93a8; padding: 8px 10px 6px; } .lsr-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: #E4E7EF; transition: background .12s; } .lsr-item:hover { background: rgba(122,95,255,0.12); } .lsr-img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: #0F1530; flex-shrink: 0; } .lsr-name { flex: 1; font-size: 13px; font-weight: 600; } .lsr-tag { font-size: 10px; font-weight: 700; color: #9aa1ff; background: rgba(122,95,255,0.14); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .lsr-all { display: block; text-align: center; padding: 10px; margin-top: 4px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 10px; background: linear-gradient(135deg,#1F7DFF,#7A5FFF); } .lsr-all:hover { filter: brightness(1.08); } .lsr-empty { padding: 16px; text-align: center; color: #9DA0A5; font-size: 13px; } .lsr-empty a { color: #00E5FF; font-weight: 700; } .lobby-search:focus-within { border-color: rgba(0, 229, 255,0.55); } .lobby-search i { color: var(--text-muted); font-size: 14px; } .lobby-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 14px; font-weight: 500; min-width: 0; } .lobby-search input::placeholder { color: var(--text-muted); } .lobby-search .kbd { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-dim); font-size: 11px; padding: 3px 8px; border-radius: 6px; } @media (max-width: 600px) { .lobby-search .kbd { display: none; } .lobby-search { height: 46px; padding: 0 14px; } } /* ============================================================ 4. RECENT BETS β€” Stake-style tabbed feed ============================================================ */ .recent-bets-card { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .rb-tabs-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.015); flex-wrap: wrap; } .rb-tabs { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border-radius: 999px; padding: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; } .rb-tabs::-webkit-scrollbar { display: none; } .rb-tab { background: transparent; border: 0; color: var(--text-dim); padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; } .rb-tab:hover { color: var(--text); } .rb-tab.active { background: rgba(255,255,255,0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); } .rb-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; } .rb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: rb-pulse 1.6s infinite ease-in-out; } @keyframes rb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .rb-live-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--text-muted); } .rb-limit { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; outline: none; } .rb-table-wrap { width: 100%; overflow-x: auto; } .rb-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rb-table thead th { font-size: 11px; font-weight: 600; text-transform: capitalize; letter-spacing: 0.02em; color: var(--text-muted); padding: 14px 18px; text-align: left; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--line); white-space: nowrap; } .rb-th-wager, .rb-th-mult, .rb-th-payout { text-align: right !important; } .rb-table tbody td { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-dim); vertical-align: middle; white-space: nowrap; } .rb-table tbody tr:last-child td { border-bottom: 0; } .rb-table tbody tr.rb-row { transition: background 0.18s ease; } .rb-table tbody tr.rb-row:hover { background: rgba(255,255,255,0.025); } /* New row flash */ .rb-row.rb-fresh { animation: rb-flash 0.9s ease-out; } @keyframes rb-flash { 0% { background: rgba(0, 229, 255,0.18); transform: translateY(-4px); } 100% { background: transparent; transform: translateY(0); } } .rb-game-cell { display: flex; align-items: center; gap: 10px; color: var(--text) !important; } .rb-game-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.03); flex-shrink: 0; } .rb-game-icon svg { display: block; } .rb-game-name { font-weight: 600; color: var(--text); } .rb-rank { font-weight: 800; color: var(--cyan); padding-right: 8px; } .rb-user-cell { color: var(--text-dim); } .rb-user-name { font-weight: 500; color: var(--text); } .rb-user-hidden { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-style: italic; } .rb-user-hidden i { font-size: 12px; opacity: 0.7; } .rb-time-cell { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; } .rb-wager-cell, .rb-payout-cell { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 600; } .rb-wager-cell .rb-amount { color: var(--text); } .rb-coin-wrap { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; } img.rb-coin { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; } .rb-mult-cell { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-dim); } .rb-mult-win { color: var(--green) !important; } .rb-win { color: var(--green); } .rb-loss { color: var(--text-muted); } /* Bonus / free-spin row markers β€” for slot writeBet events where TBS2 sends bet=0 with a positive payout (autoplay bonus rounds, free spins). */ .rb-bonus-tag { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: linear-gradient(135deg, #F7931A, #ff7a30); color: #111622; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; vertical-align: middle; } .rb-bonus-dash { color: var(--text-muted); opacity: 0.55; font-style: italic; } /* Mobile recent-bets: hide some columns to keep it readable */ @media (max-width: 900px) { .rb-tabs-wrap { padding: 12px; gap: 8px; } .rb-tab { padding: 6px 12px; font-size: 12px; } .rb-table thead th, .rb-table tbody td { padding: 11px 12px; font-size: 12px; } .rb-th-time, .rb-time-cell { display: none; } .rb-game-icon { width: 24px; height: 24px; } .rb-game-icon svg { width: 18px !important; height: 18px !important; } img.rb-coin { width: 14px; height: 14px; } } @media (max-width: 600px) { .rb-th-mult, .rb-mult-cell { display: none; } } /* ============================================================ 5. MOBILE β€” drawer + grid + topbar polish ============================================================ */ @media (max-width: 900px) { .app { display: block !important; grid-template-columns: none !important; } .app > div { width: 100%; } main.main { padding: 14px 12px !important; max-width: 100% !important; width: 100%; margin: 0 !important; } .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 78vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; transform: translateX(-100%) !important; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 200 !important; box-shadow: 6px 0 40px rgba(0,0,0,0.7) !important; border-right: 1px solid rgba(255,255,255,0.05) !important; } .sidebar.open { transform: translateX(0) !important; } .sidebar.open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: -1; } .sidebar[data-collapsed="true"] { width: 280px !important; max-width: 78vw !important; } .sidebar[data-collapsed="true"] .sidebar-pill-toggle, .sidebar[data-collapsed="true"] .sidebar-text, .sidebar[data-collapsed="true"] .sidebar-section, .sidebar[data-collapsed="true"] .sidebar-live { display: revert !important; } .sidebar[data-collapsed="true"] .sidebar-link { padding: 11px 14px !important; justify-content: flex-start !important; gap: 14px !important; margin: 0 0 2px 0 !important; } .sidebar[data-collapsed="true"] .sidebar-link i { width: 20px !important; font-size: 15px !important; } .sidebar[data-collapsed="true"] .sidebar-head { justify-content: flex-start !important; padding: 0 14px !important; gap: 10px !important; } .sidebar[data-collapsed="true"] .sidebar-section { padding: 16px 14px 8px !important; } .sidebar[data-collapsed="true"] .sidebar-live { padding: 16px 14px 8px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; } .topbar { padding: 0 10px !important; gap: 8px !important; height: 56px !important; } .topbar-brand { padding: 0 6px; height: 38px; gap: 8px; } .topbar-brand-logo { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; } .menu-btn { display: inline-flex !important; width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 10px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: var(--text) !important; flex-shrink: 0; } .balance-pill { height: 34px; } .balance-pill .currency-tab { padding: 0 8px; gap: 5px; } .balance-pill .amount { font-size: 11px; padding: 0 8px; } .balance-pill .deposit-btn { padding: 0 10px; font-size: 11px; } .user-pill { padding: 0 6px; height: 34px; } .user-pill .avatar { width: 22px; height: 22px; font-size: 10px; } .user-pill > span:not(.avatar):not(.flag) { display: none; } } @media (max-width: 600px) { .topbar-brand-text { display: none; } .topbar-brand { padding: 0 4px; } .topbar { padding: 0 8px !important; gap: 6px !important; } .balance-pill .amount { max-width: 80px; overflow: hidden; text-overflow: ellipsis; } } /* ============================================================ 6. MOBILE GAMES β€” canvas TOP, controls BELOW ============================================================ */ @media (max-width: 1024px) { .dice-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; } .dice-layout > section { order: 1 !important; } .dice-layout > aside.dice-control { order: 2 !important; } } @media (max-width: 768px) { .dice-layout > section > div:first-child { min-height: 300px !important; padding: 16px !important; } .dice-control { padding: 14px !important; } .dice-control .btn-win, .dice-control .btn-primary { height: 52px; font-size: 14px; } .coin-stage { padding: 18px 0; min-height: 200px; } .coin { width: 120px; height: 120px; } .coin .face span { font-size: 32px; } .mines-grid { gap: 5px; max-width: 100%; } .mine-tile { border-radius: 9px; font-size: 14px; } .crash-canvas { height: 220px; } .crash-mult { font-size: 52px; } .plinko-stage { padding: 8px !important; min-height: 280px; } .dice-result-display { margin-bottom: 18px; } .dice-slider-wrap { padding: 8px 6px 18px; } } /* Body scroll-lock when mobile drawer is open */ body.sidebar-open { overflow: hidden !important; } /* PATCH v5 END */ /* ========================================================================== PATCH v5b Β· Inline SVG icon helpers (.iconz class injected by icon()) ========================================================================== */ .iconz { display: inline-block; vertical-align: -2px; flex-shrink: 0; width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* By default the icon scales with the surrounding font-size */ } /* When an icon sits inside a button/link, give it a small right-margin so it doesn't kiss the text. Only when followed by text. */ .btn .iconz, .sidebar-link .iconz, .dropdown-item .iconz, .pill-btn .iconz { width: 1.1em; height: 1.1em; } /* Standalone icon (no sibling text) */ .iconz:only-child { vertical-align: middle; } /* Animated spin (for fa-spin equivalents we mapped to animate-spin) */ .iconz.animate-spin { animation: iconz-spin 1s linear infinite; } @keyframes iconz-spin { to { transform: rotate(360deg); } } /* When used in our nav/menu items, force fixed size for visual alignment */ .sidebar-link .iconz, .dropdown-item .iconz { width: 18px; height: 18px; } .sidebar[data-collapsed="true"] .sidebar-link .iconz { width: 22px; height: 22px; } /* Topbar caret icon */ .user-pill .iconz, .currency-tab .iconz, .balance-pill .iconz { width: 14px; height: 14px; } /* Inside .topbar-brand (logo): hide any iconz (logo uses text "IG") */ /* (No rule needed β€” brand has no icon) */ /* In .rb-table game-cell, force the SVG to fit the badge */ .rb-game-icon .iconz { width: 18px; height: 18px; } /* Crypto inline icon (img from spothq) */ .crypto-icon-inline { display: inline-block; vertical-align: middle; } /* PATCH v5b END */ /* ============================================================================ ULTRAMODERN 2026 PACK β€” Stake/Rainbet-inspired enhancements (Tailwind-friendly) ============================================================================ */ /* Glass-morphism card with subtle inner glow */ .glass-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 40px rgba(0,0,0,0.35); } .glass-card:hover { border-color: rgba(0, 229, 255,0.22); } /* Neon glow text */ .neon-cyan { text-shadow: 0 0 24px rgba(0, 229, 255,0.45), 0 0 48px rgba(0, 229, 255,0.25); } .neon-green { text-shadow: 0 0 24px rgba(0, 208, 132,0.45), 0 0 48px rgba(0, 208, 132,0.25); } .neon-gold { text-shadow: 0 0 24px rgba(247, 147, 26,0.45), 0 0 48px rgba(247, 147, 26,0.25); } /* Animated gradient border (used for hot game cards) */ .glow-border { position: relative; isolation: isolate; } .glow-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), rgba(0, 229, 255,0.55), rgba(0, 208, 132,0.55), rgba(247, 147, 26,0.45), rgba(255, 77, 77,0.45), rgba(0, 229, 255,0.55)); filter: blur(10px); opacity: 0; transition: opacity .35s ease; z-index: -1; } .glow-border:hover::before { opacity: .55; animation: glow-rotate 4s linear infinite; } @keyframes glow-rotate { to { --ang: 360deg; } } /* Hero spotlight (Stake-style large headline backdrop) */ .hero-modern { position: relative; padding: 56px 36px; border-radius: 28px; background: radial-gradient(ellipse at 18% 12%, rgba(0, 229, 255,0.18), transparent 55%), radial-gradient(ellipse at 82% 88%, rgba(0, 208, 132,0.12), transparent 55%), linear-gradient(180deg, #0B1226 0%, #050A18 100%); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; isolation: isolate; } .hero-modern::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(0, 229, 255,0.4), transparent 40%, rgba(0, 208, 132,0.3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; pointer-events: none; } .hero-modern::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 80% 20%, rgba(0, 229, 255,0.6), transparent), radial-gradient(2px 2px at 40% 80%, rgba(0, 208, 132,0.5), transparent); background-size: 400px 400px; pointer-events: none; opacity: .5; animation: stars-drift 20s linear infinite; } @keyframes stars-drift { to { background-position: 400px 400px; } } /* Pulse dot (LIVE) */ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(0, 208, 132,0.6); animation: pulse-glow 1.8s ease-out infinite; } @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(0, 208, 132,0.55); } 70% { box-shadow: 0 0 0 10px rgba(0, 208, 132,0); } 100% { box-shadow: 0 0 0 0 rgba(0, 208, 132,0); } } /* Stat tiles (admin / lobby) */ .stat-tile { position: relative; padding: 22px 22px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; overflow: hidden; transition: .25s ease; } .stat-tile:hover { transform: translateY(-2px); border-color: rgba(0, 229, 255,0.25); } .stat-tile .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; } .stat-tile .value { font: 800 32px 'JetBrains Mono', monospace; letter-spacing: -0.02em; margin-top: 6px; } .stat-tile .delta { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .stat-tile .deco { position: absolute; right: -10px; bottom: -10px; opacity: .12; font-size: 96px; pointer-events: none; } /* Modern table (admin) */ .tbl-modern { width: 100%; border-collapse: collapse; } .tbl-modern thead tr { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; background: rgba(255,255,255,0.025); } .tbl-modern th, .tbl-modern td { padding: 14px 18px; } .tbl-modern tbody tr { border-top: 1px solid var(--line); transition: background .15s ease; } .tbl-modern tbody tr:hover { background: rgba(255,255,255,0.02); } .tbl-modern .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .tbl-modern .pill-ok { background: rgba(0, 208, 132,0.12); color: var(--green); border: 1px solid rgba(0, 208, 132,0.25); } .tbl-modern .pill-warn { background: rgba(247, 147, 26,0.12); color: var(--gold); border: 1px solid rgba(247, 147, 26,0.25); } .tbl-modern .pill-bad { background: rgba(255, 77, 77,0.12); color: var(--red); border: 1px solid rgba(255, 77, 77,0.25); } .tbl-modern .pill-info { background: rgba(0, 229, 255,0.10); color: var(--cyan); border: 1px solid rgba(0, 229, 255,0.25); } /* Section heading */ .section-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-h h2 { font: 800 22px Geist, sans-serif; letter-spacing: -0.02em; } .section-h .sub { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } /* Game-card label chip */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; } .chip-cyan { background: rgba(0, 229, 255,0.12); color: var(--cyan); border: 1px solid rgba(0, 229, 255,0.25); } .chip-gold { background: rgba(247, 147, 26,0.14); color: var(--gold); border: 1px solid rgba(247, 147, 26,0.3); } .chip-green{ background: rgba(0, 208, 132,0.12); color: var(--green); border: 1px solid rgba(0, 208, 132,0.3); } .chip-red { background: rgba(255, 77, 77,0.12); color: var(--red); border: 1px solid rgba(255, 77, 77,0.3); } /* Provably Fair verifier card */ .pf-result-ok { background: linear-gradient(180deg, rgba(0, 208, 132,0.06), rgba(0, 208, 132,0.02)); border: 1px solid rgba(0, 208, 132,0.25); } .pf-result-bad{ background: linear-gradient(180deg, rgba(255, 77, 77,0.06), rgba(255, 77, 77,0.02)); border: 1px solid rgba(255, 77, 77,0.25); } /* Subtle scroll fade for mobile horizontal strips */ .scroll-fade { mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); } /* Animated focus ring (inputs) */ .ring-focus:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 229, 255,0.35), inset 0 0 0 1px rgba(0, 229, 255,0.6); } /* PATCH ultramodern END */ /* ============================================================================ MOBILE BOTTOM NAV β€” Stake-style bottom drawer toggler ============================================================================ */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: linear-gradient(180deg, rgba(11, 16, 32, 0.92), rgba(11, 16, 32, 0.98)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid rgba(255,255,255,0.08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, 1fr); gap: 0; } .mobile-bottom-nav .mbn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; background: transparent; border: 0; color: var(--text-muted); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: color 0.15s ease; border-radius: 8px; } .mobile-bottom-nav .mbn-item:hover { color: var(--text); } .mobile-bottom-nav .mbn-item.active { color: var(--cyan); } .mobile-bottom-nav .mbn-item.active::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: var(--cyan); border-radius: 0 0 4px 4px; } .mobile-bottom-nav .mbn-item { position: relative; } .mobile-bottom-nav .mbn-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .mobile-bottom-nav .mbn-icon svg, .mobile-bottom-nav .mbn-icon .iconz { width: 20px; height: 20px; } .mobile-bottom-nav .mbn-label { line-height: 1; } /* Visibility: only mobile */ @media (max-width: 900px) { .mobile-bottom-nav { display: grid; } /* Push page content above the bottom nav */ body { padding-bottom: 72px; } /* Hide topbar hamburger on mobile (the bottom nav has its own) */ .topbar .menu-btn { display: none !important; } } /* PATCH mobile-bottom-nav END */ /* ============================================================ */ /* ============ DICE v9 β€” Stake-style slider redesign ========== */ /* ============================================================ */ /* Top row: result on the left, recent rolls pills on the right */ .dice-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; } .dice-top-row .dice-result-display { text-align: left; margin: 0; flex: 1 1 auto; } .dice-recent-pills { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; overflow: hidden; max-width: 100%; } .dice-recent-pills .dpill { font: 800 13px 'JetBrains Mono', monospace; letter-spacing: -0.01em; padding: 7px 11px; border-radius: 8px; background: #1E2742; color: #D8DCE8; border: 1px solid rgba(255,255,255,0.04); flex-shrink: 0; min-width: 56px; text-align: center; animation: dpill-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .dice-recent-pills .dpill.win { background: #00D084; color: #06281a; border-color: rgba(0,0,0,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 14px rgba(0, 208, 132,0.22); } .dice-recent-pills .dpill.loss { background: #1E2742; color: #D8DCE8; } @keyframes dpill-in { from { opacity: 0; transform: translateY(-6px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 640px) { .dice-recent-pills { gap: 4px; } .dice-recent-pills .dpill { font-size: 11px; padding: 5px 8px; min-width: 48px; } .dice-top-row { margin-bottom: 18px; } } /* ============ New v9 SLIDER (Stake reference) ============ */ .dice-slider-v9 { padding: 18px 4px 6px; position: relative; } /* Ticks ABOVE the track */ .dice-slider-v9 .ticks { display: flex; justify-content: space-between; margin-bottom: 6px; padding: 0 4px; font: 800 13px 'JetBrains Mono', monospace; color: #EEEEF0; letter-spacing: -0.01em; } .dice-slider-v9 .ticks span { position: relative; text-align: center; flex: 0 0 auto; } .dice-slider-v9 .ticks span::after { /* Small downward chevron mark below each tick number, pointing at the rail */ content: ''; position: absolute; left: 50%; top: calc(100% + 4px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #202A46; transform: translateX(-50%); } /* Outer rounded "capsule" frame */ .dice-rail-outer { position: relative; height: 56px; border-radius: 999px; background: #202A46; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 8px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.35); padding: 14px; display: flex; align-items: center; user-select: none; } /* Inner rail = red on left, green on right of --target */ .dice-rail-inner { position: relative; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #FF4D4D 0%, #FF4D4D var(--target,50%), #00FF99 var(--target,50%), #00FF99 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.6); } .dice-rail-inner.under { background: linear-gradient(90deg, #00FF99 0%, #00FF99 var(--target,50%), #FF4D4D var(--target,50%), #FF4D4D 100%); } /* Rectangular blue thumb with grip lines (like Stake) */ .dice-thumb-v9 { position: absolute; top: 50%; left: var(--target,50%); width: 28px; height: 48px; border-radius: 8px; background: linear-gradient(180deg, #3aa6ff 0%, #1f7fd1 100%); transform: translate(-50%, -50%); cursor: grab; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.25), 0 4px 10px rgba(31,127,209,0.45); display: flex; align-items: center; justify-content: center; gap: 3px; transition: box-shadow 0.15s, transform 0.05s; } .dice-thumb-v9:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.97); } .dice-thumb-v9::before, .dice-thumb-v9::after, .dice-thumb-v9 i.grip { content: ''; width: 2px; height: 18px; background: rgba(255,255,255,0.55); border-radius: 2px; } .dice-thumb-v9 i.grip { display: inline-block; } /* Floating result marker (the white tick travelling along the rail) */ .dice-marker-v9 { position: absolute; top: -2px; width: 4px; height: 12px; background: #ffffff; border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 8px #fff, 0 0 18px var(--cyan); pointer-events: none; display: none; transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Native range overlaid invisibly for accessibility */ .dice-slider-v9 input[type="range"].overlay { position: absolute; inset: 18px 4px auto; height: 56px; width: calc(100% - 8px); opacity: 0; cursor: pointer; z-index: 5; } /* Hide the OLD slider markup if it's present alongside the new one */ .dice-slider-wrap.legacy { display: none !important; } /* ============================================================ */ /* ====== PROVABLY FAIR β€” Stake-style modal (Seeds + Verify) === */ /* ============================================================ */ /* Force the PF modal into the dark "obsidian" theme used in the reference */ #pfModal .modal { background: #0f1729; border-color: rgba(255,255,255,0.06); } #pfModal .modal-head { border-bottom-color: rgba(255,255,255,0.05); } #pfModal .modal-body { padding: 26px 28px 30px; } .pf-v9-tabs { display: flex; gap: 0; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; } .pf-v9-tabs button { flex: 1; background: transparent; height: 44px; font: 800 15px/1 'Geist', 'Inter', sans-serif; letter-spacing: 0.01em; color: #D8DCE8; position: relative; cursor: pointer; transition: color 0.15s; } .pf-v9-tabs button.active { color: #8b5cf6; } .pf-v9-tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #8b5cf6; border-radius: 2px; } .pf-v9-tabs button:hover:not(.active) { color: #EEEEF0; } /* Field rows for the Seeds tab */ .pf-v9-field { margin-bottom: 18px; } .pf-v9-field-label { font: 800 13px/1 'Geist', 'Inter', sans-serif; color: #ffffff; margin-bottom: 8px; display: block; } .pf-v9-input-wrap { position: relative; display: flex; align-items: stretch; background: #131d33; border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; overflow: hidden; } .pf-v9-input { flex: 1; background: transparent; border: 0; outline: 0; color: #9DA0A5; font: 600 13px 'JetBrains Mono', monospace; padding: 14px 16px; letter-spacing: 0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-v9-input:focus { color: #EEEEF0; } .pf-v9-input.input-num { color: #EEEEF0; } .pf-v9-copy { background: transparent; border: 0; color: #D8DCE8; padding: 0 16px; cursor: pointer; transition: color 0.15s, background 0.15s; font-size: 14px; } .pf-v9-copy:hover { color: #8b5cf6; background: rgba(139,92,246,0.06); } .pf-v9-rotate-title { font: 800 22px/1.2 'Geist', 'Inter', sans-serif; color: #EEEEF0; margin: 28px 0 18px; } .pf-v9-change-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; margin-bottom: 18px; } .pf-v9-change-row .pf-v9-input-wrap { margin: 0; } .pf-v9-change-btn { background: #8b5cf6; color: #ffffff; border: 0; border-radius: 10px; padding: 0 26px; font: 800 14px/1 'Geist', 'Inter', sans-serif; letter-spacing: 0.01em; cursor: pointer; transition: background 0.15s, transform 0.05s; } .pf-v9-change-btn:hover { background: #7A5FFF; } .pf-v9-change-btn:active { transform: scale(0.97); } /* Verify tab β€” slider preview */ .pf-v9-verify-preview { background: #0F1425; border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 32px 28px 38px; margin-bottom: 26px; position: relative; } /* When a Stake-style bd-* visualisation is rendered into a pfv9 preview pane (coinflip / mines / plinko / crash), give the container room to breathe and reset its own padding so the bd-viz handles spacing internally. */ .pf-v9-verify-preview .pfv9-bd-host { padding: 0; min-height: 180px; display: flex; align-items: center; justify-content: center; } .pf-v9-verify-preview .pfv9-bd-host .bd-viz { width: 100%; } .pf-v9-verify-score { display: flex; justify-content: center; margin-bottom: 18px; } .pf-v9-verify-score-pill { background: transparent; border: 2px solid #FF4D4D; border-radius: 8px; padding: 8px 16px; font: 800 18px 'JetBrains Mono', monospace; color: #ffffff; min-width: 84px; text-align: center; letter-spacing: -0.01em; } .pf-v9-verify-score-pill.win { border-color: #00D084; } .pf-v9-verify-preview .dice-slider-v9 { padding: 6px 0 6px; pointer-events: none; } .pf-v9-verify-preview .dice-slider-v9 .ticks { order: 2; margin: 10px 0 0; } .pf-v9-verify-preview .dice-slider-v9 .ticks span::after { display: none; } .pf-v9-verify-preview .dice-slider-v9 .ticks span::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #202A46; transform: translateX(-50%); } .pf-v9-verify-preview .dice-rail-outer { /* Smaller, simpler outer in the preview */ height: 40px; padding: 10px; } .pf-v9-verify-preview .dice-thumb-v9 { /* Round purple dot to match the reference exactly */ width: 20px; height: 20px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,0.15), 0 2px 6px rgba(0,0,0,0.4); } .pf-v9-verify-preview .dice-thumb-v9::before, .pf-v9-verify-preview .dice-thumb-v9::after, .pf-v9-verify-preview .dice-thumb-v9 i.grip { display: none; } /* Verify form fields */ .pf-v9-select { width: 100%; background: #131d33; border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; color: #EEEEF0; padding: 14px 40px 14px 16px; font: 700 14px/1 'Geist', 'Inter', sans-serif; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; } .pf-v9-select:focus { outline: 0; border-color: rgba(139,92,246,0.4); } @media (max-width: 640px) { #pfModal .modal-body { padding: 20px 18px 24px; } .pf-v9-rotate-title { font-size: 18px; margin: 22px 0 14px; } .pf-v9-change-row { grid-template-columns: 1fr; } .pf-v9-change-btn { padding: 12px 18px; } .pf-v9-verify-preview { padding: 22px 16px 28px; } } /* ============================================================ */ /* ============ DICE v10 β€” result pill + spacing =============== */ /* ============================================================ */ /* Separation between the slider and the stat row */ .dice-slider-v9 { margin-bottom: 56px; } @media (max-width: 640px) { .dice-slider-v9 { margin-bottom: 38px; } } /* Floating result pill that appears ABOVE the slider thumb when a result lands */ .dice-result-pill { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: #0b1426; color: #ffffff; font: 800 17px 'JetBrains Mono', monospace; letter-spacing: -0.01em; padding: 10px 14px; border-radius: 10px; border: 2px solid #00FF99; white-space: nowrap; pointer-events: none; display: none; z-index: 4; box-shadow: 0 8px 24px rgba(0,0,0,0.5); transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .dice-result-pill.show { display: inline-block; animation: dpill-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .dice-result-pill.loss { border-color: #FF4D4D; } .dice-result-pill::after { content: ''; position: absolute; left: 50%; top: 100%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; color: #00FF99; transform: translateX(-50%); } .dice-result-pill.loss::after { color: #FF4D4D; } @keyframes dpill-drop { from { opacity: 0; transform: translate(-50%, -8px) scale(0.85); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* Hide the global big "β€” AWAITING ROLL" idle label. The result pill on the slider IS the result indicator. */ .dice-result-display { display: none !important; } /* ============================================================ */ /* =========== UNIVERSAL "recent results pills" strip ========== */ /* (used by Crash, Coinflip, Mines β€” top-right of canvas) ====== */ /* ============================================================ */ .game-pills-row { position: absolute; top: 18px; right: 18px; display: flex; gap: 6px; z-index: 3; pointer-events: none; max-width: calc(100% - 36px); overflow: hidden; } .game-pill { font: 800 12px 'JetBrains Mono', monospace; padding: 6px 10px; border-radius: 8px; background: #1E2742; color: #D8DCE8; border: 1px solid rgba(255,255,255,0.04); min-width: 50px; text-align: center; white-space: nowrap; flex-shrink: 0; animation: dpill-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .game-pill.win { background: #00D084; color: #06281a; border-color: rgba(0,0,0,0.18); box-shadow: 0 4px 10px rgba(0, 208, 132,0.22); } .game-pill.loss { background: #1E2742; color: #D8DCE8; } .game-pill.jackpot { background: linear-gradient(135deg, #F7931A, #ff6b35); color: #1a0a00; box-shadow: 0 4px 10px rgba(247, 147, 26,0.28); } @media (max-width: 640px) { .game-pills-row { top: 10px; right: 10px; gap: 4px; } .game-pill { font-size: 10px; padding: 4px 7px; min-width: 42px; } } /* ============================================================ */ /* ============ MINES β€” center multiplier badge ================ */ /* ============================================================ */ .mines-center-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: auto; /* clickable: opens the Provably Fair verifier */ display: none; flex-direction: column; border-radius: 14px; overflow: hidden; min-width: 180px; box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); animation: mines-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.18s ease, box-shadow 0.18s ease; } .mines-center-badge:hover { transform: translate(-50%, -50%) scale(1.035); box-shadow: 0 22px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(0, 229, 255,0.45), 0 0 28px rgba(0, 229, 255,0.25); } .mines-center-badge:active { transform: translate(-50%, -50%) scale(0.985); } .mines-center-badge.show { display: flex; } .mines-center-badge .mb-top { background: #00D084; color: #06281a; font: 900 30px/1 'JetBrains Mono', monospace; letter-spacing: -0.02em; padding: 18px 22px; text-align: center; } .mines-center-badge .mb-bottom { background: #0b1426; color: #EEEEF0; font: 700 14px/1 'JetBrains Mono', monospace; padding: 12px 16px; display: flex; align-items: center; justify-content: space-around; gap: 14px; } .mines-center-badge .mb-bottom .ico { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #3a8bff, #1f5fd1); margin-right: 6px; vertical-align: middle; } .mines-center-badge .mb-bottom .gem-ico { background: linear-gradient(135deg, #ffd24a, #c57e00); border-radius: 4px; transform: rotate(45deg); } @keyframes mines-badge-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .mines-grid-wrap { position: relative; width: 100%; display: grid; place-items: center; } /* Hide the legacy minesMsg label entirely */ #minesMsg { display: none !important; } /* ============================================================ */ /* ============== COINFLIP v2 β€” ultramodern ==================== */ /* ============================================================ */ .cf2-stage { position: relative; padding: 28px 28px 40px; background: radial-gradient(ellipse at 50% 30%, rgba(93, 97, 241,0.25), transparent 60%), linear-gradient(180deg, #161b4a 0%, #0d1230 100%); border-radius: 16px; min-height: 540px; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .cf2-stage::before { /* soft floating blobs */ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,0.045), transparent 35%), radial-gradient(circle at 78% 68%, rgba(255,255,255,0.035), transparent 38%); pointer-events: none; } .cf2-header { text-align: center; font: 700 16px/1 'Geist', 'Inter', sans-serif; color: #ffffff; margin: 4px 0 16px; letter-spacing: 0.01em; position: relative; } .cf2-picker { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; position: relative; width: 100%; max-width: 560px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; scroll-snap-type: x mandatory; } .cf2-picker::-webkit-scrollbar { display: none; } .cf2-coin-pick { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; position: relative; scroll-snap-align: center; transition: transform 0.15s, filter 0.15s; display: grid; place-items: center; } .cf2-coin-pick:hover { transform: translateY(-2px); } .cf2-coin-pick.active { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(255,210,80,0.55)); } .cf2-coin-pick .pick-coin { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #d4d4d4, #7C8190); display: grid; place-items: center; color: rgba(0,0,0,0.55); font-weight: 900; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.5); } .cf2-coin-pick.gold .pick-coin { background: linear-gradient(135deg, #ffd24a, #c57e00); } .cf2-coin-pick.silver .pick-coin { background: linear-gradient(135deg, #EEEEF0, #7C8190); } .cf2-coin-pick.bronze .pick-coin { background: linear-gradient(135deg, #d4814a, #6b3a0a); } .cf2-coin-pick.cosmic .pick-coin { background: radial-gradient(circle at 30% 30%, #ffffff, transparent 30%), linear-gradient(135deg, #5b54ff, #c33aff); color: #fff; } .cf2-coin-pick .mult { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font: 700 10px 'JetBrains Mono', monospace; color: #D8DCE8; } .cf2-coin-pick.active .mult { color: #ffd24a; } .cf2-arena { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 12px; } .cf2-arena .cf2-side-card { width: 92px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 14px 8px; text-align: center; margin: 0 -22px; z-index: 1; } .cf2-side-card .label { font-size: 11px; font-weight: 700; color: #9DA0A5; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .cf2-side-card .mini-coin { width: 30px; height: 30px; margin: 0 auto 10px; border-radius: 50%; background: linear-gradient(135deg, #ffd24a, #c57e00); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3); } .cf2-side-card .val { font: 800 14px 'JetBrains Mono', monospace; color: #ffffff; } .cf2-side-card .val.gold { color: #ffd24a; } .cf2-big-coin-wrap { position: relative; z-index: 2; perspective: 1200px; width: 230px; height: 230px; display: grid; place-items: center; } .cf2-big-coin { width: 220px; height: 220px; border-radius: 50%; position: relative; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(0.18, 0.55, 0.4, 1); filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)); } .cf2-big-coin .cf2-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; box-shadow: inset 0 0 0 6px rgba(0,0,0,0.25), inset 0 12px 24px rgba(255,255,255,0.18), inset 0 -12px 24px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.5); } .cf2-big-coin .cf2-face.heads { background: radial-gradient(circle at 35% 30%, #FFF1A8 0%, transparent 38%), radial-gradient(circle at 65% 70%, #6F4A0A 0%, transparent 55%), linear-gradient(135deg, #FFD24A 0%, #F7931A 45%, #C57E00 80%); } .cf2-big-coin .cf2-face.tails { background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, transparent 38%), radial-gradient(circle at 65% 70%, #4B5563 0%, transparent 55%), linear-gradient(135deg, #EEEEF0 0%, #C0C5CE 45%, #8A93A6 80%); transform: rotateY(180deg); } .cf2-big-coin .cf2-face .star { font-size: 110px; color: rgba(0,0,0,0.55); line-height: 1; text-shadow: 0 4px 0 rgba(255,255,255,0.18); } .cf2-big-coin.flipping { animation: cf2-flip 1.6s cubic-bezier(0.18, 0.55, 0.4, 1) forwards; } @keyframes cf2-flip { 0% { transform: rotateY(0) translateY(0) scale(1); } 20% { transform: rotateY(900deg) translateY(-50px) scale(1.04); } 50% { transform: rotateY(1800deg) translateY(-80px) scale(1.06); } 80% { transform: rotateY(2880deg) translateY(-20px) scale(1.02); } 100% { transform: rotateY(3600deg) translateY(0) scale(1); } } .cf2-big-coin.land-tails { transform: rotateY(180deg); } .cf2-big-coin.land-heads { transform: rotateY(0); } .cf2-side-buttons { margin-top: 22px; display: flex; gap: 12px; width: 100%; max-width: 380px; } .cf2-side-btn { flex: 1; height: 52px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.06); color: #ffffff; font: 800 14px/1 'Geist', 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: 0.15s; } .cf2-side-btn:hover { background: rgba(255,255,255,0.08); } .cf2-side-btn.active { border-color: #ffd24a; background: rgba(255,210,80,0.08); box-shadow: 0 0 0 3px rgba(255,210,80,0.08); } .cf2-side-btn .face-coin { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ffd24a, #c57e00); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } .cf2-side-btn.tails-btn .face-coin { background: linear-gradient(135deg, #EEEEF0, #7C8190); } .cf2-result-msg { margin-top: 18px; font: 800 14px 'Geist', 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #9DA0A5; text-align: center; } .cf2-result-msg.win { color: #00D084; } .cf2-result-msg.loss { color: #FF4D4D; } @media (max-width: 640px) { .cf2-stage { padding: 22px 14px 32px; min-height: 480px; } .cf2-big-coin-wrap, .cf2-big-coin { width: 180px; height: 180px; } .cf2-big-coin .cf2-face .star { font-size: 90px; } .cf2-arena .cf2-side-card { width: 76px; margin: 0 -18px; padding: 10px 6px; } } /* ============================================================ */ /* ============ V11 β€” Mines topbar + currency icon ============= */ /* ============================================================ */ /* Mines: dedicated topbar that sits ABOVE the grid (no overlap) */ .mines-canvas-topbar { display: flex; align-items: center; justify-content: flex-end; padding: 14px 20px 0; min-height: 36px; } .mines-pills-inline { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; max-width: 100%; } .mines-pills-inline .game-pill { font: 800 12px 'JetBrains Mono', monospace; padding: 6px 10px; border-radius: 8px; background: #1E2742; color: #D8DCE8; border: 1px solid rgba(255,255,255,0.04); min-width: 50px; text-align: center; flex-shrink: 0; animation: dpill-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .mines-pills-inline .game-pill.win { background: #00D084; color: #06281a; border-color: rgba(0,0,0,0.18); box-shadow: 0 4px 10px rgba(0, 208, 132,0.22); } .mines-pills-inline .game-pill.loss { background: #1E2742; color: #D8DCE8; } @media (max-width: 640px) { .mines-canvas-topbar { padding: 10px 12px 0; } .mines-pills-inline .game-pill { font-size: 10px; padding: 4px 7px; min-width: 42px; } } /* Currency icon inside the mines center badge */ .mines-center-badge .mb-bottom { gap: 18px; } .mines-center-badge .mb-payout-wrap, .mines-center-badge .mb-gems-wrap { display: inline-flex; align-items: center; gap: 8px; } .mines-center-badge .mb-cur-icon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } /* Coinflip: smaller side cards now that we removed picker + extra buttons */ .cf2-stage { min-height: 460px; padding-top: 36px; } .cf2-arena { margin-top: 0; } .cf2-side-card .mini-coin-svg { display: grid; place-items: center; margin: 0 auto 10px; } .cf2-result-msg { margin-top: 36px; } /* Coinflip pills β€” SVG content alignment */ .game-pill.cf-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 6px 8px; } .game-pill.cf-pill svg { display: block; } /* ============================================================ */ /* ====== COINFLIP v4 β€” clean 2026 design (BTC/ETH 2D) ======== */ /* ============================================================ */ .cf3-stage { position: relative; padding: 30px 20px 36px; background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(247, 147, 26,0.18), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(98,126,234,0.20), transparent 70%), linear-gradient(180deg, #0a0e26 0%, #060818 100%); border-radius: 16px; min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; } .cf3-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 25%, rgba(255,255,255,0.04), transparent 30%), radial-gradient(circle at 80% 75%, rgba(255,255,255,0.03), transparent 30%); pointer-events: none; } .cf3-info { display: flex; gap: 14px; margin-bottom: 8px; width: 100%; max-width: 520px; justify-content: space-between; } .cf3-side-card { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .cf3-side-label { font: 800 11px/1 'Geist','Inter',sans-serif; color: #9DA0A5; letter-spacing: 0.12em; } .cf3-side-icon { width: 28px; height: 28px; } .cf3-side-mult { font: 800 13px/1 'JetBrains Mono', monospace; color: #ffd24a; } .cf3-coin-floor { position: relative; width: 240px; height: 240px; display: grid; place-items: center; perspective: 1400px; margin: 18px auto; z-index: 2; } /* Animated glow halo behind the coin */ .cf3-coin-glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle at center, rgba(247, 147, 26,0.35) 0%, rgba(247, 147, 26,0.10) 40%, transparent 70%); filter: blur(30px); animation: cf3-pulse 3s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes cf3-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.08); } } .cf3-coin { position: relative; width: 220px; height: 220px; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 1.6s cubic-bezier(0.18, 0.55, 0.4, 1); z-index: 2; } .cf3-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; overflow: hidden; filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)); } .cf3-face.heads { /* front */ } .cf3-face.tails { transform: rotateY(180deg); } .cf3-svg-coin { width: 100%; height: 100%; display: block; } /* Sweeping specular shine across the coin face */ .cf3-shine { position: absolute; top: -20%; left: -60%; width: 60%; height: 140%; background: linear-gradient( 100deg, transparent 0%, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%, transparent 100% ); transform: rotate(20deg); pointer-events: none; animation: cf3-shine 4.5s ease-in-out infinite; } @keyframes cf3-shine { 0%, 88% { left: -60%; opacity: 0; } 92% { opacity: 1; } 100% { left: 130%; opacity: 0; } } /* Flip "toss" β€” coin jumps up while rotating */ .cf3-coin.flipping { animation: cf3-toss 1.6s cubic-bezier(0.18, 0.55, 0.4, 1) forwards; } @keyframes cf3-toss { 0% { translate: 0 0; } 30% { translate: 0 -60px; } 55% { translate: 0 -90px; } 80% { translate: 0 -30px; } 100% { translate: 0 0; } } .cf3-result-msg { font: 800 13px/1 'Geist','Inter',sans-serif; letter-spacing: 0.10em; text-transform: uppercase; color: #9DA0A5; text-align: center; margin-top: 14px; z-index: 2; } .cf3-result-msg.win { color: #00D084; } .cf3-result-msg.loss { color: #FF4D4D; } @media (max-width: 640px) { .cf3-stage { min-height: 480px; padding: 20px 14px 28px; } .cf3-info { max-width: 100%; gap: 10px; } .cf3-side-card { padding: 10px 6px 8px; } .cf3-coin-floor { width: 180px; height: 180px; } .cf3-coin { width: 180px; height: 180px; } } /* ============================================================ */ /* ============ MINES β€” mobile fixes ============================ */ /* ============================================================ */ /* Cap the center badge size on small viewports so it doesn't dominate the grid */ @media (max-width: 640px) { .mines-center-badge { min-width: 140px; } .mines-center-badge .mb-top { font-size: 22px; padding: 14px 16px; } .mines-center-badge .mb-bottom { font-size: 12px; padding: 10px 12px; gap: 12px; } /* Canvas inner: remove the huge min-h:420px on mobile that was creating the * massive empty area between the topbar pills and the grid. */ .mines-canvas-inner { min-height: 0 !important; padding-top: 12px !important; } .mines-canvas-topbar { padding: 12px 14px 0; } /* Cashout button just replaces BET in-place β€” no sticky/fixed behavior. */ } /* ============================================================ */ /* ====== PF Verify β€” per-game preview panes ================== */ /* ============================================================ */ .pfv9-preview-pane { width: 100%; } /* Crash preview */ .pfv9-crash-preview { padding: 28px 0 18px; text-align: center; } .pfv9-crash-num { font: 900 56px/1 'JetBrains Mono', monospace; color: #FF4D4D; letter-spacing: -0.02em; } .pfv9-crash-sub { margin-top: 10px; font: 800 11px 'Geist','Inter',sans-serif; letter-spacing: 0.12em; color: #9DA0A5; text-transform: uppercase; } /* Coinflip preview */ .pfv9-cf-preview { padding: 18px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .pfv9-cf-coin { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.20), transparent 45%), linear-gradient(135deg, #1a1f3a 0%, #0d1230 100%); border: 4px solid #f7941e; display: grid; place-items: center; box-shadow: inset 0 -8px 14px rgba(0,0,0,0.40), inset 0 8px 12px rgba(255,255,255,0.10), 0 12px 24px rgba(0,0,0,0.45); transition: border-color 0.25s; } .pfv9-cf-coin img { width: 68px; height: 68px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .pfv9-cf-label { font: 800 14px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; color: #9DA0A5; } /* Mines preview */ .pfv9-mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 240px; margin: 6px auto 12px; } .pfv9-mt { aspect-ratio: 1; border-radius: 7px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); display: grid; place-items: center; font: 700 13px 'JetBrains Mono', monospace; color: rgba(255,255,255,0.25); } .pfv9-mt.bomb { background: rgba(255, 77, 77,0.18); border-color: rgba(255, 77, 77,0.50); color: #FF5A5A; } .pfv9-mt.safe { background: rgba(0, 255, 153,0.10); border-color: rgba(0, 255, 153,0.30); } .pfv9-mines-sub { text-align: center; font: 700 11px 'JetBrains Mono', monospace; color: #9DA0A5; letter-spacing: 0.04em; word-break: break-all; padding: 0 6px; } /* Plinko preview */ .pfv9-plinko-preview { padding: 28px 0 18px; text-align: center; } .pfv9-plinko-mult { font: 900 56px/1 'JetBrains Mono', monospace; letter-spacing: -0.02em; color: #9DA0A5; } .pfv9-plinko-sub { margin-top: 10px; font: 800 11px 'Geist','Inter',sans-serif; letter-spacing: 0.12em; color: #9DA0A5; text-transform: uppercase; } /* ============================================================ */ /* ====== Coinflip v5 β€” pills row + BTC/ETH side accents ====== */ /* ============================================================ */ /* Pills sit ABOVE the cf3-info row (no overlap on any viewport) */ .cf3-pills-row { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 6px; width: 100%; max-width: 520px; margin: 0 auto 6px; min-height: 28px; z-index: 3; } .cf3-pills-row .game-pill { min-width: 36px; padding: 5px 8px; } .cf3-pills-row .game-pill img { display: block; } /* When the canvas has cf3-stage, kill the absolute .game-pills-row inside coinflip */ .cf3-stage > .game-pills-row { display: none !important; } /* BTC / ETH accent for the side picker (replaces the generic cyan ring) */ .cf-side-btn.cf-side-btc.active { border-color: rgba(247, 147, 26,0.85); background: rgba(247, 147, 26,0.08); box-shadow: 0 0 0 3px rgba(247, 147, 26,0.12); } .cf-side-btn.cf-side-eth.active { border-color: rgba(98,126,234,0.85); background: rgba(98,126,234,0.08); box-shadow: 0 0 0 3px rgba(98,126,234,0.12); } .cf-side-btn:hover { border-color: rgba(255,255,255,0.18); } /* Mobile tweaks */ @media (max-width: 640px) { .cf3-pills-row { justify-content: center; } .cf-side-btn .face-mini { width: 48px; height: 48px; } } /* The legacy mines topbar + inline pills are gone now in v15 β€” defensive hide * in case any cached fragment renders them after upload. */ .mines-canvas-topbar, .mines-pills-inline { display: none !important; } /* ============================================================ */ /* ====== Bet pill tooltip (hover) + click to verify ========== */ /* ============================================================ */ .bet-pill { position: relative; cursor: pointer; } .bet-pill::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 8px; height: 8px; background: #0F1425; border: 1px solid rgba(255,255,255,0.08); border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 91; } .bet-pill:hover::after { opacity: 1; } #betPillTooltip { position: fixed; z-index: 90; background: #0F1425; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; min-width: 240px; max-width: 320px; box-shadow: 0 16px 40px rgba(0,0,0,0.55); font: 600 12px 'JetBrains Mono', monospace; color: #D8DCE8; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; } #betPillTooltip.show { opacity: 1; transform: translateY(0); } #betPillTooltip .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; } #betPillTooltip .row .k { font-size: 10px; color: #9DA0A5; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; } #betPillTooltip .row .v { color: #EEEEF0; font-weight: 700; letter-spacing: -0.01em; text-align: right; font-size: 12px; word-break: break-all; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } #betPillTooltip .row .v.win { color: #00D084; } #betPillTooltip .row .v.loss { color: #FF4D4D; } #betPillTooltip .row .v.mono { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #9DA0A5; } #betPillTooltip .hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 10px; color: #8b5cf6; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; font-weight: 800; } /* ========================================================================== IGAXMING β€” PATCH v6 Β· 2026-01 - Sticky sidebar (desktop) that never gets cut off, with own internal scroll - Wallet modal: mobile-friendly tabs, responsive grid, safe QR sizing - Modern profile page (2026 dashboard look) ========================================================================== */ /* --- 1. Sidebar truly sticky on desktop --------------------------------- */ @media (min-width: 901px) { /* The grid container must NOT itself be a scroll container; the page (html/body) is. min-width:0 on the main column prevents games from forcing the row taller than the viewport in a way that breaks sticky. */ .app { align-items: stretch; } .app > :not(.sidebar) { min-width: 0; } aside.sidebar { position: sticky !important; top: 0 !important; align-self: start !important; /* don't let the grid stretch us past 100vh */ height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; /* delegate scroll to .sidebar-scroll */ z-index: 30; } .sidebar-scroll { flex: 1 1 auto !important; min-height: 0 !important; /* required for flex children to scroll */ overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 28px !important; } } /* --- 2. Wallet modal mobile / small-screen polish ------------------------ */ @media (max-width: 700px) { #walletModal .modal { max-width: 100% !important; border-radius: 18px 18px 0 0; margin: auto 0 0; min-height: 92vh; } #walletModal .modal-head { padding: 14px 16px !important; } #walletModal .modal-head h2 { font-size: 15px; } #walletModal .modal-body { padding: 14px 14px 24px !important; max-height: calc(100dvh - 60px) !important; } /* Make the wallet tabs horizontally scrollable instead of clipping labels */ #walletModal .wallet-mtabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px !important; padding: 4px !important; border-bottom: 0 !important; margin-bottom: 14px !important; } #walletModal .wallet-mtabs::-webkit-scrollbar { display: none; } #walletModal .wallet-mtabs button { flex: 0 0 auto !important; min-width: max-content; padding: 10px 14px !important; font-size: 12px !important; white-space: nowrap; border-bottom: 0 !important; } /* Networks: 2 columns, never overflow */ #walletModal .wm-net-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } #walletModal .wm-net-tile { padding: 10px 12px !important; } #walletModal .wm-net-tile .label { font-size: 12px !important; } /* Currency selectors stack better */ #walletModal .wm-select { padding: 10px 12px !important; gap: 8px !important; } #walletModal .wm-select-name .symbol { font-size: 13px !important; } #walletModal .wm-select-name .full { font-size: 10px !important; } #walletModal .wm-select-bal { font-size: 12px !important; } #walletModal .wm-select-bal .unit { font-size: 9px !important; } /* Inputs and addresses scale safely */ #walletModal .wm-input { font-size: 13px !important; padding-right: 64px !important; } #walletModal .wm-input-suffix { gap: 2px !important; right: 6px !important; } #walletModal .wm-pct-btn { padding: 0 6px !important; font-size: 10px !important; height: 24px !important; } #walletModal .wm-address { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; font-size: 11px !important; } #walletModal .wm-address button { width: 100%; justify-content: center; padding: 8px 10px !important; } #walletModal .wm-qr-wrap { padding: 8px 0 14px !important; } #walletModal .wm-qr { padding: 8px !important; } #walletModal .wm-qr canvas, #walletModal .wm-qr img { width: 144px !important; height: 144px !important; } /* Generic deposit/withdraw row spacing */ #walletModal .wm-row { margin-bottom: 12px !important; } } /* Guarantee the QR canvas is laid out at the right size even before draw */ .wm-qr canvas, .wm-qr img { width: 168px; height: 168px; display: block; } /* --- 3. Profile (v13) β€” 2026-style cards -------------------------------- */ .profile-wrap { max-width: 1080px; margin: 0 auto; padding: 8px 0 60px; } .profile-hero { position: relative; padding: 28px 28px 22px; border-radius: 22px; background: radial-gradient(1200px 200px at 0% 0%, rgba(0, 229, 255,0.10), transparent 55%), radial-gradient(800px 200px at 100% 100%, rgba(0, 208, 132,0.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 18px; } .profile-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 38px 38px; opacity: .25; pointer-events: none; mask-image: radial-gradient(800px 200px at 50% 0%, #000, transparent 70%); } .profile-hero-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; } .profile-avatar { width: 84px; height: 84px; border-radius: 22px; background: linear-gradient(135deg, #00E5FF, #1A65F6 55%, #00D084); display: grid; place-items: center; color: #1A2035; font-weight: 900; font-size: 30px; letter-spacing: -0.02em; box-shadow: 0 0 0 1px rgba(0, 229, 255,0.25), 0 12px 30px -10px rgba(0, 229, 255,0.55); } .profile-hero h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 900; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; } .profile-hero h1 .role-pill { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border-radius: 999px; color: #1A2035; background: linear-gradient(135deg, #00E5FF, #00D084); } .profile-meta { color: rgba(255,255,255,0.55); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; } .profile-meta i { color: #00E5FF; opacity: .8; margin-right: 6px; } .profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 18px; position: relative; } @media (max-width: 720px) { .profile-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } } .profile-stat { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 4px; } .profile-stat .k { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); display: inline-flex; align-items: center; gap: 6px; } .profile-stat .v { font: 800 16px 'JetBrains Mono', monospace; color: #fff; word-break: break-all; } .profile-stat .v.mono { letter-spacing: -0.01em; } .profile-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 980px) { .profile-grid { grid-template-columns: 1.15fr 1fr; } } .profile-card { position: relative; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); border: 1px solid rgba(255,255,255,0.06); } .profile-card h2 { font-size: 14px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #fff; } .profile-card h2 .ic { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 229, 255,0.08); color: #00E5FF; font-size: 13px; } .profile-card h2 .ic.green { background: rgba(0, 208, 132,0.08); color: #00D084; } .profile-card h2 .ic.gold { background: rgba(247, 147, 26,0.10); color: #F7931A; } .profile-card h2 .ic.rose { background: rgba(255, 77, 77,0.10); color: #FF5A5A; } .profile-card h2 .ic.violet{ background: rgba(139,92,246,0.10); color: #a78bfa; } .profile-card .desc { color: rgba(255,255,255,0.5); font-size: 12.5px; margin: -6px 0 16px; line-height: 1.5; } .pf-field { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 10px; } .pf-field .pf-k { width: 130px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); flex-shrink: 0; } .pf-field .pf-v { flex: 1; min-width: 0; color: #fff; font-size: 14px; word-break: break-word; } .pf-field .pf-action { margin-left: auto; } @media (max-width: 600px) { .pf-field { flex-wrap: wrap; } .pf-field .pf-k { width: 100%; } .pf-field .pf-action { margin-left: 0; width: 100%; } .pf-field .pf-action .pf-btn { width: 100%; justify-content: center; } } .pf-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.08); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; } .pf-btn:hover { background: rgba(0, 229, 255,0.1); border-color: rgba(0, 229, 255,0.4); color: #00E5FF; transform: translateY(-1px); } .pf-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .pf-btn.primary { background: linear-gradient(135deg, #00E5FF, #00D084); color: #1A2035; border-color: transparent; } .pf-btn.primary:hover { filter: brightness(1.08); color: #1A2035; } .pf-btn.danger { color: #FF5A5A; } .pf-btn.danger:hover { background: rgba(255, 77, 77,0.1); border-color: rgba(255, 77, 77,0.4); color: #FF5A5A; } .pf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .pf-badge.ok { background: rgba(0, 208, 132,0.10); color: #00D084; border: 1px solid rgba(0, 208, 132,0.25); } .pf-badge.warn { background: rgba(247, 147, 26,0.10); color: #F7931A; border: 1px solid rgba(247, 147, 26,0.25); } .pf-badge.danger{ background: rgba(255, 77, 77,0.10); color: #FF5A5A; border: 1px solid rgba(255, 77, 77,0.25); } .pf-badge.muted { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.06); } .pf-toggle { width: 44px; height: 24px; flex-shrink: 0; position: relative; cursor: pointer; display: inline-block; } .pf-toggle input { position: absolute; opacity: 0; pointer-events: none; } .pf-toggle .slot { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.08); transition: background 0.22s ease; } .pf-toggle .dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .pf-toggle input:checked + .slot { background: linear-gradient(135deg, #00E5FF, #00D084); } .pf-toggle input:checked + .slot + .dot { transform: translateX(20px); } .pf-select { height: 38px; padding: 0 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: #fff; font-size: 13px; cursor: pointer; font-family: inherit; } .pf-select:focus { outline: 0; border-color: rgba(0, 229, 255,0.4); } .pf-input { height: 42px; padding: 0 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: #fff; font-size: 14px; outline: 0; transition: border-color 0.15s; flex: 1; font-family: inherit; } .pf-input:focus { border-color: rgba(0, 229, 255,0.5); background: rgba(255,255,255,0.06); } /* Sessions list */ .pf-session { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; transition: background 0.15s; } .pf-session:hover { background: rgba(255,255,255,0.04); } .pf-session.current { border-color: rgba(0, 208, 132,0.30); background: rgba(0, 208, 132,0.04); } .pf-session .pf-sess-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: rgba(0, 229, 255,0.08); color: #00E5FF; display: grid; place-items: center; font-size: 15px; } .pf-session.current .pf-sess-ic { background: rgba(0, 208, 132,0.10); color: #00D084; } .pf-session .pf-sess-body { flex: 1; min-width: 0; } .pf-session .pf-sess-title { font-weight: 700; color: #fff; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pf-session .pf-sess-meta { font-size: 11px; color: rgba(255,255,255,0.45); font-family: 'JetBrains Mono', monospace; margin-top: 2px; word-break: break-all; } /* Connections */ .pf-conn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; } .pf-conn .pf-conn-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: 16px; } .pf-conn .pf-conn-body { flex: 1; min-width: 0; } .pf-conn .pf-conn-title { font-weight: 700; color: #fff; font-size: 14px; } .pf-conn .pf-conn-meta { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; } /* Animated entrance */ @keyframes pf-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .profile-card { animation: pf-fade-up 0.32s ease both; } .profile-card:nth-child(2) { animation-delay: 0.05s; } .profile-card:nth-child(3) { animation-delay: 0.10s; } .profile-card:nth-child(4) { animation-delay: 0.15s; } .profile-card:nth-child(5) { animation-delay: 0.20s; } /* Modal β€” username change */ .pf-mini-modal-back { position: fixed; inset: 0; background: rgba(11, 16, 32,0.78); backdrop-filter: blur(10px); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px; } .pf-mini-modal-back.open { display: flex; animation: pf-fade-up 0.2s ease; } .pf-mini-modal { width: 100%; max-width: 460px; padding: 28px; background: #111622; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); } .pf-mini-modal h3 { font-size: 18px; font-weight: 900; margin: 0 0 6px; color: #fff; letter-spacing: -0.01em; } .pf-mini-modal p { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.5; margin: 0 0 16px; } /* ========================================================================== IGAXMING β€” IGAXMING Originals Β· BC.game-style image cards (patch v15) - 5-column grid on desktop, gradually 2 columns on phones - 3:4 aspect, image-only fill, badges floating top-left - Hover: scale + colored glow + dark overlay + central play + name slides up - All built with `transform` + `opacity` (no transition: all) for 60fps ========================================================================== */ .orig-grid { display: grid; /* Smaller, denser tiles like BC.game / Stake. Aim for 7 columns on wide desktop, gracefully degrading down to a horizontal snap-scroll rail on phones. */ grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1440px) { .orig-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } } @media (max-width: 1180px) { .orig-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } } @media (max-width: 920px) { .orig-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 720px) { .orig-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 32%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; gap: 10px; } .orig-grid::-webkit-scrollbar { display: none; } .orig-card { scroll-snap-align: start; } } @media (max-width: 480px) { .orig-grid { grid-auto-columns: 42%; } } .orig-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; text-decoration: none; background: #111622; isolation: isolate; transform: translateZ(0); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease; /* Glow accent driven by per-card --orig-glow (set inline in PHP) */ --orig-glow: rgba(0, 229, 255, 0.55); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 22px -10px rgba(0,0,0,0.55); } .orig-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease; z-index: 1; } /* Subtle bottom gradient so the footer text reads on bright artwork */ .orig-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%); z-index: 2; pointer-events: none; transition: opacity 0.32s ease; } /* The user's game images already include the game name + "ORIGINAL GAME" label baked into the artwork (BC.game / Stake convention). Hide the bottom footer on resting state so we don't duplicate that info β€” the meta only appears inside the hover overlay below. */ .orig-card-footer { display: none; } .orig-card-name, .orig-card-meta { display: none; } /* Badges (Hot / New) β€” sized for smaller cards */ .orig-badge { position: absolute; top: 8px; left: 8px; z-index: 4; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 6px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .orig-badge svg { width: 9px; height: 9px; } .orig-badge-hot { background: linear-gradient(135deg, #FF4D4D, #FF6B81); color: #fff; } .orig-badge-new { background: linear-gradient(135deg, #00D084, #00E5FF); color: #1A2035; } /* Hover overlay (the BC.game "play" effect) */ .orig-hover { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, rgba(11, 16, 32,0.0) 0%, rgba(11, 16, 32,0.55) 50%, rgba(11, 16, 32,0.85) 100%); opacity: 0; transition: opacity 0.32s ease; pointer-events: none; } .orig-play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95); color: #1A2035; display: grid; place-items: center; transform: scale(0.72) translateY(8px); transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s ease; box-shadow: 0 12px 30px -8px rgba(0, 229, 255, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.35); } .orig-play svg { width: 18px; height: 18px; margin-left: 2px; } .orig-hover-name { color: #fff; font-size: 15px; font-weight: 900; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.55); transform: translateY(10px); opacity: 0; transition: transform 0.36s 0.06s ease, opacity 0.32s 0.06s ease; } .orig-hover-meta { color: rgba(255,255,255,0.75); font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,0.55); transform: translateY(10px); opacity: 0; transition: transform 0.36s 0.1s ease, opacity 0.32s 0.1s ease; } /* Hover behavior β€” only on devices that support real hover (avoid stuck-overlay on touchscreens where the first tap would otherwise show the overlay instead of navigating to the game). */ @media (hover: hover) { .orig-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 40px -16px rgba(0,0,0,0.6), 0 0 0 1px var(--orig-glow), 0 0 36px -10px var(--orig-glow); } .orig-card:hover .orig-card-img { transform: scale(1.08); filter: brightness(0.85); } .orig-card:hover .orig-hover { opacity: 1; } .orig-card:hover .orig-play { transform: scale(1) translateY(0); box-shadow: 0 12px 30px -8px var(--orig-glow), 0 0 0 6px rgba(255,255,255,0.10); } .orig-card:hover .orig-hover-name, .orig-card:hover .orig-hover-meta { transform: translateY(0); opacity: 1; } .orig-card:hover::after { opacity: 0.45; } } .orig-card:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--orig-glow), 0 18px 40px -16px rgba(0,0,0,0.6); } .orig-card:active { transform: translateY(-2px) scale(0.99); } @keyframes orig-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255,0.45); } 70% { box-shadow: 0 0 0 14px rgba(0, 229, 255,0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255,0); } } /* ========================================================================== v15.1 β€” Section header controls (All / Prev / Next) & casino-styled dialog ========================================================================== */ /* Section controls (top-right): "All" pill + arrow buttons */ .orig-section-controls { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .orig-section-controls .orig-ctrl { height: 34px; min-width: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease; } .orig-section-controls .orig-ctrl:hover { background: rgba(0, 229, 255,0.10); border-color: rgba(0, 229, 255,0.30); color: #00E5FF; } .orig-section-controls .orig-ctrl:active { transform: scale(0.96); } .orig-section-controls .orig-ctrl:disabled { opacity: 0.4; cursor: not-allowed; } .orig-section-controls .orig-ctrl[data-arrow] { padding: 0; min-width: 36px; } .orig-section-controls .orig-ctrl svg { width: 16px; height: 16px; } /* The section header itself needs to host the controls cleanly */ .section-h { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .section-h .sub { margin-left: 8px; } @media (max-width: 600px) { .orig-section-controls .orig-ctrl { height: 30px; min-width: 30px; padding: 0 9px; font-size: 11px; } } /* ----- Custom casino dialog (replaces native alert/confirm) ----- */ #pfDialogRoot { position: fixed; inset: 0; z-index: 99999; pointer-events: none; } .pf-dialog-back { position: fixed; inset: 0; background: rgba(11, 16, 32,0.78); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: auto; opacity: 0; transition: opacity 0.22s ease; } .pf-dialog-back.open { opacity: 1; } .pf-dialog { width: 100%; max-width: 440px; padding: 28px 28px 22px; background: linear-gradient(180deg, #0F1425, #111622); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(0, 229, 255,0.06); transform: translateY(14px) scale(0.96); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .pf-dialog-back.open .pf-dialog { transform: translateY(0) scale(1); } .pf-dialog-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; margin-bottom: 16px; background: rgba(0, 229, 255,0.10); color: #00E5FF; } .pf-dialog-title { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; } .pf-dialog-body { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0 0 22px; } .pf-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; } .pf-dialog-actions .pf-btn { height: 40px; padding: 0 18px; font-size: 13px; font-weight: 800; min-width: 100px; justify-content: center; } @media (max-width: 480px) { .pf-dialog { padding: 22px; border-radius: 18px 18px 16px 16px; } .pf-dialog-actions { flex-direction: column-reverse; } .pf-dialog-actions .pf-btn { width: 100%; } } /* Inline toast fallback (when Casino.toast isn't ready yet) */ .pf-inline-toast { position: fixed; top: 80px; right: 24px; z-index: 99998; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(180deg, #0F1425, #111622); border: 1px solid rgba(255,255,255,0.10); border-left-width: 3px; border-radius: 12px; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.55); transform: translateX(20px); opacity: 0; transition: transform 0.28s ease, opacity 0.28s ease; pointer-events: auto; max-width: 360px; } .pf-inline-toast.show { transform: translateX(0); opacity: 1; } .pf-inline-toast-win { border-left-color: #00D084; color: #fff; } .pf-inline-toast-win i { color: #00D084; } .pf-inline-toast-error { border-left-color: #FF5A5A; } .pf-inline-toast-error i { color: #FF5A5A; } .pf-inline-toast-info { border-left-color: #00E5FF; } .pf-inline-toast-info i { color: #00E5FF; } @media (max-width: 480px) { .pf-inline-toast { left: 16px; right: 16px; top: 16px; max-width: none; } } /* =================================================================== * LOBBY SLOTS RAIL (BC-style smaller cards with player count badge) * =================================================================== */ .lobby-slots-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } .lobby-slot-card.is-hidden { display: none !important; } @media (max-width: 1440px) { .lobby-slots-rail { grid-template-columns: repeat(8, minmax(0,1fr)); } } @media (max-width: 1280px) { .lobby-slots-rail { grid-template-columns: repeat(6, minmax(0,1fr)); } } @media (max-width: 1024px) { .lobby-slots-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 22%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .lobby-slots-rail::-webkit-scrollbar { display: none; } .lobby-slot-card { scroll-snap-align: start; } } @media (max-width: 720px) { .lobby-slots-rail { grid-auto-columns: 32%; } } @media (max-width: 480px) { .lobby-slots-rail { grid-auto-columns: 44%; } } .lobby-slot-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #111622; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .lobby-slot-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 229, 255,0.18); } .lobby-slot-img-wrap { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .lobby-slot-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.2s ease; } .lobby-slot-card:hover .lobby-slot-img-wrap img { transform: scale(1.06); filter: brightness(0.65); } .lobby-slot-badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; z-index: 2; } .lobby-slot-badge svg { width: 9px; height: 9px; } .lobby-slot-badge-hot { background: #FF4D4D; color: #fff; box-shadow: 0 0 12px rgba(255, 77, 77,0.5); } .lobby-slot-hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.2s ease; } .lobby-slot-card:hover .lobby-slot-hover { opacity: 1; } .lobby-slot-play { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #00E5FF, #00C8FF); color: #0B1020; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 229, 255,0.5); font-size: 14px; } .lobby-slot-footer { padding: 6px 8px 8px; background: #111622; } .lobby-slot-name { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .lobby-slot-meta { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; } .lobby-slot-players { display: inline-flex; align-items: center; gap: 3px; color: rgba(255,255,255,0.65); font-weight: 600; } .lobby-slot-players svg { width: 9px; height: 9px; } /* =================================================================== * SLOTS PAGE β€” Ultra-modern lobby with tabs / sort / providers / paging * =================================================================== */ .slots-pro-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; margin-bottom: 18px; scrollbar-width: thin; } .slots-pro-tabs::-webkit-scrollbar { height: 4px; } .slots-pro-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.65); transition: 0.15s; white-space: nowrap; cursor: pointer; background: transparent; border: none; } .slots-pro-tab:hover { color: #fff; background: rgba(255,255,255,0.05); } .slots-pro-tab.active { color: #fff; background: linear-gradient(135deg, rgba(0, 229, 255,0.18), rgba(30,64,175,0.15)); box-shadow: inset 0 0 0 1px rgba(0, 229, 255,0.35); } .slots-pro-tab svg { width: 12px; height: 12px; } .slots-pro-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; } .slots-pro-search { flex: 1 1 320px; min-width: 240px; position: relative; } .slots-pro-search input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; color: #fff; font-size: 13px; padding: 12px 16px 12px 42px; outline: none; transition: 0.15s; } .slots-pro-search input:focus { border-color: rgba(0, 229, 255,0.4); background: rgba(0, 229, 255,0.04); } .slots-pro-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.45); } .slots-pro-select { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #fff; cursor: pointer; transition: 0.15s; position: relative; } .slots-pro-select:hover { border-color: rgba(0, 229, 255,0.3); } .slots-pro-select .label { color: rgba(255,255,255,0.55); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; } .slots-pro-select .value { color: #fff; font-weight: 700; } .slots-pro-select select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .slots-pro-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .slots-pro-toggle .switch { width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.1); position: relative; transition: 0.15s; cursor: pointer; } .slots-pro-toggle .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: 0.15s; } .slots-pro-toggle.on .switch { background: linear-gradient(135deg, #00E5FF, #00C8FF); } .slots-pro-toggle.on .switch::after { left: 18px; } .slots-pro-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } @media (max-width: 1440px) { .slots-pro-grid { grid-template-columns: repeat(7, minmax(0,1fr)); } } @media (max-width: 1280px) { .slots-pro-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } } @media (max-width: 992px) { .slots-pro-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } } @media (max-width: 720px) { .slots-pro-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 480px) { .slots-pro-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } .slots-pro-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 28px 0 8px; color: rgba(255,255,255,0.7); } .slots-pro-pager button { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: #fff; cursor: pointer; transition: 0.15s; display: grid; place-items: center; } .slots-pro-pager button:hover:not(:disabled) { background: rgba(0, 229, 255,0.12); border-color: rgba(0, 229, 255,0.3); color: #00E5FF; } .slots-pro-pager button:disabled { opacity: 0.35; cursor: not-allowed; } .slots-pro-pager-info { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; } .slots-pro-pager-info b { color: #00E5FF; } /* Slot card on the slots page β€” slimmer than lobby */ .slots-pro-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #111622; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .slots-pro-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 229, 255,0.18); } .slots-pro-card .imgw { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .slots-pro-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.2s ease; } .slots-pro-card:hover img { transform: scale(1.06); filter: brightness(0.6); } .slots-pro-card .hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.2s; } .slots-pro-card:hover .hover { opacity: 1; } .slots-pro-card .play { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #00E5FF, #00C8FF); color: #0B1020; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 229, 255,0.5); } .slots-pro-card .footer { padding: 6px 8px 8px; background: #111622; } .slots-pro-card .name { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .slots-pro-card .meta { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; } .slots-pro-card .players { display: inline-flex; align-items: center; gap: 3px; color: rgba(255,255,255,0.65); font-weight: 600; } .slots-pro-card .players svg { width: 9px; height: 9px; } .slots-pro-card .badge { position: absolute; top: 5px; left: 5px; padding: 3px 6px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; z-index: 2; display: inline-flex; align-items: center; gap: 3px; } .slots-pro-card .badge svg { width: 9px; height: 9px; } .slots-pro-card .badge-hot { background: #FF4D4D; color: #fff; } .slots-pro-card .badge-new { background: #00D084; color: #0B1020; } /* SLOT PLAY PAGE β€” tags + similar games */ .slot-tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 229, 255,0.08); color: #67e0ff; font-size: 11px; font-weight: 600; border: 1px solid rgba(0, 229, 255,0.18); white-space: nowrap; } .slot-mode-toggle { display: inline-flex; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); } .slot-mode-toggle a, .slot-mode-toggle button { padding: 8px 18px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); transition: 0.15s; background: transparent; border: 0; cursor: pointer; } .slot-mode-toggle a.active, .slot-mode-toggle button.active { color: #0B1020; background: linear-gradient(135deg, #00E5FF, #00C8FF); } .slot-mode-toggle a:hover:not(.active), .slot-mode-toggle button:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); } /* Slots row in recent-bets ticker */ .rb-game-cell .rb-slot-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; transition: 0.15s; max-width: 100%; } .rb-game-cell .rb-slot-link:hover { color: #00E5FF; } .rb-slot-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #111622; } .rb-game-cell .rb-game-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Slot bet detail modal β€” BC.game inspired */ .bd-slot-block { display: flex; gap: 14px; margin: 12px 0 16px; } .bd-slot-thumb { width: 110px; height: 140px; border-radius: 10px; overflow: hidden; background: #111622; flex-shrink: 0; } .bd-slot-thumb img { width: 100%; height: 100%; object-fit: cover; } .bd-slot-meta { flex: 1; min-width: 0; } .bd-slot-name { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-slot-provider { font-size: 12px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .bd-slot-play-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: linear-gradient(135deg, #00E5FF, #00C8FF); color: #0B1020; font-size: 12px; font-weight: 800; text-decoration: none; transition: 0.15s; } .bd-slot-play-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } /* Multi-currency picker on the slot play page */ .slot-currency-pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; } .slot-currency-pick select { background: transparent; border: 0; outline: 0; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; } .slot-currency-pick select option { background: #111622; color: #fff; } /* ============================================================ STAKE-STYLE HERO (Guests) β€” Ultra Compact ============================================================ */ .hero-stake { position: relative; padding: 16px 18px; border-radius: 16px; background: radial-gradient(ellipse at 8% 0%, rgba(0, 229, 255,0.10), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(0, 208, 132,0.08), transparent 55%), linear-gradient(180deg, #0E172A 0%, #060B1A 100%); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; isolation: isolate; } .hero-stake__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; } .hero-stake__left { display: flex; flex-direction: column; justify-content: center; padding: 4px 4px; } .hero-stake__title { font-family: 'Geist', 'Inter', sans-serif; font-weight: 900; font-size: clamp(18px, 2vw, 28px); line-height: 1.05; letter-spacing: -0.025em; color: #ffffff; margin: 0 0 14px 0; } .hero-stake__register { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 22px; border-radius: 10px; background: linear-gradient(135deg, #1A65F6 0%, #1e88ff 100%); color: #ffffff; font-weight: 800; font-size: 13px; letter-spacing: 0.01em; text-decoration: none; border: 0; cursor: pointer; width: fit-content; min-width: 140px; box-shadow: 0 8px 22px -10px rgba(26, 101, 246,0.55), inset 0 1px 0 rgba(255,255,255,0.18); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .hero-stake__register:hover { transform: translateY(-2px); filter: brightness(1.08); } .hero-stake__register:active { transform: translateY(0); } .hero-stake__divider { margin: 14px 0 8px; color: #9DA0A5; font-size: 11px; font-weight: 600; } .hero-stake__socials { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 300px; } .hero-stake__social { display: inline-flex; align-items: center; justify-content: center; height: 34px; background: #1E2742; border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; font-size: 14px; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .hero-stake__social:hover { transform: translateY(-2px); background: #232c47; border-color: rgba(0, 229, 255,0.3); } /* Category cards (Casino + Slots) - More compact */ .hero-stake__right { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hero-cat-card { position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; text-decoration: none; background: #1E2742; border: 1px solid rgba(255,255,255,0.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; min-height: 180px; max-height: 200px; } .hero-cat-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.12); } .hero-cat-card__scene { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-cat-card__scene svg { width: 80%; height: auto; max-height: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)); transition: transform .4s cubic-bezier(.2,.7,.3,1.2); } .hero-cat-card:hover .hero-cat-card__scene svg { transform: scale(1.06) rotate(-2deg); } /* Casino scene -> bright blue */ .hero-cat-card--casino .hero-cat-card__scene { background: linear-gradient(180deg, #1e88ff 0%, #1A65F6 100%); } .hero-cat-card--casino .hero-cat-card__scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%); pointer-events: none; } /* Slots scene -> royal purple / gold */ .hero-cat-card--slots .hero-cat-card__scene { background: linear-gradient(180deg, #7A5FFF 0%, #4c1d95 100%); } .hero-cat-card--slots .hero-cat-card__scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(251,191,36,0.22), transparent 55%); pointer-events: none; } .hero-cat-card__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1E2742; border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; } .hero-cat-card__name { display: inline-flex; align-items: center; gap: 5px; color: #ffffff; font-weight: 800; font-size: 12px; letter-spacing: -0.01em; } .hero-cat-card__name i { color: #9DA0A5; font-size: 11px; } .hero-cat-card__count { display: inline-flex; align-items: center; gap: 5px; color: #D8DCE8; font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; } .hero-cat-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #00D084; box-shadow: 0 0 0 0 rgba(0, 208, 132,0.55); animation: hero-dot-pulse 1.8s ease-out infinite; } @keyframes hero-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 208, 132,0.55); } 70% { box-shadow: 0 0 0 8px rgba(0, 208, 132,0); } 100% { box-shadow: 0 0 0 0 rgba(0, 208, 132,0); } } /* ===== Hero responsive: tablet ===== */ @media (max-width: 1024px) { .hero-cat-card { min-height: 160px; max-height: 180px; } } /* ===== Hero responsive: mobile (matches screenshot 2) ===== */ @media (max-width: 768px) { .hero-stake { padding: 14px 12px; border-radius: 14px; } .hero-stake__inner { grid-template-columns: 1fr; gap: 14px; } .hero-stake__left { padding: 2px 0; text-align: center; } .hero-stake__title { font-size: clamp(18px, 5.5vw, 22px); margin-bottom: 12px; text-align: center; } .hero-stake__register { width: 100%; max-width: none; min-width: 0; margin: 0 auto; height: 42px; } .hero-stake__divider { text-align: center; margin: 12px 0 8px; font-size: 11px; } .hero-stake__socials { grid-template-columns: repeat(5, 1fr); max-width: none; margin: 0 auto; gap: 6px; } .hero-stake__social { height: 36px; font-size: 14px; } .hero-stake__right { grid-template-columns: 1fr 1fr; gap: 8px; } .hero-cat-card { min-height: 140px; max-height: 160px; } .hero-cat-card__bar { padding: 7px 10px; } .hero-cat-card__name { font-size: 11px; } .hero-cat-card__count { font-size: 10px; } } /* ============================================================ PROMO SLIDER (Logged-in users) ============================================================ */ /* ============================================================ PROMO SLIDER β€” Ultra-modern brand-aligned design ============================================================ */ .promo-slider { position: relative; } .promo-slider__viewport { position: relative; overflow: hidden; border-radius: 16px; } .promo-slider__track { display: flex; gap: 12px; transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; } .promo-card { position: relative; flex: 0 0 calc((100% - 24px) / 3); height: 175px; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; display: flex; align-items: stretch; border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; isolation: isolate; } .promo-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18); } /* Subtle noise/grain texture for depth */ .promo-card__noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; z-index: 1; mix-blend-mode: overlay; } /* Diagonal shimmer that sweeps on hover */ .promo-card__shine { position: absolute; top: 0; bottom: 0; left: -100%; width: 60%; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 55%, transparent 100%); z-index: 2; pointer-events: none; transition: transform 0.9s cubic-bezier(.2,.7,.3,1); } .promo-card:hover .promo-card__shine { transform: translateX(280%); } /* Bottom vignette so text always reads */ .promo-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.30) 100%); pointer-events: none; z-index: 2; } .promo-card__inner { position: relative; z-index: 4; flex: 1 1 auto; padding: 16px 14px 16px 20px; display: flex; flex-direction: column; justify-content: space-between; max-width: 62%; } .promo-card__tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 12px; background: rgba(255,255,255,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); text-transform: uppercase; white-space: nowrap; } .promo-card__tag i { opacity: 0.85; } .promo-card__title { font-family: 'Geist','Inter',sans-serif; font-weight: 900; font-size: 22px; line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 6px; color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,0.5); } .promo-card__title-accent { background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.78)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .promo-card__sub { font-size: 11px; font-weight: 500; letter-spacing: 0.005em; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.4; text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .promo-card__cta { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 12px; padding: 9px 16px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22); border-radius: 9px; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.02em; transition: background .2s ease, border-color .2s ease, gap .25s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .promo-card:hover .promo-card__cta { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.42); gap: 10px; } .promo-card__art { position: absolute; top: 0; right: -6px; bottom: 0; width: 52%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; } .promo-card__art img { width: 100%; height: 100%; object-fit: contain; object-position: center right; filter: drop-shadow(0 16px 24px rgba(0,0,0,0.55)); transition: transform .6s cubic-bezier(.2,.7,.3,1.2); } .promo-card:hover .promo-card__art img { transform: scale(1.10) rotate(-3deg); } /* Brand-palette backgrounds with directional glow */ .promo-card--faucet { background: radial-gradient(circle at 85% 50%, rgba(0, 229, 255,0.45), transparent 50%), linear-gradient(135deg, #0a3a5e 0%, #062842 55%, #051a30 100%); } .promo-card--affiliate { background: radial-gradient(circle at 85% 50%, rgba(0, 208, 132,0.40), transparent 50%), linear-gradient(135deg, #0a4f3a 0%, #07382b 55%, #04231b 100%); } .promo-card--dice { background: radial-gradient(circle at 85% 50%, rgba(255, 77, 77,0.42), transparent 50%), linear-gradient(135deg, #6e1a22 0%, #421014 55%, #2a0809 100%); } .promo-card--rakeback { background: radial-gradient(circle at 85% 50%, rgba(247, 147, 26,0.40), transparent 50%), linear-gradient(135deg, #5a3f10 0%, #3d2a08 55%, #261a04 100%); } .promo-card--spins { background: radial-gradient(circle at 85% 50%, rgba(26, 101, 246,0.45), transparent 50%), linear-gradient(135deg, #1a2a6e 0%, #101c4a 55%, #08122e 100%); } /* Slider dots */ .promo-slider__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .promo-slider__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 0; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease, width .25s ease; } .promo-slider__dot:hover { background: rgba(255,255,255,0.32); } .promo-slider__dot.is-active { background: var(--cyan); width: 22px; border-radius: 3px; box-shadow: 0 0 12px rgba(0, 229, 255,0.7); } /* Hide unused arrow nav */ .promo-slider__nav { display: none; } /* ── Responsive ── */ @media (max-width: 1100px) { .promo-card { flex-basis: calc((100% - 24px) / 3); height: 165px; } .promo-card__title { font-size: 20px; } .promo-card__inner { padding: 14px 12px 14px 16px; max-width: 60%; } } @media (max-width: 900px) { .promo-card { flex-basis: calc((100% - 12px) / 2); height: 155px; } .promo-card__title { font-size: 19px; } } @media (max-width: 600px) { .promo-slider__track { gap: 10px; } .promo-card { flex-basis: 84%; height: 150px; border-radius: 14px; } .promo-card__inner { padding: 14px 10px 14px 14px; max-width: 60%; } .promo-card__tag { font-size: 9px; padding: 4px 10px; letter-spacing: 0.14em; } .promo-card__title { font-size: 17px; margin-bottom: 4px; } .promo-card__sub { font-size: 10px; } .promo-card__cta { padding: 7px 12px; font-size: 11px; margin-top: 8px; } .promo-card__art { width: 50%; } } /* ============================================================ LIVE WINS TICKER (Rainbet-style, brand palette) ============================================================ */ .live-wins-section { position: relative; } /* v20.7 β€” NEW full-width Live Wins layout: header (title + tabs) on top, cards track spans 100% of the section width (no left badge column). */ .live-wins__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .live-wins__title { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(0, 208, 132,0.10), rgba(0, 208, 132,0.02)); border: 1px solid rgba(0, 208, 132,0.22); color: #D8DCE8; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .live-wins.live-wins--fullwidth { gap: 0; } .live-wins.live-wins--fullwidth .live-wins__viewport { flex: 1 1 100%; width: 100%; } /* Filter tabs */ .live-wins__tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .lw-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--text-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease; } .lw-tab:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.16); transform: translateY(-1px); } .lw-tab.is-active { background: rgba(0, 229, 255,0.10); color: #fff; border-color: rgba(0, 229, 255,0.45); box-shadow: 0 0 16px -4px rgba(0, 229, 255,0.4); } .lw-tab.is-active i { color: var(--cyan); } .lw-tab[data-filter="big"].is-active { background: rgba(247, 147, 26,0.12); border-color: rgba(247, 147, 26,0.5); box-shadow: 0 0 16px -4px rgba(247, 147, 26,0.4); } .lw-tab[data-filter="big"].is-active i { color: var(--gold); } .lw-tab[data-filter="slots"].is-active { background: rgba(122, 95, 255,0.14); border-color: rgba(122, 95, 255,0.5); box-shadow: 0 0 16px -4px rgba(122, 95, 255,0.4); } .lw-tab[data-filter="slots"].is-active i { color: #c4a8ff; } .lw-tab[data-filter="originals"].is-active { background: rgba(0, 208, 132,0.12); border-color: rgba(0, 208, 132,0.5); box-shadow: 0 0 16px -4px rgba(0, 208, 132,0.4); } .lw-tab[data-filter="originals"].is-active i { color: var(--green); } .live-wins { position: relative; display: flex; align-items: stretch; gap: 10px; padding: 0; } .live-wins__badge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 78px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, rgba(0, 208, 132,0.18), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--line); color: #fff; font-weight: 800; font-size: 12px; padding: 14px 6px; position: relative; overflow: hidden; } .live-wins__badge::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(0, 208, 132,0.5), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.7; } .live-wins__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(0, 208, 132,0.7), 0 0 0 0 rgba(0, 208, 132,0.55); animation: lw-pulse 1.6s ease-out infinite; } @keyframes lw-pulse { 0% { box-shadow: 0 0 12px rgba(0, 208, 132,0.7), 0 0 0 0 rgba(0, 208, 132,0.55); } 70% { box-shadow: 0 0 12px rgba(0, 208, 132,0.4), 0 0 0 10px rgba(0, 208, 132,0); } 100% { box-shadow: 0 0 12px rgba(0, 208, 132,0.7), 0 0 0 0 rgba(0, 208, 132,0); } } .live-wins__label { font-weight: 800; font-size: 11px; color: #D8DCE8; letter-spacing: 0.04em; white-space: nowrap; } .live-wins__viewport { flex: 1 1 auto; position: relative; overflow: hidden; border-radius: 12px; mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .live-wins__track { display: flex; gap: 8px; align-items: stretch; height: 100%; min-height: 200px; /* No transition β€” requestAnimationFrame handles smooth motion frame-by-frame */ will-change: transform; } .live-wins__empty { align-self: center; margin: auto; color: #9DA0A5; font-size: 12px; padding: 50px 20px; } /* Game column (card + win-info below) */ .lw-col { flex: 0 0 78px; display: flex; flex-direction: column; text-decoration: none; transform: translateX(20px); opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.3,1.2), opacity .35s ease; } .lw-col.lw-card--in { transform: translateX(0); opacity: 1; } .lw-col.lw-col--hidden { display: none !important; } /* ─ NEW-WIN PULSE ─ Subtle 1.5s pulse to highlight just-arrived wins (only triggered for incremental polls, not on initial page load). */ @keyframes lw-new-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255,0.55), 0 0 18px rgba(0, 229, 255,0); } 35% { box-shadow: 0 0 0 6px rgba(0, 229, 255,0.00), 0 0 22px rgba(0, 229, 255,0.45); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255,0.00), 0 0 0 rgba(0, 229, 255,0); } } .lw-col.lw-card--new .lw-card { animation: lw-new-pulse 1.5s ease-out 1 both; border-color: rgba(0, 229, 255,0.35); } .lw-col.lw-card--new .lw-card::before { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 999px; background: #00E5FF; box-shadow: 0 0 8px rgba(0, 229, 255,0.85); animation: lw-new-pulse 1.5s ease-out 1 both; z-index: 3; } .lw-col:hover .lw-card { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(0, 229, 255,0.4); } .lw-card { position: relative; height: 140px; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; border: 1px solid rgba(255,255,255,0.07); } .lw-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 55%), radial-gradient(circle at 50% 100%, rgba(0,0,0,0.35), transparent 55%); pointer-events: none; } .lw-card__img-wrap { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lw-card__img { max-width: 88%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5)); transition: transform .35s cubic-bezier(.2,.7,.3,1.2); } .lw-col:hover .lw-card__img { transform: scale(1.07); } .lw-card__footer { flex: 0 0 auto; padding: 5px 6px 7px; text-align: center; background: rgba(0,0,0,0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); position: relative; z-index: 1; } .lw-card__game { font-size: 9px; font-weight: 900; color: #fff; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; text-shadow: 0 1px 4px rgba(0,0,0,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lw-card__provider { font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; } /* Always-visible win info below card */ .lw-col__win { text-align: center; padding: 7px 4px 4px; } .lw-col__user { font-size: 9.5px; color: var(--text-dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .lw-col__user i { color: var(--gold); font-size: 8px; margin-right: 3px; } .lw-col__user i.lw-flame { color: var(--gold); filter: drop-shadow(0 0 4px rgba(247, 147, 26,0.7)); animation: lw-flame-flicker 1.4s ease-in-out infinite; } @keyframes lw-flame-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.15) rotate(2deg); } } .lw-col__amount { font-size: 12px; font-weight: 900; color: var(--green); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(0, 208, 132,0.35); white-space: nowrap; } .lw-col__amount-sub { font-size: 8.5px; font-weight: 600; color: rgba(255,255,255,0.42); font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; letter-spacing: 0.02em; } /* Flame streak badge on the card */ .lw-card__streak { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F7931A, #C97411); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; box-shadow: 0 0 12px rgba(247, 147, 26,0.65), 0 2px 6px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.32); z-index: 3; animation: lw-flame-flicker 1.4s ease-in-out infinite; } @media (max-width: 768px) { .live-wins__badge { width: 64px; padding: 10px 4px; font-size: 10px; } .live-wins__label { font-size: 9px; } .lw-col { flex-basis: 66px; } .lw-card { height: 116px; } .live-wins__track { min-height: 168px; } .lw-col__amount { font-size: 11px; } } /* ════════════════════════════════════════════════════════════════════════════ IGAXMING v25 β€” HILO Β· LIMBO Β· KENO Stake-style game-specific styles. Built on top of the casino's existing tokens (.card-strong, .btn-bet, .dice-layout, .dice-stat-card, etc.) so they inherit colours, radii, transitions and dark-mode behaviour. ════════════════════════════════════════════════════════════════════════════ */ /* ───── HILO ──────────────────────────────────────────────────────────────── */ .hilo-canvas-inner { min-height: 460px; gap: 26px; } .hilo-table { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: 100%; max-width: 720px; } .hilo-choice { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); transition: all .18s ease; cursor: pointer; opacity: .55; } .hilo-choice.active { opacity: 1; cursor: pointer; } .hilo-choice.active:hover { background: rgba(0, 229, 255,0.06); border-color: rgba(0, 229, 255,0.22); transform: translateY(-2px); } .hilo-choice-card { width: 78px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.16); border-radius: 10px; color: var(--text-dim); font-size: 32px; font-weight: 800; letter-spacing: -.02em; } .hilo-choice-card .ico { opacity: .6; } .hilo-choice-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); text-align: center; } .hilo-choice-mult { font-size: 13px; font-weight: 800; color: var(--text); } .hilo-current-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .hilo-deck { position: relative; width: 130px; height: 184px; } .hilo-deck::before, .hilo-deck::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 4px 14px rgba(0,0,0,0.35); } .hilo-deck::before { transform: translate(4px, 4px) rotate(.5deg); } .hilo-deck::after { transform: translate(8px, 8px) rotate(1deg); opacity: .55; } .hilo-card { position: relative; width: 130px; height: 184px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; color: #111; font-family: 'Geist', sans-serif; } .hilo-card.red { color: #d93340; } .hilo-card.black { color: #171A2B; } .hilo-card-rank { font-size: 26px; font-weight: 800; line-height: 1; } .hilo-card-rank-bottom { font-size: 26px; font-weight: 800; line-height: 1; align-self: flex-end; transform: rotate(180deg); } .hilo-card-suit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 700; line-height: 1; } .hilo-card.flip { animation: hilo-flip .5s cubic-bezier(.34,1.56,.64,1); } @keyframes hilo-flip { 0% { transform: rotateY(-180deg) translateY(-22px); opacity: 0; } 50% { transform: rotateY(-90deg) translateY(-10px); opacity: .4; } 100% { transform: rotateY(0) translateY(0); opacity: 1; } } .hilo-history { display: flex; gap: 6px; padding: 10px 14px; min-height: 64px; background: rgba(255,255,255,0.02); border-radius: 10px; overflow-x: auto; align-self: stretch; scrollbar-width: thin; } .hilo-history-empty { font-size: 12px; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; align-self: center; margin: auto; } .hilo-mini-card { flex: 0 0 36px; width: 36px; height: 50px; background: #fff; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #111; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .hilo-mini-card.red { color: #d93340; } .hilo-mini-card .ico { font-size: 13px; opacity: .8; } @media (max-width: 720px) { .hilo-table { grid-template-columns: 1fr; gap: 14px; } .hilo-current-wrap { order: -1; } } /* ───── LIMBO ─────────────────────────────────────────────────────────────── */ .limbo-canvas-inner { min-height: 460px; gap: 18px; } .limbo-recent { position: absolute; top: 18px; right: 22px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 70%; justify-content: flex-end; } .limbo-pill { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: var(--text-dim); } .limbo-pill.bet-pill { cursor: pointer; transition: transform .12s ease, filter .12s ease; } .limbo-pill.bet-pill:hover { transform: translateY(-1px); filter: brightness(1.15); } .limbo-pill.win { color: #00D084; border-color: rgba(0, 208, 132,0.4); background: rgba(0, 208, 132,0.08); } .limbo-pill.loss { color: #FF5A5A; border-color: rgba(255, 90, 90,0.4); background: rgba(255, 90, 90,0.06); } .limbo-result { text-align: center; } .limbo-result-value { font-size: clamp(64px, 10vw, 132px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text); text-shadow: 0 4px 24px rgba(0, 229, 255,0.1); font-variant-numeric: tabular-nums; transition: color .35s ease, text-shadow .35s ease, transform .25s ease; } .limbo-result-value.win { color: #00D084; text-shadow: 0 6px 28px rgba(0, 208, 132,0.45); transform: scale(1.04); } .limbo-result-value.loss { color: #FF5A5A; text-shadow: 0 6px 28px rgba(255, 90, 90,0.35); } .limbo-result-label { margin-top: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--text-dim); } .limbo-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; } .limbo-presets button { height: 30px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: var(--text-dim); transition: all .15s ease; } .limbo-presets button:hover { background: rgba(0, 229, 255,0.08); border-color: rgba(0, 229, 255,0.25); color: var(--text); } /* ───── KENO ──────────────────────────────────────────────────────────────── */ .keno-canvas-inner { min-height: 460px; gap: 18px; } .keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; width: 100%; max-width: 780px; } .keno-cell { position: relative; aspect-ratio: 1 / 1.2; background: rgba(20, 36, 58, 0.55); border: 1px solid rgba(255,255,255,0.04); color: var(--text-dim); border-radius: 10px; font-size: clamp(14px, 1.6vw, 20px); font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; justify-content: center; transition: all .15s ease; cursor: pointer; } .keno-cell:hover { background: rgba(0, 229, 255,0.06); color: var(--text); transform: translateY(-1px); } .keno-cell.selected { background: linear-gradient(180deg, rgba(0, 229, 255,0.18), rgba(0, 229, 255,0.06)); border-color: rgba(0, 229, 255,0.55); color: #fff; box-shadow: 0 4px 12px rgba(0, 229, 255,0.18) inset; } .keno-cell.reveal { animation: keno-pop .35s cubic-bezier(.34,1.56,.64,1); } .keno-cell.hit { background: radial-gradient(circle, rgba(255,215,80,0.95), rgba(247, 147, 26,0.85)); color: #1a1300; border-color: rgba(255,215,80,0.9); box-shadow: 0 0 24px rgba(247, 147, 26,0.55); } .keno-cell.hit::after { content: ''; position: absolute; inset: -3px; border-radius: 13px; box-shadow: 0 0 0 3px rgba(255,215,80,0.45); animation: keno-ring .8s ease; } .keno-cell.drawn:not(.selected):not(.hit) { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.18); } @keyframes keno-pop { 0% { transform: scale(.8); opacity: .2; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } @keyframes keno-ring { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.18); } } .keno-paytable { display: none; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 780px; } .keno-paytable.show { display: flex; } .keno-pay-chip { flex: 1 0 70px; padding: 8px 6px; border-radius: 8px; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); } .keno-pay-chip.zero { opacity: .35; } .keno-pay-chip.current { background: rgba(247, 147, 26,0.18); border-color: rgba(247, 147, 26,0.65); box-shadow: 0 0 12px rgba(247, 147, 26,0.25); } .keno-pay-mult { font-size: 13px; font-weight: 800; color: #fff; line-height: 1; } .keno-pay-hits { font-size: 10px; font-weight: 600; color: var(--text-dim); margin-top: 4px; letter-spacing: .04em; } .keno-msg { margin-top: 4px; padding: 12px 18px; background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); text-align: center; min-width: 280px; } @media (max-width: 720px) { .keno-grid { gap: 5px; } .keno-cell { font-size: 13px; border-radius: 8px; } .keno-pay-chip { flex-basis: 56px; padding: 6px 4px; } } /* ═══════════════════════════════════════════════════════════════════════ v40.1 PATCH β€” Rocket scene Β· Sidebar footer Β· Keno layout fix Β· RB game ═══════════════════════════════════════════════════════════════════════ */ /* ── Keno: pin recent pills into their own row (no more overlap) ────── */ .keno-recent-row { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 12px; min-height: 28px; } .keno-recent.limbo-recent { position: static !important; top: auto !important; right: auto !important; max-width: 100%; justify-content: flex-end; flex-wrap: wrap; } /* Keno cell: multiplier pill OVERLAY at the top (Stake / BC.game style). The pill floats on top of the cell without overlapping the number. */ .keno-cell { position: relative; padding-top: 22px; } .keno-cell .keno-cell-num { line-height: 1; } .keno-cell .keno-mult-pill { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; border-radius: 999px; white-space: nowrap; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.06); color: var(--text-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; z-index: 2; pointer-events: none; } .keno-cell .keno-mult-pill.win { color: #5eead4; border-color: rgba(94,234,212,0.45); background: rgba(16,55,52,0.6); } .keno-cell .keno-mult-pill.loss { color: #fb7185; border-color: rgba(251,113,133,0.4); background: rgba(67,18,28,0.55); } @media (max-width: 720px) { .keno-cell .keno-mult-pill { font-size: 9px; padding: 1px 6px; } .keno-cell { padding-top: 18px; } } /* Keno paytable: turn into a horizontal scroll strip on small screens */ .keno-paytable-pro { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .keno-paytable-pro.show { display: flex !important; } /* ── LIMBO ROCKET SCENE ────────────────────────────────────────────── */ .limbo-canvas-scene { overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(0, 229, 255,0.10), transparent 60%), linear-gradient(180deg, #0B1020 0%, #06080f 100%); } .limbo-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .limbo-star { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #D8DCE8; opacity: 0.55; animation: limbo-star-twinkle calc(var(--d) + 1s) ease-in-out infinite; } @keyframes limbo-star-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.85; } } .limbo-mountains { position: absolute; bottom: -2px; left: 0; right: 0; width: 100%; height: 30%; z-index: 1; pointer-events: none; } .limbo-rocket-scene { position: relative; width: 100%; align-self: stretch; flex: 1 1 auto; min-height: 380px; } .limbo-result { position: absolute; top: 7%; left: 0; right: 0; z-index: 4; text-align: center; padding: 0 12px; pointer-events: none; } .limbo-rocket-wrap { position: absolute; bottom: 13%; left: 50%; transform: translate(-50%, 0); width: 110px; height: 180px; z-index: 3; transition: transform .4s cubic-bezier(.34,1.56,.64,1); animation: limbo-hover 2.4s ease-in-out infinite; } .limbo-rocket { width: 100%; height: 100%; filter: drop-shadow(0 18px 18px rgba(0,0,0,0.55)); } @keyframes limbo-hover { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } } .limbo-flame-grp { transform-origin: 60px 162px; animation: limbo-flame 0.12s ease-in-out infinite alternate; } @keyframes limbo-flame { 0% { transform: scaleY(0.85) translateY(0); opacity: 0.85; } 100% { transform: scaleY(1.1) translateY(2px); opacity: 1; } } .limbo-smoke { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 30px; pointer-events: none; } .limbo-smoke span { position: absolute; bottom: 0; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0.15)); filter: blur(2px); animation: limbo-smoke-rise 1.4s ease-out infinite; opacity: 0; } .limbo-smoke span:nth-child(1) { left: 6px; animation-delay: 0s; } .limbo-smoke span:nth-child(2) { left: 26px; animation-delay: .35s; } .limbo-smoke span:nth-child(3) { left: 46px; animation-delay: .7s; } @keyframes limbo-smoke-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-22px) scale(1.4); opacity: 0; } } /* LAUNCH state β€” rocket shoots up + accelerates */ .limbo-canvas-scene.is-launching .limbo-rocket-wrap { animation: limbo-launch 0.7s cubic-bezier(.55,0,.45,1) forwards; } @keyframes limbo-launch { 0% { transform: translate(-50%, 0) rotate(0deg) scale(1); } 20% { transform: translate(-50%, -10px) rotate(-2deg) scale(1.02); } 100% { transform: translate(-50%, -80px) rotate(2deg) scale(1.05); } } .limbo-canvas-scene.is-launching .limbo-flame-grp { animation-duration: 0.06s; } /* WIN state β€” keep rocket up, glow green */ .limbo-canvas-scene.is-win .limbo-rocket-wrap { animation: limbo-win 1.6s ease-out forwards; } @keyframes limbo-win { 0% { transform: translate(-50%, -80px) scale(1.05); filter: drop-shadow(0 8px 22px rgba(0, 208, 132,0.65)); } 100% { transform: translate(-50%, -160px) scale(0.85); filter: drop-shadow(0 18px 28px rgba(0, 208, 132,0.55)); } } /* LOSS state β€” rocket falls back with a wobble */ .limbo-canvas-scene.is-loss .limbo-rocket-wrap { animation: limbo-loss 1.2s cubic-bezier(.42,0,.58,1) forwards; } @keyframes limbo-loss { 0% { transform: translate(-50%, -80px) rotate(2deg); } 60% { transform: translate(-50%, 4px) rotate(-4deg); } 100% { transform: translate(-50%, 0) rotate(0deg); } } /* LIMBO β€” mΓ³vil: resultado arriba separado del cohete, recientes en lΓ­nea */ @media (max-width: 760px) { .limbo-canvas-inner { min-height: 360px; padding: 16px !important; } .limbo-rocket-scene { min-height: 300px; } .limbo-recent { position: static; max-width: 100%; justify-content: center; margin-bottom: 4px; } .limbo-result { top: 4%; } .limbo-result-value { font-size: clamp(40px, 14vw, 72px); } .limbo-result-label { font-size: 11px; letter-spacing: .14em; } .limbo-rocket-wrap { width: 86px; height: 140px; bottom: 11%; } } @media (max-width: 420px) { .limbo-result-value { font-size: clamp(34px, 16vw, 56px); } .limbo-rocket-wrap { width: 72px; height: 120px; } } /* ── SIDEBAR β€” language / live support / responsible gambling ───────── */ .sidebar-footer-section { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); } .sidebar-lang-wrap { position: relative; } .sidebar-lang-btn { display: flex; align-items: center; width: 100%; } .sidebar-lang-caret { margin-left: auto; opacity: 0.55; transition: transform .15s ease; } .sidebar-lang-btn[aria-expanded="true"] .sidebar-lang-caret { transform: rotate(-180deg); } .sidebar-lang-menu { margin-top: 4px; padding: 6px; background: rgba(10,20,38,0.96); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; } .sidebar-lang-menu[hidden] { display: none; } .sidebar-lang-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: rgba(241,245,249,0.85); text-decoration: none; transition: background .12s ease; } .sidebar-lang-item:hover { background: rgba(255,255,255,0.05); color: #fff; } .sidebar-lang-item.is-active { color: var(--cyan, #00E5FF); background: rgba(0, 229, 255,0.06); } .sidebar-lang-item .flag { font-size: 18px; line-height: 1; } .sidebar[data-collapsed="true"] .sidebar-lang-menu { display: none; } .sidebar[data-collapsed="true"] .sidebar-lang-caret { display: none; } .sidebar[data-collapsed="true"] .sidebar-lang-btn { justify-content: center; padding: 11px 0; width: 100%; } .sidebar[data-collapsed="true"] .sidebar-lang-btn i { width: auto; font-size: 16px; } /* Recent Bets β€” game-page variant (slightly tighter than lobby) */ .recent-bets-game { margin-top: 28px; } .recent-bets-game .rb-tabs-wrap { padding: 12px 14px; } .recent-bets-game .rb-table th { padding: 10px 12px; font-size: 11px; } .recent-bets-game .rb-table td { padding: 10px 12px; font-size: 13px; } /* ── v40.2: Rocket launch β€” fix selector mismatch from v40.1 ───────── The bet-button handler adds `.is-launching` to BOTH the inner scene (#limboRocketScene) and the wrap (#limboRocketWrap). v40.1 only targeted `.limbo-canvas-scene.is-launching .limbo-rocket-wrap`, which never matched, so the rocket never lifted off. We now target the wrap directly with `.limbo-rocket-wrap.is-launching` and friends. */ .limbo-rocket-wrap.is-launching { animation: limbo-launch 0.7s cubic-bezier(.55,0,.45,1) forwards !important; } .limbo-rocket-wrap.is-launching .limbo-flame-grp { animation-duration: 0.06s; } .limbo-rocket-wrap.is-win { animation: limbo-win 1.6s ease-out forwards !important; } .limbo-rocket-wrap.is-loss { animation: limbo-loss 1.2s cubic-bezier(.42,0,.58,1) forwards !important; } /* Bigger, more dramatic launch path (visible against the mountains) */ @keyframes limbo-launch { 0% { transform: translate(-50%, 0) rotate(0deg) scale(1); } 15% { transform: translate(-50%, 6px) rotate(0deg) scale(0.97); } 30% { transform: translate(-50%, -20px) rotate(-2deg) scale(1.03); } 60% { transform: translate(-50%, -90px) rotate(2deg) scale(1.06); } 100% { transform: translate(-50%, -160px) rotate(1deg) scale(1.06); } } @keyframes limbo-win { 0% { transform: translate(-50%, -160px) scale(1.06); filter: drop-shadow(0 8px 22px rgba(0, 208, 132,0.65)); } 100% { transform: translate(-50%, -260px) scale(0.85); filter: drop-shadow(0 20px 32px rgba(0, 208, 132,0.55)); opacity: 0.9; } } @keyframes limbo-loss { 0% { transform: translate(-50%, -160px) rotate(1deg); } 35% { transform: translate(-50%, -40px) rotate(-6deg); } 70% { transform: translate(-50%, 4px) rotate(8deg); } 100% { transform: translate(-50%, 0) rotate(0deg); } } /* Boost the smoke + flame during launch so the lift-off reads instantly */ .limbo-rocket-wrap.is-launching .limbo-smoke span { animation-duration: 0.8s; } .limbo-rocket-wrap.is-launching .limbo-flame { filter: drop-shadow(0 0 12px rgba(255,140,40,0.85)); } /* ── Sidebar v7: remove obsolete .sidebar-live styles (we deleted the "Players online / Bets last 24h" block to match Stake/BC.game). */ .sidebar-live { display: none !important; } /* ============================================================ TOPBAR Β· Balance pill MΓ“VIL β€” diseΓ±o profesional (v2.5) - Saldo legible con su flechita (caret) visible y bien estructurado. - BotΓ³n de depΓ³sito SOLO icono wallet (compacto) β†’ mΓ‘s espacio al saldo. - Logo mΓ‘s pequeΓ±o en mΓ³vil. Estas reglas van al final del archivo para ganar en orden de cascada. ============================================================ */ @media (max-width: 900px) { /* Logo mΓ‘s pequeΓ±o en mΓ³vil */ .topbar-brand-img { height: 26px !important; } .topbar-brand { padding: 0 4px !important; } /* Pill del saldo: contenedor limpio tipo Stake/BC */ .balance-pill { height: 38px !important; border-radius: 11px !important; overflow: hidden !important; } /* Selector de moneda: icono + saldo + flechita */ .balance-pill .currency-tab { gap: 7px !important; padding: 0 9px !important; } .balance-pill .currency-tab .crypto-icon { width: 20px !important; height: 20px !important; } .balance-pill .amount { font-size: 13px !important; padding: 0 2px !important; max-width: 124px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; letter-spacing: -0.2px; } /* La flechita (caret) SIEMPRE visible y con buen contraste */ .balance-pill .currency-tab > span:last-child { display: inline-flex !important; opacity: 0.65; margin-left: 1px; } /* BotΓ³n depΓ³sito: SOLO icono wallet, compacto y cuadrado */ .balance-pill .deposit-btn { width: 42px !important; min-width: 42px !important; padding: 0 !important; gap: 0 !important; justify-content: center !important; } .balance-pill .deposit-btn span { display: none !important; } } @media (max-width: 600px) { .topbar-brand-img { height: 24px !important; } .balance-pill .amount { font-size: 12px !important; max-width: 100px !important; } .balance-pill .currency-tab { padding: 0 8px !important; gap: 6px !important; } .balance-pill .deposit-btn { width: 40px !important; min-width: 40px !important; } } @media (max-width: 380px) { .topbar-brand-img { height: 22px !important; } .balance-pill .amount { max-width: 78px !important; } .balance-pill .currency-tab { padding: 0 6px !important; } } /* ============================================================ PATCH v61 β€” Topbar mΓ³vil: logo icono compacto + sin desbordes ============================================================ */ .topbar-brand-icon { display: none; width: 32px; height: 32px; object-fit: contain; } @media (max-width: 768px) { /* Logo completo fuera; icono compacto dentro */ .topbar-brand-img, .topbar-brand-fallback { display: none !important; } .topbar-brand-icon { display: block !important; } .topbar-brand { padding: 0 4px !important; min-width: 0; } /* El topbar nunca debe partirse en dos lΓ­neas. OJO: nada de overflow:hidden aquΓ­ β€” el topbar tiene backdrop-filter y recortarΓ­a los dropdowns (monedas, usuario, notificaciones). */ .topbar { flex-wrap: nowrap !important; min-width: 0; } .topbar > * { min-width: 0; } .balance-pill { min-width: 0; flex-shrink: 1; } .balance-pill .amount { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 600px) { .topbar { padding: 0 8px !important; gap: 5px !important; } .topbar-brand-icon { width: 28px !important; height: 28px !important; } .gw-bell-wrap .gw-bell { width: 34px !important; height: 34px !important; } .balance-pill .amount { max-width: 84px !important; font-size: 11px !important; padding: 0 4px !important; } .user-pill { padding: 0 5px !important; } } @media (max-width: 380px) { .topbar { padding: 0 6px !important; gap: 4px !important; } .topbar-brand-icon { width: 26px !important; height: 26px !important; } .balance-pill .amount { max-width: 64px !important; } } /* v61.1 β€” check de moneda activa en el currency dropdown (lo gestiona JS con la clase .active; el check ya no se renderiza solo en el servidor) */ .cd-row .cd-row-check { display: none; margin-left: 8px; color: #22d3ee; } .cd-row.active .cd-row-check { display: inline-flex; } /* v61.1 β€” Panel de notificaciones en mΓ³vil: anclado a la campana se salΓ­a del lienzo por la izquierda. En pantallas pequeΓ±as va fijo a lo ancho. */ @media (max-width: 600px) { .gw-notif-panel { position: fixed !important; top: 60px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } /* v61.1 β€” Promo slider en mΓ³vil: el -mx-4 (-16px) excedΓ­a el padding de 12px del main y las tarjetas se salΓ­an del lienzo. Sin sangrado en mΓ³vil. */ @media (max-width: 639px) { .promo-track-v2 { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-left: 0; } } /* PATCH v61 END */ /* ================================================================= */ /* FAUSINO 2026 β€” Electric Blue + Neon Purple + Cyan identity layer */ /* Appended override. Preserves layout; refines brand color identity */ /* ================================================================= */ :root{ --indigo:#5D61F1; --purple:#7A5FFF; --purple-2:#A754E3; --purple-glow:#C15EFF; --pink:#FF4FD8; --blue-neon:#138AFD; --blue-cta:#1F7DFF; --grad-brand:linear-gradient(135deg,#1A65F6 0%,#5D61F1 42%,#7A5FFF 72%,#A754E3 100%); --grad-hero:linear-gradient(110deg,#5D61F1 0%,#7A5FFF 30%,#A754E3 58%,#C15EFF 80%,#FF4FD8 100%); --grad-cta:linear-gradient(135deg,#1F7DFF 0%,#5D61F1 55%,#7A5FFF 100%); --grad-cyan-blue:linear-gradient(135deg,#00E5FF 0%,#138AFD 55%,#1A65F6 100%); } /* Ambient page depth: cyan + purple radials over deep navy */ body{ background: radial-gradient(ellipse at 14% -4%, rgba(0,229,255,0.10), transparent 52%), radial-gradient(ellipse at 90% 4%, rgba(122,95,255,0.12), transparent 50%), radial-gradient(ellipse at 60% 100%, rgba(19,138,253,0.07), transparent 60%), var(--bg) !important; } /* Brand logo mark */ .sidebar-brand-logo{ background:var(--grad-brand) !important; box-shadow:0 0 22px rgba(122,95,255,0.45), 0 0 8px rgba(0,229,255,0.35) !important; color:#fff !important; } /* Gradient text headlines */ .text-grad{ background:var(--grad-hero) !important; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .text-grad-cyan{ background:var(--grad-cyan-blue) !important; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* Primary actions */ .btn-primary{ background:var(--grad-cta) !important; color:#fff !important; box-shadow:0 8px 26px -10px rgba(93,97,241,0.65), 0 0 14px rgba(0,229,255,0.18), inset 0 1px 0 rgba(255,255,255,0.18) !important; } .btn-primary:hover{ box-shadow:0 12px 32px -10px rgba(122,95,255,0.75), 0 0 22px rgba(0,229,255,0.28) !important; transform:translateY(-1px); } /* Hero register / main CTA */ .hero-stake__register{ background:var(--grad-cta) !important; color:#fff !important; box-shadow:0 10px 28px -10px rgba(122,95,255,0.6), inset 0 1px 0 rgba(255,255,255,0.2) !important; } /* Active sidebar item -> blueβ†’purple pill (matches brand) */ .sidebar-link.active, .sidebar[data-collapsed="true"] .sidebar-link.active{ background:var(--grad-cta) !important; color:#fff !important; border:1px solid rgba(122,95,255,0.35) !important; box-shadow:0 6px 20px -8px rgba(93,97,241,0.6), inset 0 0 18px rgba(0,229,255,0.08) !important; } .sidebar-link.active i{ color:#fff !important; } /* Section label accents in sidebar (CASINO / EARN / ACCOUNT) */ .sidebar-section-title,.sidebar-group-title{ color:var(--purple-2) !important; } /* Cards: navy surface with subtle cool border + hover glow */ .card,.card-strong,.tile,.game-card{ background:linear-gradient(180deg, rgba(35,49,82,0.55), rgba(30,39,66,0.55)) !important; border:1px solid rgba(122,95,255,0.10) !important; } .card:hover,.game-card:hover,.tile:hover{ border-color:rgba(0,229,255,0.30) !important; box-shadow:0 10px 30px -14px rgba(122,95,255,0.45) !important; } /* Cyan links / inline highlights stay vivid */ a.link,.text-cyan{ color:var(--cyan) !important; } /* Focus ring uses brand blue */ :focus-visible{ outline:2px solid rgba(31,125,255,0.7); outline-offset:2px; } /* Selection */ ::selection{ background:rgba(122,95,255,0.35); color:#fff; } /* FAUSINO identity layer END */ /* ================================================================= */ /* FAUSINO 2026 β€” ULTRAMODERN GAME UI v2 (shared primitives) */ /* Aplica profundidad/glassmorphism + identidad azulΒ·pΓΊrpuraΒ·cyan a */ /* TODOS los juegos (dice, crash, mines, plinko, hilo, limbo, keno). */ /* ================================================================= */ /* Paneles principales: vidrio navy con borde hairline pΓΊrpura + profundidad */ .card-strong, aside.card-strong { background: linear-gradient(180deg, rgba(35,49,82,0.45), rgba(15,20,37,0.6)) !important; border: 1px solid rgba(122,95,255,0.16) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px -32px rgba(8,11,24,0.95), 0 0 0 1px rgba(0,229,255,0.04) !important; backdrop-filter: blur(14px); } /* BotΓ³n principal BET / APOSTAR β€” azul elΓ©ctrico β†’ pΓΊrpura con glow cyan */ .btn-bet, button.btn-bet { background: linear-gradient(135deg, #1F7DFF 0%, #3E6BFF 40%, #7A5FFF 100%) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 10px 30px -10px rgba(93,97,241,0.72), 0 0 22px -6px rgba(0,229,255,0.35), inset 0 1px 0 rgba(255,255,255,0.28) !important; text-shadow: 0 1px 10px rgba(0,0,0,0.25); overflow: hidden; } .btn-bet::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; } .btn-bet:hover::before { transform: translateX(120%); } .btn-bet:hover { background: linear-gradient(135deg, #2A86FF 0%, #4F78FF 40%, #8C72FF 100%) !important; box-shadow: 0 14px 38px -10px rgba(122,95,255,0.9), 0 0 32px -4px rgba(0,229,255,0.5), inset 0 1px 0 rgba(255,255,255,0.32) !important; } .btn-bet:disabled { opacity: 0.5 !important; box-shadow: none !important; } /* Inputs de apuesta y stats β€” vidrio profundo + foco neΓ³n cyan */ .field-input, input.field-input, select.field-input, .dice-stat-card input { background: rgba(9,13,26,0.72) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; transition: border-color .15s, box-shadow .15s, background .15s !important; } .field-input:focus, input.field-input:focus, .dice-stat-card input:focus { border-color: rgba(0,229,255,0.6) !important; background: rgba(9,13,26,0.92) !important; box-shadow: 0 0 0 3px rgba(0,229,255,0.14), 0 0 18px -6px rgba(0,229,255,0.55) !important; } /* Selector de moneda (wallet mini) */ .wm-select { background: rgba(9,13,26,0.65) !important; border: 1px solid rgba(122,95,255,0.14) !important; } .wm-select:hover { border-color: rgba(0,229,255,0.45) !important; box-shadow: 0 0 16px -8px rgba(0,229,255,0.5) !important; } /* Botones Β½ / 2Γ— dentro del input */ .suffix-btn { background: rgba(122,95,255,0.12) !important; border: 1px solid rgba(122,95,255,0.24) !important; color: #cdbcff !important; border-radius: 8px !important; transition: .15s !important; } .suffix-btn:hover { background: rgba(122,95,255,0.24) !important; color: #fff !important; border-color: rgba(122,95,255,0.5) !important; } /* Tabs Manual / Auto */ .dice-mode-tabs { background: rgba(9,13,26,0.6) !important; border: 1px solid rgba(255,255,255,0.05) !important; } .dice-mode-tabs button.active { background: linear-gradient(135deg,#1F7DFF,#7A5FFF) !important; color: #fff !important; box-shadow: 0 6px 18px -8px rgba(93,97,241,0.75) !important; } /* Contenedor de stats del juego */ .dice-stat-row { background: rgba(9,13,26,0.5) !important; border: 1px solid rgba(122,95,255,0.12) !important; border-radius: 14px !important; } /* Apuestas recientes β€” tabs y tabla */ .rb-tab.active { background: linear-gradient(135deg, rgba(31,125,255,0.24), rgba(122,95,255,0.24)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(122,95,255,0.38) !important; } .rb-table thead th { background: rgba(122,95,255,0.05) !important; } .rb-table tbody tr.rb-row:hover { background: rgba(122,95,255,0.07) !important; } /* Botones secundarios (ghost) */ .btn-ghost { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(122,95,255,0.14) !important; } .btn-ghost:hover { background: rgba(122,95,255,0.12) !important; border-color: rgba(122,95,255,0.32) !important; color: #fff !important; } /* PestaΓ±as/badges con color de marca para acentos cyan */ .dice-stat-value.cyan, .text-cyan, .accent-cyan { color: var(--cyan) !important; } /* Barra de herramientas inferior del canvas (engranaje/sonido/expandir) */ .game-toolbar, .canvas-toolbar { border-top: 1px solid rgba(122,95,255,0.10) !important; } /* BotΓ³n VerificaciΓ³n / outline accents */ .btn-verify, .verify-btn, a[href*="provably"], .pf-trigger { border-color: rgba(0,229,255,0.35) !important; } /* ULTRAMODERN GAME UI v2 END */ /* ================================================================= */ /* FAUSINO 2026 β€” CONTRASTE + COBERTURA v3 */ /* Sube contraste global y aplica identidad a sidebar, topbar, */ /* historial recent-bets, tasks, affiliate, slots y mΓ‘s. */ /* ================================================================= */ /* Texto secundario/muted mΓ‘s brillante en TODA la app (mΓ‘s contraste) */ :root{ --text-dim:#B3B9C7; --text-muted:#838A9A; } /* ---------- SIDEBAR ---------- */ .sidebar{ background: linear-gradient(180deg, rgba(23,26,43,0.97), rgba(11,16,32,0.97)) !important; border-right: 1px solid rgba(122,95,255,0.16) !important; box-shadow: 1px 0 0 rgba(0,229,255,0.05), 8px 0 30px -20px rgba(0,0,0,0.8) !important; } .sidebar-section{ color:#9aa1ff !important; /* etiqueta de secciΓ³n con tinte pΓΊrpura */ opacity:.95; font-weight:800 !important; } .sidebar-link{ color:#C6CBD8 !important; font-weight:600 !important; } .sidebar-link i{ color:#9DA0A5; transition:color .15s; } .sidebar-link:hover{ background: rgba(122,95,255,0.10) !important; color:#fff !important; } .sidebar-link:hover i{ color:#00E5FF; } .sidebar-link.active i{ color:#fff !important; } /* PΓ­ldoras Casino/Sports del head del sidebar */ .sidebar-pill-toggle .pill-btn.active{ background: linear-gradient(135deg,#1F7DFF,#7A5FFF) !important; color:#fff !important; box-shadow:0 4px 14px -6px rgba(93,97,241,0.7) !important; } /* ---------- TOPBAR ---------- */ .topbar{ background: rgba(13,18,35,0.9) !important; border-bottom: 1px solid rgba(122,95,255,0.18) !important; box-shadow: 0 1px 0 rgba(0,229,255,0.05), 0 10px 30px -24px rgba(0,0,0,0.9) !important; } /* ---------- HISTORIAL DE APUESTAS (lobby + juegos) ---------- */ .rb-table thead th{ color:#AfB5C5 !important; background: rgba(122,95,255,0.07) !important; border-bottom:1px solid rgba(122,95,255,0.18) !important; font-weight:700 !important; } .rb-table tbody td{ color:#D2D6E2 !important; } .rb-table tbody tr.rb-row:nth-child(even){ background: rgba(255,255,255,0.018); } .rb-table tbody tr.rb-row{ border-bottom:1px solid rgba(255,255,255,0.05) !important; } .rb-table tbody tr.rb-row:hover{ background: rgba(122,95,255,0.10) !important; } .rb-tabs-wrap, .rb-tabs{ border-color: rgba(122,95,255,0.12) !important; } /* Live wins del lobby β€” refuerzo de borde */ .lw-card, .live-win-card{ border:1px solid rgba(122,95,255,0.14) !important; } /* ---------- SLOTS ---------- */ .slots-cat.active, .slots-tab.active, .sg-cat.active, .cat-pill.active{ background: linear-gradient(135deg,#1F7DFF,#7A5FFF) !important; color:#fff !important; border-color: transparent !important; box-shadow:0 6px 18px -8px rgba(93,97,241,0.7) !important; } .slot-card, .sg-card{ border:1px solid rgba(122,95,255,0.12) !important; transition: transform .15s, box-shadow .15s, border-color .15s; } .slot-card:hover, .sg-card:hover{ transform: translateY(-4px); border-color: rgba(0,229,255,0.4) !important; box-shadow: 0 16px 36px -16px rgba(122,95,255,0.6) !important; } /* CONTRASTE + COBERTURA v3 END */ /* ===== FAUSINO v3 β€” Affiliate (estilos inline -> override con !important) ===== */ .aff-tab{ color:#AEB4C2 !important; } .aff-tab:hover{ color:#fff !important; background: rgba(122,95,255,0.10) !important; } .aff-tab[aria-selected="true"]{ color:#fff !important; background: linear-gradient(135deg, rgba(31,125,255,0.22), rgba(122,95,255,0.26)) !important; box-shadow: inset 0 0 0 1px rgba(122,95,255,0.4) !important; } .aff-tab[aria-selected="true"] .aff-tab-ico{ color:#00E5FF !important; } .aff-tabs{ background: rgba(9,13,26,0.6) !important; border:1px solid rgba(122,95,255,0.16) !important; } /* Affiliate v3 END */ /* ================================================================= */ /* FAUSINO 2026 β€” v4 RAINBET-CONTRAST */ /* Superficies navy SΓ“LIDAS con separaciΓ³n clara + alto contraste. */ /* ================================================================= */ :root{ --surface-1:#141B30; /* tarjetas */ --surface-2:#1B2440; /* elevado / hover */ --surface-3:#0F1530; /* contenedor interno */ --bd-1:rgba(255,255,255,0.09); --bd-brand:rgba(122,95,255,0.24); } /* ---- Superficies (tarjetas/paneles) sΓ³lidas y separadas ---- */ .card, .card-strong, aside.card-strong, .recent-bets-card, .profile-card, .profile-hero, .dice-stat-row, .tile{ background: var(--surface-1) !important; border: 1px solid var(--bd-1) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 44px -28px rgba(0,0,0,0.95) !important; backdrop-filter: none !important; } .card-strong, aside.card-strong{ border-color: var(--bd-brand) !important; } .profile-stat{ background: var(--surface-3) !important; border: 1px solid var(--bd-1) !important; } .profile-stat .k, .profile-card .desc, .profile-meta{ color:#aab0c2 !important; } .profile-card h2 .ic{ background: rgba(0,229,255,0.12) !important; } /* ---- HISTORIAL DE APUESTAS estilo rainbet (filas tarjeta) ---- */ .recent-bets-card{ padding: 6px 10px 10px !important; } .rb-tabs-wrap{ padding: 12px 6px 14px !important; } .rb-tab{ color:#aab0c2 !important; font-weight:700 !important; border-radius:10px !important; } .rb-tab.active{ background:#1A65F6 !important; color:#fff !important; box-shadow:0 6px 18px -8px rgba(26,101,246,0.8) !important; } .rb-table{ border-collapse: separate !important; border-spacing: 0 7px !important; } .rb-table thead th{ background: transparent !important; border-bottom: 0 !important; color:#8b91a5 !important; padding: 4px 18px !important; } .rb-table tbody tr.rb-row td{ background: var(--surface-3) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; color:#EDEFF5 !important; padding: 14px 18px !important; } .rb-table tbody tr.rb-row td:first-child{ border-left:1px solid rgba(255,255,255,0.05) !important; border-radius: 12px 0 0 12px !important; } .rb-table tbody tr.rb-row td:last-child{ border-right:1px solid rgba(255,255,255,0.05) !important; border-radius: 0 12px 12px 0 !important; } .rb-table tbody tr.rb-row:nth-child(even) td{ background:#161E38 !important; } .rb-table tbody tr.rb-row:hover td{ background: var(--surface-2) !important; } .rb-table tbody td:first-child i{ color:#3B8DFF !important; } .rb-table .rb-payout.win, .rb-table td .win, .rb-win{ color:#00FF99 !important; } .rb-limit{ background: var(--surface-3) !important; border:1px solid var(--bd-1) !important; color:#EDEFF5 !important; } /* ---- TOPBAR: balance-pill + deposit-btn ---- */ .balance-pill{ background: var(--surface-1) !important; border: 1px solid var(--bd-brand) !important; } .balance-pill .amount{ color:#fff !important; } .balance-pill .deposit-btn, .deposit-btn{ background: linear-gradient(135deg,#00C8FF 0%,#1F7DFF 55%,#5D61F1 100%) !important; color:#ffffff !important; font-weight:800 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important; } .balance-pill .deposit-btn:hover, .deposit-btn:hover{ filter:brightness(1.08) !important; } /* Campana / iconos del topbar con mΓ‘s contraste */ .topbar-icon-btn, .gw-bell, .topbar .icon-btn{ color:#cfd3df !important; } /* v4 RAINBET-CONTRAST END */ /* ================================================================= */ /* FAUSINO 2026 β€” v5 (sidebar rainbet + wallet modal + admin) */ /* ================================================================= */ /* ---- SIDEBAR estilo rainbet ---- */ .sidebar{ background:#10162B !important; border-right:1px solid rgba(255,255,255,0.07) !important; box-shadow: 6px 0 28px -22px rgba(0,0,0,0.85) !important; } .sidebar-section{ color:#8b93a8 !important; opacity:1 !important; font-weight:700 !important; } .sidebar-link{ color:#C8CDDA !important; padding:10px 12px !important; border-radius:10px !important; font-weight:600 !important; } .sidebar-link i{ color:#9aa1b5 !important; } .sidebar-link:hover{ background: rgba(255,255,255,0.06) !important; color:#fff !important; } .sidebar-link:hover i{ color:#fff !important; } .sidebar-link.active, .sidebar[data-collapsed="true"] .sidebar-link.active{ background:#1A65F6 !important; color:#fff !important; border:0 !important; box-shadow:0 6px 16px -6px rgba(26,101,246,0.75) !important; } .sidebar-link.active i{ color:#fff !important; } /* PΓ­ldoras Casino/Sports = azul sΓ³lido como rainbet */ .sidebar-pill-toggle .pill-btn.active{ background:#1A65F6 !important; color:#fff !important; box-shadow:0 4px 12px -5px rgba(26,101,246,0.8) !important; } /* ---- WALLET MODAL ---- */ .modal{ background: linear-gradient(180deg,#141B30,#0F1530) !important; border:1px solid var(--bd-brand) !important; box-shadow:0 30px 80px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,229,255,0.05) !important; } .wallet-mtabs{ background: rgba(9,13,26,0.72) !important; } .wallet-mtabs button.active{ background:#1A65F6 !important; color:#fff !important; box-shadow:0 6px 16px -8px rgba(26,101,246,0.8) !important; } .wm-pct-btn{ background: rgba(122,95,255,0.14) !important; color:#cdbcff !important; } .wm-pct-btn:hover{ background: linear-gradient(135deg,#1F7DFF,#7A5FFF) !important; color:#fff !important; } .wm-address-card, .wm-net-grid > *, .wm-net-btn{ background: var(--surface-3) !important; border:1px solid var(--bd-1) !important; } .wm-net-btn.active, .wm-net-grid > .active{ border-color: rgba(31,125,255,0.6) !important; box-shadow:0 0 0 1px rgba(31,125,255,0.5), 0 0 16px -6px rgba(31,125,255,0.6) !important; } /* ---- ADMIN: superficies y tablas con contraste ---- */ .admin-card, .admin-panel, .admin-box, .a-card, .admin-wrap .card, .admin-table-wrap{ background: var(--surface-1) !important; border:1px solid var(--bd-1) !important; } .admin-table thead th, table.admin thead th{ background: var(--surface-3) !important; color:#aab0c2 !important; border-bottom:1px solid var(--bd-1) !important; } .admin-table tbody td, table.admin tbody td{ color:#E4E7EF !important; border-bottom:1px solid rgba(255,255,255,0.05) !important; } .admin-table tbody tr:hover td{ background: rgba(122,95,255,0.07) !important; } .admin-stat, .stat-card, .kpi-card, .stat-tile{ background: var(--surface-3) !important; border:1px solid var(--bd-1) !important; } /* v5 END */ /* ================================================================= */ /* FAUSINO 2026 β€” v6 (botones unificados + sidebar grupos rainbet) */ /* ================================================================= */ :root{ --btn-grad: linear-gradient(135deg,#00C8FF 0%,#1F7DFF 55%,#5D61F1 100%); } /* ---- TODOS los botones de acciΓ³n con el gradiente del deposit-btn ---- */ .btn:not(.btn-ghost):not(.btn-win):not(.btn-cashout):not(.btn-danger):not(.close), .btn-primary, .btn-bet, .tc-btn, .auth-submit, .deposit-btn, .hero-stake__register, .wm-submit, #wdSubmit, #depSubmit, #buySubmit, #swapSubmit, #tipSubmit, .copyRefBtn, #copyRefBtn, .copy-btn, .pf-v9-change-btn, .promo-claim-btn, .modal .btn-primary{ background: var(--btn-grad) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 8px 22px -10px rgba(31,125,255,0.7), inset 0 1px 0 rgba(255,255,255,0.22) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.2); } .btn:not(.btn-ghost):not(.btn-win):not(.btn-cashout):not(.btn-danger):not(.close):hover, .btn-primary:hover, .btn-bet:hover, .tc-btn:hover, .auth-submit:hover, .deposit-btn:hover, .hero-stake__register:hover, #wdSubmit:hover, .pf-v9-change-btn:hover{ filter: brightness(1.08) !important; box-shadow: 0 12px 30px -10px rgba(93,97,241,0.85), 0 0 20px -6px rgba(0,229,255,0.45) !important; } /* ---- WALLET MODAL: botones de red / % con mΓ‘s contraste ---- */ .wm-net-btn, .wm-net-grid > button{ background:#10182E !important; border:1px solid rgba(255,255,255,0.10) !important; color:#E4E7EF !important; } .wm-net-btn:hover, .wm-net-grid > button:hover{ border-color: rgba(0,229,255,0.45) !important; } .wm-net-btn.active{ background: rgba(31,125,255,0.16) !important; border-color: rgba(31,125,255,0.7) !important; color:#fff !important; box-shadow: 0 0 0 1px rgba(31,125,255,0.5), 0 0 16px -6px rgba(31,125,255,0.7) !important; } .buy-btn.active, .swap-cur.active{ border-color: rgba(31,125,255,0.7) !important; background: rgba(31,125,255,0.14) !important; color:#fff !important; } /* ================================================================= */ /* SIDEBAR β€” grupos colapsables estilo rainbet + flyout */ /* ================================================================= */ .sidebar-group{ position: relative; margin: 2px 0 4px; } .sidebar-group-head{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:10px; cursor:pointer; background: transparent; border:0; color:#aeb4c5; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; transition: background .15s, color .15s; } .sidebar-group-head:hover{ background: rgba(255,255,255,0.05); color:#fff; } .sidebar-group-head .grp-ico{ display:inline-flex; } .sidebar-group-head .grp-ico i{ color:#7A5FFF; font-size:16px; } .sidebar-group-head .grp-label{ flex:1; text-align:left; } .sidebar-group-head .grp-caret{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:22px; border-radius:7px; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); transition: transform .22s; } .sidebar-group-head .grp-caret i{ font-size:12px; color:#cfd3df; } .sidebar-group:not(.open) .grp-caret{ transform: rotate(180deg); } .sidebar-group-items{ overflow:hidden; max-height:1400px; transition: max-height .28s ease; padding-left:2px; } .sidebar-group:not(.open) .sidebar-group-items{ max-height:0; } .sidebar-group-items .flyout-title{ display:none; } /* Estado COLAPSADO: head solo icono, items como flyout flotante */ .sidebar[data-collapsed="true"] .sidebar-group-head{ justify-content:center; padding:11px 0; } .sidebar[data-collapsed="true"] .sidebar-group-head .grp-ico i{ font-size:18px; } .sidebar[data-collapsed="true"] .sidebar-group-items{ position: fixed; max-height:none !important; overflow:visible; width: 236px; padding:8px; border-radius:14px; background:#141B30; border:1px solid var(--bd-brand); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,229,255,0.05); opacity:0; visibility:hidden; transform: translateX(-6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 80; pointer-events:none; } .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } .sidebar[data-collapsed="true"] .sidebar-group-items .flyout-title{ display:block; padding:6px 12px 10px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:#8b93a8; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:6px; } /* En el flyout, forzar etiquetas visibles y links normales */ .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-text{ opacity:1 !important; height:auto !important; padding:0 !important; margin:0 !important; pointer-events:auto; } .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-link{ justify-content:flex-start !important; padding:9px 12px !important; gap:12px !important; } .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-link::after{ display:none !important; } /* v6 END */ /* ================================================================= */ /* FAUSINO 2026 β€” v7 fixes (flyout labels + iconos de grupo) */ /* ================================================================= */ /* Mostrar las etiquetas dentro del flyout (vence al display:none) */ .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-text{ display:inline-block !important; opacity:1 !important; visibility:visible !important; height:auto !important; width:auto !important; padding:0 !important; margin:0 !important; font-size:13px !important; font-weight:600 !important; color:#E4E7EF !important; pointer-events:auto !important; } .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-link{ display:flex !important; align-items:center !important; justify-content:flex-start !important; padding:9px 12px !important; gap:12px !important; width:100% !important; margin:0 0 2px 0 !important; border-radius:9px !important; } .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-link i{ font-size:15px !important; width:18px !important; flex-shrink:0 !important; color:#aab0c2 !important; } .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-link.active i, .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show .sidebar-link:hover i{ color:#fff !important; } /* Iconos de cabecera de grupo (Originals/Earn/Profile) mΓ‘s grandes al contraer */ .sidebar-group-head .grp-ico i{ font-size:17px; } .sidebar-group-head .grp-ico svg{ width:17px; height:17px; } .sidebar[data-collapsed="true"] .sidebar-group-head{ padding:12px 0 !important; justify-content:center !important; } .sidebar[data-collapsed="true"] .sidebar-group-head .grp-ico i{ font-size:20px !important; } .sidebar[data-collapsed="true"] .sidebar-group-head .grp-ico svg{ width:20px !important; height:20px !important; } .sidebar[data-collapsed="true"] .sidebar-group-head .grp-ico i{ color:#9aa1ff !important; } /* v7 END */ /* v7b: puente invisible para cruzar el hueco icono->flyout sin que se cierre */ .sidebar[data-collapsed="true"] .sidebar-group-items.flyout-show::before{ content:""; position:absolute; left:-16px; top:0; width:16px; height:100%; }