/* File: /public/css/core/base.css */
/* White-Label Gaming Platform - Base Styles & Reset */
/* v1.1.0 - Added CSS variable support for bg-image-opacity and bg-vignette-opacity */
/*
 * KEY NOTES:
 * - Global CSS reset
 * - Body and HTML full-viewport app setup
 * - App wrapper layout
 * - Utility classes
 * - All colors use CSS variables from variables.css
 *
 * DEPENDENCIES:
 * - MUST load css/core/variables.css BEFORE this file
 *
 * USAGE:
 * <link rel="stylesheet" href="css/core/variables.css">
 * <link rel="stylesheet" href="css/core/base.css">
 * <link rel="stylesheet" href="css/core/animations.css">
 * ... then components, games, themes
 */

/* =================================================================
   CSS RESET
   Modern reset with sensible defaults
   ================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Remove default list styles */
ul, ol {
    list-style: none;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default link styles */
a {
    color: inherit;
    text-decoration: none;
}

/* Make images easier to work with */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Inherit fonts for form elements */
input, button, textarea, select {
    font: inherit;
}

/* Remove button default styles */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* =================================================================
   HTML & BODY - Full Viewport App Setup
   ================================================================= */
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--gradient-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* =================================================================
   BACKGROUND IMAGE LAYER
   Uses CSS variable for white-label customization
   ================================================================= */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--asset-background);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: var(--bg-image-opacity);
    z-index: 0;
    pointer-events: none;
}

/* Dark overlay for better text contrast */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, var(--bg-vignette-opacity)) 100%);
    z-index: 0;
    pointer-events: none;
}

/* =================================================================
   APP WRAPPER - Full Viewport Layout
   ================================================================= */
.app-wrapper {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-4);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

/* =================================================================
   CONTAINER - Main Content Wrapper
   ================================================================= */
.container {
    max-width: 1100px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* =================================================================
   GAME PAGE LAYOUT
   Base layout for game pages (tower-stack, minesweeper, etc.)
   ================================================================= */
.game-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.game-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    position: relative;
    z-index: 10;
}

/* =================================================================
   LANDING PAGE LAYOUT
   ================================================================= */
.landing-page {
    overflow-y: auto;
    overflow-x: hidden;
}

.landing-page .app-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

/* =================================================================
   TYPOGRAPHY - Base Styles
   ================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

p {
    line-height: var(--leading-normal);
}

/* =================================================================
   FOCUS STATES - Accessibility
   ================================================================= */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

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

/* =================================================================
   SELECTION STYLES
   ================================================================= */
::selection {
    background: rgba(var(--brand-primary-rgb), 0.3);
    color: var(--text-primary);
}

/* =================================================================
   SCROLLBAR STYLES
   Custom scrollbar for webkit browsers
   ================================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb), 0.3);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-primary-rgb), 0.5);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-primary-rgb), 0.3) rgba(255, 255, 255, 0.05);
}

/* =================================================================
   UTILITY CLASSES
   Common utility classes used across the platform
   ================================================================= */

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

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

/* Force hidden (overrides media queries) */
.force-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-display { font-family: var(--font-display); }
.font-bold { font-weight: 700; }

/* Color utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand-primary); }
.text-gold { color: var(--brand-secondary); }

/* =================================================================
   REDUCED MOTION
   Respect user preferences
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =================================================================
   PRINT STYLES
   Basic print optimization
   ================================================================= */
@media print {
    body::before,
    body::after {
        display: none;
    }
    
    .shared-header,
    .shared-chat-panel,
    .mobile-nav-footer {
        display: none !important;
    }
}