/* ===========================
GIRLYCLUB — SHARED STYLES
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');
/* --- THEME TOKENS --- */
:root {
--bg: #fff0f8;
--bg2: #fce7f3;
--surface: rgba(255,255,255,0.75);
--surface2: rgba(255,255,255,0.55);
--nav: rgba(255,220,240,0.82);
--text: #2a1a2e;
--text2: #6b4a7a;
--hot: #f72585;
--deep: #b5179e;
--gold: #f9c74f;
--blue: #4cc9f0;
--mint: #80ffdb;
--purple: #7209b7;
--card: rgba(255,255,255,0.88);
--border: rgba(247,37,133,0.2);
--glow: rgba(247,37,133,0.3);
--shadow: 0 8px 40px rgba(181,23,158,0.12);
--radius: 2rem;
/* Typography tokens */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'Space Grotesk', 'DM Sans', monospace;
/* Transition token */
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
/* Color scheme */
color-scheme: light;
}
[data-theme="midnight"] {
--bg: #0d0014; --bg2: #150020; --surface: rgba(30,0,50,0.8);
--surface2: rgba(20,0,35,0.6); --nav: rgba(15,0,25,0.85);
--text: #f0e6ff; --text2: #c084fc;
--hot: #e040fb; --deep: #aa00ff; --gold: #ffd60a;
--blue: #00b4d8; --card: rgba(25,0,40,0.85);
--border: rgba(224,64,251,0.25); --glow: rgba(170,0,255,0.4);
}
[data-theme="ocean"] {
--bg: #e0f7fa; --bg2: #b2ebf2; --surface: rgba(255,255,255,0.75);
--nav: rgba(178,235,242,0.82); --text: #01579b; --text2: #0288d1;
--hot: #00b4d8; --deep: #0077b6; --gold: #ffd60a;
--blue: #90e0ef; --card: rgba(255,255,255,0.9);
--border: rgba(0,180,216,0.2); --glow: rgba(0,119,182,0.3);
}
[data-theme="galaxy"] {
--bg: #03001c; --bg2: #08003a; --surface: rgba(10,0,40,0.8);
--nav: rgba(5,0,25,0.9); --text: #e2c4ff; --text2: #a78bfa;
--hot: #e040fb; --deep: #7c3aed; --gold: #fbbf24;
--blue: #38bdf8; --card: rgba(15,0,50,0.85);
--border: rgba(224,64,251,0.2); --glow: rgba(124,58,237,0.4);
}
[data-theme="coquette"] {
--bg: #fdf2f8; --bg2: #fce7f3; --surface: rgba(255,255,255,0.8);
--nav: rgba(253,242,248,0.9); --text: #4a1942; --text2: #9d4edd;
--hot: #e8a0bf; --deep: #c77dff; --gold: #e5c158;
--blue: #d4b8e0; --card: rgba(255,255,255,0.92);
--border: rgba(232,160,191,0.3); --glow: rgba(199,125,255,0.25);
}
[data-theme="matcha"] {
--bg: #f1f8e9; --bg2: #dcedc8; --surface: rgba(255,255,255,0.75);
--nav: rgba(220,237,200,0.85); --text: #1b4332; --text2: #52b788;
--hot: #52b788; --deep: #40916c; --gold: #ffc300;
--blue: #b7e4c7; --card: rgba(255,255,255,0.9);
--border: rgba(82,183,136,0.25); --glow: rgba(64,145,108,0.3);
}
[data-theme="y2k"] {
--bg: #fff0fb; --bg2: #ffe4f7; --surface: rgba(255,255,255,0.7);
--nav: rgba(255,200,240,0.85); --text: #3d0066; --text2: #cc00cc;
--hot: #ff00cc; --deep: #cc0099; --gold: #ffdd00;
--blue: #00ddff; --card: rgba(255,255,255,0.88);
--border: rgba(255,0,204,0.2); --glow: rgba(204,0,153,0.35);
}
[data-theme="academia"] {
--bg: #f5efe6; --bg2: #e8dfd2; --surface: rgba(255,250,245,0.8);
--nav: rgba(215,200,185,0.85); --text: #2c1a0e; --text2: #7c5c3e;
--hot: #c0392b; --deep: #922b21; --gold: #d4ac0d;
--blue: #85929e; --card: rgba(255,250,245,0.92);
--border: rgba(192,57,43,0.2); --glow: rgba(146,43,33,0.25);
}
[data-theme="neon"] {
--bg: #000; --bg2: #0a0a0a; --surface: rgba(20,20,20,0.85);
--nav: rgba(10,10,10,0.9); --text: #00ff9f; --text2: #ff00ff;
--hot: #ff00ff; --deep: #cc00ff; --gold: #ffff00;
--blue: #00ffff; --card: rgba(15,15,15,0.88);
--border: rgba(255,0,255,0.25); --glow: rgba(0,255,255,0.35);
}
[data-theme="cherry"] {
--bg: #fff0ee; --bg2: #fde0de; --surface: rgba(255,255,255,0.75);
--nav: rgba(255,210,205,0.85); --text: #7f1d1d; --text2: #b91c1c;
--hot: #ef4444; --deep: #dc2626; --gold: #f59e0b;
--blue: #fca5a5; --card: rgba(255,255,255,0.9);
--border: rgba(239,68,68,0.2); --glow: rgba(220,38,38,0.3);
}
[data-theme="lavender"] {
--bg: #f5f0ff; --bg2: #ede4ff; --surface: rgba(255,255,255,0.75);
--nav: rgba(235,220,255,0.85); --text: #3b1f6e; --text2: #7c3aed;
--hot: #9333ea; --deep: #7c3aed; --gold: #fbbf24;
--blue: #c4b5fd; --card: rgba(255,255,255,0.9);
--border: rgba(147,51,234,0.2); --glow: rgba(124,58,237,0.3);
}
[data-theme="sunset"] {
--bg: #fff4e8; --bg2: #ffe2c7; --surface: rgba(255,255,255,0.78);
--nav: rgba(255,220,180,0.85); --text: #7c2d12; --text2: #c2410c;
--hot: #f97316; --deep: #ea580c; --gold: #fbbf24;
--blue: #fdba74; --card: rgba(255,255,255,0.92);
--border: rgba(249,115,22,0.22); --glow: rgba(234,88,12,0.32);
}
[data-theme="retro80s"] {
--bg: #1a0033; --bg2: #2d0066; --surface: rgba(45,0,102,0.75);
--nav: rgba(20,0,50,0.9); --text: #ffe4f7; --text2: #00e5ff;
--hot: #ff1493; --deep: #c71585; --gold: #ffd700;
--blue: #00e5ff; --card: rgba(45,0,102,0.85);
--border: rgba(255,20,147,0.28); --glow: rgba(0,229,255,0.38);
}
[data-theme="kawaii"] {
--bg: #fff8fc; --bg2: #ffe9f4; --surface: rgba(255,255,255,0.85);
--nav: rgba(255,225,240,0.88); --text: #c2185b; --text2: #f06292;
--hot: #ff80ab; --deep: #ec407a; --gold: #ffd54f;
--blue: #b3e5fc; --card: rgba(255,255,255,0.95);
--border: rgba(255,128,171,0.25); --glow: rgba(240,98,146,0.28);
}
[data-theme="gothic"] {
--bg: #08010a; --bg2: #14041a; --surface: rgba(30,5,40,0.85);
--nav: rgba(10,2,15,0.92); --text: #e8d4e8; --text2: #b08bb0;
--hot: #b91c1c; --deep: #7f1d1d; --gold: #c0c0c0;
--blue: #6b21a8; --card: rgba(25,5,35,0.9);
--border: rgba(185,28,28,0.3); --glow: rgba(127,29,29,0.4);
}
[data-theme="royal"] {
--bg: #0a0e27; --bg2: #131a3e; --surface: rgba(20,28,60,0.82);
--nav: rgba(10,14,40,0.92); --text: #fef3c7; --text2: #d4af37;
--hot: #d4af37; --deep: #b8860b; --gold: #ffd700;
--blue: #1e3a8a; --card: rgba(20,28,60,0.88);
--border: rgba(212,175,55,0.3); --glow: rgba(184,134,11,0.35);
}
[data-theme="bubblegum"] {
--bg: #fff0fa; --bg2: #ffe0f5; --surface: rgba(255,255,255,0.8);
--nav: rgba(255,215,240,0.85); --text: #6b21a8; --text2: #db2777;
--hot: #ec4899; --deep: #db2777; --gold: #fde047;
--blue: #67e8f9; --card: rgba(255,255,255,0.92);
--border: rgba(236,72,153,0.22); --glow: rgba(219,39,119,0.3);
}
[data-theme="vaporwave"] {
--bg: #1a0a2e; --bg2: #2d1b4e; --surface: rgba(45,27,78,0.8);
--nav: rgba(25,10,45,0.9); --text: #ffd6f5; --text2: #00f0ff;
--hot: #ff71ce; --deep: #b967ff; --gold: #fffb96;
--blue: #01cdfe; --card: rgba(45,27,78,0.88);
--border: rgba(255,113,206,0.28); --glow: rgba(1,205,254,0.35);
}
[data-theme="mint"] {
--bg: #f0fdf4; --bg2: #dcfce7; --surface: rgba(255,255,255,0.8);
--nav: rgba(220,252,231,0.85); --text: #14532d; --text2: #16a34a;
--hot: #10b981; --deep: #059669; --gold: #facc15;
--blue: #a7f3d0; --card: rgba(255,255,255,0.92);
--border: rgba(16,185,129,0.22); --glow: rgba(5,150,105,0.28);
}
[data-theme="monochrome"] {
--bg: #fafafa; --bg2: #ebebeb; --surface: rgba(255,255,255,0.85);
--nav: rgba(245,245,245,0.9); --text: #0a0a0a; --text2: #525252;
--hot: #d6336c; --deep: #a61e4d; --gold: #525252;
--blue: #737373; --card: rgba(255,255,255,0.95);
--border: rgba(10,10,10,0.18); --glow: rgba(214,51,108,0.25);
}
[data-theme="fairycore"] {
--bg: #f3eafa; --bg2: #e6d6f0; --surface: rgba(255,255,255,0.78);
--nav: rgba(230,214,240,0.88); --text: #3a1758; --text2: #7b4f9f;
--hot: #b388eb; --deep: #8b5cf6; --gold: #ddb892;
--blue: #95d5b2; --card: rgba(255,255,255,0.92);
--border: rgba(179,136,235,0.25); --glow: rgba(139,92,246,0.3);
}
[data-theme="cyberpunk"] {
--bg: #0a0f1e; --bg2: #161e36; --surface: rgba(20,28,55,0.85);
--nav: rgba(10,15,30,0.92); --text: #ffe156; --text2: #00ffff;
--hot: #ff6b1a; --deep: #cc4400; --gold: #ffe156;
--blue: #00ffff; --card: rgba(20,28,55,0.9);
--border: rgba(255,107,26,0.3); --glow: rgba(0,255,255,0.38);
}
[data-theme="rosegold"] {
--bg: #fef3ef; --bg2: #fde4dc; --surface: rgba(255,255,255,0.82);
--nav: rgba(255,225,215,0.88); --text: #6b2d1f; --text2: #b76e79;
--hot: #c08081; --deep: #9b5963; --gold: #b76e79;
--blue: #f4cccc; --card: rgba(255,255,255,0.93);
--border: rgba(183,110,121,0.25); --glow: rgba(192,128,129,0.3);
}
/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
transition: background 0.5s, color 0.5s;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body::before {
content: '';
position: fixed; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(247,37,133,0.12) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 80%, rgba(76,201,240,0.10) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(249,199,79,0.06) 0%, transparent 60%);
pointer-events: none;
}
::selection { background: var(--hot); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--hot); border-radius: 6px; }
a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,.display { font-family: var(--font-display); }
[hidden] { display: none !important; }
/* Skip-to-content link (accessibility) */
.skip-link {
position: absolute; top: -100%; left: 1rem;
background: var(--hot); color: #fff;
padding: 0.5rem 1.25rem; border-radius: 0 0 1rem 1rem;
font-weight: 700; font-size: 0.9rem; z-index: 99999;
transition: top 0.2s;
}
.skip-link:focus { top: 0; }
/* Focus-visible accessibility ring */
:focus-visible {
outline: 2.5px solid var(--hot);
outline-offset: 3px;
border-radius: 6px;
}
/* Reduced-motion: disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Print: hide decorative and nav elements */
@media print {
.gc-nav, #toast-container, #confetti-container, #star-bg,
.modal-overlay, .btn, .hamburger { display: none !important; }
body { background: #fff !important; color: #000 !important; }
}
/* Custom KBD element (game keyboard hints) */
kbd {
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg2); border: 1.5px solid var(--border);
border-radius: 6px; padding: 0.15rem 0.45rem;
font-family: 'DM Sans', monospace; font-size: 0.78rem; font-weight: 700;
color: var(--text2); box-shadow: 0 2px 0 var(--border);
white-space: nowrap;
}
/* --- NAV --- */
.gc-nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 2rem;
height: 68px;
background: var(--nav);
backdrop-filter: blur(20px) saturate(1.6);
-webkit-backdrop-filter: blur(20px) saturate(1.6);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 24px var(--glow);
transition: background var(--transition), box-shadow var(--transition);
gap: 1rem;
will-change: transform;
}
.gc-nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.5rem; font-style: italic; font-weight: 900;
color: var(--hot); letter-spacing: -0.02em;
cursor: pointer; white-space: nowrap;
text-shadow: 0 0 20px var(--glow);
transition: transform 0.2s;
}
.gc-nav-logo:hover { transform: scale(1.05); }
.gc-nav-links {
display: flex; gap: 0.25rem; list-style: none; align-items: center;
}
.gc-nav-links a {
display: flex; align-items: center; gap: 0.35rem;
padding: 0.45rem 1rem; border-radius: 999px;
font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.9rem;
color: var(--text2); transition: all 0.2s;
white-space: nowrap;
}
.gc-nav-links a:hover, .gc-nav-links a.active {
background: var(--hot); color: #fff;
box-shadow: 0 2px 12px var(--glow);
}
.gc-nav-right { display: flex; align-items: center; gap: 0.75rem; }
.wallet-pill {
display: flex; align-items: center; gap: 0.5rem;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 999px; padding: 0.4rem 1rem;
font-weight: 700; font-size: 1rem; color: var(--text);
backdrop-filter: blur(10px);
box-shadow: 0 2px 12px var(--glow);
transition: transform 0.2s;
}
.wallet-pill:hover { transform: scale(1.04); }
.wallet-pill .coin-icon { font-size: 1.2rem; animation: coinFloat 2s ease-in-out infinite; }
@keyframes coinFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-4px) rotate(10deg)} }
/* --- NAV AVATAR + XP PILL (auto-injected by engine.js) --- */
.nav-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: var(--surface); border: 2px solid var(--gold);
display: flex; align-items: center; justify-content: center;
overflow: hidden; box-shadow: 0 2px 12px var(--glow);
transition: transform .2s; flex-shrink: 0;
}
.nav-avatar:hover { transform: scale(1.06); }
.nav-avatar img { width: 100%; height: 100%; display: block; }
.nav-avatar .ph { font-size: 1.1rem; }
.xp-pill {
display: flex; align-items: center; gap: .5rem;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 999px; padding: .3rem .8rem;
font-weight: 700; font-size: .85rem; color: var(--text);
backdrop-filter: blur(10px); box-shadow: 0 2px 12px var(--glow);
}
.xp-pill .lv-tag {
display: inline-flex; align-items: center; gap: .2rem;
color: var(--gold); font-weight: 800; font-size: .78rem;
padding: .1rem .45rem; border-radius: 999px;
background: rgba(249,199,79,.15);
border: 1px solid rgba(249,199,79,.5);
}
.xp-pill .xp-mini {
width: 70px; height: 6px; background: var(--bg2);
border-radius: 3px; overflow: hidden;
}
.xp-pill .xp-mini-fill {
height: 100%;
background: linear-gradient(90deg, var(--hot), var(--gold));
transition: width .35s;
}
@media (max-width: 700px) { .xp-pill .xp-mini { display: none; } }
@media (max-width: 480px) {
.xp-pill { padding: .25rem .55rem; font-size: .75rem; }
.nav-avatar { width: 32px; height: 32px; }
}
/* --- HAMBURGER (mobile) --- */
.hamburger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--hot); border-radius: 2px; transition: all 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.gc-nav { padding: 0 1rem; }
.gc-nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--nav); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 1rem; }
.gc-nav-links.open { display: flex; }
.gc-nav-links a { padding: 0.75rem 1rem; border-radius: 1rem; justify-content: center; }
}
@media (max-width: 480px) {
.gc-nav-logo { font-size: 1.2rem; }
.wallet-pill { padding: 0.35rem 0.7rem; font-size: 0.88rem; }
.page-wrapper { padding: 1.25rem 1rem 3rem; }
}
/* --- CARDS --- */
.gc-card {
background: var(--card);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
backdrop-filter: blur(12px);
box-shadow: var(--shadow);
transition: transform 0.25s, box-shadow 0.25s;
}
.gc-card { transition: transform var(--transition), box-shadow var(--transition); }
.gc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px var(--glow); }
/* --- BUTTONS --- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--font-body); font-weight: 700; font-size: 1rem;
padding: 0.7rem 1.75rem; border-radius: 999px;
border: none; cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition);
position: relative; overflow: hidden;
letter-spacing: 0.01em;
-webkit-tap-highlight-color: transparent;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.15); opacity:0; transition:opacity 0.15s; }
.btn:hover::after { opacity:1; }
.btn:active { transform: scale(0.95) !important; }
.btn-primary { background: var(--hot); color: #fff; box-shadow: 0 4px 20px var(--glow); }
.btn-primary:hover { box-shadow: 0 6px 28px var(--glow); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #1a0a00; box-shadow: 0 4px 16px rgba(249,199,79,0.4); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(249,199,79,0.5); }
.btn-ghost { background: var(--surface); border: 1.5px solid var(--border); color: var(--text2); }
.btn-ghost:hover { background: var(--hot); color: #fff; border-color: var(--hot); }
.btn-danger { background: #ef4444; color: #fff; box-shadow: 0 4px 16px rgba(239,68,68,0.3); }
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(239,68,68,0.45); }
.btn-lg { padding: 0.9rem 2.5rem; font-size: 1.1rem; }
.btn-sm { padding: 0.45rem 1.1rem; font-size: 0.85rem; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* --- PAGE WRAPPER --- */
.page-wrapper { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900; font-style: italic;
color: var(--hot); margin-bottom: 0.5rem;
text-shadow: 0 0 40px var(--glow);
}
.page-subtitle { color: var(--text2); font-weight: 500; font-size: 1.1rem; margin-bottom: 2.5rem; }
/* --- TOAST --- */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; max-width: calc(100vw - 3rem); }
.toast {
background: var(--card);
border: 1px solid var(--border);
border-left: 4px solid var(--hot);
padding: 0.85rem 1.5rem; border-radius: 1rem;
font-weight: 700; color: var(--text); font-size: 0.95rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
animation: toastIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards,
toastOut 0.3s ease 2.7s forwards;
backdrop-filter: blur(12px);
max-width: 340px;
word-break: break-word;
}
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
/* --- FLOATING COINS --- */
.float-coin {
position: fixed; font-size: 1.4rem; font-weight: 900; pointer-events: none;
z-index: 9998; animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp { to { transform: translateY(-90px) scale(1.4); opacity: 0; } }
/* --- MODAL --- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px); z-index: 99999;
display: none; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
background: var(--card); border: 2px solid var(--border);
border-radius: 2rem; padding: 2.5rem; max-width: 420px; width: 90%;
box-shadow: 0 24px 80px var(--glow);
animation: modalPop 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
backdrop-filter: blur(16px);
text-align: center;
}
@keyframes modalPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-title { font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--hot); margin-bottom:0.75rem; }
.modal-text { color: var(--text2); font-size: 1rem; margin-bottom: 1.75rem; line-height: 1.6; }
/* Wallet coin pulse animation */
@keyframes coinPulse { 0%,100%{transform:scale(1)} 40%{transform:scale(1.08)} 70%{transform:scale(0.97)} }
.coin-pulse { animation: coinPulse 0.5s ease; }
/* --- CONFETTI --- */
#confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 9997; overflow: hidden; }
.confetti-p { position: absolute; width: 8px; height: 16px; top: -20px; border-radius: 2px; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg) scale(0.5); opacity: 0; } }
/* --- STAR BG --- */
.star-bg { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.star { position: absolute; pointer-events: none; animation: twinkle var(--dur) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity:0.05; transform:scale(0.7) rotate(0deg); } to { opacity:0.5; transform:scale(1.2) rotate(20deg); } }
/* --- UTILS --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.text-center { text-align: center; }
.grid { display: grid; }
.font-bold { font-weight: 700; }
.full-w { width: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.text-hot { color: var(--hot); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--text2); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Tag/genre label */
.tag {
display: inline-flex; align-items: center;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 999px; padding: 0.15rem 0.6rem;
font-size: 0.72rem; font-weight: 600; color: var(--text2);
letter-spacing: 0.03em; white-space: nowrap;
}
/* Glass pill */
.glass-pill {
display: inline-flex; align-items: center; gap: 0.4rem;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 999px; padding: 0.35rem 0.9rem;
backdrop-filter: blur(10px);
font-size: 0.85rem; font-weight: 600; color: var(--text);
box-shadow: var(--shadow);
}
/* Section heading with decorative line */
.section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 900; color: var(--hot);
margin-bottom: 0.4rem;
display: flex; align-items: center; gap: 0.6rem;
}
.section-title::after {
content: '';
flex: 1; height: 2px;
background: linear-gradient(90deg, var(--border), transparent);
border-radius: 2px;
}
/* Gradient text utility */
.gradient-text {
background: linear-gradient(135deg, var(--hot), var(--deep) 50%, var(--blue));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
/* Skeleton loading placeholder */
.skeleton {
background: linear-gradient(90deg, var(--bg2) 25%, var(--surface) 50%, var(--bg2) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 0.5rem;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Divider */
.divider {
border: none; border-top: 1.5px solid var(--border);
margin: 1.5rem 0;
}
/* Badge earned glow */
.badge-pill.earned, .badge-pill:not(.locked) {
box-shadow: 0 0 0 1.5px var(--gold), var(--shadow);
border-color: var(--gold);
}
/* Theme cycle button in nav */
.gc-theme-btn {
min-width: 40px; padding: 0.4rem 0.65rem;
font-size: 1rem; line-height: 1;
}
/* Input range (volume slider) */
input[type='range'] {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px;
background: var(--bg2); border-radius: 3px;
outline: none; cursor: pointer;
border: 1.5px solid var(--border);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: var(--hot); cursor: pointer;
box-shadow: 0 2px 8px var(--glow);
transition: transform 0.15s;
}
input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type='range']::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: var(--hot); cursor: pointer; border: none;
box-shadow: 0 2px 8px var(--glow);
}
.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.pop { animation: pop 0.35s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes pop { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }
.float-anim { animation: floatAnim 3s ease-in-out infinite; }
@keyframes floatAnim { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.pulse-glow { animation: pulseGlow 2s infinite alternate; }
@keyframes pulseGlow { from{filter:drop-shadow(0 0 4px var(--hot))} to{filter:drop-shadow(0 0 18px var(--gold))} }
.spin-slow { animation: spin 6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
/* ══════════════════════════════════════════════════════════════
GIRLYCLUB — AESTHETIC ENHANCEMENT LAYER v2
Gradients · Animations · Utilities · Interactions
══════════════════════════════════════════════════════════════ */
/* ── 1. Gradient tokens ── */
:root {
--grad-hot: linear-gradient(135deg, var(--hot) 0%, var(--deep) 100%);
--grad-gold: linear-gradient(135deg, var(--gold) 0%, #f97316 100%);
--grad-cool: linear-gradient(135deg, var(--blue) 0%, var(--mint) 100%);
--grad-purple: linear-gradient(135deg, var(--purple) 0%, var(--hot) 100%);
--grad-rainbow: linear-gradient(135deg, var(--hot) 0%, var(--purple) 33%, var(--blue) 66%, var(--mint) 100%);
--grad-sunset: linear-gradient(135deg, #f9c74f 0%, var(--hot) 50%, var(--purple) 100%);
--blur-sm: blur(8px);
--blur-md: blur(16px);
--blur-lg: blur(28px);
}
/* ── 2. Gradient text utilities ── */
.gradient-text-hot {
background: var(--grad-hot);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-text-gold {
background: var(--grad-gold);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-text-rainbow {
background: var(--grad-rainbow); background-size: 200% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
animation: gradShift 4s linear infinite;
}
@keyframes gradShift { to { background-position: 200% center; } }
/* ── 3. Additional keyframes ── */
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.06); }
70% { transform: scale(0.96); }
100%{ transform: scale(1); opacity: 1; }
}
@keyframes slideUpFade {
from { transform: translateY(22px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInLeft {
from { transform: translateX(-24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes popIn {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.08); }
100%{ transform: scale(1); opacity: 1; }
}
@keyframes flashBorder {
0%,100% { border-color: var(--border); }
50% { border-color: var(--hot); box-shadow: 0 0 12px var(--glow); }
}
@keyframes gradBorder {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes pulseHot {
0%,100% { box-shadow: 0 0 0 0 rgba(247,37,133,.5); }
50% { box-shadow: 0 0 0 10px rgba(247,37,133,0); }
}
@keyframes dotPulse {
0%,100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.7); opacity: .4; }
}
@keyframes sparkle {
0%,100% { transform: scale(.7) rotate(0deg); opacity: .4; }
50% { transform: scale(1.3) rotate(30deg); opacity: 1; }
}
@keyframes shimmerSlide {
0% { left: -100%; }
100% { left: 120%; }
}
@keyframes btnShine {
from { left: -100%; }
to { left: 120%; }
}
@keyframes gradProg {
0% { background-position: 0% center; }
100%{ background-position: 200% center; }
}
@keyframes rippleWave { to { transform: scale(4); opacity: 0; } }
/* ── 4. Animation utility classes ── */
.anim-bounce-in { animation: bounceIn .6s cubic-bezier(.175,.885,.32,1.275) both; }
.anim-slide-up { animation: slideUpFade .5s ease both; }
.anim-slide-left{ animation: slideInLeft .4s ease both; }
.anim-fade-in { animation: fadeIn .5s ease both; }
.anim-float { animation: floatAnim 3s ease-in-out infinite; }
.anim-pop { animation: popIn .4s cubic-bezier(.175,.885,.32,1.275) both; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; } .delay-6 { animation-delay: .6s; }
/* ── 5. Gradient border card ── */
.gc-card-gb {
position: relative;
background: var(--card); border-radius: var(--radius);
backdrop-filter: blur(14px); box-shadow: var(--shadow); padding: 2rem;
}
.gc-card-gb::before {
content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 1.5px;
background: linear-gradient(135deg, var(--hot), var(--purple), var(--blue));
background-size: 200% 200%; animation: gradBorder 4s ease infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .5; pointer-events: none; transition: opacity var(--transition);
}
.gc-card-gb:hover::before { opacity: 1; }
/* ── 6. Button enhancements ── */
.btn-gradient {
background: var(--grad-hot); color: #fff;
box-shadow: 0 4px 20px var(--glow); overflow: hidden;
}
.btn-gradient:hover { box-shadow: 0 8px 30px var(--glow); transform: translateY(-2px); }
.btn-gradient::before {
content: ''; position: absolute;
top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
transform: skewX(-20deg); transition: left .5s ease;
}
.btn-gradient:hover::before { left: 120%; }
.btn-outline-hot { background: transparent; border: 2px solid var(--hot); color: var(--hot); }
.btn-outline-hot:hover { background: var(--hot); color: #fff; box-shadow: 0 4px 20px var(--glow); }
.btn-outline-gold { background: transparent; border: 2px solid var(--gold); color: #92400e; }
.btn-outline-gold:hover { background: var(--gold); color: #1a0a00; }
/* Button shimmer — applies to any .btn on hover */
.btn::before {
content: ''; position: absolute;
top: 0; left: -100%; width: 55%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
transform: skewX(-18deg); pointer-events: none;
}
.btn:hover::before { animation: btnShine .55s ease forwards; }
/* Ripple wave on click */
.ripple-wave {
position: absolute; border-radius: 50%;
background: rgba(255,255,255,.35); transform: scale(0);
animation: rippleWave .6s linear; pointer-events: none;
}
/* ── 7. Glow utilities ── */
.glow-hot { text-shadow: 0 0 10px var(--glow), 0 0 28px var(--glow); color: var(--hot); }
.glow-gold { text-shadow: 0 0 8px rgba(249,199,79,.6), 0 0 22px rgba(249,199,79,.4); color: var(--gold); }
.glow-card { box-shadow: 0 0 0 2px var(--border), 0 10px 40px var(--glow) !important; }
.pulse-hot { animation: pulseHot 2.5s ease-in-out infinite; }
.dot-live {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #22c55e; box-shadow: 0 0 8px #22c55e;
animation: dotPulse 1.8s ease-in-out infinite;
}
/* ── 8. Card top accent borders ── */
.accent-hot { border-top: 3px solid var(--hot) !important; }
.accent-gold { border-top: 3px solid var(--gold) !important; }
.accent-blue { border-top: 3px solid var(--blue) !important; }
.accent-purple { border-top: 3px solid var(--purple) !important; }
.accent-mint { border-top: 3px solid var(--mint) !important; }
/* ── 9. Gradient progress bar ── */
.progress-hot {
background: linear-gradient(90deg, var(--hot), var(--purple), var(--blue));
background-size: 200% auto; animation: gradProg 3s linear infinite;
}
/* ── 10. Frosted glass section ── */
.frosted-section {
background: var(--surface); backdrop-filter: var(--blur-md);
-webkit-backdrop-filter: var(--blur-md);
border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem;
}
/* ── 11. Fancy divider ── */
.divider-fancy {
height: 1.5px; border: none; border-radius: 2px; margin: 2rem 0;
background: linear-gradient(90deg, transparent, var(--hot) 30%, var(--purple) 70%, transparent);
opacity: .45;
}
/* ── 12. Sparkle corners ── */
.sparkle-corner { position: relative; }
.sparkle-corner::before, .sparkle-corner::after {
content: '✦'; position: absolute; color: var(--gold); font-size: .65rem;
animation: sparkle 2.5s ease-in-out infinite alternate; pointer-events: none;
}
.sparkle-corner::before { top: -6px; right: -6px; animation-delay: 0s; }
.sparkle-corner::after { bottom: -6px; left: -6px; animation-delay: 1.2s; }
/* ── 13. Colored tag variants ── */
.tag-hot { background: rgba(247,37,133,.1); color: var(--hot); border-color: rgba(247,37,133,.25); }
.tag-gold { background: rgba(249,199,79,.14); color: #92400e; border-color: rgba(249,199,79,.4); }
.tag-blue { background: rgba(76,201,240,.12); color: #0369a1; border-color: rgba(76,201,240,.3); }
.tag-purple { background: rgba(114,9,183,.1); color: var(--purple); border-color: rgba(114,9,183,.25); }
.tag-mint { background: rgba(128,255,219,.15);color: #134e4a; border-color: rgba(128,255,219,.4); }
/* ── 14. Dot-grid background pattern ── */
.dot-grid {
background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
background-size: 24px 24px;
}
/* ── 15. Highlight chip ── */
.highlight-chip {
display: inline-flex; align-items: center; gap: .3rem;
background: rgba(247,37,133,.1); border: 1px solid rgba(247,37,133,.25);
color: var(--hot); border-radius: 999px; padding: .2rem .7rem;
font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.highlight-chip-gold {
background: rgba(249,199,79,.14); border-color: rgba(249,199,79,.4); color: #92400e;
}
/* ── 16. Gradient card backgrounds ── */
.card-bg-hot { background: linear-gradient(135deg, rgba(247,37,133,.08), rgba(181,23,158,.05)) !important; }
.card-bg-gold { background: linear-gradient(135deg, rgba(249,199,79,.1), rgba(249,115,22,.06)) !important; }
.card-bg-blue { background: linear-gradient(135deg, rgba(76,201,240,.08), rgba(128,255,219,.05)) !important; }
.card-bg-purple{ background: linear-gradient(135deg, rgba(114,9,183,.08), rgba(247,37,133,.05)) !important; }
/* ── 17. Enhanced nav active state ── */
.gc-nav-links a.active {
background: var(--grad-hot); color: #fff !important;
box-shadow: 0 2px 14px var(--glow);
}
/* ── 18. Enhanced card hover ── */
.gc-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px var(--glow);
}
/* ── 19. Enhanced wallet pill ── */
.wallet-pill {
background: linear-gradient(135deg, rgba(249,199,79,.15), rgba(247,37,133,.08));
border-color: rgba(249,199,79,.35);
}
/* ── 20. Enhanced modal ── */
.modal-box {
background: linear-gradient(145deg, var(--card), rgba(255,255,255,.95));
border: 2px solid var(--border);
}
/* ── 21. Selection/text highlight ── */
::selection { background: var(--hot); color: #fff; }
/* ── 22. Enhanced scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--hot), var(--purple)); border-radius: 6px; }
/* ── 23. Enhanced nav logo ── */
.gc-nav-logo {
background: var(--grad-hot);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
filter: none; text-shadow: none;
}
/* ── 24. Toast accent gradient ── */
.toast { border-left: 4px solid var(--hot); }
.toast.gold { border-left-color: var(--gold); }
/* ── 25. Page wrapper fade-in ── */
.page-wrapper { animation: fadeIn .45s ease both; }
/* ── 26. Input focus glow ── */
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--hot) !important;
box-shadow: 0 0 0 3px rgba(247,37,133,.18) !important;
}
/* ── 27. Section title gradient underline ── */
.section-title {
position: relative; display: inline-flex;
}
.section-title::before {
content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px;
background: var(--grad-hot); border-radius: 2px; opacity: .6;
}
/* ── 28. Badge glow for earned ── */
.badge-pill:not(.locked) {
box-shadow: 0 0 0 1.5px var(--gold), 0 4px 16px rgba(249,199,79,.2) !important;
}
/* ── 29. Body gradient upgrade ── */
body::before {
background:
radial-gradient(ellipse 70% 55% at 15% 10%, rgba(247,37,133,.16) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 85% 75%, rgba(76,201,240,.12) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 95%, rgba(249,199,79,.09) 0%, transparent 55%),
radial-gradient(ellipse 45% 35% at 90% 10%, rgba(114,9,183,.1) 0%, transparent 55%);
}
/* ── 30. Enhanced .btn-primary ── */
.btn-primary {
background: var(--grad-hot);
box-shadow: 0 4px 20px var(--glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover {
box-shadow: 0 8px 32px var(--glow), inset 0 1px 0 rgba(255,255,255,.2);
transform: translateY(-2px);
}
.btn-gold {
background: var(--grad-gold);
box-shadow: 0 4px 18px rgba(249,199,79,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
/* ── Ripple JS support ── */
@keyframes rippleFade { to { transform: scale(5); opacity: 0; } }
.gc-ripple {
position: absolute; border-radius: 50%;
background: rgba(255,255,255,.28); pointer-events: none;
transform: scale(0); animation: rippleFade .65s ease-out forwards;
}
/* ═══════════════════════════════════════════════════════════════════════════
POLISH LAYER v2 — 100 site-wide visual improvements
═══════════════════════════════════════════════════════════════════════════ */
/* 1 — Smoother default font rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* 2 — Consistent rounded image media */
img, video, canvas, svg { max-width: 100%; }
img:not(.no-round) { border-radius: .8rem; }
/* 3 — Selection: dual-tone */
::selection { background: linear-gradient(135deg, var(--hot), var(--deep)); color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
::-moz-selection { background: var(--hot); color:#fff; }
/* 4 — Prettier scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--hot), var(--deep));
border-radius: 999px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--hot)); }
* { scrollbar-color: var(--hot) transparent; scrollbar-width: thin; }
/* 5 — Caret color */
input, textarea, [contenteditable] { caret-color: var(--hot); }
/* 6 — Universal focus ring (accessible + on-brand) */
:focus-visible {
outline: 2px solid var(--hot);
outline-offset: 3px;
border-radius: 6px;
}
/* 7 — Buttons: micro-press */
.btn { transition: transform .15s ease, box-shadow .25s ease, filter .2s ease; }
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.96); }
/* 8 — Buttons: subtle inner highlight on hover */
.btn:hover { filter: brightness(1.05) saturate(1.05); }
/* 9 — Disabled buttons */
.btn[disabled], .btn:disabled { opacity:.55; cursor:not-allowed; filter:grayscale(.35); transform:none !important; }
/* 10 — Link hover everywhere */
a { transition: color .2s, opacity .2s; }
a:hover { opacity: .9; }
/* 11 — Card lift */
.card, .stat-card, .badge-card, .theme-card, .earn-tile, .explore-tile, .lifetime-card, .scores-card, .goals-card, .explore-card, .vibe-card, .badges-section, .hero, .modal-box {
transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover, .stat-card:hover { box-shadow: 0 16px 44px rgba(247,37,133,.22); }
/* 12 — Section reveal on load */
@keyframes gcFadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
main > section, main > div > section { animation: gcFadeUp .55s ease both; }
main > section:nth-child(2) { animation-delay: .05s; }
main > section:nth-child(3) { animation-delay: .10s; }
main > section:nth-child(4) { animation-delay: .15s; }
main > section:nth-child(5) { animation-delay: .20s; }
main > section:nth-child(6) { animation-delay: .25s; }
main > section:nth-child(7) { animation-delay: .30s; }
main > section:nth-child(8) { animation-delay: .35s; }
main > section:nth-child(9) { animation-delay: .40s; }
/* 13 — Heading kerning */
h1, h2, h3 { letter-spacing: -0.01em; }
/* 14 — Drop caps on hero h1 inside .hero */
.hero h1::first-letter { text-shadow: 0 4px 22px rgba(247,37,133,.45); }
/* 15 — Subtle paragraph leading */
p { line-height: 1.65; }
/* 16 — Nice numerals */
.gc-coin-display, .stat-value, .fact-num, [class*="lt-"], .et-meta, .hourly-chain {
font-variant-numeric: tabular-nums;
}
/* 17 — Nav glass elevation on scroll-ish state */
.gc-nav, nav.gc-nav, .navbar {
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0 4px 24px rgba(247,37,133,.08), 0 1px 0 rgba(247,37,133,.12) inset;
}
/* 18 — Nav item underline grow */
.gc-nav a, .nav a, .navbar a { position: relative; }
.gc-nav a::after, .nav a::after, .navbar a::after {
content:''; position:absolute; left:50%; bottom:-4px; width:0; height:2px;
background: linear-gradient(90deg, var(--gold), var(--hot));
border-radius: 2px; transform: translateX(-50%);
transition: width .25s ease;
}
.gc-nav a:hover::after, .nav a:hover::after, .gc-nav a.active::after { width: 70%; }
/* 19 — Pretty form inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: .65rem 1rem;
color: var(--text);
font: inherit;
transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, textarea:focus, select:focus {
border-color: var(--hot);
box-shadow: 0 0 0 4px rgba(247,37,133,.18);
background: var(--card);
outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text2); opacity: .7; }
/* 20 — Range slider */
input[type="range"] {
-webkit-appearance: none; appearance: none;
height: 6px; border-radius: 999px;
background: linear-gradient(90deg, var(--hot), var(--gold));
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 2px solid var(--hot);
box-shadow: 0 2px 10px rgba(247,37,133,.45);
cursor: pointer; transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 2px solid var(--hot);
box-shadow: 0 2px 10px rgba(247,37,133,.45);
}
/* 21 — Checkbox/radio */
input[type="checkbox"], input[type="radio"] { accent-color: var(--hot); width: 1.1em; height: 1.1em; }
/* 22 — Code/kbd polish */
code, kbd, samp {
background: var(--bg2); padding: 0.12em 0.45em; border-radius: 6px;
border: 1px solid var(--border); font-size: .9em;
}
/* 23 — HR pretty divider */
hr {
border: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--border) 20%, var(--hot) 50%, var(--border) 80%, transparent);
margin: 2rem 0;
}
/* 24 — Detail/summary */
details {
background: var(--bg2); border:1.5px solid var(--border);
border-radius: 14px; padding: .6rem 1rem; margin: .6rem 0;
transition: border-color .2s;
}
details[open] { border-color: rgba(247,37,133,.4); }
summary { cursor: pointer; font-weight: 700; color: var(--hot); }
/* 25 — Tooltip via [title] (uses native, but add cursor) */
[title]:not([title=""]) { cursor: help; }
/* 26 — Image hover zoom */
.zoomable, .theme-card img, .badge-card img {
transition: transform .35s ease;
}
.zoomable:hover, .theme-card:hover img, .badge-card:hover img { transform: scale(1.04); }
/* 27 — Gradient text helper */
.gc-grad-text {
background: linear-gradient(135deg, var(--hot), var(--deep), var(--blue));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 28 — Pretty list bullets */
ul:not([class]) { padding-left: 1.2rem; }
ul:not([class]) li::marker { color: var(--hot); content: '✦ '; }
/* 29 — Numbered list polish */
ol:not([class]) { counter-reset: glist; padding-left: 0; list-style: none; }
ol:not([class]) li {
counter-increment: glist; position: relative; padding-left: 2.2rem; margin-bottom: .5rem;
}
ol:not([class]) li::before {
content: counter(glist);
position: absolute; left: 0; top: 0;
width: 1.6rem; height: 1.6rem; border-radius: 50%;
background: var(--grad-hot); color: #fff;
font-weight: 800; font-size: .85rem;
display: inline-flex; align-items: center; justify-content: center;
}
/* 30 — Tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; background: var(--card); border: 1.5px solid var(--border); }
th, td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--bg2); font-weight: 800; color: var(--hot); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(247,37,133,.06); }
/* 31 — Pretty blockquotes */
blockquote {
border-left: 4px solid var(--hot); padding: .8rem 1.2rem;
background: var(--bg2); border-radius: 0 14px 14px 0;
font-style: italic; color: var(--text2); margin: 1rem 0;
}
/* 32 — Toast polish */
.gc-toast, .toast {
border-radius: 999px;
backdrop-filter: blur(20px);
box-shadow: 0 12px 36px rgba(247,37,133,.3), inset 0 1px 0 rgba(255,255,255,.25);
border: 1.5px solid rgba(255,255,255,.2);
animation: gcToastIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gcToastIn { from { opacity:0; transform: translateY(20px) scale(.85); } to { opacity:1; transform:none; } }
/* 33 — Coin float upgrade */
.gc-coin-float {
font-weight: 900;
text-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 12px var(--gold);
filter: drop-shadow(0 4px 8px rgba(249,199,79,.6));
}
/* 34 — Wallet pill shimmer */
.wallet-pill { position: relative; overflow: hidden; }
.wallet-pill::after {
content:''; position:absolute; inset:0;
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
transform: translateX(-100%); transition: transform .8s;
}
.wallet-pill:hover::after { transform: translateX(100%); }
/* 35 — XP bar inner glow */
.gc-xp-bar, .xp-mini > div, .goal-fill, .et-fill {
position: relative; overflow: hidden;
}
.gc-xp-bar::after, .goal-fill::after, .et-fill::after {
content:''; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
animation: gcShimmer 2.6s infinite;
}
@keyframes gcShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* 36 — Subtle starry sparkle bg dots on cards */
.stat-card, .earn-tile, .explore-tile, .badge-card {
background-image:
radial-gradient(circle at 90% 8%, rgba(255,255,255,.5) 0, transparent 2px),
radial-gradient(circle at 12% 85%, rgba(255,255,255,.35) 0, transparent 1.5px);
background-repeat: no-repeat;
}
/* 37 — Badge tile bounce */
.badge-card { transition: transform .25s, filter .25s; }
.badge-card:hover { transform: translateY(-4px) rotate(-2deg); }
.badge-card.locked { filter: grayscale(1) opacity(.55); }
.badge-card.locked:hover { filter: grayscale(.7) opacity(.8); }
/* 38 — Theme card preview chip */
.theme-card { position: relative; }
.theme-card::before {
content:''; position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:50%;
background: var(--gold); box-shadow: 0 0 10px var(--gold);
opacity: 0; transition: opacity .3s;
}
.theme-card.active::before { opacity: 1; }
/* 39 — Section titles get a leading accent dot */
.section-title { position: relative; }
/* 40 — Smoother modal backdrop */
.modal-overlay {
background: radial-gradient(ellipse at center, rgba(247,37,133,.18), rgba(20,8,30,.65));
backdrop-filter: blur(8px);
transition: opacity .25s;
}
/* 41 — Modal box arrival */
@keyframes gcModalIn { from { opacity:0; transform: scale(.92) translateY(20px); } to { opacity:1; transform:none; } }
.modal-overlay.open .modal-box { animation: gcModalIn .35s cubic-bezier(.34,1.56,.64,1); }
/* 42 — Pretty close-button (× chips) */
.modal-close, .close-x, [data-close], button.close {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg2); border:1.5px solid var(--border);
display: inline-flex; align-items:center; justify-content:center;
cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.modal-close:hover, .close-x:hover, button.close:hover {
background: var(--hot); color:#fff; transform: rotate(90deg) scale(1.05);
}
/* 43 — Image fallback */
img { background: var(--bg2); }
/* 44 — Anchor jump offset (sticky nav friendly) */
:target { scroll-margin-top: 80px; }
/* 45 — Smooth scrolling */
html { scroll-behavior: smooth; }
/* 46 — Subtle noise overlay (very faint) */
body::after {
content:''; position: fixed; inset:0; pointer-events:none; z-index: 0;
opacity: .035; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* 47 — Headings glow when hovered (inside cards) */
.card h2:hover, .card h3:hover, .earn-tile .et-name:hover {
text-shadow: 0 0 16px rgba(247,37,133,.55);
}
/* 48 — Pretty .pill helper */
.pill {
display: inline-flex; align-items:center; gap:.4rem;
background: var(--bg2); border:1.5px solid var(--border);
border-radius: 999px; padding: .3rem .85rem; font-size:.78rem; font-weight: 800;
}
.pill.hot { background: var(--grad-hot); color:#fff; border-color: transparent; }
.pill.gold { background: var(--grad-gold); color:#231900; border-color: transparent; }
/* 49 — Loader spinner */
.gc-spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 3px solid rgba(247,37,133,.2);
border-top-color: var(--hot);
animation: gcSpin .8s linear infinite;
display: inline-block;
}
@keyframes gcSpin { to { transform: rotate(360deg); } }
/* 50 — Skeleton shimmer */
.skeleton {
background: linear-gradient(90deg, var(--bg2) 25%, rgba(247,37,133,.15) 50%, var(--bg2) 75%);
background-size: 200% 100%;
animation: gcSkeleton 1.4s infinite;
border-radius: 8px;
}
@keyframes gcSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* 51 — Subtle column rhythm */
main, .page-wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); }
/* 52 — Footer polish */
footer {
background: linear-gradient(180deg, transparent, rgba(247,37,133,.06));
border-top: 1.5px solid var(--border);
padding: 2.5rem 1.5rem 3rem;
text-align: center;
color: var(--text2);
margin-top: 4rem;
}
footer a { color: var(--hot); font-weight: 700; }
/* 53 — Section sub spacing */
.section-sub { margin-bottom: 1.25rem; }
/* 54 — Card consistent radius */
.card { border-radius: 1.75rem; }
/* 55 — Tighten emoji vertical alignment */
[role="img"], .emoji { vertical-align: -.05em; }
/* 56 — Iconography sizing */
.btn .icon, .btn svg { width: 1.05em; height: 1.05em; }
/* 57 — Avatar nav circle hover */
.nav-avatar { transition: transform .25s, box-shadow .25s; }
.nav-avatar:hover { transform: scale(1.08) rotate(-3deg); box-shadow: 0 6px 20px rgba(247,37,133,.4); }
/* 58 — XP pill polish */
.xp-pill { background: var(--bg2); border:1.5px solid var(--border); }
.xp-pill .lv-tag {
background: var(--grad-hot); color:#fff; padding: .15rem .55rem; border-radius: 999px;
font-weight: 900; font-size: .72rem; letter-spacing: .02em;
}
/* 59 — Coin pulse glow */
@keyframes gcCoinPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(249,199,79,0); }
35% { box-shadow: 0 0 0 8px rgba(249,199,79,.35); }
}
.wallet-pill.coin-pulse { animation: gcCoinPulse .9s ease; }
/* 60 — Page transition */
body { transition: opacity .35s ease; }
/* 61 — Hide elements gracefully */
[hidden], .gc-hidden { display: none !important; }
/* 62 — Avatar style preview shadow */
.avatar-img, .pack-card img {
box-shadow: 0 8px 24px rgba(247,37,133,.25), 0 0 0 4px rgba(255,255,255,.6);
}
/* 63 — Pack card lift */
.pack-card {
transition: transform .25s, box-shadow .3s, border-color .25s;
}
.pack-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(247,37,133,.22); }
.pack-card.owned { border-color: var(--gold); }
.pack-card.owned::before {
content: '✓ Owned'; position: absolute; top: 8px; left: 8px;
background: var(--grad-gold); color:#231900;
padding: .2rem .65rem; border-radius: 999px;
font-weight: 900; font-size: .7rem; letter-spacing: .04em;
}
/* 64 — Hero bow gentle pulse */
@keyframes gcBowPulse {
0%,100% { filter: drop-shadow(0 18px 40px rgba(247,37,133,.45)); }
50% { filter: drop-shadow(0 22px 56px rgba(247,37,133,.65)); }
}
.hero-bow { animation: gcBowPulse 4s ease-in-out infinite, floatAnim 5s ease-in-out infinite; }
/* 65 — Stat icon bounce on hover */
.stat-card:hover .stat-icon { animation: gcBounceY .55s ease; }
@keyframes gcBounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* 66 — Page wrapper bottom spacing */
.page-wrapper { padding-bottom: 4rem; }
/* 67 — Hero CTA buttons size up */
.hero-ctas .btn { padding: .85rem 1.6rem; font-size: 1rem; }
/* 68 — Glass card variant helper */
.card.glass {
background: rgba(255,255,255,.55);
backdrop-filter: blur(20px) saturate(1.3);
border: 1.5px solid rgba(255,255,255,.6);
}
[data-theme="midnight"] .card.glass,
[data-theme="galaxy"] .card.glass,
[data-theme="neon"] .card.glass,
[data-theme="academia"] .card.glass,
[data-theme="retro80s"] .card.glass,
[data-theme="gothic"] .card.glass,
[data-theme="royal"] .card.glass,
[data-theme="vaporwave"] .card.glass,
[data-theme="cyberpunk"] .card.glass {
background: rgba(40,20,55,.55);
border-color: rgba(255,255,255,.12);
}
/* 69 — Subtle border glow */
.glow-on-hover { transition: box-shadow .3s; }
.glow-on-hover:hover { box-shadow: 0 0 0 2px var(--hot), 0 12px 36px rgba(247,37,133,.35); }
/* 70 — Progress bar generic */
.progress-bar {
background: rgba(247,37,133,.12); border-radius: 999px; height: 10px; overflow: hidden;
}
.progress-bar > .fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--gold), var(--hot));
transition: width .4s ease;
}
/* 71 — Quiz/Trivia answer button */
.quiz-option, .answer-btn, .trivia-option {
display: block; width: 100%; text-align: left;
background: var(--bg2); border:1.5px solid var(--border);
border-radius: 14px; padding: .85rem 1.1rem; margin-bottom: .55rem;
font: inherit; color: var(--text); cursor: pointer;
transition: transform .15s, border-color .2s, background .2s, color .2s;
}
.quiz-option:hover, .answer-btn:hover, .trivia-option:hover {
border-color: var(--hot); background: var(--card); transform: translateX(4px);
}
.quiz-option.correct, .answer-btn.correct, .trivia-option.correct {
background: linear-gradient(135deg, #b5f5c8, #4ade80); color:#1a3d20; border-color:#22c55e;
}
.quiz-option.wrong, .answer-btn.wrong, .trivia-option.wrong {
background: linear-gradient(135deg, #ffd2dc, #ff6b9a); color:#5a0a25; border-color:#ef4444;
animation: gcShake .35s;
}
@keyframes gcShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* 72 — Arcade game tile */
.game-tile, .arcade-tile {
transition: transform .25s, box-shadow .3s;
border-radius: 1.5rem;
}
.game-tile:hover, .arcade-tile:hover {
transform: translateY(-5px) rotate(-1deg);
box-shadow: 0 18px 44px rgba(247,37,133,.25);
}
/* 73 — Radio vinyl glow */
#vinyl, .vinyl {
box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 0 0 4px rgba(255,255,255,.08);
}
/* 74 — Live dot pulse */
.live-dot, #live-dot {
animation: gcLivePulse 1.6s ease-in-out infinite;
}
@keyframes gcLivePulse {
0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); opacity:1; }
50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); opacity:.8; }
}
/* 75 — Improved color contrast on hot text */
.text-hot { color: var(--hot); }
.text-gold { color: var(--gold); }
/* 76 — Hover lift on links inside cards */
.card a:not(.btn), section a:not(.btn) { font-weight: 700; }
/* 77 — Subtle floating animation utility */
.floaty { animation: floatAnim 4.5s ease-in-out infinite; }
/* 78 — Pulse glow utility */
.pulse-glow { animation: gcPulseGlow 2.4s ease-in-out infinite; }
@keyframes gcPulseGlow {
0%,100% { filter: drop-shadow(0 0 6px rgba(247,37,133,.4)); }
50% { filter: drop-shadow(0 0 18px rgba(247,37,133,.75)); }
}
/* 79 — Better card spacing on mobile */
@media (max-width: 600px) {
.card, .earn-tile, .stat-card, .explore-tile { padding: 1rem 1.1rem; }
.hero { padding: 3rem 1.25rem; }
h1 { font-size: clamp(2.4rem, 9vw, 4rem); }
}
/* 80 — Tap-target sizing on mobile */
@media (max-width: 600px) {
.btn { min-height: 44px; }
a, button { min-height: 36px; }
}
/* 81 — Print-friendly */
@media print {
body::before, body::after, .gc-nav, footer, .modal-overlay, .gc-toast { display:none !important; }
body { background: #fff; color: #000; }
.card, section { box-shadow: none; border-color: #ccc; }
}
/* 82 — Reduced motion compliance */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* 83 — High contrast outline boost */
@media (prefers-contrast: more) {
:focus-visible { outline-width: 3px; outline-offset: 4px; }
.btn { border: 2px solid currentColor; }
}
/* 84 — Selection ring for keyboard nav on tiles */
.explore-tile:focus-visible, .pack-card:focus-visible, .earn-tile:focus-visible, .badge-card:focus-visible {
outline: 3px solid var(--hot); outline-offset: 4px;
}
/* 85 — Subtle inner ring for cards */
.hero, .earn-card, .goals-card, .explore-card, .scores-card, .lifetime-card, .vibe-card, .badges-section {
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.5);
}
/* 86 — Hero eyebrow shine */
.hero-eyebrow { position: relative; overflow: hidden; }
.hero-eyebrow::after {
content:''; position:absolute; inset:0;
background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
transform: translateX(-100%);
animation: gcShimmer 4.5s 1s infinite;
}
/* 87 — Fact pill hover */
.fact-pill { transition: transform .25s, box-shadow .25s; }
.fact-pill:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgba(247,37,133,.25); }
/* 88 — Goal row done state polish */
.goal-row.done { background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(249,199,79,.12)); border-color: rgba(34,197,94,.45); }
.goal-row.done .goal-title { color: #16a34a; }
.goal-row.done .goal-reward { background: var(--grad-gold); color:#231900; padding:.2rem .65rem; border-radius:999px; font-weight:900; }
/* 89 — Explore tile arrow */
.explore-tile { position: relative; }
.explore-tile::after {
content: '→'; position: absolute; right: 1rem; bottom: 1rem;
color: var(--hot); font-weight: 900; font-size: 1.2rem;
opacity: 0; transform: translateX(-6px); transition: all .25s;
}
.explore-tile:hover::after { opacity: 1; transform: translateX(0); }
/* 90 — Scores list ranks colored */
.scores-list li:nth-child(1) { color: var(--gold); font-weight: 900; }
.scores-list li:nth-child(2) { color: #cbd5e1; font-weight: 800; }
.scores-list li:nth-child(3) { color: #cd853f; font-weight: 800; }
.scores-list li {
display: flex; justify-content: space-between; padding: .55rem .85rem;
border-bottom: 1px dashed var(--border);
}
.scores-list li:last-child { border-bottom: 0; }
/* 91 — Lifetime list row */
.lifetime-list { list-style: none; padding: 0; margin: 0; }
.lifetime-list li {
display: flex; justify-content: space-between; align-items: center;
padding: .65rem .25rem; border-bottom: 1px dashed var(--border);
}
.lifetime-list li:last-child { border-bottom: 0; }
.lifetime-list strong { font-family: 'Playfair Display', serif; color: var(--hot); font-size: 1.1rem; }
/* 92 — Daily tip card hover */
#daily-tip-section > div { transition: transform .25s, box-shadow .3s; }
#daily-tip-section > div:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(247,37,133,.2); }
/* 93 — Vibe button extra polish */
#btn-vibe { box-shadow: 0 8px 28px rgba(249,199,79,.5), 0 0 0 2px rgba(247,37,133,.2) inset; }
#btn-vibe:hover { box-shadow: 0 14px 40px rgba(249,199,79,.65), 0 0 0 2px rgba(247,37,133,.3) inset; }
/* 94 — Subtle border-radius continuity */
section, .card, nav, footer, .modal-box { border-radius: max(1.25rem, var(--radius, 1.5rem)); }
/* 95 — Pretty highlight */
mark { background: linear-gradient(120deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent); color: inherit; padding: 0 .15em; border-radius: 4px; }
/* 96 — Improved