:root {
    /* W3C 2025 Design Tokens (OKLCH) */
    --color-bg: oklch(14% 0.02 258);
    --color-surface: oklch(18% 0.03 258);
    --color-surface-glass: oklch(22% 0.03 258 / 40%);
    
    --color-primary: oklch(72% 0.17 165); /* Emerald 2025 */
    --color-primary-glow: oklch(72% 0.17 165 / 30%);
    
    --color-secondary: oklch(78% 0.12 215); /* Cyan */
    --color-warning: oklch(78% 0.14 70); /* Amber */
    --color-error: oklch(62% 0.22 28); /* Red/Crimson */
    
    --color-text-main: oklch(98% 0.01 258);
    --color-text-dim: oklch(70% 0.02 258);
    
    /* Spacing & Radius Tokens */
    --radius-full: 9999px;
    --radius-xl: 1.5rem;
    --radius-lg: 1rem;
    
    --shadow-main: 0 8px 32px 0 oklch(0% 0 0 / 25%);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--color-bg);
    color: var(--color-text-main);
    overflow-x: hidden;
    min-height: 100dvh;
}

/* --- Typography Redesigned 2026 --- */
.font-display {
    font-family: 'Outfit', system-ui, sans-serif;
}

.timer-text {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: clamp(3.5rem, 18vw, 6rem); /* Fluid Typography 2026 */
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: var(--color-text-main);
    text-shadow: 0 10px 30px oklch(0% 0 0 / 40%);
}

.status-text {
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

/* --- Animation Utilities 2026 --- */
.fade-in {
    animation: springFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@keyframes springFadeIn {
    from { opacity: 0; transform: translateY(24px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Mesh Gradient Background 2026 (Premium WebGL / CSS Hybrid) --- */
#mesh-background {
    background-color: var(--color-bg);
}

.mesh-blob {
    position: absolute;
    filter: blur(120px) saturate(150%);
    border-radius: 50%;
    animation: meshFlow 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.4;
    mix-blend-mode: screen;
}

.blob-primary {
    background: var(--color-primary);
    width: 60vw; height: 60vw;
    top: -10%; left: -20%;
    animation-duration: 25s;
}

.blob-secondary {
    background: var(--color-secondary);
    width: 70vw; height: 70vw;
    bottom: -10%; right: -20%;
    animation-duration: 35s;
    animation-delay: -5s;
}

.blob-accent {
    background: var(--color-warning);
    width: 40vw; height: 40vw;
    top: 40%; left: 30%;
    animation-duration: 22s;
    animation-delay: -10s;
}

.mesh-overlay {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    mix-blend-mode: overlay;
    pointer-events: none;
}

@keyframes meshFlow {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(5vw, 10vh) scale(1.1) rotate(45deg); }
    66% { transform: translate(-10vw, -5vh) scale(0.95) rotate(-30deg); }
    100% { transform: translate(0vw, -10vh) scale(1.05) rotate(15deg); }
}

/* --- Premium Glassmorphism Cards 2026 --- */
.glass-panel {
    background: linear-gradient(135deg, oklch(25% 0.03 258 / 60%), oklch(18% 0.03 258 / 40%));
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid oklch(100% 0 0 / 15%);
    border-top: 1px solid oklch(100% 0 0 / 30%);
    border-left: 1px solid oklch(100% 0 0 / 25%);
    box-shadow: 
        0 20px 40px -10px oklch(0% 0 0 / 50%),
        inset 0 1px 0 oklch(100% 0 0 / 10%);
    border-radius: var(--radius-xl);
    container-type: inline-size;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-panel:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 30px 50px -15px oklch(0% 0 0 / 60%),
        inset 0 1px 0 oklch(100% 0 0 / 20%);
    background: linear-gradient(135deg, oklch(28% 0.03 258 / 65%), oklch(20% 0.03 258 / 45%));
}

.glass-button {
    background: linear-gradient(135deg, oklch(25% 0.03 258 / 60%), oklch(18% 0.03 258 / 40%));
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid oklch(100% 0 0 / 15%);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 30%);
}
.glass-button:hover {
    background: linear-gradient(135deg, oklch(30% 0.03 258 / 70%), oklch(22% 0.03 258 / 50%));
}

#balanceCard {
  transition: all 0.5s ease-in-out;
}

@container (min-width: 320px) {
    .glass-panel { padding: 1.5rem !important; }
}


/* --- Custom Scrollbar 2025 --- */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: oklch(100% 0 0 / 10%);
    border-radius: var(--radius-full);
}

/* Settings items flex */
.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Scroll-driven Animations 2025 --- */
@supports (animation-timeline: scroll()) {
    .glass-panel {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 30%;
    }
    
    @keyframes reveal {
        from { opacity: 0; transform: translateY(50px) scale(0.9); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    #heroSection {
        animation: shrinkHeader linear both;
        animation-timeline: scroll();
        animation-range: 0 150px;
    }

    @keyframes shrinkHeader {
        to { transform: scale(0.85); opacity: 0.9; }
    }
}

.chart-container {
    position: relative;
}

/* Health Ring Spring Motion 2025 */
#healthRing {
    transition: 
        stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), 
        stroke 0.4s ease;
}

/* --- Adaptive Root 2025 --- */
@media (min-width: 1024px) {
    #appContainer {
        display: grid;
        grid-template-columns: minmax(400px, 1fr) 420px;
        gap: 3rem;
        max-width: 1300px;
        margin: 0 auto;
        padding: 6rem 3rem;
        align-items: start;
    }
    
    #heroSection {
        position: sticky;
        top: 6rem;
    }
    
    #statsGrid {
        grid-template-columns: 1fr;
    }
}

/* --- View Transitions API Support --- */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#settings-view {
    view-transition-name: settings-overlay;
}

#main-view {
    view-transition-name: main-dashboard;
}

/* --- Life Tree (Tamagotchi) 2025 --- */
#treeContainer {
    width: 240px; 
    height: 240px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 40px;
    background: radial-gradient(circle, oklch(25% 0.05 165 / 15%) 0%, transparent 70%);
}

#treeImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Removed transition to prevent background "pop-in" during state changes */
    
    /* Base enhancements - filters now only for health effects */
    filter: var(--lvl-filter, ) drop-shadow(0 10px 20px oklch(0% 0 0 / 60%)) contrast(1.1) brightness(1.1);
}

/* 10 Growth/Health Levels */
.tree-lvl-10 { --lvl-filter: saturate(1.2); }
.tree-lvl-9  { --lvl-filter: saturate(1.1); }
.tree-lvl-8  { --lvl-filter: saturate(0.9); }
.tree-lvl-7  { --lvl-filter: saturate(0.7) hue-rotate(-10deg); }
.tree-lvl-6  { --lvl-filter: saturate(0.5) hue-rotate(-20deg); }
.tree-lvl-5  { --lvl-filter: grayscale(0.2) sepia(0.2); }
.tree-lvl-4  { --lvl-filter: grayscale(0.4) sepia(0.4); }
.tree-lvl-3  { --lvl-filter: grayscale(0.6) sepia(0.6); }
.tree-lvl-2  { --lvl-filter: grayscale(0.8) sepia(0.8); }
.tree-lvl-1  { --lvl-filter: grayscale(1) invert(0.1); }

/* Mythical Oak Stage 5 */
.tree-stage-5 {
    /* Stage 5 gets a bigger base scale + the breathing effect */
    --base-scale: 1.15;
    transform: scale(var(--base-scale)) translateY(-10px) !important;
    --lvl-filter: drop-shadow(0 0 30px oklch(75% 0.15 85 / 40%)) saturate(1.5) !important;
}

.tree-breathing {
    animation: treeBreathing 4s ease-in-out infinite;
}

@keyframes treeBreathing {
    0%, 100% { transform: scale(var(--base-scale, 1)) translateY(var(--base-translate, 0)); }
    50% { transform: scale(calc(var(--base-scale, 1) * 1.05)) translateY(var(--base-translate, 0)); }
}

.tree-sick {
    --lvl-filter: grayscale(0.8) sepia(0.2) !important;
}

/* Timer Text Clamp Adjustment */
.timer-text {
    font-size: clamp(2.5rem, 12vw, 4.5rem); /* Reduced from 6rem */
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: var(--color-text-main);
    text-shadow: 0 10px 30px oklch(0% 0 0 / 40%);
}

/* Shake Animations 2025 */
.tree-shake-light {
    animation: shakeLight 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.tree-shake-heavy {
    animation: shakeHeavy 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shakeLight {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes shakeHeavy {
    10%, 90% { transform: translate3d(-2px, 0, 0) rotate(-1deg); }
    20%, 80% { transform: translate3d(4px, 0, 0) rotate(2deg); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0) rotate(-4deg); }
    40%, 60% { transform: translate3d(8px, 0, 0) rotate(4deg); }
}

.toxic-cloud {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, oklch(60% 0.1 20 / 25%) 0%, transparent 70%);
    filter: blur(30px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 5;
}

.toxic-cloud.active {
    opacity: 1;
    animation: pulseToxic 2s infinite alternate ease-in-out;
}

@keyframes pulseToxic {
    from { transform: scale(0.8); opacity: 0.2; }
    to { transform: scale(1.2); opacity: 0.6; }
}

/* Leaf Fall Animation 2025 */
.leaf-falling {
    animation: leafFall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
}

@keyframes leafFall {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    20% { transform: translateY(10px) translateX(10px) rotate(45deg); opacity: 1; }
    40% { transform: translateY(30px) translateX(-10px) rotate(90deg); opacity: 0.8; }
    60% { transform: translateY(60px) translateX(10px) rotate(135deg); opacity: 0.6; }
    80% { transform: translateY(100px) translateX(-10px) rotate(180deg); opacity: 0.3; }
    100% { transform: translateY(150px) rotate(220deg); opacity: 0; }
}

/* --- Reset & Maintenance Styles 2025 --- */
#resetDataButton:active, #deepResetButton:active {
    transform: scale(0.98);
}

#resetDataButton:hover {
    background-color: oklch(62% 0.22 28 / 30%);
    border-color: oklch(62% 0.22 28 / 50%);
}

/* Fix Native Dialog default visibility */
dialog:not([open]) {
    display: none !important;
}