/* ============================================================
   MOBILE MENU RESPONSIVE — Portrait Only  (≤ 768 px)
   Fixes overlapping buttons/inputs on mobile browsers.
   Layout: 2-column sidebar-split, no scroll required.

   LEFT  (45%): action buttons
   RIGHT (55%): level/trial inputs + mode checkboxes
   HEADER     : user-label + ⚙ settings button
   FOOTER     : version + ad banner
   ============================================================ */

/* ── GLOBAL: Make mobile-only elements invisible on desktop ── */
/* display:contents makes .mobile-input-group transparent to layout –
   inputs behave exactly as if the wrapper didn't exist on desktop.    */
.mobile-input-group  { display: contents; }
.mobile-input-label  { display: none;     }

/* ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) and (orientation: portrait) {

    /* ── 1. Root reset ─────────────────────────────────────── */
    .main-window {
        display: grid !important;
        grid-template-columns: 44% 56%;
        grid-template-rows: 42px 1fr auto;
        grid-template-areas:
            "header  header"
            "left    right"
            "footer  footer";
        height: 100vh !important;
        width: 100vw !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: relative !important;
        /* Restore brand background explicitly (body bg may be hidden behind grid) */
        background-color: var(--brand-700) !important; /* radial-Textur entfernt (v2 §6.6) */
    }

    /* ── 2. Header row: user label ─────────────────────────── */
    .labels-section {
        grid-area: header;
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 4px 50px 4px 10px; /* right-pad: room for settings btn */
        background: rgba(22, 83, 126, 0.85);
        border-bottom: 1px solid rgba(128, 179, 186, 0.35);
        overflow: hidden;
    }

    /* Show only userLabel; hide plain "Level" / "Time" labels */
    .labels-section .info-label:not(#userLabel) {
        display: none !important;
    }

    #userLabel {
        height: 28px !important;
        width: auto !important;
        max-width: calc(100vw - 60px);
        font-size: 11px !important;
        background: transparent !important;
        border: none !important;
        justify-content: flex-start !important;
        padding: 0 6px !important;
        flex: 1;
    }

    /* ── 3. Settings button: top-right corner ──────────────── */
    .settings-btn {
        position: fixed !important;
        left: auto !important;
        right: 8px !important;
        top: 6px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 15px !important;
        z-index: 9999 !important;
        transform: none !important;
    }

    /* ── 4. LEFT column: button list ───────────────────────── */
    .content-area {
        grid-area: left;
        position: static !important;
        padding: 6px 4px 6px 6px !important;
        height: auto !important;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(128, 179, 186, 0.25);
    }

    .button-column {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .main-btn {
        width: 100% !important;
        height: 36px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
        border-radius: 5px !important;
        letter-spacing: 0 !important;
    }

    /* START TRAINING: move to top of column + highlight */
    #startTraining {
        order: -1;   /* visually first without changing HTML */
        height: 46px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        background: var(--brand-600) !important; /* war Gradient (v2 §6.6) */
        border-color: var(--brand-300) !important;
    }

    /* ── 5. RIGHT column: inputs + checkboxes ──────────────── */
    .input-checkbox-container {
        grid-area: right;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        padding: 8px 8px 6px 8px;
        overflow: hidden;
    }

    /* Input pairs with inline labels */
    .input-section {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Activate mobile input groups (overrides global display:contents) */
    .mobile-input-group {
        display: flex !important;
        flex-direction: column;
        gap: 3px;
    }

    .mobile-input-label {
        display: block !important;
        font-size: 10px;
        color: var(--text-secondary, #80b3ba);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .input-field {
        width: 100% !important;
        height: 38px !important;
        font-size: 16px !important; /* 16px prevents iOS zoom */
        box-sizing: border-box !important;
        text-align: center;
    }

    /* 2×2 checkbox grid */
    .checkboxes-section {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 4px !important;
    }

    .checkbox-item {
        gap: 6px;
        align-items: center;
    }

    .checkbox-label {
        font-size: 11px !important;
        line-height: 1.3;
    }

    .checkbox {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0;
    }

    /* ── 6. FOOTER ─────────────────────────────────────────── */
    .version-info {
        display: none !important; /* save vertical space */
    }

    .ad-leaderboard-bottom {
        grid-area: footer;
        position: static !important;
        margin: 0 auto !important;
        padding: 2px 0 !important;
        max-width: 100%;
        overflow: hidden;
        text-align: center;
    }

    /* shrink wide ad to fit mobile screen */
    .ad-leaderboard-bottom ins.adsbygoogle {
        width: 320px !important;
        height: 50px !important;
    }
}

/* ── Small phones (≤ 414 px) — tighten spacing ─────────────── */
@media (max-width: 414px) and (orientation: portrait) {

    .main-btn {
        height: 33px !important;
        font-size: 10px !important;
    }

    #startTraining {
        height: 42px !important;
    }

    .input-field {
        height: 34px !important;
        font-size: 15px !important;
    }

    .checkbox-label {
        font-size: 10px !important;
    }

    .labels-section {
        padding: 4px 46px 4px 8px;
    }

    #userLabel {
        font-size: 10px !important;
    }
}