/* ============================================
   MOBILE MODE
   Phone-friendly overrides. Two jobs:

   1. Make popups usable on a phone. The base rules size popups with
      `85vh`, but on mobile `vh` is measured against the viewport with the
      browser chrome HIDDEN. With the URL bar showing, 85vh is taller than
      what you can actually see, and because `html, body { overflow: hidden }`
      there is no page scroll to recover the cut-off bottom. `dvh` tracks the
      *visible* viewport, which fixes it.

   2. Provide the compact career browser (see MobileCareers.js) so all
      careers are reachable a screen at a time instead of one 200-card list.

   Everything here is gated behind a media query or `.mobile-mode`, so the
   desktop layout is untouched.
   ============================================ */

/* ============================================
   1. POPUPS THAT FIT THE VISIBLE SCREEN
   ============================================ */

@media (max-width: 820px) {

    .popup-overlay {
        /* Fall back to the old value first, then override where dvh is supported. */
        height: 100%;
        height: 100dvh;

        /* Anchor to the top rather than centring: a tall popup centred inside a
           fixed overlay pushes its own header off the top of the screen, and
           with no page scroll it can never be reached again. */
        align-items: flex-start;
        justify-content: center;

        padding:
            calc(env(safe-area-inset-top, 0px) + 8px)
            calc(env(safe-area-inset-right, 0px) + 8px)
            calc(env(safe-area-inset-bottom, 0px) + 8px)
            calc(env(safe-area-inset-left, 0px) + 8px);

        /* A full-screen blur composited over a live WebGL canvas every frame is
           the single most expensive thing on a mobile GPU. Drop it and lean on a
           more opaque backdrop instead — same legibility, none of the cost. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(6, 12, 20, 0.94);
    }

    .popup-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 18px 14px 22px;
        border-radius: 16px;

        max-height: calc(100% - 16px);
        max-height: calc(100dvh - 16px);

        /* Keep flick-scrolling inside the popup instead of handing it to the page. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .popup-container h2 {
        font-size: 20px;
        padding-right: 44px; /* clear the close button */
    }

    .popup-subtitle {
        font-size: 0.85rem;
    }

    .popup-close-btn {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    /* The rotate-on-hover close button sticks in a "rotated" state after a tap
       on touch screens, because :hover latches. */
    .popup-close-btn:hover {
        transform: none;
    }
}

/* ============================================
   2. COMPACT CAREER BROWSER
   Injected by MobileCareers.js in place of the flat all-industries list.
   ============================================ */

.mob-careers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

/* --- breadcrumb / back bar --- */
.mob-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.mob-back {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 9px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.mob-back:active { background: rgba(255, 255, 255, 0.16); }

.mob-crumb-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.3;
}

.mob-crumb-text strong { color: #f1c40f; }

.mob-hint {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* --- step 1: industry tiles ---
   The whole point of this step is that every industry is visible without
   scrolling. Two fixed columns worked at 8 industries; at 12 it overflowed,
   so the grid now packs as many ~100px columns as the phone can take —
   three on a normal handset, two on a very narrow one. */
.mob-industries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.mob-industry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    padding: 10px 5px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    min-height: 76px;
}

.mob-industry:active {
    background: rgba(241, 196, 15, 0.14);
    border-color: #f1c40f;
}

.mob-industry.is-current {
    border-color: rgba(241, 196, 15, 0.65);
    background: rgba(241, 196, 15, 0.08);
}

.mob-industry .mi-icon { font-size: 1.45rem; line-height: 1; }

.mob-industry .mi-name {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
}

.mob-industry .mi-count {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}

.mob-industry .mi-badge {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f1c40f;
}

/* --- step 2: education level rows --- */
.mob-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mob-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 13px 14px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.mob-level:active {
    background: rgba(241, 196, 15, 0.14);
    border-color: #f1c40f;
}

.mob-level .ml-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mob-level .ml-name { font-size: 0.95rem; font-weight: 600; }

.mob-level .ml-meta {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.58);
}

.mob-level .ml-free { color: #2ecc71; }
.mob-level .ml-cost { color: #f39c12; }

.mob-level .ml-arrow {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* --- step 3: job rows --- */
.mob-jobs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mob-job {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mob-job:active {
    background: rgba(241, 196, 15, 0.14);
    border-color: #f1c40f;
}

.mob-job .mj-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
}

.mob-job .mj-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.mob-job .mj-salary { color: #2ecc71; font-weight: 700; }
.mob-job .mj-time { color: rgba(255, 255, 255, 0.6); }
.mob-job .mj-free { color: #2ecc71; }

.mob-job .mj-why {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.mob-empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-align: center;
    padding: 22px 0;
}

/* ============================================
   3. TOUCH TARGETS + POPUP GRIDS
   ============================================ */

@media (max-width: 820px) {
    /* The three Keep / New / Promote cards already stack at 720px; make sure
       their copy does not blow the popup out on the smallest phones. */
    .career-action-btn { padding: 16px 14px; }
    .career-action-btn .ca-icon { font-size: 1.8rem; }
    .career-action-btn p { font-size: 0.82rem; }

    /* Career snapshot reads as a 2-up grid rather than 4 cramped columns. */
    .cs-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

    /* Anything the game renders as a wide grid inside a popup. */
    .cc-cards-grid { grid-template-columns: 1fr !important; }
}

/* While a popup is open we stop the 3D room rendering (MobileCareers.js).
   Hiding the canvas as well means the compositor has nothing to redraw. */
body.popup-open .mobile-controls { display: none !important; }