/* ==========================================
   CONSOLIDATED MOBILE STYLES
   BBFiller Desktop - Optimized mobile experience
   ========================================== */

/* CRITICAL: Global honeypot field hiding - applies to all screen sizes */
.sr-only,
.contact-card .sr-only,
.contact-card input.sr-only,
input[name='_gotcha'],
form input[name='_gotcha'],
.contact-grid input[name='_gotcha'],
.contact-item input[name='_gotcha'],
.message-item input[name='_gotcha'],
div input[name='_gotcha'],
.window-content input[name='_gotcha'],
body input[name='_gotcha'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  min-width: 0 !important;
  max-width: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
  left: -9999px !important;
  top: -9999px !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-transform: scale(0) !important;
  transform: scale(0) !important;
}

/* Critical mobile setup with FOUC prevention */
/* Apply on phones in portrait and tight landscape heights to avoid blank layouts when width exceeds 768px */
@media screen and (max-width: 900px),
  screen and (orientation: landscape) and (max-height: 600px) {
  :root {
    /* Ensure popups sit above mobile icon grid while staying below the header */
    --z-window: 99990;
    --mobile-header-offset: 75px;
    --mobile-header-height: 60px;
    --mobile-grid-columns: 3;
    --mobile-grid-gap: 16px;
    --mobile-icon-min-height: 90px;
  }

  /* Fundamental mobile base - IMMEDIATE APPLICATION */
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;

    /* Cross-browser text scaling prevention handled in scrollbars-webkit.css */
    position: relative;
    font-size: 16px;
    /* Prevent zoom on input focus */
    background: #0a001a !important;
    /* Critical: prevent white flash */
    color: #00f0ff !important;
  }

  /* Performance optimizations */
  * {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-sizing: border-box;
  }

  /* CRITICAL: Hide desktop elements immediately to prevent FOUC */
  .desktop-only,
  .taskbar,
  .windows,
  .window,
  #start-bar,
  #start-button,
  #taskbar-icons,
  #clock,
  .taskbar-item,
  .taskbar-icon,
  .start-menu,
  .submenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* CRITICAL: Immediately show mobile-appropriate elements */
  .desktop-icon,
  .container,
  .icon-grid,
  #desktop-icons,
  .header,
  .title,
  h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Minimize is not used on mobile */
  .window-controls .minimize {
    display: none !important;
  }

  /* Prevent overlay layers from swallowing taps */
  .popup-window .window-fade-mask {
    pointer-events: none !important;
  }

  /* Starfield background fixes */
  #starfield,
  canvas[id='starfield'] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--z-background) !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Header fixes - force visibility with improved sizing */
  body .header {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 60px !important;
    z-index: var(--z-taskbar) !important;
    background: rgb(10 13 21 / 95%) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--neon-purple) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    gap: 2px !important;
  }

  /* Header title styling - more compact */
  body .header .landing-title {
    font-size: 0.9rem !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    color: var(--neon-cyan) !important;
    display: block !important;
    position: relative !important;
    max-width: calc(100% - 24px) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: 0.05em !important;
  }

  /* Main container optimizations - adjusted for smaller header */
  body .container {
    padding-bottom: 15px !important;
    height: calc(
      100vh - var(--mobile-header-offset) - env(safe-area-inset-top)
    ) !important;
    overflow-y: auto !important;
    /* stylelint-disable-next-line compat-api/css -- Progressive enhancement: graceful degradation for older browsers */
    overscroll-behavior: contain !important;
    /* iOS 16+, Chrome 63+, Firefox 59+ */

    /* Hide scrollbars - Legacy Edge/IE */
    -ms-overflow-style: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: transparent !important;
    /* Let starfield show through */
    width: 100% !important;
    padding: 10px 15px !important;
    padding-top: calc(
      var(--mobile-header-offset) + env(safe-area-inset-top)
    ) !important;
  }

  /* Hide scrollbars in Firefox only (guarded for browser compatibility tooling) */
  @supports (scrollbar-width: none) {
    body .container {
      scrollbar-width: none !important;
    }
  }

  /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
  body .container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body .container::-webkit-scrollbar-thumb {
    background: transparent !important;
  }

  /* Icon grid optimizations - better spacing and layout */
  .icon-grid,
  #desktop-icons {
    display: grid !important;
    grid-template-columns: repeat(
      var(--mobile-grid-columns, 3),
      minmax(0, 1fr)
    ) !important;
    gap: var(--mobile-grid-gap, 18px) !important;
    padding: 15px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    justify-items: center !important;
    align-content: start !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Desktop icons mobile styling - improved touch targets */
  .desktop-icon {
    width: 90px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 6px !important;
    text-align: center !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    background: rgb(0 240 255 / 12%) !important;
    border: 1px solid rgb(0 240 255 / 35%) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--mobile-icon-min-height, 100px) !important;
  }

  /* Icon hover effects */
  .desktop-icon:hover,
  .desktop-icon:active {
    background: rgb(0 240 255 / 22%) !important;
    border-color: var(--neon-cyan) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 0 18px rgb(0 240 255 / 45%) !important;
  }

  /* Icon images - optimized size */
  .desktop-icon img {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 6px !important;
    filter: brightness(1.2) !important;
  }

  /* Icon labels - improved readability */
  .desktop-icon span {
    font-size: 0.7rem !important;
    color: var(--neon-cyan) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    text-shadow: 0 0 6px rgb(0 240 255 / 80%) !important;
    max-width: 100% !important;
    padding: 0 2px !important;
  }

  /* Touch interactions */
  .desktop-icon {
    -webkit-tap-highlight-color: rgb(0 240 255 / 30%) !important;
    touch-action: manipulation !important;
  }

  /* Typography fixes */
  h1,
  .title,
  .landing-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 10px rgb(0 240 255 / 80%) !important;
  }

  /* Loading states */
  .loading {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 200px !important;
    color: var(--neon-cyan) !important;
  }

  /* Scrollbar styling moved to scrollbars-webkit.css */

  /* Error states */
  .error {
    color: #f44 !important;
    text-align: center !important;
    padding: 20px !important;
    background: rgb(255 68 68 / 10%) !important;
    border: 1px solid rgb(255 68 68 / 30%) !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
  }

  /* Modal overlays mobile fixes */
  .modal,
  .overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--z-startmenu) + 1000) !important;
    background: rgb(0 0 0 / 90%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
  }

  /* Form elements mobile optimization */
  input,
  textarea,
  select,
  button {
    font-size: 16px !important;
    /* Prevent iOS zoom */
    border-radius: 8px !important;
    padding: 12px 16px !important;
    border: 1px solid rgb(0 240 255 / 30%) !important;
    background: rgb(0 0 0 / 70%) !important;
    color: var(--neon-cyan) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  button {
    background: rgb(0 240 255 / 20%) !important;
    border-color: var(--neon-cyan) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: all 0.3s ease !important;
  }

  button:hover,
  button:active {
    background: rgb(0 240 255 / 30%) !important;
    box-shadow: 0 0 10px rgb(0 240 255 / 50%) !important;
  }

  /* Mobile folder content fixes - improved grid layout for folder contents */
  .folder-content {
    display: grid !important;
    grid-template-columns: repeat(
      var(--mobile-grid-columns, 3),
      1fr
    ) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    gap: var(--mobile-grid-gap, 16px) !important;
    padding: 16px 12px !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Specific overrides for coolpics and videos folders */
  #coolpics-folder-content,
  #videos-folder-content {
    display: grid !important;
    grid-template-columns: repeat(
      var(--mobile-grid-columns, 3),
      1fr
    ) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    gap: var(--mobile-grid-gap, 16px) !important;
    padding: 16px 12px !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure popup windows display correctly on mobile */
  .popup-window {
    position: fixed !important;
    width: 96vw !important;
    height: calc(100vh - var(--mobile-header-offset) - 20px) !important;
    max-width: 98vw !important;
    max-height: 90vh !important;
    top: calc(var(--mobile-header-offset) + 2px) !important;
    left: 2vw !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    z-index: calc(var(--z-window) + 10) !important;
    pointer-events: auto !important;
    background: rgb(10 10 20 / 98%) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  }

  .popup-window .window-content {
    height: calc(100% - 50px) !important;
    overflow-y: auto !important;
  }

  .popup-window.mobile-fullscreen {
    inset: calc(var(--mobile-header-offset, 75px) + env(safe-area-inset-top)) 0
      0 0 !important;
    width: 100vw !important;
    height: calc(
      100vh - var(--mobile-header-offset, 75px) - env(safe-area-inset-top)
    ) !important;
    border-radius: 0 !important;
    border: none !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    left: 0 !important;
  }

  .popup-window.mobile-fullscreen .window-content {
    flex: 1 1 auto !important;
    max-height: calc(
      100vh - var(--mobile-header-offset, 75px) - 52px
    ) !important;
    overflow-y: auto !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .popup-window.mobile-fullscreen .window-content picture,
  .popup-window.mobile-fullscreen .window-content img,
  .popup-window.mobile-fullscreen .window-content video,
  .popup-window.mobile-fullscreen .window-content iframe,
  .popup-window.mobile-fullscreen .window-content canvas {
    max-width: 100% !important;
  }

  .popup-window.mobile-fullscreen .window-content img,
  .popup-window.mobile-fullscreen .window-content video {
    width: 100% !important;
    height: auto !important;
    max-height: calc(
      100vh - var(--mobile-header-offset, 70px) - 120px
    ) !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }

  /* Responsive video containers inside windows */
  .popup-window .lite-video-container {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: min(70vh, 520px) !important;
    min-height: 220px !important;
    border-radius: 12px !important;
  }

  /* Mobile-specific icon styling within folders - improved for better display */
  .folder-content .desktop-icon {
    width: 90px !important;
    min-height: 95px !important;
    margin: 0 !important;
    padding: 10px 6px !important;
    background: rgb(0 240 255 / 12%) !important;
    border: 1px solid rgb(0 240 255 / 35%) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
  }

  .folder-content .desktop-icon:hover,
  .folder-content .desktop-icon:active {
    background: rgb(0 240 255 / 22%) !important;
    border-color: var(--neon-cyan) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 0 18px rgb(0 240 255 / 45%) !important;
  }

  .folder-content .desktop-icon .icon-frame {
    padding: 6px !important;
    border: 1px solid var(--neon-purple) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 8px var(--neon-purple) !important;
  }

  .folder-content .desktop-icon .icon-frame img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .folder-content .desktop-icon .icon-label {
    font-size: 0.65rem !important;
    margin-top: 5px !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Calmer title glow for image popups */
  .popup-window .psychedelic-text {
    color: #d8f5ff !important;
    text-shadow:
      0 0 1px rgb(255 255 255 / 40%),
      0 0 4px rgb(0 240 255 / 35%),
      0 0 8px rgb(191 0 255 / 25%) !important;
    letter-spacing: 0.08em !important;
  }

  .popup-window .psychedelic-text::after {
    opacity: 0.35 !important;
  }

  /* Mobile hero presentation for boot screen */
  .boot-screen .profile-container {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .boot-screen .profile-container .image-glow-effect {
    width: 140px !important;
    height: 140px !important;
    filter: blur(0.8px) !important;
    opacity: 0.5 !important;
  }

  .boot-screen .profile-container .profile-image {
    width: 120px !important;
    height: 120px !important;
    box-shadow: 0 0 12px rgb(0 255 255 / 45%) !important;
    border-width: 1px !important;
  }
}

/* Tablet specific adjustments */
@media screen and (width >=481px) and (width <=768px) {
  :root {
    --mobile-grid-columns: 4;
    --mobile-grid-gap: 22px;
    --mobile-icon-min-height: 110px;
  }

  .header {
    min-height: 65px !important;
    padding: 10px 16px !important;
  }

  .header .landing-title {
    font-size: 1rem !important;
  }

  .container {
    padding-top: 80px !important;
    height: calc(100vh - 80px) !important;
  }
}

/* ==========================================
   MOBILE IFRAME FIXES
   Ensures external apps load correctly on first open
   ========================================== */
@media screen and (width <=768px) {
  /* Force iframes to have explicit dimensions on mobile */
  .popup-window.iframe-window iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block !important;
    border: none !important;
    background: #0a001a !important;

    /* Force GPU acceleration for smoother rendering */
    transform: translateZ(0) !important;
    will-change: contents !important;
  }

  /* Ensure window content containers have explicit dimensions */
  .popup-window.iframe-window .window-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    overflow: hidden !important;
    position: relative !important;

    /* Ensure proper flex layout */
    display: flex !important;
    flex-direction: column !important;
  }

  /* External app windows need stable dimensions */
  #music,
  #tripwave,
  #spacesnake,
  #r3d3ch0,
  #bbfillermusic {
    min-height: 400px !important;
  }

  #music .window-content,
  #tripwave .window-content,
  #spacesnake .window-content,
  #r3d3ch0 .window-content,
  #bbfillermusic .window-content {
    padding: 0 !important;
    flex: 1 !important;
  }

  /* Loading state improvements for iframes */
  .popup-window.window-loading iframe {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }

  .popup-window:not(.window-loading) iframe {
    opacity: 1 !important;
  }

  /* Prevent layout shifts during iframe load */
  .popup-window:not(.hidden) {
    contain: layout style !important;
  }

  /* Force immediate dimensions for content windows (apps, videos, etc.) */
  .popup-window.mobile-fullscreen {
    width: 100vw !important;
    height: calc(100vh - var(--mobile-header-offset, 75px)) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    top: var(--mobile-header-offset, 75px) !important;
    left: 0 !important;
    border-radius: 0 !important;
  }

  /* Content windows that don't have mobile-fullscreen yet should also be large */
  .popup-window:not(.folder-window) {
    min-width: 90vw !important;
  }

  .popup-window.mobile-fullscreen .window-content {
    height: 100% !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    /* Content windows usually want zero padding */
  }

  .popup-window.mobile-fullscreen iframe,
  .popup-window.mobile-fullscreen lite-youtube {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

/* Landscape mobile optimizations for game iframes */
@media screen and (width <=768px) and (orientation: landscape) {
  :root {
    --mobile-header-offset: 60px;
    --mobile-grid-columns: 5;
    --mobile-grid-gap: 12px;
    --mobile-icon-min-height: 85px;
  }

  /* Compact header for landscape */
  .header {
    min-height: 50px !important;
    padding: 6px 12px !important;
  }

  .header .landing-title {
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
  }

  .container {
    padding-top: 60px !important;
    height: calc(100vh - 60px) !important;
  }

  .icon-grid,
  #desktop-icons {
    padding: 10px 8px !important;
  }

  .folder-content,
  #coolpics-folder-content,
  #videos-folder-content {
    padding: 12px 10px !important;
  }

  /* Full screen windows for games in landscape */
  /* Full screen windows for content in landscape */
  .popup-window.mobile-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
  }

  /* Make sure content takes full height minus header */
  .popup-window.mobile-fullscreen .window-content {
    height: calc(100vh - 35px) !important;
    padding: 0 !important;
  }

  /* Additional ensure for iframes */
  .popup-window.mobile-fullscreen iframe,
  .popup-window.mobile-fullscreen lite-youtube {
    height: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --mobile-grid-columns: 3;
    --mobile-grid-gap: 16px;
  }

  .icon-grid,
  #desktop-icons,
  .container {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Even more compact for small phones */
  .header {
    min-height: 55px !important;
    padding: 6px 10px !important;
  }

  .header .landing-title {
    font-size: 0.8rem !important;
  }

  .container {
    padding-top: 65px !important;
    height: calc(100vh - 65px) !important;
  }
}