#games-experience {
    --gsx-line: rgba(255, 255, 255, 0.14);
    --gsx-line-strong: rgba(255, 255, 255, 0.9);
    --gsx-surface: rgba(255, 255, 255, 0.04);
    --gsx-muted: rgba(255, 255, 255, 0.62);
    --gsx-radius-lg: 1.85rem;
    --gsx-radius-md: 1.25rem;

    display: block;
    color: #fff;
  }

  #games-experience *,
  #games-experience *::before,
  #games-experience *::after {
    box-sizing: border-box;
  }

  /* The layout rules below set `display`, which would otherwise beat the user
     agent's [hidden] rule and leave the shell chrome on screen when empty. */
  #games-experience [hidden] {
    display: none !important;
  }

  /* ── Sections and grid ────────────────────────────────────────────── */

  .gsx-group {
    margin: 0 0 2.25rem;
  }

  .gsx-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.85rem;
    margin: 0 0 0.9rem;
  }

  .gsx-group-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .gsx-group-note {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--gsx-muted);
  }

  .gsx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gsx-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--gsx-radius-lg);
    background: #131313;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, outline-color 0.18s ease;
    outline: 2px solid transparent;
    outline-offset: 3px;
  }

  .gsx-tile:hover,
  .gsx-tile:focus-visible {
    transform: translateY(-0.25rem);
  }

  .gsx-tile:focus-visible {
    outline-color: var(--gsx-line-strong);
  }

  .gsx-tile[aria-current='true'] {
    outline-color: var(--gsx-line-strong);
  }

  .gsx-tile-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Shown when a catalog game has no artwork yet, so the grid never blanks. */
  .gsx-tile-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    background: linear-gradient(150deg, #2a2a2a 0%, #101010 100%);
  }

  .gsx-tile-label {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 2.5rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  }

  .gsx-tile-name {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
  }

  .gsx-tile-cue {
    font-size: 0.85rem;
    color: var(--gsx-muted);
    white-space: nowrap;
  }

  .gsx-tile[aria-current='true'] .gsx-tile-cue {
    color: #fff;
  }

  /* ── Shell ────────────────────────────────────────────────────────── */

  .gsx-shell {
    border: 1px solid var(--gsx-line);
    border-radius: var(--gsx-radius-lg);
    background: var(--gsx-surface);
    padding: 1.1rem;
  }

  .gsx-empty {
    margin: 0;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--gsx-muted);
    font-size: 1.1rem;
  }

  .gsx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .gsx-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.03em;
  }

  .gsx-tabs {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--gsx-line);
    border-radius: 1.5rem;
  }

  .gsx-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--gsx-muted);
    font: inherit;
    font-size: 1rem;
    padding: 0.55rem 1.4rem;
    border-radius: 1.25rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .gsx-tab:hover {
    color: #fff;
  }

  .gsx-tab[aria-selected='true'] {
    background: #fff;
    color: #000;
  }

  .gsx-tab:focus-visible {
    outline: 2px solid var(--gsx-line-strong);
    outline-offset: 2px;
  }

  .gsx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
  }

  .gsx-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gsx-line);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    padding: 0.75rem 1.6rem;
    border-radius: var(--gsx-radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .gsx-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .gsx-btn:focus-visible {
    outline: 2px solid var(--gsx-line-strong);
    outline-offset: 2px;
  }

  .gsx-btn--primary {
    background: #fff;
    color: #000;
    border-color: #fff;
  }

  .gsx-btn--primary:hover {
    background: rgba(255, 255, 255, 0.86);
  }

  .gsx-hint {
    flex-basis: 100%;
    margin: -0.25rem 0 0;
    font-size: 0.95rem;
    color: var(--gsx-muted);
  }

  /* ── Body: frame beside the info panel ───────────────────────────── */

  .gsx-body {
    display: grid;
    gap: 1.1rem;
    align-items: start;
  }

  /* The games switch to their own mobile layout once the iframe drops below
     768px wide. Side by side, the panel costs the frame ~340px, which leaves
     only ~20px of headroom at 1280 but ~80px at 1360 — so that is where the
     split starts. Narrower screens stack, and the demo keeps full width. */
  @media (min-width: 1360px) {
    .gsx-body {
      grid-template-columns: minmax(0, 1fr) 21rem;
    }

    /* The customizer is a dense, form-heavy app and its own banner already
       carries this copy, so it takes the full width instead. */
    .gsx-body--wide {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .gsx-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--gsx-radius-md);
    background: #000;
    aspect-ratio: 16 / 10;
    min-height: 26rem;
    max-height: 80vh;
  }

  /* The customizer is a long form-heavy app; give it room to breathe. */
  .gsx-frame--customize {
    aspect-ratio: auto;
    height: 80vh;
    min-height: 34rem;
  }

  .gsx-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .gsx-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gsx-muted);
    font-size: 1rem;
    pointer-events: none;
  }

  .gsx-frame.is-ready .gsx-loading {
    display: none;
  }

  /* ── Info panel ───────────────────────────────────────────────────── */

  .gsx-info {
    border: 1px solid var(--gsx-line);
    border-radius: var(--gsx-radius-md);
    background: rgba(255, 255, 255, 0.02);
    padding: 1.2rem 1.3rem 1.35rem;
  }

  .gsx-eyebrow {
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gsx-muted);
  }

  .gsx-copy p {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
  }

  /* The lead sentence is the hook, so it carries more weight than the detail. */
  .gsx-copy p:first-child {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.95);
  }

  .gsx-copy p:last-child {
    margin-bottom: 0;
  }

  .gsx-specs {
    margin: 1.15rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--gsx-line);
    display: grid;
    gap: 0.65rem;
  }

  .gsx-spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
  }

  .gsx-spec dt {
    color: var(--gsx-muted);
    white-space: nowrap;
  }

  .gsx-spec dd {
    margin: 0;
    text-align: right;
  }

  .gsx-noscript {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--gsx-muted);
  }

  /* ── Mobile ──────────────────────────────────────────────────────────
     A phone has barely more width than the games themselves need, so the
     section stops nesting padding here: the shell breaks out of the page
     gutter and the demo runs edge to edge. Inside the padded layout the
     frame was 311px on a 390px phone, and the games start clipping their
     controls below ~340px — full bleed hands the game the same viewport it
     would get if the operator had opened it on their phone. */
  @media (max-width: 767px) {
    #games-experience {
      /* Matches the site's page gutter, so the shell's text stays in line
         with the copy above the section. */
      --gsx-gutter: 1.25rem;

      /* What the title row, the tabs and their gaps measure above the demo, so
         the frame can claim the rest of the screen exactly. Re-measure it if
         either of those rows changes size. */
      --gsx-chrome-h: 7rem;
    }

    .gsx-group {
      margin-bottom: 1.75rem;
    }

    .gsx-group-title {
      font-size: 1.15rem;
    }

    .gsx-group-note {
      font-size: 0.9rem;
    }

    .gsx-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Two tiles to a row leaves no space for the name and the cue side by
       side, so they stack instead of colliding. */
    .gsx-tile-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
      padding: 2.25rem 0.85rem 0.8rem;
    }

    .gsx-shell {
      /* Cancels the page gutter without hard-coding what it is. */
      margin-inline: calc(50% - 50vw);
      border-inline: 0;
      border-radius: 0;
      padding: 0.85rem var(--gsx-gutter) 1.2rem;

      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem;
    }

    /* The shell takes over the ordering so the demo sits right under the
       tabs and every button moves below it. Stacked in source order the
       chrome came to 251px, which pushed the game off a phone screen. */
    .gsx-head,
    .gsx-body {
      display: contents;
    }

    .gsx-empty,
    .gsx-tabs,
    .gsx-actions,
    .gsx-hint,
    .gsx-info {
      flex: 1 0 100%;
    }

    .gsx-title {
      order: 1;
      margin-right: auto;
      font-size: 1.5rem;
    }

    .gsx-tabs {
      order: 3;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .gsx-frame {
      order: 4;
      /* 100% is the shell's padded width, so the gutter is added back on
         both sides to reach the screen edges. */
      flex: 0 0 auto;
      width: calc(100% + 2 * var(--gsx-gutter));
      margin-inline: calc(-1 * var(--gsx-gutter));
      border-radius: 0;
      aspect-ratio: auto;
      /* Whatever the screen has left once the chrome above it is paid for, so
         the game lays out into the same stage it would get as its own tab.
         svh rather than vh: a collapsing URL bar must not be able to make the
         frame taller than what is actually on screen. */
      height: calc(100vh - var(--gsx-chrome-h));
      height: calc(100svh - var(--gsx-chrome-h));
      min-height: 24rem;
      max-height: none;
    }

    .gsx-actions {
      order: 5;
      margin-left: 0;
    }

    .gsx-hint {
      order: 6;
      margin-top: 0;
    }

    .gsx-info {
      order: 7;
    }

    .gsx-actions .gsx-btn {
      flex: 1 1 auto;
    }

    /* Tighter than desktop so the demo link and Copy share one row. */
    .gsx-btn {
      padding: 0.7rem 1.05rem;
    }

    /* Rides the title row, small enough not to set its height. Declared after
       .gsx-btn so the compact padding wins. */
    .gsx-close {
      order: 2;
      flex: 0 0 auto;
      padding: 0.5rem 0.95rem;
      font-size: 0.9rem;
    }

    .gsx-tab {
      padding: 0.5rem 1rem;
    }

    /* The customizer is a long form rather than a canvas, so it trades the
       chrome budget for more controls per scroll. */
    .gsx-frame--customize {
      height: 88vh;
      height: 88svh;
      min-height: 32rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gsx-tile {
      transition: none;
    }

    .gsx-tile:hover,
    .gsx-tile:focus-visible {
      transform: none;
    }
  }