/* ──────────────────────────────────────────────────────────────────────────
   TreadGame website — palette mirrors the in-app branding so the
   marketing site feels like a continuation of the app itself.

   Colour tokens chosen from the Unity project (GameWorldMaterials,
   GameSelectBootstrapper, BrandingHelper, etc.).

   Mobile-first: base styles are sized for narrow phones; media queries
   open out to tablet and desktop layouts.
   ────────────────────────────────────────────────────────────────────── */

:root {
    /* Brand palette */
    --bg:           #FAF7F0;       /* in-app screen background */
    --bg-soft:      #F2EFE6;       /* alternate band */
    --ink:          #1F2230;       /* primary text */
    --ink-soft:     #4A4F60;       /* secondary text */
    --ink-faint:    #7A8090;       /* tertiary text */
    --rule:         #E0DAC9;

    /* Game accents */
    --cta:          #1FA259;       /* Chase the Alien green */
    --obs:          #3870C8;       /* Observation blue */
    --maze:         #9F52C8;       /* Runner Maze purple */

    /* Highlights */
    --orange:       #FA801E;       /* path / accent */
    --cyan:         #03A6EB;       /* grass / sky */
    --gold:         #F0B71A;       /* records / new-record toast */

    /* Radii / shadows */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;

    --shadow-sm: 0 2px 6px rgba(31, 34, 48, .08);
    --shadow-md: 0 6px 22px rgba(31, 34, 48, .10);
    --shadow-lg: 0 14px 48px rgba(31, 34, 48, .14);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Honour the device safe area on iPhones with a notch / home indicator */
body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

a {
    color: var(--obs);
    text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: rgba(250, 247, 240, .92);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--rule);
}
.topbar__brand { display: flex; align-items: center; }
.topbar__logo  { height: 32px; width: auto; }

.topbar__nav {
    display: none;       /* hidden on mobile, revealed on tablet+ */
    flex: 1;
    gap: 22px;
    margin-left: 18px;
}
.topbar__nav a {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
}
.topbar__nav a:hover { color: var(--ink); text-decoration: none; }

.topbar__lang { margin-left: auto; position: relative; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: white; color: var(--ink);
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: 8px 12px; font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
}
.lang-btn:hover { border-color: var(--ink-faint); }
.lang-btn__chevron { font-size: 0.8em; opacity: .7; }

.lang-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    margin: 0; padding: 6px 0;
    list-style: none;
    background: white;
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    min-width: 180px;
}
.lang-menu li {
    padding: 8px 14px; cursor: pointer;
    font-size: 0.95rem;
}
.lang-menu li:hover { background: var(--bg-soft); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
    padding: 48px 18px 40px;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
    text-align: center;
}
.hero__inner {
    max-width: 880px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.hero__logo  { width: 220px; max-width: 70vw; }
/* Small label above the mission title — sets context that the headline IS
   the mission, not a tagline. Uppercase + letter-spacing makes it read as
   a section eyebrow without needing a separate divider line. */
.hero__eyebrow {
    margin: -4px 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
}
.hero__title {
    margin: 0;
    font-size: clamp(1.9rem, 5vw + 1rem, 3.4rem);
}
.hero__subtitle {
    color: var(--ink-soft);
    max-width: 620px;
    font-size: clamp(1rem, 1vw + 0.85rem, 1.2rem);
    margin: 0;
}

/* ── Hero banner image — big landscape "this is what it looks like" shot ── */
.hero__banner {
    display: block;
    width: min(100%, 920px);
    margin: 28px auto 0;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* ── Screenshot carousel (continuous-loop marquee of iPhone shots) ──────── */
/* Slides flow steadily right-to-left, never stopping. main.js clones the
   slide set once so the second half is a copy of the first; the CSS then
   animates from translateX(0) to translateX(-50%), at which point we're
   visually identical to translateX(0) again — the loop is seamless.
   Pauses on hover (CSS) and respects prefers-reduced-motion. */
.screenshot-carousel {
    position: relative;
    margin: 4px auto 32px;
    max-width: 1080px;
    padding: 0 8px;
    overflow: hidden;
    /* Soft fade on the edges so slides appear to flow in / out rather
       than clipping at a hard line. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 48px,
        #000 calc(100% - 48px),
        transparent 100%);
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 48px,
        #000 calc(100% - 48px),
        transparent 100%);
}
.screenshot-carousel__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: screenshot-marquee 32s linear infinite;
    will-change: transform;
}
.screenshot-carousel:hover .screenshot-carousel__track,
.screenshot-carousel:focus-within .screenshot-carousel__track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .screenshot-carousel__track { animation: none; }
}
.screenshot-carousel__slide {
    flex: 0 0 auto;
    margin: 0;
}
.screenshot-carousel__shot {
    display: block;
    width: 320px;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
}
@keyframes screenshot-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ── App store badges row ──────────────────────────────────────────────── */
/* Apple's brand guidelines: badge minimum height 40 pt on the web, no
   recolouring, no cropping. Source SVG renders at intrinsic 245×82 px;
   we don't shrink below that. Google Play badge slot will sit alongside
   once the Android build ships. */

.store-badges {
    margin: 22px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.store-badges__link {
    display: inline-block;
    line-height: 0;             /* removes baseline gap under the SVG */
    transition: transform 0.18s ease;
}
.store-badges__link:hover,
.store-badges__link:focus-visible {
    transform: translateY(-2px);
}
.store-badges__img {
    display: block;
    width: 245px;
    height: 82px;
    object-fit: contain;
}
.store-badges__pending {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    letter-spacing: .02em;
}

/* ── Section base ────────────────────────────────────────────────────────── */

.section {
    padding: 56px 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.section--games  { padding-top: 72px; }
.section--watch  { background: var(--bg-soft); max-width: none; }
.section--setup  { padding-bottom: 72px; }
.section--apple  { background: var(--bg-soft); max-width: none; padding-bottom: 72px; }
/* Full-bleed like Apple, but on the page background so it reads as a
   distinct platform block rather than blending into the soft Apple
   section directly above it. */
.section--android { max-width: none; padding-bottom: 72px; }

.section__title {
    margin: 0 0 8px;
    text-align: center;
    font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
}
.section__lede {
    color: var(--ink-soft);
    text-align: center;
    max-width: 620px; margin: 0 auto 36px;
    font-size: 1.05rem;
}

/* ── Games grid ──────────────────────────────────────────────────────────── */

.game-grid {
    display: grid; grid-template-columns: 1fr; gap: 20px;
}
.game-card {
    background: white;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border-top: 4px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.game-card--cta  { border-top-color: var(--cta);  }
.game-card--obs  { border-top-color: var(--obs);  }
.game-card--maze { border-top-color: var(--maze); }

.game-card__image-wrap {
    /* Source art is now square — match it instead of cropping to 16:10. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-soft);
    position: relative;   /* anchor for the absolute-positioned coming-soon ribbon */
}
.game-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── "Coming soon" diagonal ribbon (top-right corner of card image) ────── */
/* Geometry note: the ribbon is wider than the visible diagonal so the
   "wings" get clipped by .game-card__image-wrap's overflow: hidden,
   leaving only the centred text band visible. Top offset has to be
   high enough that the text's top-left corner stays below y=0 after
   the 45° rotation — too low and the leftmost characters poke above
   the wrap and get clipped. 34px clears with breathing room. */
.game-card__ribbon {
    position: absolute;
    top: 34px;
    right: -48px;
    width: 180px;
    transform: rotate(45deg);
    transform-origin: center;
    background: #E53935;     /* bright red — reads instantly as "not yet" */
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;    /* don't intercept clicks on the card */
    z-index: 2;
}
.game-card--coming-soon .game-card__image-wrap img {
    /* Slight desaturation makes the ribbon read more strongly without
       hiding the artwork — the player can still see the game's look. */
    filter: saturate(0.65) brightness(0.96);
}

.game-card__body { padding: 20px 22px 24px; }
.game-card__body h3 { margin: 0 0 8px; }
.game-card__body p  { margin: 0; color: var(--ink-soft); }

/* Compact link-card — image + name + "Learn more". Detailed copy lives on
   game.html so the homepage stays readable as the catalogue grows. */
a.game-card { color: inherit; text-decoration: none; display: block; }
a.game-card:hover { text-decoration: none; }
.game-card--compact .game-card__body { padding: 18px 20px 20px; }
.game-card--compact .game-card__body h3 { margin: 0 0 6px; font-size: 1.2rem; }
.game-card__more {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--obs);
}
a.game-card:hover .game-card__more {
    color: var(--ink);
}

/* ── Per-game help page (game.html) ──────────────────────────────────────── */

.game-hero {
    border-top: 6px solid var(--rule);    /* accent colour set inline by JS */
    background: var(--bg-soft);
    padding: 32px 18px 28px;
}
.game-hero__inner {
    max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 24px;
    align-items: center;
}
.game-hero__image {
    width: 100%; max-width: 360px; justify-self: center;
    aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
.game-hero__copy h1 {
    margin: 4px 0 8px;
    font-size: clamp(1.7rem, 4vw + 0.6rem, 2.6rem);
}
.game-hero__copy p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink-soft);
}
.game-hero__back {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.game-hero__back:hover { color: var(--ink); text-decoration: none; }

.game-help {
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 22px 60px;
}
.game-help__section { margin-bottom: 36px; }
.game-help__section h2 {
    margin: 0 0 10px;
    font-size: 1.5rem;
}
.game-help__section p {
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
    /* Author content may include line breaks; preserve them */
    white-space: pre-wrap;
}
.game-help__browse {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.game-help__browse h2 {
    text-align: center;
    color: var(--ink-soft);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 16px;
}

@media (min-width: 720px) {
    .game-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 36px;
    }
    .game-hero__image { justify-self: start; max-width: none; }
    .game-help { padding: 56px 28px 80px; }
}

/* ── Apple Watch row ─────────────────────────────────────────────────────── */

.section--watch .watch-row {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 32px;
    align-items: center;
}
.watch-row__copy h2 { text-align: left; }
.watch-features {
    list-style: none; padding: 0; margin: 18px 0 0;
    display: grid; gap: 14px;
}
.watch-features li {
    display: grid; grid-template-columns: 1fr; gap: 4px;
    background: white; padding: 14px 18px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.watch-features strong { color: var(--ink); font-size: 1.05rem; }
.watch-features span   { color: var(--ink-soft); font-size: 0.95rem; }

/* Real watch screenshots in two device frames — Apple Watch Ultra
   (rounded-rect titanium body, orange Action button on the left) and a
   round Galaxy Watch (metallic bezel, two right-side buttons). Both
   screens are 410×502 captures shown object-fit: cover; the black
   screenshot background blends into any crop. */
.watch-row__art { display: flex; justify-content: center; }
.watch-pair {
    display: flex; flex-wrap: wrap; gap: 28px;
    justify-content: center; align-items: flex-end;
}
.watch-device {
    margin: 0;
    display: flex; flex-direction: column; align-items: center;
}

/* Apple Watch Ultra */
.aw-ultra {
    position: relative;
    width: 168px; height: 206px;
    padding: 12px;
    border-radius: 48px;
    background: linear-gradient(150deg, #b8b4a8 0%, #7c7970 48%, #5c5950 100%); /* natural titanium */
    box-shadow: var(--shadow-lg);
}
.aw-ultra__screen {
    width: 100%; height: 100%;
    border-radius: 38px; overflow: hidden; background: #000;
}
.aw-ultra__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Digital Crown on the right, orange Action button on the left. */
.aw-ultra::after {
    content: ""; position: absolute; right: -4px; top: 70px;
    width: 6px; height: 34px; border-radius: 3px;
    background: #45433c;
}
.aw-ultra::before {
    content: ""; position: absolute; left: -4px; top: 84px;
    width: 6px; height: 38px; border-radius: 3px;
    background: var(--orange);
}

/* Samsung Galaxy Watch (round, Wear OS) */
.galaxy-watch {
    position: relative;
    width: 200px; height: 200px;
    padding: 13px;
    border-radius: 50%;
    background: linear-gradient(150deg, #45454a 0%, #1d1d20 55%, #101012 100%); /* metallic bezel */
    box-shadow: var(--shadow-lg);
}
.galaxy-watch__screen {
    width: 100%; height: 100%;
    border-radius: 50%; overflow: hidden; background: #000;
}
.galaxy-watch__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Home + Back buttons on the right edge. */
.galaxy-watch::before {
    content: ""; position: absolute; right: -3px; top: 66px;
    width: 5px; height: 26px; border-radius: 3px;
    background: #5a5a5e;
}
.galaxy-watch::after {
    content: ""; position: absolute; right: -3px; top: 110px;
    width: 5px; height: 26px; border-radius: 3px;
    background: #5a5a5e;
}

/* ── Setup walkthrough ───────────────────────────────────────────────────── */

/* Trio strip — visual shorthand for screen + watch + treadmill. Three flex
   cards on wider viewports; stacks below the section lede on phones so the
   page doesn't feel cramped. */
.setup-trio {
    list-style: none;
    padding: 0;
    margin: 0 auto 28px;
    max-width: 820px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.setup-trio li {
    flex: 1 1 220px;
    min-width: 160px;
    background: white;
    border-radius: var(--r-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.setup-trio strong { font-size: 0.95rem; }
.setup-trio span:not(.setup-trio__icon) {
    color: var(--ink-soft);
    font-size: 0.85rem;
}
.setup-trio__icon {
    font-size: 1.8rem;
    line-height: 1;
}

/* Emoji icon next to each step's heading. Sized to sit nicely beside the
   title text on the same baseline. */
.setup-step__body h3 {
    margin: 2px 0 8px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.setup-step__emoji {
    font-size: 1.3rem;
    line-height: 1;
}

/* Numbered list of setup steps. Each <li> renders as a card with a circular
   number badge to the left and the title/body to the right. On narrow screens
   the badge sits above the body so the row never overflows. */
.setup-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.setup-step {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: white;
    border-radius: var(--r-lg);
    padding: 24px 28px 22px;
    box-shadow: var(--shadow-sm);
}
.setup-step__num {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--orange);
    color: white;
    font: 700 1.15rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; align-items: center; justify-content: center;
}
.setup-step__body { flex: 1 1 auto; min-width: 0; }
.setup-step__body h3 {
    margin: 2px 0 8px;
    font-size: 1.15rem;
}
.setup-step__body p {
    color: var(--ink-soft);
    margin: 0 0 10px;
}
.setup-step__body p:last-child { margin-bottom: 0; }

/* Tip callout — softer background, accent left border, slightly indented to
   read as advisory rather than core copy. */
.setup-step__tip {
    margin-top: 8px !important;
    padding: 10px 14px;
    border-left: 3px solid var(--orange);
    background: var(--bg-soft);
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
}
.setup-step__tip strong { color: var(--ink); }

@media (max-width: 560px) {
    .setup-step       { flex-direction: column; gap: 12px; padding: 20px 22px; }
    .setup-step__num  { width: 38px; height: 38px; font-size: 1.05rem; }
}

/* ── Apple section ───────────────────────────────────────────────────────── */
/* A 2×2 grid of cards inside the section. Each card is a permission /
   setup topic — health, motion, the watch companion, workouts in Health.
   Same colour palette as the rest of the page so it reads as a piece
   with the setup walkthrough rather than a bolt-on. */
.apple-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 18px;
}
.apple-card {
    background: white;
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.apple-card__icon {
    font-size: 1.8rem;
    line-height: 1;
}
.apple-card h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--ink);
}
.apple-card p {
    margin: 0;
    font-size: 0.98rem;
    color: var(--ink-soft);
    line-height: 1.55;
}
.apple-card em { font-style: normal; color: var(--ink); font-weight: 600; }

/* "Coming soon" pill for the not-yet-shipping Health Connect card.
   Bright accent pill in the top-right corner so skimmers get the status
   without reading the body copy. The card goes position:relative to
   anchor it, and the title reserves right padding so it can't tuck
   under the pill on narrow cards. */
.apple-card--soon { position: relative; }
.apple-card--soon h3 { padding-right: 128px; }
.badge-soon {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--orange);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .apple-grid { grid-template-columns: 1fr; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
    background: var(--ink); color: white;
    padding: 32px 18px;
    text-align: center;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.footer__inner {
    max-width: 880px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.footer__logo {
    width: 44px; opacity: .9;
}
.footer__line     { margin: 0; font-size: 1rem; opacity: .9; }
.footer__copyright {
    margin: 0; font-size: 0.85rem; opacity: .55;
}
.footer__links {
    margin-top: 12px;
    font-size: 0.9rem;
    opacity: .85;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
}
.footer__links a {
    color: white;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.footer__links a:hover,
.footer__links a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}
.footer__discord {
    /* Discord brand "blurple" — same colour as the topbar CTA so the
       footer call-to-action reads as the same kind of action. */
    background: #5865F2 !important;
    border-color: #5865F2 !important;
    font-weight: 600;
    padding: 6px 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer__discord:hover,
.footer__discord:focus-visible {
    background: #4752C4 !important;
    border-color: #4752C4 !important;
}

/* ── Topbar Discord CTA ─────────────────────────────────────────────────── */
.topbar__discord {
    display: none;            /* hidden on mobile to save space */
    background: #5865F2;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease;
    margin-right: 10px;
    align-items: center;
    gap: 8px;
}
.discord-icon {
    width: 20px;
    height: auto;
    flex-shrink: 0;
}
.footer__discord .discord-icon { width: 18px; }
.topbar__discord:hover,
.topbar__discord:focus-visible {
    background: #4752C4;
}
@media (min-width: 720px) {
    .topbar__discord { display: inline-flex; }
}

/* ── Legal page (privacy.html, future terms.html) ───────────────────────── */
.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 22px 56px;
    line-height: 1.55;
}
.legal__title {
    font-size: 1.75rem;
    margin: 8px 0 4px;
}
.legal__updated {
    color: var(--muted, #666);
    font-size: 0.9rem;
    margin: 0 0 24px;
}
.legal h2 {
    font-size: 1.2rem;
    margin: 28px 0 8px;
}
.legal ul {
    padding-left: 22px;
}
.legal li {
    margin: 6px 0;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

/* Tablet & up */
@media (min-width: 720px) {
    .topbar           { padding: 12px 24px; gap: 18px; }
    .topbar__nav      { display: flex; }
    .topbar__logo     { height: 36px; }

    .game-grid        { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .section--watch .watch-row {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 56px;
    }
}

/* Desktop */
@media (min-width: 1080px) {
    .game-grid        { grid-template-columns: repeat(3, 1fr); }
    .section          { padding-left: 32px; padding-right: 32px; }
    .topbar           { padding: 12px 32px; }
    .hero             { padding: 80px 32px 64px; }
}

/* iPhone-specific tightening (5.4" / SE) */
@media (max-width: 380px) {
    h1 { font-size: 1.9rem; }
    .hero__logo { width: 180px; }
    .topbar__logo { height: 28px; }
    .lang-btn { padding: 6px 10px; }
}

/* Reduced-motion users get no transforms */
@media (prefers-reduced-motion: reduce) {
    .game-card { transition: none; }
    .game-card:hover { transform: none; }
}