/* ═══════════════════════════════════════════════════════════════════ HABITERA — Cinematic OS Theme (v5.0) Design language: cyberpunk RPG HUD · synthwave horizon · matte glass Hierarchy: matte canvases → soft surfaces → highlighted HUD elements ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Audiowide&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ───────────────────────────────────────────────────────────── TOKENS — DARK ───────────────────────────────────────────────────────────── */ :root, html[data-theme="dark"] { /* Neon palette (hue-aligned, not random) */ --neon-magenta: #ff2bd6; --neon-pink: #ec4899; --neon-violet: #a855f7; --neon-purple: #7c3aed; --neon-blue: #3b82f6; --neon-cyan: #22d3ee; --neon-teal: #2dd4bf; --neon-green: #34d399; --neon-yellow: #fbbf24; --neon-amber: #f59e0b; --neon-red: #ef4444; /* Selectable theme accents + backdrop (overridden per body[data-theme]) */ --neon-primary: #a855f7; --neon-secondary: #ec4899; /* RGB channels of the two accents — let hardcoded rgba() values follow the active theme via rgba(var(--neon-primary-rgb), ). Set inline on by applyThemeTokens(); these defaults match purple/pink. */ --neon-primary-rgb: 168, 85, 247; --neon-secondary-rgb: 236, 72, 153; /* Dark surface hue (panels/sidebar/topbar/titlebar). applyThemeTokens() tints this toward the active theme in dark mode so the whole UI follows. */ --surf-rgb: 20, 12, 40; --theme-bg: url("./assets/default-bg.jpg"); --surface-overlay: rgba(4, 2, 12, 0.45); /* Rarity tiers */ --rare-common: #94a3b8; --rare-rare: #22d3ee; --rare-epic: #a855f7; --rare-legendary: #fbbf24; --rare-mythic: #ff2bd6; /* Backgrounds — deep matte graphite */ --bg-0: #04020c; --bg-1: #07041a; --bg-2: #0c0723; --bg-3: #11092c; --bg-4: #170c38; /* Surfaces (matte, with discreet glass on hover) — bumped opacity for legibility */ --surface-0: rgba(12, 8, 28, 0.95); --surface-1: rgba(20, 12, 40, 0.96); --surface-2: rgba(30, 18, 56, 0.93); --glass-1: rgba(255, 255, 255, 0.025); --glass-2: rgba(255, 255, 255, 0.045); --glass-3: rgba(255, 255, 255, 0.075); --glass-hover:rgba(var(--neon-primary-rgb), 0.085); /* Borders (very restrained) */ --line-faint: rgba(255, 255, 255, 0.045); --line-soft: rgba(var(--neon-primary-rgb), 0.16); --line-mid: rgba(var(--neon-primary-rgb), 0.30); --line-hot: rgba(var(--neon-secondary-rgb), 0.40); --line-cool: rgba(var(--neon-primary-rgb), 0.30); /* Text */ --t-1: #f3effc; --t-2: #b8a8e0; --t-3: #6b5d8a; --t-4: #392e58; /* Glows — primary (use ONLY for XP / achievements / active CTA / unlock) */ --glow-primary: 0 0 22px rgba(var(--neon-secondary-rgb), 0.55), 0 0 60px rgba(var(--neon-primary-rgb), 0.30); --glow-secondary: 0 0 18px rgba(var(--neon-primary-rgb), 0.35); --glow-soft: 0 0 12px rgba(var(--neon-primary-rgb), 0.18); /* Card shadows — depth layering, not glow */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.50); --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 40px rgba(0,0,0,0.60); --shadow-3: 0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 60px rgba(0,0,0,0.70); /* Fonts */ --f-display: 'Exo 2', 'Rajdhani', system-ui, sans-serif; --f-body: 'Rajdhani', 'Exo 2', system-ui, sans-serif; --f-arcade: 'Orbitron', 'Audiowide', sans-serif; --f-mono: 'JetBrains Mono', monospace; /* Radii */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* Motion */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --tr-fast: 0.18s var(--ease-smooth); --tr-mid: 0.28s var(--ease-smooth); --tr-slow: 0.5s var(--ease-smooth); --titlebar-h: 36px; /* Grid background */ --grid-h: rgba(var(--neon-primary-rgb), 0.075); --grid-v: rgba(var(--neon-secondary-rgb), 0.055); /* Page gradient (subtle, not a rave) */ --page-bg: radial-gradient(900px 600px at 8% 0%, rgba(var(--neon-primary-rgb), 0.13), transparent 55%), radial-gradient(800px 600px at 92% 100%, rgba(var(--neon-secondary-rgb), 0.10), transparent 55%), radial-gradient(700px 500px at 50% 110%, rgba(var(--neon-primary-rgb), 0.07), transparent 55%), linear-gradient(180deg, #04020c 0%, #07041a 100%); } /* ───────────────────────────────────────────────────────────── TOKENS — LIGHT (premium futuristic light, still HUD-feeling) ───────────────────────────────────────────────────────────── */ html[data-theme="light"] { --bg-0: #f5f1ff; --bg-1: #ece4fc; --bg-2: #ddd1f5; --surface-0: rgba(255,255,255,0.62); --surface-1: rgba(255,255,255,0.78); --surface-2: rgba(255,255,255,0.55); --glass-1: rgba(124, 58, 237, 0.04); --glass-2: rgba(124, 58, 237, 0.07); --glass-3: rgba(124, 58, 237, 0.12); --glass-hover: rgba(124, 58, 237, 0.10); --line-faint: rgba(40, 20, 80, 0.10); --line-soft: rgba(124, 58, 237, 0.22); --line-mid: rgba(124, 58, 237, 0.36); --t-1: #170a3d; --t-2: #5a3da3; --t-3: #8a76c4; --t-4: #b9a9d9; --shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 18px rgba(40,20,80,0.10); --shadow-2: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 30px rgba(40,20,80,0.14); --shadow-3: 0 1px 0 rgba(255,255,255,0.6) inset, 0 22px 50px rgba(40,20,80,0.18); --grid-h: rgba(124, 58, 237, 0.10); --grid-v: rgba(var(--neon-secondary-rgb), 0.08); --page-bg: radial-gradient(900px 600px at 8% 0%, rgba(var(--neon-primary-rgb), 0.22), transparent 55%), radial-gradient(800px 600px at 92% 100%, rgba(var(--neon-secondary-rgb), 0.18), transparent 55%), linear-gradient(180deg, #faf5ff 0%, #ece4fc 100%); } /* ───────────────────────────────────────────────────────────── RESETS ───────────────────────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html, body { width:100%; min-height:100vh; } body { font-family: var(--f-display); background: #04020c; color: var(--t-1); font-size: 14px; line-height: 1.45; font-weight: 500; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; padding-top: var(--titlebar-h); } /* Optional user-supplied wallpaper sits BEHIND #bg overlays */ body.has-bg-image::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--custom-bg, none); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } /* When user wallpaper is active, dim the SVG scene's structural layers so the photo is the hero and we keep only cinematic enhancement layers */ body.has-bg-image #bg .sky, body.has-bg-image #bg .floor-bg, body.has-bg-image #bg .mountains, body.has-bg-image #bg .sun, body.has-bg-image #bg .city, body.has-bg-image #bg .horizon-line, body.has-bg-image #bg .floor { display: none; } body.has-bg-image #bg .scrim { background: rgba(4, 2, 12, 0.30); } body.has-bg-image #bg .vignette { background: radial-gradient(ellipse at center, transparent 38%, rgba(4, 2, 12, 0.55) 88%, rgba(0,0,0,0.78) 100%); } /* ───────────────────────────────────────────────────────────── SELECTABLE BACKGROUND THEMES (8 presets) Each theme overrides ONLY what changes: the two accent tokens, the body background image, and the readability overlay. Every other token stays intact. data-theme lives on so it never collides with the dark/light colour scheme on [data-theme]. ───────────────────────────────────────────────────────────── */ body[data-theme="default"] { --neon-primary:#a855f7; --neon-secondary:#ec4899; --theme-bg:url("./assets/default-bg.jpg"); --surface-overlay:rgba(4, 2, 12, 0.45); } body[data-theme="midnight"] { --neon-primary:#9B30FF; --neon-secondary:#FF6B1A; --theme-bg:url("./assets/midnight-bg.png"); --surface-overlay:rgba(13, 13, 20, 0.55); } body[data-theme="frost"] { --neon-primary:#A8D8EA; --neon-secondary:#F0F8FF; --theme-bg:url("./assets/frost-bg.png"); --surface-overlay:rgba(18, 28, 42, 0.45); } body[data-theme="apocalyptic"] { --neon-primary:#39FF14; --neon-secondary:#CCFF00; --theme-bg:url("./assets/apocalyptic-bg.png"); --surface-overlay:rgba(5, 10, 5, 0.55); } body[data-theme="neon-sakura"] { --neon-primary:#FF2D78; --neon-secondary:#FF00AA; --theme-bg:url("./assets/neon-sakura-bg.png"); --surface-overlay:rgba(13, 13, 18, 0.52); } body[data-theme="ghost"] { --neon-primary:#1E90FF; --neon-secondary:#E8F0F7; --theme-bg:url("./assets/ghost-bg.png"); --surface-overlay:rgba(8, 12, 18, 0.55); } body[data-theme="crimson"] { --neon-primary:#C0182A; --neon-secondary:#F5E6C8; --theme-bg:url("./assets/crimson-bg.png"); --surface-overlay:rgba(44, 24, 16, 0.50); } body[data-theme="fallen-dynasty"] { --neon-primary:#D4A017; --neon-secondary:#4A5E2F; --theme-bg:url("./assets/fallen-dynasty-bg.png"); --surface-overlay:rgba(26, 18, 9, 0.52); } /* The selected theme image becomes the page backdrop. Panels keep their own surface/glass opacity, so content stays readable on top. */ body.has-theme-bg { background-image: var(--theme-bg); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } /* Theme art is the hero: hide the structural synthwave layers, then reuse the cinematic scrim (driven by --surface-overlay) + vignette for legibility. */ body.has-theme-bg #bg .sky, body.has-theme-bg #bg .floor-bg, body.has-theme-bg #bg .mountains, body.has-theme-bg #bg .sun, body.has-theme-bg #bg .city, body.has-theme-bg #bg .horizon-line, body.has-theme-bg #bg .floor { display: none; } body.has-theme-bg #bg .scrim { background: var(--surface-overlay); } body.has-theme-bg #bg .vignette { background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.42) 90%, rgba(0,0,0,0.72) 100%); } /* A custom uploaded wallpaper (has-bg-image) always overrides a preset theme. */ body.has-bg-image.has-theme-bg { background-image: none; } body.has-bg-image.has-theme-bg #bg .scrim { background: rgba(4, 2, 12, 0.30); } /* Appearance → Background Theme picker cards */ .theme-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } .theme-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px; border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--line-faint); transition: transform var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast); } .theme-card:hover { transform: translateY(-2px); border-color: var(--line-mid); } .theme-card .tc-thumb { width: 40px; height: 40px; border-radius: var(--r-sm); background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); } .theme-card .tc-name { font-size: 11px; font-weight: 600; color: var(--t-2); text-align: center; line-height: 1.2; } .theme-card.active { border-color: var(--tc-primary, var(--neon-primary)); box-shadow: 0 0 0 1px var(--tc-primary, var(--neon-primary)), 0 0 16px var(--tc-secondary, var(--neon-secondary)); } .theme-card.active .tc-name { color: var(--t-1); } /* SVG ring gradients (LV ring, focus rings) follow the active theme */ #xpGrad stop:nth-of-type(1), #focusGrad stop:nth-of-type(1) { stop-color: var(--neon-secondary); } #xpGrad stop:nth-of-type(2), #focusGrad stop:nth-of-type(2) { stop-color: var(--neon-primary); } #xpGrad stop:nth-of-type(3), #focusGrad stop:nth-of-type(3) { stop-color: var(--neon-secondary); } /* Range sliders (energy, etc.) use the theme accent instead of browser blue */ input[type="range"] { accent-color: var(--neon-primary); } button, input, textarea, select { font-family: inherit; outline: none; border: none; color: inherit; background: transparent; } button { cursor: pointer; } a { color: var(--neon-cyan); text-decoration: none; } img { max-width: 100%; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-violet), var(--neon-pink)); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--neon-pink), var(--neon-cyan)); background-clip: padding-box; } /* ───────────────────────────────────────────────────────────── GLOBAL ICON STYLE ───────────────────────────────────────────────────────────── */ .ico { display:inline-block; vertical-align: -3px; flex-shrink:0; } .ico path, .ico polyline, .ico polygon, .ico line, .ico circle, .ico rect { vector-effect: non-scaling-stroke; } /* Logo mark wrapper */ .logo-mark { display:inline-flex; align-items:center; justify-content:center; filter: drop-shadow(0 0 6px rgba(var(--neon-secondary-rgb),0.45)) drop-shadow(0 0 18px rgba(var(--neon-primary-rgb),0.30)); } /* ───────────────────────────────────────────────────────────── LIVE BACKGROUND — Cinematic Synthwave Scene (matches reference) Layers: starfield → nebula → meteors → mountains → sun+city → horizon line → grid floor → floating cubes → VHS scrim ───────────────────────────────────────────────────────────── */ #bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* L1 — Sky gradient (deep purple → magenta toward horizon) */ #bg .sky { position:absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, #050019 0%, #0a0228 22%, #1a0440 50%, #3d0a5c 75%, #5e1080 100%); } #bg .sky::after { /* Nebula wash */ content:''; position:absolute; inset:0; background: radial-gradient(900px 300px at 18% 35%, rgba(120, 35, 200, 0.30), transparent 60%), radial-gradient(700px 280px at 82% 25%, rgba(220, 60, 180, 0.22), transparent 60%), radial-gradient(500px 200px at 50% 55%, rgba(255, 90, 200, 0.16), transparent 60%); filter: blur(8px); } /* Below-horizon panel (deeper magenta floor base) */ #bg .floor-bg { position:absolute; inset: 50% 0 0 0; background: linear-gradient(180deg, rgba(var(--neon-secondary-rgb), 0.4) 0%, #1a0330 35%, #0a0218 100%); } /* L1 — Starfield */ #bg .stars { position:absolute; inset: 0 0 50% 0; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 18%, #ffffff, transparent), radial-gradient(1px 1px at 24% 42%, #ffffff, transparent), radial-gradient(1.5px 1.5px at 38% 12%, #ffd1f7, transparent), radial-gradient(1px 1px at 50% 28%, #ffffff, transparent), radial-gradient(1px 1px at 65% 8%, #c9b8ff, transparent), radial-gradient(2px 2px at 78% 22%, #ffffff, transparent), radial-gradient(1.5px 1.5px at 88% 36%, #ffd1f7, transparent), radial-gradient(1px 1px at 6% 30%, #ffffff, transparent), radial-gradient(1px 1px at 30% 6%, #ffffff, transparent), radial-gradient(1px 1px at 44% 40%, #c9b8ff, transparent), radial-gradient(1.5px 1.5px at 58% 14%, #ffffff, transparent), radial-gradient(1px 1px at 72% 46%, #ffffff, transparent), radial-gradient(1px 1px at 92% 12%, #ffd1f7, transparent), radial-gradient(1.5px 1.5px at 18% 8%, #ffffff, transparent), radial-gradient(1px 1px at 35% 32%, #ffffff, transparent), radial-gradient(1px 1px at 81% 6%, #c9b8ff, transparent); animation: starTwinkle 5s ease-in-out infinite; } #bg .stars2 { position:absolute; inset: 0 0 50% 0; background-image: radial-gradient(1px 1px at 8% 22%, #ffffff, transparent), radial-gradient(1px 1px at 22% 8%, #ffffff, transparent), radial-gradient(1px 1px at 41% 38%, #c9b8ff, transparent), radial-gradient(1px 1px at 56% 6%, #ffffff, transparent), radial-gradient(1px 1px at 70% 32%, #ffd1f7, transparent), radial-gradient(1px 1px at 84% 18%, #ffffff, transparent), radial-gradient(1px 1px at 95% 30%, #c9b8ff, transparent); animation: starTwinkle 7s ease-in-out infinite reverse; opacity: 0.7; } @keyframes starTwinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.45; } } /* L2 — Falling meteors */ #bg .meteor { position:absolute; width: 140px; height: 2px; background: linear-gradient(90deg, transparent, #ffffff 30%, #ff5cc7 70%, transparent); filter: drop-shadow(0 0 6px rgba(var(--neon-secondary-rgb), 0.8)); transform: rotate(-25deg); opacity: 0; animation: meteorFall 9s linear infinite; } #bg .meteor.m1 { top: 8%; left: -10%; animation-delay: 0s; } #bg .meteor.m2 { top: 14%; left: -10%; animation-delay: 4.5s; width: 100px; } #bg .meteor.m3 { top: 22%; left: -10%; animation-delay: 7s; width: 160px; } @keyframes meteorFall { 0% { transform: translate(0, 0) rotate(-25deg); opacity: 0; } 4% { opacity: 1; } 18% { opacity: 1; } 25% { transform: translate(80vw, 38vh) rotate(-25deg); opacity: 0; } 100% { transform: translate(80vw, 38vh) rotate(-25deg); opacity: 0; } } /* L3 — Wireframe mountain ranges (inline SVG) */ #bg .mountains { position:absolute; left:0; right:0; top: calc(50% - 180px); height: 200px; pointer-events: none; } #bg .mountains svg { width: 100%; height: 100%; display:block; } /* Mountains use violet/cyan stroke gradient */ #bg .m-back { stroke: rgba(108, 60, 200, 0.65); stroke-width: 1.0; fill: rgba(60, 18, 110, 0.35); } #bg .m-mid { stroke: rgba(178, 90, 255, 0.85); stroke-width: 1.1; fill: rgba(80, 28, 140, 0.50); } #bg .m-front { stroke: rgba(var(--neon-primary-rgb), 0.95); stroke-width: 1.2; fill: rgba(50, 18, 90, 0.65); } #bg .m-line { stroke: rgba(var(--neon-primary-rgb), 0.45); stroke-width: 0.55; fill: none; } #bg .m-line2 { stroke: rgba(var(--neon-secondary-rgb), 0.35); stroke-width: 0.5; fill: none; } /* L3 — Retro segmented sun + city silhouette */ #bg .sun { position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; pointer-events: none; animation: sunBob 8s ease-in-out infinite; } #bg .sun .disc { position:absolute; inset:0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #ff7ed8 0%, #ec4899 30%, #ff2bd6 60%, #a855f7 88%, transparent 95%); box-shadow: 0 0 60px rgba(var(--neon-secondary-rgb), 0.50), 0 0 140px rgba(var(--neon-primary-rgb), 0.30); } #bg .sun .stripes { position:absolute; left:0; right:0; bottom:0; top:50%; background: repeating-linear-gradient( 180deg, rgba(10, 2, 24, 0) 0 14px, rgba(10, 2, 24, 0.92) 14px 18px ); border-radius: 0 0 50% 50%; } /* City silhouette in front of the sun */ #bg .city { position:absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); width: 360px; height: 110px; pointer-events: none; z-index: 1; } #bg .city svg { width: 100%; height: 100%; display:block; } #bg .city path { fill: #08001a; stroke: rgba(var(--neon-secondary-rgb), 0.4); stroke-width: 0.5; } @keyframes sunBob { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -52%) scale(1.02); } } /* L3 — Glowing horizon line w/ pulse */ #bg .horizon-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #ff2bd6 18%, #ff5cc7 50%, #ff2bd6 82%, transparent); box-shadow: 0 0 20px #ff2bd6, 0 0 50px rgba(var(--neon-secondary-rgb), 0.7); animation: horizonPulse 5s ease-in-out infinite; } @keyframes horizonPulse { 0%, 100% { box-shadow: 0 0 20px #ff2bd6, 0 0 50px rgba(var(--neon-secondary-rgb), 0.7); } 50% { box-shadow: 0 0 32px #ff2bd6, 0 0 70px rgba(var(--neon-secondary-rgb), 0.85); } } /* L4 — Perspective neon grid floor */ #bg .floor { position:absolute; left:50%; top:50%; width: 280%; height: 80%; transform-origin: center top; transform: translateX(-50%) perspective(900px) rotateX(58deg); background-image: linear-gradient(rgba(var(--neon-secondary-rgb), 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--neon-primary-rgb), 0.45) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); animation: floorScroll 4.5s linear infinite; opacity: 0.85; } /* Reflection of horizon line on grid */ #bg .floor::before { content:''; position:absolute; left:0; right:0; top:0; height: 6px; background: linear-gradient(90deg, transparent, rgba(var(--neon-secondary-rgb), 0.6) 40%, rgba(var(--neon-secondary-rgb), 0.6) 60%, transparent); filter: blur(6px); } @keyframes floorScroll { from { background-position-y: 0; } to { background-position-y: 64px; } } /* L2 — Floating geometric particles (cubes/diamonds/triangles) */ /* Floating geometric particles removed — they read as "random shapes/circles" and clutter the scene. The cinematic layers (stars, meteors, mountains, sun, grid) remain for a calm, professional backdrop. */ #bg .particles { display: none !important; } #bg .particle { position:absolute; filter: drop-shadow(0 0 6px rgba(var(--neon-secondary-rgb), 0.7)); opacity: 0.85; animation: floatY 14s ease-in-out infinite; } #bg .particle.cube { width: 18px; height: 18px; background: linear-gradient(135deg, #ff5cc7, #a855f7); transform: rotate(20deg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); border-radius: 2px; } #bg .particle.cube.sm { width: 12px; height: 12px; } #bg .particle.cube.lg { width: 22px; height: 22px; } #bg .particle.diamond { width: 14px; height: 14px; background: linear-gradient(135deg, #c084fc, #ff2bd6); transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } #bg .particle.tri { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid #ff2bd6; background: transparent; } #bg .particle.tri.cyan { border-bottom-color: #22d3ee; filter: drop-shadow(0 0 6px rgba(var(--neon-primary-rgb), 0.7)); } #bg .particle.dot { width: 4px; height: 4px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 6px #ffffff; } @keyframes floatY { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(180deg); } } /* L5 — VHS / overlay layer */ #bg .scan { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.020) 0 1px, transparent 1px 3px ); pointer-events: none; animation: scanShift 7s linear infinite; } @keyframes scanShift { from { background-position-y: 0; } to { background-position-y: 6px; } } #bg .glitch-line { position:absolute; left:0; right:0; height: 2px; background: rgba(var(--neon-secondary-rgb), 0.30); mix-blend-mode: screen; opacity: 0; animation: glitchSweep 9s ease-in-out infinite; } #bg .glitch-line.b { animation-delay: -4.5s; background: rgba(var(--neon-primary-rgb), 0.22); } @keyframes glitchSweep { 0%, 100% { top: -2px; opacity: 0; } 85% { top: -2px; opacity: 0; } 88% { top: 30%; opacity: 0.65; } 92% { top: 70%; opacity: 0.5; } 96% { top: 100%; opacity: 0; } } #bg .noise { position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; } #bg .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(4, 2, 12, 0.65) 80%, rgba(0,0,0,0.85) 100%); pointer-events: none; } /* Extra solid scrim so cards always have a calm matte backdrop */ #bg .scrim { position: absolute; inset: 0; background: rgba(4, 2, 12, 0.45); pointer-events: none; } /* ── PAGE-SPECIFIC ATMOSPHERE TWEAKS ──────────────────────── Each page sets data-page on
, this dims/colors the bg for that screen without breaking the global scene. */ .content[data-page="dashboard"] ~ #bg .scrim, body:has(#page-dashboard.active) #bg .scrim { background: rgba(4, 2, 12, 0.42); } body:has(#page-focus.active) #bg .scrim { background: rgba(2, 0, 8, 0.72); } /* darker for focus */ body:has(#page-focus.active) #bg .stars, body:has(#page-focus.active) #bg .stars2 { opacity: 0.45; } body:has(#page-focus.active) #bg .meteor { opacity: 0; } body:has(#page-journal.active) #bg .scrim { background: rgba(8, 2, 22, 0.55); } /* softer for journal */ body:has(#page-journal.active) #bg .glitch-line { display: none; } body:has(#page-analytics.active) #bg .scrim { background: rgba(4, 2, 12, 0.55); } /* slightly more contrast */ body:has(#page-achievements.active) #bg .horizon-line { animation-duration: 3s; } /* faster pulse - celebratory */ body:has(#page-achievements.active) #bg .scrim { background: rgba(4, 2, 12, 0.42); } @media (prefers-reduced-motion: reduce) { #bg .floor, #bg .sun, #bg .particle, #bg .scan, #bg .glitch-line, #bg .meteor, #bg .stars, #bg .stars2, #bg .horizon-line { animation: none !important; } } /* ───────────────────────────────────────────────────────────── TITLEBAR ───────────────────────────────────────────────────────────── */ .titlebar { position: fixed; top: 0; left: 0; right: 0; height: var(--titlebar-h); display: flex; align-items: center; justify-content: space-between; background: rgba(var(--surf-rgb), 0.75); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border-bottom: 1px solid var(--line-faint); z-index: 9500; -webkit-app-region: drag; user-select: none; padding: 0 8px 0 14px; } html[data-theme="light"] .titlebar { background: rgba(255,255,255,0.78); } .tb-left { display:flex; align-items:center; gap:10px; -webkit-app-region: no-drag; } .tb-name { font-family: var(--f-arcade); font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tb-actions { display:flex; -webkit-app-region: no-drag; height: 100%; } .tb-btn { width: 44px; height: 100%; display:flex; align-items:center; justify-content:center; background: transparent; color: var(--t-2); transition: var(--tr-fast); } .tb-btn:hover { background: var(--glass-hover); color: var(--t-1); } .tb-btn.close:hover { background: var(--neon-red); color: #fff; box-shadow: inset 0 0 18px rgba(239,68,68,0.5); } /* ───────────────────────────────────────────────────────────── LAYOUT ───────────────────────────────────────────────────────────── */ .app { position:relative; z-index:1; min-height: calc(100vh - var(--titlebar-h)); } /* ───────────────────────────────────────────────────────────── SIDEBAR — futuristic command rail ───────────────────────────────────────────────────────────── */ .sb { position: fixed; left: 0; top: var(--titlebar-h); bottom: 0; width: 66px; /* collapsed icon rail (each tab's logo in order) */ background: linear-gradient(180deg, rgba(var(--surf-rgb), 0.92), rgba(var(--surf-rgb), 0.80)); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border-right: 1px solid var(--line-faint); display: flex; flex-direction: column; padding: 12px 13px 14px; z-index: 200; box-shadow: 4px 0 30px rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; transition: width .26s var(--ease-smooth), box-shadow .26s ease; } .app.nav-expanded .sb { width: 240px; box-shadow: 10px 0 48px rgba(0, 0, 0, 0.55); } html[data-theme="light"] .sb { background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,240,255,0.78)); } /* Hamburger (3 lines → X when expanded) */ .sb-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; margin: 0 0 6px; background: none; border: 0; cursor: pointer; flex: 0 0 auto; -webkit-app-region: no-drag; } .sb-burger span { display: block; height: 2px; width: 22px; border-radius: 2px; background: var(--t-1); transition: transform .25s ease, opacity .2s ease; } .sb-burger:hover span { background: var(--neon-pink); } .app.nav-expanded .sb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .app.nav-expanded .sb-burger span:nth-child(2) { opacity: 0; } .app.nav-expanded .sb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Labels / section headers fade in only when expanded */ .sb-item > span:not(.ico), .sb-section { opacity: 0; transition: opacity .18s ease; } .app.nav-expanded .sb-item > span:not(.ico), .app.nav-expanded .sb-section { opacity: 1; } /* Dim scrim behind the expanded drawer */ .nav-scrim { position: fixed; inset: var(--titlebar-h) 0 0 0; z-index: 190; background: rgba(2, 1, 8, 0.5); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s ease; } .app.nav-expanded .nav-scrim { opacity: 1; visibility: visible; } .sb-brand { display:flex; align-items:center; justify-content:center; gap:12px; padding: 4px 0 16px; border-bottom: 1px solid var(--line-faint); margin-bottom: 14px; } .app.nav-expanded .sb-brand { justify-content:flex-start; padding: 4px 6px 16px; } /* Crisp app mark — rounded so the icon tile reads as an intentional badge */ .sb-logo { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 4px 16px rgba(var(--neon-secondary-rgb), 0.40); } .sb-brand .name { display: none; font-family: var(--f-arcade); font-size: 17px; font-weight: 800; letter-spacing: 4.5px; text-transform: uppercase; background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .app.nav-expanded .sb-brand .name { display: block; animation: fadeIn .25s ease both; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .sb-section { font-family: var(--f-arcade); font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-3); margin: 14px 12px 6px; font-weight: 700; } .sb-nav { display:flex; flex-direction:column; gap: 3px; } .sb-item { display:flex; align-items:center; gap: 12px; padding: 10px 12px; width: 100%; text-align: left; border-radius: var(--r-md); color: var(--t-2); font-weight: 600; font-size: 13.5px; letter-spacing: 0.4px; border: 1px solid transparent; position: relative; overflow: hidden; transition: var(--tr-mid); } .sb-item .ico { color: var(--t-2); transition: color var(--tr-mid), filter var(--tr-mid); } .sb-item:hover { background: var(--glass-hover); color: var(--t-1); border-color: var(--line-soft); transform: translateX(2px); } .sb-item:hover .ico { color: var(--neon-violet); filter: drop-shadow(0 0 6px rgba(var(--neon-primary-rgb),0.5)); } .sb-item.active { background: linear-gradient(100deg, rgba(var(--neon-primary-rgb), 0.20), rgba(var(--neon-secondary-rgb), 0.10)); border-color: rgba(var(--neon-primary-rgb), 0.40); color: var(--t-1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 20px rgba(var(--neon-primary-rgb), 0.18); } .sb-item.active::before { content:''; position:absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan)); box-shadow: 0 0 10px rgba(var(--neon-secondary-rgb), 0.7); animation: navPulse 3s ease-in-out infinite; } .sb-item.active .ico { color: var(--neon-pink); filter: drop-shadow(0 0 8px rgba(var(--neon-secondary-rgb),0.7)); } @keyframes navPulse { 0%,100% { opacity:0.85 } 50% { opacity:1 } } .sb-footer { margin-top: auto; } /* ───────────────────────────────────────────────────────────── TOPBAR (HUD) ───────────────────────────────────────────────────────────── */ .tp { position: fixed; top: var(--titlebar-h); left: 66px; right: 0; height: 60px; transition: left .26s var(--ease-smooth); background: rgba(var(--surf-rgb), 0.62); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-bottom: 1px solid var(--line-faint); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; z-index: 150; } html[data-theme="light"] .tp { background: rgba(255,255,255,0.68); } .tp-title { font-family: var(--f-arcade); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--t-1); display:flex; align-items:center; gap: 10px; } .tp-title::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); } .tp-right { display:flex; align-items:center; gap: 10px; } .hud { display:inline-flex; align-items:center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; background: rgba(var(--surf-rgb), 0.55); border: 1px solid var(--line-faint); color: var(--t-1); letter-spacing: 0.5px; transition: var(--tr-fast); } .hud .ico { color: currentColor; } .hud.xp { color: var(--neon-yellow); border-color: rgba(251, 191, 36, 0.30); box-shadow: 0 0 16px rgba(251,191,36,0.15); } .hud.streak { color: var(--neon-amber); border-color: rgba(245, 158, 11, 0.28); } .hud.level { color: var(--neon-cyan); border-color: rgba(var(--neon-primary-rgb), 0.32); } .hud.flash { animation: hudFlash 0.55s ease; } @keyframes hudFlash { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.13); box-shadow: 0 0 26px rgba(251,191,36,0.45); } } .hud-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--neon-violet), var(--neon-pink)); color: #fff; box-shadow: var(--glow-soft), inset 0 0 0 2px rgba(255,255,255,0.10); cursor: pointer; transition: var(--tr-fast); font-family: var(--f-arcade); font-weight: 800; font-size: 13px; letter-spacing: 1px; } .hud-avatar:hover { transform: scale(1.06); box-shadow: var(--glow-primary), inset 0 0 0 2px rgba(255,255,255,0.20); } /* ───────────────────────────────────────────────────────────── CONTENT ───────────────────────────────────────────────────────────── */ .content { margin-left: 66px; /* sits beside the collapsed rail; drawer overlays when expanded */ padding: 84px 28px 40px; min-height: calc(100vh - var(--titlebar-h)); position: relative; transition: margin-left .26s var(--ease-smooth); } .page { display: none; animation: pageIn 0.5s var(--ease-smooth); } .page.active { display: block; } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ───────────────────────────────────────────────────────────── PAGE HEADER ───────────────────────────────────────────────────────────── */ .page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 22px; gap: 18px; flex-wrap: wrap; } .page-title { font-family: var(--f-arcade); font-size: 28px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; background: linear-gradient(100deg, #fff 0%, var(--neon-pink) 50%, var(--neon-cyan) 100%); -webkit-background-clip:text; background-clip:text; color: transparent; text-shadow: 0 0 30px rgba(var(--neon-secondary-rgb), 0.18); margin-bottom: 6px; position: relative; } html[data-theme="light"] .page-title { background: linear-gradient(100deg, var(--neon-purple) 0%, var(--neon-pink) 100%); -webkit-background-clip:text; background-clip:text; color: transparent; } .page-sub { font-size: 12px; color: var(--t-2); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-family: var(--f-arcade); } /* Section title inside cards */ .section-title { font-family: var(--f-arcade); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--t-2); display:flex; align-items:center; gap: 8px; margin-bottom: 12px; } .section-title .ico { color: var(--neon-violet); } .section-title .dot { width:5px; height:5px; border-radius:50%; background: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan); } /* ───────────────────────────────────────────────────────────── CARDS — MATTE FIRST, glass on demand ───────────────────────────────────────────────────────────── */ .card { position: relative; background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); /* No backdrop-filter: panels are ~95% opaque, and a backdrop-filter here gets disabled mid page-switch animation, causing a translucent→dark flash. */ border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-2); transition: border-color var(--tr-mid), transform var(--tr-mid), box-shadow var(--tr-mid); } /* Subtle neon edge-glow accent on every card (visible on hover) */ .card::before { content:''; position:absolute; inset:-1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(var(--neon-secondary-rgb), 0.18), transparent 35%, transparent 65%, rgba(var(--neon-primary-rgb), 0.18)); opacity: 0; transition: opacity var(--tr-mid); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; } .card:hover::before { opacity: 1; } /* Diagonal shimmer sweep on hover */ .card::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(115deg, transparent 42%, rgba(var(--neon-secondary-rgb), 0.08) 50%, transparent 58%); transform: translateX(-100%); transition: transform 0.9s var(--ease-smooth); pointer-events: none; border-radius: inherit; } .card:hover::after { transform: translateX(100%); } /* Tasks & Habits pages: remove the left-to-right shimmer sweep on hover. Scoped with :not(.hud-frame) so corner-bracket ::after pseudos (which the .hud-frame rules own) are untouched — only the plain-card shimmer is killed. */ #page-tasks .card:not(.hud-frame)::after, #page-habits .card:not(.hud-frame)::after { content: none; } .card:hover { border-color: var(--line-soft); box-shadow: var(--shadow-3); } /* Featured cards (used for HERO, XP, Achievements unlock) */ .card.feature { border: 1px solid var(--line-soft); box-shadow: var(--shadow-3), 0 0 30px rgba(var(--neon-primary-rgb),0.10); } .card.feature::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background: linear-gradient(135deg, transparent 60%, rgba(var(--neon-secondary-rgb),0.06) 100%); } /* HUD frame — corner brackets like sci-fi readouts. NOTE: most cards are BOTH .card and .hud-frame. .card::before/::after own the edge-glow + shimmer (top:-50%; left:-50%; width:200%; border-radius:inherit), and an element has only one ::before / ::after each. Without the resets below these corner brackets inherit the shimmer's round border-radius (→ a circle) and the .card::after's top/left:-50% offset, turning a corner bracket into a stray "crescent" flung onto the neighbouring card. The !important resets pin the brackets to their own corners and strip the shimmer styling. */ .hud-frame { position: relative; } /* Corner brackets removed — the ::before/::after pseudos are disabled so no bracket (and no inherited card shimmer) renders on hud-frame cards. */ .hud-frame::before, .hud-frame::after { content: none !important; } /* ───────────────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: 0.6px; border-radius: var(--r-md); border: 1px solid var(--line-faint); background: var(--glass-1); color: var(--t-1); transition: transform var(--tr-fast), box-shadow var(--tr-mid), background var(--tr-fast), border-color var(--tr-fast); position: relative; overflow: hidden; user-select: none; } .btn:hover { transform: translateY(-1px); border-color: var(--line-soft); } /* Only plain/ghost buttons get the translucent hover fill. Gradient variants (primary/cyan/danger/arcade) keep their own solid background on hover — otherwise this rule outranks their base background and collapses them to a flat panel (looked broken/dark in pale themes like Frost). */ .btn:hover:not(.btn-primary):not(.btn-cyan):not(.btn-danger):not(.btn-arcade) { background: var(--glass-2); } .btn:active { transform: translateY(0) scale(0.98); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Past-day journal: selected mood button glows white instead of fading out */ #moodPickRow .mood-pick.btn-primary:disabled { opacity: 1 !important; background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.70) !important; color: #fff !important; box-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 22px rgba(255,255,255,0.25), inset 0 1px 0 rgba(255,255,255,0.35) !important; cursor: default; } .btn-primary { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(var(--neon-secondary-rgb), 0.40), 0 6px 18px rgba(var(--neon-primary-rgb), 0.30); } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 30px rgba(var(--neon-secondary-rgb), 0.60), 0 8px 24px rgba(var(--neon-primary-rgb), 0.40); } .btn-cyan { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue)); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), var(--glow-secondary); } .btn-ghost { background: var(--glass-1); border-color: var(--line-faint); color: var(--t-1); backdrop-filter: blur(14px); } .btn-ghost:hover { background: var(--glass-2); border-color: var(--line-soft); } .btn-danger { background: linear-gradient(135deg, var(--neon-red), #b91c1c); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(239,68,68,0.40); } .btn-success { background: linear-gradient(135deg, var(--neon-green), #047857); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(16,185,129,0.40); } .btn-sm { padding: 7px 12px; font-size: 12px; } .btn-xs { padding: 5px 10px; font-size: 11px; } .btn-icon { padding: 8px 10px; } .btn-block { width: 100%; } /* ── ARCADE / CONSOLE BUTTONS ────────────────────────────────── Tactile, depth-pressed, neon-rim buttons inspired by the reference D-pad / arcade controller. */ .btn-arcade { position: relative; padding: 12px 22px; background: linear-gradient(180deg, var(--bg-3), var(--bg-1)); color: #fff; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid rgba(var(--neon-secondary-rgb), 0.35); border-bottom: 3px solid rgba(var(--neon-secondary-rgb), 0.6); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(var(--neon-secondary-rgb), 0.25), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 4px 0 rgba(var(--neon-secondary-rgb), 0.4), 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--neon-secondary-rgb), 0.20); transition: transform 0.14s var(--ease-spring), box-shadow 0.18s var(--ease-smooth), border-color 0.18s; text-shadow: 0 0 8px rgba(var(--neon-secondary-rgb), 0.55); } .btn-arcade::before { content:''; position:absolute; left: 6px; right: 6px; top: 4px; height: 38%; border-radius: 10px 10px 50% 50% / 10px 10px 100% 100%; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)); pointer-events: none; } .btn-arcade:hover { transform: translateY(-1px); border-color: rgba(var(--neon-secondary-rgb), 0.65); box-shadow: inset 0 1px 0 rgba(var(--neon-secondary-rgb), 0.35), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 5px 0 rgba(var(--neon-secondary-rgb), 0.4), 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 32px rgba(var(--neon-secondary-rgb), 0.45); } .btn-arcade:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.60), 0 0 0 rgba(var(--neon-secondary-rgb), 0.4), 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 28px rgba(var(--neon-secondary-rgb), 0.55); } .btn-arcade.cyan { border-color: rgba(var(--neon-primary-rgb), 0.45); border-bottom-color: rgba(var(--neon-primary-rgb), 0.6); text-shadow: 0 0 8px rgba(var(--neon-primary-rgb), 0.5); box-shadow: inset 0 1px 0 rgba(var(--neon-primary-rgb), 0.25), inset 0 -3px 8px rgba(0,0,0,0.5), 0 4px 0 rgba(var(--neon-primary-rgb), 0.4), 0 6px 18px rgba(0,0,0,0.55), 0 0 24px rgba(var(--neon-primary-rgb), 0.25); } .btn-arcade.cyan:hover { border-color: rgba(var(--neon-primary-rgb), 0.70); box-shadow: inset 0 1px 0 rgba(var(--neon-primary-rgb), 0.35), inset 0 -3px 8px rgba(0,0,0,0.5), 0 5px 0 rgba(var(--neon-primary-rgb), 0.4), 0 8px 22px rgba(0,0,0,0.65), 0 0 32px rgba(var(--neon-primary-rgb), 0.45); } .btn-arcade.amber { border-color: rgba(251, 191, 36, 0.45); border-bottom-color: #876010; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); } .btn-arcade.danger{ border-color: rgba(239, 68, 68, 0.50); border-bottom-color: #7a1e1e; text-shadow: 0 0 8px rgba(239, 68, 68, 0.5); } /* ───────────────────────────────────────────────────────────── PROFILE PICTURE (PFP) ───────────────────────────────────────────────────────────── */ .pfp { position: relative; flex-shrink: 0; display:inline-flex; align-items:center; justify-content:center; border-radius: 50%; background: linear-gradient(135deg, #1a0a3d, #0a0218); color: #fff; font-family: var(--f-arcade); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; overflow: hidden; isolation: isolate; } .pfp img { width: 100%; height: 100%; object-fit: cover; display:block; border-radius: inherit; } .pfp::before { content:''; position:absolute; inset:-3px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--neon-secondary), var(--neon-primary), var(--neon-secondary), var(--neon-primary)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pfpSpin 6s linear infinite; z-index: -1; } .pfp::after { content:''; position:absolute; inset:-6px; border-radius: 50%; box-shadow: 0 0 18px rgba(var(--neon-secondary-rgb), 0.45), 0 0 38px rgba(var(--neon-primary-rgb), 0.30); animation: pfpPulse 3s ease-in-out infinite; z-index: -2; } @keyframes pfpSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pfpPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .pfp.sm { width: 32px; height: 32px; font-size: 11px; } .pfp.md { width: 44px; height: 44px; font-size: 12px; } .pfp.lg { width: 80px; height: 80px; font-size: 18px; } .pfp.xl { width: 120px; height: 120px; font-size: 22px; } /* ───────────────────────────────────────────────────────────── FLOATING WIDGETS (Focus + Tasks) — draggable, glassmorphic ───────────────────────────────────────────────────────────── */ .float-widget { position: fixed; z-index: 8000; /* Derive the panel from the active theme's dark base so the widget follows the theme (Frost, Apocalyptic, …) instead of staying default purple. Falls back to the original purple when --surf-rgb is unset (light mode). */ background: linear-gradient(180deg, rgba(var(--surf-rgb, 20, 8, 42), 0.82), rgba(var(--surf-rgb, 10, 2, 24), 0.9)); border: 1px solid rgba(var(--neon-secondary-rgb), 0.40); border-radius: 20px; backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 0 0 1px rgba(var(--neon-secondary-rgb), 0.20), 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 32px rgba(var(--neon-secondary-rgb), 0.20); user-select: none; overflow: hidden; animation: widgetIn 0.4s var(--ease-spring); } @keyframes widgetIn { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .fw-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(var(--neon-secondary-rgb), 0.18); cursor: move; background: linear-gradient(90deg, rgba(var(--neon-secondary-rgb), 0.10), rgba(var(--neon-primary-rgb), 0.04)); } .fw-title { font-family: var(--f-arcade); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; background: linear-gradient(90deg, var(--neon-secondary), var(--neon-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .fw-actions { display: flex; gap: 4px; } .fw-actions .tb-btn { width: 26px; height: 26px; border-radius: 6px; } .fw-body { padding: 14px; max-height: 60vh; overflow-y: auto; } .float-widget.compact { width: 280px; } .float-widget.medium { width: 340px; } .float-widget.locked { /* prevents drag while in fullscreen */ pointer-events: auto; } /* Widget toggles pinned at corner */ .widget-toggle { position: fixed; bottom: 22px; right: 22px; z-index: 7900; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-secondary), var(--neon-primary)); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--neon-secondary-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--neon-secondary-rgb), 0.35), 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 28px rgba(var(--neon-secondary-rgb), 0.55); cursor: pointer; transition: transform 0.2s var(--ease-spring); } .widget-toggle:hover { transform: scale(1.08); } .widget-toggle.task { right: 86px; background: linear-gradient(135deg, var(--neon-secondary), var(--neon-primary)); box-shadow: 0 0 0 1px rgba(var(--neon-primary-rgb),0.35), 0 8px 28px rgba(0,0,0,0.55), 0 0 28px rgba(var(--neon-primary-rgb),0.55); } /* ── Frost theme: its accents are near-white (#F0F8FF / #A8D8EA), so every accent-filled solid button renders white text on a white background. Force a dark foreground (text + currentColor icons) on those light buttons so labels and glyphs stay legible. ── */ body[data-theme="frost"] .btn-primary, body[data-theme="frost"] .btn-cyan, body[data-theme="frost"] .widget-toggle { color: #0c2233 !important; text-shadow: none !important; } /* ── Apocalyptic theme: its accents are bright neon green (#39FF14 / #CCFF00), so white labels/icons on accent-filled buttons wash out. Force dark text. ── */ body[data-theme="apocalyptic"] .btn-primary, body[data-theme="apocalyptic"] .btn-cyan, body[data-theme="apocalyptic"] .widget-toggle { color: #06210a !important; text-shadow: none !important; } /* ── Ghost theme: its accents are bright blue / near-white (#1E90FF / #E8F0F7), so white labels/icons on accent-filled buttons wash out. Force dark text. ── */ body[data-theme="ghost"] .btn-primary, body[data-theme="ghost"] .btn-cyan, body[data-theme="ghost"] .widget-toggle { color: #08243d !important; text-shadow: none !important; } /* Required-field marker */ .req { color: var(--neon-red, #ff4d6d); font-weight: 700; margin-left: 1px; } /* Trademark superscript on brand wordmarks */ .tm { font-size: .42em; font-weight: 700; vertical-align: super; letter-spacing: 0; opacity: .65; margin-left: 1px; } /* ───────────────────────────────────────────────────────────── CONTACT US / HELP & SUPPORT ───────────────────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .contact-grid > .card { display: flex; flex-direction: column; } /* Let the message field (and its textarea) grow so the feedback card height matches the about card — keeping both cards the same shape. */ .contact-grid .field-grow { flex: 1 1 auto; display: flex; flex-direction: column; } .contact-grid .field-grow textarea { flex: 1 1 auto; min-height: 130px; resize: none; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } /* About card */ .about-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .about-mark { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(var(--neon-primary-rgb, 168,85,247), 0.14); border: 1px solid rgba(var(--neon-primary-rgb, 168,85,247), 0.35); color: var(--neon-primary); } .about-mark img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(var(--neon-primary-rgb, 168,85,247), 0.55)); } .about-name { font-size: 18px; font-weight: 900; letter-spacing: .5px; } .about-blurb { font-size: 13px; line-height: 1.55; opacity: .85; margin: 0 0 14px; } .about-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .about-mail { width: 100%; justify-content: center; } .about-credit { font-size: 11px; margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 4px; } .about-credit .ico { color: var(--neon-secondary); } .about-copyright { font-size: 10.5px; margin-top: 4px; opacity: .6; } /* FAQ accordion */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; color: inherit; text-align: left; } .faq-q:hover { background: rgba(255,255,255,.04); } .faq-chev { transition: transform .22s ease; flex: 0 0 auto; opacity: .7; } .faq-item.open .faq-chev { transform: rotate(180deg); } .faq-a { max-height: 0; opacity: 0; padding: 0 15px; font-size: 13px; line-height: 1.55; transition: max-height .25s ease, opacity .2s ease, padding .25s ease; } .faq-item.open .faq-a { max-height: 320px; opacity: .85; padding: 0 15px 14px; } /* ───────────────────────────────────────────────────────────── MISSION-FAILED / GLITCH FX ───────────────────────────────────────────────────────────── */ .glitch-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9650; background: radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0.30), transparent 60%), repeating-linear-gradient(0deg, rgba(239,68,68,0.10) 0 2px, transparent 2px 5px); animation: glitchFlash 0.55s ease-out forwards; mix-blend-mode: screen; } @keyframes glitchFlash { 0% { opacity: 0; transform: translateX(-3px); } 20% { opacity: 1; transform: translateX(3px); } 40% { transform: translateX(-2px); } 60% { transform: translateX(2px); } 100% { opacity: 0; transform: translateX(0); } } .fail-banner { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); font-family: var(--f-arcade); font-size: 28px; font-weight: 900; letter-spacing: 6px; color: #ff5252; text-transform: uppercase; text-shadow: 0 0 12px rgba(239, 68, 68, 0.90), 0 0 32px rgba(239, 68, 68, 0.55), -2px 0 rgba(var(--neon-primary-rgb), 0.50), 2px 0 rgba(var(--neon-secondary-rgb), 0.50); z-index: 9650; pointer-events: none; animation: failBanner 0.9s ease-out forwards; } @keyframes failBanner { 0% { opacity: 0; transform: translateX(-50%) scale(0.85); } 20% { opacity: 1; transform: translateX(-50%) scale(1.05); } 60% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } } /* ───────────────────────────────────────────────────────────── FORM ───────────────────────────────────────────────────────────── */ .input, .select, .textarea { width: 100%; padding: 11px 14px; font-family: var(--f-display); font-size: 13.5px; font-weight: 500; color: var(--t-1); background: rgba(var(--surf-rgb), 0.45); border: 1px solid var(--line-faint); border-radius: var(--r-md); transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast); } html[data-theme="light"] .input, html[data-theme="light"] .select, html[data-theme="light"] .textarea { background: rgba(255,255,255,0.65); } .input::placeholder, .textarea::placeholder { color: var(--t-3); font-weight:500; } .input:focus, .select:focus, .textarea:focus { border-color: var(--neon-violet); background: rgba(var(--neon-primary-rgb), 0.06); box-shadow: 0 0 0 4px rgba(var(--neon-primary-rgb), 0.13), 0 0 18px rgba(var(--neon-primary-rgb), 0.18); } .textarea { min-height: 100px; resize: vertical; line-height: 1.55; } .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--neon-cyan) 50%), linear-gradient(-45deg, transparent 50%, var(--neon-cyan) 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; } .select option { background: #07041a !important; color: var(--t-1) !important; padding: 8px 12px; font-weight: 500; } html[data-theme="light"] .select option { background: #fff !important; color: #170a3d !important; } .field-label { font-family: var(--f-arcade); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t-2); margin-bottom: 6px; } .field { margin-bottom: 14px; } /* Toggle */ .tg { width: 46px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); position: relative; cursor: pointer; transition: background var(--tr-mid); flex-shrink: 0; border: 1px solid var(--line-faint); } .tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: transform 0.28s var(--ease-spring); } .tg.on { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); border-color: transparent; box-shadow: 0 0 14px rgba(var(--neon-secondary-rgb), 0.45); } .tg.on::after { transform: translateX(18px); } /* ───────────────────────────────────────────────────────────── PROGRESS — segmented HUD bar ───────────────────────────────────────────────────────────── */ .bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); overflow: hidden; border: 1px solid var(--line-faint); position: relative; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan)); background-size: 200% 100%; animation: gradientShift 7s ease infinite; border-radius: 99px; transition: width 0.55s var(--ease-smooth); box-shadow: 0 0 12px rgba(var(--neon-secondary-rgb), 0.35); position: relative; } .bar-fill::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,0.10) 8px 9px); border-radius: inherit; } @keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ───────────────────────────────────────────────────────────── CHIPS / TAGS / RARITY ───────────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--glass-2); border: 1px solid var(--line-faint); color: var(--t-2); font-family: var(--f-arcade); } /* All icons here share the same stroke-width (1.6, kept fixed on-screen by vector-effect:non-scaling-stroke), but some glyphs (journal, pill) are minimal outline shapes next to busier ones (meditate, run, dumbbell) — at this small size that reads as visually thinner/uneven even though nothing is mispositioned. A slightly heavier stroke evens out the perceived weight across every preset icon. */ .chip .ico { width: 11px; height: 11px; stroke-width: 2.2px; } .chip.pink { background: rgba(var(--neon-secondary-rgb),0.12); border-color: var(--line-hot); color: var(--neon-pink); } .chip.violet { background: rgba(var(--neon-primary-rgb),0.12); border-color: var(--line-soft); color: var(--neon-violet); } .chip.cyan { background: rgba(var(--neon-primary-rgb),0.10); border-color: var(--line-cool); color: var(--neon-cyan); } .chip.green { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.30); color: var(--neon-green); } .chip.amber { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.30); color: var(--neon-yellow); } .chip.red { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: var(--neon-red); } .chip.locked { color: var(--t-3); border-color: var(--t-4); } /* Rarity */ .rarity-common { color: var(--rare-common); } .rarity-rare { color: var(--rare-rare); } .rarity-epic { color: var(--rare-epic); } .rarity-legendary { color: var(--rare-legendary); } .rarity-mythic { color: var(--rare-mythic); } .chip-rarity-common { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.32); color: var(--rare-common); } .chip-rarity-rare { background: rgba(var(--neon-primary-rgb),0.12); border-color: rgba(var(--neon-primary-rgb),0.32); color: var(--rare-rare); box-shadow: 0 0 10px rgba(var(--neon-primary-rgb),0.15); } .chip-rarity-epic { background: rgba(var(--neon-primary-rgb),0.14); border-color: rgba(var(--neon-primary-rgb),0.42); color: var(--rare-epic); box-shadow: 0 0 12px rgba(var(--neon-primary-rgb),0.20); } .chip-rarity-legendary { background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.42); color: var(--rare-legendary); box-shadow: 0 0 14px rgba(251,191,36,0.25); } .chip-rarity-mythic { background: rgba(var(--neon-secondary-rgb),0.16); border-color: rgba(var(--neon-secondary-rgb),0.50); color: var(--rare-mythic); box-shadow: 0 0 18px rgba(var(--neon-secondary-rgb),0.32); animation: mythicPulse 3s ease-in-out infinite; } @keyframes mythicPulse { 0%,100% { box-shadow: 0 0 18px rgba(var(--neon-secondary-rgb),0.32); } 50% { box-shadow: 0 0 28px rgba(var(--neon-secondary-rgb),0.55); } } /* ───────────────────────────────────────────────────────────── MODAL ───────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(4, 2, 12, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: none; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.25s var(--ease-smooth); } .modal-overlay.show { display: flex; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .modal { background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: 26px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-3), 0 0 0 1px rgba(var(--neon-primary-rgb), 0.18); animation: modalIn 0.4s var(--ease-spring); position: relative; } html[data-theme="light"] .modal { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,244,255,0.97)); } @keyframes modalIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-title { font-family: var(--f-arcade); font-size: 16px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; background: linear-gradient(100deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; display:flex; align-items:center; gap: 10px; } .modal-actions { display:flex; justify-content:flex-end; gap: 10px; margin-top: 18px; flex-wrap:wrap; } /* ───────────────────────────────────────────────────────────── LEGAL CONSENT GATE — blocking Terms & Privacy agreement Shown before first use; sits above the login wall (9400) and the browser notice (9600), below toasts (9999). ───────────────────────────────────────────────────────────── */ #legalGate { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 2, 12, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #legalGate .legal-card { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 28px 26px 22px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgba(var(--surf-rgb, 20, 8, 42), 0.97), rgba(var(--surf-rgb, 10, 2, 24), 0.99)); border: 1px solid var(--line-soft); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--neon-primary-rgb), 0.14); } #legalGate .legal-logo { margin: 0 auto 12px; filter: drop-shadow(0 0 12px rgba(var(--neon-primary-rgb), .55)); } #legalGate .legal-title { font-family: var(--f-arcade); font-size: 17px; font-weight: 800; letter-spacing: 1.5px; color: var(--t-1); margin-bottom: 8px; } #legalGate .legal-sub { font-size: 13px; line-height: 1.6; color: var(--t-2); margin-bottom: 16px; } #legalGate .legal-docs { flex: 0 1 auto; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; min-height: 0; } #legalGate details { border: 1px solid var(--line-faint, rgba(255,255,255,.10)); border-radius: 12px; background: rgba(255,255,255,.03); } #legalGate summary { cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 800; color: var(--t-1); list-style: none; display: flex; align-items: center; justify-content: space-between; } #legalGate summary::-webkit-details-marker { display: none; } #legalGate summary::after { content: '+'; color: var(--t-3); font-weight: 800; } #legalGate details[open] summary::after { content: '–'; } #legalGate .legal-doc { max-height: 220px; overflow-y: auto; padding: 2px 14px 12px; font-size: 12px; line-height: 1.65; color: var(--t-2); } #legalGate .legal-doc p { margin-bottom: 8px; } #legalGate .legal-doc a { color: var(--neon-cyan, #22d3ee); } #legalGate .legal-links { font-size: 11.5px; color: var(--t-3); margin-bottom: 14px; } #legalGate .legal-links a { color: var(--neon-cyan, #22d3ee); text-decoration: none; font-weight: 700; } #legalGate .legal-check { display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer; font-size: 12.5px; line-height: 1.55; color: var(--t-2); margin-bottom: 14px; } #legalGate .legal-check input { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--neon-violet); cursor: pointer; } #legalGate .legal-btn { width: 100%; justify-content: center; } #legalGate .legal-btn:disabled { opacity: .45; cursor: not-allowed; } /* ───────────────────────────────────────────────────────────── FEATURE TOUR — contextual first-run walkthrough A soft spotlight ring morphs between UI targets while a compact card explains each step. Sits above the app chrome and float widgets but below nothing it needs (toasts stay on top). ───────────────────────────────────────────────────────────── */ #tourRoot { position: fixed; inset: 0; z-index: 9400; pointer-events: none; } #tourRoot .tour-dim { position: absolute; inset: 0; background: rgba(4, 2, 12, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .25s ease; } #tourRoot .tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 200vmax rgba(4, 2, 12, 0.72), 0 0 0 2px rgba(var(--neon-primary-rgb), 0.65), 0 0 26px rgba(var(--neon-primary-rgb), 0.45); transition: left .32s var(--ease-smooth), top .32s var(--ease-smooth), width .32s var(--ease-smooth), height .32s var(--ease-smooth); } #tourRoot .tour-card { position: fixed; pointer-events: auto; padding: 26px 24px 20px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgba(var(--surf-rgb, 20, 8, 42), 0.97), rgba(var(--surf-rgb, 10, 2, 24), 0.99)); border: 1px solid var(--line-soft); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--neon-primary-rgb), 0.14); transition: left .32s var(--ease-smooth), top .32s var(--ease-smooth); animation: tourCardIn .3s var(--ease-smooth); } @keyframes tourCardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } #tourRoot .tour-x { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--t-3); cursor: pointer; font-size: 19px; line-height: 1; transition: background .12s ease, color .12s ease; } #tourRoot .tour-x:hover { background: rgba(255, 255, 255, .08); color: var(--t-1); } #tourRoot .tour-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; color: var(--neon-violet); background: linear-gradient(145deg, rgba(var(--neon-primary-rgb), .16), rgba(var(--neon-secondary-rgb), .10)); border: 1px solid rgba(var(--neon-primary-rgb), .35); box-shadow: 0 8px 22px rgba(var(--neon-primary-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .08); } #tourRoot .tour-step-lbl { font-size: 10px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--t-3); margin-bottom: 7px; } #tourRoot .tour-title { font-family: var(--f-arcade); font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--t-1); margin-bottom: 9px; } #tourRoot .tour-text { font-size: 13px; line-height: 1.65; color: var(--t-2); margin-bottom: 16px; } #tourRoot .tour-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; } #tourRoot .tour-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: width .25s ease, background .25s ease; } #tourRoot .tour-dot.on { width: 20px; background: var(--neon-violet); box-shadow: 0 0 8px rgba(var(--neon-primary-rgb), .6); } #tourRoot .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #tourRoot .tour-skip { border: 0; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--t-3); padding: 8px 6px; transition: color .12s ease; } #tourRoot .tour-skip:hover { color: var(--t-1); } #tourRoot .tour-foot-right { display: flex; gap: 8px; } /* ───────────────────────────────────────────────────────────── TOAST ───────────────────────────────────────────────────────────── */ .toast-wrap { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: linear-gradient(135deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px 18px; color: var(--t-1); font-weight: 600; font-size: 13px; box-shadow: var(--glow-soft), 0 16px 40px rgba(0,0,0,0.5); animation: toastIn 0.4s var(--ease-spring); pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 380px; } .toast .ico { color: var(--neon-pink); } .toast.success .ico { color: var(--neon-green); } .toast.error .ico { color: var(--neon-red); } @keyframes toastIn { from { opacity:0; transform: translateY(20px) scale(0.9); } to { opacity:1; transform: translateY(0) scale(1); } } @keyframes toastOut { to { opacity:0; transform: translateY(20px) scale(0.9); } } /* ───────────────────────────────────────────────────────────── QUEST ROW ───────────────────────────────────────────────────────────── */ .quest-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); transition: var(--tr-mid); position: relative; overflow: hidden; } .quest-row::before { /* Rarity bar on left */ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--rare-common); } .quest-row[data-rarity="rare"]::before { background: var(--rare-rare); box-shadow: 0 0 10px var(--rare-rare); } .quest-row[data-rarity="epic"]::before { background: var(--rare-epic); box-shadow: 0 0 10px var(--rare-epic); } .quest-row[data-rarity="legendary"]::before { background: var(--rare-legendary); box-shadow: 0 0 12px var(--rare-legendary); } .quest-row[data-rarity="mythic"]::before { background: var(--rare-mythic); box-shadow: 0 0 14px var(--rare-mythic); } .quest-row:hover { background: var(--glass-hover); border-color: var(--line-soft); transform: translateX(3px); box-shadow: 0 6px 18px rgba(var(--neon-primary-rgb), 0.12); } .quest-row.done { opacity: 0.55; } .quest-row.done .quest-name { text-decoration: line-through; } .quest-row.overdue { border-color: rgba(239, 68, 68, 0.35); } .quest-row.locked { opacity: 0.55; pointer-events: none; } .quest-check { width: 28px; height: 28px; border-radius: 9px; border: 1.5px solid var(--line-mid); display:flex; align-items:center; justify-content:center; cursor: pointer; flex-shrink: 0; transition: var(--tr-fast); color: transparent; background: rgba(255, 255, 255, 0.04); } .quest-check:hover { border-color: var(--neon-pink); box-shadow: 0 0 12px rgba(var(--neon-secondary-rgb),0.4); transform: scale(1.05); } .quest-check.checked { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(var(--neon-secondary-rgb), 0.6); } .quest-check.checked .ico { color: #fff; } .quest-icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(var(--neon-primary-rgb), 0.10); border: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; flex-shrink: 0; color: var(--neon-violet); } .quest-meta { flex:1; min-width: 0; } .quest-name { font-size: 14.5px; font-weight: 700; color: var(--t-1); margin-bottom: 4px; letter-spacing: 0.2px; } .quest-desc { font-size: 11px; color: var(--t-2); display: flex; gap: 6px; flex-wrap: wrap; align-items:center; } .quest-actions { display:flex; gap: 6px; flex-shrink:0; } /* ───────────────────────────────────────────────────────────── ACHIEVEMENT TILE — rarity tiers ───────────────────────────────────────────────────────────── */ .ach-tile { padding: 18px 16px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); text-align: center; position: relative; overflow: hidden; transition: var(--tr-mid); } .ach-tile::after { /* Diagonal sweep on hover */ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.7s var(--ease-smooth); } .ach-tile:hover::after { transform: translateX(100%); } .ach-tile.locked { opacity: 0.45; filter: grayscale(0.7); } .ach-tile:hover { transform: translateY(-3px); } .ach-tile.unlocked.r-bronze { border-color: rgba(180,120,60,0.35); box-shadow: 0 0 14px rgba(180,120,60,0.18); } .ach-tile.unlocked.r-silver { border-color: rgba(184,184,200,0.35); box-shadow: 0 0 14px rgba(184,184,200,0.18); } .ach-tile.unlocked.r-gold { border-color: rgba(251,191,36,0.45); box-shadow: 0 0 18px rgba(251,191,36,0.22); } .ach-tile.unlocked.r-mythic { border-color: rgba(var(--neon-secondary-rgb),0.50); box-shadow: 0 0 24px rgba(var(--neon-secondary-rgb),0.30); animation: mythicPulse 4s ease-in-out infinite; } .ach-tile.unlocked .ach-icon { filter: drop-shadow(0 0 10px currentColor); } .ach-icon { display:flex; align-items:center; justify-content:center; margin-bottom: 12px; height: 44px; color: var(--t-3); } .ach-tile.unlocked.r-bronze .ach-icon { color: #c8924d; } .ach-tile.unlocked.r-silver .ach-icon { color: #cfd0e0; } .ach-tile.unlocked.r-gold .ach-icon { color: var(--rare-legendary); } .ach-tile.unlocked.r-mythic .ach-icon { color: var(--rare-mythic); } .ach-tile.locked .ach-icon { color: var(--t-4); } .ach-name { font-family: var(--f-arcade); font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--t-1); margin-bottom: 6px; } .ach-desc { font-size: 11.5px; color: var(--t-2); line-height: 1.4; min-height: 32px; } .ach-xp { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; color: var(--neon-yellow); margin-top: 10px; letter-spacing: 1px; } /* ───────────────────────────────────────────────────────────── STATS / NUMBERS ───────────────────────────────────────────────────────────── */ .stat { padding: 16px 18px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); display:flex; flex-direction:column; gap: 4px; position: relative; overflow: hidden; } .stat .stat-icon { position:absolute; right: 10px; top: 10px; color: var(--t-3); opacity: 0.5; } .stat-label { font-family: var(--f-arcade); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--t-3); font-weight: 700; } .stat-value { font-family: var(--f-mono); font-size: 26px; font-weight: 700; background: linear-gradient(100deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; } .stat-sub { font-size: 11px; color: var(--t-3); } /* ───────────────────────────────────────────────────────────── HOLOGRAPHIC XP RING (Dashboard + Focus) ───────────────────────────────────────────────────────────── */ .xp-ring { position: relative; width: 220px; height: 220px; display:flex; align-items:center; justify-content:center; margin: 0 auto; } .xp-ring svg { transform: rotate(-90deg); } .xp-ring-bg { fill:none; stroke: rgba(255,255,255,0.06); stroke-width: 6; } .xp-ring-fill { fill:none; stroke: url(#xpGrad); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.7s var(--ease-smooth); filter: drop-shadow(0 0 12px rgba(var(--neon-secondary-rgb), 0.55)); } .xp-ring-center { position: absolute; inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .xp-ring-center .lvl { font-family: var(--f-arcade); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-2); font-weight: 700; } .xp-ring-center .num { font-family: var(--f-mono); font-size: 48px; font-weight: 700; background: linear-gradient(100deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -1.5px; line-height: 1; } .xp-ring-center .meta { font-family: var(--f-mono); font-size: 11px; color: var(--t-2); margin-top: 4px; } .xp-ring-center .pct { font-family: var(--f-arcade); font-size: 10px; letter-spacing: 2px; color: var(--neon-pink); margin-top: 4px; } /* ───────────────────────────────────────────────────────────── CALENDAR ───────────────────────────────────────────────────────────── */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-cell { aspect-ratio: 1 / 1; border-radius: 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--line-faint); display:flex; flex-direction: column; align-items:center; justify-content:center; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--t-2); cursor: pointer; transition: var(--tr-fast); position: relative; overflow: hidden; } .cal-cell:hover { background: var(--glass-hover); color: var(--t-1); border-color: var(--line-soft); transform: scale(1.05); } .cal-cell.today { border-color: var(--neon-pink); box-shadow: 0 0 0 1px var(--neon-pink), 0 0 14px rgba(var(--neon-secondary-rgb), 0.4); color: var(--neon-pink); } .cal-cell.has-entry { background: linear-gradient(180deg, rgba(var(--neon-primary-rgb),0.14), rgba(var(--neon-secondary-rgb),0.07)); border-color: var(--line-soft); color: var(--t-1); } .cal-cell.locked .ico { position: absolute; top: 4px; right: 4px; color: var(--t-4); } .cal-cell.selected { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); color: #fff; border-color: transparent; box-shadow: var(--glow-soft); } .cal-cell.dim { opacity: 0.30; cursor: default; } .cal-cell .dot { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 4px var(--neon-cyan); } .cal-head { display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .cal-head-cell { text-align:center; font-family: var(--f-arcade); font-size: 9.5px; font-weight: 700; letter-spacing: 2px; color: var(--t-3); padding: 6px 0; text-transform: uppercase; } /* Heatmap (analytics) */ .heat-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-top: 8px; } .heat-cell { aspect-ratio: 1/1; border-radius: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-faint); position: relative; cursor: pointer; transition: var(--tr-fast); } .heat-cell:hover { transform: scale(1.15); border-color: var(--neon-pink); } .heat-cell.l1 { background: rgba(var(--neon-primary-rgb), 0.18); } .heat-cell.l2 { background: rgba(var(--neon-primary-rgb), 0.40); } .heat-cell.l3 { background: rgba(var(--neon-secondary-rgb), 0.55); box-shadow: 0 0 6px rgba(var(--neon-secondary-rgb),0.30); } .heat-cell.l4 { background: rgba(var(--neon-secondary-rgb), 0.85); box-shadow: 0 0 10px rgba(var(--neon-secondary-rgb),0.50); } /* ───────────────────────────────────────────────────────────── ONBOARDING ───────────────────────────────────────────────────────────── */ .ob { position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center; justify-content: center; padding: 20px; } .ob-screen { display: none; width: 100%; max-width: 540px; animation: pageIn 0.5s var(--ease-smooth); } .ob-screen.active { display: block; } .ob-card { background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: 36px 32px; box-shadow: var(--shadow-3), 0 0 40px rgba(var(--neon-primary-rgb), 0.18); text-align: center; position: relative; overflow: hidden; } .ob-title { font-family: var(--f-arcade); font-size: 30px; font-weight: 900; letter-spacing: 5px; text-transform: uppercase; background: linear-gradient(100deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .ob-sub { font-family: var(--f-arcade); color: var(--t-2); font-size: 11px; margin-bottom: 22px; letter-spacing: 3px; text-transform: uppercase; } /* ───────────────────────────────────────────────────────────── CONFETTI ───────────────────────────────────────────────────────────── */ .confetti { position: fixed; pointer-events: none; width: 8px; height: 8px; border-radius: 2px; animation: confettiFall 1.5s ease-out forwards; z-index: 9800; } @keyframes confettiFall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(240px) rotate(720deg); } } /* XP popup (cinematic floater) */ .xp-pop { position: fixed; font-family: var(--f-mono); font-weight: 800; font-size: 20px; color: var(--neon-yellow); text-shadow: 0 0 20px rgba(251,191,36,0.6); pointer-events: none; z-index: 9800; animation: xpFloat 1.4s ease-out forwards; } @keyframes xpFloat { 0% { opacity: 0; transform: translateY(0) scale(0.8); } 20% { opacity: 1; transform: translateY(-10px) scale(1.05); } 100% { opacity: 0; transform: translateY(-90px) scale(1); } } /* ───────────────────────────────────────────────────────────── "DAY COMPLETE" cinematic ───────────────────────────────────────────────────────────── */ .day-cinematic { position: fixed; inset: 0; z-index: 9900; background: rgba(4, 2, 12, 0.92); backdrop-filter: blur(24px); display: none; align-items: center; justify-content: center; padding: 30px; } .day-cinematic.show { display: flex; animation: fadeIn 0.6s var(--ease-smooth); } .day-cinematic .panel { background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: 40px 32px; max-width: 580px; width: 100%; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-3), 0 0 60px rgba(var(--neon-secondary-rgb), 0.30); animation: dayPanel 0.8s var(--ease-spring); } @keyframes dayPanel { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .day-cinematic h2 { font-family: var(--f-arcade); font-size: 32px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; background: linear-gradient(100deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .day-cinematic .sub { font-family: var(--f-arcade); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--t-2); margin-bottom: 30px; } .day-cinematic .grid-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; } /* ───────────────────────────────────────────────────────────── GRID UTILITIES ───────────────────────────────────────────────────────────── */ .row { display: flex; gap: 14px; } .col { display: flex; flex-direction: column; gap: 14px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .gap-sm { gap: 8px; } .gap-lg { gap: 22px; } .flex-center { display:flex; align-items:center; justify-content:center; } .flex-between { display:flex; align-items:center; justify-content:space-between; gap: 10px; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; min-width: 0; } .text-center { text-align:center; } .text-mono { font-family: var(--f-mono); } .text-arcade { font-family: var(--f-arcade); letter-spacing: 1.5px; text-transform: uppercase; } .muted { color: var(--t-2); } .dim { color: var(--t-3); } .hidden { display: none !important; } .spacer { flex: 1; } .divider { height: 1px; margin: 14px 0; background: linear-gradient(90deg, transparent, var(--line-soft), transparent); } @media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .sb { width: 64px; padding: 12px 8px; } .sb .name, .sb-section, .sb-item span:not(.ico) { display:none; } .tp { left: 64px; } .content { margin-left: 64px; padding: 76px 16px 28px; } } .empty { text-align:center; padding: 50px 20px; position: relative; } .empty::before { /* Holographic placeholder grid */ content:''; position:absolute; inset: 16px; border-radius: 14px; background-image: linear-gradient(rgba(var(--neon-primary-rgb), 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--neon-primary-rgb), 0.10) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); pointer-events: none; opacity: 0.5; } .empty .ico { color: var(--neon-violet); filter: drop-shadow(0 0 12px rgba(var(--neon-primary-rgb), 0.55)); animation: emptyPulse 3s ease-in-out infinite; position: relative; z-index: 1; } @keyframes emptyPulse { 0%,100% { opacity: 0.65; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } .empty-title { font-family: var(--f-arcade); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--t-1); margin: 14px 0 6px; position: relative; z-index: 1; } .empty > div:not(.empty-title) { position: relative; z-index: 1; color: var(--t-2); font-size: 12.5px; } .kbd { font-family: var(--f-mono); background: var(--glass-2); border: 1px solid var(--line-faint); border-radius: 6px; padding: 2px 7px; font-size: 11px; color: var(--t-1); } /* ───────────────────────────────────────────────────────────── FOCUS PAGE ───────────────────────────────────────────────────────────── */ .focus-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 30px 16px; position: relative; } .focus-ring { width: 320px; height: 320px; position: relative; } .focus-ring svg { transform: rotate(-90deg); } .focus-ring-bg { fill:none; stroke: rgba(255,255,255,0.06); stroke-width: 8; } .focus-ring-fill { fill:none; stroke: url(#focusGrad); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 18px rgba(var(--neon-secondary-rgb), 0.55)); } .focus-time { position: absolute; inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .focus-time .clock { font-family: var(--f-mono); font-size: 60px; font-weight: 700; background: linear-gradient(100deg, var(--neon-pink), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -2px; text-shadow: 0 0 30px rgba(var(--neon-secondary-rgb), 0.4); } .focus-time .lbl { font-family: var(--f-arcade); font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--t-2); } .focus-presets { display:flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; justify-content: center; } .focus-preset { padding: 8px 16px; border-radius: 99px; background: var(--glass-1); border: 1px solid var(--line-faint); font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--t-2); cursor: pointer; transition: var(--tr-fast); letter-spacing: 1px; } .focus-preset:hover { color: var(--t-1); background: var(--glass-2); } .focus-preset.sel { color: #fff; background: linear-gradient(135deg, rgba(var(--neon-secondary-rgb),0.30), rgba(var(--neon-primary-rgb),0.20)); border-color: rgba(var(--neon-secondary-rgb),0.45); box-shadow: 0 0 12px rgba(var(--neon-secondary-rgb), 0.25); } .focus-controls { display:flex; gap: 12px; margin-top: 24px; } /* ───────────────────────────────────────────────────────────── PROFILE DASHBOARD CARD ───────────────────────────────────────────────────────────── */ .profile-card { position: relative; background: linear-gradient(135deg, rgba(var(--neon-secondary-rgb), 0.10), rgba(var(--neon-primary-rgb), 0.05) 50%, rgba(var(--neon-primary-rgb), 0.08)), linear-gradient(180deg, rgba(var(--surf-rgb), 0.90), rgba(var(--surf-rgb), 0.94)); border: 1px solid rgba(var(--neon-secondary-rgb), 0.40); border-radius: var(--r-xl); padding: 18px; box-shadow: inset 0 1px 0 rgba(var(--neon-secondary-rgb), 0.18), 0 0 0 1px rgba(var(--neon-secondary-rgb), 0.18), 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 32px rgba(var(--neon-primary-rgb), 0.20); overflow: hidden; } .profile-card::before { content:''; position:absolute; left:0; right:0; top: 0; height: 100%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.05) 50%, transparent 62%); animation: profileShine 6s ease-in-out infinite; pointer-events: none; } @keyframes profileShine { 0%, 100% { transform: translateX(-30%); opacity: 0; } 50% { transform: translateX(30%); opacity: 1; } } /* ── COMPACT DASHBOARD GRID ────────────────────────────────── Row 2: [Profile 5][Quests 4][Side 3] Row 3: [Goals 7][Badges 5] */ .dash-grid { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 12px; align-items: stretch; } .dash-grid > * { min-width: 0; } .dash-grid-bottom { display: grid; grid-template-columns: 7fr 5fr; gap: 12px; align-items: stretch; } .dash-grid-bottom > * { min-width: 0; } .dash-side { display: grid; grid-template-rows: auto auto; gap: 12px; } .dash-quests { padding: 16px; max-height: 360px; overflow-y: auto; } .dash-kpi .stat { padding: 12px 14px; } .dash-kpi .stat-value { font-size: 22px; } /* Compact profile card layout */ .dash-profile { padding: 16px; } .dash-profile-grid { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: start; } .profile-left { display:flex; flex-direction:column; align-items:center; } .profile-right { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items:center; } .profile-right .hero-name { font-family: var(--f-arcade); font-size: 18px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; background: linear-gradient(100deg, #fff, var(--neon-secondary), var(--neon-primary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-bottom: 4px; grid-column: 1 / -1; line-height: 1.1; } .profile-right .section-title { grid-column: 1 / -1; margin-bottom: 0 !important; } .profile-right #dashRecentBadgeStrip { grid-column: 1 / -1; } .xp-ring-compact { width: 120px !important; height: 120px !important; margin: 0; } .xp-ring-compact .xp-ring-center .lvl { font-size: 9px; letter-spacing: 2px; } @media (max-width: 1280px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-grid > .dash-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .dash-grid-bottom { grid-template-columns: 1fr; } } @media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } .dash-grid > .dash-side { grid-template-columns: 1fr; grid-template-rows: auto auto; } .profile-right { grid-template-columns: 1fr; } .xp-ring-compact { margin: 0 auto; } .dash-kpi { grid-template-columns: repeat(2, 1fr); } } /* Locked journal styling */ .journal-locked .textarea, .journal-locked .input { background: rgba(255,255,255,0.02); color: var(--t-2); border-color: rgba(var(--neon-primary-rgb), 0.18); filter: blur(0.2px) saturate(0.85); } .journal-locked-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed rgba(251, 191, 36, 0.55); border-radius: 10px; background: linear-gradient(90deg, rgba(251, 191, 36, 0.05), rgba(251, 191, 36, 0)); color: #fbbf24; font-family: var(--f-arcade); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────── v2.6.2 — DARK MODE BACKGROUND IMAGE When no custom wallpaper is set, the synthwave reference image at src/assets/dark-bg.jpg becomes the page backdrop in dark mode. The structural #bg SVG layers stay on top as cinematic enhancement. ───────────────────────────────────────────────────────────── */ html[data-theme="dark"]:not(.has-bg-image) body:not(.has-theme-bg)::after, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg)::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), url("./assets/dark-bg.jpg"); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } /* When the new dark-bg image is active, dim the SVG scene's structural layers so the photo is the hero — same treatment as a custom wallpaper. */ html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .sky, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .floor-bg, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .mountains, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .sun, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .city, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .horizon-line, html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .floor { display: none; } html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .scrim { background: rgba(4, 2, 12, 0.30); } html[data-theme="dark"] body:not(.has-bg-image):not(.has-theme-bg) #bg .vignette { background: radial-gradient(ellipse at center, transparent 38%, rgba(4, 2, 12, 0.55) 88%, rgba(0,0,0,0.78) 100%); } /* ───────────────────────────────────────────────────────────── v2.6.2 — LIGHT MODE POLISH Cream-bright canvas, pure-black body text, no darkness anywhere. ───────────────────────────────────────────────────────────── */ html[data-theme="light"] { --bg-0: #fbf3df; --bg-1: #fbf3df; --bg-2: #f5ecd0; --bg-3: #f0e6c4; --bg-4: #ebe0b8; --surface-0: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff; --glass-1: rgba(0, 0, 0, 0.02); --glass-2: rgba(0, 0, 0, 0.04); --glass-3: rgba(0, 0, 0, 0.06); --glass-hover: rgba(0, 0, 0, 0.05); --line-faint: #e8e0c8; --line-soft: #e8e0c8; --line-mid: #d4c89a; --line-hot: rgba(var(--neon-secondary-rgb), 0.45); --line-cool: rgba(var(--neon-primary-rgb), 0.40); --t-1: #000000; --t-2: #262626; --t-3: #4a4a4a; --t-4: #737373; /* No darkening shadows on cards / surfaces — replace with hairline borders. */ --shadow-1: 0 0 0 1px #e8e0c8; --shadow-2: 0 0 0 1px #e8e0c8; --shadow-3: 0 0 0 1px #e8e0c8; --grid-h: rgba(0, 0, 0, 0.06); --grid-v: rgba(0, 0, 0, 0.04); --page-bg: #fbf3df; } html[data-theme="light"] body { background: #fbf3df; color: #000000; } /* Suppress the dark-mode bg image when on light theme. */ html[data-theme="light"] body::after { content: none !important; } /* Suppress the synthwave scene cinematic layers in light mode for a clean canvas. */ html[data-theme="light"] #bg .sky, html[data-theme="light"] #bg .floor-bg, html[data-theme="light"] #bg .stars, html[data-theme="light"] #bg .stars2, html[data-theme="light"] #bg .meteor, html[data-theme="light"] #bg .mountains, html[data-theme="light"] #bg .sun, html[data-theme="light"] #bg .city, html[data-theme="light"] #bg .horizon-line, html[data-theme="light"] #bg .floor, html[data-theme="light"] #bg .glitch-line, html[data-theme="light"] #bg .scan, html[data-theme="light"] #bg .noise, html[data-theme="light"] #bg .scrim, html[data-theme="light"] #bg .vignette, html[data-theme="light"] #bg .particles { display: none !important; } /* Card / surface cleanup in light mode — flat white with hairline border. */ html[data-theme="light"] .card, html[data-theme="light"] .stat, html[data-theme="light"] .titlebar, html[data-theme="light"] .sb, html[data-theme="light"] .tp { background: #ffffff !important; border: 1px solid #e8e0c8 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] .input, html[data-theme="light"] .select, html[data-theme="light"] .textarea { background: #ffffff !important; border-color: #e8e0c8 !important; color: #000000 !important; box-shadow: none !important; } html[data-theme="light"] .input:focus, html[data-theme="light"] .select:focus, html[data-theme="light"] .textarea:focus { border-color: var(--neon-violet) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(var(--neon-primary-rgb), 0.18) !important; } html[data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.25) !important; } html[data-theme="light"] .modal { background: #ffffff !important; border: 1px solid #e8e0c8 !important; box-shadow: 0 0 0 1px #e8e0c8 !important; } html[data-theme="light"] .btn-ghost { background: #ffffff !important; border-color: #e8e0c8 !important; color: #000000 !important; backdrop-filter: none !important; } html[data-theme="light"] .btn-ghost:hover { background: #f5ecd0 !important; } html[data-theme="light"] .chip { background: #ffffff !important; border-color: #e8e0c8 !important; color: #262626 !important; } html[data-theme="light"] .sb-item { color: #262626 !important; } html[data-theme="light"] .sb-item:hover { background: #f5ecd0 !important; color: #000000 !important; } html[data-theme="light"] .sb-item.active { background: linear-gradient(100deg, rgba(var(--neon-primary-rgb), 0.12), rgba(var(--neon-secondary-rgb), 0.08)) !important; border-color: rgba(var(--neon-primary-rgb), 0.40) !important; color: #000000 !important; } html[data-theme="light"] .quest-row { background: #ffffff !important; border-color: #e8e0c8 !important; box-shadow: none !important; } html[data-theme="light"] .quest-row:hover { background: #faf3dc !important; border-color: rgba(var(--neon-primary-rgb), 0.40) !important; } html[data-theme="light"] .ach-tile { background: #ffffff !important; border: 1px solid #e8e0c8 !important; box-shadow: none !important; } html[data-theme="light"] .pfp { color: #ffffff; } html[data-theme="light"] .hud { background: #ffffff !important; border-color: #e8e0c8 !important; color: #000000 !important; } html[data-theme="light"] .tb-btn { color: #262626; } html[data-theme="light"] .tb-btn:hover { background: #f5ecd0; color: #000000; } html[data-theme="light"] .select option { background: #ffffff !important; color: #000000 !important; } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — SCOPE 6 · SETTINGS ICON (sidebar only) Hex frame + gear · pulsing dual-glow. Scoped to the settings sidebar item only — does not affect other icons or the .ico class. ═════════════════════════════════════════════════════════════════ */ .sb-item[data-page="settings"] .ico { filter: drop-shadow(0 0 6px rgba(var(--neon-secondary-rgb), 0.45)) drop-shadow(0 0 12px rgba(var(--neon-primary-rgb), 0.30)); animation: settingsHexPulse 4s ease-in-out infinite; } .sb-item[data-page="settings"]:hover .ico { animation-duration: 1.6s; } @keyframes settingsHexPulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(var(--neon-secondary-rgb), 0.45)) drop-shadow(0 0 12px rgba(var(--neon-primary-rgb), 0.30)); } 50% { filter: drop-shadow(0 0 10px rgba(var(--neon-secondary-rgb), 0.65)) drop-shadow(0 0 22px rgba(var(--neon-primary-rgb), 0.55)); } } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — SCOPE 1 · PLAYER IDENTITY (Dashboard profile card) Compact 3-row HUD — atmospheric grid + scanlines + drifting dots. All scoped under `.profile-card.dash-profile`. No global rules. ═════════════════════════════════════════════════════════════════ */ .profile-card.dash-profile { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: hidden; } /* Animated faint grid overlay (matches empty-state grid hue) */ .profile-card.dash-profile .pi-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(var(--neon-primary-rgb), 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--neon-secondary-rgb), 0.075) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at 30% 20%, #000 12%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 12%, transparent 80%); animation: backgroundPositionShift 12s linear infinite; opacity: 0.65; } @keyframes backgroundPositionShift { from { background-position: 0 0; } to { background-position: 36px 36px; } } /* Faint scanlines — matches the global scanline treatment */ .profile-card.dash-profile .pi-scan { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px ); opacity: 0.5; border-radius: inherit; } /* Drifting particles */ .profile-card.dash-profile .pi-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 6px #ffffff; pointer-events: none; z-index: 0; opacity: 0.55; animation: floatY 14s ease-in-out infinite; } .profile-card.dash-profile .pi-dot.d1 { left: 18%; top: 22%; animation-delay: -2s; } .profile-card.dash-profile .pi-dot.d2 { left: 72%; top: 64%; animation-delay: -7s; } .profile-card.dash-profile .pi-dot.d3 { left: 48%; top: 86%; animation-delay: -11s; } /* Holographic conic sweep on top of the existing ::before shine */ .profile-card.dash-profile::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: conic-gradient( from 0deg, transparent 0%, rgba(var(--neon-secondary-rgb), 0.07) 18%, transparent 32%, rgba(var(--neon-primary-rgb), 0.07) 60%, transparent 78%, rgba(var(--neon-primary-rgb), 0.07) 92%, transparent 100% ); mix-blend-mode: screen; animation: piConicSweep 18s linear infinite; z-index: 0; } @keyframes piConicSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Internal layout — three rows */ .profile-card.dash-profile .pi-rows { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto auto; gap: 12px; } /* Row A — identity bar */ .profile-card.dash-profile .pi-row-a { display: grid; grid-template-columns: 120px 1fr 96px; gap: 14px; align-items: center; } .profile-card.dash-profile .pi-avatar { width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; } .profile-card.dash-profile .pi-avatar .pfp { width: 100px; height: 100px; font-size: 38px; } .profile-card.dash-profile .pi-avatar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--neon-secondary), var(--neon-primary), var(--neon-secondary), var(--neon-primary)); padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pfpSpin 10s linear infinite, pfpPulse 3s ease-in-out infinite; } .profile-card.dash-profile .pi-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .profile-card.dash-profile .pi-id .hero-name { font-family: var(--f-arcade); font-size: 22px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; background: linear-gradient(100deg, #fff, var(--neon-secondary), var(--neon-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-card.dash-profile .pi-id .pi-title { font-family: var(--f-display); font-size: 12px; color: var(--t-2); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .profile-card.dash-profile .pi-rank-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-family: var(--f-arcade); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; border: 1px solid rgba(var(--neon-primary-rgb), 0.30); background: rgba(var(--neon-primary-rgb), 0.12); color: var(--neon-secondary); align-self: flex-start; margin-top: 2px; } /* Level circle (replaces standalone XP ring) */ .profile-card.dash-profile .pi-lv { width: 96px; height: 96px; position: relative; display: flex; align-items: center; justify-content: center; justify-self: end; } .profile-card.dash-profile .pi-lv svg { transform: rotate(-90deg); } .profile-card.dash-profile .pi-lv .pi-lv-bg { fill: none; stroke: rgba(var(--neon-primary-rgb), 0.10); stroke-width: 6; } .profile-card.dash-profile .pi-lv .pi-lv-fill { fill: none; stroke: url(#xpGrad); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease-smooth); filter: drop-shadow(0 0 8px rgba(var(--neon-secondary-rgb), 0.55)); } .profile-card.dash-profile .pi-lv-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .profile-card.dash-profile .pi-lv-center .pi-lv-lbl { font-family: var(--f-arcade); font-size: 8px; letter-spacing: 2px; color: var(--t-3); font-weight: 700; } .profile-card.dash-profile .pi-lv-center .pi-lv-num { font-family: var(--f-mono); font-size: 22px; font-weight: 800; background: linear-gradient(100deg, var(--neon-secondary), var(--neon-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; } .profile-card.dash-profile .pi-lv-center .pi-lv-pct { font-family: var(--f-mono); font-size: 9px; color: var(--t-2); font-weight: 600; } /* Row B — Stats strip */ .profile-card.dash-profile .pi-row-b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .profile-card.dash-profile .pi-stat { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--neon-primary-rgb), 0.25); background: rgba(var(--neon-primary-rgb), 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); animation: pageIn 0.4s var(--ease-smooth); } .profile-card.dash-profile .pi-stat .pi-stat-lbl { display: flex; align-items: center; gap: 5px; font-family: var(--f-arcade); font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-3); font-weight: 700; } .profile-card.dash-profile .pi-stat .pi-stat-lbl .ico { color: var(--neon-violet); } .profile-card.dash-profile .pi-stat .pi-stat-val { font-family: var(--f-mono); font-size: 16px; font-weight: 800; background: linear-gradient(100deg, var(--neon-secondary), var(--neon-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.05; } .profile-card.dash-profile .pi-stat .pi-stat-meta { font-family: var(--f-mono); font-size: 9.5px; color: var(--t-2); } .profile-card.dash-profile .pi-mini-bar { width: 100%; height: 4px; border-radius: 99px; background: rgba(var(--neon-primary-rgb), 0.15); overflow: hidden; margin-top: 2px; } .profile-card.dash-profile .pi-mini-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan)); transition: width 0.5s var(--ease-smooth); } /* Row C — Footer strip */ .profile-card.dash-profile .pi-row-c { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-faint); } .profile-card.dash-profile .pi-skills { display: flex; flex-direction: column; gap: 6px; } .profile-card.dash-profile .pi-c-title { font-family: var(--f-arcade); font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-3); font-weight: 700; margin-bottom: 2px; } .profile-card.dash-profile .pi-skill-row { display: grid; grid-template-columns: 50px 1fr 32px; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 9.5px; color: var(--t-2); } .profile-card.dash-profile .pi-skill-row > .pi-skill-bar { height: 4px; border-radius: 99px; background: rgba(var(--neon-primary-rgb), 0.15); overflow: hidden; } .profile-card.dash-profile .pi-skill-row > .pi-skill-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)); transition: width 0.5s var(--ease-smooth); } .profile-card.dash-profile .pi-skill-row .pi-skill-pct { text-align: right; } .profile-card.dash-profile .pi-next { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px dashed rgba(var(--neon-primary-rgb), 0.30); background: rgba(var(--neon-primary-rgb), 0.04); } .profile-card.dash-profile .pi-next .pi-next-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--neon-primary-rgb), 0.10); color: var(--neon-cyan); flex-shrink: 0; } .profile-card.dash-profile .pi-next .pi-next-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .profile-card.dash-profile .pi-next .pi-next-name { font-family: var(--f-arcade); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--t-1); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-card.dash-profile .pi-next .pi-next-meta { font-family: var(--f-mono); font-size: 9.5px; color: var(--t-2); } /* Responsive reflow — keep card alive at narrower widths */ @media (max-width: 1280px) { .profile-card.dash-profile .pi-row-a { grid-template-columns: 96px 1fr 80px; } .profile-card.dash-profile .pi-avatar { width: 96px; height: 96px; } .profile-card.dash-profile .pi-avatar .pfp { width: 80px; height: 80px; font-size: 30px; } .profile-card.dash-profile .pi-lv { width: 80px; height: 80px; } .profile-card.dash-profile .pi-row-b { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .profile-card.dash-profile .pi-row-a { grid-template-columns: 1fr; justify-items: center; text-align: center; } .profile-card.dash-profile .pi-id { align-items: center; } .profile-card.dash-profile .pi-rank-chip { align-self: center; } .profile-card.dash-profile .pi-lv { justify-self: center; } .profile-card.dash-profile .pi-row-c { grid-template-columns: 1fr; } } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — SCOPE 3 · QUEST DUPLICATE INSERTION Holographic fade + glow sweep on freshly cloned quest rows. ═════════════════════════════════════════════════════════════════ */ .quest-row.quest-just-cloned { animation: questCloneIn 0.55s var(--ease-smooth) both; box-shadow: 0 0 24px rgba(var(--neon-primary-rgb), 0.45), 0 0 48px rgba(var(--neon-secondary-rgb), 0.25); } @keyframes questCloneIn { 0% { opacity: 0; transform: translateY(-8px); box-shadow: 0 0 0 rgba(var(--neon-primary-rgb), 0); } 55% { opacity: 1; box-shadow: 0 0 28px rgba(var(--neon-primary-rgb), 0.55), 0 0 60px rgba(var(--neon-secondary-rgb), 0.35); } 100% { opacity: 1; transform: translateY(0); box-shadow: var(--shadow-1); } } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — SCOPE 4 · JOURNAL THREE-STATE BADGE & FUTURE LOCK ═════════════════════════════════════════════════════════════════ */ #journalStatusBadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-family: var(--f-arcade); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; border: 1px solid var(--line-soft); background: rgba(var(--neon-primary-rgb), 0.08); margin-left: 10px; } #journalStatusBadge.j-status-active { color: var(--neon-green); border-color: rgba(52, 211, 153, 0.40); background: rgba(52, 211, 153, 0.08); box-shadow: 0 0 12px rgba(52, 211, 153, 0.25); } #journalStatusBadge.j-status-archived { color: var(--neon-amber); border-color: rgba(245, 158, 11, 0.40); background: rgba(245, 158, 11, 0.06); } #journalStatusBadge.j-status-locked { color: var(--t-3); border-color: var(--line-soft); background: rgba(255, 255, 255, 0.02); } /* Future-day lock overlay (covers the editor textarea area) */ .journal-future-locked { position: relative; padding: 28px 18px; border: 1px dashed rgba(var(--neon-primary-rgb), 0.35); border-radius: 12px; background: rgba(var(--neon-primary-rgb), 0.04); text-align: center; color: var(--t-2); font-family: var(--f-arcade); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; } .journal-future-locked .ico { color: var(--neon-violet); margin-bottom: 6px; display: block; margin-left: auto; margin-right: auto; } /* Future-locked calendar cells */ .cal-cell.future-locked { opacity: 0.4; cursor: pointer; position: relative; } .cal-cell.future-locked::after { content: ''; position: absolute; inset: 4px; border-radius: 6px; background: repeating-linear-gradient( 45deg, rgba(var(--neon-primary-rgb), 0.10) 0 4px, transparent 4px 8px ); pointer-events: none; } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — SCOPE 5 · REMINDER SETTINGS CARD ROW SPACING ═════════════════════════════════════════════════════════════════ */ .reminder-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line-faint); gap: 10px; } .reminder-row:first-of-type { border-top: 0; } .reminder-row > .reminder-meta { flex: 1; min-width: 0; } .reminder-row .reminder-input { min-width: 120px; } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — DASHBOARD QUEST CARD (A.1) New compact card renderer used only by Today's Quests on the dashboard. Selectors are scoped to .quest-card so the page-level .quest-row rules stay untouched. ═════════════════════════════════════════════════════════════════ */ #dashQuests .quest-card, .quest-card { --quest-card-pad: 12px 14px; position: relative; display: flex; flex-direction: column; gap: 12px; padding: var(--quest-card-pad); margin-bottom: 8px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line-faint); box-shadow: var(--shadow-1); transition: transform var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-mid); overflow: hidden; } #dashQuests .quest-card:last-child { margin-bottom: 0; } #dashQuests .quest-card:hover { transform: translateY(-1px); border-color: var(--line-mid); box-shadow: var(--shadow-1), 0 0 14px rgba(var(--neon-primary-rgb), 0.18); } #dashQuests .quest-card__top { display: flex; align-items: center; gap: 10px; min-width: 0; } #dashQuests .quest-card__check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--line-mid); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--tr-fast); } #dashQuests .quest-card__check:hover { border-color: var(--neon-pink); box-shadow: 0 0 10px rgba(var(--neon-secondary-rgb), 0.40); } #dashQuests .quest-card__check.checked { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); border-color: transparent; color: #fff; box-shadow: 0 0 12px rgba(var(--neon-secondary-rgb), 0.50); } #dashQuests .quest-card__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t-1); } #dashQuests .quest-card__xp { flex-shrink: 0; } #dashQuests .quest-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #dashQuests .quest-card__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } #dashQuests .quest-card__actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--tr-fast); } #dashQuests .quest-card:hover .quest-card__actions { opacity: 1; } /* Done state */ #dashQuests .quest-card--done { opacity: 0.55; } #dashQuests .quest-card--done .quest-card__name { text-decoration: line-through; } /* Overdue state */ #dashQuests .quest-card--overdue { border-color: rgba(239, 68, 68, 0.35); } /* Pulsing left bar accent on the active (next overdue / first incomplete) card */ #dashQuests .quest-card--active::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan)); box-shadow: 0 0 10px rgba(var(--neon-secondary-rgb), 0.65); animation: questCardActivePulse 2.4s ease-in-out infinite; } @keyframes questCardActivePulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — A.4 · QUEST PENALTY FLASH Brief red pulse applied by app.js when a midnight penalty fires. ═════════════════════════════════════════════════════════════════ */ .quest-row.quest-penalty-flash, .quest-card.quest-penalty-flash { animation: questPenaltyFlash 0.6s ease-out; } @keyframes questPenaltyFlash { 0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); } 40% { box-shadow: 0 0 24px rgba(239, 68, 68, 0.55), 0 0 4px rgba(239, 68, 68, 0.40) inset; } 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); } } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — B · QUEST PAGE CHIP + ROW REFINEMENT (scoped) Standardized pill shape for chips on the Quests page only. The global .chip rule is unchanged. ═════════════════════════════════════════════════════════════════ */ #questList .quest-row .chip, #questList .quest-row .chip-rarity-common, #questList .quest-row .chip-rarity-rare, #questList .quest-row .chip-rarity-epic, #questList .quest-row .chip-rarity-legendary, #questList .quest-row .chip-rarity-mythic { height: 22px; min-height: 22px; border-radius: 11px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: 1.2px; line-height: 1; white-space: nowrap; } #questList .quest-row .chip .ico, #questList .quest-row .chip-rarity-common .ico, #questList .quest-row .chip-rarity-rare .ico, #questList .quest-row .chip-rarity-epic .ico, #questList .quest-row .chip-rarity-legendary .ico, #questList .quest-row .chip-rarity-mythic .ico { width: 11px; height: 11px; } /* B.3 — quest row alignment + ellipsis */ #questList .quest-row { align-items: center; min-height: 70px; } #questList .quest-row .quest-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #questList .quest-row .quest-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #questList .quest-row .quest-desc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #questList .quest-row .quest-actions { align-self: center; } /* B.4 — subtle hover lift */ #questList .quest-row { transition: var(--tr-fast), transform var(--tr-fast); } #questList .quest-row:hover { transform: translateY(-1px); } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — C · SETTINGS PAGE REFINEMENT (scoped to #page-settings) ═════════════════════════════════════════════════════════════════ */ #page-settings .card .flex-between { padding: 10px 0; gap: 14px; align-items: center; min-height: 48px; } #page-settings .card .flex-between > div:first-child { flex: 1; min-width: 0; } /* v2.6.2 — Profile avatar fix: the generic flex:1 row rule above also matches the Settings → Profile avatar (first child of its row) and was stretching the fixed 80×80 box into an oval. Hard-pin a rigid 1:1 box (min+max width AND height) so flex can neither grow nor shrink it. Two IDs outrank the row rule. */ #page-settings #settingsAvatar { flex: 0 0 80px !important; width: 80px !important; min-width: 80px !important; max-width: 80px !important; height: 80px !important; min-height: 80px !important; max-height: 80px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; overflow: hidden !important; } #page-settings #settingsAvatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } #page-settings .card .flex-between > div:first-child > div:first-child { font-weight: 700; font-size: 13px; line-height: 1.3; } #page-settings .card .flex-between > div:first-child .muted { font-size: 11px; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; } /* C.1 / C.2 — reminder rows tightened */ .reminder-row { min-height: 48px; align-items: center; } .reminder-row > .reminder-meta { padding-right: 12px; } .reminder-row .reminder-meta div:first-child { font-weight: 700; font-size: 13px; line-height: 1.3; } .reminder-row .reminder-meta .muted { font-size: 11px; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; } /* C.3 — dropdown + input polish (scoped) */ .reminder-row .reminder-input, #page-settings .reminder-row .select, #page-settings .reminder-row .input { height: 36px; min-width: 130px; max-width: 200px; padding: 0 14px; font-size: 13px; } .reminder-row .select { padding-right: 32px; } #inpRemSnooze { max-width: 100px; min-width: 80px; } #inpRemCustom { max-width: 100px; min-width: 80px; } /* C.4 — quiet-hours horizontal layout */ .reminder-row #inpQuietStart, .reminder-row #inpQuietEnd { height: 36px; min-width: 100px; max-width: 110px; padding: 0 10px; } .reminder-row .row { gap: 8px; align-items: center; } /* C.5 — toggle alignment within reminder rows */ .reminder-row > .tg { align-self: center; } /* ═════════════════════════════════════════════════════════════════ v2.6.2 — D · DAILY REFLECTION / END-OF-DAY REVIEW MODAL ═════════════════════════════════════════════════════════════════ */ .modal-reflection { max-width: 720px !important; background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); position: relative; /* Scroll vertically when the modal is taller than the screen (e.g. the Submit button on phones) — was `overflow:hidden`, which clipped the button off-screen. overflow-x stays hidden to keep the decorative floating dots from spilling sideways. */ overflow-y: auto; overflow-x: hidden; } .modal-reflection .reflection-date { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--t-2); letter-spacing: 1px; text-transform: none; } .modal-reflection .reflection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .modal-reflection .reflection-grid .stat-value { font-size: 22px; } .modal-reflection .reflection-grid .reflection-loss { background: linear-gradient(100deg, var(--neon-red), var(--neon-amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .modal-reflection .reflection-section { margin-bottom: 14px; } .modal-reflection .reflection-section-title { font-family: var(--f-arcade); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--t-2); font-weight: 700; margin-bottom: 8px; } .modal-reflection .reflection-pills { display: flex; gap: 8px; flex-wrap: wrap; } .modal-reflection .reflection-pill { padding: 8px 14px; border-radius: 99px; background: rgba(var(--neon-primary-rgb), 0.08); border: 1px solid rgba(var(--neon-primary-rgb), 0.30); color: var(--t-1); font-family: var(--f-arcade); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: all 0.18s var(--ease-smooth); } .modal-reflection .reflection-pill:hover { background: rgba(var(--neon-primary-rgb), 0.18); border-color: rgba(var(--neon-primary-rgb), 0.55); transform: translateY(-1px); } .modal-reflection .reflection-pill.selected { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); border-color: transparent; color: #fff; box-shadow: 0 0 16px rgba(var(--neon-secondary-rgb), 0.45); } .modal-reflection .reflection-pill[data-mood="1"].selected, .modal-reflection .reflection-pill[data-energy="1"].selected { background: linear-gradient(135deg, var(--neon-red), #b91c1c); box-shadow: 0 0 16px rgba(239, 68, 68, 0.45); } .modal-reflection .reflection-pill[data-mood="2"].selected, .modal-reflection .reflection-pill[data-energy="2"].selected { background: linear-gradient(135deg, var(--neon-amber), #d97706); box-shadow: 0 0 16px rgba(245, 158, 11, 0.45); } .modal-reflection .reflection-pill[data-mood="3"].selected, .modal-reflection .reflection-pill[data-energy="3"].selected { background: linear-gradient(135deg, var(--neon-violet), var(--neon-purple)); box-shadow: 0 0 16px rgba(var(--neon-primary-rgb), 0.45); } .modal-reflection .reflection-pill[data-mood="4"].selected, .modal-reflection .reflection-pill[data-energy="4"].selected { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue)); box-shadow: 0 0 16px rgba(var(--neon-primary-rgb), 0.45); } .modal-reflection .reflection-pill[data-mood="5"].selected, .modal-reflection .reflection-pill[data-energy="5"].selected { background: linear-gradient(135deg, var(--neon-green), #047857); box-shadow: 0 0 16px rgba(52, 211, 153, 0.45); } .modal-reflection .reflection-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .modal-reflection .reflection-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; opacity: 0.5; animation: floatY 14s ease-in-out infinite; } .modal-reflection .reflection-dot.d1 { left: 18%; top: 22%; animation-delay: -2s; } .modal-reflection .reflection-dot.d2 { left: 72%; top: 14%; animation-delay: -7s; } .modal-reflection .reflection-dot.d3 { left: 48%; top: 86%; animation-delay: -11s; } .modal-reflection .modal-title, .modal-reflection .reflection-grid, .modal-reflection .reflection-section, .modal-reflection .modal-actions { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════ Cloud Save — save-mode picker (Cloud vs Local) + sync indicator Additive only; uses existing theme tokens to match the HUD. ═══════════════════════════════════════════════════════════════════ */ .cloud-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 540px) { .cloud-mode-grid { grid-template-columns: 1fr; } } .cloud-mode-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 26px 18px; cursor: pointer; color: var(--t-1); background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); transition: transform var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast); } .cloud-mode-card:hover { transform: translateY(-3px); background: var(--surface-2); border-color: var(--line-mid); box-shadow: var(--glow-soft); } .cloud-mode-card:active { transform: translateY(-1px); } .cloud-mode-emoji { font-size: 34px; line-height: 1; } .cloud-mode-name { font-family: var(--f-arcade); font-weight: 800; font-size: 15px; letter-spacing: .3px; } .cloud-mode-desc { font-size: 11.5px; color: var(--t-2); line-height: 1.5; } /* Sync indicator (top corner) — a bare status dot, no text. red = not syncing · orange = syncing · green = synced. The full label is exposed only as a hover tooltip (title attr, set by the sync engine). */ .cloud-sync-indicator { display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; border: 0; background: none; cursor: default; user-select: none; } .cloud-sync-indicator .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--t-3); box-shadow: 0 0 8px transparent; transition: background var(--tr-fast), box-shadow var(--tr-fast); } .cloud-sync-indicator[data-state="synced"] .dot { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.85); } .cloud-sync-indicator[data-state="syncing"] .dot { background: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.85); animation: cloudPulse 1s var(--ease-smooth) infinite; } .cloud-sync-indicator[data-state="offline"] .dot { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.80); } @keyframes cloudPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ═══════════════════════════════════════════════════════════════════ Login wall (compulsory sign-in). Sits below the titlebar (z 9500) so minimize / close / drag remain usable — the user is never trapped. ═══════════════════════════════════════════════════════════════════ */ .login-wall { position: fixed; top: var(--titlebar-h, 0px); left: 0; right: 0; bottom: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--neon-primary-rgb),0.18), transparent 60%), rgba(4, 2, 12, 0.92); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); } .login-card { width: 100%; max-width: 380px; padding: 32px 30px; border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line-soft); box-shadow: var(--shadow-3), 0 0 60px rgba(var(--neon-primary-rgb),0.18); text-align: center; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; } .login-name { font-family: var(--f-arcade); font-size: 20px; font-weight: 800; letter-spacing: 6px; background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .login-sub { color: var(--t-2); font-size: 13px; margin: 6px 0 18px; } /* Tabs (Sign In | Create Account) */ .login-tabs { display: none; margin: 4px 0 18px; background: var(--surface-2, rgba(255,255,255,.04)); border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px); padding: 4px; gap: 4px; } .login-tab { flex: 1; padding: 9px 8px; background: none; border: 0; border-radius: var(--r-sm, 8px); color: var(--t-2); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s ease; } .login-tab:hover { color: var(--t-1); } .login-wall[data-state="login"] .login-tab[data-tab="login"], .login-wall[data-state="signup"] .login-tab[data-tab="signup"], .login-wall[data-state="signup2"] .login-tab[data-tab="signup"] { color: #fff; background: linear-gradient(90deg, var(--neon-violet), var(--neon-pink)); box-shadow: 0 0 16px rgba(var(--neon-primary-rgb),.4); } /* State machine: show only the active sub-panel */ .login-wall .login-checking, .login-wall .login-signin, .login-wall .login-signup-1, .login-wall .login-signup-2, .login-wall .login-verify, .login-wall .login-forgot, .login-wall .login-forgot-sent, .login-wall .login-reset { display: none; } .login-wall[data-state="checking"] .login-checking { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; } .login-wall[data-state="login"] .login-signin { display: block; } .login-wall[data-state="signup"] .login-signup-1 { display: block; } .login-wall[data-state="signup2"] .login-signup-2 { display: block; } .login-wall[data-state="verify"] .login-verify { display: block; text-align: center; } .login-wall[data-state="forgot"] .login-forgot { display: block; } .login-wall[data-state="forgot-sent"] .login-forgot-sent { display: block; text-align: center; } .login-wall[data-state="reset"] .login-reset { display: block; } .login-wall[data-state="login"] .login-tabs, .login-wall[data-state="signup"] .login-tabs, .login-wall[data-state="signup2"] .login-tabs { display: flex; } /* Web: signing in is optional — the guest escape shows only on the sign-in / create-account states (never mid-flow: checking / verify / reset). */ .login-guest-row { display: none; text-align: center; margin-top: 14px; } .login-wall[data-state="login"] .login-guest-row, .login-wall[data-state="signup"] .login-guest-row, .login-wall[data-state="signup2"] .login-guest-row { display: block; } /* "Browser saves are Premium" popup — appears once when the app is opened in the browser (not on every sign-in). */ .browser-notice { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(6,4,18,.72); backdrop-filter: blur(4px); } .browser-notice-card { max-width: 420px; width: 100%; text-align: center; padding: 26px 26px 22px; border-radius: 16px; background: rgba(18,14,38,.96); border: 1px solid rgba(251,191,36,.30); box-shadow: 0 24px 60px rgba(0,0,0,.55); } .bn-ico { font-size: 34px; line-height: 1; margin-bottom: 10px; } .bn-title { font-family: var(--f-arcade, inherit); letter-spacing: 1px; font-size: 16px; margin: 0 0 12px; color: var(--ink, #e9e6ff); } .bn-text { font-size: 13px; line-height: 1.55; margin: 0 0 10px; color: var(--ink, #e9e6ff); } .bn-text strong { color: #fbbf24; font-weight: 700; } .bn-sub { color: #b9b4d6; font-size: 12.5px; } .bn-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } /* Download-intent banner — shown when the user arrived via a Download button */ .login-dl-hint { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 16px; padding: 11px 13px; border-radius: 12px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.30); font-size: 12.5px; line-height: 1.5; color: var(--ink, #e9e6ff); text-align: left; } .login-dl-hint-ico { font-size: 15px; line-height: 1.35; flex-shrink: 0; color: #22d3ee; } .login-dl-hint strong { color: #67e8f9; font-weight: 700; } .login-full { width: 100%; justify-content: center; margin-top: 4px; } .login-switch { font-size: 12px; margin-top: 14px; } .login-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--neon-cyan); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .login-link:hover { color: var(--neon-violet); } .login-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line-soft); border-top-color: var(--neon-violet); animation: loginSpin 0.8s linear infinite; } @keyframes loginSpin { to { transform: rotate(360deg); } } /* ── SKELETON LOADING (shimmer placeholders) ───────────────────────── Used only where content genuinely loads over the network (auth check on the login wall, cloud-status card in Settings). Dimensions mirror the real content they stand in for, so the swap causes no layout shift. */ .skel { position: relative; overflow: hidden; background: var(--surface-2, rgba(255,255,255,.05)); border-radius: 10px; } .skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(168,85,247,.13) 45%, rgba(34,211,238,.10) 55%, transparent 75%); transform: translateX(-100%); animation: skelSweep 1.4s ease-in-out infinite; } @keyframes skelSweep { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } .skel-line { height: 12px; border-radius: 6px; margin: 5px 0; } /* Login wall "checking" state: skeleton of the sign-in form it resolves into (tabs → two fields → primary button), then spinner + status line. */ .login-skel { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; } .login-skel-tabs { height: 38px; } .login-skel-field { height: 44px; opacity: .8; } .login-skel-btn { height: 44px; opacity: .9; background: linear-gradient(90deg, rgba(236,72,153,.10), rgba(124,58,237,.14), rgba(34,211,238,.10)); } .login-checking-row { display: flex; align-items: center; gap: 10px; } .login-checking-row .login-spinner { width: 18px; height: 18px; border-width: 2px; } .login-google-btn { width: 100%; justify-content: center; } .login-divider { display: flex; align-items: center; gap: 10px; color: var(--t-3); font-size: 11px; letter-spacing: 1px; margin: 16px 0; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-faint); } .login-wall .field { margin-bottom: 10px; } .login-wall .input { width: 100%; } .login-error { color: #fb7185; font-size: 12px; min-height: 16px; margin: 2px 0 12px; line-height: 1.4; } .login-foot { font-size: 11px; margin-top: 16px; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════ Settings — tabbed sub-navigation (Profile / Appearance / Audio / Options / Desktop / Backup). Left rail switches the visible panel. ═══════════════════════════════════════════════════════════════════ */ .settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; } .settings-nav { display: flex; flex-direction: column; gap: 9px; position: sticky; top: 8px; } .settings-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 20px; /* Dark capsule (cylindric) chip matching the app theme */ background: linear-gradient(180deg, var(--surface-2), var(--surface-0)); border: 1px solid var(--line-faint); border-radius: 100px; color: var(--t-2); font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; transition: all .15s ease; box-shadow: var(--shadow-1); } .settings-nav-item .ico { color: var(--t-3); transition: color .15s ease; } .settings-nav-item:hover { background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border-color: var(--line-soft); color: var(--t-1); transform: translateX(2px); } .settings-nav-item:hover .ico { color: var(--t-1); } .settings-nav-item.active { /* Dark capsule base (edges stay dark like unselected) with a centered glow that smoothly merges outward toward the borders. */ background: radial-gradient(78% 135% at 50% 50%, color-mix(in srgb, var(--neon-primary) 42%, transparent) 0%, color-mix(in srgb, var(--neon-secondary) 18%, transparent) 42%, transparent 74%), linear-gradient(180deg, var(--surface-2), var(--surface-0)); border-color: var(--line-mid); color: #fff; box-shadow: var(--glow-soft); } .settings-nav-item.active .ico { color: var(--neon-pink); } .settings-tab { display: none; animation: settingsFade .2s ease; } .settings-tab.active { display: block; } @keyframes settingsFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { flex-direction: row; flex-wrap: wrap; position: static; } .settings-nav-item { width: auto; flex: 1 1 auto; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ HABITS — weekly tracker, habit cards, chips (added for Habits page) ═══════════════════════════════════════════════════════════════════ */ .habit-weekly { display: flex; flex-direction: column; gap: 6px; } .hw-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(7, 1fr) 56px; align-items: center; gap: 4px; } .hw-head .hw-cell { font-size: 11px; line-height: 1.2; opacity: .8; text-align: center; padding: 2px 0; } .hw-head .hw-cell.today { color: var(--neon-pink, #ff2bd6); opacity: 1; font-weight: 700; } .hw-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-soft, #cbd5e1); } .hw-cell { display: grid; place-items: center; height: 34px; border-radius: 8px; transition: background .15s ease; } .hw-cell:not(.hw-head .hw-cell):hover { background: rgba(255,255,255,.04); } .hw-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid var(--line-faint, rgba(255,255,255,.12)); } .hw-dot.done { border: none; } .hw-dot.miss { background: transparent; border: 1px solid rgba(239,68,68,.55); box-shadow: inset 0 0 0 2px rgba(239,68,68,.12); } .hw-rate-head { font-size: 11px; opacity: .8; text-align: center; } .hw-rate-cell { text-align: center; line-height: 1.1; } .hw-rate { font-family: var(--f-mono); font-size: 12px; font-weight: 700; } .hw-rate-pct { font-family: var(--f-mono); font-size: 10px; color: var(--t-3, #94a3b8); } .hw-legend { display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-faint, rgba(255,255,255,.08)); } .hw-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t-3, #94a3b8); } .hw-leg .hw-dot { width: 11px; height: 11px; } /* Consistency Map — combined heatmap + LESS→MORE legend */ .hc-legend { display: flex; align-items: center; gap: 4px; } .hc-legend-cell { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-faint, rgba(255,255,255,.08)); } .habit-consistency .heat-cell { border-radius: 3px; aspect-ratio: 1/1; min-width: 0; } .habit-card { display: flex; flex-direction: column; } .habit-card .habit-heat .heat-cell { aspect-ratio: 1/1; min-width: 0; } .btn-block { width: 100%; justify-content: center; } /* active state for preset/selection chips */ .chip.active { border-color: var(--neon-pink, #ff2bd6); color: #fff; box-shadow: 0 0 10px rgba(var(--neon-secondary-rgb, 255,43,214), .35); } /* ═══════════════════════════════════════════════════════════════════ TASK BOARD — day carousel, focused day, common rail ═══════════════════════════════════════════════════════════════════ */ .tb-daystrip { display: flex; align-items: stretch; gap: 8px; margin-bottom: 14px; } .tb-nav { align-self: center; flex: 0 0 auto; } .tb-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex: 1; } .tb-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; cursor: pointer; position: relative; background: rgba(255,255,255,.03); border: 1px solid var(--line-faint, rgba(255,255,255,.10)); color: var(--text-soft, #cbd5e1); transition: transform .15s ease, border-color .15s ease, background .15s ease; } .tb-chip:hover { transform: translateY(-2px); border-color: rgba(var(--neon-primary-rgb),.5); } .tb-chip.today { border-color: rgba(var(--neon-secondary-rgb), .55); } .tb-chip.sel { background: linear-gradient(160deg, rgba(var(--neon-primary-rgb),.28), rgba(var(--neon-secondary-rgb),.18)); border-color: var(--neon-pink, #ff2bd6); box-shadow: 0 0 16px rgba(var(--neon-secondary-rgb),.30); color: #fff; } .tb-chip.drop { border-style: dashed; border-color: var(--neon-pink, #ff2bd6); background: rgba(var(--neon-secondary-rgb),.16); } .tb-chip-dow { font-size: 10px; letter-spacing: .08em; opacity: .8; } .tb-chip-num { font-size: 20px; font-weight: 800; line-height: 1; font-family: var(--font-display, inherit); } .tb-chip-meta { font-size: 10px; opacity: .7; } .tb-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-pink, #ff2bd6); position: absolute; top: 7px; right: 8px; box-shadow: 0 0 6px var(--neon-pink, #ff2bd6); } .tb-chip-dot.full { background: #34d399; box-shadow: 0 0 6px #34d399; } .tb-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; } @media (max-width: 900px){ .tb-layout { grid-template-columns: 1fr; } } .tb-day { padding: 16px; position: relative; overflow: hidden; } .tb-day-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .tb-day-title { font-size: 18px; font-weight: 800; font-family: var(--font-display, inherit); background: linear-gradient(90deg, var(--neon-pink,#ff2bd6), var(--neon-cyan,#22d3ee)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tb-day-prog { font-weight: 800; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--line-faint, rgba(255,255,255,.12)); } .tb-quickadd { display: flex; gap: 8px; margin-bottom: 14px; } .tb-quickadd .input { flex: 1; } .tb-tasklist { display: flex; flex-direction: column; gap: 8px; min-height: 80px; border-radius: 12px; transition: background .15s ease; } .tb-tasklist.drop { background: rgba(var(--neon-secondary-rgb),.08); outline: 1px dashed rgba(var(--neon-pink-rgb,255,43,214),.5); outline-offset: 4px; } .tb-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line-faint, rgba(255,255,255,.10)); border-left: 3px solid var(--pc, #f59e0b); transition: transform .12s ease, opacity .2s ease; } .tb-task:hover { transform: translateX(2px); } .tb-task.done { opacity: .55; } .tb-task.done .tb-task-title { text-decoration: line-through; } .tb-check { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.04); border: 1.5px solid var(--pc, #f59e0b); } .tb-task.done .tb-check { background: var(--pc, #34d399); } .tb-task-ic { flex: 0 0 auto; opacity: .85; } .tb-task-main { flex: 1; min-width: 0; } .tb-task-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-task-meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: center; } .tb-task-meta .chip { font-size: 10px; padding: 1px 8px; } .tb-xp { color: var(--neon-cyan, #22d3ee); border-color: rgba(34,211,238,.4); } .tb-empty { text-align: center; padding: 32px 12px; opacity: .85; } /* task meta mini-tags (priority pill w/ icon + xp) */ .mini-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-faint, rgba(255,255,255,.12)); color: var(--t-2, #94a3b8); text-transform: capitalize; line-height: 1.6; } .mini-xp { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-mono, monospace); font-size: 10px; font-weight: 700; color: var(--neon-cyan, #22d3ee); } /* quick-add priority dots (replaces the priority