/* responsive-config.css */
@import url('https://api.fontshare.com/v2/css?f[]=boxing@400&display=swap');

:root {
    /* Screen Tier Breakpoints mapping */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1200px;
    --breakpoint-wide: 1920px;

    /* Base Layout Safe Zones (respecting notched devices) */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);

    /* Baseline sizes */
    --header-height-base: 60px;
    --footer-height-base: 60px;
    
    /* Centralized Z-Index Scale */
    --z-canvas: 0;
    --z-game-ui: 10;
    --z-hud: 20;
    --z-ad: 30;
    --z-modal: 40;
    --z-toast: 50;

    /* Cyber-Neon Theme System */
    --accent: #00ff6a;
    --accent-alt: #00d2ff;
    --bg-black: #000000;
    --surface: #0a0a0a;
    --text-main: #ffffff;
    --muted-text: #888;
    --border-color: #222;
    --accent: #ff6600;
    --font-heading: 'Boxing', sans-serif;
}

h1, h2, h3, h4, h5, h6, .title, .logo, .hero-title, .game-logo, .category-label {
    font-family: 'Boxing', sans-serif !important;
}

/* Default to Mobile Breakpoint (320px - 767px) */
:root {
    --current-screen: 'mobile';
}

@media (min-width: 768px) {
    :root {
        --current-screen: 'tablet';
        --header-height-base: 80px;
    }
}

@media (min-width: 1200px) {
    :root {
        --current-screen: 'desktop';
        --header-height-base: 120px;
        --footer-height-base: 80px;
    }
}

@media (min-width: 1920px) {
    :root {
        --current-screen: 'wide';
    }
}

/* Base Responsive Canvas Logic */
.game-canvas-responsive {
    /* FIX [DEFECT-03]: Replaced destructive 100dvh hardcodes with flex-1 bounding to respect HUD headers */
    display: block;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0; /* Prevents flex blowout */
    max-width: 100dvw;
    margin: 0;
    padding: 0;
    object-fit: contain;
    touch-action: none;
}

/* Hide non-essential UI in full screen canvas mode on mobile */
@media (max-width: 767px) {
    body.is-playing-game .layout-header,
    body.is-playing-game .layout-footer,
    body.is-playing-game .layout-left,
    body.is-playing-game .layout-right {
        display: none !important;
    }
    
    body.is-playing-game {
        position: fixed;
        width: 100dvw;
        height: 100dvh;
        overflow: hidden;
    }
}