/* ==========================================================================
   GLOBAL RESPONSIVE LAYER — USER PANEL (all pages)
   --------------------------------------------------------------------------
   RULE: the mobile design is NEVER re-flowed. No multi-column grids, no
   desktop layouts. On bigger screens the single app column simply grows a
   little and stays perfectly centered, so every page looks exactly like it
   does on a phone - just sharper and comfortably readable.

   Column widths (--page-w):
     <= 430px  (phones)        100%   -> untouched mobile layout
     431-600px (large phones)  560px
     601-1024px (tablet)       620px
     >= 1025px  (laptop)       660px
     >= 1441px  (big monitor)  700px

   LOAD ORDER
   1. includes/bottom-nav.php (it injects a <style> full of !important)
   2. <link rel="stylesheet" href="css/responsive.css">  <- this file
   3. the page's own page-specific <style> block (optional overrides)
   Loading after bottom-nav.php lets this layer win the cascade against
   legacy !important rules that live inside pages.
   ========================================================================== */

:root {
    --page-w: 100%;
    /* app column width - the ONLY thing that grows */
    --gutter: 14px;
    /* inner side padding */
    --ptop: 12px;
    /* inner top padding */
    --nav-h: 62px;
}

/* ---------- 1. page shell / overflow safety ---------- */
html {
    max-width: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
canvas,
svg,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* form controls must never stick out of the column */
input,
textarea,
select,
button {
    max-width: 100%;
    box-sizing: border-box;
}

/* long unbroken text / ids must never push the layout sideways */
p,
h1, h2, h3, h4, h5, h6,
span,
div,
td, th,
label,
button,
a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* flex rows must shrink instead of pushing the layout sideways */
[class*="-row"],
[class*="-col"] {
    min-width: 0;
}

/* ---------- 2. main containers ---------- */
.app-container {
    width: 100% !important;
    max-width: var(--page-w) !important;
    margin: 0 auto !important;
    padding: var(--ptop) var(--gutter) 0 !important;
    box-sizing: border-box !important;
    background: #000 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* detail pages (match-detail / tournament-detail) + players page */
.det-container,
.ply-container {
    width: 100% !important;
    max-width: var(--page-w) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

.det-nav-bar,
.ply-header {
    width: 100% !important;
    max-width: var(--page-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* chat page */
.chat-container {
    width: 100% !important;
    max-width: var(--page-w) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* login / register page */
.auth-wrapper {
    width: 100% !important;
    max-width: var(--page-w) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    padding: 0 var(--gutter);
}

/* ---------- 3. sticky headers must bleed to the column edges ----------
   Every page uses "<prefix>-sticky-header" with negative margins that
   mirror the container padding. Only the SIDE spacing and the pull-up are
   re-derived from the variables - each page keeps its own padding-top so
   the mobile header height is never changed. */
[class*="-sticky-header"] {
    margin: calc(-1 * var(--ptop)) calc(-1 * var(--gutter)) 0 !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
}

/* full-bleed strips inside those headers (mode tabs etc.) */
[class*="-strip"],
[class*="-tabs-scroll"],
[class*="-tab-strip"] {
    box-sizing: border-box;
}

/* ---------- 4. bottom navigation: FULL-WIDTH bar, IDENTICAL to the home page ----------
   Selector is `nav.bottom-nav-new` (element + class) on purpose: it carries a
   slightly higher specificity than the per-page `.bottom-nav-new { ... !important }`
   overrides, so this shared rule wins everywhere and every page's nav matches
   home automatically - no per-page nav override needed. */
nav.bottom-nav-new {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    /* height + safe-area: pages with viewport-fit=cover (wallet etc.) used to
       have the gesture-bar inset eat INTO the fixed 62px, squashing icons and
       clipping labels. Now the bar grows by the inset instead. env() = 0 on
       pages without cover, so home stays pixel-identical. */
    height: calc(var(--nav-h) + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    /* same symmetric, auto-adjusting side padding the home page uses */
    padding: 0 clamp(30px, 7vw, 64px) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: #08080a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.7) !important;
}

/* content keeps clear of the (now taller) nav on cover pages */
.bottom-spacer {
    height: calc(90px + env(safe-area-inset-bottom));
}

/* ---------- 5. bottom sheets / modals follow the same column ---------- */
.join-overlay,
[class*="-overlay"] {
    box-sizing: border-box;
}

.join-panel,
.det-bottom-bar,
.lang-bottom-sheet {
    width: 100% !important;
    max-width: var(--page-w) !important;
    box-sizing: border-box;
}

/* ---------- 6. breakpoints (only --page-w / spacing change) ---------- */

/* ----- small phones ----- */
@media (max-width: 360px) {
    :root {
        --gutter: 10px;
        --ptop: 10px;
    }

    nav.bottom-nav-new {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* ----- very old / tiny phones ----- */
@media (max-width: 320px) {
    :root {
        --gutter: 8px;
        --ptop: 8px;
    }

    nav.bottom-nav-new {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

/* ----- large phones / small tablets ----- */
@media (min-width: 431px) {
    :root {
        --page-w: 100%;
        --gutter: 18px;
        --ptop: 14px;
    }
}

/* ----- tablet ----- */
@media (min-width: 601px) {
    :root {
        --page-w: 100%;
        --gutter: 22px;
        --ptop: 16px;
        --nav-h: 68px;
    }

    /* tablet nav: exactly like home (space-around, 60px side padding, taller bar) */
    nav.bottom-nav-new {
        padding: 0 60px !important;
        justify-content: space-around !important;
    }

    .bottom-spacer {
        height: calc(108px + env(safe-area-inset-bottom));
    }
}

/* ----- laptop / desktop ----- */
@media (min-width: 1025px) {
    :root {
        --page-w: 100%;
        --gutter: 24px;
        --ptop: 18px;
        --nav-h: 70px;
    }

    /* desktop nav: exactly like home (centered, wide gap, square corners) */
    nav.bottom-nav-new {
        padding: 0 !important;
        justify-content: center !important;
        gap: clamp(60px, 10vw, 160px) !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .bottom-spacer {
        height: calc(116px + env(safe-area-inset-bottom));
    }
}

/* ----- big monitor ----- */
@media (min-width: 1441px) {
    :root {
        --page-w: 700px;
        --nav-h: 70px;
    }

    .bottom-spacer {
        height: calc(120px + env(safe-area-inset-bottom));
    }
}

/* ---------- 7. landscape phones: keep the column short & centered ------- */
@media (max-height: 460px) and (orientation: landscape) {
    :root {
        --ptop: 8px;
    }
}

/* ==========================================================================
   8. COMMON PAGE CHROME SCALE-UP
   --------------------------------------------------------------------------
   Every user-panel page uses one of two back-header patterns:
     .back-header / .back-header-title / .btn-back          (older pages)
     .xx-back-bar + [class*="-back-main-title"]             (newer pages)
   Scaling them here means a page only needs its own <style> block for
   genuinely page-specific parts. A page block placed AFTER the
   responsive.css <link> can still override anything below.
   ========================================================================== */

/* nothing inside the column may keep a phone-only fixed width */
.profile-stat-card,
.profile-menu-item,
.leaderboard-item,
.result-card,
.support-option-card,
.hiw-item,
.program-guidelines-card,
.gs-card,
.match-stat-card,
.room-info-card,
.rules-card,
.player-card,
.team-card,
.refer-banner-card,
.refer-code-box,
.ss-option-card,
.reward-banner-card,
.notif-card,
.info-item {
    max-width: 100%;
}

/* ----- small phones ----- */
@media (max-width: 360px) {
    .btn-back {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .back-header-title {
        font-size: 1.1rem;
    }

    .back-header-subtitle {
        font-size: 0.44rem;
    }
}

/* ----- large phones ----- */
@media (min-width: 431px) {
    .btn-back {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .back-header-title {
        font-size: 1.38rem;
    }

    .back-header-subtitle {
        font-size: 0.54rem;
    }

    [class*="-back-bar"] .btn-back-premium {
        width: 46px;
        height: 46px;
    }

    [class*="-back-main-title"] {
        font-size: 1.14rem;
    }

    [class*="-back-category"] {
        font-size: 0.48rem;
    }
}

/* ----- tablet ----- */
@media (min-width: 601px) {
    .btn-back {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .back-header-title {
        font-size: 1.55rem;
        letter-spacing: 1.5px;
    }

    .back-header-subtitle {
        font-size: 0.58rem;
        letter-spacing: 1px;
    }

    [class*="-back-bar"] .btn-back-premium {
        width: 50px;
        height: 50px;
    }

    [class*="-back-main-title"] {
        font-size: 1.24rem;
        letter-spacing: 2px;
    }

    [class*="-back-category"] {
        font-size: 0.53rem;
    }
}

/* ----- laptop ----- */
@media (min-width: 1025px) {
    .btn-back {
        width: 54px;
        height: 54px;
    }

    .back-header-title {
        font-size: 1.62rem;
        letter-spacing: 2px;
    }

    .back-header-subtitle {
        font-size: 0.6rem;
    }

    [class*="-back-main-title"] {
        font-size: 1.3rem;
        letter-spacing: 2.4px;
    }

    [class*="-back-category"] {
        font-size: 0.56rem;
    }
}