/* ===================================================
   Responsive layout (full-width desktop + mobile)
   Loaded last on every page so it can override page styles.
   =================================================== */

/* Only on body: it then applies to the whole viewport, so normal page
   scrolling and the sticky header keep working */
body {
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
}

/* Hide Google Translate's own bar, tooltips and highlights
   (language is picked from our menu instead, see site-translate.js) */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-text-highlight,
font[style*="background-color"] {
    background: none !important;
    box-shadow: none !important;
}

/* ---------- Theme switcher (header) ---------- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Same width for "Glass", "Light", "Dark" and "System" so the header never shifts */
.theme-label {
    display: inline-block;
    min-width: 5em;
    text-align: left;
}

.theme-dropdown {
    width: 150px !important;
    right: 0 !important;
}

@media (max-width: 768px) {
    .theme-label { display: none; } /* icon only on phones */
}

/* ---------- Draft results: each team on a single row ----------
   Icons shrink to fit instead of wrapping onto a second line */
.team-grid {
    flex-wrap: nowrap !important;
    max-width: none;
}

.team-grid .hero-with-patron {
    flex: 0 1 90px;
    min-width: 0;
    margin: 4px;
}

/* .main-hero-img can be the <img> itself or, on framed pages (tournament),
   the frame wrapper that takes over its class */
.team-grid .hero-with-patron .main-hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.team-grid .hero-with-patron {
    display: block;
}

.team-grid .hero-with-patron .patron-mini-badge {
    z-index: 5;
}

.team-grid .hero-with-patron .patron-mini-badge {
    width: 48%;
    height: auto;
    aspect-ratio: 1 / 1;
    bottom: -8%;
    right: -8%;
}

/* ---------- Desktop: content fills the screen ---------- */
@media (min-width: 769px) {
    .main-content,
    .tour-main-content,
    .legal-container,
    .policy-container {
        max-width: none !important;
        margin-left: 40px !important;
        margin-right: 40px !important;
    }

    /* Inner boxes that had their own width caps */
    .tier-list-container,
    .hero-pool-container,
    .hero-pool,
    .main-content > div[style*="max-width: 1000px"] {
        max-width: none !important;
    }

    /* Team build's text box sits outside .main-content */
    body > .seo-content {
        max-width: none !important;
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
}

@media (max-width: 768px) {
    /* Phones don't handle fixed backgrounds well (jumpy / zoomed in) */
    body {
        background-attachment: scroll;
    }

    /* ---------- Top navigation ---------- */
    .top-nav {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 12px;
    }

    /* Logo takes whatever space is left (basis 0), so it can never push the
       buttons onto a second line; it shrinks instead */
    .logo-container {
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    .logo {
        font-size: 1.15rem;
        white-space: nowrap;
        gap: 6px !important;
        min-width: 0;
        overflow: hidden;
    }

    .logo svg {
        width: 18px;
        height: 18px;
    }

    .logo-img {
        width: 30px;
        height: 30px;
    }

    /* Search moves to its own full-width row under the logo */
    .search-container {
        order: 3;
        flex: 1 1 100%;
    }

    .search-bar {
        padding: 8px 14px;
        font-size: 16px; /* 16px stops iOS zooming in on focus */
    }

    /* Right-hand button group (language / profile / logout) */
    .top-nav > div:last-child {
        gap: 6px !important;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* Avatar is enough on phones; the username only shows when there's no avatar
       (works whichever order the page puts them in) */
    #user-avatar:not([style*="display: none"]) + #user-display,
    :has(> #user-avatar:not([style*="display: none"])) > #user-display {
        display: none;
    }

    .top-nav { gap: 8px 6px; }
    .top-nav > div:last-child { gap: 5px !important; }
    .logo-img { width: 28px; height: 28px; }

    .profile-container {
        gap: 6px;
        margin-left: 0 !important;
    }

    #profile-btn {
        padding: 2px !important;
        gap: 6px !important;
    }

    #user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    /* Language and Login/Logout buttons: identical height and text size
       (the globe emoji renders larger on real phones, so size is fixed) */
    .nav-icon-btn,
    .logout-btn,
    #logout-btn {
        height: 34px;
        padding: 0 9px !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.5px;
        border-width: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        line-height: 1;
    }

    .nav-icon-btn span {
        font-size: 1.1em !important;
        line-height: 1;
        margin-top: 0 !important;
    }

    .lang-dropdown {
        right: 0;
        width: 180px;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* ---------- Login ---------- */
    .login-container {
        width: calc(100% - 32px);
        max-width: 380px;
    }

    /* ---------- Page containers ---------- */
    .main-content,
    .blog-container,
    .legal-container,
    .policy-container {
        margin: 14px 10px !important;
        padding: 18px 14px !important;
        border-radius: 14px;
        max-width: none;
        width: auto !important;
    }

    .post-detail {
        padding: 14px;
        border-radius: 14px;
    }

    .post-detail .seo-content,
    .post-detail [style*="padding: 20px"] {
        padding: 12px !important;
    }

    .post-header-img {
        margin-bottom: 18px;
    }

    /* ---------- Typography ---------- */
    h1 {
        font-size: 1.6rem !important;
        line-height: 1.25;
    }

    h2 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }

    h3 {
        line-height: 1.35;
    }

    .page-title {
        font-size: 1.5rem;
        margin-bottom: 18px;
    }

    .blog-container h3,
    .legal-container h3,
    .policy-container h3 {
        font-size: 1.1rem;
    }

    .blog-container p,
    .blog-container ul,
    .legal-container p,
    .policy-container p,
    .post-detail p,
    .post-detail li {
        font-size: 0.98rem !important;
        line-height: 1.65;
    }

    .blog-container ul,
    .legal-container ul,
    .policy-container ul {
        margin-left: 20px;
    }

    .post-detail > div[style*="font-size"] {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .hero-btn {
        font-size: 0.9rem;
        padding: 8px 14px;
    }

    /* ---------- Home grid ---------- */
    .grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card-content {
        padding: 14px;
    }

    .card-title {
        font-size: 1.1rem;
    }

    /* ---------- Modals (avatar picker etc.) ---------- */
    #avatar-modal > div {
        width: 92% !important;
        max-width: 400px;
        padding: 20px !important;
    }

    /* ---------- Footer ---------- */
    .site-footer {
        padding: 30px 16px;
        margin-top: 30px;
    }

    .footer-content {
        gap: 24px;
    }

    .footer-logo-text {
        font-size: 1.4rem;
    }

    .footer-links a {
        display: inline-block;
        margin: 4px 6px;
    }

    /* ---------- Tier lists ---------- */
    .page-header {
        margin-top: 10px;
    }

    .page-description {
        margin-bottom: 20px;
        font-size: 0.95rem;
    }

    .tier-row {
        min-height: 70px;
    }

    .tier-label {
        width: 54px;
        flex-shrink: 0;
        font-size: 1.4rem;
    }

    .tier-dropzone {
        min-height: 70px;
        padding: 8px;
        gap: 6px;
    }

    .hero-icon {
        width: 50px;
        height: 50px;
    }

    .hero-pool {
        padding: 12px;
        gap: 8px;
    }

    .hero-pool-title {
        font-size: 1.15rem;
    }

    /* ---------- Draft modes ---------- */
    .action-btn,
    .select-btn {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    .draft-progress {
        flex-wrap: wrap;
        gap: 6px;
    }

    .draft-slot {
        width: 46px;
        height: 46px;
    }

    .draft-cards-container {
        flex-wrap: wrap;
        gap: 12px;
    }

    .draft-card {
        padding: 10px;
        gap: 10px;
    }

    .draft-card img {
        width: 80px;
        height: 80px;
    }

    .results-container {
        flex-direction: column;
        gap: 16px;
    }

    .team-result {
        padding: 14px;
    }

    .team-grid {
        gap: 4px !important;
    }

    /* Tournament "Teams Locked" boxes: less padding so icons stay large */
    #arena-completed-decks .results-container {
        gap: 12px !important;
    }

    #arena-completed-decks .team-result {
        padding: 12px 8px;
        min-width: 0 !important;
        flex: 0 0 auto !important; /* stacked vertically here, so no fixed basis */
    }

    .team-grid > img {
        width: 56px;
        height: 56px;
    }

    .team-grid .hero-with-patron {
        margin: 0;
    }

    .timer-container {
        max-width: 100%;
    }

    /* Mega draft */
    .draft-header {
        flex-direction: column;
        gap: 14px;
        padding: 14px;
    }

    .player-team,
    .draft-status {
        width: 100%;
        text-align: center;
    }

    .player-team#opponent-team-progress {
        text-align: center;
    }

    .team-slots,
    #opponent-slots {
        justify-content: center;
    }

    .pool-container {
        padding: 14px;
    }

    .pool-grid {
        gap: 8px;
        justify-content: center;
    }

    .pool-item {
        width: 60px;
        height: 60px;
        border-radius: 10px;
    }

    /* ---------- Team build ---------- */
    .hero-builder-container {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
        margin-bottom: 190px;
    }

    .sidebar {
        flex-direction: row;
        width: 100%;
    }

    .sidebar .tab-btn {
        flex: 1;
        padding: 10px;
        font-size: 0.95rem;
    }

    .tab-btn.active::after {
        display: none;
    }

    .hero-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 8px;
        padding-right: 4px;
    }

    .bottom-bar {
        flex-wrap: wrap;
        padding: 10px;
        gap: 10px;
    }

    .bottom-bar .selected-slots {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 8px;
    }

    .bottom-bar .slot {
        width: 54px;
        height: 54px;
    }

    .bottom-bar .patron-badge {
        width: 26px;
        height: 26px;
        top: -8px;
        right: -8px;
    }

    .bottom-bar .patron-badge.has-patron {
        width: 28px;
        height: 28px;
        top: -9px;
        right: -9px;
    }

    .bottom-actions {
        width: 100%;
        justify-content: center;
    }

    .ok-btn {
        padding: 10px 28px;
        font-size: 1rem;
    }

    .modal-body {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    /* ---------- Tournament ---------- */
    .tour-card-panel {
        padding: 16px 12px;
        border-radius: 14px;
        margin-bottom: 18px;
    }

    .tour-title {
        font-size: 1.6rem;
    }

    .tour-subtitle {
        font-size: 0.95rem;
    }

    .entrance-grid {
        grid-template-columns: 1fr;
    }

    .entrance-card {
        padding: 18px 14px;
    }

    .entrance-card-icon {
        font-size: 2.2rem;
    }

    .player-limit-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .mode-select-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .lobby-tour-name {
        font-size: 1.4rem;
    }

    .tour-id-container {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .countdown-timer {
        font-size: 5rem;
    }

    .bracket-wrapper {
        gap: 20px;
        padding: 10px 4px 24px;
    }

    .bracket-column {
        min-width: 180px;
    }

    .champion-heading {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .champion-name {
        font-size: 1.5rem;
    }

    .champion-crown {
        font-size: 3.5rem;
    }
}

/* Smallest phones (360px Androids): a little tighter still */
@media (max-width: 370px) {
    .top-nav { padding: 10px 8px !important; }
    .logo { font-size: 0.95rem !important; }
    .logo-container { gap: 6px !important; }
    .nav-icon-btn, .logout-btn, #logout-btn { padding: 0 7px !important; letter-spacing: 0 !important; }
}

/* Very narrow phones: drop the small home icon next to the logo
   (the logo itself still links home) and keep the username short */
@media (max-width: 420px) {
    .logo svg {
        display: none;
    }

    /* Language button: just "EN" (no globe) to leave room for the logo text */
    .lang-menu-container .nav-icon-btn span {
        display: none;
    }

    .logo {
        font-size: 1.05rem;
    }

    #user-display {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Glass theme: text links inside articles and guides.
   Without this they fall back to the browser's dark blue/purple,
   which is hard to read on the dark glass background.
   (Light and Dark colour these links in theme.css.) */
html[data-theme="glass"] :is(.blog-container, .legal-container, .policy-container, #post-content) :is(p, li, td, figcaption) a:not(.hero-btn):not(.video-guide-card),
html[data-theme="glass"] :is(.blog-container, .legal-container, .policy-container, #post-content) :is(p, li, td, figcaption) a:not(.hero-btn):not(.video-guide-card):visited {
    color: #aef649;
    text-decoration: underline;
    text-decoration-color: rgba(174, 246, 73, 0.45);
    text-underline-offset: 3px;
}
html[data-theme="glass"] :is(.blog-container, .legal-container, .policy-container, #post-content) :is(p, li, td, figcaption) a:not(.hero-btn):not(.video-guide-card):hover {
    color: #d4ff8f;
    text-decoration-color: currentColor;
}