/* Blox Vault — shared design tokens & effects Loaded on every page alongside the Tailwind CDN script. */ :root { --bg-void: #05070d; --bg-void-soft: #070a12; --bg-panel: #0b1220; --bg-panel-elevated: #121b2e; --bg-panel-hover: #172238; --border-glass: rgba(148, 178, 255, 0.12); --border-glass-strong: rgba(148, 178, 255, 0.24); --cobalt: #3b6ef5; --cobalt-dim: #2952c4; --cobalt-bright: #5c87ff; --cyan: #4fe3ff; --cyan-dim: #2fb6d1; --gold: #ffc24b; --danger: #ff4d6d; --success: #3ddc8f; --ink-primary: #e8eefc; --ink-muted: #7c8aa8; --ink-faint: #4c5875; } * { border-color: var(--border-glass); } html { color-scheme: dark; } body { background-color: var(--bg-void); color: var(--ink-primary); font-family: "Inter", sans-serif; background-image: radial-gradient(circle at 50% -10%, rgba(59, 110, 245, 0.12), transparent 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } .font-display { font-family: "Space Grotesk", sans-serif; } .font-mono { font-family: "JetBrains Mono", monospace; } ::selection { background-color: rgba(59, 110, 245, 0.3); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background-color: var(--bg-void); } ::-webkit-scrollbar-thumb { background-color: var(--bg-panel-elevated); border-radius: 9999px; border: 2px solid var(--bg-void); } ::-webkit-scrollbar-thumb:hover { background-color: var(--bg-panel-hover); } :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cobalt-bright), 0 0 0 4px var(--bg-void); } /* ---------- Glass panel (Card base) ---------- */ .glass-panel { background-color: rgba(11, 18, 32, 0.8); backdrop-filter: blur(20px); border: 1px solid var(--border-glass); box-shadow: 0 1px 0 0 rgba(148, 178, 255, 0.06) inset; } /* ---------- Signature "vault seam" ---------- */ .seam-border { position: relative; } .seam-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, transparent, #3b6ef5, #4fe3ff, #3b6ef5, transparent); background-size: 200% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: seam-trace 3s linear infinite; pointer-events: none; } @keyframes seam-trace { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulse-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .glow-cobalt { box-shadow: 0 0 24px rgba(59, 110, 245, 0.35); } .glow-cyan { box-shadow: 0 0 24px rgba(79, 227, 255, 0.35); } /* ---------- Simple fade/slide-in used in place of Framer Motion ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .hover-lift { transition: transform 0.15s ease, box-shadow 0.15s ease; } .hover-lift:hover { transform: translateY(-2px); } /* ---------- Page-load transition ---------- Opacity-only (a transform here would turn into a containing block for fixed-position children mid-animation). Static sites have no client router, so this is the "page transition". */ @media (prefers-reduced-motion: no-preference) { body { animation: page-enter 0.35s ease both; } } @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } } /* ---------- Toast notifications (BV.toast in app.js) ---------- */ .toast-container { position: fixed; bottom: 5rem; /* clears the mobile bottom nav */ right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } @media (min-width: 1024px) { .toast-container { bottom: 1.25rem; right: 1.25rem; } } .toast { max-width: 20rem; padding: 0.65rem 1rem; border-radius: 0.875rem; border: 1px solid var(--border-glass-strong); background-color: rgba(18, 27, 46, 0.92); backdrop-filter: blur(12px); color: var(--ink-primary); font-size: 0.875rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; } .toast-visible { opacity: 1; transform: translateY(0); } .toast-success { border-color: rgba(61, 220, 143, 0.4); } .toast-error { border-color: rgba(255, 77, 109, 0.4); } /* ---------- Skeleton loaders (shared by every data-driven page) ---------- */ .skeleton { position: relative; overflow: hidden; border-radius: 0.5rem; background-color: var(--bg-panel-elevated); color: transparent !important; user-select: none; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(148, 178, 255, 0.09), transparent); animation: skeleton-sweep 1.4s ease-in-out infinite; } @keyframes skeleton-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ---------- Coinflip 3D coin (coinflip.html) ---------- The scene gives perspective; .coin holds two backface-hidden faces. While a flip resolves the coin spins continuously; once the server reveals the outcome, a landing animation runs to a rotation that is a multiple of 360° (heads) or 360°+180° (tails), so the correct face is showing when it settles. */ .coin-scene { perspective: 900px; } .coin { position: relative; width: 7rem; height: 7rem; transform-style: preserve-3d; } .coin-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 3px solid rgba(232, 238, 252, 0.25); font-family: "Space Grotesk", sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; backface-visibility: hidden; } .coin-face-heads { background: radial-gradient(circle at 35% 30%, #5c87ff, #2952c4 70%); box-shadow: 0 0 32px rgba(59, 110, 245, 0.5); } .coin-face-tails { background: radial-gradient(circle at 35% 30%, #4fe3ff, #2fb6d1 70%); box-shadow: 0 0 32px rgba(79, 227, 255, 0.5); transform: rotateY(180deg); } .coin-spinning { animation: coin-spin 0.45s linear infinite; } @keyframes coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .coin-land-heads { animation: coin-land-heads 1.6s cubic-bezier(0.2, 0.9, 0.35, 1) forwards; } @keyframes coin-land-heads { from { transform: rotateY(0deg); } to { transform: rotateY(1800deg); } /* 5 full turns → heads face */ } .coin-land-tails { animation: coin-land-tails 1.6s cubic-bezier(0.2, 0.9, 0.35, 1) forwards; } @keyframes coin-land-tails { from { transform: rotateY(0deg); } to { transform: rotateY(1980deg); } /* 5.5 turns → tails face */ } /* Countdown digit pop, one pulse per second */ .countdown-pop { animation: countdown-pop 1s ease-in-out infinite; } @keyframes countdown-pop { 0% { transform: scale(1); opacity: 0.6; } 20% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 0.6; } } /* Vault Opening — reward-card stagger + multiplier pop-in */ .reveal-card { opacity: 0; animation: reveal-card 0.4s ease-out forwards; } @keyframes reveal-card { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .reveal-pop { animation: reveal-pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; } @keyframes reveal-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } } /* ═══════════ Coinflip stake-selector modal (UI overhaul) ═══════════ */ /* Open/close transition. JS toggles [data-stake-modal].is-open. */ [data-stake-modal] [data-modal-backdrop] { opacity: 0; transition: opacity 0.2s ease; } [data-stake-modal] [data-modal-card] { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.35, 1); } [data-stake-modal].is-open [data-modal-backdrop] { opacity: 1; } [data-stake-modal].is-open [data-modal-card] { opacity: 1; transform: translateY(0) scale(1); } /* ---------- Per-unit selectable pet tile (virtualized grid) ---------- */ .cf-unit { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.4rem 0.25rem; border-radius: 0.75rem; border: 1px solid var(--border-glass); background-color: var(--bg-panel-elevated); cursor: pointer; user-select: none; overflow: hidden; transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease; will-change: transform; } .cf-unit:hover { background-color: var(--bg-panel-hover); border-color: var(--border-glass-strong); } .cf-unit:active { transform: scale(0.95); } .cf-unit-selected { border-color: var(--cobalt); background-color: rgba(59, 110, 245, 0.14); box-shadow: 0 0 0 1px var(--cobalt) inset, 0 0 18px rgba(59, 110, 245, 0.28); } .cf-unit-selected:hover { background-color: rgba(59, 110, 245, 0.2); } .cf-unit img, .cf-unit .cf-unit-fallback { width: 2.5rem; height: 2.5rem; object-fit: contain; pointer-events: none; } .cf-unit-fallback { border-radius: 0.5rem; background: linear-gradient(135deg, rgba(59, 110, 245, 0.3), rgba(79, 227, 255, 0.15)); } .cf-unit-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.62rem; line-height: 1; color: var(--ink-muted); } .cf-unit-value { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; line-height: 1; color: var(--cyan); } .cf-unit-check { position: absolute; top: 0.25rem; right: 0.25rem; display: none; height: 0.9rem; width: 0.9rem; align-items: center; justify-content: center; border-radius: 9999px; background-color: var(--cobalt); color: #fff; } .cf-unit-selected .cf-unit-check { display: flex; } /* Faint index badge so a stack still reads as N discrete units */ .cf-unit-idx { position: absolute; bottom: 0.2rem; left: 0.3rem; font-family: "JetBrains Mono", monospace; font-size: 0.5rem; color: var(--ink-faint); pointer-events: none; } /* ---------- ±5% match-validation band ---------- */ .cf-track { position: relative; height: 0.5rem; border-radius: 9999px; background-color: var(--bg-panel-elevated); overflow: hidden; } .cf-zone { position: absolute; inset-block: 0; background: repeating-linear-gradient( 45deg, rgba(61, 220, 143, 0.28), rgba(61, 220, 143, 0.28) 6px, rgba(61, 220, 143, 0.16) 6px, rgba(61, 220, 143, 0.16) 12px ); } .cf-fill { position: absolute; inset-block: 0; left: 0; border-radius: 9999px; transition: width 0.25s cubic-bezier(0.2, 0.9, 0.35, 1), background-color 0.2s ease; } .cf-fill-under { background: linear-gradient(90deg, var(--cobalt-dim), var(--cobalt-bright)); } .cf-fill-valid { background: linear-gradient(90deg, var(--success), #7cf0b6); } .cf-fill-over { background: linear-gradient(90deg, var(--danger), #ff8098); } /* ── Shared pet selector ─────────────────────────────────────────────── */ .bv-sel-controls { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .bv-sel-search { position: relative; flex: 1; } .bv-sel-search svg { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--ink-faint); pointer-events: none; } .bv-sel-search input { width: 100%; height: 2.4rem; padding: 0 0.75rem 0 2.1rem; border-radius: 0.75rem; border: 1px solid var(--border-glass); background: var(--bg-panel); color: var(--ink-primary); font-size: 0.85rem; } .bv-sel-search input:focus { outline: none; border-color: var(--cobalt-bright); } .bv-sel-sort { height: 2.4rem; border-radius: 0.75rem; border: 1px solid var(--border-glass); background: var(--bg-panel); color: var(--ink-primary); font-size: 0.8rem; padding: 0 0.6rem; cursor: pointer; } .bv-sel-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; } .bv-sel-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 0.65rem; border: 1px solid var(--border-glass); background: var(--bg-panel); color: var(--ink-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .bv-sel-tab:hover { color: var(--ink-primary); background: var(--bg-panel-elevated); } .bv-sel-tab.is-active { color: #fff; background: var(--cobalt); border-color: transparent; box-shadow: 0 0 16px rgba(59,110,245,0.35); } .bv-sel-tab-count { font-size: 0.68rem; opacity: 0.75; background: rgba(255,255,255,0.12); padding: 0 0.35rem; border-radius: 0.5rem; } .bv-sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; max-height: 46vh; overflow-y: auto; padding: 0.15rem; } .bv-sel-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.4rem; border-radius: 0.7rem; border: 1px solid var(--border-glass); background: var(--bg-panel); cursor: pointer; text-align: center; transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .bv-sel-card:hover { transform: translateY(-2px); border-color: var(--cobalt-bright); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .bv-sel-card.is-selected { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan), 0 6px 18px rgba(79,227,255,0.25); background: var(--bg-panel-elevated); } .bv-sel-card.is-locked { opacity: 0.45; cursor: not-allowed; } .bv-sel-card.is-locked:hover { transform: none; } /* Special pinned Gems entry — always the first card in an inventory grid. */ .bv-sel-card.is-gems { cursor: default; border-color: rgba(79,227,255,0.35); background: linear-gradient(160deg, rgba(79,227,255,0.08), var(--bg-panel)); } .bv-sel-card.is-gems:hover { transform: none; box-shadow: none; border-color: rgba(79,227,255,0.5); } .bv-sel-card.is-gems .bv-sel-card-img img { width: 60%; height: 60%; } .bv-sel-card-img { position: relative; aspect-ratio: 1; border-radius: 0.5rem; background: var(--bg-void-soft, #070A12); display: flex; align-items: center; justify-content: center; overflow: hidden; } .bv-sel-card-img img { width: 100%; height: 100%; object-fit: contain; } .bv-sel-card-noimg { font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--ink-muted); font-size: 0.9rem; } .bv-sel-lock { position: absolute; top: 0.2rem; right: 0.25rem; font-size: 0.7rem; } .bv-sel-check { position: absolute; top: 0.2rem; left: 0.25rem; width: 1.05rem; height: 1.05rem; border-radius: 9999px; background: var(--cyan); color: #041018; font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .bv-sel-card-name { font-size: 0.68rem; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bv-sel-card-val { display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; font-size: 0.68rem; font-family: "JetBrains Mono", monospace; color: var(--cyan); } .bv-sel-empty { grid-column: 1/-1; text-align: center; color: var(--ink-muted); font-size: 0.85rem; padding: 2.5rem 1rem; } /* ── Inventory modal ─────────────────────────────────────────────────── */ .inv-modal-root { position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center; padding: 1rem; } .inv-modal-backdrop { position: absolute; inset: 0; background: rgba(2,4,10,0.72); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.22s ease; } .inv-modal-root.is-open .inv-modal-backdrop { opacity: 1; } .inv-modal { position: relative; width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto; border-radius: 1.25rem; border: 1px solid var(--border-glass-strong, rgba(148,178,255,0.2)); background: var(--bg-void-soft, #070A12); box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: 1.4rem; transform: translateY(14px) scale(0.98); opacity: 0; transition: transform 0.24s cubic-bezier(0.2,0.9,0.35,1), opacity 0.24s ease; } .inv-modal-root.is-open .inv-modal { transform: translateY(0) scale(1); opacity: 1; } .inv-modal-x { position: absolute; top: 0.9rem; right: 0.9rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; color: var(--ink-muted); background: transparent; cursor: pointer; } .inv-modal-x:hover { color: var(--ink-primary); background: var(--bg-panel-elevated); } .inv-modal-x svg { width: 1.15rem; height: 1.15rem; } .inv-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; padding-right: 2rem; } .inv-avatar { width: 3.2rem; height: 3.2rem; border-radius: 0.9rem; object-fit: cover; border: 1px solid var(--border-glass); } .inv-avatar-fallback { display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--ink-primary); background: linear-gradient(135deg, rgba(59,110,245,0.3), rgba(79,227,255,0.2)); } .inv-head-id { flex: 1; min-width: 0; } .inv-head-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink-primary); } .inv-head-sub { font-size: 0.78rem; color: var(--ink-muted); } .inv-head-actions { display: flex; gap: 0.5rem; } .inv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.4rem; padding: 0 1rem; border-radius: 0.7rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; text-decoration: none; } .inv-btn-primary { background: var(--cobalt); color: #fff; box-shadow: 0 0 18px rgba(59,110,245,0.35); } .inv-btn-primary:hover { background: var(--cobalt-bright); } .inv-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .inv-btn-ghost { background: var(--bg-panel); color: var(--ink-primary); border-color: var(--border-glass); } .inv-btn-ghost:hover { background: var(--bg-panel-elevated); } .inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; } .inv-stat { padding: 0.75rem; border-radius: 0.8rem; border: 1px solid var(--border-glass); background: var(--bg-panel); text-align: center; } .inv-stat-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 0.3rem; } .inv-stat-val { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font-family: "JetBrains Mono", monospace; font-weight: 600; color: var(--ink-primary); font-size: 0.95rem; } .inv-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 0.6rem; } .inv-tab { padding: 0.4rem 0.9rem; border-radius: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; } .inv-tab:hover { color: var(--ink-primary); background: var(--bg-panel); } .inv-tab.is-active { color: #fff; background: var(--cobalt); } .inv-note { padding: 0.75rem 0.9rem; border-radius: 0.75rem; border: 1px solid var(--border-glass); background: var(--bg-panel); font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.85rem; } .inv-note-warn { border-color: rgba(255,194,75,0.3); background: rgba(255,194,75,0.08); color: var(--gold); } .inv-note-danger { border-color: rgba(255,77,109,0.3); background: rgba(255,77,109,0.08); color: var(--danger); } .inv-lead { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 0.85rem; } .inv-empty { text-align: center; color: var(--ink-muted); padding: 2.5rem 1rem; font-size: 0.9rem; } .inv-bots { display: flex; flex-direction: column; gap: 0.6rem; } .inv-bot { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.85rem; border: 1px solid var(--border-glass); background: var(--bg-panel); } .inv-bot-avatar { width: 2.8rem; height: 2.8rem; border-radius: 0.7rem; object-fit: cover; border: 1px solid var(--border-glass); } .inv-bot-id { flex: 1; min-width: 0; } .inv-bot-name { font-weight: 600; color: var(--ink-primary); font-size: 0.9rem; } .inv-bot-role { font-size: 0.75rem; color: var(--success); } .inv-withdraw-gems { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; padding: 0.75rem; border-radius: 0.8rem; border: 1px solid var(--border-glass); background: var(--bg-panel); } .inv-withdraw-gems label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--ink-primary); font-weight: 500; } .inv-withdraw-gems input { flex: 1; min-width: 120px; height: 2.3rem; border-radius: 0.6rem; border: 1px solid var(--border-glass); background: var(--bg-void-soft, #070A12); color: var(--ink-primary); padding: 0 0.75rem; font-family: "JetBrains Mono", monospace; } .inv-wd-balance { font-size: 0.72rem; color: var(--ink-faint); } .inv-withdraw-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-glass); } .inv-wd-summary { font-size: 0.82rem; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 0.35rem; } @media (max-width: 640px) { .inv-stats { grid-template-columns: 1fr; } .inv-head { flex-wrap: wrap; } } /* ── Settings preference effects (Part 2) ─────────────────────────────── */ html[data-reduced-motion] *, html[data-reduced-motion] *::before, html[data-reduced-motion] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body.bv-hide-chat [data-chat-toggle], body.bv-hide-chat [data-chat-panel] { display: none !important; } @media (min-width: 1024px) { /* Reclaim the reserved chat column when chat is hidden. */ body.bv-hide-chat main { padding-right: 2rem !important; } } body.bv-compact-inv .bv-sel-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.4rem; } body.bv-compact-inv .bv-sel-card { padding: 0.25rem; } body.bv-compact-inv .bv-sel-card-name { font-size: 0.62rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Plinko ────────────────────────────────────────────────────────────── */ .plk-canvas-wrap { background: radial-gradient(120% 80% at 50% -10%, rgba(79, 227, 255, 0.08), transparent 60%), linear-gradient(180deg, rgba(11, 18, 32, 0.6), rgba(5, 7, 13, 0.85)); border: 1px solid var(--border-glass); } .plk-canvas-wrap canvas { touch-action: manipulation; } /* Range slider (rows) — themed thumb/track. */ .plk-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--cobalt, #3B6EF5), var(--cyan, #4FE3FF)); outline: none; cursor: pointer; } .plk-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #E8EEFC; border: 3px solid var(--cobalt-bright, #5C87FF); box-shadow: 0 0 8px rgba(92, 135, 255, 0.6); cursor: pointer; } .plk-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #E8EEFC; border: 3px solid var(--cobalt-bright, #5C87FF); box-shadow: 0 0 8px rgba(92, 135, 255, 0.6); cursor: pointer; } .plk-range:disabled { opacity: 0.5; cursor: not-allowed; } /* ═══════════════════════════════════════════════════════════════════════ Auth gate modal — shared login/sign-up prompt for restricted guest actions (BV.authGate in app.js). Matches the inventory modal's motion + tokens. ═══════════════════════════════════════════════════════════════════════ */ .auth-gate-root { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 1rem; } .auth-gate-backdrop { position: absolute; inset: 0; background: rgba(2,4,10,0.74); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s ease; } .auth-gate-root.is-open .auth-gate-backdrop { opacity: 1; } .auth-gate-card { position: relative; width: 100%; max-width: 24rem; border-radius: 1.25rem; border: 1px solid var(--border-glass-strong, rgba(148,178,255,0.2)); background: var(--bg-void-soft, #070A12); box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: 1.75rem 1.5rem 1.5rem; text-align: center; transform: translateY(14px) scale(0.98); opacity: 0; transition: transform 0.22s cubic-bezier(0.2,0.9,0.35,1), opacity 0.22s ease; } .auth-gate-root.is-open .auth-gate-card { transform: translateY(0) scale(1); opacity: 1; } .auth-gate-x { position: absolute; top: 0.85rem; right: 0.85rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; color: var(--ink-muted); background: transparent; cursor: pointer; } .auth-gate-x:hover { color: var(--ink-primary); background: var(--bg-panel-elevated); } .auth-gate-icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 0.9rem; display: flex; align-items: center; justify-content: center; border-radius: 0.9rem; color: #fff; background: linear-gradient(135deg, var(--cobalt, #3B6EF5), var(--cyan, #4FE3FF)); box-shadow: 0 0 24px rgba(59,110,245,0.4); } .auth-gate-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--ink-primary); } .auth-gate-msg { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink-muted); } .auth-gate-primary { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.45rem; height: 2.75rem; margin-top: 1.25rem; border-radius: 0.8rem; background: var(--cobalt, #3B6EF5); color: #fff; font-size: 0.9rem; font-weight: 600; text-decoration: none; box-shadow: 0 0 18px rgba(59,110,245,0.35); transition: background 0.15s ease; } .auth-gate-primary:hover { background: var(--cobalt-bright, #5C87FF); } .auth-gate-secondary { display: block; width: 100%; margin-top: 0.6rem; height: 2.4rem; border-radius: 0.8rem; background: transparent; border: none; color: var(--ink-muted); font-size: 0.84rem; font-weight: 500; cursor: pointer; } .auth-gate-secondary:hover { color: var(--ink-primary); background: var(--bg-panel); } /* ═══════════════════════════════════════════════════════════════════════ Homepage dashboard (index.html) — 3-column live gambling layout. ═══════════════════════════════════════════════════════════════════════ */ /* Sidebar nav rows */ .dash-nav { display: flex; align-items: center; gap: 0.7rem; border-radius: 0.75rem; padding: 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .dash-nav svg { width: 18px; height: 18px; flex-shrink: 0; } .dash-nav:hover { color: var(--ink-primary); background: var(--bg-panel-elevated); } .dash-nav.is-active { color: var(--ink-primary); background: var(--bg-panel-elevated); box-shadow: inset 0 0 0 1px var(--border-glass-strong); } /* Live-stat tiles */ .dash-stat { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid var(--border-glass); background: linear-gradient(160deg, var(--bg-panel), rgba(11,18,32,0.6)); padding: 0.85rem 0.95rem; } .dash-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; min-height: 2rem; } .dash-stat-ic { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: rgba(148,178,255,0.08); } .dash-stat-ic svg { width: 1.05rem; height: 1.05rem; } .dash-stat-live { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--success); } .dash-stat-sub { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); } .dash-dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--success); animation: dashPulse 1.8s infinite; } @keyframes dashPulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,143,0.5); } 70% { box-shadow: 0 0 0 6px rgba(61,220,143,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,143,0); } } .dash-stat-val { font-family: "Space Grotesk", sans-serif; font-size: 1.45rem; font-weight: 600; line-height: 1.1; color: var(--ink-primary); display: flex; align-items: center; gap: 0.3rem; min-height: 1.6rem; } .dash-stat-label { margin-top: 0.2rem; font-size: 0.72rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Game cards */ .dash-game { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 1.15rem; border: 1px solid var(--border-glass); background: linear-gradient(165deg, var(--bg-panel-elevated), rgba(11,18,32,0.85)); padding: 1.15rem; min-height: 12rem; text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .dash-game:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,0.4); } .dash-game-glow { position: absolute; top: -40%; right: -30%; width: 70%; height: 80%; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%); opacity: 0.35; pointer-events: none; transition: opacity 0.18s ease; } .dash-game:hover .dash-game-glow { opacity: 0.6; } .dash-game-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent); } .dash-game-ic svg { width: 1.5rem; height: 1.5rem; } .dash-game-name { margin-top: 0.85rem; font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--ink-primary); } .dash-game-tag { margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.4; color: var(--ink-muted); } .dash-game-foot { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; } .dash-game-stat { display: inline-flex; align-items: center; gap: 0.3rem; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; font-weight: 500; color: var(--cyan); } .dash-game-play { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-primary); } .dash-game-play svg { width: 0.9rem; height: 0.9rem; transition: transform 0.18s ease; } .dash-game:hover .dash-game-play svg { transform: translateX(3px); } /* Right-rail tabs */ .dash-tab { flex: 1; border-radius: 0.6rem; padding: 0.45rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .dash-tab:hover { color: var(--ink-primary); } .dash-tab.is-active { color: var(--ink-primary); background: var(--bg-panel-elevated); } /* Recent wins rows */ .dash-win { display: flex; align-items: center; gap: 0.6rem; border-radius: 0.75rem; padding: 0.5rem 0.6rem; transition: background 0.15s ease; } .dash-win:hover { background: var(--bg-panel-elevated); } .dash-win-av { width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; border: 1px solid var(--border-glass); } .dash-win-av-fb { display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 0.6rem; font-weight: 600; color: var(--ink-primary); background: linear-gradient(135deg, rgba(59,110,245,0.3), rgba(79,227,255,0.2)); } .dash-win-body { min-width: 0; flex: 1; } .dash-win-line { font-size: 0.78rem; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-win-line b { font-weight: 600; } .dash-win-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.1rem; } .dash-win-val { display: inline-flex; align-items: center; gap: 0.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--gold); } .dash-win-time { font-size: 0.66rem; color: var(--ink-faint); } .dash-empty { padding: 2rem 1rem; text-align: center; font-size: 0.82rem; color: var(--ink-muted); } /* Giveaway rail card */ .dash-give { border-radius: 1rem; border: 1px solid rgba(61,220,143,0.3); background: rgba(61,220,143,0.06); padding: 0.85rem; } .dash-give-title { display: flex; align-items: center; gap: 0.4rem; font-family: "Space Grotesk", sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--ink-primary); } .dash-give-sub { margin-top: 0.15rem; font-size: 0.72rem; color: var(--ink-muted); } .dash-give-row { margin-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .dash-give-imgs { display: flex; gap: 0.25rem; } .dash-give-img { width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; border: 1px solid var(--border-glass); background: var(--bg-panel-elevated); object-fit: contain; } .dash-give-cta { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 0.6rem; background: var(--success); color: #04120b; padding: 0.35rem 0.7rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; } .dash-give-count { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: var(--success); } /* Sidebar account block */ .dash-acct-card { border-radius: 1rem; border: 1px solid var(--border-glass); background: var(--bg-panel); padding: 0.75rem; } .dash-acct-bal { display: flex; align-items: center; gap: 0.35rem; font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--ink-primary); } .dash-acct-bal img { width: 1.1rem; height: 1.1rem; } .dash-acct-bal-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); } .dash-acct-deposit { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.6rem; height: 2.3rem; border-radius: 0.7rem; background: var(--cobalt); color: #fff; font-size: 0.82rem; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 0 16px rgba(59,110,245,0.35); transition: background 0.15s ease; } .dash-acct-deposit:hover { background: var(--cobalt-bright); } .dash-acct-user { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border-glass); } .dash-acct-av { width: 1.75rem; height: 1.75rem; border-radius: 999px; object-fit: cover; border: 1px solid var(--border-glass); } .dash-acct-av-fb { display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 0.6rem; font-weight: 600; color: var(--ink-primary); background: linear-gradient(135deg, rgba(59,110,245,0.3), rgba(79,227,255,0.2)); } .dash-acct-name { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 500; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-acct-signout { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; } .dash-acct-signout:hover { color: var(--danger); background: var(--bg-panel-elevated); } .dash-acct-signin { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.35rem; height: 2.5rem; border-radius: 0.7rem; background: var(--cobalt); color: #fff; font-size: 0.85rem; font-weight: 600; text-decoration: none; box-shadow: 0 0 16px rgba(59,110,245,0.35); } .dash-acct-signin:hover { background: var(--cobalt-bright); } .dash-acct-guest { margin-top: 0.5rem; text-align: center; font-size: 0.68rem; color: var(--ink-faint); } /* Mobile account chip (top bar) */ .dash-chip { display: inline-flex; align-items: center; gap: 0.3rem; height: 2.1rem; padding: 0 0.7rem; border-radius: 0.7rem; border: 1px solid var(--border-glass); background: var(--bg-panel); font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 600; color: var(--ink-primary); cursor: pointer; } .dash-chip img { width: 1rem; height: 1rem; } /* ═══════════════════════════════════════════════════════════════════════ Biggest Wins — reusable, data-driven section (home.js renderBiggestWins). Premium glass cards: one per game, filterable, with pet support. ═══════════════════════════════════════════════════════════════════════ */ .bw-filters { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.25rem; border-radius: 0.85rem; border: 1px solid var(--border-glass); background: var(--bg-panel); } .bw-filter { border-radius: 0.6rem; padding: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .bw-filter:hover { color: var(--ink-primary); } .bw-filter.is-active { color: var(--ink-primary); background: var(--bg-panel-elevated); box-shadow: inset 0 0 0 1px var(--border-glass-strong); } .bw-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); transition: opacity 0.13s ease; } @media (min-width: 640px) { .bw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bw-fade { opacity: 0; } .bw-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.85rem; border-radius: 1.15rem; border: 1px solid var(--border-glass); background: linear-gradient(165deg, color-mix(in srgb, var(--bg-panel-elevated) 92%, transparent), rgba(11,18,32,0.72)); backdrop-filter: blur(6px); padding: 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.28); animation: bwIn 0.35s ease both; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .bw-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 20px 46px rgba(0,0,0,0.42); } .bw-glow { position: absolute; top: -45%; right: -25%; width: 65%; height: 85%; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 65%); opacity: 0.3; pointer-events: none; transition: opacity 0.18s ease; } .bw-card:hover .bw-glow { opacity: 0.55; } @keyframes bwIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .bw-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .bw-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.2rem 0.65rem; font-family: "Space Grotesk", sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); } .bw-badge-sub { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); } .bw-player { position: relative; display: flex; align-items: center; gap: 0.65rem; } .bw-av { width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border-glass)); } .bw-av-fb { display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--ink-primary); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent2) 22%, transparent)); } .bw-player-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; } .bw-name { font-family: "Space Grotesk", sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--ink-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bw-name:hover { color: var(--cobalt-bright); } .bw-vs { font-size: 0.72rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bw-time { flex-shrink: 0; font-size: 0.66rem; color: var(--ink-faint); } .bw-stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .bw-stat { border-radius: 0.7rem; border: 1px solid var(--border-glass); background: rgba(11,18,32,0.4); padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; } .bw-stat-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); } .bw-stat-val { display: inline-flex; align-items: center; gap: 0.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; font-weight: 600; color: var(--ink-primary); } .bw-stat-val img { width: 0.9rem; height: 0.9rem; } .bw-pos { color: var(--success); } .bw-neg { color: var(--danger); } .bw-won { color: var(--gold); } .bw-pets { position: relative; display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--border-glass); padding-top: 0.75rem; } .bw-pet-col { display: flex; flex-direction: column; gap: 0.35rem; } .bw-pet-col-title { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); } .bw-pet-list { display: flex; flex-wrap: wrap; gap: 0.3rem; } .bw-pet { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; border-radius: 0.55rem; border: 1px solid var(--border-glass); background: var(--bg-panel-elevated); padding: 0.2rem 0.45rem 0.2rem 0.25rem; } .bw-pet-img { width: 1.15rem; height: 1.15rem; border-radius: 0.35rem; object-fit: contain; flex-shrink: 0; } .bw-pet-img-fb { background: linear-gradient(135deg, rgba(148,178,255,0.25), rgba(79,227,255,0.15)); } .bw-pet-name { font-size: 0.7rem; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.5rem; } .bw-pet-qty { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; color: var(--ink-muted); } .bw-pet-more { display: inline-flex; align-items: center; padding: 0.2rem 0.45rem; border-radius: 0.55rem; font-size: 0.66rem; font-weight: 600; color: var(--ink-muted); background: var(--bg-panel-elevated); border: 1px solid var(--border-glass); } .bw-est { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.1rem; padding-top: 0.5rem; border-top: 1px dashed var(--border-glass); } .bw-est-label { font-size: 0.66rem; font-weight: 600; color: var(--ink-muted); } .bw-est-val { display: inline-flex; align-items: center; gap: 0.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.82rem; font-weight: 700; color: var(--gold); } .bw-est-val img { width: 0.95rem; height: 0.95rem; } .bw-card-empty { justify-content: flex-start; } .bw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; flex: 1; min-height: 8rem; text-align: center; color: var(--ink-faint); } .bw-empty svg { width: 2rem; height: 2rem; opacity: 0.5; } .bw-empty p { font-size: 0.8rem; color: var(--ink-muted); } @media (prefers-reduced-motion: reduce) { .dash-dot { animation: none; } .dash-game { transition: none; } .dash-game:hover { transform: none; } .bw-grid { transition: none; } .bw-card { animation: none; transition: none; } .bw-card:hover { transform: none; } }