/**
 * BURNOUT DEFENDER - CSS RESET
 * "Clearing your cache and your emotional baggage"
 * 
 * Dependencies: None (this is where it all begins)
 * Dependents: All other CSS files build upon this foundation
 * Phase: Universal (applies to entire experience)
 * 
 * Created in session: #1
 * Last modified: Current session
 * 
 * Like therapy, we start by acknowledging that nothing is as it seems
 * and we need to strip away all assumptions before we can rebuild.
 */

/* =============================================================================
   THE EXISTENTIAL RESET - Because browser defaults are lies we tell ourselves
   ============================================================================= */

/* Universal box-sizing - at least this makes sense in a senseless world */
*,
*::before,
*::after {
    box-sizing: border-box; /* The only boundaries that work */
    margin: 0; /* No inherited debt (if only) */
    padding: 0; /* Starting from nothing */
}

/* Document foundation - our canvas of despair */
html {
    /* Prevent iOS text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    /* Smooth scrolling through life's ups and downs */
    scroll-behavior: smooth;
    /* Full height always - no escaping reality */
    height: 100%;
}

/* Body - the vessel of our digital suffering */
body {
    margin: 0;
    padding: 0;
    /* Minimum height ensures we fill the void */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    /* Inherit the family dysfunction */
    font-family: inherit;
    line-height: 1.5; /* Room to breathe between the lines */
    /* Text rendering optimization - clarity in chaos */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Prevent overscroll bounce on iOS - reality is bouncy enough */
    overscroll-behavior: contain;
}

/* =============================================================================
   CSS CUSTOM PROPERTIES - The constants in our variable existence
   ============================================================================= */

:root {
    /* Color System - Emotional states as hex codes */
    
    /* Phase 1: Corporate Facade */
    --corporate-blue: #1a73e8;        /* Trust us, everything is fine */
    --corporate-gray: #f8f9fa;        /* Sterile environment */
    --corporate-dark: #202124;        /* Serious business */
    --corporate-text: #3c4043;        /* Muted expression */
    --corporate-border: #dadce0;      /* Neat boundaries */
    --corporate-shadow: rgba(0, 0, 0, 0.1); /* Subtle depth */
    
    /* Phase 2: Millennial Reality */
    --millennial-pink: #ff6b9d;       /* Aesthetic suffering */
    --depression-gray: #4a4a4a;       /* Tuesday's color */
    --anxiety-yellow: #ffd23f;        /* Warning signs */
    --therapy-green: #06d6a0;         /* Growth and healing */
    --exhaustion-purple: #7b68ee;     /* 3am thoughts */
    --notification-red: #ff4757;      /* Constant alerts */
    --void-black: #0a0a0a;           /* The abyss */
    
    /* Resource Colors - Visualizing depletion */
    --fucks-given-full: #06d6a0;     /* Still caring */
    --fucks-given-mid: #ffd23f;      /* Running low */
    --fucks-given-empty: #ff4757;    /* None left */
    --energy-full: #4ecdc4;          /* Morning coffee */
    --energy-low: #96ceb4;           /* 3pm slump */
    --hope-bright: #a8e6cf;          /* Naive optimism */
    --hope-dim: #ffaaa5;             /* Reality setting in */
    
    /* Typography Scale - Words of varying importance */
    --font-size-tiny: 0.75rem;       /* 12px - Fine print of life */
    --font-size-small: 0.875rem;     /* 14px - Whispered anxieties */
    --font-size-base: 1rem;          /* 16px - Normal conversation */
    --font-size-medium: 1.125rem;    /* 18px - Slight emphasis */
    --font-size-large: 1.5rem;       /* 24px - Important notices */
    --font-size-xlarge: 2rem;        /* 32px - Existential questions */
    --font-size-huge: 2.5rem;        /* 40px - Life-changing events */
    
    /* Font Families - Voices in our head */
    --font-corporate: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    --font-therapy: 'Georgia', 'Times New Roman', 'Noto Serif', serif;
    --font-code: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    --font-casual: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    
    /* Spacing System - Personal boundaries we struggle to maintain */
    --space-1: 0.25rem;   /* 4px - Barely there */
    --space-2: 0.5rem;    /* 8px - Uncomfortable closeness */
    --space-3: 0.75rem;   /* 12px - Minimum personal space */
    --space-4: 1rem;      /* 16px - Basic dignity */
    --space-5: 1.5rem;    /* 24px - Comfortable distance */
    --space-6: 2rem;      /* 32px - Healthy boundaries */
    --space-7: 3rem;      /* 48px - Safe space */
    --space-8: 4rem;      /* 64px - Social distancing */
    
    /* Border Radius - Softening the harsh edges */
    --radius-none: 0;              /* Sharp reality */
    --radius-small: 0.125rem;      /* Slight comfort */
    --radius-medium: 0.25rem;      /* Gentle curves */
    --radius-large: 0.5rem;        /* Rounded corners */
    --radius-xlarge: 0.75rem;      /* Extra soft */
    --radius-round: 9999px;        /* Complete avoidance */
    
    /* Z-Index Layers - Hierarchy of problems */
    --z-below: -1;       /* Repressed memories */
    --z-base: 0;         /* Ground level reality */
    --z-above: 10;       /* Minor concerns */
    --z-overlay: 100;    /* Pressing issues */
    --z-modal: 1000;     /* Crisis mode */
    --z-urgent: 9999;    /* Everything is on fire */
    
    /* Transitions - The speed of life changes */
    --transition-fast: 150ms;      /* Anxiety response */
    --transition-base: 250ms;      /* Normal pace */
    --transition-slow: 350ms;      /* Careful consideration */
    --transition-therapy: 500ms;   /* Processing emotions */
    
    /* Shadows - The depth of our existence */
    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 10px 20px rgba(0, 0, 0, 0.19);
    --shadow-existential: 0 14px 28px rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   SEMANTIC ELEMENT RESET - Making sense of senseless defaults
   ============================================================================= */

/* Headings - The hierarchy of importance we pretend exists */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2; /* Tighter leading for impact */
}

/* Paragraphs - Thoughts that run together */
p {
    margin: 0;
    padding: 0;
}

/* Lists - Endless tasks and unfulfilled dreams */
ul, ol, li {
    margin: 0;
    padding: 0;
    list-style: none; /* No bullets can penetrate this numbness */
}

/* Links - Connections we're afraid to make */
a {
    color: inherit;
    text-decoration: none;
    /* Remove tap highlight on mobile - we highlight our own mistakes */
    -webkit-tap-highlight-color: transparent;
}

/* Media elements - Distractions from the void */
img, video, canvas, svg {
    display: block; /* No weird spacing */
    max-width: 100%; /* Contain the chaos */
    height: auto; /* Maintain aspect ratio like we maintain sanity */
}

/* Form elements - Input into a system that doesn't listen */
button, input, select, textarea {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    /* Remove default styling trauma */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Prevent zoom on iOS when focusing inputs */
    font-size: 16px; /* Magic number that prevents zoom */
}

/* Buttons - Choices that rarely matter */
button {
    cursor: pointer; /* At least we can pretend we have agency */
    user-select: none; /* No selecting the unselectable */
    /* Remove the iOS button styling */
    -webkit-appearance: none;
    /* Minimum touch target size for tired thumbs */
    min-height: 44px;
    min-width: 44px;
}

/* Disabled state - When even trying is too much */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* Faded like our dreams */
}

/* Tables - Organized data in a disorganized life */
table {
    border-collapse: collapse; /* Everything collapses eventually */
    border-spacing: 0;
    width: 100%;
}

/* =============================================================================
   ACCESSIBILITY RESET - Making suffering accessible to all
   ============================================================================= */

/* Focus styles - For when you can actually focus */
:focus {
    outline: 2px solid var(--corporate-blue);
    outline-offset: 2px;
}

/* Remove focus styles for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Reduced motion for overwhelmed nervous systems */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode - When you need clarity */
@media (prefers-contrast: high) {
    :root {
        --corporate-border: #000;
        --shadow-small: 0 0 0 1px #000;
        --shadow-medium: 0 0 0 2px #000;
    }
}

/* Dark mode - For the dark nights of the soul */
@media (prefers-color-scheme: dark) {
    :root {
        /* Invert the corporate lies */
        --corporate-gray: #1a1a1a;
        --corporate-dark: #ffffff;
        --corporate-text: #e8eaed;
        --corporate-border: #5f6368;
        --corporate-shadow: rgba(255, 255, 255, 0.1);
    }
}

/* =============================================================================
   UTILITY CLASSES - Emergency coping mechanisms
   ============================================================================= */

/* Hide but maintain accessibility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Hidden from everyone including screen readers */
.hidden {
    display: none !important;
}

/* Prevent text selection during gameplay */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection for important content */
.selectable {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* =============================================================================
   MOBILE-SPECIFIC RESETS - Because we live on our phones
   ============================================================================= */

/* Prevent pull-to-refresh on mobile - we refresh manually thank you */
body {
    /* Disable pull-to-refresh but allow normal scrolling */
    overscroll-behavior-y: contain;
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Prevent callout on long-press */
    body {
        -webkit-touch-callout: none;
    }
    
    /* Fix the iOS input zoom issue definitively */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Safe area insets for notched devices */
    body {
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}

/* Prevent horizontal scroll - life is hard enough without that */
html, body {
    overflow-x: hidden;
}

/* But allow vertical scroll - we need to scroll through our problems */
body {
    overflow-y: auto;
}

/* =============================================================================
   GAME-SPECIFIC RESETS - Preparing for digital suffering
   ============================================================================= */

/* Canvas elements need special treatment */
canvas {
    /* Prevent selection highlights */
    user-select: none;
    -webkit-user-select: none;
    /* Crisp pixels for pixel art if we use it */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    /* Prevent context menu on right click */
    touch-action: none;
}

/* Game containers fill available space */
.game-phase {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
}

/* Overlays cover everything when needed */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
}

/* Loading states - the eternal waiting */
.loading {
    cursor: wait;
}

/* Error states - when things go wrong (often) */
.error {
    color: var(--notification-red);
}

/* Success states - rare but cherished */
.success {
    color: var(--therapy-green);
}

/* =============================================================================
   PHASE-SPECIFIC VARIABLES - Different moods for different breakdowns
   ============================================================================= */

/* Corporate phase overrides */
[data-game-phase="attention-thief"] {
    --current-bg: var(--corporate-gray);
    --current-text: var(--corporate-text);
    --current-accent: var(--corporate-blue);
    --current-border: var(--corporate-border);
}

/* Portal phase overrides */
[data-game-phase="portal"] {
    --current-bg: var(--void-black);
    --current-text: var(--anxiety-yellow);
    --current-accent: var(--notification-red);
    --current-border: transparent;
}

/* Burnout phase overrides */
[data-game-phase="burnout-defender"] {
    --current-bg: var(--depression-gray);
    --current-text: var(--millennial-pink);
    --current-accent: var(--therapy-green);
    --current-border: var(--exhaustion-purple);
}

/**
 * END OF RESET
 * 
 * "With our foundation clear of assumptions and defaults,
 * we can begin building our tower defense against life itself.
 * May this reset bring you the clarity that existence cannot."
 * 
 * Next files should import this to build upon a solid foundation.
 * Like therapy, we've acknowledged our issues. Now we can work on them.
 */