/* ─────────────────────────────────────────────────────────────
   MOBILE SHELL + PER-WINDOW FIXES — overrides for narrow viewports.

   Loaded LAST in index.html so it wins the cascade.

   Sections:
     1-4  Shell (desktop, icons, beacon, windows)
     5    Taskbar — minimal mobile bar + menu button
     6    Popups
     7    About-me window
     8    Profile window
     9    Logbook window
     10   Games hero card
     11   Staff badges
     12   Konmail window
     13   Camera window
     14   Shop featured card
     15   Shop bakery exchange pill
     16   Mobile welcome banner ("Best on desktop" toast)
     17   Mobile menu (☰ slide-up sheet)
   ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* ── 1. Body / desktop scaffold ─────────────────────── */
    body {
        --desk-zoom: 1;
    }

    #s-desktop {
        bottom: 52px;          /* matches taskbar height */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* ── 2. Desktop icons: two columns → flowing grids ──── */
    .dicons-l,
    .dicons-r {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
        gap: 14px 8px;
        max-height: none;
        padding: 8px 10px;
        width: 100%;
    }
    .dicons-l { padding-top: 10px; }
    .dicons-r { padding-bottom: 16px; }

    .dicon { width: auto; gap: 5px; }
    .dicon img, .dicon-placeholder { width: 54px; height: 54px; }
    .dicon span { font-size: 7px; }
    .dicon:hover img, .dicon:hover .dicon-placeholder { transform: none; }

    /* ── 3. Dokomi beacon — wrap to 2 rows ──────────────────
       Default position is absolute top-left/right which eats
       both sides; switch to relative flow.

       The previous version tried to fit everything on a
       single row at 358px (star + "DOKOMI 2026" + 3 countdown
       blocks + "READ ME") and the CTA got clipped past the
       right edge.

       New layout: flex-wrap allows row 2 to exist. By giving
       .beacon-headline `flex: 1` it fills row 1, forcing the
       countdown + CTA to wrap to row 2. Countdown labels
       bumped from 4px (illegible) to 5.5px so users can read
       "d / h / m". */
    #dokomi-beacon {
        position: relative;
        top: auto; left: auto; right: auto;
        margin: 8px; z-index: auto;
    }
    .beacon-bar-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 48px;
        padding: 8px 10px;
        gap: 6px 8px;
        align-items: center;
    }
    .beacon-star {
        width: 24px;
        height: 24px;
        font-size: 10px;
        flex-shrink: 0;
    }
    .beacon-headline {
        flex: 1 1 auto;       /* fills row 1, pushes the rest to row 2 */
        min-width: 0;
        font-size: 10px;
    }
    .beacon-divider,
    .beacon-marquee-wrap,
    .beacon-kicker { display: none; }

    .beacon-cd-n {
        font-size: 9px;
    }
    .beacon-cd-l {
        font-size: 5.5px;     /* was 4px — illegible */
        opacity: 0.85;
        letter-spacing: 0.5px;
    }
    .beacon-cta {
        font-size: 7px;
        padding: 4px 10px;
        margin-left: auto;    /* push CTA to right end of row 2 */
        white-space: nowrap;
    }

    #beacon-panel {
        left: 8px !important; right: 8px !important;
        width: auto !important; top: 80px !important;
    }
    .beacon-panel-tail { display: none; }
    .beacon-map-dialog { width: 96vw; }

    /* ── 4. Windows: fullscreen takeover ────────────────── */
    .win {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 52px !important;
        width: auto !important; height: auto !important;
        max-width: 100vw !important; max-height: none !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        border-width: 0 0 3px 0 !important;
        box-shadow: none !important;
    }

    .wbar { cursor: default; padding: 8px 10px; }
    .wbar:active { cursor: default; }
    .wurl { font-size: 10px; padding: 4px 10px; }

    .wb { width: 18px; height: 18px; position: relative; }
    .wb::after { content: ''; position: absolute; inset: -13px; }
    .wb:hover { transform: none; }
    .wb.y, .wb.o { display: none; }
    .win-rz { display: none !important; }
    .wfoot { display: none; }

    /* ── 5. TASKBAR — logo on left, controls grouped right ──
       Mobile layout target:
         [logo]   ←automatic gap→   [♬] [☰] [SHOP]

       Achieved by:
       1. Override desktop's `justify-content: space-between`
          (which scatters the 4 flex children across the bar
          leaving awkward gaps at 358px) with `flex-start`.
       2. Reorder via flex `order`: logo (.tb-c) first, then
          music (.tb-l), then menu+SHOP (.tb-r).
       3. `margin-right: auto` on the logo container pushes
          everything after it flush to the right edge.

       Music + menu buttons styled as twin "chrome chips" —
       same size (42×42), same border weight (2.5px), same
       shadow (3px) — so they read as a unit. SHOP keeps its
       lime-green pill identity. */
    #taskbar {
        /* Keep desktop's 52px height — overriding it cascades into
           layout conflicts. Instead we shrink the buttons (below)
           to fit comfortably. */
        padding: 0 10px;
        gap: 6px;
        justify-content: flex-start;   /* override desktop space-between */
    }

    /* Reorder flex children for mobile */
    #taskbar .tb-c {
        order: 1;
        margin-right: auto;            /* pushes everything after right */
        gap: 0;
    }
    #taskbar .tb-l {
        order: 2;
        min-width: 0;
        gap: 0;
        flex-direction: row;
        justify-content: center;
    }
    #taskbar .tb-r {
        order: 3;
        gap: 6px;
        align-items: center;
    }

    /* Items relocated to #mobile-menu by JS — hidden in the
       taskbar but visible when child of #mobile-menu. */
    #taskbar .tb-l-info,
    #taskbar .tb-aud-track,
    #taskbar .tb-mins,
    #taskbar .tb-search-wrap,
    #taskbar .tb-link,
    #taskbar .tb-time,
    #taskbar .tb-extra {
        display: none !important;
    }

    /* Music + Menu — twins. Same chrome, same size.
       Sized to fit comfortably in the 52px taskbar:
       38px button + 2px shadow = 40px total visual height,
       leaves 6px of breathing room above and below when
       centered. */
    .tb-aud-btn,
    .tb-menu-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
        line-height: 1;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: white;
        color: var(--dark);
        border: 2px solid var(--dark);
        border-radius: 8px;
        box-shadow: 0 2px 0 var(--dark);
        cursor: pointer;
        flex-shrink: 0;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .tb-aud-btn:active,
    .tb-menu-btn:active {
        transform: translateY(2px);
        box-shadow: 0 0 0 var(--dark);
    }

    /* Logo — alone on the left side of the bar. */
    .tb-logo { height: 36px; }

    /* SHOP — dominant pill, kept lime-green. */
    .tb-pts {
        font-size: 9px;
        padding: 8px 14px;
        letter-spacing: 0.5px;
    }

    /* ── 6. Popups (warn / miss) ────────────────────────── */
    .popup {
        left: 50% !important;
        right: auto !important;
        width: min(420px, 92vw) !important;
        max-width: 92vw !important;
        transform: translateX(-50%);
    }
    .pop-hdr { cursor: default; padding: 8px 12px; font-size: 8px; }
    .pop-hdr:active { cursor: default; }
    .pop-x { font-size: 18px; padding: 0 4px; }

    /* ═══════════════════════════════════════════════════════
       PER-WINDOW FIXES
       ═══════════════════════════════════════════════════════ */

    /* ── 7. ABOUT-ME window ─────────────────────────────── */
    .about-body { flex-direction: column; overflow-y: auto; }
    .about-emoji {
        width: 100%; height: 220px;
        border-right: none;
        border-bottom: 2px solid var(--pink);
        flex-shrink: 0;
    }
    .about-txt {
        max-height: none; font-size: 9px;
        line-height: 1.9; padding: 14px;
    }

    /* ── 8. PROFILE window ──────────────────────────────── */
    .prof-bot { flex-direction: column; }
    .prof-bio-wrap {
        border-right: none;
        border-bottom: 2.5px solid var(--dark);
        padding: 12px;
    }
    .prof-r { min-width: 0; width: 100%; padding: 12px; }
    .prof-top::before, .prof-top::after { display: none; }

    /* ── 9. LOGBOOK window ──────────────────────────────── */
    .lb-split { flex-direction: column; }
    .lb-list {
        width: 100%; max-height: 200px;
        border-right: none;
        border-bottom: 3px solid var(--dark);
        padding: 10px;
    }
    .lb-detail { padding: 14px; gap: 10px; }
    .lb-detail-head { gap: 12px; }
    .lb-portrait { width: 110px; height: 110px; border-radius: 12px; }
    .lb-portrait .lb-emoji-big { font-size: 56px; }
    .lb-silhouette.big { width: 90px; height: 90px; }

    /* ── 10. GAMES HERO card ────────────────────────────── */
    .games-hero { flex-wrap: wrap; padding: 12px; gap: 12px; }
    .games-hero-tile { width: 84px; height: 84px; font-size: 42px; }
    .games-hero-body { flex: 1 1 0; min-width: 0; }
    .games-hero-name { font-size: 18px; }
    .games-hero-desc { font-size: 12px; }
    .games-hero-side { flex-direction: row; width: 100%; gap: 8px; }
    .games-hero-play, .games-hero-secondary { flex: 1; text-align: center; }
    .games-hero-spark { top: 6px; right: 8px; font-size: 16px; }

    /* ── 11. STAFF BADGES row ───────────────────────────── */
    .staff-badges {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-left: 4px; padding-right: 12px;
    }
    .staff-badges::-webkit-scrollbar { height: 4px; }
    .staff-badges::-webkit-scrollbar-thumb {
        background: var(--pink); border-radius: 2px;
    }

    /* ── 12. KONMAIL window ─────────────────────────────── */
    .km-body { flex-direction: column; height: auto !important; min-height: 0; }
    .km-sidebar {
        width: 100%; flex-direction: column;
        align-items: stretch;
        padding: 10px 12px 12px;
        border-right: none;
        border-bottom: 2px solid var(--pink);
        gap: 8px;
    }
    .km-portrait-box { display: none; }
    .km-folders { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 0; }
    .km-folder-btn { flex: 1 1 auto; min-width: 80px; padding: 0.45rem 0.6rem; font-size: 9px; }
    .km-panel { padding: 14px; min-height: 0; flex: 1; }
    .km-row { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
    .km-row-from { width: auto; flex: 1 1 auto; font-size: 13px; }
    .km-row-sub { flex: 1 1 100%; font-size: 12px; }
    .km-row-trash { display: none; }
    .km-status { font-size: 9px; padding: 2px 6px; }
    .km-action-bar { flex-wrap: wrap; gap: 6px; }
    .km-meta-row { flex-wrap: wrap; gap: 6px; }

    /* ── 13. CAMERA window ──────────────────────────────── */
    .cam-grid { grid-template-columns: 1fr; gap: 10px; }
    .cam-feed { aspect-ratio: 16/10; }
    .cam-label { font-size: 9px; padding: 4px 10px; }
    .cam-body { min-height: 100%; }

    /* ── 14. SHOP FEATURED card ─────────────────────────── */
    .shop-feat { flex-wrap: wrap; padding: 12px; gap: 12px; }
    .shop-feat-thumb { width: 96px; }
    .shop-feat-body { flex: 1 1 0; min-width: 0; }
    .shop-feat-name { font-size: 17px; line-height: 1.15; }
    .shop-feat-side {
        flex-direction: row; align-items: center;
        justify-content: space-between;
        width: 100%; gap: 10px;
    }
    .shop-feat-buy { flex: 1; text-align: center; padding: 8px 14px; }
    .shop-feat-spark { top: 6px; right: 10px; font-size: 16px; }

    /* ── 15. SHOP BAKERY EXCHANGE pill ──────────────────── */
    .shop-bkr-exchange { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
    .shop-bkr-body { flex: 1 1 0; min-width: 0; }
    .shop-bkr-line { font-size: 8px; }
    .shop-bkr-rate { font-size: 7px; }
    .shop-bkr-side {
        flex-direction: row; width: 100%;
        align-items: center; justify-content: space-between;
        gap: 10px;
    }
    .shop-bkr-pts-avail, .shop-bkr-pts-locked { white-space: normal; }
    .shop-bkr-btn { padding: 6px 16px; font-size: 8px; }

    /* ── 16. MOBILE WELCOME BANNER ──────────────────────── */
    #mobile-banner {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 10000;
        background: linear-gradient(135deg, var(--pink), var(--hot, #ff4fa3));
        color: #fff;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px;
        line-height: 1.6;
        padding: 10px 36px 10px 14px;
        border-bottom: 2.5px solid var(--dark);
        box-shadow: 0 3px 0 rgba(26, 0, 16, 0.25);
        letter-spacing: 0.5px;
        text-align: center;
        animation: mobile-banner-in 280ms ease-out;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    #mobile-banner.fading {
        animation: mobile-banner-out 220ms ease-in forwards;
    }
    #mobile-banner .mb-x {
        position: absolute;
        top: 50%; right: 8px;
        transform: translateY(-50%);
        width: 22px; height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.15);
        border: none; border-radius: 50%;
        color: #fff; font-family: inherit;
        font-size: 9px; line-height: 1;
        cursor: pointer; padding: 0;
    }
    #mobile-banner .mb-x:active { background: rgba(0, 0, 0, 0.35); }

    @keyframes mobile-banner-in {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: translateY(0);     opacity: 1; }
    }
    @keyframes mobile-banner-out {
        from { transform: translateY(0);     opacity: 1; }
        to   { transform: translateY(-100%); opacity: 0; }
    }

    /* ── 17. MOBILE MENU — slide-up sheet from above taskbar ──
       Triggered by the ☰ button. Holds everything we removed
       from the taskbar (HOW TO PLAY, search, links, time, info,
       track name). The actual DOM elements are MOVED here by
       the inline script, not cloned — so their original click
       handlers still work.

       Backdrop sits under the menu (z 9000) but above the
       taskbar (z 2000) and above any window (z based on zTop,
       starting around 100). Menu itself is z 9001. */
    #mobile-menu-backdrop {
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: 52px;   /* leaves the taskbar visible/tappable */
        background: rgba(26, 0, 16, 0.5);
        z-index: 9000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 250ms ease-out;
        display: block;
    }
    #mobile-menu-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    #mobile-menu {
        position: fixed;
        left: 0; right: 0;
        bottom: 52px;   /* sits flush on top of the taskbar */
        z-index: 9001;
        background: var(--cream, #fff7e8);
        border-top: 3px solid var(--dark);
        border-bottom: 3px solid var(--dark);
        box-shadow: 0 -4px 0 rgba(26, 0, 16, 0.15);
        padding: 18px 16px 16px;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Hide fully below viewport when closed.
           Plain `translateY(100%)` only moves by the menu's own
           height, which doesn't compensate for its `bottom: 52px`
           offset — the top of the menu would still poke up over
           the taskbar (z 9001 > taskbar z 2000), showing as a
           cream strip. Add the taskbar height to the translate. */
        transform: translateY(calc(100% + 52px));
        transition: transform 280ms ease-out;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    #mobile-menu.open { transform: translateY(0); }

    /* Header inside the menu — title + close button */
    .mm-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        border-bottom: 2px dashed var(--pink);
    }
    .mm-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        color: var(--pink);
        letter-spacing: 0.5px;
    }
    .mm-close {
        background: var(--pink);
        color: #fff;
        border: 2px solid var(--dark);
        border-radius: 50%;
        width: 28px; height: 28px;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        box-shadow: 0 2px 0 var(--dark);
    }
    .mm-close:active { transform: translateY(2px); box-shadow: none; }

    /* Section header inside menu (e.g. "Now playing", "Find") */
    .mm-sec-label {
        font-family: 'Press Start 2P', monospace;
        font-size: 7px;
        color: var(--pink);
        letter-spacing: 0.5px;
        margin-top: 4px;
    }

    /* When .tb-link and friends live in #mobile-menu, override
       their taskbar-only constraints. The display: none rules
       above only fire when they're inside #taskbar, so here
       they show with their natural display value. */
    #mobile-menu .tb-link {
        text-decoration: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        padding: 6px;
    }
    #mobile-menu .tb-link img {
        width: 36px;
        height: 36px;
        display: block;
    }

    /* Wrap any links group in a horizontal row */
    .mm-links-row {
        display: flex;
        gap: 14px;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* The datetime/status strip — make it a friendly menu line */
    #mobile-menu .tb-l-info {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-family: 'Nunito', sans-serif;
        font-size: 12px;
        font-weight: 800;
        color: var(--dark);
    }

    /* Track name */
    #mobile-menu .tb-aud-track {
        display: block;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        color: var(--dark);
        cursor: pointer;
        padding: 6px 0;
    }

    /* Time */
    #mobile-menu .tb-time {
        display: block;
        font-family: 'Press Start 2P', monospace;
        font-size: 11px;
        color: var(--dark);
    }

    /* Search inside the menu */
    #mobile-menu .tb-search-wrap {
        display: block;
        position: relative;
    }
    #mobile-menu .tb-search {
        width: 100%;
        background: white;
        border: 2px solid var(--dark);
        border-radius: 20px;
        padding: 8px 14px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        outline: none;
        box-sizing: border-box;
    }

    /* HOW TO PLAY (or any user-added .tb-extra) — keep its
       own visual look since we don't know what it is. Just
       ensure it's a block-level menu item. */
    #mobile-menu .tb-extra {
        display: inline-block;
    }
}

/* Desktop hard-hide of mobile-only chrome. Belt-and-braces in
   case the JS moves things around and a viewport flip leaves
   stale state. */
@media (min-width: 769px) {
    #mobile-banner,
    #mobile-menu,
    #mobile-menu-backdrop,
    .tb-menu-btn {
        display: none !important;
    }
}