/* Phone/tablet layout. Keep the desktop artboard and its motion coordinates intact.
   This sheet comes AFTER page-specific CSS, including the rules page's stack.
   Only #app is a query container: nested containers would break the shared cqw scale. */
@media (max-width: 1024px) {
    .theme-pier .pier-header {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 16px;
        width: 100%;
        min-height: 0;
        padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
        background: linear-gradient(#0a0d0aed, #0a0d0ae6), url('images/wood.webp') center / 650px;
        border-bottom: 1px solid #72542d;
        box-shadow: none;
    }
    .theme-pier .pier-mobile-brand {
        display: flex;
        align-items: center;
        grid-area: 1 / 1;
        min-width: 0;
        min-height: 58px;
        font-size: 21px;
        color: #edd3a1;
    }
    .theme-pier .pier-menu-toggle {
        display: none;
        grid-area: 1 / 2;
        min-width: 82px;
        min-height: 48px;
        margin: 0;
        padding: 8px 4px;
        border: 0;
        background: none;
        color: #dec79d;
        font: 16px/1.3 Georgia, serif;
    }
    .theme-pier .pier-menu-toggle[data-pier-menu-ready="true"] { display: block; }
    .theme-pier .pier-header:has(.pier-navigation[data-pier-menu-ready="true"]:not(.is-open)) .pier-header-actions { display: none; }
    .theme-pier .pier-header-actions {
        grid-area: 2 / 1 / 3 / -1;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0 12px;
        min-width: 0;
        padding-block: 0 5px;
        white-space: normal;
        border-top: 1px solid #785c312e;
    }
    .theme-pier .pier-languages { gap: 0; }
    .theme-pier .pier-languages a,
    .theme-pier .pier-languages a + a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        font-size: 14px;
        border: 0;
    }
    .theme-pier .pier-header-account {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        max-width: 100%;
        padding: 8px 0 8px 12px;
        border-left: 1px solid #79623f70;
        font-size: 15px;
    }
    .theme-pier .pier-navigation,
    .theme-pier .pier-navigation.is-open {
        position: static;
        display: grid;
        grid-area: 3 / 1 / 4 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        gap: 4px 18px;
        width: 100%;
        padding: 8px 0 15px;
        border: 0;
        border-top: 1px solid #785c3159;
        background: none;
        box-shadow: none;
    }
    .theme-pier .pier-navigation[data-pier-menu-ready="true"]:not(.is-open) { display: none; }
    .theme-pier .pier-navigation > a {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 48px;
        padding: 10px 3px;
        font-size: 16px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .theme-pier .pier-navigation > a::after { bottom: 3px; }

    /* On phones the scene is cropped to the lake and seated ninja. All three
       media layers use the same 1 / .65 scale and source crop, preserving flames.
       The static grid item deliberately stops being the logo's containing block;
       its absolutely positioned logo is anchored to the relative hero instead. */
    .theme-pier .pier-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        height: auto;
        min-height: 0;
        padding: calc(70cqw + 4px) 16px 28px;
        background: linear-gradient(#0c130f00, #0c100b 70cqw), url('images/wood.webp') center / 650px;
    }
    .theme-pier .pier-hero-art { height: 70cqw; }
    .theme-pier .pier-hero-art > .pier-hero-scenery,
    .theme-pier .pier-hero-art > .pier-scenery-motion,
    .theme-pier .pier-hero-art::before {
        top: -10.76923cqw;
        left: -53.846154%;
        right: auto;
        width: 153.846154%;
        height: 124.824615cqw;
    }
    .theme-pier .pier-hero-video { top: 20cqw; height: 54.230769cqw; }
    .theme-pier .pier-hero-art::after {
        content: '';
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, #08110a2b, transparent 40%, transparent 72%, #0c100b);
    }
    .theme-pier .pier-hero-account {
        position: static;
        grid-row: 2;
        width: min(100%, 440px);
        min-width: 0;
        margin: 0 auto;
        padding: 17px 18px 16px;
        border: 10px solid transparent;
        border-image: url('images/panel-frame-v5.webp') 80 130 80 130 / 10px stretch;
        background: linear-gradient(#090d0aeb, #0e110df5), url('images/wood.webp') center / 550px;
        background-clip: padding-box;
    }
    .theme-pier .pier-hero-account > .pier-logo {
        position: absolute;
        z-index: 3;
        top: 6cqw;
        left: 4%;
        width: 48cqw;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .theme-pier .pier-hero-actions {
        position: static;
        grid-row: 1;
        width: min(100%, 380px);
        min-width: 0;
        margin: 0 auto;
        transform: none;
    }
    .theme-pier .pier-button--download {
        height: auto;
        min-height: 58px;
        aspect-ratio: 2140 / 514;
        padding: 6px 5% 6px 19%;
        font-size: clamp(18px, 5.2cqw, 24px);
        line-height: 1.2;
        white-space: normal;
    }
    .theme-pier .pier-hero-actions p {
        margin: 5px 0 10px;
        font-size: 14px;
        line-height: 1.5;
    }
    .theme-pier .pier-hero-actions p span { padding-inline: 4px; }
    .theme-pier .pier-hero-actions .pier-game-info { margin: 8px 0 0; font-size: 13px; }
    .theme-pier .pier-button--secondary {
        width: min(100%, 280px);
        min-height: 46px;
        margin-top: 0;
        padding: 10px 18px;
        font-size: 16px;
        line-height: 1.3;
    }
    .theme-pier .pier-button--secondary > .pier-icon { width: 21px; height: 21px; }
    .theme-pier .pier-video-toggle {
        top: calc(70cqw - 54px);
        right: 16px;
        left: auto;
        min-width: 44px;
        min-height: 44px;
    }
    .theme-pier #pier-account { scroll-margin-top: 16px; }
    .theme-pier .pier-account h2 {
        display: block;
        margin: 0 0 14px;
        padding-bottom: 12px;
        font-size: 27px;
    }
    .theme-pier .pier-account-form { gap: 6px; }
    .theme-pier .pier-account-form > label:not(.pier-remember) { margin-top: 4px; font-size: 15px; }
    .theme-pier .pier-account-form > input { min-height: 46px; height: 46px; padding: 9px 10px; font-size: 16px; }
    .theme-pier .pier-remember { min-height: 44px; margin: 0; gap: 9px; font-size: 14px; }
    .theme-pier .pier-remember input { width: 17px; height: 17px; }
    .theme-pier .pier-account .pier-button { min-height: 48px; margin-top: 2px; padding: 10px 16px; font-size: 23px; }
    .theme-pier .pier-account-help { gap: 0 12px; margin-top: 9px; font-size: 13px; }
    .theme-pier .pier-account-help a { display: inline-flex; align-items: center; min-height: 44px; }
    .theme-pier .pier-account-help a + a { padding-left: 12px; }
    .theme-pier .pier-account--signed-in > p { margin: 7px 0; font-size: 16px; }
    .theme-pier .pier-account--signed-in .pier-balance { font-size: 26px; white-space: normal; }
    .theme-pier .pier-account-links,
    .theme-pier .pier-account-sidebar .pier-account-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
    .theme-pier .pier-account-links > a,
    .theme-pier .pier-hero .pier-account-links > a,
    .theme-pier .pier-logout,
    .theme-pier .pier-hero .pier-logout {
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 4px;
        font-size: 15px;
        line-height: 1.5;
    }

    .theme-pier .pier-news > .pier-section-title { min-height: 72px; padding: 16px; font-size: 32px; }
    .theme-pier .pier-news-list { gap: 18px; padding: 0 16px 24px; }
    .theme-pier .pier-news-article {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        min-width: 0;
        min-height: 0;
        padding: 10px 10px 18px;
        border: 9px solid transparent;
        border-image: url('images/panel-frame-v5.webp') 80 130 80 130 / 9px stretch;
        background: linear-gradient(#0b100beb, #0c100cf2), url('images/wood.webp') center / 650px;
    }
    .theme-pier .pier-news-image { height: auto; aspect-ratio: 16 / 9; border: 1px solid #8c6534; }
    .theme-pier .pier-news-copy { min-width: 0; padding: 17px 0 0; }
    .theme-pier .pier-news-copy h3 { margin: 10px 0; font-size: clamp(24px, 4cqw, 29px); line-height: 1.2; }
    .theme-pier .pier-news-copy p { margin-bottom: 15px; font-size: 16px; line-height: 1.65; }
    .theme-pier .pier-news-article__meta { font-size: 12px; line-height: 1.5; }
    .theme-pier .pier-news-copy > .pier-text-link { min-width: 178px; min-height: 46px; padding: 10px 22px; font-size: 16px; }
    .theme-pier .pier-rankings { min-height: 0; padding: 24px 24px 30px; background-size: 100% 100%; }
    .theme-pier .pier-rankings .pier-section-title { margin-bottom: 15px; font-size: 32px; }
    .theme-pier .pier-ranking-tabs--even > button,
    .theme-pier .pier-ranking-tabs--even > a { min-height: 60px; padding: 10px 5px 13px; font-size: 15px; overflow-wrap: anywhere; }
    .theme-pier .pier-rankings table { font-size: 16px; }
    .theme-pier .pier-rankings th { padding: 12px 6px; font-size: 13px; }
    .theme-pier .pier-rankings td { height: 46px; padding: 10px 6px; }
    .theme-pier .pier-rankings th:first-child,
    .theme-pier .pier-rankings td:first-child { width: 20%; }
    .theme-pier .pier-rankings th:last-child,
    .theme-pier .pier-rankings td:last-child { width: 25%; }
    .theme-pier .pier-rankings td a { display: inline-flex; align-items: center; min-height: 30px; }
    .theme-pier .pier-ranking-more { min-height: 48px; margin-block: 8px; padding-block: 12px; font-size: 16px; }
    .theme-pier .pier-server-summary { flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
    .theme-pier.pier-home .pier-promotion--home .pier-home-promotion-board {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        width: calc(100% - 32px);
        padding: 18px;
        gap: 9px 15px;
    }
    .theme-pier .pier-home-promotion-seal { grid-column: 1; grid-row: 1 / 3; }
    .theme-pier .pier-home-promotion-copy { grid-column: 2; grid-row: 1; }
    .theme-pier .pier-home-promotion-deadline { grid-column: 2; grid-row: 2; padding: 0; border: 0; }
    .theme-pier .pier-home-promotion-cta { grid-column: 3; grid-row: 1 / 3; }
    .theme-pier .pier-footer-scene { min-height: 0; padding: 10px 20px 25px; background-size: cover; }
    .theme-pier .pier-community-links { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
    .theme-pier .pier-community-links > a { min-width: 0; min-height: 68px; gap: 10px; font-size: 20px; line-height: 1.3; }
    .theme-pier .pier-community-links > a > .pier-community-medallion { width: 42px; height: 42px; }
    .theme-pier .pier-footer { gap: 12px; padding: 18px 0 0; }
    .theme-pier .pier-footer nav { gap: 0 16px; }
    .theme-pier .pier-footer nav > a,
    .theme-pier .pier-appearance > summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

    /* Subpages show their actual content before the secondary account panel. */
    .theme-pier.pier-subpage .pier-masthead { height: 32.15cqw; min-height: 0; background-size: 100% 100%; background-position: center top; }
    .theme-pier.pier-subpage .pier-masthead-logo { top: 6.8cqw; left: 3.8%; width: 28.5%; max-width: none; }
    .theme-pier.pier-subpage .pier-breadcrumb { min-height: 52px; flex-wrap: wrap; gap: 6px 10px; padding: 13px 20px; font-size: 13px; }
    .theme-pier.pier-subpage .pier-page-grid,
    .theme-pier.pier-subpage .pier-page-grid--account {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        min-height: 0;
        padding: 22px 20px 30px;
        background: linear-gradient(#0b100bde, #0c100deb), url('images/wood.webp') center / 650px;
    }
    .theme-pier .pier-page-grid--account > .pier-document { grid-row: 1; }
    .theme-pier .pier-page-grid--account > .pier-account-sidebar { grid-row: 2; }
    .theme-pier.pier-subpage .pier-account-sidebar { width: min(100%, 440px); margin: 0 auto; padding: 17px 18px 16px; border-width: 10px; border-image-width: 10px; }
    .theme-pier.pier-subpage .pier-document { min-width: 0; padding: 0; font-size: 16px; line-height: 1.65; }
    .theme-pier.pier-subpage:not(.pier-has-sidebar) .pier-document { padding: 16px 14px 22px; border-width: 10px; border-image-width: 10px; }
    .theme-pier.pier-subpage .pier-document-heading { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 22px; padding-bottom: 16px; }
    .theme-pier.pier-subpage .pier-document .pier-page-title { font-size: clamp(30px, 5cqw, 42px); }
    .theme-pier .pier-page-subtitle { font-size: 23px; }
    .theme-pier .pier-document :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea) {
        min-width: 0;
        max-width: 100%;
        min-height: 46px;
        font-size: 16px;
    }
    .theme-pier .pier-document :where(.form-group, form, .subpage-content) { min-width: 0; max-width: 100%; }
    .theme-pier .pier-document textarea { min-height: 150px; }
    .theme-pier .pier-document :where(button, .btn, .btn-show, .show-ticket, .tournament-button) { max-width: 100%; overflow-wrap: anywhere; }
    .theme-pier .pier-document .pagination :where(a, span) { min-width: 44px; min-height: 44px; }
    .theme-pier .pier-document table:not(.table) { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
    .theme-pier .pier-document .tournament-signup__form { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
    .theme-pier .pier-document .tournament-signup__form select { width: 100%; min-width: 0; }
    .theme-pier .pier-document .tournament-bracket { max-height: min(70svh, 560px); overflow: auto; overscroll-behavior: contain; }
    .theme-pier.pier-downloads .crossplay-requirements__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .theme-pier.pier-payments .pier-payment-method__heading { flex-wrap: wrap; gap: 8px 16px; }
    .theme-pier.pier-subpage .pier-document-heading .pier-promotion { width: 100%; max-width: none; padding: 14px 18px; }
    .theme-pier.pier-subpage .pier-document-heading .pier-promotion-deadline { max-width: none; }

    .theme-pier .legacy-cookie-consent__inner { width: auto; margin: 0; gap: 8px 14px; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    .theme-pier .legacy-cookie-consent a { white-space: normal; }
    .theme-pier .legacy-cookie-consent button { min-height: 44px; }
    .theme-pier:has(.legacy-cookie-consent:not([hidden])) { padding-bottom: 180px; }
}

@media (max-width: 600px) {
    .theme-pier.pier-subpage .pier-page-grid,
    .theme-pier.pier-subpage .pier-page-grid--account { padding-inline: 16px; }
    .theme-pier.pier-home .pier-promotion--home { padding: 14px 16px 18px; }
    .theme-pier.pier-home .pier-promotion--home .pier-home-promotion-board { width: 100%; grid-template-columns: 36px minmax(0, 1fr); padding: 14px; gap: 12px; }
    .theme-pier .pier-home-promotion-seal { grid-row: 1; }
    .theme-pier .pier-home-promotion-deadline { grid-column: 1 / -1; grid-row: 2; padding-top: 10px; border-top: 1px solid #8d68374d; }
    .theme-pier .pier-home-promotion-cta { grid-column: 1 / -1; grid-row: 3; justify-self: center; max-width: 100%; }
    .theme-pier.pier-home .pier-promotion--home strong { font-size: 20px; }
    .theme-pier.pier-home .pier-promotion--home .pier-promotion-deadline { min-width: 0; }
    .theme-pier.pier-subpage .pier-document-heading .pier-promotion-deadline { border: 0; padding: 0; }
    .theme-pier .pier-document .t-ranking .table-row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) minmax(48px, 28%);
        gap: 5px 8px;
        padding: 12px 8px;
    }
    .theme-pier .pier-document .t-ranking .table-col { min-width: 0; font-size: 14px; }
    .theme-pier .pier-document .t-ranking .table-col:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
    .theme-pier .pier-document .t-ranking .table-col:nth-child(2) { grid-area: 1 / 2; }
    .theme-pier .pier-document .t-ranking .table-col:nth-child(3) { grid-area: 2 / 2; font-size: 12px; color: var(--document-muted); }
    .theme-pier .pier-document .t-ranking .table-col:nth-child(4) { grid-area: 2 / 3; justify-self: end; font-size: 12px; }
    .theme-pier .pier-document .t-ranking .table-col:nth-child(5) { grid-area: 1 / 3; text-align: right; }
    .theme-pier .pier-document .table-body.t-panel > .table-row:has(> .table-col:nth-child(4):last-child) { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(48px, 28%); gap: 6px 8px; padding: 12px 8px; }
    .theme-pier .pier-document .table-body.t-panel > .table-row:has(> .table-col:nth-child(4):last-child) > .table-col:first-child { grid-row: 1 / 3; }
    .theme-pier .pier-document .table-body.t-panel > .table-row:has(> .table-col:nth-child(4):last-child) > .table-col:nth-child(4) { grid-column: 2 / -1; font-size: 12px; text-align: left; }
    .theme-pier .pier-document .tournament-signup { padding: 18px 14px; }
}

@media (max-width: 480px) {
    .theme-pier .pier-community-links { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .theme-pier .pier-community-links > a { justify-content: flex-start; padding-inline: 12px; border-bottom: 1px solid #785c3140; }
    .theme-pier .pier-hero-account { padding: 14px 12px 12px; border-width: 9px; border-image-width: 9px; }
    .theme-pier .pier-account-help { font-size: 12px; }
    .theme-pier .pier-rankings { padding-inline: 18px; }
    .theme-pier .pier-ranking-tabs--even > button { font-size: 14px; }
    .theme-pier .pier-document .table-body:not(.t-ranking) > .table-row:has(> .table-col:nth-child(3):last-child) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .theme-pier .pier-document .table-body:not(.t-ranking) > .table-row:has(> .table-col:nth-child(3):last-child) > .table-col { text-align: left; }
    .theme-pier .legacy-cookie-consent__inner { flex-wrap: wrap; }
    .theme-pier .legacy-cookie-consent button { margin-left: auto; }
}

@media (max-width: 380px) {
    .theme-pier .pier-navigation,
    .theme-pier .pier-navigation.is-open { grid-template-columns: minmax(0, 1fr); }
    .theme-pier .pier-rankings { padding-inline: 16px; }
    .theme-pier .pier-ranking-tabs--even > button { font-size: 13px; }
    .theme-pier .pier-account-help a + a { padding-left: 0; border-left: 0; }
}