/* Phone fixes for the main site. Loaded after each page's own styles, so
   these win over a page's rules of the same specificity. */
@media (max-width: 768px) {
    /* The nav bar floats over the top ~125px of the page. */

    /* Page headers had a fixed height (45-100vh) with their title centered;
       on a phone the title and subtitle are taller than that, so the title
       slid up under the nav bar (or off the top on Play). Let them grow. */
    .about-hero,
    .combat-hero,
    .community-hero,
    .explore-hero,
    .news-hero,
    .play-hero,
    .post-hero,
    .pvp-hero,
    .releases-hero,
    .terms-hero,
    .whatsnew-hero {
        height: auto !important;
        min-height: 50vh;
        padding-top: 140px !important;
        padding-bottom: 3rem !important;
    }

    /* Release notes: the version picker sized itself to its longest
       option, which pushed the header (and the picker and button) past the
       right edge on Test Release Notes. */
    .releases-hero-content {
        width: 100%;
        min-width: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .releases-select {
        width: 100%;
        min-width: 0;
    }

    /* Terms: on desktop the sections overlap (negative margins, with 25rem
       of padding to clear the overlap). Narrow screens already drop the
       overlap but kept the padding, leaving 800px of empty colour around
       each group of cards, and the header still pulled the first section
       heading ("Pirata Codex") up underneath itself. */
    .terms-hero {
        margin-bottom: 0;
    }

    .terms-section {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Explore: "Primary Locations" was pulled up under the page header. */
    .primary-locations-header {
        margin-top: 0 !important;
    }

    /* A page that starts with a plain container would start under the
       nav bar. */
    main > .container:first-child {
        padding-top: 140px;
    }

    /* 3rem of side padding left 294px for content on a 390px phone. */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Embedded videos have a fixed width. */
    main iframe {
        max-width: 100%;
    }

    /* Home: the header is one screen high with its content centred, so on a
       short screen the content spilled upwards and the logo went under the
       nav bar. Let the header grow, starting below the nav. */
    main > header:not([class]) {
        height: auto;
        min-height: 100vh;
        padding: 130px 0 4rem;
    }

    /* Home: "Relive The Legend" ran past both edges on narrower phones. */
    .hero-immersive .hero-title {
        font-size: 2rem;
    }

    /* Community: the three stat boxes (Total Online, Last Updated, PvP)
       were 103px each and cut their text off. */
    .stats-grid,
    .stats-grid.has-pvp {
        grid-template-columns: 1fr !important;
    }

    /* Play: the system requirements table was wider than its box, which
       cut off the Recommended column. */
    .system-requirements {
        padding: 2rem 1rem;
    }

    .sys-req-table {
        font-size: 0.8rem !important;
    }

    .sys-req-table th,
    .sys-req-table td {
        padding: 0.6rem 0.3rem !important;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .sys-req-table th {
        font-size: 0.75rem;
        letter-spacing: 0;
    }

    /* Login, Register, Reset Password, Forgot Username, Lost 2FA: the form
       area grew to fit its padding and the reCAPTCHA, so the page scrolled
       sideways. */
    .login-hero {
        padding: 0 0.75rem;
    }

    .login-hero-content {
        width: 100%;
        min-width: 0;
        padding: 7rem 0 1rem;
    }

    .login-hero .container.main-tiles {
        padding: 0;
    }

    .login-hero .tile.is-child.box,
    .login-hero .box.center {
        margin: 2rem 0 0 !important;
        padding: 2rem 0.75rem !important;
    }

    .login-hero .recaptcha {
        max-width: none;
    }
}

/* Narrow phones and fold-phone cover screens (280-380px). Cards nested in
   padded sections left ~100px for text at 280px, and headings with fixed
   minimum sizes ran off the screen. */
@media (max-width: 380px) {
    /* Home */
    .legend-text {
        padding: 0 0.75rem;
    }

    .legend-highlight {
        font-size: 1.75rem;
    }

    .available-title {
        font-size: 1.3rem;
        letter-spacing: 1px;
    }

    .platform-logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1.25rem;
    }

    main > .section-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .section-content > .section-title {
        font-size: 2.5rem;
    }

    .news-crystal {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .news-crystal .news-title {
        font-size: 1.5rem;
    }

    /* About: the timeline */
    .timeline::before {
        left: 10px;
    }

    .timeline-item {
        padding-left: 30px;
    }

    .timeline-marker {
        left: 0 !important;
    }

    .timeline-content {
        padding: 1.5rem 1.1rem;
    }

    .timeline-date {
        font-size: 1.4rem;
    }

    /* Community */
    .ocean-section > .section-title {
        font-size: 2rem;
    }

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

    .population-card {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Explore, What's New */
    .primary-locations-title,
    .wild-islands-title,
    .discover-experiences-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    /* Page headers */
    .page-hero h1,
    .news-hero .hero-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }

    /* Lost at Sea */
    .memorial-title {
        font-size: 2.2rem;
    }

    .kraken-text,
    .tribute-title {
        font-size: 1.8rem;
    }

    /* Release notes, on their page and on Play */
    .release-note-card,
    .release-notes {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .release-content ul,
    .releasenotecontent ul {
        padding-left: 1.25rem;
    }

    .release-badges {
        flex-wrap: wrap;
        justify-content: center;
    }

    .release-date {
        white-space: nowrap;
    }

    /* Terms */
    .terms-card {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .terms-card .scrollable-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .terms-card .scrollable-content ul {
        padding-left: 1.1rem;
    }
}

@media (max-width: 340px) {
    /* The reCAPTCHA is 304px wide whatever the screen. Scaled down, it
       still takes up its full width unless the margins give it back. */
    .login-hero .recaptcha > div {
        transform: scale(0.8);
        transform-origin: left top;
        margin-right: -61px;
        margin-bottom: -16px;
    }
}