/* ========================================================================== IN-APP WEBVIEW SAFE MODE Loaded after page-specific CSS. Active when (set early in base.html from common Messenger / Zalo / FB / Line UAs). Messenger & similar WebViews often composite backdrop-filter + translucent rgba incorrectly → global background reads as white. This sheet: - Forces a solid dark canvas on html/body/main - Disables backdrop-filter site-wide (solid panels keep contrast) - Replaces key “glass” surfaces with opaque dark fills ========================================================================== */ html.in-app-webview, html.in-app-webview body { background-color: #050b18 !important; background-attachment: scroll !important; } html.in-app-webview main.container { background-color: #050b18; min-height: calc(100vh - 100px); } /* Remove glass compositing everywhere in WebView (root cause of white wash) */ html.in-app-webview *, html.in-app-webview *::before, html.in-app-webview *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --- Pokémon detail --- */ html.in-app-webview .detail-page { background-color: #050b18; } html.in-app-webview .glass-card { background: rgba(12, 16, 30, 0.97) !important; } /* --- Landing: news cards (body was transparent; blur made it read as white) --- */ html.in-app-webview .news-card { background: rgba(10, 14, 26, 0.98) !important; } html.in-app-webview .news-card-body { background: rgba(8, 11, 22, 0.99) !important; } html.in-app-webview .news-card-title { color: rgba(255, 255, 255, 0.96) !important; } html.in-app-webview .news-card-excerpt { color: rgba(210, 220, 240, 0.88) !important; } html.in-app-webview .news-card-date { color: rgba(175, 190, 215, 0.8) !important; } /* --- Poké Ball catalog --- */ html.in-app-webview .pokeball-slide { background-color: rgba(5, 8, 18, 0.55); } html.in-app-webview .pokeball-section-glass { background: rgba(10, 14, 28, 0.96) !important; } /* Glow layers: heavy blur + low opacity can still blow out in WKWebView */ html.in-app-webview .pokeball-glow { filter: none !important; opacity: 0.06 !important; } /* --- Global search modal --- */ html.in-app-webview .search-modal-overlay { background: rgba(2, 5, 14, 0.94) !important; } html.in-app-webview .search-modal-container { background: rgba(12, 16, 30, 0.98) !important; }