/* ===============================================
   LAYOUT TOKENS - Global Layout System
   Solves: Header overlap, iOS 100vh bug, safe areas
   =============================================== */

:root {
    /* Dynamic header height - updated by JS on load/resize */
    --header-h: 70px;

    /* Safe area insets for notches and home indicators */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Computed header total including safe area */
    --header-total: calc(var(--header-h) + var(--safe-top));

    /* iOS 100vh fix - updated by JS */
    --vh: 1vh;
    --full-height: calc(var(--vh, 1vh) * 100);
}

/* ===============================================
   MAIN CONTENT OFFSET
   Apply header offset to all main content areas
   =============================================== */

.main-content,
main:first-of-type,
[data-main-content] {
    padding-top: var(--header-total);
}

/* Portal screen special handling */
#portalScreen {
    padding-top: var(--header-total);
}

/* ===============================================
   FULL HEIGHT CONTAINERS
   Fix iOS Safari 100vh bug
   =============================================== */

.full-screen,
.min-h-screen {
    min-height: var(--full-height);
    min-height: 100vh;
    /* Fallback for browsers without CSS variables */
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {

    .full-screen,
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}

/* ===============================================
   GAME SCREEN FULL VIEWPORT
   Fixed positioning with safe areas
   =============================================== */

.game-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: var(--full-height);
    min-height: 100vh;
    z-index: 9998;
    overflow: hidden;
}

/* Safe area padding for game action buttons */
.game-actions {
    padding-bottom: calc(0.5rem + var(--safe-bottom));
}

/* ===============================================
   NAVBAR SAFE AREA SUPPORT
   Proper safe-area handling for fixed navbar
   =============================================== */

.navbar {
    padding-top: var(--safe-top);
}

/* ===============================================
   FOOTER SAFE AREA SUPPORT
   Account for home indicator on iOS
   =============================================== */

.footer {
    padding-bottom: calc(var(--space-lg, 2rem) + var(--safe-bottom));
}

/* ===============================================
   Z-INDEX HIERARCHY
   Consistent stacking order across site
   =============================================== */

:root {
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-navbar: 100;
    --z-game-screen: 9998;
    --z-confetti: 9999;
    --z-modal: 10000;
    --z-toast: 10001;
}

/* Apply z-index to navbar */
.navbar {
    z-index: var(--z-navbar);
}

/* Game screens above navbar */
#tabuGameScreen,
.game-fullscreen {
    z-index: var(--z-game-screen);
}

/* Confetti above game */
#confettiContainer {
    z-index: var(--z-confetti);
}

/* ===============================================
   LANDSCAPE MODE ADJUSTMENTS
   =============================================== */

@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --header-h: 50px;
    }

    .game-fullscreen {
        /* Reduce padding and use compact typography */
        padding: 0.5rem;
    }
}