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

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

  /* ── Terminal Window ── */
  #terminal-win, #terminal-win.windowed {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 30px) !important; /* leave room for taskbar */
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

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

  /* ── Terminal Content Layout ── */
  #t-main {
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !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 ── */
  .popup-win {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  #notepad-win { height: 80vh !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;
    max-width: 100vw !important;
    max-height: calc(100vh - 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;
    object-fit: cover !important;
  }
  
  #boot-bios {
    padding: 15px !important;
    font-size: 11px !important;
  }
}