/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 860px) {
    /* frame scales via min(500px, 90vw) — no override needed */
    .interest-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .live-container {
        grid-template-columns: 1fr;
    }
    .live-chat {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .taskbar { height: 40px; padding: 0 8px; }
    .start-text { display: none; }
    .taskbar-start { width: 32px; height: 28px; margin: auto 0; padding: 0; }
    .taskbar-start .start-icon { font-size: var(--text-xl); }
    .tray-btn { width: 30px; height: 26px; }
    .taskbar-tabs { padding: 0 4px; }
    .taskbar-tab { padding: 0 8px; font-size: var(--text-xs); }
    .os-window:not(.win-maximized) {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 80px);
        top: 66px;
        left: 12px;
        transform: none;
    }
    .start-menu { top: 60px; left: 12px; right: 12px; width: auto; }
    #app { padding: 60px 0 0; }
    .desktop-hero .magic-circle-frame { width: min(300px, 80vw); height: min(300px, 80vw); }
    .hud-date      { display: none; }
    .hud-clock-sep { display: none; }
    .hud-time  { font-size: var(--text-md); }
    .projects-grid { grid-template-columns: 1fr; }
    .portrait-img-wrap  { width: 188px; height: 188px; }
    .interest-grid { grid-template-columns: 1fr; }
    .link-cards { grid-template-columns: 1fr; }
    .link-card  { padding: 16px 18px; }
    .settings-sidebar {
        width: 50px; min-width: 50px; padding: 4px;
    }
    .settings-cat span { display: none; }
    .settings-cat { justify-content: center; padding: 10px; }
    .sysinfo-panel { top: 60px; left: 12px; right: 12px; width: auto; }
}

@media (max-width: 500px) {
    .live-tabs {
        flex-direction: column;
    }
    .live-tab {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .taskbar-tab span:not(.taskbar-tab-close) { display: none; }
    .taskbar-clock { display: none; }
    .char-name  { font-size: var(--text-3xl); }
    .portrait-img-wrap  { width: 162px; height: 162px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    #app { padding: 16px 20px 56px; }
    .magic-circle-frame { width: min(300px, 80vw); height: min(300px, 80vw); }
}

/* ──────────────────────────────────────────────
   HOVER NEUTRALIZATION
   When the viewport is narrow OR the device has no hover capability,
   neutralize hover-only visual changes so a narrowed desktop window
   behaves identically to a real phone. Without this, hover states
   linger after taps on touch-desktop and cards pulse/lift on mouse-over
   at mobile widths — producing divergent looks between "phone" and
   "desktop narrowed to mobile breakpoint".
   ────────────────────────────────────────────── */
@media (max-width: 640px), (hover: none) {
    .taskbar-start:hover,
    .taskbar-tab:hover,
    .tray-btn:hover,
    .start-item:hover,
    .start-action:hover,
    .win-btn:hover,
    .settings-cat:hover,
    .settings-color-btn:hover,
    .lang-select:hover,
    .theme-btn:hover,
    .interest-card:hover,
    .link-card:hover,
    .project-card:hover,
    .portrait-img-wrap:hover .portrait-img {
        transform: revert-layer;
        animation: revert-layer !important;
        box-shadow: revert-layer;
        background: revert-layer;
        color: revert-layer;
        border-color: revert-layer;
        text-shadow: revert-layer;
        scale: revert-layer;
    }
    /* Taskbar tab close button is always visible on touch so users
       don't have to guess where to tap to close. */
    .taskbar-tab-close { opacity: 0.6; }
    .taskbar-tab-close:active { color: #ff6b6b; opacity: 1; }
}