/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVENESS OVERRIDES
═══════════════════════════════════════════════════ */

@media (max-width: 768px), (pointer: coarse) {
  /* Prevent horizontal scroll */
  body, html {
    overflow-x: hidden;
    width: 100vw;
  }

  /* ── Terminal Window ──
     Covers the FULL screen (same as desktop's maximized terminal) -- no more
     carving out 30px for the taskbar. #terminal-win is already above
     #taskbar in z-index (300 vs 200), so a full-height terminal naturally
     hides the taskbar while open, exactly like desktop; minimizing reveals
     it again the same way it always did. */
  #terminal-win, #terminal-win.windowed {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    /* real phone browsers count hideable address-bar chrome in 100vh, so a
       plain vh height ends up taller than what's actually visible, leaving a
       gap at the top where the desktop/wallpaper behind shows through. dvh
       tracks the actual visible viewport; browsers without dvh support just
       ignore this line and keep the vh value above. */
    height: 100dvh !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    /* nothing here should be "sticky" on a cramped phone screen -- let the
       whole window (titlebar, menubar, content, statusbar) scroll together
       as one normal page instead of pinning chrome around a tiny inner
       scroll box, which is what made everything feel zoomed-in/unreadable. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── Terminal Top Bar (Titlebar) ── */
  .t-titlebar {
    padding: 3px 6px !important;
    flex-shrink: 0 !important;
  }
  .t-tb-title {
    font-size: 11px !important;
  }

  /* ── Terminal Content Layout ──
     overflow-y is deliberately NOT set here anymore (was `auto`, forcing its
     own cramped inner scrollbar while the titlebar/menubar stayed pinned
     above it). #terminal-win now owns the only scrollbar, so #t-main just
     grows to fit its content and scrolls along with everything else. */
  #t-main {
    padding: 8px !important;
    overflow-x: hidden !important;
    flex: none !important;
  }
  #t-top-section {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }
  #t-agent-ascii {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-size: 2px !important; /* slightly increased from 1.6px */
    line-height: 1 !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex;
    justify-content: center;
  }
  
  /* Make the info texts much smaller on mobile */
  .t-info-line {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  .t-dash-box {
    font-size: 10px !important;
    margin: 2px auto !important;
    padding: 4px 8px !important;
    align-self: center !important;
  }
  .info-panel {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #t-info {
    min-width: unset !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }

  /* ── Terminal Menu ── */
  .t-menubar {
    flex-wrap: nowrap !important;
    height: auto !important;
    padding: 2px 0 !important;
    justify-content: space-between !important;
  }
  .t-menu-item {
    flex: 1 1 auto; 
    text-align: center;
    padding: 8px 2px !important; 
    font-size: 10px !important;
  }

  /* ── Desktop Icons ── */
  #desktop {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    grid-auto-rows: min-content !important;
    gap: 15px !important;
    padding: 15px !important;
    align-content: start !important;
  }
  .desk-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* ── General Popups ──
     Used to float centered at 95vw/90vh, like a desktop dialog. On a short
     mobile landscape screen that margin is enough to show the desktop
     wallpaper and even the taskbar peeking around/under it (same class of
     bug the terminal had). Popups now fill the screen edge-to-edge instead,
     same treatment as #terminal-win. */
  .popup-win {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #notepad-win { height: 100vh !important; height: 100dvh !important; }

  /* Snake is steered by swiping on touch (see snake-ultra.js) -- the
     browser must not claim those gestures for scrolling */
  #snake-popup-canvas { touch-action: none !important; }

  /* ── Commands Menu ── */
  #t-commands-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .t-section-divider {
    font-size: 10px !important;
    text-align: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    margin-bottom: 6px !important;
  }
  .t-cmd-box {
    grid-template-columns: 1fr 1fr !important; /* Back to 2 columns to save height */
    width: 100% !important;
    max-width: 100% !important;
  }
  .t-cmd-cell {
    padding: 6px 8px !important;
    gap: 6px !important;
    font-size: 9px !important;
    border-right: 1px solid #58dbff !important;
    border-bottom: 1px solid #58dbff !important;
  }
  .t-cmd-cell:nth-child(2n) {
    border-right: none !important;
  }
  .t-cmd-cell:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  .t-cmd-name {
    width: auto !important;
    font-size: 9px !important;
  }
  .t-cmd-desc {
    font-size: 9px !important;
  }
  
  /* ── Radio App & Rhythm Game ── */
  #radio-win.rhythm-mode { width: 95vw !important; }
  #sc, #scene { 
    width: 100% !important; 
    max-width: 100%; 
  }
  #radio-win { width: 95vw !important; }
  
  /* ── IE Browser / Internet Navigator (nav-win) ── */
  #nav-win {
    width: 100% !important;
    height: calc(100vh - 30px) !important;
    height: calc(100dvh - 30px) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 30px) !important;
    max-height: calc(100dvh - 30px) !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  #nav-win.show {
    display: flex !important;
    flex-direction: column !important;
  }

  /* IE menu bar — compact single row */
  #ie-menubar {
    flex-wrap: nowrap !important;
    padding: 2px 2px !important;
  }
  .ie-menu-item {
    font-size: 10px !important;
    padding: 3px 5px !important;
  }

  /* IE toolbar — hide nav buttons, keep address bar */
  #nav-win > div:nth-of-type(3) {
    padding: 3px 4px !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
  }
  #nav-win > div:nth-of-type(3) > button {
    display: none !important; /* hide Back/Fwd/Stop/Refresh/Go on mobile */
  }
  #nav-win > div:nth-of-type(3) > span {
    display: none !important; /* hide "Address" label */
  }
  #nav-win > div:nth-of-type(3) > div {
    flex: 1 1 100% !important;
    height: 22px !important;
    margin-top: 0 !important;
  }

  /* Idle screen — smaller text */
  #nav-idle {
    padding: 20px 15px !important;
    flex: 1;
  }
  #nav-idle > div:first-child {
    font-size: 36px !important;
  }
  #nav-idle > div:nth-child(2) {
    font-size: 20px !important;
  }
  #nav-idle > div:nth-child(3) {
    font-size: 11px !important;
  }

  /* Game area — don't stretch canvas, keep aspect ratio */
  #nav-game {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0d0a1b !important;
    overflow: hidden !important;
  }
  #dino-canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 50vh !important;
    aspect-ratio: 720 / 380 !important;
    touch-action: none !important;
    flex: none !important;
  }

  /* Mobile touch control buttons */
  #dino-mobile-controls {
    display: flex !important;
    gap: 20px;
    padding: 15px;
    justify-content: center;
  }
  .dino-touch-btn {
    width: 100px;
    height: 70px;
    border: 2px solid #58dbff;
    background: rgba(88, 219, 255, 0.1);
    color: #58dbff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  .dino-touch-btn:active {
    background: rgba(88, 219, 255, 0.3);
    box-shadow: 0 0 15px rgba(88, 219, 255, 0.4);
  }
  .dino-touch-btn .btn-icon {
    font-size: 24px;
  }

  .cw {
    padding: 10px !important;
  }
  #chlbl {
    font-size: 18px !important;
  }

  /* ── Rhythm Game Specifics ── */
  #rg-track { 
    width: 100% !important; 
  }
  .rg-receptor {
    width: 60px !important; 
    height: 60px !important;
    bottom: 20px !important;
    font-size: 28px !important;
  }
  
  /* ── Boot screen matrix ── */
  #matrix-cv {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    object-fit: cover !important;
  }
  
  #boot-bios {
    padding: 15px !important;
    font-size: 11px !important;
  }
}