/* ========================================
   BASE STYLES - CRYSTAL CASCADE
   ========================================
   
   Core layout, body styles, and DEFAULT CSS variables
   
   IMPORTANT: This file defines the DEFAULT values.
   Responsive overrides are in responsive.css (load AFTER this file)
   
   DEFAULT VALUES TARGET: Medium mobile (414px)
   This ensures mobile-first design with sensible defaults.
   
   ======================================== */


/* ============================================================
   CSS CUSTOM PROPERTIES (DEFAULT VALUES)
   ============================================================
   These are the baseline values for a medium mobile device.
   All values are overridden per breakpoint in responsive.css
   ============================================================ */

:root {
    /* === UI SCALE === */
    /* Calculated by JavaScript based on screen width */
    /* This is the SINGLE SOURCE OF TRUTH for responsive sizing */
    --ui-scale: 1;
    --ui-scale-inverse: 1;
    
    /* === BASE SIZES (at scale 1.0 = 1920px width) === */
    /* These are the reference values that get multiplied by --ui-scale */
    --base-footer-icon: 64px;
    --base-footer-gap: 18px;
    --base-modal-width: 500px;
    --base-modal-height: 550px;
    --base-font-body: 16px;
    --base-font-heading: 24px;
    --base-spacing: 16px;
    
    /* === FONT SIZES === */
    /* Named sizes from extra-small to extra-extra-large */
    /* INCREASED for better mobile readability */
    --font-xs: 13px;     /* Tiny labels, badges */
    --font-sm: 15px;     /* Small labels, counters */
    --font-md: 17px;     /* Body text, descriptions */
    --font-lg: 20px;     /* Headings, values */
    --font-xl: 24px;     /* Large headings */
    --font-xxl: 30px;    /* Title text */
    
    /* === SPACING === */
    /* Consistent spacing scale */
    --spacing-xs: 3px;
    --spacing-sm: 5px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    
    /* === HUD (HEADER) SIZING === */
    /* Controls the score/moves/level stat boxes */
    --hud-width: min(85vw, 420px);
    --hud-box-padding-v: 6px;   /* Vertical padding */
    --hud-box-padding-h: 8px;   /* Horizontal padding */
    --hud-gap: 8px;             /* Gap between stat boxes */
    
    /* === FOOTER SIZING (SCALED) === */
    /* These are now calculated from base values × scale */
    --footer-icon-size: calc(var(--base-footer-icon) * var(--ui-scale));
    --footer-gap: calc(var(--base-footer-gap) * var(--ui-scale));
    --footer-bottom: 0px;       /* Distance from bottom edge */
    
    /* === TIMER BAR === */
    /* Gold bonus timer */
    --timer-icon-size: 42px;
    
    /* === MODAL SIZING (SCALED) === */
    /* Stash, collection, location modals */
    --modal-max-width: calc(var(--base-modal-width) * var(--ui-scale));
    --modal-max-height: calc(100dvh - 120px); /* Space for footer + padding - dvh for mobile browser chrome */
    --modal-padding: 15px;
    
    /* === BORDER RADIUS === */
    /* Consistent corner rounding */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* === BORDERS === */
    /* Consistent border widths */
    --border-thin: 2px;
    --border-thick: 3px;
    --border-thicker: 4px;
    
    /* === BUTTONS === */
    /* Button sizing and behavior */
    --btn-padding-v: 12px;
    --btn-padding-h: 24px;
    --btn-close-min-width: 160px;
    
    /* === VICTORY SCREEN === */
    /* Victory panel specific sizing */
    --victory-title-size: 24px;
    --victory-combo-size: 20px;
    --victory-gold-size: 32px;
    --victory-gem-name-size: 18px;
    --victory-gem-power-size: 15px;
    
    /* === LOADING SCREEN === */
    /* Loading screen specific sizing */
    --loading-title-size: 36px;
    --loading-subtitle-size: 14px;
    --loading-tip-size: 11px;
    --loading-gem-size: 80px;
    --loading-bar-width: 300px;
    
    /* === MAIN MENU === */
    /* Main menu specific sizing */
    --menu-container-width: 420px;
    --menu-logo-width: 250px;
    --menu-button-width: 250px;
    
    /* === TRANSITIONS === */
    /* Animation speeds */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* === Z-INDEX LAYERS === */
    /* Stacking order */
    --z-ui-layer: 100;
    --z-modal-overlay: 2000;
    --z-modal-active: 3000;
    --z-not-enough-gold: 3500;
    --z-footer: 5000;
    --z-no-moves: 9999;
    --z-loading: 10000;
    --z-main-menu: 15000;
    --z-auth-modal: 17000;
    
    /* === LOCATION BANNER === */
    /* The area name displayed at top */
    --location-banner-padding: 6px 20px;
    --location-font-size: 16px;
    
    /* === SAFE AREAS === */
    /* Space reserved for footer to prevent overlap */
    --safe-area-bottom: 80px;
    
    /* === COLORS === */
    /* Theme colors (not commonly overridden per breakpoint) */
    --color-primary: #7d5a8f;
    --color-primary-dark: #2d1b3d;
    --color-gold: #ffd700;
    --color-gold-dark: #daa520;
    --color-text: #ffffff;
    --color-text-muted: #b090c8;
    --color-success: #44ff88;
    --color-danger: #ff6666;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   BODY STYLES
   ============================================================ */

body {
    margin: 0;
    padding: 0;
    background: #000;
    
    /* Full viewport dimensions */
    width: 100%;
    width: 100vw;
    min-height: 100dvh; /* dvh for mobile browser chrome */
    min-height: 100dvh; /* Dynamic viewport height - accounts for mobile browser UI */
    
    /* Prevent scrolling and overflow */
    overflow: hidden;
    
    /* Typography */
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    font-size: var(--font-md);
    color: var(--color-text);
    
    /* Prevent text selection (game UI) */
    user-select: none;
    -webkit-user-select: none;
    
    /* Remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior: none;
}


/* ============================================================
   CANVAS STYLES
   ============================================================ */

canvas {
    display: block;
    
    /* Let Phaser manage the canvas size - don't force with !important */
    /* This prevents aspect ratio distortion on mobile browsers */
    margin: 0;
    padding: 0;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Prevent text selection on UI elements */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* Hide element completely */
.hidden {
    display: none !important;
}

/* Invisible but takes up space */
.invisible {
    visibility: hidden;
}

/* Text ellipsis for overflow */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   SAFE AREA PADDING (Notched Devices)
   ============================================================
   For iPhone X+ and other devices with notches/home indicators
   ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    body {
        /* DON'T add padding-top - we want the canvas/background to go edge-to-edge */
        /* The header UI is already offset with CSS top: 30px to avoid the status bar */
        padding-top: 0;
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}


/* ============================================================
   SCROLLBAR STYLING
   ============================================================
   Custom scrollbar for modal content
   ============================================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(45, 27, 61, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9070a8;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) rgba(45, 27, 61, 0.5);
}


/* ============================================================
   FOCUS STYLES (Accessibility)
   ============================================================ */

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================================
   ANIMATION UTILITIES
   ============================================================ */

/* Smooth transitions for all interactive elements */
.transition-fast {
    transition: all 0.1s ease;
}

.transition-normal {
    transition: all 0.2s ease;
}

.transition-slow {
    transition: all 0.3s ease;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   GEM COLLECTION ANIMATION KEYFRAMES
   ============================================================
   Used by StartingLevel.js for flying gem collection effects
   ============================================================ */

/* Gem spin during flight */
@keyframes gem-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gem glow pulse during flight */
@keyframes gem-glow-pulse {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
}

/* Flash when gem is picked up */
@keyframes pickup-flash {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Trail particle fade */
@keyframes gem-trail-fade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.2) translateY(15px); }
}

/* Big flash when gem lands */
@keyframes collection-flash {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* Starburst rays shooting out */
@keyframes starburst-ray {
    0% { height: 8px; opacity: 1; }
    30% { height: 60px; opacity: 1; }
    100% { height: 80px; opacity: 0; }
}

/* Sparkles exploding outward */
@keyframes sparkle-explode {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { 
        opacity: 0; 
        transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) scale(0.2);
    }
}

/* Ring expanding outward */
@keyframes ring-explode {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

/* Collection text animation */
@keyframes collection-text {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    60% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(0.9); }
}


/* ============================================================
   NOTES
   ============================================================
   
   FILE LOADING ORDER (in game.html):
   1. base.css         - This file (defaults + reset)
   2. loading.css      - Loading screen
   3. ui-overlay.css   - Main UI layer
   4. header.css       - Header/HUD elements
   5. footer-detailed.css - Footer icons
   6. buttons.css      - Button styles
   7. modals.css       - Modal panels
   8. [other css...]   - Feature-specific CSS
   9. responsive.css   - LAST! Overrides all breakpoints
   
   RESPONSIVE DESIGN:
   - responsive.css contains ALL media queries
   - Edit responsive.css to tweak sizing at different screen sizes
   - This file should NOT contain media queries
   
   ============================================================ */