@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@600;700;800&family=Inter:wght@400;500;600&display=swap'); :root { --void: #06040F; --deep: #0D0921; --panel: #16102E; --panel-2: #1C1440; --panel-line: rgba(168,133,255,0.16); --text-hi: #F5F3FF; --text-mid: #B0A6D9; --text-low: #675E92; --violet: #9B6BFF; --violet-deep: #6C3CE9; --cyan: #4FE3D0; --gold: #F2B84B; --danger: #F2586B; --font-display: 'Space Grotesk', sans-serif; --font-num: 'Orbitron', sans-serif; --font-body: 'Inter', sans-serif; } /* ---------- Holiday theme presets — admin-selected in site_settings.active_theme, applied as a class on by app.js. Same variable names as :root, so every existing rule re-themes automatically. ---------- */ body.theme-halloween { --void: #0a0605; --deep: #1a0f08; --panel: #241408; --panel-2: #2e1a0a; --panel-line: rgba(255,140,20,0.22); --text-hi: #FFE9D6; --text-mid: #C99A7A; --text-low: #8A6550; --violet: #FF7518; --violet-deep: #B8460E; --cyan: #7CFC6E; --gold: #FFB347; --danger: #E63946; } body.theme-christmas { --void: #050b08; --deep: #0a1810; --panel: #0f2318; --panel-2: #142e1f; --panel-line: rgba(46,204,113,0.22); --text-hi: #F5FFF7; --text-mid: #A8C9B4; --text-low: #5E8A6D; --violet: #D42A2A; --violet-deep: #9E1B1B; --cyan: #2ECC71; --gold: #F2C230; --danger: #E63946; } body.theme-valentines { --void: #0d0509; --deep: #1a0a10; --panel: #241019; --panel-2: #2e1521; --panel-line: rgba(255,77,141,0.24); --text-hi: #FFF0F5; --text-mid: #D9A8BC; --text-low: #8A5D6E; --violet: #FF4D8D; --violet-deep: #C2185B; --cyan: #FFB3C6; --gold: #FFD1DC; --danger: #E63950; } body.theme-newyear { --void: #030305; --deep: #08080c; --panel: #0f0f16; --panel-2: #16161f; --panel-line: rgba(242,194,48,0.22); --text-hi: #FFF8E7; --text-mid: #C9C2A8; --text-low: #7A7460; --violet: #F2C230; --violet-deep: #C79A1E; --cyan: #C9CDD6; --gold: #FFD700; --danger: #E63946; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--void); color: var(--text-hi); font-family: var(--font-body); overflow-x: hidden; position: relative; min-height: 100vh; } /* ---------- Ambience ---------- */ .stars-layer { position: fixed; inset: -10%; z-index: 0; pointer-events: none; transition: transform 0.2s ease-out; } #stars-1 { background-image: radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,0.6), transparent), radial-gradient(1.5px 1.5px at 30% 45%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.5), transparent); background-size: 100% 100%; } #stars-2 { background-image: radial-gradient(2px 2px at 25% 35%, rgba(155,107,255,0.8), transparent), radial-gradient(2px 2px at 75% 75%, rgba(79,227,208,0.6), transparent), radial-gradient(1.5px 1.5px at 90% 25%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 15% 70%, rgba(255,255,255,0.4), transparent); background-size: 100% 100%; } .nebula { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 1000px 600px at 20% -10%, rgba(155,107,255,0.22), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 20%, rgba(79,227,208,0.10), transparent 60%), radial-gradient(ellipse 900px 700px at 40% 110%, rgba(108,60,233,0.18), transparent 60%); } .wrap { position: relative; z-index: 1; } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ---------- Header / Nav ---------- */ header.site-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 5vw; border-bottom: 1px solid var(--panel-line); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 30; background: rgba(6,4,15,0.72); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-hi); text-decoration: none; } .brand-mark { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 200deg, var(--violet), var(--cyan), var(--violet-deep), var(--violet)); display: grid; place-items: center; position: relative; animation: spin 8s linear infinite; box-shadow: 0 0 18px rgba(155,107,255,0.5); } .brand-mark::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--void); } @keyframes spin { to { transform: rotate(360deg); } } nav.orbit-links { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 5px; } nav.orbit-links a { color: var(--text-mid); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 9px 18px; border-radius: 999px; transition: all 0.2s ease; white-space: nowrap; } nav.orbit-links a:hover { color: var(--text-hi); background: rgba(255,255,255,0.06); } nav.orbit-links a.active { color: var(--void); background: linear-gradient(135deg, var(--violet), var(--cyan)); } .header-left { display: flex; align-items: center; gap: 14px; } .rail-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-line); color: var(--text-hi); cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; } .rail-toggle:hover { background: var(--panel-2); } .hud { display: flex; align-items: center; gap: 12px; } #authArea { display: flex; align-items: center; gap: 10px; } .balance-chip { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--panel-line); padding: 8px 16px; border-radius: 999px; font-family: var(--font-num); font-size: 13px; color: var(--violet); cursor: pointer; transition: border-color 0.2s ease; } .balance-chip:hover { border-color: rgba(155,107,255,0.5); } .balance-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 2s ease-in-out infinite; } .balance-chip .reset-icon { opacity: 0.35; transition: opacity 0.2s ease, transform 0.3s ease; } .balance-chip:hover .reset-icon { opacity: 0.9; transform: rotate(-40deg); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---------- Side rail ---------- */ .side-rail { position: fixed; left: 0; top: 73px; bottom: 0; width: 72px; background: rgba(13,9,33,0.85); backdrop-filter: blur(8px); border-right: 1px solid var(--panel-line); z-index: 25; display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 8px; overflow-y: auto; transition: transform 0.25s ease; } .rail-item { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; text-decoration: none; background: transparent; border: 1px solid transparent; flex-shrink: 0; transition: all 0.2s ease; } .rail-item:hover { background: var(--panel-2); border-color: var(--panel-line); transform: translateY(-1px); } .rail-item.active { background: linear-gradient(135deg, rgba(155,107,255,0.22), rgba(79,227,208,0.12)); border-color: rgba(155,107,255,0.4); box-shadow: 0 0 14px rgba(155,107,255,0.2); } body.has-rail.rail-collapsed .side-rail { transform: translateX(-100%); } body.has-rail:not(.rail-collapsed) .wrap { padding-left: 72px; transition: padding-left 0.25s ease; } body.has-rail:not(.rail-collapsed) footer.site-footer { padding-left: calc(5vw + 72px); transition: padding-left 0.25s ease; } @media (max-width: 780px) { .side-rail { display: none; } body.has-rail .wrap, body.has-rail footer.site-footer { padding-left: 0 !important; } } /* ---------- Toasts ---------- */ #orbet-toasts { position: fixed; top: 90px; right: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: 320px; pointer-events: none; } .orbet-toast { background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 14px; padding: 12px 16px; opacity: 0; transform: translateX(24px); transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 14px 34px rgba(0,0,0,0.45); } .orbet-toast.show { opacity: 1; transform: translateX(0); } .orbet-toast b { display: block; font-family: var(--font-display); font-size: 13px; margin-bottom: 2px; } .orbet-toast span { font-size: 12px; color: var(--text-mid); } .orbet-toast-win { border-color: rgba(79,227,208,0.4); } .orbet-toast-win b { color: var(--cyan); } .orbet-toast-loss { border-color: rgba(242,88,107,0.4); } .orbet-toast-loss b { color: var(--danger); } .orbet-toast-bet { border-color: rgba(155,107,255,0.4); } .orbet-toast-bet b { color: var(--violet); } .orbet-toast-error { border-color: rgba(242,88,107,0.4); } .orbet-toast-error b { color: var(--danger); } .orbet-toast-info { border-color: var(--panel-line); } .orbet-toast-info b { color: var(--text-hi); } /* ---------- Reusable bet controls ---------- */ .bet-input-row { display: flex; gap: 8px; } .bet-input-row .field-input { flex: 1; } .stepper-btns { display: flex; gap: 6px; flex-shrink: 0; } .stepper-btns button { background: var(--panel-2); border: 1px solid var(--panel-line); color: var(--text-hi); border-radius: 10px; padding: 0 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .stepper-btns button:hover { background: #241c50; } select.field-input { appearance: none; cursor: pointer; } input[type="range"].field-range { width: 100%; accent-color: var(--violet); height: 6px; } .segmented { display: flex; background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: 12px; padding: 4px; gap: 4px; } .segmented button { flex: 1; background: transparent; border: none; color: var(--text-mid); padding: 9px 0; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .segmented button.active { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); color: #fff; } .history-list { display: flex; flex-direction: column; gap: 6px; max-height: 170px; overflow-y: auto; } .history-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-family: var(--font-num); } .history-row.win { color: var(--cyan); } .history-row.loss { color: var(--danger); } .history-row span:first-child { color: var(--text-low); font-family: var(--font-body); } /* ---------- P&L widget ---------- */ .pnl-toggle { position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--violet-deep)); border: none; color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 10px 30px rgba(108,60,233,0.45); z-index: 40; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .pnl-toggle:hover { transform: translateY(-2px) scale(1.05); } .pnl-widget { position: fixed; right: 22px; bottom: 86px; width: 320px; background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 40; overflow: hidden; } .pnl-widget.hidden { display: none; } .pnl-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--panel-line); cursor: grab; font-family: var(--font-display); font-size: 13px; font-weight: 600; user-select: none; } .pnl-widget-header:active { cursor: grabbing; } .pnl-widget-header div { display: flex; gap: 6px; } .pnl-widget-header button { background: transparent; border: none; color: var(--text-mid); cursor: pointer; font-size: 13px; width: 22px; height: 22px; border-radius: 6px; } .pnl-widget-header button:hover { background: var(--panel-2); color: var(--text-hi); } .pnl-widget-body { padding: 14px; } .pnl-profit-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .pnl-label { display: block; font-size: 10.5px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .pnl-value { font-family: var(--font-num); font-size: 20px; font-weight: 700; } .pnl-stats { display: flex; gap: 14px; text-align: right; } .pnl-stats > div span:last-child { display: block; font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--text-hi); } .pnl-filter { margin-bottom: 10px; padding: 8px 12px; font-size: 11.5px; } .pnl-chart-wrap { position: relative; } #pnlSpark { width: 100%; height: 120px; display: block; cursor: crosshair; } .pnl-tooltip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--void); border: 1px solid var(--panel-line); border-radius: 8px; padding: 6px 10px; font-size: 11px; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,0.5); } .pnl-tooltip.hidden { display: none; } .pnl-tooltip b { display: block; font-family: var(--font-num); color: var(--text-hi); font-size: 12.5px; } .pnl-tooltip span { color: var(--text-low); font-size: 10px; } @media (max-width: 780px) { .pnl-toggle { right: 14px; bottom: 14px; width: 46px; height: 46px; font-size: 19px; } .pnl-widget { right: 14px; left: 14px; width: auto; bottom: 70px; } } /* ---------- Chat ---------- */ .chat-toggle { position: fixed; right: 22px; bottom: 86px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), #1c7a6e); border: none; color: #06251f; font-size: 22px; cursor: pointer; box-shadow: 0 10px 30px rgba(79,227,208,0.35); z-index: 40; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .chat-toggle:hover { transform: translateY(-2px) scale(1.05); } .chat-panel { position: fixed; right: 22px; bottom: 150px; top: 90px; width: 320px; background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 40; display: flex; flex-direction: column; overflow: hidden; } .chat-panel.hidden { display: none; } .chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; } .chat-empty { color: var(--text-low); font-size: 12px; text-align: center; margin-top: 20px; } .chat-msg { font-size: 12.5px; line-height: 1.45; word-break: break-word; } .chat-msg b { color: var(--violet); margin-right: 6px; cursor: default; } .chat-msg.system { color: var(--gold); font-style: italic; text-align: center; background: rgba(242,184,75,0.08); border: 1px solid rgba(242,184,75,0.2); border-radius: 10px; padding: 6px 10px; } .chat-msg .chat-time { color: var(--text-low); font-size: 10px; margin-left: 6px; } .chat-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--panel-line); } .chat-input-row input { flex: 1; } @media (max-width: 780px) { .chat-toggle { right: 14px; bottom: 70px; width: 46px; height: 46px; font-size: 19px; } .chat-panel { right: 14px; left: 14px; width: auto; bottom: 122px; top: 80px; } } .btn { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; padding: 10px 20px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 3px 0 rgba(0,0,0,0.28), 0 6px 14px rgba(0,0,0,0.3); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.3); } .btn-violet { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); color: #fff; box-shadow: 0 3px 0 #4a2299, 0 8px 18px rgba(108,60,233,0.35); } .btn-violet:hover { box-shadow: 0 3px 0 #4a2299, 0 10px 26px rgba(155,107,255,0.4); } .btn-violet:active { box-shadow: 0 1px 0 #4a2299, 0 3px 8px rgba(108,60,233,0.3); } .btn-ghost { background: var(--panel-2); color: var(--text-hi); border: 1px solid var(--panel-line); box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.25); } .btn-ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25); } .btn-danger { background: rgba(242,88,107,0.15); color: var(--danger); border: 1px solid rgba(242,88,107,0.35); box-shadow: 0 3px 0 rgba(122,20,32,0.4); } .btn-danger:hover { box-shadow: 0 3px 0 rgba(122,20,32,0.4), 0 10px 22px rgba(242,88,107,0.25); } .btn-lg { padding: 15px 30px; font-size: 15px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn[disabled]:hover { transform: none; } /* ---------- Account chip / panel / auth modal ---------- */ .account-chip { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--panel-line); padding: 6px 14px 6px 8px; border-radius: 999px; cursor: pointer; color: var(--text-hi); font-family: var(--font-body); font-weight: 600; font-size: 12.5px; transition: border-color 0.2s ease; } .account-chip:hover { border-color: rgba(155,107,255,0.5); } .account-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); display: grid; place-items: center; font-size: 13px; } .account-level { font-family: var(--font-num); font-size: 10.5px; color: var(--gold); background: rgba(242,184,75,0.12); padding: 3px 7px; border-radius: 999px; } .account-panel { position: fixed; top: 78px; right: 5vw; width: 320px; background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.55); z-index: 50; overflow: hidden; } .account-panel.hidden { display: none; } .account-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--panel-line); } .account-panel-header b { font-family: var(--font-display); font-size: 14px; } .account-panel-sub { font-size: 11px; color: var(--gold); margin-top: 2px; } .account-panel-body { padding: 16px 18px; } .ap-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-mid); margin-bottom: 6px; } .ap-row b { color: var(--text-hi); } .ap-bar { height: 7px; border-radius: 999px; background: var(--panel-2); overflow: hidden; } .ap-bar-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); border-radius: 999px; transition: width 0.4s ease; } .ap-bar-fill.gold { background: linear-gradient(90deg, var(--gold), #d98f1f); } .ap-sub { font-size: 10.5px; color: var(--text-low); margin-top: 6px; } .ap-divider { height: 1px; background: var(--panel-line); margin: 14px 0; } .ap-stat-row { display: flex; align-items: center; justify-content: space-between; } .ap-stat-row b { font-family: var(--font-num); font-size: 14px; color: var(--text-hi); } .ap-claim { padding: 8px 16px; font-size: 11.5px; flex-shrink: 0; } .ap-code-row { display: flex; gap: 8px; margin-bottom: 12px; } .ap-code-row code { flex: 1; background: var(--void); border: 1px solid var(--panel-line); border-radius: 10px; padding: 10px 12px; font-family: var(--font-num); font-size: 13px; color: var(--cyan); letter-spacing: 0.08em; } .ap-code-row input { flex: 1; } .wallet-tabs { margin-bottom: 16px; } .modal-overlay { position: fixed; inset: 0; background: rgba(4,2,12,0.72); backdrop-filter: blur(4px); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.hidden { display: none; } .modal-box { position: relative; width: 100%; max-width: 380px; background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 22px; padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); } .modal-close { position: absolute; top: 16px; right: 16px; background: var(--panel-2); border: 1px solid var(--panel-line); color: var(--text-mid); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; } .modal-close:hover { color: var(--text-hi); } .modal-tabs { margin-bottom: 18px; } .modal-form { display: flex; flex-direction: column; gap: 10px; } .modal-form .field-label { margin-top: 4px; margin-bottom: 2px; } .modal-error { color: var(--danger); font-size: 12px; min-height: 16px; } .modal-note { font-size: 11px; color: var(--text-low); line-height: 1.5; margin-top: 16px; } .auth-gate-overlay { position: fixed; top: 73px; left: 0; right: 0; bottom: 0; z-index: 22; background: rgba(6,4,15,0.85); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-gate-box { text-align: center; max-width: 380px; background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 24px; padding: 44px 34px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); } .auth-gate-box h3 { font-family: var(--font-display); font-size: 22px; margin: 14px 0 10px; } .auth-gate-box p { color: var(--text-mid); font-size: 13.5px; line-height: 1.6; margin-bottom: 24px; } /* ---------- Sections ---------- */ section { padding: 80px 5vw; position: relative; z-index: 1; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; } .section-head h1, .section-head h2 { font-family: var(--font-display); font-size: 32px; font-weight: 700; } .section-head .tag { font-family: var(--font-num); font-size: 12px; color: var(--text-low); letter-spacing: 0.1em; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: 11px; letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; background: rgba(79,227,208,0.08); border: 1px solid rgba(79,227,208,0.25); padding: 7px 16px; border-radius: 999px; margin-bottom: 22px; } .eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulse 2s ease-in-out infinite; } /* ---------- Games grid (home) ---------- */ .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .game-card { background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 20px; padding: 26px 22px; position: relative; overflow: hidden; transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; text-decoration: none; color: inherit; display: block; transform-style: preserve-3d; will-change: transform; } .game-card:hover { border-color: rgba(155,107,255,0.5); box-shadow: 0 20px 44px rgba(108,60,233,0.3); } .game-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 160px; height: 160px; background: radial-gradient(circle, var(--accent, var(--violet)) 0%, transparent 70%); opacity: 0.18; border-radius: 50%; transition: opacity 0.3s ease; } .game-card:hover::before { opacity: 0.3; } .game-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255,255,255,0.04); border: 1px solid var(--panel-line); margin-bottom: 18px; transition: transform 0.3s ease; } .game-card:hover .game-icon { transform: rotate(-6deg) scale(1.08); } .game-card h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; } .game-card p { color: var(--text-low); font-size: 13px; margin-bottom: 20px; } .game-play { font-size: 12.5px; font-weight: 600; color: var(--text-hi); display: flex; align-items: center; gap: 6px; } .game-play::after { content: '→'; transition: transform 0.2s ease; } .game-card:hover .game-play::after { transform: translateX(4px); } /* ---------- Live rail ---------- */ .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--panel-line); border: 1px solid var(--panel-line); border-radius: 20px; overflow: hidden; } .floor-item { background: var(--deep); padding: 28px; text-align: center; } .floor-item .num { font-family: var(--font-num); font-size: 28px; font-weight: 700; color: var(--violet); display: block; margin-bottom: 6px; } .floor-item .lbl { font-size: 12px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Game page layout ---------- */ .game-page { display: grid; grid-template-columns: 1fr 320px; gap: 22px; padding: 34px 5vw 90px; align-items: start; } .game-stage-panel { background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 24px; padding: 28px; min-height: 600px; display: flex; flex-direction: column; } .game-stage-panel .stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .game-stage-panel h1 { font-family: var(--font-display); font-size: 24px; } .stage-area { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; } .control-panel { background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; } .control-panel h2 { font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; } .field-label { font-size: 12px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; display: block; } .field-input { width: 100%; background: var(--void); border: 1px solid var(--panel-line); border-radius: 12px; padding: 12px 14px; color: var(--text-hi); font-family: var(--font-num); font-size: 14px; } .field-input:disabled { color: var(--text-low); cursor: not-allowed; } .stat-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-mid); padding: 10px 0; border-top: 1px solid var(--panel-line); } .stat-row b { color: var(--text-hi); font-family: var(--font-num); font-weight: 600; } .notice { font-size: 11.5px; color: var(--text-low); line-height: 1.5; background: rgba(155,107,255,0.06); border: 1px solid rgba(155,107,255,0.2); padding: 10px 12px; border-radius: 12px; } .result-line { font-family: var(--font-num); font-size: 13px; color: var(--text-mid); min-height: 20px; text-align: center; margin-top: 10px; } .result-line b { color: var(--cyan); } @media (max-width: 900px) { .game-page { grid-template-columns: 1fr; } .control-panel { position: static; } } /* ---------- Dice ---------- */ .die-3d-scene { width: 140px; height: 140px; perspective: 700px; } .die-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.2,.9,.25,1); } .die-3d .face { position: absolute; inset: 0; background: linear-gradient(155deg, var(--panel-2), var(--panel)); border: 1px solid var(--panel-line); border-radius: 22px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 20px; box-shadow: inset 0 0 22px rgba(0,0,0,0.35), 0 20px 50px rgba(108,60,233,0.2); backface-visibility: hidden; } .die-3d .pip { width: 18px; height: 18px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); place-self: center; opacity: 0; } .die-3d .face-1 { transform: translateZ(70px); } .die-3d .face-6 { transform: rotateY(180deg) translateZ(70px); } .die-3d .face-3 { transform: rotateY(90deg) translateZ(70px); } .die-3d .face-4 { transform: rotateY(-90deg) translateZ(70px); } .die-3d .face-2 { transform: rotateX(90deg) translateZ(70px); } .die-3d .face-5 { transform: rotateX(-90deg) translateZ(70px); } /* ---------- Wheel ---------- */ .wheel-wrap { position: relative; width: 360px; height: 360px; max-width: 100%; aspect-ratio: 1; perspective: 900px; } .wheel-tilt { width: 100%; height: 100%; border-radius: 50%; transform: rotateX(18deg); transform-style: preserve-3d; box-shadow: 0 34px 40px -18px rgba(0,0,0,0.6); } .wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--violet) 0deg 45deg, var(--violet-deep) 45deg 90deg, var(--cyan) 90deg 135deg, var(--panel-2) 135deg 180deg, var(--violet) 180deg 225deg, var(--violet-deep) 225deg 270deg, var(--cyan) 270deg 315deg, var(--panel-2) 315deg 360deg); border: 5px solid var(--panel-line); transition: transform 4s cubic-bezier(.15,.85,.15,1); box-shadow: 0 0 50px rgba(155,107,255,0.3); } .wheel-pointer { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 18px solid var(--gold); z-index: 2; } .wheel-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-num); font-weight: 700; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); white-space: nowrap; pointer-events: none; } .roulette-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-num); font-weight: 700; font-size: 9.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.9); pointer-events: none; } /* ---------- Mines (real two-sided 3D flip) ---------- */ .mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; max-width: 540px; } .mine-tile { aspect-ratio: 1; perspective: 500px; cursor: pointer; } .mine-tile-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(.2,.9,.25,1); } .mine-tile.flipped .mine-tile-inner { transform: rotateY(180deg); } .mine-tile:hover:not(.flipped) .mine-tile-inner { transform: translateY(-3px) rotateX(6deg); } .mine-tile-face { position: absolute; inset: 0; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--panel-line); display: grid; place-items: center; font-size: 22px; backface-visibility: hidden; box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25); } .mine-tile-back { transform: rotateY(180deg); } .mine-tile.gem .mine-tile-back { background: rgba(79,227,208,0.18); border-color: var(--cyan); box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25), 0 0 18px rgba(79,227,208,0.25); } .mine-tile.bomb .mine-tile-back { background: rgba(242,88,107,0.18); border-color: var(--danger); box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25), 0 0 18px rgba(242,88,107,0.25); } /* ---------- Shared 3D stage tilt utility ---------- */ .stage-3d-tilt { transform: perspective(1300px) rotateX(4deg); transform-style: preserve-3d; } /* ---------- Plinko ---------- */ .plinko-stage { position: relative; width: 100%; height: 480px; overflow: hidden; border-radius: 16px; background: var(--deep); border: 1px solid var(--panel-line); } .peg { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--text-low); transform: translateX(-50%); } .ball { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--violet)); top: 10px; box-shadow: 0 0 12px var(--violet); transform: translateX(-50%); } .plinko-slots { display: flex; gap: 4px; margin-top: 10px; width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .plinko-slots div { flex: 1 1 0; min-width: 34px; text-align: center; font-family: var(--font-num); font-size: 11px; color: var(--text-low); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 7px 0; white-space: nowrap; } /* ---------- Cards / Blackjack ---------- */ .card-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; min-height: 165px; perspective: 900px; } .playing-card { width: 96px; height: 136px; border-radius: 12px; background: linear-gradient(160deg, #fff, #e8e5f5); color: #221a4a; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; box-shadow: 0 10px 24px rgba(0,0,0,0.4); opacity: 0; transform-style: preserve-3d; backface-visibility: hidden; animation: dealCard 0.55s cubic-bezier(.2,1,.3,1) forwards; } .playing-card.back { background: repeating-linear-gradient(45deg, var(--violet-deep), var(--violet-deep) 6px, var(--panel-2) 6px, var(--panel-2) 12px); color: transparent; } @keyframes dealCard { 0% { opacity: 0; transform: translateY(-46px) rotateY(-110deg) rotateZ(-8deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotateY(0deg) rotateZ(0deg); } } .hand-group { display: flex; flex-direction: column; align-items: center; gap: 10px; } .hand-label { font-size: 12px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Crash ---------- */ .crash-canvas-wrap { width: 100%; height: 460px; position: relative; } .crash-multiplier { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-num); font-size: 44px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 24px rgba(79,227,208,0.5); } .crash-multiplier.busted { color: var(--danger); text-shadow: 0 0 24px rgba(242,88,107,0.5); } .crash-rocket { position: absolute; top: 0; left: 0; font-size: 26px; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; filter: drop-shadow(0 0 8px rgba(155,107,255,0.7)); } .crash-rocket.exploding { animation: rocketBoom 0.5s ease; } @keyframes rocketBoom { 0% { filter: drop-shadow(0 0 8px rgba(242,88,107,0.7)); } 35% { transform: translate(-50%, -50%) scale(1.9); } 100% { transform: translate(-50%, -50%) scale(1.4); } } .rocket-exhaust { position: absolute; top: 0; left: 0; width: 22px; height: 46px; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, rgba(242,184,75,0.85), rgba(242,88,107,0.45) 45%, transparent 75%); filter: blur(3px); opacity: 0; transition: opacity 0.2s ease; } /* ---------- Slots ---------- */ .slots-frame { display: flex; gap: 14px; background: var(--void); border: 1px solid var(--panel-line); border-radius: 18px; padding: 26px; perspective: 1000px; } .reel { width: 120px; height: 300px; overflow: hidden; border-radius: 12px; background: var(--panel-2); position: relative; transform: rotateX(10deg); box-shadow: inset 0 14px 18px -6px rgba(0,0,0,0.6), inset 0 -14px 18px -6px rgba(0,0,0,0.6), 0 24px 34px rgba(0,0,0,0.4); } .reel-strip { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; transition: top 1.6s cubic-bezier(.2,.9,.2,1); } .reel-symbol { height: 100px; display: grid; place-items: center; font-size: 46px; } /* ---------- Roulette ---------- */ .roulette-wrap { position: relative; width: 380px; height: 380px; max-width: 100%; aspect-ratio: 1; perspective: 1000px; } .roulette-tilt { width: 100%; height: 100%; border-radius: 50%; transform: rotateX(20deg); transform-style: preserve-3d; box-shadow: 0 38px 44px -18px rgba(0,0,0,0.65); } .roulette-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--panel-line); transition: transform 4.2s cubic-bezier(.12,.85,.15,1); box-shadow: 0 0 60px rgba(155,107,255,0.28); } .roulette-ball { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; top: 8px; left: calc(50% - 6px); box-shadow: 0 0 8px #fff; transition: transform 4s cubic-bezier(.15,.8,.2,1); } /* ---------- Alien path (3D runway) ---------- */ .alien-scene { perspective: 1100px; width: 100%; display: flex; justify-content: center; } .alien-path { display: flex; flex-direction: column-reverse; gap: 16px; width: 100%; max-width: 520px; transform: rotateX(38deg); transform-style: preserve-3d; padding: 10px 0 30px; } .alien-row { display: flex; gap: 10px; transform-style: preserve-3d; } .alien-tile { flex: 1; height: 44px; position: relative; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--panel-line); display: grid; place-items: center; font-size: 16px; font-family: var(--font-num); color: var(--text-low); transform-style: preserve-3d; box-shadow: 0 8px 0 -2px rgba(0,0,0,0.5); transition: background 0.3s ease, border-color 0.3s ease; } .alien-tile.cleared { background: rgba(79,227,208,0.15); border-color: var(--cyan); color: var(--cyan); } .alien-tile.current { border-color: var(--gold); box-shadow: 0 10px 0 -2px rgba(0,0,0,0.5), 0 0 0 2px rgba(242,184,75,0.3), 0 0 20px rgba(242,184,75,0.35); } .alien-tile.caught { background: rgba(242,88,107,0.2); border-color: var(--danger); color: var(--danger); } .alien-player { position: absolute; top: -34px; left: 50%; font-size: 22px; transform: translateX(-50%) translateZ(30px); filter: drop-shadow(0 8px 6px rgba(0,0,0,0.55)); animation: alienBob 1.1s ease-in-out infinite; pointer-events: none; } @keyframes alienBob { 0%, 100% { transform: translateX(-50%) translateZ(30px) translateY(0); } 50% { transform: translateX(-50%) translateZ(30px) translateY(-7px); } } /* ---------- Coinflip ---------- */ .coinflip-vs { display: flex; align-items: center; gap: 22px; } .coinflip-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 100px; } .coinflip-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); display: grid; place-items: center; font-size: 22px; } .coinflip-side b { font-family: var(--font-display); font-size: 13px; } .coinflip-pick { font-family: var(--font-num); font-size: 11px; color: var(--gold); background: rgba(242,184,75,0.12); padding: 3px 10px; border-radius: 999px; } .coinflip-vs-text { font-family: var(--font-num); font-size: 13px; color: var(--text-low); letter-spacing: 0.1em; } .coin-scene { width: 170px; height: 170px; perspective: 800px; } .coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(.2,.8,.2,1); } .coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.06em; border: 4px solid rgba(255,255,255,0.15); } .coin-face-heads { background: radial-gradient(circle at 35% 30%, #ffe9b0, var(--gold) 60%, #8a5f16); color: #2b1c04; box-shadow: 0 20px 50px rgba(242,184,75,0.35); } .coin-face-tails { background: radial-gradient(circle at 35% 30%, #cbb8ff, var(--violet) 60%, var(--violet-deep)); color: #fff; transform: rotateY(180deg); box-shadow: 0 20px 50px rgba(155,107,255,0.35); } /* ---------- Case Battles ---------- */ .battle-participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; width: 100%; } .battle-player { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: 14px; padding: 12px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .battle-player.winner { border-color: var(--gold); box-shadow: 0 0 24px rgba(242,184,75,0.3); } .battle-player-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-bottom: 10px; } .battle-player-head b { font-family: var(--font-num); color: var(--cyan); } .battle-reel-wrap { position: relative; width: 100%; height: 120px; overflow: hidden; border-radius: 10px; background: var(--void); border: 1px solid var(--panel-line); transform: perspective(700px) rotateX(4deg); } .battle-reel-wrap::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--gold); box-shadow: 0 0 8px var(--gold); z-index: 3; } .battle-reel { display: flex; position: absolute; top: 0; left: 0; height: 100%; align-items: center; } .battle-item { width: 80px; height: 80px; margin: 0 6px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--panel-line); display: grid; place-items: center; font-size: 30px; flex-shrink: 0; } .battle-item.rare { border-color: var(--gold); box-shadow: 0 0 14px rgba(242,184,75,0.25); } .battle-item.epic { border-color: var(--violet); box-shadow: 0 0 14px rgba(155,107,255,0.25); } /* ---------- Keno ---------- */ .keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; width: 100%; max-width: 560px; } .keno-cell { aspect-ratio: 1; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--panel-line); display: grid; place-items: center; font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: all 0.15s ease; } .keno-cell:hover { background: #241c50; } .keno-cell.picked { background: rgba(155,107,255,0.25); border-color: var(--violet); color: #fff; } .keno-cell.drawn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,184,75,0.35) inset; color: var(--gold); } .keno-cell.hit { background: rgba(79,227,208,0.28); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px rgba(79,227,208,0.35); } /* ---------- Cases ---------- */ .case-reel-wrap { width: 100%; max-width: 680px; height: 210px; overflow: hidden; position: relative; border-radius: 16px; background: var(--void); border: 1px solid var(--panel-line); } .case-reel-wrap::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--gold); box-shadow: 0 0 10px var(--gold); z-index: 3; } .case-reel { display: flex; position: absolute; top: 0; left: 0; height: 100%; transition: transform 3.4s cubic-bezier(.1,.7,.1,1); align-items: center; } .case-item { width: 150px; height: 150px; margin: 0 8px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--panel-line); display: grid; place-items: center; font-size: 50px; flex-shrink: 0; } .case-item.rare { border-color: var(--gold); box-shadow: 0 0 20px rgba(242,184,75,0.25); } .case-item.epic { border-color: var(--violet); box-shadow: 0 0 20px rgba(155,107,255,0.25); } /* ---------- Admin ---------- */ .admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 73px); } .admin-sidebar { border-right: 1px solid var(--panel-line); padding: 28px 18px; display: flex; flex-direction: column; gap: 4px; } .admin-sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; color: var(--text-mid); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background 0.2s ease, color 0.2s ease; } .admin-sidebar a:hover { background: rgba(255,255,255,0.05); color: var(--text-hi); } .admin-sidebar a.active { background: linear-gradient(135deg, rgba(155,107,255,0.18), rgba(79,227,208,0.1)); color: var(--text-hi); border: 1px solid var(--panel-line); } .admin-main { padding: 32px 5vw 60px; } .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-bottom: 30px; } .stat-card { background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 18px; padding: 22px; } .stat-card .num { font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--violet); display: block; margin-bottom: 4px; } .stat-card .lbl { font-size: 12px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; } .settings-card { background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 16px; padding: 18px; } .theme-picker { display: flex; gap: 12px; flex-wrap: wrap; } .theme-option { display: flex; align-items: center; gap: 10px; background: linear-gradient(160deg, var(--panel), var(--deep)); border: 1px solid var(--panel-line); border-radius: 14px; padding: 14px 20px; color: var(--text-hi); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .theme-option:hover { border-color: rgba(155,107,255,0.5); } .theme-option.active { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), 0 8px 20px rgba(108,60,233,0.25); } .theme-emoji { font-size: 20px; } .data-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; overflow: hidden; } .data-table th, .data-table td { text-align: left; padding: 14px 18px; font-size: 13px; border-bottom: 1px solid var(--panel-line); } .data-table th { color: var(--text-low); text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; font-weight: 600; } .data-table tr:last-child td { border-bottom: none; } .pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; } .pill.ok { background: rgba(79,227,208,0.15); color: var(--cyan); } .pill.pending { background: rgba(242,184,75,0.15); color: var(--gold); } .pill.flagged { background: rgba(242,88,107,0.15); color: var(--danger); } .admin-locked { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; flex-direction: column; gap: 14px; padding: 40px; } .admin-locked .lock-icon { font-size: 40px; } /* ---------- Footer ---------- */ footer.site-footer { padding: 50px 5vw; border-top: 1px solid var(--panel-line); display: flex; justify-content: space-between; align-items: center; color: var(--text-low); font-size: 13px; flex-wrap: wrap; gap: 16px; } @media (max-width: 780px) { nav.orbit-links { display: none; } .rail { grid-template-columns: repeat(2, 1fr); } .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { display: flex; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--panel-line); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }