/* ═══════════════════════════════════════════════════════════ themes.css — "vibe" color themes for the storefront Vibes set CSS variables read via var(...) throughout style-additions.css, game.php, dashboard/wallet.php, dashboard/profile.php, and index.php: --vibe-1 / --vibe-2 / --vibe-shadow accent gradient (buttons, avatar, active nav, banners) --vibe-bg page/body background --vibe-navbar top navbar + bottom nav background --vibe-title heading / card-title text (only set for dark vibes — others fall back to the site's normal dark-navy text automatically) --vibe-card-bg / --vibe-card-bg2 surface color for every white "box" on the site — Player Identity / Select Package / section boxes on game.php, Add Money / amount-chip / Manual-QR boxes on wallet.php, Why-Choose-Us cards, and the vibe picker popover itself --vibe-card-border the border color that goes with those same boxes --vibe-header-text text color for anything sitting directly on the bold --vibe-1/ --vibe-2 gradient (e.g. the profile page's colored header band) — white for every real vibe, since --vibe-1/2 are always bold/saturated; the no-theme default keeps its own dark-navy text via the fallback at the usage site, since the default header gradient is a pale near-white, not a bold color ★ card-bg/card-bg2/card-border exist so that EVERY bordered box on the site is tinted to match whichever vibe is active — not just the page background and buttons. Before these existed, every one of those boxes was hardcoded to plain white + light grey (or, for dark vibes, one single generic dark grey), completely ignoring which of the 10 vibe colors was actually selected. If you add a new vibe, set all four of these (including --vibe-header-text) or its boxes will silently fall back to plain white/grey again. ★ Three vibes (Blood Mood, Robot, Black) are dark. Selecting one of these ALSO adds html.dark-mode via includes/header.php's boot script and includes/footer.php's setVibe() — that's what makes text on the wallet/orders/shop/side-menu/auth pages switch to a light color for readability (those rules live in style-additions.css, header.php, and footer.php, searchable as "html.dark-mode"). If you add another dark vibe here, add its class name to the DARK_VIBES array in BOTH of those files too, or its text will stay stuck in dark-on-dark. No theme class on = the original default look, unchanged. ═══════════════════════════════════════════════════════════ */ /* ── VIOLET ──────────────────────────────── */ html.theme-violet{ --vibe-1:#8753FF; --vibe-2:#6916EB; --vibe-shadow:rgba(135,83,255,.42); --vibe-bg:#EDE7FE; --vibe-navbar:#F4EEFF; --vibe-header-text:#fff; --vibe-card-bg:#FBF9FF; --vibe-card-bg2:#F1EAFE; --vibe-card-border:#DCCCFA; } html.theme-violet body, html.theme-violet .page-wrap{background:var(--vibe-bg);} html.theme-violet .navbar{background:var(--vibe-navbar);} html.theme-violet .quick-action-icon{background:linear-gradient(155deg,#ffffff,#E2D8FE);} /* ── BLOOD MOOD (dark red, gothic — not just black) ──── */ html.theme-blood{ --vibe-1:#EE1414; --vibe-2:#891313; --vibe-shadow:rgba(238,20,20,.5); --vibe-bg:#1A0505; --vibe-navbar:#220808; --vibe-title:#F5F5F5; --vibe-header-text:#fff; --vibe-card-bg:#220A0A; --vibe-card-bg2:#2C0D0D; --vibe-card-border:#4A1616; } html.theme-blood body, html.theme-blood .page-wrap{ background:radial-gradient(ellipse at top, #2B0808 0%, #170404 55%, #0D0202 100%); color:#F5F5F5; } html.theme-blood .navbar{background:var(--vibe-navbar);border-bottom-color:#3A0D0D;} html.theme-blood .nav-brand-text{color:#F5F5F5;} html.theme-blood .quick-action-icon{background:linear-gradient(155deg,#2E1414,#170707);box-shadow:0 12px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);} html.theme-blood .section-title-group .section-title, html.theme-blood .center-section-title{color:#F5F5F5;} html.theme-blood .flash-sale-count{background:#2E1414;color:#F87171;} html.theme-blood .banner-referral-shimmer{box-shadow:0 8px 24px rgba(238,20,20,.6);} /* ── STEEL (cool pale grey, formerly labeled "Robot") ─── */ html.theme-robot{ --vibe-1:#60738F; --vibe-2:#0C162D; --vibe-shadow:rgba(96,115,143,.45); --vibe-bg:#E3E8EF; --vibe-navbar:#EBEFF4; --vibe-header-text:#fff; --vibe-card-bg:#F8F9FB; --vibe-card-bg2:#EEF1F5; --vibe-card-border:#D2D9E3; } html.theme-robot body, html.theme-robot .page-wrap{background:var(--vibe-bg);} html.theme-robot .navbar{background:var(--vibe-navbar);} html.theme-robot .nav-brand-text{letter-spacing:1.5px;} html.theme-robot .quick-action-icon{border-radius:10px;background:linear-gradient(155deg,#ffffff,#D8DFE9);} html.theme-robot .game-card-img{border-radius:8px;} /* ── PINK ────────────────────────────────── */ html.theme-pink{ --vibe-1:#FC3899; --vibe-2:#CF075A; --vibe-shadow:rgba(252,56,153,.42); --vibe-bg:#FCE0EF; --vibe-navbar:#FFEBF5; --vibe-header-text:#fff; --vibe-card-bg:#FFF6FB; --vibe-card-bg2:#FDE7F3; --vibe-card-border:#F8B9D8; } html.theme-pink body, html.theme-pink .page-wrap{background:var(--vibe-bg);} html.theme-pink .navbar{background:var(--vibe-navbar);} html.theme-pink .quick-action-icon{background:linear-gradient(155deg,#ffffff,#FBCFE8);} /* ── OCEAN GLOW ──────────────────────────── */ html.theme-ocean{ --vibe-1:#00BADA; --vibe-2:#017B9D; --vibe-shadow:rgba(0,186,218,.42); --vibe-bg:#D2FAFF; --vibe-navbar:#E3FDFF; --vibe-header-text:#fff; --vibe-card-bg:#F2FDFF; --vibe-card-bg2:#DFFAFF; --vibe-card-border:#A0EAF5; } html.theme-ocean body, html.theme-ocean .page-wrap{background:var(--vibe-bg);} html.theme-ocean .navbar{background:var(--vibe-navbar);} html.theme-ocean .quick-action-icon{background:linear-gradient(155deg,#ffffff,#A5F3FC);} /* ── WINTER ──────────────────────────────── */ html.theme-winter{ --vibe-1:#7AD4FF; --vibe-2:#1038BE; --vibe-shadow:rgba(122,212,255,.42); --vibe-bg:#DFF3FF; --vibe-navbar:#ECF9FF; --vibe-header-text:#fff; --vibe-card-bg:#F4FAFF; --vibe-card-bg2:#E4F4FF; --vibe-card-border:#B9E1FB; } html.theme-winter body, html.theme-winter .page-wrap{background:var(--vibe-bg);} html.theme-winter .navbar{background:var(--vibe-navbar);} html.theme-winter .quick-action-icon{background:linear-gradient(155deg,#ffffff,#BAE6FD);} /* ── GREEN ───────────────────────────────── */ html.theme-green{ --vibe-1:#12D55A; --vibe-2:#0A8B3A; --vibe-shadow:rgba(18,213,90,.42); --vibe-bg:#DEFBE7; --vibe-navbar:#EAFDF0; --vibe-header-text:#fff; --vibe-card-bg:#F3FEF6; --vibe-card-bg2:#E1FBE9; --vibe-card-border:#AEEDC2; } html.theme-green body, html.theme-green .page-wrap{background:var(--vibe-bg);} html.theme-green .navbar{background:var(--vibe-navbar);} html.theme-green .quick-action-icon{background:linear-gradient(155deg,#ffffff,#BBF7D0);} /* ── ROBOT (dark hacker/circuit-board terminal feel) ──── Dark near-black background with a faint red circuit grid and an animated diagonal red scan-line sweeping behind all content. */ html.theme-grey{ --vibe-1:#EF4444; --vibe-2:#B91C1C; --vibe-shadow:rgba(239,68,68,.45); --vibe-bg:#0B0D0F; --vibe-navbar:#111417; --vibe-title:#E5E7EB; --vibe-header-text:#fff; --vibe-card-bg:#141011; --vibe-card-bg2:#0E0B0C; --vibe-card-border:#3A1A1A; } html.theme-grey body, html.theme-grey .page-wrap{ background-color:#0B0D0F; background-image: repeating-linear-gradient(0deg, rgba(239,68,68,.06) 0px, rgba(239,68,68,.06) 1px, transparent 1px, transparent 24px), repeating-linear-gradient(90deg, rgba(239,68,68,.06) 0px, rgba(239,68,68,.06) 1px, transparent 1px, transparent 24px), linear-gradient(115deg, transparent 42%, rgba(239,68,68,.28) 48%, rgba(239,68,68,.5) 50%, rgba(239,68,68,.28) 52%, transparent 58%); background-size:auto, auto, 320% 320%; animation:robotScan 7s linear infinite; color:#E5E7EB; } @keyframes robotScan{0%{background-position:0 0, 0 0, 0% 0%;}100%{background-position:0 0, 0 0, 200% 200%;}} html.theme-grey .navbar{background:var(--vibe-navbar);border-bottom-color:#241111;} html.theme-grey .nav-brand-text{color:#E5E7EB;letter-spacing:1.5px;font-family:'Courier New',monospace;} html.theme-grey .quick-action-icon{border-radius:8px;background:linear-gradient(155deg,#171A1D,#0D0F11);box-shadow:0 12px 22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(239,68,68,.25);} html.theme-grey .game-card-img{border-radius:6px;} html.theme-grey .section-title-group .section-title, html.theme-grey .center-section-title{color:#E5E7EB;} html.theme-grey .flash-sale-count{background:#171A1D;color:#F87171;} html.theme-grey .banner-referral-shimmer{box-shadow:0 8px 24px rgba(239,68,68,.55);} /* ── BLACK (plain, neutral pure-black — no red tint, no gothic feel, no animated scanline. Just clean black with a silver/white accent, for anyone who wants dark without any color theme on top of it) ── */ html.theme-noir{ --vibe-1:#9CA3AF; --vibe-2:#4B5563; --vibe-shadow:rgba(156,163,175,.35); --vibe-bg:#000000; --vibe-navbar:#0A0A0A; --vibe-title:#F5F5F5; --vibe-header-text:#fff; --vibe-card-bg:#0D0D0D; --vibe-card-bg2:#080808; --vibe-card-border:#2A2A2A; } html.theme-noir body, html.theme-noir .page-wrap{background:#000000;color:#F5F5F5;} html.theme-noir .navbar{background:var(--vibe-navbar);border-bottom-color:#1A1A1A;} html.theme-noir .nav-brand-text{color:#F5F5F5;} html.theme-noir .quick-action-icon{background:linear-gradient(155deg,#1A1A1A,#0A0A0A);box-shadow:0 12px 22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);} html.theme-noir .section-title-group .section-title, html.theme-noir .center-section-title{color:#F5F5F5;} html.theme-noir .flash-sale-count{background:#1A1A1A;color:#E5E7EB;} html.theme-noir .banner-referral-shimmer{box-shadow:0 8px 24px rgba(156,163,175,.4);}