/* iOS Native App - WebView Fixes */
/* Add this to ensure consistent rendering in iOS WebView */

/* Safe area support for iOS notch and home indicator */
:root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
}

/* iOS WebView body fixes */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    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);
}

/* Fix scrolling issues */
* {
    -webkit-overflow-scrolling: touch;
}

/* Fix input zoom on iOS */
input, select, textarea {
    font-size: 16px !important;
}

/* Fix button tap delays */
button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Fix flexbox in iOS WebView */
.container, .main-content, .predictions-section {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Status bar spacer for iOS */
.ios-status-bar-spacer {
    height: env(safe-area-inset-top);
    background: #003087;
}

/* Fix transform rendering */
* {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Fix backdrop filters for iOS */
.auth-container, .game-card, .prediction-card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Prevent text selection issues */
.game-card, .prediction-card, button {
    -webkit-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* Fix gradient rendering */
.hero-section, .game-card, [style*="gradient"] {
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* Fix animation performance */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix modal/overlay scrolling */
.modal, .overlay {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}