/* ============================================================ GamePix — Casino Style Global Stylesheet Dark theme, mobile-first, smooth animations Colors come from PHP whitelabelCssVars() ============================================================ */ /* ── CSS Custom Properties ─────────────────────────────────── */ /* * All CSS custom properties (colors, layout) are set by whitelabelCssVars() in PHP. * See GamePix/includes/functions.php — that function is the single source of truth. * No :root block here so the whitelabelCssVars() output (placed anywhere in ) * is never overridden by this stylesheet. */ /* ── Keyframes ─────────────────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .4); } 50% { box-shadow: 0 0 0 12px rgba(var(--primary-rgb), 0); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes winPop { 0% { opacity: 0; transform: scale(.8) translateY(10px); } 60% { transform: scale(1.04) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes goldShine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes popIn { 0% { opacity: 0; transform: scale(.7); } 80% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -60px) scale(1.1); } 66% { transform: translate(-30px, 40px) scale(.95); } } /* ── Reset & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: var(--primary); text-decoration: none; transition: opacity .2s; } a:hover { opacity: .8; } img, video { max-width: 100%; display: block; } input, textarea, select, button { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; } /* ── Typography ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-weight: 900; line-height: 1.15; } .gradient-text { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gold-text { background: linear-gradient(135deg, #ffd740 0%, #ff9800 50%, #ffd740 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShine 3s linear infinite; } .text-muted { color: var(--muted); } .text-primary { color: var(--primary); } .text-accent { color: var(--accent); } .text-danger { color: var(--red); } .text-success { color: var(--accent); } .text-gold { color: var(--gold); } /* ── Layout Utilities ─────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 780px; margin: 0 auto; padding: 0 20px; } .container-xs { max-width: 480px; margin: 0 auto; padding: 0 20px; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .hide-mobile { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* ── Orb Background ───────────────────────────────────────── */ .orb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .18; animation: orbFloat 18s ease-in-out infinite; } .orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--primary-rgb), .9), transparent 70%); top: -200px; left: -200px; animation-duration: 20s; } .orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--secondary-rgb), .8), transparent 70%); bottom: -150px; right: -100px; animation-duration: 24s; animation-delay: -8s; } .orb-3 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(var(--accent-rgb), .6), transparent 70%); top: 50%; left: 50%; animation-duration: 16s; animation-delay: -4s; } /* ── Navbar ───────────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(10,13,24,.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(var(--primary-rgb),.1); gap: 16px; animation: fadeInDown .4s ease both; } .navbar-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .navbar-logo-text { font-size: 22px; font-weight: 900; color: var(--primary); letter-spacing: -0.5px; } .navbar-center { display: flex; align-items: center; gap: 4px; } .nav-link { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 10px; color: rgba(255,255,255,.65); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; } .nav-link:hover, .nav-link.active { background: rgba(var(--primary-rgb), .1); color: var(--primary); opacity: 1; } .navbar-nav { display: flex; align-items: center; gap: 8px; } .balance-chip { display: flex; align-items: center; gap: 8px; background: rgba(var(--primary-rgb), .1); border: 1.5px solid rgba(var(--primary-rgb), .25); border-radius: 24px; padding: 6px 14px; font-size: 13px; font-weight: 800; color: var(--primary); white-space: nowrap; } .avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--secondary)); } /* Navbar dropdown */ .nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--card2); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 8px; min-width: 200px; z-index: 1000; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: fadeInUp .2s ease both; } .nav-dropdown.open { display: block !important; } .nav-dropdown-header { padding: 10px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 6px; } .nav-dropdown-header .username { font-weight: 800; font-size: 14px; } .nav-dropdown-header .balance-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .nav-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; } .nav-dropdown-item:hover { background: rgba(255,255,255,.06); opacity: 1; } .nav-dropdown-item.danger { color: var(--red); } .nav-dropdown-item.danger:hover { background: rgba(255,71,87,.08); } .nav-dropdown-sep { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 6px 0; } /* ── Bottom Nav ───────────────────────────────────────────── */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); z-index: 400; background: rgba(10,13,24,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid rgba(var(--primary-rgb),.12); align-items: stretch; } .bottom-nav-items { display: flex; width: 100%; align-items: stretch; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 700; text-decoration: none; transition: color .2s; padding: 6px 0 8px; position: relative; } .bottom-nav-item.active { color: var(--primary); } .bottom-nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); } .bottom-nav-item svg { width: 22px; height: 22px; } /* Bottom nav is always visible — padding applied via .has-bottom-nav */ .has-bottom-nav { padding-bottom: var(--bottom-nav-h) !important; } /* ── Sidebar ──────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; padding-top: var(--nav-h); } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: rgba(8,7,26,.95); border-right: 1px solid rgba(255,255,255,.06); padding: 24px 12px; position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .sidebar-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; margin-top: 12px; } .sidebar-label:first-child { margin-top: 0; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: rgba(255,255,255,.6); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; margin-bottom: 2px; } .sidebar-link:hover { background: rgba(var(--primary-rgb), .1); color: var(--primary); opacity: 1; } .sidebar-link.active { background: rgba(var(--primary-rgb), .15); color: var(--primary); border-left: 3px solid var(--primary); } .sidebar-link span { font-size: 13px; } .main-content { flex: 1; min-width: 0; padding: 28px 24px; } @media (max-width: 900px) { .sidebar { display: none !important; } .main-content { padding: 20px 16px; } } /* ── Casino Lobby ─────────────────────────────────────────── */ .casino-lobby { max-width: 1200px; margin: 0 auto; padding: calc(var(--nav-h) + 20px) 20px 40px; } /* ── Casino Hero ──────────────────────────────────────────── */ .casino-hero { background: linear-gradient(135deg, rgba(var(--primary-rgb),.35) 0%, rgba(var(--secondary-rgb),.2) 50%, rgba(var(--accent-rgb),.1) 100%); border: 1px solid rgba(var(--primary-rgb),.25); border-radius: 24px; padding: 36px 40px; position: relative; overflow: hidden; margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 180px; } .casino-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .casino-hero-left { flex: 1; min-width: 0; position: relative; z-index: 1; } .casino-hero-title { font-size: 32px; font-weight: 900; line-height: 1.1; margin-bottom: 10px; } .casino-hero-sub { color: rgba(255,255,255,.65); font-size: 15px; margin-bottom: 24px; } .casino-hero-right { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; position: relative; z-index: 1; } .casino-hero-mini-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; backdrop-filter: blur(10px); min-width: 160px; } .casino-hero-mini-card img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; } @media (max-width: 768px) { .casino-hero { flex-direction: column; padding: 24px 20px; min-height: unset; text-align: center; } .casino-hero-title { font-size: 22px; } .casino-hero-right { flex-direction: row; justify-content: center; width: 100%; } .casino-hero-mini-card { min-width: 0; flex: 1; } } /* ── Category Row ─────────────────────────────────────────── */ .cat-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 24px; } .cat-row::-webkit-scrollbar { display: none; } .cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 24px; background: var(--card2); border: 1.5px solid rgba(255,255,255,.1); color: rgba(255,255,255,.65); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .2s; flex-shrink: 0; } .cat-chip:hover { border-color: rgba(var(--primary-rgb),.4); color: var(--primary); background: rgba(var(--primary-rgb),.08); } .cat-chip.active { background: var(--primary); border-color: transparent; color: #000; box-shadow: 0 4px 20px rgba(var(--primary-rgb),.35); } /* ── Section Header ───────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .section-header h2 { font-size: 18px; font-weight: 900; } .section-header .see-all { font-size: 13px; color: var(--primary); font-weight: 700; white-space: nowrap; } /* ── Casino Section ───────────────────────────────────────── */ .casino-section { margin-bottom: 32px; } /* ── Casino Game Card ─────────────────────────────────────── */ .casino-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } @media (max-width: 768px) { .casino-game-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .casino-game-card { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; cursor: pointer; text-decoration: none; display: block; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; animation: fadeInUp .4s ease both; background: var(--card2); } .casino-game-card:nth-child(1) { animation-delay: .05s; } .casino-game-card:nth-child(2) { animation-delay: .1s; } .casino-game-card:nth-child(3) { animation-delay: .15s; } .casino-game-card:nth-child(4) { animation-delay: .2s; } .casino-game-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--primary-rgb),.3); opacity: 1; } .casino-game-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; } .casino-game-card:hover .casino-game-card-bg { transform: scale(1.07); } .casino-game-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, transparent 100%); } .casino-game-card-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,.5)); transition: transform .25s; } @media (max-width: 768px) { .casino-game-card-logo { width: 52px; height: 52px; } } .casino-game-card:hover .casino-game-card-logo { transform: translate(-50%, -60%) scale(1.1); } .casino-game-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px; } .casino-game-card-title { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.2; } @media (max-width: 768px) { .casino-game-card-title { font-size: 12px; } } .casino-game-card-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; } @media (max-width: 768px) { .casino-game-card-sub { display: none; } } .casino-game-card-badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--primary); color: #fff; } .casino-game-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .2s, transform .2s; background: var(--accent); color: #000; font-size: 11px; font-weight: 900; letter-spacing: .08em; padding: 9px 22px; border-radius: 12px; pointer-events: none; white-space: nowrap; } .casino-game-card:hover .casino-game-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ── Win Ticker ───────────────────────────────────────────── */ .win-ticker { background: rgba(var(--accent-rgb), .05); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: 12px; padding: 10px 0; overflow: hidden; margin-bottom: 24px; position: relative; } .win-ticker::before, .win-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .win-ticker::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .win-ticker::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .ticker-wrap { overflow: hidden; white-space: nowrap; } .ticker-track { display: inline-block; animation: ticker 30s linear infinite; white-space: nowrap; } .ticker-track:hover { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 28px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); } .ticker-item .ticker-amount { color: var(--accent); font-weight: 900; } .ticker-item .ticker-sep { color: rgba(255,255,255,.2); } /* ── Wins Feed ────────────────────────────────────────────── */ .wins-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } @media (max-width: 600px) { .wins-feed { grid-template-columns: 1fr 1fr; gap: 10px; } } .wins-feed-item { display: flex; align-items: center; gap: 12px; background: var(--card2); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px; animation: winPop .4s cubic-bezier(.22,1,.36,1) both; } .wins-feed-item:nth-child(1) { animation-delay: .0s; } .wins-feed-item:nth-child(2) { animation-delay: .06s; } .wins-feed-item:nth-child(3) { animation-delay: .12s; } .wins-feed-item:nth-child(4) { animation-delay: .18s; } .wins-feed-item:nth-child(5) { animation-delay: .24s; } .wins-feed-item:nth-child(6) { animation-delay: .30s; } .wins-feed-avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #fff; flex-shrink: 0; } .wins-feed-info { flex: 1; min-width: 0; } .wins-feed-user { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); } .wins-feed-game { font-size: 11px; color: var(--muted); margin-top: 1px; } .wins-feed-amount { font-size: 16px; font-weight: 900; color: var(--accent); } .wins-feed-time { font-size: 10px; color: var(--muted); } /* ── Stat Grid ────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; } .stat-card:hover { transform: translateY(-2px); border-color: rgba(var(--primary-rgb),.3); } .stat-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(var(--primary-rgb), .06); } .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; } .stat-value { font-size: 24px; font-weight: 900; line-height: 1.1; } .stat-sub { font-size: 12px; color: var(--muted); margin-top: 6px; } /* ── Cards ────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 24px; transition: border-color .2s; } .card:hover { border-color: rgba(var(--primary-rgb),.2); } .card-sm { padding: 16px; border-radius: 14px; } .card-lg { padding: 32px; border-radius: 22px; } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; border: none; border-radius: 12px; cursor: pointer; transition: transform .15s cubic-bezier(.22,1,.36,1), opacity .15s, box-shadow .15s; white-space: nowrap; text-decoration: none; padding: 11px 22px; font-size: 14px; line-height: 1; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:focus { outline: none; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #9fd620 100%); color: #000; box-shadow: 0 4px 20px rgba(var(--primary-rgb),.35); } .btn-primary:hover { box-shadow: 0 8px 30px rgba(var(--primary-rgb),.5); opacity: 1; } .btn-accent { background: var(--primary); color: #000; box-shadow: 0 4px 20px rgba(var(--primary-rgb),.3); font-weight: 900; } .btn-accent:hover { box-shadow: 0 8px 30px rgba(var(--primary-rgb),.45); opacity: 1; background: #d8ff4a; } .btn-ghost { background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); } .btn-ghost:hover { background: rgba(255,255,255,.1); opacity: 1; } .btn-danger { background: linear-gradient(135deg, var(--red), #c0392b); color: #fff; } .btn-success { background: linear-gradient(135deg, var(--accent), #00bfa5); color: #000; font-weight: 900; } .btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 9px; } .btn-lg { padding: 14px 30px; font-size: 16px; border-radius: 14px; } .btn-xl { padding: 18px 38px; font-size: 18px; border-radius: 16px; } .btn-full { width: 100%; } /* ── Forms ────────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: rgba(255,255,255,.8); } .form-control { width: 100%; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px; color: var(--text); font-size: 14px; transition: border-color .2s, background .2s; appearance: none; } .form-control:focus { outline: none; border-color: rgba(var(--primary-rgb),.6); background: rgba(var(--primary-rgb),.05); } .form-control::placeholder { color: rgba(255,255,255,.3); } .form-control option { background: var(--card2); } .form-hint { font-size: 12px; color: var(--muted); margin-top: 6px; } .form-error { font-size: 12px; color: var(--red); margin-top: 6px; } /* ── Badges ───────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: .04em; } .badge-success { background: rgba(var(--accent-rgb),.15); color: var(--accent); } .badge-danger { background: rgba(255,71,87,.15); color: var(--red); } .badge-warning { background: rgba(255,193,7,.15); color: #ffc107; } .badge-info { background: rgba(var(--secondary-rgb),.15); color: var(--secondary); } .badge-primary { background: rgba(var(--primary-rgb),.15); color: var(--primary); } .badge-muted { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); } .badge-gold { background: rgba(255,215,64,.15); color: var(--gold); } /* ── Live Dot ─────────────────────────────────────────────── */ .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: livePulse 1.5s ease infinite; } .live-dot.green { background: var(--accent); } /* ── Alerts ───────────────────────────────────────────────── */ .alert { padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid transparent; } .alert-success { background: rgba(var(--accent-rgb),.12); color: var(--accent); border-color: rgba(var(--accent-rgb),.25); } .alert-danger { background: rgba(255,71,87,.12); color: var(--red); border-color: rgba(255,71,87,.25); } .alert-warning { background: rgba(255,193,7,.12); color: #ffc107; border-color: rgba(255,193,7,.25); } .alert-info { background: rgba(var(--secondary-rgb),.12); color: var(--secondary); border-color: rgba(var(--secondary-rgb),.25); } /* ── Table ────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead tr { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); } th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; color: rgba(255,255,255,.8); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: rgba(255,255,255,.025); } /* ── Page Header ──────────────────────────────────────────── */ .page-header { margin-bottom: 24px; } .page-title { font-size: 24px; font-weight: 900; margin-bottom: 4px; } .page-subtitle { font-size: 14px; color: var(--muted); } /* ── Progress Bar ─────────────────────────────────────────── */ .progress { background: rgba(255,255,255,.08); border-radius: 100px; height: 6px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 100px; transition: width .6s ease; } /* ── Auth ─────────────────────────────────────────────────── */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .auth-box { width: 100%; max-width: 420px; background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 40px 36px; animation: fadeInUp .5s ease both; } .auth-logo { display: flex; justify-content: center; margin-bottom: 8px; } .auth-logo-text { font-size: 28px; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-title { font-size: 22px; font-weight: 900; text-align: center; margin-bottom: 6px; } .auth-sub { font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 32px; } /* ── PIX Box ──────────────────────────────────────────────── */ .pix-qr-box { display: flex; flex-direction: column; align-items: center; gap: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 28px; } .pix-copy-field { display: flex; gap: 8px; width: 100%; } .pix-copy-btn { background: rgba(var(--primary-rgb),.15); border: 1px solid rgba(var(--primary-rgb),.3); border-radius: 10px; color: var(--primary); font-size: 13px; font-weight: 800; padding: 10px 18px; cursor: pointer; white-space: nowrap; transition: background .2s; } .pix-copy-btn:hover { background: rgba(var(--primary-rgb),.25); } /* ── Old Game Card (backward compat) ──────────────────────── */ .game-card { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; display: block; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; background: var(--card2); animation: fadeInUp .4s ease both; } .game-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,.5); opacity: 1; } .game-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%); } .game-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; } .game-card-title { font-size: 16px; font-weight: 900; color: #fff; } .game-card-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; } .game-card-badge { position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 8px; letter-spacing: .05em; } /* ── Spinner ──────────────────────────────────────────────── */ .spinner { width: 24px; height: 24px; border: 3px solid rgba(var(--primary-rgb),.2); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } /* ── Footer ───────────────────────────────────────────────── */ .footer { text-align: center; padding: 32px 20px; color: var(--muted); font-size: 13px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px; } /* ── Nav Balance (legacy) ─────────────────────────────────── */ .nav-balance { display: flex; align-items: center; gap: 8px; background: rgba(var(--accent-rgb), .1); border: 1.5px solid rgba(var(--accent-rgb), .25); border-radius: 24px; padding: 6px 14px; font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); } /* ═══════════════════════════════════════════════════════════ 7K Casino Style — New Lobby Components ═══════════════════════════════════════════════════════════ */ /* ── Lobby Section ────────────────────────────────────────── */ .lobby-section { margin-bottom: 32px; } /* ── Pagando Muito Cards ──────────────────────────────────── */ @keyframes shimmer-lime { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes glow-pulse { 0%,100% { box-shadow: 0 0 20px rgba(var(--primary-rgb),.15), 0 4px 40px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 40px rgba(var(--primary-rgb),.30), 0 4px 60px rgba(0,0,0,.5); } } .pagando-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } @media (max-width: 640px) { .pagando-grid { grid-template-columns: 1fr; gap: 14px; } } .pagando-card { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; text-decoration: none; display: block; background: var(--card2); border: 1px solid rgba(var(--primary-rgb),.15); transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; animation: fadeInUp .4s ease both; animation-fill-mode: glow-pulse 3s ease-in-out infinite; } .pagando-card:nth-child(1) { animation-delay: .05s; } .pagando-card:nth-child(2) { animation-delay: .12s; } .pagando-card:hover { transform: translateY(-5px); box-shadow: 0 0 40px rgba(var(--primary-rgb),.2), 0 16px 50px rgba(0,0,0,.6); opacity: 1; border-color: rgba(var(--primary-rgb),.35); } .pagando-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; opacity: .5; } .pagando-card:hover .pagando-card-bg { transform: scale(1.04); } .pagando-card-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10,13,24,.2) 0%, rgba(10,13,24,.5) 40%, rgba(10,13,24,.92) 100% ); } .pagando-card-badge { position: absolute; top: 14px; left: 14px; background: var(--primary); color: #000; font-size: 11px; font-weight: 900; padding: 5px 12px; border-radius: 20px; letter-spacing: .04em; z-index: 2; } .pagando-card-badge.hot { background: linear-gradient(135deg,#ff6b35,#ff3d00); color: #fff; } .pagando-card-badge.new { background: var(--primary); color: #000; } .pagando-card-badge.top { background: var(--gold); color: #000; } .pagando-card-img { position: relative; z-index: 1; display: block; width: 100px; height: 100px; object-fit: contain; margin: 24px auto 0; filter: drop-shadow(0 8px 30px rgba(0,0,0,.6)); transition: transform .3s ease; } .pagando-card:hover .pagando-card-img { transform: scale(1.08) translateY(-4px); } .pagando-card-body { position: relative; z-index: 2; padding: 16px 20px 20px; } .pagando-card-name { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 6px; line-height: 1.2; } .pagando-card-stats { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .pagando-card-partidas { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 600; } .pagando-card-won { font-size: 13px; font-weight: 900; color: var(--primary); background: rgba(var(--primary-rgb),.1); border: 1px solid rgba(var(--primary-rgb),.2); padding: 3px 10px; border-radius: 20px; } .pagando-play-btn { display: block; width: 100%; padding: 14px; background: var(--primary); color: #000; font-size: 15px; font-weight: 900; border: none; border-radius: 14px; cursor: pointer; letter-spacing: .04em; transition: all .2s; text-align: center; text-decoration: none; } .pagando-play-btn:hover { background: #d8ff4a; transform: none; opacity: 1; } /* ── Top Ganhos Section ───────────────────────────────────── */ .time-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 4px; } .time-tab { padding: 6px 14px; border-radius: 9px; border: none; background: transparent; color: rgba(255,255,255,.45); font-size: 12px; font-weight: 800; cursor: pointer; transition: all .18s; font-family: var(--font); } .time-tab.active { background: var(--primary); color: #000; } .top-wins-list { display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; overflow: hidden; } .top-win-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; } .top-win-row:last-child { border-bottom: none; } .top-win-row:hover { background: rgba(255,255,255,.03); } .top-win-rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex-shrink: 0; background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); } .top-win-rank.gold { background: rgba(255,215,64,.15); color: var(--gold); } .top-win-rank.silver { background: rgba(192,192,192,.15); color: #c0c0c0; } .top-win-rank.bronze { background: rgba(205,127,50,.15); color: #cd7f32; } .top-win-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: #fff; flex-shrink: 0; } .top-win-info { flex: 1; min-width: 0; } .top-win-user { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.85); } .top-win-game { font-size: 11px; color: var(--muted); margin-top: 1px; } .top-win-amount { font-size: 17px; font-weight: 900; color: var(--primary); white-space: nowrap; } .top-win-time { font-size: 10px; color: var(--muted); text-align: right; white-space: nowrap; } /* ── Lobby Header (compact top bar) ──────────────────────── */ .lobby-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 20px; gap: 12px; } .lobby-topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .lobby-topbar-logo { font-size: 20px; font-weight: 900; color: var(--primary); letter-spacing: -0.5px; } .lobby-topbar-actions { display: flex; align-items: center; gap: 10px; } .lobby-balance-pill { display: flex; align-items: center; gap: 6px; background: rgba(var(--primary-rgb),.1); border: 1.5px solid rgba(var(--primary-rgb),.25); border-radius: 24px; padding: 7px 14px; font-size: 14px; font-weight: 900; color: var(--primary); white-space: nowrap; } /* ── Section Header overrides for new style ──────────────── */ .section-header h2 { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; } /* ── Compact stat row ─────────────────────────────────────── */ .mini-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; } @media (max-width: 600px) { .mini-stats-row { grid-template-columns: repeat(2, 1fr); } } .mini-stat-card { background: var(--card); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 16px; text-align: center; transition: border-color .2s, transform .2s; } .mini-stat-card:hover { border-color: rgba(var(--primary-rgb),.2); transform: translateY(-2px); } .mini-stat-icon { font-size: 22px; margin-bottom: 8px; } .mini-stat-value { font-size: 18px; font-weight: 900; line-height: 1.1; color: #fff; } .mini-stat-label { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; } /* ── Responsive tweak: casino lobby padding ───────────────── */ @media (min-width: 769px) { .casino-lobby { padding-top: calc(var(--nav-h) + 24px); } } @media (max-width: 768px) { .casino-lobby { padding-top: calc(var(--nav-h) + 16px); padding-left: 14px; padding-right: 14px; } .navbar-center { display: none; } .pagando-card-img { width: 80px; height: 80px; } .pagando-card-name { font-size: 17px; } } /* ── PIX type pill (radio pill, user-facing) ─────────────────────────── */ .pix-pill { display: block; padding: 8px 6px; border-radius: 7px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); transition: background .15s, color .15s; cursor: pointer; } input[type="radio"]:checked + .pix-pill { background: var(--primary); color: #000; }