/* ============================================================
   GLITCH WARS - Core Styles
   ============================================================ */

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

html, body {
    width: 100%;
    height: 100%;
    /* Belt-and-braces for iOS Safari 100vh bug — body is also position:fixed below */
    min-height: 100%;
    overflow: hidden;
    background: #000;
    color: #eee;
    font-family: monospace;
    /* Prevent iOS text-size auto inflation */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent touch scrolling and gestures */
    touch-action: none;
    overscroll-behavior: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Lock the body against pull-to-refresh / rubber-band scroll on mobile */
body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Respect iOS safe-area insets so letterbox doesn't hide under notches */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Canvas fills viewport edge-to-edge. Engine.resize() reshapes the
   internal backing-store width to match viewport aspect (height stays 720)
   so there is no distortion and no bars at common aspect ratios. CSS
   centering only kicks in at extreme aspects (narrower than 4:3 or wider
   than 24:9) where the engine's clamps cap the playfield. */
#gameCanvas {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
    background: #07080c;           /* match engine clearScreen color */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Suppress focus outline only for mouse/pointer focus; keyboard users still
   get a visible cyan focus ring for accessibility (WCAG 2.4.7). */
#gameCanvas:focus { outline: none; }
#gameCanvas:focus-visible {
    outline: 2px solid #00e5ff;
    outline-offset: 2px;
}

/* Hide scrollbars in all browsers */
::-webkit-scrollbar {
    display: none;
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Visually hidden but readable by assistive tech (WCAG-compliant pattern). */
.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;
}

/* Respect prefers-reduced-motion for any CSS-driven motion (canvas-side
   motion is gated independently via GW.Engine.reducedMotion()). */
@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;
    }
}

/* Portrait phones: the playfield is landscape-only (min 4:3), so in portrait
   the canvas shrinks to ~a third of the width and nothing is tappable. Show a
   clear full-screen prompt instead of a tiny footer hint. The canvas keeps
   rendering underneath so the game resumes the instant the phone rotates. */
@media screen and (orientation: portrait) and (max-width: 900px) {
    body::after {
        content: 'ROTATE YOUR DEVICE\A\A Glitch Wars plays in landscape';
        white-space: pre;
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: env(safe-area-inset-top) env(safe-area-inset-right)
                 env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: rgba(7, 8, 12, 0.92);
        color: #00e5ff;
        font: bold 18px/1.6 monospace;
        letter-spacing: 2px;
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
        pointer-events: none;
        z-index: 100;
    }
}