/* ===== Fantasy Tower Defense — Base Styles (v1.0.1) ===== */
/* Landscape-first design, mobile-adaptive 2D cartoon cute style */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #1a1a3e 0%, #2d1b69 50%, #1a1a3e 100%);
    -webkit-font-smoothing: antialiased;
    color: #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== Screen management ===== */
/* Use absolute positioning, which works reliably on all mobile browsers */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.screen.active {
    display: flex;
}

/* ===== Animated stars background ===== */
.stars-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.star {
    position: absolute;
    color: #FFD700;
    font-size: 14px;
    animation: twinkle 2s ease-in-out infinite;
    opacity: 0.6;
}
.star.small { font-size: 8px; opacity: 0.4; }
.star.large { font-size: 20px; opacity: 0.8; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ===== Version tag ===== */
.version-tag {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
    z-index: 999;
}

/* ===== Landscape orientation reminder overlay ===== */
/* Primary: pure CSS @media query (most reliable on iOS Safari/mobile).
   Secondary: JS .show class as fallback for browsers that don't fire media queries properly. */
#orientationOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a3e 0%, #2d1b69 100%);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}
/* JS fallback */
#orientationOverlay.show {
    display: flex;
}
#orientationOverlay .rotate-icon {
    font-size: 64px;
    animation: rotateHint 2s ease-in-out infinite;
}
#orientationOverlay .rotate-text {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 2px;
}
@keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

/* ===== CSS-based orientation detection (primary, most reliable on iOS) ===== */
/* Portrait: show overlay on top of game content */
@media screen and (orientation: portrait) {
    #orientationOverlay {
        display: flex !important;
    }
}

/* Landscape: hide overlay so game content is visible */
@media screen and (orientation: landscape) {
    #orientationOverlay {
        display: none !important;
    }
}

/* ===== Scrollbar hidden ===== */
::-webkit-scrollbar { display: none; }

/* gameCanvas styles are in game.css */

/* ===== Safe area insets for notched phones ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}