/* ======================================== THEME SYSTEM - CSS Custom Properties ======================================== */ :root { /* Font */ --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Fira Code', monospace; /* Background */ --bg-primary: #1a1a2e; --bg-secondary: rgba(255, 255, 255, 0.08); --bg-tertiary: rgba(255, 255, 255, 0.06); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-image: url('/assets/background.webp'); --bg-image-fallback: url('/assets/background.jpg'); --bg-image-opacity: 1; /* Text */ --text-primary: #ffffff; --text-secondary: #e8e8f0; --text-muted: #c5c5e0; --text-dim: #b0b0c0; /* Accent Colors */ --accent-primary: #ffd93d; --accent-secondary: #e8d5ff; --accent-success: #4ecca3; --accent-warning: #ffc107; --accent-danger: #ff6b6b; /* Habit Button - Uncompleted (~90% of completed brightness) */ --habit-bg: linear-gradient(180deg, rgba(85, 205, 166, 1) 0%, rgba(72, 185, 148, 1) 100%); --habit-text: rgba(21, 67, 56, 1); --habit-border: rgba(56, 166, 132, 1); --habit-shadow: rgba(38, 138, 108, 1); --habit-glow: rgba(78, 204, 163, 0.35); --habit-check: rgba(26, 82, 56, 1); /* Habit Button - Completed (vibrant green - activated) */ --habit-done-bg: linear-gradient(180deg, rgba(94, 227, 184, 1) 0%, rgba(78, 204, 163, 1) 100%); --habit-done-text: rgba(13, 48, 37, 1); --habit-done-border: rgba(61, 184, 146, 1); --habit-done-shadow: rgba(42, 154, 120, 1); --habit-done-glow: rgba(78, 204, 163, 0.4); --habit-done-check: rgba(26, 92, 58, 1); /* Semantic button colors (for save/action buttons in modals) */ --btn-primary-bg: var(--accent-success); --btn-primary-text: #0d3025; --btn-primary-glow: rgba(78, 204, 163, 0.3); --btn-secondary-bg: var(--accent-primary); --btn-secondary-text: #3d2e00; --btn-secondary-glow: rgba(255, 215, 0, 0.3); /* Streak */ --streak-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 180, 0, 0.15) 100%); --streak-text: #ffd93d; --streak-border: rgba(255, 215, 0, 0.2); --streak-shadow: rgba(255, 215, 0, 0.15); /* Cards & Containers */ --card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); --card-border: rgba(255, 255, 255, 0.08); --card-shadow: none; /* Modal */ --modal-bg: linear-gradient(180deg, #1e2449 0%, #1a1a2e 100%); --modal-border: rgba(255, 255, 255, 0.1); /* Input */ --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.15); --input-focus: #5ee3b8; /* Misc */ --border-radius-sm: 12px; --border-radius-md: 16px; --border-radius-lg: 24px; --border-radius-xl: 28px; --shadow-depth: 6px; --button-style: raised; /* raised, flat, neumorphic */ /* Drop Shadows - themes can override */ --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --card-drop-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); /* Chart Colors */ --chart-dishes: #4ecca3; --chart-bedtime: #ffd700; --chart-grid: rgba(255, 255, 255, 0.05); --chart-text: #d0d0d0; /* Habit Dot States (Calendar Week View) */ --dot-done: #4ecca3; --dot-empty: #666666; --dot-rest: #444444; --dot-selected: #ffffff; /* Dynamic Habit Button - colors set above in Button States section */ /* Uncompleted: --habit-bg (muted gray-green) */ /* Completed: --habit-done-bg (vibrant teal) */ /* Progress Ring */ --ring-stroke-width: 4; --ring-track-opacity: 0.15; --ring-stroke-primary: #1a6b50; /* Darker teal for contrast */ --ring-stroke-secondary: #8b7000; /* Darker gold for contrast */ --ring-border-overdue: #2d8a6a; /* Animated Border Glow Colors (habit-1 through habit-12) */ --glow-1: rgba(78, 204, 163, 0.7); /* teal */ --glow-2: rgba(255, 215, 0, 0.7); /* gold */ --glow-3: rgba(147, 112, 219, 0.7); /* purple */ --glow-4: rgba(255, 107, 107, 0.7); /* coral */ --glow-5: rgba(100, 181, 246, 0.7); /* sky blue */ --glow-6: rgba(255, 183, 77, 0.7); /* orange */ --glow-7: rgba(174, 213, 129, 0.7); /* lime */ --glow-8: rgba(240, 98, 146, 0.7); /* pink */ --glow-9: rgba(128, 222, 234, 0.7); /* cyan */ --glow-10: rgba(255, 138, 128, 0.7); /* salmon */ --glow-11: rgba(179, 157, 219, 0.7); /* lavender */ --glow-12: rgba(129, 199, 132, 0.7); /* mint */ /* History */ --history-dishes: #5ee3b8; --history-bedtime: #ffd93d; /* Navigation */ --nav-bg: rgba(255, 255, 255, 0.08); --nav-arrow-bg: rgba(255, 255, 255, 0.15); --nav-today: #5ee3b8; /* Toast */ --toast-bg: linear-gradient(135deg, #2a2a4e 0%, #1a1a2e 100%); --toast-success-bg: linear-gradient(135deg, #5ee3b8 0%, #4ecca3 100%); --toast-success-text: #0d3025; --toast-error-bg: linear-gradient(135deg, #ff6b6b 0%, #e55555 100%); /* Title Gradient */ --title-gradient: linear-gradient(135deg, #fff 0%, #e8d5ff 50%, #ffd93d 100%); /* Special Effects */ --glow-effect: none; --backdrop-blur: blur(12px); /* Background Pattern (for non-image themes) */ --bg-pattern: none; --bg-pattern-size: auto; } * { margin: 0; padding: 0; box-sizing: border-box; touch-action: manipulation; /* Disable double-tap zoom */ } body { font-family: var(--font-primary); background: var(--bg-primary); min-height: 100vh; min-height: -webkit-fill-available; color: var(--text-primary); font-size: 18px; line-height: 1.5; padding: 24px; padding-top: calc(60px + max(12px, env(safe-area-inset-top))); padding-bottom: max(48px, env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); transition: background 0.3s ease, color 0.3s ease; } /* ======================================== HUD BAR - Fixed top, notch-aware ======================================== */ .hud-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hud-left, .hud-right { display: flex; align-items: center; gap: 8px; } /* HUD Streaks */ .hud-streaks { display: flex; align-items: center; gap: 6px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; background: linear-gradient(135deg, rgba(255, 107, 53, 0.3) 0%, rgba(255, 165, 0, 0.2) 100%); border-radius: 20px; border: 1px solid rgba(255, 140, 0, 0.4); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hud-streaks:hover { transform: scale(1.05); box-shadow: 0 0 12px rgba(255, 140, 0, 0.4); } .hud-streaks:active { transform: scale(0.98); } .hud-streaks:focus-visible { outline: 2px solid #ffcc80; outline-offset: 2px; } .streak-icon { font-size: 1.1rem; } #hud-streak-value { font-size: 1rem; font-weight: 700; color: #ffcc80; } .streak-label { font-size: 0.75rem; color: rgba(255, 200, 128, 0.8); margin-left: -2px; } /* Recovery Gems */ .recovery-gems { display: flex; align-items: center; gap: 6px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(186, 85, 211, 0.2) 100%); border-radius: 20px; border: 1px solid rgba(186, 85, 211, 0.4); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .recovery-gems:hover { transform: scale(1.05); box-shadow: 0 0 12px rgba(186, 85, 211, 0.4); } .recovery-gems:active { transform: scale(0.98); } .recovery-gems:focus-visible { outline: 2px solid #e0b0ff; outline-offset: 2px; } .gem-icon { font-size: 1.1rem; } #gems-count { font-size: 1rem; font-weight: 700; color: #e0b0ff; } /* HUD Badges */ .hud-badges { display: flex; align-items: center; gap: 6px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; background: linear-gradient(135deg, rgba(255, 165, 0, 0.3) 0%, rgba(218, 165, 32, 0.2) 100%); border-radius: 20px; border: 1px solid rgba(218, 165, 32, 0.4); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hud-badges:hover { transform: scale(1.05); box-shadow: 0 0 12px rgba(218, 165, 32, 0.4); } .hud-badges:active { transform: scale(0.98); } .hud-badges:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; } .badge-icon { font-size: 1.1rem; } #badges-count { font-size: 1rem; font-weight: 700; color: #ffd700; } /* HUD Points */ .hud-points { display: flex; align-items: center; gap: 6px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 215, 0, 0.2) 100%); border-radius: 20px; border: 1px solid rgba(255, 215, 0, 0.4); position: relative; overflow: visible; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hud-points:hover { transform: scale(1.05); box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); } .hud-points:active { transform: scale(0.98); } .hud-points:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; } #hud-points-value { font-size: 1.1rem; font-weight: 800; color: var(--accent-primary); min-width: 30px; text-align: right; transition: transform 0.15s ease; } #hud-points-value.counting { transform: scale(1.2); color: #fff; } .hud-points-icon { font-size: 1.1rem; } /* Points gain indicator */ .hud-points-gain { position: absolute; top: -8px; right: -8px; background: var(--accent-success); color: #1a1a2e; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; animation: hud-points-pop 0.8s ease-out forwards; pointer-events: none; } @keyframes hud-points-pop { 0% { opacity: 1; transform: translateY(0) scale(1); } 60% { opacity: 1; transform: translateY(-15px) scale(1.1); } 100% { opacity: 0; transform: translateY(-25px) scale(0.8); } } /* Badge counter celebration pulse */ @keyframes badge-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); } 50% { transform: scale(1.15); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); } } .hud-badges.celebrating { animation: badge-pulse 0.6s ease-out; } /* Fixed background that works on iOS */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-image) no-repeat center center; background-size: cover; z-index: -2; opacity: var(--bg-image-opacity); transition: opacity 0.3s ease; } /* Dark overlay on background */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-overlay); z-index: -1; transition: background 0.3s ease; } /* For non-image themes: show pattern instead of image */ body.no-bg-image::before { background: var(--bg-pattern); background-size: var(--bg-pattern-size); opacity: 1; } .container { max-width: 500px; margin: 0 auto; } /* Stars are now part of the watercolor background image */ .stars { display: none; } @media (prefers-reduced-motion: reduce) { .flame { animation: none !important; } .habit-btn:active:not(:disabled) { transform: none; } } /* Header with greeting */ .header { text-align: center; margin-bottom: 28px; position: relative; z-index: 1; } .greeting { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.3px; transition: color 0.3s ease; } .greeting .name { color: var(--accent-primary); font-weight: 700; } .header h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; background: var(--title-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } .fun-message { font-size: 1rem; color: var(--text-muted); font-style: italic; min-height: 1.3em; } .personal-spot { margin-top: 8px; } .greeting { text-shadow: var(--text-shadow); } .streak-section { text-align: center; margin-bottom: 24px; position: relative; z-index: 1; } .streak { display: inline-flex; align-items: center; gap: 8px; background: var(--streak-bg); padding: 10px 20px; border-radius: 25px; font-size: 1.1rem; font-weight: 700; color: var(--streak-text); box-shadow: 0 4px 15px var(--streak-shadow), var(--card-drop-shadow); border: 1px solid var(--streak-border); transition: all 0.3s ease; text-shadow: var(--text-shadow); } .streak.inactive { background: var(--bg-secondary); color: var(--text-dim); box-shadow: none; border-color: var(--card-border); } .flame { font-size: 1.3rem; animation: flicker 0.5s infinite alternate; } @keyframes flicker { from { transform: scale(1); } to { transform: scale(1.15); } } /* Grace day indicator */ .grace-indicator { font-size: 0.95rem; color: var(--text-dim); margin-top: 12px; } .grace-indicator .used { color: var(--accent-primary); font-weight: 600; } /* Gamification Badges Container */ .gamification-badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Points Badge */ .points-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 215, 0, 0.15) 100%); padding: 10px 18px; border-radius: 25px; font-size: 1.1rem; font-weight: 700; color: var(--accent-primary); box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2); border: 1px solid rgba(255, 193, 7, 0.3); transition: all 0.3s ease; position: relative; overflow: visible; } .points-badge:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3); } .points-icon { font-size: 1.2rem; } .points-label { font-size: 0.85rem; opacity: 0.8; font-weight: 600; } /* Points Gain Animation */ .points-floater { position: absolute; top: -10px; right: -5px; background: var(--accent-success); color: #1a1a2e; padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; animation: points-float 1s ease-out forwards; pointer-events: none; z-index: 10; } @keyframes points-float { 0% { opacity: 1; transform: translateY(0) scale(1); } 50% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { opacity: 0; transform: translateY(-40px) scale(0.8); } } /* Milestone Badges */ .milestone-badges { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; min-height: 32px; } .milestone-badge { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 180, 0, 0.15) 100%); border: 1px solid rgba(255, 215, 0, 0.3); cursor: default; transition: transform 0.2s ease, box-shadow 0.2s ease; } .milestone-badge:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); } .milestone-emoji { font-size: 1.1rem; } .milestone-preview { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.2); } .milestone-preview .milestone-emoji.locked { opacity: 0.4; filter: grayscale(0.8); font-size: 0.9rem; } .milestone-progress { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; } /* Settings footer */ .settings-footer { text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--card-border); position: relative; z-index: 1; } .settings-link { background: var(--bg-secondary); border: 1px solid var(--card-border); color: var(--text-muted); font-size: 1rem; font-weight: 600; font-family: var(--font-primary); cursor: pointer; padding: 12px 24px; border-radius: var(--border-radius-sm); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .settings-link:hover, .settings-link:focus { background: var(--bg-tertiary); color: var(--text-primary); outline: none; } .settings-link:focus-visible { outline: 2px solid var(--accent-success); outline-offset: 2px; } .settings-link span { font-size: 1.2rem; } /* Date Navigator */ .date-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; padding: 12px 20px; background: var(--nav-bg); border-radius: var(--border-radius-md); backdrop-filter: var(--backdrop-blur); transition: all 0.3s ease; } .date-nav.hidden { display: none; } .nav-arrow { background: var(--nav-arrow-bg); border: none; color: var(--text-primary); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .nav-arrow:hover:not(:disabled) { background: var(--bg-tertiary); transform: scale(1.05); } .nav-arrow:active:not(:disabled) { transform: scale(0.92); } .nav-arrow:focus-visible { outline: 3px solid var(--accent-success); outline-offset: 3px; } .nav-arrow:disabled { opacity: 0.3; cursor: not-allowed; } .date-display { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); min-width: 140px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); cursor: pointer; } .date-display:not(.today-label):hover { text-decoration: underline; text-underline-offset: 4px; } .date-display.today-label { color: var(--nav-today); font-weight: 800; cursor: default; } /* Main buttons */ .buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; position: relative; z-index: 1; touch-action: pan-y; } /* ======================================== HABIT WRAPPER - Button + Stats Tray ======================================== */ .habit-wrapper { position: relative; /* Establish stacking context for animated border pseudo-elements */ z-index: 0; isolation: isolate; /* Pre-allocate space for tray to prevent layout shift */ margin-bottom: 0; } .habit-wrapper.has-tray { margin-bottom: 0; } /* ======================================== ANIMATED "ALIVE" BORDER - Draws attention Only shows on uncompleted habits Uses optimized conic-gradient technique ======================================== */ /* Glow colors for all habit states (uncompleted AND completed) */ /* Default fallback - uses first glow color */ .habit-wrapper { --glow-color: var(--glow-1); } /* Glow color per habit slot (1-12) - themes can override these */ .habit-wrapper.habit-1 { --glow-color: var(--glow-1); } .habit-wrapper.habit-2 { --glow-color: var(--glow-2); } .habit-wrapper.habit-3 { --glow-color: var(--glow-3); } .habit-wrapper.habit-4 { --glow-color: var(--glow-4); } .habit-wrapper.habit-5 { --glow-color: var(--glow-5); } .habit-wrapper.habit-6 { --glow-color: var(--glow-6); } .habit-wrapper.habit-7 { --glow-color: var(--glow-7); } .habit-wrapper.habit-8 { --glow-color: var(--glow-8); } .habit-wrapper.habit-9 { --glow-color: var(--glow-9); } .habit-wrapper.habit-10 { --glow-color: var(--glow-10); } .habit-wrapper.habit-11 { --glow-color: var(--glow-11); } .habit-wrapper.habit-12 { --glow-color: var(--glow-12); } /* CSS @property for animatable border angle */ @property --border-angle { syntax: ''; inherits: false; initial-value: 0deg; } /* Animated border - ROTATING GLOW on BUTTON only (not wrapper/tray) Uses animated conic-gradient mask on solid border ring */ .habit-btn:not(.done)::before { content: ''; position: absolute; inset: -3px; /* 3px outside button for subtle border ring */ border-radius: calc(var(--border-radius-lg) + 3px); /* Solid ring - glow color at reduced opacity */ border: 3px solid var(--glow-color); background: transparent; opacity: 0.6; /* Animated conic mask - reveals traveling portion of the ring */ -webkit-mask: conic-gradient( from var(--border-angle), transparent 0%, white 8%, white 12%, transparent 22%, transparent 100% ); mask: conic-gradient( from var(--border-angle), transparent 0%, white 8%, white 12%, transparent 22%, transparent 100% ); animation: rotate-border 5s linear infinite; z-index: -1; pointer-events: none; } /* Ambient glow - soft pulse behind the rotating border */ .habit-btn:not(.done)::after { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--border-radius-lg) + 4px); box-shadow: 0 0 8px color-mix(in srgb, var(--glow-color) 40%, transparent), 0 0 16px color-mix(in srgb, var(--glow-color) 25%, transparent); z-index: -2; pointer-events: none; animation: glow-pulse 4s ease-in-out infinite alternate; } @keyframes rotate-border { from { --border-angle: 0deg; } to { --border-angle: 360deg; } } @keyframes glow-pulse { 0% { opacity: 0.3; } 100% { opacity: 0.5; } } /* Offset glow rotations so buttons aren't synchronized - uses randomized delays */ .habit-wrapper.habit-1 .habit-btn:not(.done)::before { animation-delay: 0s; } .habit-wrapper.habit-2 .habit-btn:not(.done)::before { animation-delay: -1.7s; } .habit-wrapper.habit-3 .habit-btn:not(.done)::before { animation-delay: -3.2s; } .habit-wrapper.habit-4 .habit-btn:not(.done)::before { animation-delay: -0.9s; } .habit-wrapper.habit-5 .habit-btn:not(.done)::before { animation-delay: -2.5s; } .habit-wrapper.habit-6 .habit-btn:not(.done)::before { animation-delay: -4.1s; } .habit-wrapper.habit-7 .habit-btn:not(.done)::before { animation-delay: -0.4s; } .habit-wrapper.habit-8 .habit-btn:not(.done)::before { animation-delay: -2.8s; } .habit-wrapper.habit-9 .habit-btn:not(.done)::before { animation-delay: -1.3s; } .habit-wrapper.habit-10 .habit-btn:not(.done)::before { animation-delay: -3.9s; } .habit-wrapper.habit-11 .habit-btn:not(.done)::before { animation-delay: -2.1s; } .habit-wrapper.habit-12 .habit-btn:not(.done)::before { animation-delay: -4.6s; } /* Also offset the glow-pulse (::after) for consistency */ .habit-wrapper.habit-1 .habit-btn:not(.done)::after { animation-delay: 0s; } .habit-wrapper.habit-2 .habit-btn:not(.done)::after { animation-delay: -1.2s; } .habit-wrapper.habit-3 .habit-btn:not(.done)::after { animation-delay: -2.7s; } .habit-wrapper.habit-4 .habit-btn:not(.done)::after { animation-delay: -0.6s; } .habit-wrapper.habit-5 .habit-btn:not(.done)::after { animation-delay: -1.9s; } .habit-wrapper.habit-6 .habit-btn:not(.done)::after { animation-delay: -3.4s; } .habit-wrapper.habit-7 .habit-btn:not(.done)::after { animation-delay: -0.3s; } .habit-wrapper.habit-8 .habit-btn:not(.done)::after { animation-delay: -2.2s; } .habit-wrapper.habit-9 .habit-btn:not(.done)::after { animation-delay: -1.0s; } .habit-wrapper.habit-10 .habit-btn:not(.done)::after { animation-delay: -3.1s; } .habit-wrapper.habit-11 .habit-btn:not(.done)::after { animation-delay: -1.6s; } .habit-wrapper.habit-12 .habit-btn:not(.done)::after { animation-delay: -3.8s; } /* Completed habits - NO glow border (clean look) */ .habit-btn.done::before, .habit-btn.done::after { content: none; } /* Reduced motion support - disable animations for accessibility */ @media (prefers-reduced-motion: reduce) { .habit-btn:not(.done)::before { animation: none; /* Show full static glow ring instead of rotating */ -webkit-mask: none; mask: none; opacity: 0.6; } .habit-btn::after { animation: none; opacity: 0.35; } } /* Stats tray slides down from behind button */ .stats-tray { position: relative; margin-top: -12px; padding-top: 24px; /* More room between button and dots */ padding-bottom: 12px; padding-left: 16px; padding-right: 16px; margin-left: 12px; margin-right: 12px; border-radius: 0 0 16px 16px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 0; transform-origin: top center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), /* Slower animation */ opacity 0.4s ease, padding 0.65s ease; } .stats-tray.open { max-height: 85px; opacity: 1; padding-top: 24px; /* More room between button and dots */ padding-bottom: 12px; } /* Tray color tints - uses color-mix() with --glow-color for automatic theming */ .stats-tray { background: linear-gradient(180deg, color-mix(in srgb, var(--glow-color) 15%, transparent) 0%, rgba(0, 0, 0, 0.3) 100%); border: 1px solid color-mix(in srgb, var(--glow-color) 20%, transparent); border-top: none; } /* Stats tray content */ .stats-tray .tray-dots { display: flex; justify-content: center; align-items: center; gap: 6px; } .stats-tray .tray-streak { display: flex; align-items: center; justify-content: center; gap: 4px; margin-left: 8px; font-size: 0.85rem; font-weight: 600; color: var(--accent-success); } /* ======================================== BUTTON SLIDE-IN ANIMATION ======================================== */ .habit-wrapper { opacity: 0; transform: translateX(100px); } .habit-wrapper.slide-in { animation: slideInFromRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes slideInFromRight { 0% { opacity: 0; transform: translateX(100px); } 70% { opacity: 1; transform: translateX(-8px); } 100% { opacity: 1; transform: translateX(0); } } /* Stagger animation delays */ .habit-wrapper:nth-child(1).slide-in { animation-delay: 0.05s; } .habit-wrapper:nth-child(2).slide-in { animation-delay: 0.12s; } .habit-wrapper:nth-child(3).slide-in { animation-delay: 0.19s; } .habit-wrapper:nth-child(4).slide-in { animation-delay: 0.26s; } .habit-wrapper:nth-child(5).slide-in { animation-delay: 0.33s; } .habit-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 18px; border: none; border-radius: var(--border-radius-lg); font-size: 1.3rem; font-weight: 700; font-family: var(--font-primary); cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 1; /* On top of stats tray */ overflow: visible; /* Changed from hidden to allow glow pseudo-elements */ text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25); } /* Removed gloss effect - watercolor buttons look better without it */ .habit-btn:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 5px; } .habit-btn:hover:not(:disabled) { transform: translateY(-6px) scale(1.02); } .habit-btn:active:not(:disabled) { transform: translateY(3px) scale(0.98); } .habit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* All habit buttons - uncompleted state (uses CSS variables for theming) */ .habit-btn { background: var(--habit-bg); color: var(--habit-text); border: 4px solid var(--habit-border); box-shadow: 0 var(--shadow-depth) 0 var(--habit-shadow), 0 10px 20px var(--habit-glow), var(--button-shadow); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .habit-btn:hover:not(:disabled) { box-shadow: 0 calc(var(--shadow-depth) + 2px) 0 var(--habit-shadow), 0 14px 28px var(--habit-glow); } /* Uncompleted buttons brighten to full completed state on hover */ .habit-btn:not(.done):hover:not(:disabled) { background: var(--habit-done-bg); border-color: var(--habit-done-border); color: var(--habit-done-text); box-shadow: 0 calc(var(--shadow-depth) + 2px) 0 var(--habit-done-shadow), 0 14px 28px var(--habit-done-glow); } .habit-btn:active:not(:disabled) { box-shadow: 0 2px 0 var(--habit-shadow), 0 4px 8px var(--habit-glow); transform: translateY(4px); } /* Completed state - vibrant green (activated look) */ .habit-btn.done { background: var(--habit-done-bg); color: var(--habit-done-text); border-color: var(--habit-done-border); box-shadow: 0 var(--shadow-depth) 0 var(--habit-done-shadow), 0 10px 20px var(--habit-done-glow), var(--button-shadow); } .habit-btn.done:hover:not(:disabled) { box-shadow: 0 calc(var(--shadow-depth) + 2px) 0 var(--habit-done-shadow), 0 14px 28px var(--habit-done-glow); } .habit-btn.done:active:not(:disabled) { box-shadow: 0 2px 0 var(--habit-done-shadow), 0 4px 8px var(--habit-done-glow); transform: translateY(4px); } /* Position-based habit button colors - each position gets its own palette color */ .habit-btn.habit-1 { --habit-bg: var(--habit-1-bg); --habit-text: var(--habit-1-text); --habit-glow: var(--habit-1-glow); --habit-done-bg: var(--habit-1-bg); --habit-done-text: var(--habit-1-text); --habit-done-glow: var(--habit-1-glow); --habit-done-check: var(--habit-1-text); --habit-border: var(--habit-1-text); --habit-shadow: var(--habit-1-text); --habit-done-border: var(--habit-1-text); --habit-done-shadow: var(--habit-1-text); } .habit-btn.habit-2 { --habit-bg: var(--habit-2-bg); --habit-text: var(--habit-2-text); --habit-glow: var(--habit-2-glow); --habit-done-bg: var(--habit-2-bg); --habit-done-text: var(--habit-2-text); --habit-done-glow: var(--habit-2-glow); --habit-done-check: var(--habit-2-text); --habit-border: var(--habit-2-text); --habit-shadow: var(--habit-2-text); --habit-done-border: var(--habit-2-text); --habit-done-shadow: var(--habit-2-text); } .habit-btn.habit-3 { --habit-bg: var(--habit-3-bg); --habit-text: var(--habit-3-text); --habit-glow: var(--habit-3-glow); --habit-done-bg: var(--habit-3-bg); --habit-done-text: var(--habit-3-text); --habit-done-glow: var(--habit-3-glow); --habit-done-check: var(--habit-3-text); --habit-border: var(--habit-3-text); --habit-shadow: var(--habit-3-text); --habit-done-border: var(--habit-3-text); --habit-done-shadow: var(--habit-3-text); } .habit-btn.habit-4 { --habit-bg: var(--habit-4-bg); --habit-text: var(--habit-4-text); --habit-glow: var(--habit-4-glow); --habit-done-bg: var(--habit-4-bg); --habit-done-text: var(--habit-4-text); --habit-done-glow: var(--habit-4-glow); --habit-done-check: var(--habit-4-text); --habit-border: var(--habit-4-text); --habit-shadow: var(--habit-4-text); --habit-done-border: var(--habit-4-text); --habit-done-shadow: var(--habit-4-text); } .habit-btn.habit-5 { --habit-bg: var(--habit-5-bg); --habit-text: var(--habit-5-text); --habit-glow: var(--habit-5-glow); --habit-done-bg: var(--habit-5-bg); --habit-done-text: var(--habit-5-text); --habit-done-glow: var(--habit-5-glow); --habit-done-check: var(--habit-5-text); --habit-border: var(--habit-5-text); --habit-shadow: var(--habit-5-text); --habit-done-border: var(--habit-5-text); --habit-done-shadow: var(--habit-5-text); } .habit-btn.habit-6 { --habit-bg: var(--habit-6-bg); --habit-text: var(--habit-6-text); --habit-glow: var(--habit-6-glow); --habit-done-bg: var(--habit-6-bg); --habit-done-text: var(--habit-6-text); --habit-done-glow: var(--habit-6-glow); --habit-done-check: var(--habit-6-text); --habit-border: var(--habit-6-text); --habit-shadow: var(--habit-6-text); --habit-done-border: var(--habit-6-text); --habit-done-shadow: var(--habit-6-text); } .habit-btn.habit-7 { --habit-bg: var(--habit-7-bg); --habit-text: var(--habit-7-text); --habit-glow: var(--habit-7-glow); --habit-done-bg: var(--habit-7-bg); --habit-done-text: var(--habit-7-text); --habit-done-glow: var(--habit-7-glow); --habit-done-check: var(--habit-7-text); --habit-border: var(--habit-7-text); --habit-shadow: var(--habit-7-text); --habit-done-border: var(--habit-7-text); --habit-done-shadow: var(--habit-7-text); } .habit-btn.habit-8 { --habit-bg: var(--habit-8-bg); --habit-text: var(--habit-8-text); --habit-glow: var(--habit-8-glow); --habit-done-bg: var(--habit-8-bg); --habit-done-text: var(--habit-8-text); --habit-done-glow: var(--habit-8-glow); --habit-done-check: var(--habit-8-text); --habit-border: var(--habit-8-text); --habit-shadow: var(--habit-8-text); --habit-done-border: var(--habit-8-text); --habit-done-shadow: var(--habit-8-text); } .habit-btn.habit-9 { --habit-bg: var(--habit-9-bg); --habit-text: var(--habit-9-text); --habit-glow: var(--habit-9-glow); --habit-done-bg: var(--habit-9-bg); --habit-done-text: var(--habit-9-text); --habit-done-glow: var(--habit-9-glow); --habit-done-check: var(--habit-9-text); --habit-border: var(--habit-9-text); --habit-shadow: var(--habit-9-text); --habit-done-border: var(--habit-9-text); --habit-done-shadow: var(--habit-9-text); } .habit-btn.habit-10 { --habit-bg: var(--habit-10-bg); --habit-text: var(--habit-10-text); --habit-glow: var(--habit-10-glow); --habit-done-bg: var(--habit-10-bg); --habit-done-text: var(--habit-10-text); --habit-done-glow: var(--habit-10-glow); --habit-done-check: var(--habit-10-text); --habit-border: var(--habit-10-text); --habit-shadow: var(--habit-10-text); --habit-done-border: var(--habit-10-text); --habit-done-shadow: var(--habit-10-text); } .habit-btn.habit-11 { --habit-bg: var(--habit-11-bg); --habit-text: var(--habit-11-text); --habit-glow: var(--habit-11-glow); --habit-done-bg: var(--habit-11-bg); --habit-done-text: var(--habit-11-text); --habit-done-glow: var(--habit-11-glow); --habit-done-check: var(--habit-11-text); --habit-border: var(--habit-11-text); --habit-shadow: var(--habit-11-text); --habit-done-border: var(--habit-11-text); --habit-done-shadow: var(--habit-11-text); } .habit-btn.habit-12 { --habit-bg: var(--habit-12-bg); --habit-text: var(--habit-12-text); --habit-glow: var(--habit-12-glow); --habit-done-bg: var(--habit-12-bg); --habit-done-text: var(--habit-12-text); --habit-done-glow: var(--habit-12-glow); --habit-done-check: var(--habit-12-text); --habit-border: var(--habit-12-text); --habit-shadow: var(--habit-12-text); --habit-done-border: var(--habit-12-text); --habit-done-shadow: var(--habit-12-text); } .habit-btn .icon { font-size: 2rem; line-height: 1; } .habit-btn .icon.checkbox { font-size: 2.2rem; opacity: 0; transition: all 0.3s ease; display: flex; align-items: center; margin-top: -2px; } .habit-btn .icon.checkbox.checked { color: var(--habit-done-check); opacity: 1; font-weight: bold; } /* Ring acts as the visual indicator when unchecked */ .habit-btn.done .icon.checkbox { opacity: 1; } /* Completion Circle - Green circular background behind points badge */ .completion-circle { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--habit-done-bg, rgba(76, 175, 80, 0.2)); border: 3px solid var(--habit-done-check, #4CAF50); opacity: 0; transform: scale(0.5); transition: all 0.3s ease; z-index: 1; } .habit-btn.done .completion-circle { opacity: 1; transform: scale(1); } /* When points are showing, make circle slightly larger */ .habit-btn.done .completion-circle.expanded { transform: scale(1.1); } /* Points Badge - Shows points earned on completion */ .habit-btn .points-badge { position: absolute; font-size: 0.85rem; font-weight: 700; color: var(--habit-done-check); opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; white-space: nowrap; z-index: 2; /* Above completion circle */ /* Reset gold styling from global .points-badge */ background: transparent; box-shadow: none; border: none; } /* Show points badge on completed habits (checkmark fades, points appear) */ .habit-btn.done .points-badge.visible { opacity: 1; transform: scale(1); } /* When points badge is visible, fade the checkmark */ .habit-btn.done .icon.checkbox.points-showing { opacity: 0; transform: scale(0.5); } /* Count-up animation */ @keyframes points-count-up { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .habit-btn .points-badge.counting { animation: points-count-up 0.4s ease-out forwards; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .habit-btn .points-badge { animation: none; transition: opacity 0.2s ease; } .habit-btn .points-badge.counting { animation: none; } } /* ============================================ Star Flight Animation (Phase 2) Stars orbit around completion circle, then fly to HUD ============================================ */ /* Star particle - orbits then flies from button to HUD */ .star-particle { position: fixed; width: 14px; height: 14px; pointer-events: none; z-index: 9999; will-change: left, top, transform, opacity; } .star-particle::before { content: '⭐'; font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8)); } /* Orbiting state - stars circle around the completion circle */ .star-particle.orbiting { /* Initial state - handled by JS */ } .star-particle.orbiting.orbit-active::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 70%); animation: star-glow 350ms ease-in-out infinite alternate; } @keyframes star-glow { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.4); } } /* Flying state - stars fly from orbit position to HUD */ .star-particle.flying::after { content: '✦'; font-size: 8px; position: absolute; top: 50%; left: -6px; transform: translateY(-50%); opacity: 0.7; color: #ffd700; animation: star-trail 120ms ease-out infinite; } @keyframes star-trail { 0% { opacity: 0.7; transform: translateY(-50%) scale(1); } 50% { opacity: 0.3; transform: translateY(-50%) scale(0.6); } 100% { opacity: 0.7; transform: translateY(-50%) scale(1); } } /* HUD pulse when receiving stars */ .hud-points.receiving { animation: hud-pulse 180ms ease-out; } @keyframes hud-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); filter: brightness(1.3); } 100% { transform: scale(1); } } /* Glow effect on HUD during star receipt */ .hud-points.receiving::after { content: ''; position: absolute; inset: -4px; background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 70%); border-radius: inherit; pointer-events: none; animation: hud-glow 180ms ease-out forwards; } @keyframes hud-glow { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } } /* HUD subtle drain when losing points (Phase 3) */ .hud-points.draining { animation: hud-drain 300ms ease-out; } @keyframes hud-drain { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* Reduced motion: instant transition, no flight */ @media (prefers-reduced-motion: reduce) { .star-particle { display: none; } .star-particle.orbiting, .star-particle.flying { display: none; } .hud-points.receiving, .hud-points.draining { animation: none; } } .habit-btn .btn-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; } .habit-btn .btn-label { font-size: 1.4rem; font-weight: 800; } .habit-btn .trend-indicator { position: absolute; top: 10px; right: 14px; font-size: 0.9rem; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); } .trend-indicator.early { color: #1a5a1a; background: rgba(144, 238, 144, 0.3); } .trend-indicator.late { color: #5a1a1a; background: rgba(255, 182, 193, 0.3); } .trend-indicator.on-target { color: #1a3a5a; background: rgba(135, 206, 235, 0.3); } /* Progress Ring */ .icon-ring-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; } .progress-ring-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; pointer-events: none; opacity: 0; transition: opacity 0.5s ease-out; } .progress-ring-wrapper.visible { opacity: 1; } .progress-ring-wrapper.fade-out { opacity: 0.3; } /* Hide progress ring on completed buttons - no colored ring */ .habit-btn.done .progress-ring-wrapper { opacity: 0 !important; } .progress-ring { width: 100%; height: 100%; } .progress-ring__track { stroke: var(--habit-border); stroke-width: var(--ring-stroke-width); fill: transparent; opacity: var(--ring-track-opacity); } .progress-ring__circle { stroke: var(--habit-border); stroke-width: var(--ring-stroke-width); fill: transparent; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s ease-out, stroke 3s ease-out; } /* Progress ring color - uses glow color from parent wrapper */ .progress-ring__track, .progress-ring__circle { stroke: color-mix(in srgb, var(--glow-color) 70%, #333); } /* Overdue state - warmer amber color */ .progress-ring-wrapper.overdue .progress-ring__circle { transition: stroke 3s ease-out; stroke: #b89800; } /* Sparkle Container */ .sparkle-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; pointer-events: none; z-index: 10; } /* BASE SPARKLE - Main particles */ .sparkle { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: -3px; margin-top: -3px; background: radial-gradient(circle, var(--habit-done-border) 0%, transparent 70%); border-radius: 50%; animation: sparkle-particle var(--duration, 1s) ease-out forwards; animation-delay: var(--delay, 0ms); will-change: transform, opacity; } /* Main sparkle - smaller, fast */ .sparkle.sparkle-main { width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; background: radial-gradient(circle, #fff 0%, var(--habit-done-border) 40%, transparent 70%); box-shadow: 0 0 4px var(--habit-done-border); } /* Glow orbs - larger, slower, glowing */ .sparkle.sparkle-glow { width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, var(--habit-done-border) 30%, transparent 70%); box-shadow: 0 0 12px var(--habit-done-glow), 0 0 20px var(--habit-done-glow); animation: sparkle-glow var(--duration, 1.2s) ease-out forwards; animation-delay: var(--delay, 0ms); } /* Star particles - twinkle */ .sparkle.sparkle-star { width: auto; height: auto; font-size: 12px; background: none; color: var(--accent-primary); text-shadow: 0 0 8px var(--accent-primary), 0 0 16px var(--habit-done-glow); animation: sparkle-star var(--duration, 1.1s) ease-out forwards; animation-delay: var(--delay, 0ms); } /* Center glow pulse */ .sparkle.sparkle-center-glow { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, var(--habit-done-glow) 30%, transparent 70%); animation: sparkle-center-pulse 0.7s ease-out forwards; } /* Sparkle colors - uses glow color from parent wrapper */ .sparkle.sparkle-main, .sparkle.sparkle-glow { background: radial-gradient(circle, #fff 0%, var(--glow-color) 40%, transparent 70%); box-shadow: 0 0 12px color-mix(in srgb, var(--glow-color) 60%, transparent); } @keyframes sparkle-particle { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 30% { transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) scale(1.2); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } @keyframes sparkle-glow { 0% { transform: translate(0, 0) scale(0); opacity: 0.8; } 40% { transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; } } @keyframes sparkle-star { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; } 30% { transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(1.3) rotate(90deg); opacity: 1; } 60% { transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.7)) scale(1) rotate(180deg); opacity: 0.8; } 100% { transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg); opacity: 0; } } @keyframes sparkle-center-pulse { 0% { transform: scale(0); opacity: 0.9; } 50% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(2); opacity: 0; } } /* Checkmark bounce on completion */ @keyframes check-bounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } 70% { transform: scale(0.95); } } .icon.checkbox.check-bounce { animation: check-bounce 0.4s ease-out; } /* Reduced motion: disable all ring animations */ @media (prefers-reduced-motion: reduce) { .progress-ring__circle { transition: none !important; } .sparkle { animation: none !important; } .icon.checkbox.check-bounce { animation: none !important; } .progress-ring-wrapper { transition: none !important; } } /* Calendar Week Dots - used inside stats tray */ .tray-dots, .week-dots { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 6px; padding: 0; } .tray-dots .day-col, .week-dots .day-col { display: flex; flex-direction: column; align-items: center; gap: 2px; } .tray-dots .day-label, .week-dots .day-label { font-size: 0.65rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } /* Dot container for larger touch target (44px minimum for accessibility) */ .tray-dots .dot-wrapper, .week-dots .dot-wrapper { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; border-radius: 50%; transition: background 0.2s ease; } .tray-dots .dot-wrapper:hover, .week-dots .dot-wrapper:hover { background: rgba(255, 255, 255, 0.15); } .tray-dots .dot-wrapper:focus, .week-dots .dot-wrapper:focus { outline: none; background: rgba(255, 255, 255, 0.15); } .tray-dots .dot-wrapper:focus-visible, .week-dots .dot-wrapper:focus-visible { outline: 2px solid var(--accent-success); outline-offset: 2px; } .tray-dots .dot, .week-dots .dot { width: 10px; height: 10px; border-radius: 50%; transition: all 0.2s ease; pointer-events: none; } .tray-dots .dot.done, .week-dots .dot.done { background: var(--dot-done); } .tray-dots .dot.empty, .week-dots .dot.empty { background: transparent; border: 2px solid var(--dot-empty); width: 6px; height: 6px; } .tray-dots .dot.rest, .week-dots .dot.rest { background: var(--dot-rest); opacity: 0.5; } .tray-dots .dot.today, .week-dots .dot.today { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15), 0 0 0 5px rgba(255, 255, 255, 0.2); } .tray-dots .dot.selected, .week-dots .dot.selected { transform: scale(1.3); } .tray-dots .week-label, .week-dots .week-label { width: 100%; text-align: center; font-size: 0.65rem; color: var(--text-muted); opacity: 0.8; margin-bottom: 2px; } .tray-dots .habit-streak, .week-dots .habit-streak { display: flex; align-items: center; font-size: 0.75rem; color: var(--accent-success); font-weight: 600; margin-left: 6px; white-space: nowrap; height: 32px; } /* Recovery banner for broken streaks */ .recovery-banner { background: linear-gradient(135deg, rgba(255, 107, 107, 0.18) 0%, rgba(255, 140, 140, 0.12) 100%); border: 1px solid rgba(255, 107, 107, 0.35); border-radius: var(--border-radius-md); padding: 18px 20px; margin-bottom: 28px; display: none; position: relative; z-index: 1; text-align: center; } .recovery-banner.show { display: block; } .recovery-banner .recovery-title { font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; color: var(--accent-danger); } .recovery-banner .recovery-message { font-size: 1rem; color: var(--text-dim); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Dashboard cards */ .dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; position: relative; z-index: 1; } .stat-card { background: var(--card-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-radius: var(--border-radius-md); padding: 18px 12px; text-align: center; border: 1px solid var(--card-border); transition: all 0.3s ease; } .stat-card .label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .stat-card .value { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); } .stat-card .sub { font-size: 0.9rem; color: var(--text-dim); margin-top: 4px; } /* Target comparison */ .stat-card .target-diff { font-size: 0.85rem; font-weight: 600; margin-top: 4px; } .target-diff.early { color: #90EE90; } .target-diff.late { color: #FFB6C1; } /* Chart */ .chart-container { background: var(--card-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-radius: var(--border-radius-lg); padding: 20px; margin-bottom: 28px; position: relative; z-index: 1; border: 1px solid var(--card-border); transition: all 0.3s ease; } .chart-container h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; color: var(--text-secondary); } .chart-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 1rem; } /* Missed days banner */ .missed-banner { background: linear-gradient(135deg, rgba(255, 193, 7, 0.18) 0%, rgba(255, 220, 100, 0.12) 100%); border: 1px solid rgba(255, 193, 7, 0.35); border-radius: var(--border-radius-md); padding: 18px 20px; margin-bottom: 28px; display: none; position: relative; z-index: 1; } .missed-banner.show { display: block; } .missed-banner p { font-size: 1rem; margin-bottom: 14px; color: var(--text-primary); } .missed-banner .actions { display: flex; gap: 12px; } .missed-banner button { padding: 12px 20px; border-radius: var(--border-radius-sm); border: none; font-family: var(--font-primary); font-size: 1rem; font-weight: 600; cursor: pointer; } .missed-banner .fill-btn { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); box-shadow: 0 4px 12px var(--btn-secondary-glow); } .missed-banner .dismiss-btn { background: var(--bg-secondary); color: var(--text-primary); } /* History list */ .history { position: relative; z-index: 1; } .history h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; } .history-item { background: var(--card-bg); border-radius: var(--border-radius-sm); padding: 16px 18px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; border: 1px solid var(--card-border); } .history-item:hover, .history-item:focus { background: var(--bg-tertiary); transform: translateX(4px); outline: none; } .history-item:focus-visible { outline: 2px solid var(--accent-success); outline-offset: 2px; } .history-item .date { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); } .history-item .times { font-size: 1rem; color: var(--text-dim); } .history-item .times span { margin-left: 14px; font-weight: 600; } .history-item .times .dishes-time { color: var(--history-dishes); } .history-item .times .bed-time { color: var(--history-bedtime); } .history-item .edit-icon { color: var(--text-dim); font-size: 1rem; } .history-empty { text-align: center; color: var(--text-muted); padding: 28px 20px; font-size: 1rem; } /* Celebration Modal (centered) */ .celebration-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1200; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .celebration-modal.fade-out { animation: fadeOut 0.3s ease forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Confetti animation */ .confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10000; overflow: hidden; } @keyframes confetti-fall { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) translateX(calc(var(--end-x) - 50%)) rotate(var(--rotation)); opacity: 0; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { .confetti-container { display: none; } } .celebration-content { background: linear-gradient(145deg, var(--card-bg), var(--bg-secondary)); border-radius: 24px; padding: 32px 40px; text-align: center; max-width: 320px; border: 2px solid rgba(255, 215, 0, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.2); animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .celebration-header { font-size: 1.3rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 20px; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); } .celebration-points { margin-bottom: 16px; } .celebration-points .points-number { display: block; font-size: 3.5rem; font-weight: 800; color: #ffc107; line-height: 1; text-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); } .celebration-points .points-label { font-size: 1.1rem; color: var(--text-secondary); margin-top: 4px; display: block; } .checkin-gem-bonus { background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(186, 85, 211, 0.2) 100%); border-radius: 16px; padding: 16px; margin-bottom: 16px; border: 1px solid rgba(186, 85, 211, 0.5); animation: pulse 0.5s ease-in-out; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .gem-bonus-icon { font-size: 2rem; display: block; } .gem-bonus-text { font-size: 1.5rem; font-weight: 800; color: #e0b0ff; display: block; margin-top: 4px; } .gem-bonus-label { font-size: 0.8rem; color: rgba(224, 176, 255, 0.8); text-transform: uppercase; letter-spacing: 2px; display: block; margin-top: 4px; } .celebration-message { font-size: 0.95rem; color: var(--text-secondary); font-style: italic; margin-bottom: 20px; } .celebration-btn { padding: 14px 32px; background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); border: none; border-radius: 25px; color: #1a1a2e; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .celebration-btn:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(255, 193, 7, 0.5); } .celebration-btn:active { transform: scale(0.95); } /* Modal */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); display: none; align-items: center; justify-content: center; z-index: 1100; /* Above HUD bar (1000) */ padding: 20px; } .modal-overlay.show { display: flex; } .modal { background: var(--modal-bg); border-radius: var(--border-radius-xl); width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; padding: 28px; animation: modalFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid var(--modal-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .modal h3 { margin-bottom: 24px; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); } /* Info modal specific styles */ .info-modal .info-content { text-align: left; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); } .info-modal .info-content p { margin-bottom: 12px; } .info-modal .info-content ul { margin: 8px 0 16px 0; padding-left: 8px; list-style: none; } .info-modal .info-content ul li { margin-bottom: 8px; padding-left: 4px; } .info-modal .info-content strong { color: var(--text-primary); } .info-modal .info-tip { background: rgba(255, 215, 0, 0.1); border-left: 3px solid var(--accent-warning); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 0.9rem; color: var(--accent-warning); margin-top: 16px; } /* Streaks Modal Styles */ .streaks-modal .global-streak-display { text-align: center; padding: 20px 0; margin-bottom: 16px; background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%); border-radius: 16px; border: 1px solid rgba(255, 140, 0, 0.3); } .streaks-modal .big-streak-number { font-size: 3.5rem; font-weight: 800; color: #ff8c00; line-height: 1; text-shadow: 0 2px 8px rgba(255, 140, 0, 0.3); } .streaks-modal .streak-subtitle { font-size: 1rem; color: rgba(255, 200, 128, 0.9); margin-top: 4px; } .streak-habits-list { margin-top: 16px; } .streak-habit-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg-tertiary); border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--card-border); } .streak-habit-info { display: flex; align-items: center; gap: 10px; } .streak-habit-icon { font-size: 1.3rem; } .streak-habit-name { font-weight: 600; color: var(--text-primary); } .streak-habit-count { display: flex; align-items: center; gap: 4px; font-weight: 700; color: #ffcc80; } .streak-habit-count .flame { font-size: 1rem; } .streak-grace-info { font-size: 0.85rem; color: var(--text-dim); margin-top: 12px; } /* Badges Modal Styles */ .badges-modal { max-width: 400px; } .badges-summary { text-align: center; padding: 12px 16px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(255, 165, 0, 0.15) 0%, rgba(218, 165, 32, 0.1) 100%); border-radius: 12px; border: 1px solid rgba(218, 165, 32, 0.3); font-size: 1.1rem; font-weight: 600; color: #ffd700; } .badges-section { margin-bottom: 20px; } .badges-section-title { font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--card-border); } .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; } .badge-item { display: flex; flex-direction: column; align-items: center; padding: 12px 8px; background: var(--bg-tertiary); border-radius: 12px; border: 2px solid var(--card-border); transition: transform 0.2s ease, box-shadow 0.2s ease; } .badge-item.earned { border-color: rgba(255, 215, 0, 0.5); background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%); } .badge-item.earned:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2); } .badge-item.locked { border-style: dashed; border-color: rgba(255, 255, 255, 0.3); opacity: 0.75; } .badge-item .badge-emoji { font-size: 2rem; margin-bottom: 6px; filter: grayscale(0); transition: filter 0.2s ease; } .badge-item.locked .badge-emoji { filter: grayscale(80%); opacity: 0.7; } .badge-item .badge-name { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.2; } .badge-item.locked .badge-name { color: var(--text-dim); } .badge-item .badge-requirement { font-size: 0.65rem; color: var(--text-dim); margin-top: 4px; } .badge-item.earned .badge-requirement { color: rgba(255, 215, 0, 0.8); } /* Color Picker Modal Styles */ .color-picker-modal { max-width: 340px; } .color-picker-modal h3 { text-align: center; margin-bottom: 20px; } .color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 8px; } .color-option { width: 56px; height: 56px; border-radius: 12px; border: 3px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .color-option:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .color-option:active { transform: scale(0.95); } .color-option.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-primary), 0 4px 16px rgba(0, 0, 0, 0.3); } /* Color swatch button - matches action-btn sizing */ .habit-item .habit-actions .color-swatch-btn { width: 32px; height: 32px; min-width: 32px; max-width: 32px; flex-shrink: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; padding: 0; transition: all 0.15s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .habit-item .habit-actions .color-swatch-btn:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.5); } .habit-item .habit-actions .color-swatch-btn:active { transform: scale(0.95); } .modal .field { margin-bottom: 20px; } .modal label { display: block; font-size: 1rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; } .modal input, .modal select { width: 100%; padding: 16px; border: 2px solid var(--input-border); border-radius: var(--border-radius-sm); background: var(--input-bg); color: var(--text-primary); font-size: 18px; /* Prevents iOS zoom */ font-family: var(--font-primary); transition: border-color 0.2s ease; } .modal input:focus, .modal select:focus { outline: none; border-color: var(--input-focus); background: var(--bg-tertiary); } .modal .btn-row { display: flex; gap: 14px; margin-top: 24px; } .modal button { flex: 1; padding: 16px; border: none; border-radius: var(--border-radius-sm); font-size: 1.05rem; font-weight: 700; font-family: var(--font-primary); cursor: pointer; transition: transform 0.15s ease; } .modal button:active { transform: scale(0.97); } .modal .save-btn { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: 0 4px 15px var(--btn-primary-glow); } .modal .cancel-btn { background: var(--bg-secondary); color: var(--text-primary); } .modal .delete-btn { width: 100%; margin-top: 18px; background: transparent; color: var(--accent-danger); border: 2px solid rgba(255, 107, 107, 0.5); padding: 14px; font-size: 1rem; } /* Settings modal specific */ .settings-section { margin-bottom: 24px; } .settings-section h4 { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } /* Habits List in Settings */ .habits-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .habit-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: var(--border-radius-sm); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .habit-item .habit-icon { margin-top: 2px; font-size: 1.4rem; } /* Drag handle - on right side */ .habit-item .drag-handle { cursor: grab; padding: 8px 4px; color: var(--text-dim); opacity: 0.5; transition: opacity 0.2s, color 0.2s; display: flex; align-items: center; touch-action: none; align-self: center; margin-left: auto; } .habit-item .drag-handle:hover { opacity: 1; color: var(--text-primary); } .habit-item .drag-handle:active { cursor: grabbing; } .habit-item .drag-handle svg { width: 18px; height: 18px; } /* Dragging states */ .habit-item.dragging { opacity: 0.5; transform: scale(0.98); } /* Insertion line indicators */ .habit-item.drag-insert-before::before, .habit-item.drag-insert-after::after { content: ''; position: absolute; left: 8px; right: 8px; height: 3px; background: var(--accent-success); border-radius: 2px; box-shadow: 0 0 8px rgba(78, 204, 163, 0.6); } .habit-item.drag-insert-before::before { top: -6px; } .habit-item.drag-insert-after::after { bottom: -6px; } .habit-item { position: relative; } .habit-item .habit-info { flex: 1; display: flex; flex-direction: column; gap: 4px; } .habit-item .habit-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; } .habit-item .habit-details { font-size: 0.85rem; color: var(--text-dim); } .habit-item .habit-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .habit-item .habit-actions .edit-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); } .habit-item .habit-actions .delete-btn:hover { border-color: var(--accent-danger); color: var(--accent-danger); } /* System habit badge - inline with title */ .habit-item.system-habit { opacity: 0.9; } .habit-item .habit-name .system-badge { font-size: 0.6rem; padding: 2px 6px; background: rgba(255, 193, 7, 0.2); border: 1px solid rgba(255, 193, 7, 0.4); border-radius: 8px; color: #ffc107; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1; } /* Action button base style - outlined icons */ .habit-item .habit-actions .action-btn { width: 32px; height: 32px; min-width: 32px; max-width: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; cursor: pointer; padding: 0; color: var(--text-dim); transition: all 0.15s ease; } .habit-item .habit-actions .action-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: var(--text-primary); } .habit-item .habit-actions .action-btn svg { width: 16px; height: 16px; } .add-habit-btn { width: 100%; padding: 12px; background: rgba(78, 204, 163, 0.2); border: 2px dashed var(--accent-success); color: var(--accent-success); border-radius: var(--border-radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .add-habit-btn:hover { background: rgba(78, 204, 163, 0.3); } /* Schedule Selector */ .schedule-selector { display: flex; gap: 6px; margin-bottom: 8px; } .schedule-selector .day-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--text-dim); background: transparent; color: var(--text-dim); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .schedule-selector .day-btn.selected { background: var(--accent-success); border-color: var(--accent-success); color: #1a1a2e; } .schedule-presets { display: flex; gap: 8px; flex-wrap: wrap; } .schedule-presets .preset-btn { padding: 6px 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--text-secondary); border-radius: 20px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; } .schedule-presets .preset-btn:hover { background: rgba(255,255,255,0.2); } /* Sparkles */ .sparkle { position: absolute; pointer-events: none; animation: sparkle-fade 0.8s ease forwards; } @media (prefers-reduced-motion: reduce) { .sparkle { animation: none; display: none; } } @keyframes sparkle-fade { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } /* Toast notification */ .toast { position: fixed; bottom: max(90px, calc(env(safe-area-inset-bottom) + 70px)); left: 50%; transform: translateX(-50%) translateY(100px); background: var(--toast-bg); color: var(--text-primary); padding: 16px 28px; border-radius: var(--border-radius-md); font-size: 1.05rem; font-weight: 600; z-index: 200; opacity: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); border: 1px solid var(--card-border); font-family: var(--font-primary); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.error { background: var(--toast-error-bg); border-color: rgba(255, 255, 255, 0.2); } .toast.success { background: var(--toast-success-bg); color: var(--toast-success-text); border-color: rgba(255, 255, 255, 0.3); } /* Pull to refresh indicator */ .pull-indicator { position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); background: var(--text-primary); color: var(--bg-primary); padding: 12px 24px; border-radius: 0 0 20px 20px; font-size: 14px; font-weight: 600; z-index: 1000; transition: transform 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-family: var(--font-primary); } .pull-indicator.visible { transform: translateX(-50%) translateY(0); } .pull-indicator.refreshing::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid var(--bg-primary); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Theme transition helper */ .theme-transitioning * { transition: all 0.3s ease !important; } /* Theme preview indicator */ .theme-preview-badge { position: fixed; top: 10px; right: 10px; background: var(--accent-primary); color: var(--bg-primary); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; z-index: 1001; display: none; } /* ======================================== MILESTONE CELEBRATION MODAL ======================================== */ .milestone-celebration .milestone-icon { font-size: 72px; margin: 16px 0; animation: bounce 0.6s ease-out; } .milestone-celebration .milestone-name { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .milestone-celebration .milestone-desc { font-size: 1rem; color: var(--text-secondary); margin-bottom: 16px; } .milestone-celebration .gem-icon { font-size: 1.5rem; margin-right: 8px; } @keyframes bounce { 0% { transform: scale(0.5); } 50% { transform: scale(1.2); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } /* ======================================== ALL-COMPLETE CELEBRATION ("Perfect Day!") ======================================== */ .all-complete-celebration .milestone-icon { font-size: 80px; margin: 12px 0; animation: star-spin 1s ease-out; } .all-complete-celebration .streak-bonus { font-size: 1.1rem; font-weight: 700; color: var(--fire-color, #ff6b35); margin: 12px 0; padding: 8px 16px; background: rgba(255, 107, 53, 0.15); border-radius: 20px; display: inline-block; } @keyframes star-spin { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 60% { transform: scale(1.3) rotate(15deg); opacity: 1; } 80% { transform: scale(0.9) rotate(-5deg); } 100% { transform: scale(1) rotate(0deg); } }