/* =========================================================
   QSE Games — Responsive / Mobile Layer
   Breakpoints follow Bootstrap 5:
     xs: <576px  (phone)
     sm: 576px   (large phone)
     md: 768px   (tablet)
     lg: 992px+  (desktop)
   ========================================================= */

/* ---------- Sidebar → Drawer on mobile ---------- */
/* On < md (tablet and phone), hide the sidebar off-canvas and show a
   hamburger toggle. On md+ the normal fixed sidebar is unchanged. */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1035;
    }
    .mobile-nav-backdrop.show {
        display: block;
    }
    .mobile-nav-toggle {
        display: inline-flex !important;
    }
    /* Reclaim the main column's left padding on phones */
    main > .p-4 {
        padding: 1rem !important;
    }
}
@media (min-width: 768px) {
    .mobile-nav-toggle {
        display: none !important;
    }
    .mobile-nav-backdrop {
        display: none !important;
    }
}

/* ---------- PlayCaller — formation cards / play buttons ---------- */
/* Convert hard-coded pixel widths to fluid widths capped at the
   desktop size. Flexbox wrap does the rest. */
.formation-card {
    width: 100% !important;
    max-width: 205px;
}
.formation-field.selected-formation {
    width: 100% !important;
    max-width: 240px;
    min-width: 0 !important;
}
.play-btn-fixed {
    width: 100%;
    max-width: 150px;
}

/* Scoreboard text scaling on small phones */
@media (max-width: 575.98px) {
    .qse-scoreboard .qse-sb-score {
        font-size: 1.6rem !important;
    }
    .qse-scoreboard .qse-sb-team {
        font-size: 0.9rem !important;
    }
    .qse-scoreboard .qse-sb-quarter {
        font-size: 0.5rem !important;
    }
    .qse-scoreboard .qse-sb-clock {
        font-size: 1rem !important;
    }
    .invite-code-display {
        font-size: 1.5rem !important;
        letter-spacing: 0.15em !important;
    }
}

/* Stats tables that overflow on phones — allow horizontal scroll */
.table-mobile-scroll {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Touch targets ---------- */
@media (max-width: 575.98px) {
    /* Bootstrap btn-sm is ~30px tall; bump play-call buttons to ~38px */
    .btn-sm.play-btn-touch {
        padding: 0.4rem 0.6rem;
        font-size: 0.875rem;
    }
    /* Sidebar links slightly taller for thumb tapping */
    .sidebar .nav-link {
        padding: 0.65rem 0.5rem;
    }
}

/* ---------- PlayCaller: main two-column layout ---------- */
/* Desktop: LEFT (game/plays) + RIGHT (Play-by-Play) side-by-side.
   Mobile (<768px): stack PBP below the game content. */
@media (max-width: 767.98px) {
    .pc-main-layout {
        flex-direction: column !important;
    }
    .pc-main-layout > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-shrink: 1 !important;
    }
}

/* ---------- PlayCaller: scoreboard ---------- */
/* Desktop: single row (Away | Clock | Home).
   Mobile: stack to 3 rows; drop quarter-by-quarter breakdown to save space. */
@media (max-width: 575.98px) {
    .pc-scoreboard-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .pc-scoreboard-row > div {
        justify-content: space-between !important;
        padding: 0.35rem 0.75rem !important;
    }
    .pc-scoreboard-row .pc-quarters {
        display: none !important;
    }
    .pc-scoreboard-row .pc-main-score {
        font-size: 1.75rem !important;
        min-width: 42px !important;
    }
    .pc-scoreboard-row .pc-team-name {
        font-size: 1rem !important;
    }
    .pc-scoreboard-row .pc-clock-col {
        flex-direction: row !important;
        gap: 0.5rem;
        justify-content: center !important;
    }
}

/* ---------- PlayCaller: play buttons + touch targets ---------- */
@media (max-width: 575.98px) {
    /* Override ALL fixed-width buttons inside the play area on phones.
       Inline style="width:200px" etc. need !important to override. */
    .pc-play-area .btn[style*="width"] {
        width: 100% !important;
        max-width: none !important;
    }
    /* Expert play buttons — wider for touch */
    .play-btn-fixed {
        max-width: 100% !important;
        min-height: 44px;
    }
    /* All btn-sm in PlayCaller get bigger touch targets on phones */
    .pc-play-area .btn-sm {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        min-height: 44px;
    }
    /* Regular buttons also get minimum touch height */
    .pc-play-area .btn {
        min-height: 44px;
    }
    /* Formation cards: narrower on very small phones */
    .formation-card {
        max-width: 170px;
    }
    /* Selected formation shrink */
    .formation-field.selected-formation {
        max-width: 200px;
    }
}

/* ---------- PlayCaller: tables overflow ---------- */
@media (max-width: 767.98px) {
    /* All tables in the PlayCaller auto-scroll horizontally */
    .pc-play-area table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- PlayCaller: tiny font bumps ---------- */
@media (max-width: 575.98px) {
    /* Bump minimum readable font sizes so nothing goes below ~10px */
    .formation-desc {
        font-size: 0.75rem !important;
    }
    .formation-hint {
        font-size: 0.7rem !important;
    }
}

/* ---------- Multiplayer: right-hand ticker panel ---------- */
@media (max-width: 767.98px) {
    .mp-ticker-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* ---------- Outer page container: clip any stray overflow ---------- */
@media (max-width: 767.98px) {
    main {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* ---------- Utility: hide/show by breakpoint ---------- */
.mobile-only { display: none; }
@media (max-width: 767.98px) {
    .mobile-only { display: initial; }
    .desktop-only { display: none !important; }
}