/* =================================================================
   CAPY//OS — mobile.css
   Responsive overrides. Below the breakpoint, windows become
   near-full-screen panels and the desktop becomes a clean app
   launcher grid rather than tiny draggable windows.
   ================================================================= */

@media (max-width: 760px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 84px);
        grid-auto-rows: 88px;
        gap: var(--sp-3);
        padding: var(--sp-4) var(--sp-3);
    }

    .desktop-icon {
        width: 84px;
        height: 84px;
    }

    .desktop-icon-glyph {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }

    /* Windows become near-full-screen panels; dragging/resizing is
       disabled at this size (handled in JS: the resize handle is
       still present but visually low-priority; header drag still
       works but is unnecessary since windows are pinned full-bleed
       here via CSS override on top of the inline JS-set position). */
    .capy-window {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: calc(100% - 52px) !important;
        border-radius: 0;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }

    .capy-window-resize-handle {
        display: none;
    }

    .capy-window-header {
        cursor: default;
    }

    .taskbar-tasks {
        max-width: 40vw;
    }

    .taskbar-username {
        display: none;
    }

    .start-menu {
        left: var(--sp-2);
        right: var(--sp-2);
        width: auto;
        bottom: 58px;
    }

    .entry-card {
        padding: var(--sp-4);
    }

    .meme-lab-grid {
        grid-template-columns: 1fr;
    }

    .meme-lab-preview {
        order: -1;
    }

    .mascot-notify {
        left: var(--sp-3);
        right: var(--sp-3);
        max-width: none;
        bottom: 60px;
    }
}

@media (max-width: 420px) {
    .taskbar-tray {
        gap: var(--sp-1);
    }

    .taskbar-clock {
        font-size: 0.78rem;
    }

    .desktop-icon-label {
        font-size: 0.65rem;
    }
}

/* Ensure no horizontal scroll anywhere, on any viewport width from
   320px up, per accessibility/responsiveness requirements. */
@media (max-width: 340px) {
    .entry-card,
    .start-menu {
        width: calc(100vw - 24px);
    }
}