/* assets/fix.css — compatibility shims (2026-07-24)
 * Loaded AFTER each page's inline <style> so these rules win on equal specificity.
 */

/* Mobile dynamic viewport: 100vh includes the browser's URL/tool bar, which
   pushes bottom content (mascot, last grid row, buttons) out of reach.
   100dvh tracks the *visible* area; older engines ignore it and keep 100vh. */
html { min-height: 100%; }
body { min-height: 100vh; min-height: 100dvh; }

/* Never let media blow past the screen width (common "cut-off" cause). */
img, video, canvas, svg, iframe { max-width: 100%; }

/* If a browser lacks backdrop-filter, glass surfaces become near-transparent
   over the colorful gradient and text turns unreadable. Boost opacity so the
   interface stays complete and legible. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .overlay, .player, .vcard, .pcard, .modal, .luxury-glass {
    background: rgba(255, 255, 255, 0.94);
  }
  [data-theme="dark"] .overlay,
  [data-theme="dark"] .player,
  [data-theme="dark"] .vcard,
  [data-theme="dark"] .pcard,
  [data-theme="dark"] .modal,
  [data-theme="dark"] .luxury-glass {
    background: rgba(24, 20, 46, 0.94);
  }
}

/* Avoid blue tap flash on touch devices. */
button, .vcard, a { -webkit-tap-highlight-color: transparent; }