/* s145 WS3 · home, shared chrome (nav, logo, consent, footer, offer status) and hub pages. Lab only (/testqq/), 31/10/2026.
   Port of design/home-final/merge-test.css (tested with merge-test.js; tags [H-n] = design/home-final.md), moved from the
   sub-layer gbl.s145 into the top-level layer s145. index.php prints "@layer s145, gbl, gbu;" before every stylesheet, so an
   !important declaration here beats Day mode and humanize (gbl), UI v2 (gbu), every unlayered rule and inline styles; a
   normal declaration here loses to all of them.
   Two parts (fix round 3, the Room's main thread): PART A holds every rule the desktop Room (home and /free-games/, body
   .gamingbroject-app) needs, PART B every rule for the other pages. tx-home.php prints PART A inline on the desktop Room
   and a link to this whole file on every other page; the Room then matches about a third of the rules on each of its
   frequent restyles (TBT at 4x CPU: +118 ms median against platform only with the whole file, +24 ms with PART A,
   data/fix3/t2). On live this is the gb-ui home and page bundle split. The marker comment between the parts is read by
   tx-home.php; keep it on its own line.
   Owned elsewhere and left out: tokens, red fills, small-text AA, focus ring and skip link, the logo stop under reduced
   motion, solid bars, the black ground and the Radar ended cards (WS1, global.css); article offer blocks (WS4); archive
   titles (WS5); game hubs (WS6). Shared tokens are read with a fallback; only --s145-chip* are defined here.
   Decision flags (plan 3.7) are zero-specificity guards: :where(html:not(.s145-off-<id>)) for h6, h13 and h16 (on by
   default), :where(html.s145-on-<id>) for phoneonce, poweron, navcolors, h15 and h21 (off by default); the Room rail
   needs html.s145-rail.
   Phone home (body.gb-lite-home): type and colour only. No line of text is hidden there unless the rule sits under
   phoneonce; bigger touch areas come from a positioned ::after; image boxes keep their size.
   Hidden-safe: every non-none display !important carries the guard :where(:not([hidden], .hz-hidden)) (no specificity),
   so nothing live code hides is shown again; no rule targets an element that live code hides with an inline display.
   Speed: the Room page restyles often (its animations write inline styles every frame), so no selector reads the style
   attribute, every rule ends in a class, id or tag (a selector list is written out in full, never as :is() or :where()
   in the last compound), and :has() only looks at direct children.
   Halloween (html.gb-hw), the Room art and the arcade are not touched. Motion sits inside prefers-reduced-motion:
   no-preference. No closing style tag and no document-head tag name here. */

@layer s145 {

  /* ================= PART A: every page, the desktop Room included ================= */

  /* [T] Area-private tokens (home only): the filled chip and the equal consent buttons. Set on html, not :root: the
     selector stats of a Room load (data/fix/selstats.json) showed ":root" as the costliest home.css selector (tried on
     about 9,900 restyles); "html" is matched only against the html element. Same cascade: the Day and black sets below
     are more specific. The Day set reads its attribute through :not(:not(...)) (the same specificity as
     html[data-gb-theme="light"]): the browser files a rule under its last attribute test, and every element then pays
     one lookup per attribute on every restyle; this was PART A's only such rule. */
  html {
    --s145-chip: #1a1420;
    --s145-chip-hover: #241c2c;
    --s145-chip-tx: #d6cfc7;
    --s145-chip-on: #f7f5fb;
    --s145-chip-on-tx: #07030c;
    --s145-chip-line: rgba(255, 255, 255, 0.16);
  }
  html:not(:not([data-gb-theme="light"])) {
    --s145-chip: #eceaf0;
    --s145-chip-hover: #e2dfe7;
    --s145-chip-tx: #2a2530;
    --s145-chip-on: #15121b;
    --s145-chip-on-tx: #ffffff;
    --s145-chip-line: #d3cdd9;
  }
  html.s145-black:not(.gb-hw):not([data-gb-theme="light"]) {
    --s145-chip: #171717;
    --s145-chip-hover: #222222;
  }

  /* ---------------- MUST ---------------- */

  /* [H5] Offer status said once, every page except the offer blocks inside articles (WS4). Pills: green live, amber not
     confirmed or coming, grey ended. No red "Expired". (The phone list's category label is in PART B.) */
  html body .gb-offer-pill:not(:is(.gb-offer-widget, .gb-free-claim-window, .gb-offer-banner) *):where(:not([hidden], .hz-hidden)) {
    display: inline-block !important;
  }
  html body .gb-offer-pill:not(:is(.gb-offer-widget, .gb-free-claim-window, .gb-offer-banner) *) {
    padding: 4px 8px !important;
    border-radius: var(--s145-r-s, 6px) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: 700 12px/1.15 Inter, system-ui, sans-serif !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    background: var(--s145-ok-fill, #3ccf7e) !important;
    color: var(--s145-ok-on, #06210f) !important;
  }
  html body .gb-offer-pill.is-upcoming:not(:is(.gb-offer-widget, .gb-free-claim-window, .gb-offer-banner) *),
  html body .gb-offer-pill.is-unknown:not(:is(.gb-offer-widget, .gb-free-claim-window, .gb-offer-banner) *) {
    background: var(--s145-wait-fill, #ffb536) !important;
    color: var(--s145-wait-on, #1a1100) !important;
  }
  html body .gb-offer-pill.is-ended:not(:is(.gb-offer-widget, .gb-free-claim-window, .gb-offer-banner) *) {
    background: var(--s145-end-fill, #2a2331) !important;
    color: var(--s145-end-on, #ded8e4) !important;
  }
  html body .article-card .gb-offer-pill { margin: 0 !important; }
  /* The desktop "Free Game" photo badge takes the state colour (platform line 90). */
  html body .card-badge.gb-offer-badge.is-active {
    background: var(--s145-ok-fill, #3ccf7e) !important;
    border-color: var(--s145-ok-fill, #3ccf7e) !important;
    color: var(--s145-ok-on, #06210f) !important;
    box-shadow: none !important;
  }
  html body .card-badge.gb-offer-badge.is-ended {
    background: var(--s145-end-fill, #2a2331) !important;
    border-color: var(--s145-end-fill, #2a2331) !important;
    color: var(--s145-end-on, #ded8e4) !important;
    box-shadow: none !important;
  }
  html body .card-badge.gb-offer-badge.is-unknown,
  html body .card-badge.gb-offer-badge.is-upcoming {
    background: var(--s145-wait-fill, #ffb536) !important;
    border-color: var(--s145-wait-fill, #ffb536) !important;
    color: var(--s145-wait-on, #1a1100) !important;
    box-shadow: none !important;
  }

  /* The status box on cards: a 1px tinted box instead of the 3px left border, colours by state in both themes. */
  html body :is(.article-card, .gl-card) .gb-offer-widget:where(:not([hidden], .hz-hidden)) {
    display: inline-block !important;
  }
  html body :is(.article-card, .gl-card) .gb-offer-widget {
    width: auto !important;
    max-width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid var(--s145-ok-line, rgba(84, 229, 162, 0.34)) !important;
    border-radius: var(--s145-r-s, 6px) !important;
    background: var(--s145-ok-bg, rgba(84, 229, 162, 0.07)) !important;
    box-shadow: none !important;
    color: var(--s145-ink-2, #c9c3d1) !important;
    font: 500 12.5px/1.35 Inter, system-ui, sans-serif !important;
  }
  html body :is(.article-card, .gl-card) .gb-offer-widget-top:where(:not([hidden], .hz-hidden)) {
    display: inline !important;
  }
  html body :is(.article-card, .gl-card) .gb-offer-widget-top { white-space: nowrap !important; }
  html body :is(.article-card, .gl-card) .gb-offer-status-dot:where(:not([hidden], .hz-hidden)) {
    display: inline-block !important;
  }
  html body :is(.article-card, .gl-card) .gb-offer-status-dot {
    width: 7px !important;
    height: 7px !important;
    margin: 0 6px 1px 0 !important;
    border-radius: 50% !important;
    vertical-align: middle !important;
    background: var(--s145-ok, #54e5a2) !important;
    box-shadow: none !important;
  }
  html body :is(.article-card, .gl-card) .gb-offer-head { color: var(--s145-ok, #54e5a2) !important; font: 700 12.5px/1.35 Inter, system-ui, sans-serif !important; }
  html body :is(.article-card, .gl-card) .gb-offer-rel { color: var(--s145-ok, #54e5a2) !important; font: 500 12.5px/1.35 Inter, system-ui, sans-serif !important; }
  html body :is(.article-card, .gl-card) .gb-offer-when { color: var(--s145-ink-2, #c9c3d1) !important; font: 500 12px/1.35 Inter, system-ui, sans-serif !important; }
  html body :is(.article-card, .gl-card) .gb-offer-type { margin-top: 2px !important; color: var(--s145-ink-2, #c9c3d1) !important; font: 500 12px/1.35 Inter, system-ui, sans-serif !important; }
  html body :is(.article-card, .gl-card) .gb-offer-type:where(:not([hidden], .hz-hidden)) { display: block !important; }
  /* Desktop cards: one line, "Free until Nov 2 · Ends in 3 days", then the offer type. The date range moves into the
     box's title tooltip (home.js). */
  html body .article-card .gb-offer-rel:where(:not([hidden], .hz-hidden)) { display: inline !important; }
  html body .article-card .gb-offer-rel { white-space: nowrap !important; }
  html body .article-card .gb-offer-rel::before { content: "\00a0\00b7\00a0"; color: var(--s145-ink-2, #c9c3d1); }
  html body .article-card .gb-offer-when { display: none !important; }
  /* States */
  html body :is(.article-card, .gl-card) .gb-offer-widget:is(.is-upcoming, .is-unknown) { border-color: var(--s145-wait-line, rgba(255, 181, 54, 0.34)) !important; background: var(--s145-wait-bg, rgba(255, 181, 54, 0.07)) !important; }
  html body :is(.article-card, .gl-card) .gb-offer-widget:is(.is-upcoming, .is-unknown) .gb-offer-head,
  html body :is(.article-card, .gl-card) .gb-offer-widget:is(.is-upcoming, .is-unknown) .gb-offer-rel { color: var(--s145-wait, #ffcf7a) !important; }
  html body :is(.article-card, .gl-card) .gb-offer-widget:is(.is-upcoming, .is-unknown) .gb-offer-status-dot { background: var(--s145-wait, #ffcf7a) !important; }
  html body :is(.article-card, .gl-card) .gb-offer-widget.is-ended { border-color: var(--s145-end-line, rgba(255, 255, 255, 0.14)) !important; background: var(--s145-end-bg, rgba(255, 255, 255, 0.035)) !important; }
  html body :is(.article-card, .gl-card) .gb-offer-widget.is-ended .gb-offer-head,
  html body :is(.article-card, .gl-card) .gb-offer-widget.is-ended .gb-offer-rel { color: var(--s145-end, #b8afc2) !important; }
  html body :is(.article-card, .gl-card) .gb-offer-widget.is-ended .gb-offer-status-dot { background: var(--s145-end, #b8afc2) !important; }
  /* Desktop card meta row: store label, then the box under it */
  html body .card-meta.gb-offer-card-meta:where(:not([hidden], .hz-hidden)) { display: grid !important; }
  html body .card-meta.gb-offer-card-meta {
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
  html body .card-meta.gb-offer-card-meta > .gb-offer-widget { grid-column: 1 / -1 !important; justify-self: start !important; }
  html body .card-meta.gb-offer-card-meta > .gb-offer-store-label { font: 600 12px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0.01em !important; color: var(--s145-ink-2, #c9c3d1) !important; }

  /* [H7] Headings that lead. Eyebrows that only repeat the title or the brand go on desktop and community pages;
     kickers with links stay. Never archives, search, single posts (WS4, WS5) or game hubs (WS6). The Room's two here;
     the community and hub eyebrows and the hub titles are in PART B. */
  html body:not(.archive):not(.search):not(.single-post):not(.tax-gb_game) .section-top .section-kicker,
  html body:not(.archive):not(.search):not(.single-post):not(.tax-gb_game) #contentHub #sectionKicker {
    display: none !important;
  }
  html body article.gbrw .gbrw-title,
  html body article.gbrw .gbrw-title a { color: var(--s145-ink, #f7f5fb) !important; }
  @media (min-width: 901px) {
    html body article.gbrw .gbrw-stamp { display: none !important; }  /* the eyebrow beside the title says it, with the category */
  }
  html body:not(.archive):not(.search) .section-intro,
  html body:not(.archive):not(.search) .gbrw-sum,
  html body:not(.archive):not(.search) .card-summary { text-wrap: pretty; }
  html body #gbDesktopRoomHide { font-family: Inter, system-ui, sans-serif !important; }

  /* [H3] The hidden-room summary heading becomes a paragraph (home.js) that keeps the level-1 heading role (the Room's
     h1 is hidden with the Room) and the live look: the declarations of live's ".gb-desktop-room-summary h1", with the
     heading face humanize gives it. Live's colour is #fff in both themes. */
  html body .gb-desktop-room-summary .s145-room-summary-title {
    max-width: 720px !important;
    margin: 0 !important;
    color: #fff !important;
    font: 900 clamp(28px, 3.1vw, 48px)/1.08 "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
    text-wrap: balance;
  }

  /* [H6] One consent banner, out of the reading path. The copy is unified by tx-home.php (always on); the layout and
     the equal buttons are decision h6. Here the Room's banner (#consentBanner); the gb-ui banner of every other page
     (#gbConsentBanner) is in PART B with the same values. While a banner is open, home.js keeps keyboard focus clear of
     it (scroll-padding-bottom on html, padding-bottom on body: WCAG 2.4.11). */
  /* Reject and Accept are identical: one neutral fill, border, size and weight. Settings is an underlined link. */
  :where(html:not(.s145-off-h6)) body #consentBanner .consent-btn.reject,
  :where(html:not(.s145-off-h6)) body #consentBanner .consent-btn.accept {
    background: var(--s145-chip, #1a1420) !important;
    background-image: none !important;
    border: 1px solid var(--s145-chip-line, rgba(255, 255, 255, 0.16)) !important;
    color: var(--s145-ink, #f7f5fb) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  @media (hover: hover) and (pointer: fine) {
    :where(html:not(.s145-off-h6)) body #consentBanner .consent-btn.reject:hover,
    :where(html:not(.s145-off-h6)) body #consentBanner .consent-btn.accept:hover {
      background: var(--s145-chip-hover, #241c2c) !important;
      border-color: var(--s145-chip-line, rgba(255, 255, 255, 0.16)) !important;
      color: var(--s145-ink, #f7f5fb) !important;
    }
  }
  :where(html:not(.s145-off-h6)) body #consentBanner .consent-btn.manage {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--s145-ink-2, #c9c3d1) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
  }
  /* From 901px: a card at the bottom right, out of the Room's MORE BELOW cue and the NEWS title. It is 420px wide from
     1024px; below that it narrows so its left edge stays 76px right of the centred cue (358px at 901, 388px at 960). */
  @media (min-width: 901px) {
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner.consent-banner:where(:not([hidden], .hz-hidden)) {
      display: grid !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner.consent-banner {
      left: auto !important;
      right: 16px !important;
      bottom: 16px !important;
      top: auto !important;
      transform: none !important;
      translate: none !important;
      width: min(420px, calc(50vw - 92px)) !important;
      max-width: none !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important;
      padding: 16px !important;
      border-radius: var(--s145-r-l, 14px) !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner .consent-actions:where(:not([hidden], .hz-hidden)) {
      display: grid !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner .consent-actions {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      margin: 0 !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner .consent-actions .consent-btn {
      grid-column: auto !important;
      grid-row: 1 !important;
      flex: none !important;
      min-height: 44px !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 12px !important;
      border-radius: var(--s145-r-s, 6px) !important;
      font: 700 13px/1 Inter, system-ui, sans-serif !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner .consent-btn.manage {
      width: auto !important;
      padding: 0 4px !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner #consentTitle {
      margin: 0 0 4px !important;
      font: 700 15px/1.3 Inter, system-ui, sans-serif !important;
      letter-spacing: 0 !important;
      color: var(--s145-ink, #f7f5fb) !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner #consentDescription:where(:not([hidden], .hz-hidden)) {
      display: block !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #consentBanner #consentDescription {
      margin: 0 !important;
      max-width: none !important;
      font: 400 13px/1.45 Inter, system-ui, sans-serif !important;
      color: var(--s145-ink-2, #c9c3d1) !important;
      -webkit-line-clamp: unset !important;
      overflow: visible !important;
    }
    /* The "Privacy choices saved." toast appears in the same corner. */
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #toast.toast { left: auto !important; right: 16px !important; bottom: 16px !important; transform: none !important; translate: none !important; }
  }
  /* The Room headline rail (?s145rail=1, 1101px and up): the card sits above the rail, so its headlines and the MORE
     BELOW cue stay free. home.js writes on the banner how far the rail's top is from the screen bottom (--s145-rail-lift). */
  @media (min-width: 1101px) {
    :where(html:not(.s145-off-h6).s145-rail) body.gamingbroject-app #consentBanner.consent-banner { bottom: var(--s145-rail-lift, 16px) !important; }
  }
  /* Narrow screens: the whole wording shows (live cut it after two lines, mid-sentence). */
  @media (max-width: 900px) {
    :where(html:not(.s145-off-h6)) body #consentBanner .consent-copy,
    :where(html:not(.s145-off-h6)) body #consentBanner #consentDescription {
      -webkit-line-clamp: unset !important;
      overflow: visible !important;
    }
  }

  /* [H8] Cards show who and when. The page already lays every desktop card body out as a flex column (computed with
     platform only at 901 to 1920px, 30/10), so only the byline is set here: no rule on .card-body, which the Room
     restyles many times while it loads. (The 14px corner of the community cards is in PART B.) */
  @media (min-width: 901px) {
    html body #cards article.article-card .gb-card-byline:where(:not([hidden], .hz-hidden)) { display: flex !important; }
    html body #cards article.article-card .gb-card-byline { order: 99 !important; margin-top: auto !important; }
  }

  /* [H9] 44px touch targets on touch screens, the Room's own controls (a touch screen that gets the Room, such as a
     tablet); every other page's are in PART B. */
  @media (pointer: coarse) {
    html body:not(.gb-lite-home) .v31-subcat-btn,
    html body:not(.gb-lite-home) .switch-btn { min-height: 44px !important; }
    html body:not(.gb-lite-home) .gbc-head-acc { min-width: 44px !important; min-height: 44px !important; }
  }

  /* [H12] PK monogram base style, also without humanize (?gbhuman=0); the same values as gb-humanize.css. */
  html:not(.gb-human) body .gb-card-byline .hz-mono,
  html:not(.gb-human) body .b-faces .hz-mono {
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 50% !important;
    background: #2b2420;
    color: #f3e9df;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    line-height: 1;
  }
  html:not(.gb-human)[data-gb-theme="light"] body .gb-card-byline .hz-mono,
  html:not(.gb-human)[data-gb-theme="light"] body .b-faces .hz-mono { background: #efe4d8; color: #4a3a2c; }

  /* [H13] The logo is a sign that is on: the s121 infinite pulse stops on every page (decision h13); the stop for
     reduced motion is WS1's. While Halloween is on (html.gb-hw) s145 sets no logo animation at all, so every header logo
     computes what ?gb145=0 computes: the flicker where Halloween's own rule wins, the s121 pulse on the Room logo (it
     beats the flicker there by specificity, as on live), and Halloween's own stop under reduced motion. The steady logo
     applies again from 6/11. The Room logo here, the other headers' logos in PART B. */
  :where(html:not(.s145-off-h13)):not(.gb-hw) body #homeBtn.logo-btn img { animation: none !important; }

  /* ---------------- STRETCH ---------------- */

  /* [H17] Chips filled, the chosen one in ink (the look only; the press scale is WS1's). The Room's sub-category
     buttons here; the /deals/ buttons and the archive and search chips in PART B, with the same values. */
  html body button.v31-subcat-btn {
    background: var(--s145-chip, #1a1420) !important;
    border-color: transparent !important;
    color: var(--s145-chip-tx, #d6cfc7) !important;
    box-shadow: none !important;
  }
  @media (hover: hover) and (pointer: fine) {
    html body button.v31-subcat-btn:hover { background: var(--s145-chip-hover, #241c2c) !important; }
  }
  html body button.v31-subcat-btn.active,
  html body button.v31-subcat-btn[aria-pressed="true"],
  html body button.v31-subcat-btn[aria-selected="true"] {
    background: var(--s145-chip-on, #f7f5fb) !important;
    color: var(--s145-chip-on-tx, #07030c) !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    html body button.v31-subcat-btn { transition: background-color 150ms ease, color 150ms ease; }
  }

  /* [H14] Nav as the Room's signs: the heading face in caps, one flat 3px underline in the brand red (pumpkin with
     Halloween through the tokens). Section colours only with navcolors. The Room header here; the newsroom header, the
     phone home strip and the header icon corners in PART B. */
  html body header.site-header #mainNav a {
    font: 700 16px/1 "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
  html body header.site-header #mainNav a::after {
    background: var(--s145-red, #ff2948) !important;
    box-shadow: none !important;
    height: 3px !important;
    border-radius: 0 !important;
  }
  :where(html.s145-on-navcolors) body header.site-header #mainNav a:not(.s145-never)::after {
    background: var(--tab-color, var(--gb-red, var(--s145-red, #ff2948))) !important;
  }
  /* Day value: the neon sign colours are about 1.4:1 on the white bar, so Day mode mixes each one 60% with black
     (3.5:1 or more for every section colour). */
  :where(html.s145-on-navcolors)[data-gb-theme="light"] body header.site-header #mainNav a:not(.s145-never)::after {
    background: color-mix(in srgb, var(--tab-color, var(--s145-red, #d1123a)) 60%, #000) !important;
  }

  /* [H19] Room headline rail (desktop home), built by home.js only under html.s145-rail. Absolutely placed: no shift.
     Every rule ends in a class home.js gives the rail's own nodes, so no rule here is tried on the Room's links,
     list items or pictures while the rail is off. */
  html body #home .s145-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 34px 72px 14px;
    background: linear-gradient(to top, rgba(5, 2, 8, 0.94) 0%, rgba(5, 2, 8, 0.82) 55%, rgba(5, 2, 8, 0) 100%);
    color: #f7f5fb;
    pointer-events: none;
  }
  html body #home .s145-rail-label,
  html body #home .s145-rail-list,
  html body #home .s145-rail-end { pointer-events: auto; }
  html[data-gb-theme="light"] body #home .s145-rail { bottom: 20px; }
  html body #home .s145-rail-label { display: inline-flex; align-items: center; gap: 8px; color: #f7f5fb; font: 700 20px/1 "GB Barlow Condensed", Inter, system-ui, sans-serif; letter-spacing: 0; }
  html body #home .s145-rail-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #ff2948; }
  html body #home .s145-rail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
  html body #home .s145-rail-list > .s145-rail-item { min-width: 0; padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
  html body #home .s145-rail-list > .s145-rail-item:first-child { border-left: 0; padding-left: 0; }
  html body #home .s145-rail-list .s145-rail-link { display: grid; gap: 4px; color: #f7f5fb !important; text-decoration: none !important; }
  html body #home .s145-rail-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 14.5px/1.32 Inter, system-ui, sans-serif; text-wrap: pretty; }
  html body #home .s145-rail-meta { color: #c9c3d1; font: 500 12px/1.2 Inter, system-ui, sans-serif; }
  @media (hover: hover) and (pointer: fine) {
    html body #home .s145-rail-list .s145-rail-link:hover .s145-rail-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ff2948; }
  }
  html body #home .s145-rail .hz-cue { position: static !important; transform: none !important; padding: 6px 4px !important; background: none !important; flex-direction: row !important; gap: 8px !important; }
  html body #home .s145-rail .s145-rail-cue-svg { width: 26px !important; height: 26px !important; }
  html body #home .s145-rail .hz-cue.is-away { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
  html body #home.gb-desktop-room-collapsed .s145-rail { display: none !important; }
  @media (max-width: 1100px) { html body #home .s145-rail { display: none !important; } }
  @media (prefers-reduced-motion: no-preference) {
    html body #home .s145-rail { animation: s145-rail-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  }
  @keyframes s145-rail-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* [H13] Power-on (decision poweron, off by default): once per tab session, dark only, never with Halloween or reduced
     motion. home.js marks the logo images for 900ms. The Room logo here, the other logos in PART B. */
  @media (prefers-reduced-motion: no-preference) {
    :where(html.s145-on-poweron):not(.gb-hw):not([data-gb-theme="light"]) body #homeBtn.logo-btn img.s145-poweron {
      animation: b-neon-on 700ms linear 1 both !important;
    }
  }
  @keyframes b-neon-on {
    0% { opacity: 0.15; }
    14% { opacity: 1; }
    22% { opacity: 0.3; }
    34% { opacity: 1; }
    48% { opacity: 0.55; }
    60%, 100% { opacity: 1; }
  }

  /* [H15] Footer sign-off (decision h15, off by default): the faces named in the footer's own "Written by" sentence, the
     sentence itself, and the pixel ship as Back to top. Markup from home.js, with its own classes, which every rule
     here ends in. */
  html body .b-signoff:where(:not([hidden], .hz-hidden)) { display: flex !important; }
  html body .b-signoff {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px 32px !important;
    padding: 0 !important;
    margin: 0 0 56px !important;
    border: 0 !important;
  }
  html body a.b-signoff-people:where(:not([hidden], .hz-hidden)) { display: flex !important; }
  html body a.b-signoff-people { align-items: center !important; gap: 18px !important; color: var(--s145-ink, #f7f5fb) !important; text-decoration: none !important; }
  html body .b-faces:where(:not([hidden], .hz-hidden)) { display: flex !important; }
  html body .b-faces { flex: none !important; }
  html body .b-faces > .b-face:where(:not([hidden], .hz-hidden)),
  html body .b-faces > .hz-mono:where(:not([hidden], .hz-hidden)) { display: inline-grid !important; }
  html body .b-faces > .b-face,
  html body .b-faces > .hz-mono {
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid var(--s145-bar, #07030c) !important;
    margin: 0 0 0 -12px !important;
    filter: none !important;
    box-shadow: none !important;
    font: 700 16px/1 Inter, system-ui, sans-serif !important;
  }
  html body .b-faces > .b-face:first-child,
  html body .b-faces > .hz-mono:first-child { margin-left: 0 !important; }
  html body p.b-signoff-line {
    margin: 0 !important;
    font: 700 clamp(24px, 1rem + 1.1vw, 32px)/1.05 "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    color: var(--s145-ink, #f7f5fb) !important;
  }
  html body p.b-signoff-line .b-signoff-more:where(:not([hidden], .hz-hidden)) { display: block !important; }
  html body p.b-signoff-line .b-signoff-more { margin-top: 6px !important; font: 500 15px/1.4 Inter, system-ui, sans-serif !important; color: var(--s145-ink-2, #c9c3d1) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
  html body button.b-top:where(:not([hidden], .hz-hidden)) { display: inline-flex !important; }
  html body button.b-top {
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 0 16px 0 12px !important;
    border: 0 !important;
    border-radius: var(--s145-r-s, 6px) !important;
    background: var(--s145-chip, #1a1420) !important;
    color: var(--s145-ink, #f7f5fb) !important;
    font: 600 14px/1 Inter, system-ui, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html body button.b-top .b-ship { width: 26px !important; height: 23px !important; flex: none !important; }
  html body button.b-top.is-launching .b-ship { transform: translateY(-16px) !important; opacity: 0 !important; }
  @media (prefers-reduced-motion: no-preference) {
    html body button.b-top .b-ship { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 220ms ease; }
  }
  @media (hover: hover) and (pointer: fine) {
    html body button.b-top:hover { background: var(--s145-chip-hover, #241c2c) !important; }
    html body button.b-top:hover .b-ship { transform: translateY(-3px) !important; }
  }
  @media (max-width: 600px) {
    html body a.b-signoff-people { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html body button.b-top.is-launching .b-ship,
    html body button.b-top:hover .b-ship { transform: none !important; opacity: 1 !important; }
  }
  html body .gbu-footer-brand > p.b-trimmed { max-width: 34ch !important; }

  /* [H21] Room sign sub-labels readable at 1200px and up (decision h21, off by default). The sign art and glow stay.
     home.js marks the sub-labels (s145-sign-sub) only while the decision is on. */
  @media (min-width: 1200px) {
    :where(html.s145-on-h21) body #roomStage button.gbr-sign > small.s145-sign-sub { font-size: 9.5px !important; letter-spacing: 0.08em !important; }
  }
}
/* s145-home:room-end */
@layer s145 {

  /* ================= PART B: every page except the desktop Room ================= */

  /* [H5] Category label on the phone list = the desktop's quiet label (humanize: one quiet colour for labels). */
  html body.gb-lite-home .gl-badge {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--s145-warm, #c9b8a6) !important;
    font: 600 13px/1.2 Inter, system-ui, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }
  html body .gl-badge .gb-offer-pill,
  html body .gl-card .gb-offer-pill { margin: 0 !important; }
  html body .gl-meta > .gb-offer-widget { width: auto !important; }
  /* Phone list: every line stays (head, time, date range, offer type), restyled only. */
  html body .gl-card .gb-offer-rel:where(:not([hidden], .hz-hidden)),
  html body .gl-card .gb-offer-when:where(:not([hidden], .hz-hidden)) { display: block !important; }
  html body .gl-card .gb-offer-rel { margin-top: 1px !important; }

  /* [H7] Eyebrows that repeat the title on community pages. */
  html body:not(.archive):not(.search):not(.single-post):not(.tax-gb_game) p.gb-kicker:not(:has(a)):has(+ h1),
  html body:not(.archive):not(.search):not(.single-post):not(.tax-gb_game) p.gb-game-kicker,
  html body:not(.archive):not(.search):not(.single-post):not(.tax-gb_game) p.gb-top10-kicker,
  html body:not(.archive):not(.search):not(.single-post):not(.tax-gb_game) .gw-intro > .gw-eyebrow {
    display: none !important;
  }
  /* One hub title scale (60px at 1440, 40px on phones, tracking 0 on the condensed face). */
  html body:not(.archive):not(.search):not(.single-post) h1.gb-title,
  html body:not(.archive):not(.search):not(.single-post) .gw-intro > h1,
  html body:not(.archive):not(.search):not(.single-post) main#gb-main-content > h1,
  html body:not(.archive):not(.search):not(.single-post) article.gb-publisher-policy__article > header > h1 {
    font-size: var(--s145-title-hub, clamp(40px, 1.6rem + 2.4vw, 60px)) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
  }
  /* Phones: titles of the plain page template (/upcoming-games/, /games/, /free-games-this-week/ ...) can be long, so
     they step down with the viewport and balance their lines (two lines for "Upcoming Game Release Dates 2026 and 2027");
     the community titles (h1.gb-title: /deals/, /authors/) keep the 40px step. */
  @media (max-width: 600px) {
    html body:not(.archive):not(.search):not(.single-post) main#gb-main-content > h1 {
      font-size: clamp(30px, 8.4vw, 40px) !important;
      text-wrap: balance;
    }
  }
  /* /top10/ on the poster step */
  html body .gb-top10-intro > h1 {
    font-size: var(--s145-title-poster, clamp(56px, 7.4vw, 112px)) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  /* /games/: the H1 leads on the library's left edge; the H2 under it reads as the intro line. The inline colour of
     that H1 is a fixed near-white, so it takes the ink token (Day mode included). */
  html body:not(.archive):not(.single-post) main:has(> section.gb-game-library) > h1 { color: var(--s145-ink, #f7f5fb) !important; }
  @media (min-width: 901px) {
    html body:not(.archive):not(.single-post) main:has(> section.gb-game-library) > h1 {
      max-width: 1120px !important;
      margin: 56px auto 28px !important;
      padding: 0 20px !important;
      text-align: left !important;
    }
    html body:not(.archive):not(.single-post) main#gb-main-content > section.gb-game-library { padding-top: 36px !important; }
  }
  html body:not(.archive):not(.single-post) main#gb-main-content > section.gb-game-library > h2 {
    margin: 0 0 8px !important;
    font: 400 19px/1.5 Inter, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--s145-ink-2, #c9c3d1) !important;
  }
  /* Phone list section titles read as headings; a small square keeps the section colour. Type and colour only. */
  html body .gl-sec > h2:where(:not([hidden], .hz-hidden)) { display: flex !important; }
  html body .gl-sec > h2 {
    align-items: center !important;
    gap: 8px !important;
    color: var(--s145-ink, #f7f5fb) !important;
    font: 700 22px/1.1 "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html body .gl-sec > h2::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--a, var(--s145-red, #ff2948));
  }
  html body .gl-sec > h2 > a { color: inherit !important; text-decoration: none !important; }
  html body .gl-sec > h2 > a > span[aria-hidden="true"] { color: var(--s145-ink-2, #c9c3d1) !important; margin-left: 2px; }
  html body .gl-tx > strong { line-height: 1.3 !important; }
  html body:not(.archive):not(.search) .gl-intro,
  html body:not(.archive):not(.search) .gb-intro,
  html body:not(.archive):not(.search) .gw-description { text-wrap: pretty; }
  /* phoneonce (decision, off by default): the phone home says the offer state once and drops the repeated kickers. */
  :where(html.s145-on-phoneonce) body.gb-lite-home .gl-hero > .gl-kick,
  :where(html.s145-on-phoneonce) body.gb-lite-home .gbvp-room-kicker { display: none !important; }
  /* (every phone card with a box also carries a pill, so no :has() is needed: a :has() naming the pill classes made the
     desktop Room restyle about 10% slower, measured 30/10) */
  :where(html.s145-on-phoneonce) body.gb-lite-home .gl-tx > .gl-meta .gb-offer-type,
  :where(html.s145-on-phoneonce) body.gb-lite-home .gl-tx > .gl-meta .gb-offer-when { display: none !important; }
  :where(html.s145-on-phoneonce) body.gb-lite-home .gl-tx > .gl-meta .gb-offer-widget:is(.is-ended, .is-unknown, .is-upcoming) .gb-offer-widget-top { display: none !important; }
  :where(html.s145-on-phoneonce) body.gb-lite-home .gl-tx > .gl-meta .gb-offer-widget:is(.is-ended, .is-unknown, .is-upcoming) .gb-offer-rel { margin-top: 0 !important; }

  /* [H6] The gb-ui banner (#gbConsentBanner) of every other page: the same card as the Room's. */
  :where(html:not(.s145-off-h6)) body #gbConsentBanner .gb-consent-actions button[data-gb-consent="reject"],
  :where(html:not(.s145-off-h6)) body #gbConsentBanner .gb-consent-actions button[data-gb-consent="accept"] {
    background: var(--s145-chip, #1a1420) !important;
    background-image: none !important;
    border: 1px solid var(--s145-chip-line, rgba(255, 255, 255, 0.16)) !important;
    color: var(--s145-ink, #f7f5fb) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  @media (hover: hover) and (pointer: fine) {
    :where(html:not(.s145-off-h6)) body #gbConsentBanner .gb-consent-actions button[data-gb-consent="reject"]:hover,
    :where(html:not(.s145-off-h6)) body #gbConsentBanner .gb-consent-actions button[data-gb-consent="accept"]:hover {
      background: var(--s145-chip-hover, #241c2c) !important;
      border-color: var(--s145-chip-line, rgba(255, 255, 255, 0.16)) !important;
      color: var(--s145-ink, #f7f5fb) !important;
    }
  }
  :where(html:not(.s145-off-h6)) body #gbConsentBanner .gb-consent-actions button[data-gb-consent="manage"] {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--s145-ink-2, #c9c3d1) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
  }
  @media (min-width: 901px) {
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner.gb-consent:where(:not([hidden], .hz-hidden)) {
      display: grid !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner.gb-consent {
      left: auto !important;
      right: 16px !important;
      bottom: 16px !important;
      top: auto !important;
      transform: none !important;
      translate: none !important;
      width: min(420px, calc(50vw - 92px)) !important;
      max-width: none !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important;
      padding: 16px !important;
      border-radius: var(--s145-r-l, 14px) !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner .gb-consent-actions:where(:not([hidden], .hz-hidden)) {
      display: grid !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner .gb-consent-actions {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      margin: 0 !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner .gb-consent-actions button {
      grid-column: auto !important;
      grid-row: 1 !important;
      flex: none !important;
      min-height: 44px !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 12px !important;
      border-radius: var(--s145-r-s, 6px) !important;
      font: 700 13px/1 Inter, system-ui, sans-serif !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner .gb-consent-actions button[data-gb-consent="manage"] {
      width: auto !important;
      padding: 0 4px !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner #gbConsentTitle {
      margin: 0 0 4px !important;
      font: 700 15px/1.3 Inter, system-ui, sans-serif !important;
      letter-spacing: 0 !important;
      color: var(--s145-ink, #f7f5fb) !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner #gbConsentDescription:where(:not([hidden], .hz-hidden)) {
      display: block !important;
    }
    :where(html:not(.s145-off-h6)) body:not(.gb-lite-home) #gbConsentBanner #gbConsentDescription {
      margin: 0 !important;
      max-width: none !important;
      font: 400 13px/1.45 Inter, system-ui, sans-serif !important;
      color: var(--s145-ink-2, #c9c3d1) !important;
      -webkit-line-clamp: unset !important;
      overflow: visible !important;
    }
    /* /watch/ and /top10/: the fixed account icon lifts above the card while the banner is open (both banners are
       direct children of body). Only those two pages evaluate the :has(), so no other page pays for it. */
    :where(html:not(.s145-off-h6)) body:is(.gb-watch-page, .gb-top10-page):has(> #gbConsentBanner:not([hidden])) .gbc-head-acc.is-fixed,
    :where(html:not(.s145-off-h6)) body:is(.gb-watch-page, .gb-top10-page):has(> #consentBanner:not([hidden])) .gbc-head-acc.is-fixed { bottom: 212px !important; }
  }
  /* Articles from 1181px, where F3 puts Key facts in the right rail: the card sits at the bottom left, on the article
     column's left edge (50vw - 566px), never over the rail. While Halloween is on, a 220px floor keeps it clear of the
     music button (bottom left, x16 to 203). */
  @media (min-width: 1181px) {
    :where(html:not(.s145-off-h6)) body.single-post #gbConsentBanner.gb-consent {
      left: max(16px, calc(50vw - 566px)) !important;
      right: auto !important;
    }
    :where(html:not(.s145-off-h6).gb-hw) body.single-post #gbConsentBanner.gb-consent { left: max(220px, calc(50vw - 566px)) !important; }
  }
  /* Narrow screens: the whole wording shows (live cut it after two lines, mid-sentence), and the /top10/ account icon
     lifts above the full-width banner (8px + about 130px tall). */
  @media (max-width: 900px) {
    :where(html:not(.s145-off-h6)) body #gbConsentBanner > div:first-child,
    :where(html:not(.s145-off-h6)) body #gbConsentBanner #gbConsentDescription {
      -webkit-line-clamp: unset !important;
      overflow: visible !important;
    }
    :where(html:not(.s145-off-h6)) body:is(.gb-watch-page, .gb-top10-page):has(> #gbConsentBanner:not([hidden])) .gbc-head-acc.is-fixed,
    :where(html:not(.s145-off-h6)) body:is(.gb-watch-page, .gb-top10-page):has(> #consentBanner:not([hidden])) .gbc-head-acc.is-fixed { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; }
  }
  /* Phone home and phone /free-games/: the banner sits above the tab bar from the first paint (live moved it 68px when a
     script added the bar class). Part of decision h6: ?s145off=h6 brings back live's first paint too. */
  :where(html:not(.s145-off-h6)) body.gb-lite-home #gbConsentBanner.gb-consent {
    bottom: calc(var(--s145-tabbar-bottom, calc(10px + env(safe-area-inset-bottom, 0px))) + var(--s145-tabbar-h, 58.5px) + 8px) !important;
  }

  /* [H8] One card corner on the community and hub pages. */
  html body:not(.single-post) a.gb-game-card,
  html body:not(.single-post) a.gb-top10-card,
  html body:not(.single-post) a.gw-card,
  html body:not(.single-post) article.gb-publisher-policy__article { border-radius: var(--s145-r-l, 14px) !important; }
  html body:not(.single-post) ul.gb-cal-list > li { border-radius: var(--s145-r-s, 6px) !important; }

  /* [H9] 44px touch targets on touch screens. Other pages: min-height. Phone home: a positioned ::after only, the
     boxes keep their size (the hit area is at least 44px tall, centred on the control). */
  @media (pointer: coarse) {
    html body:not(.gb-lite-home) .gbc-btn-small,
    html body:not(.gb-lite-home) .gbc-follow,
    html body:not(.gb-lite-home) .gbc-chip,
    html body:not(.gb-lite-home) .gbc-chips > a,
    html body:not(.gb-lite-home) .gbc-chips > button,
    html body:not(.gb-lite-home) div.gbc-deal-tools .gbc-seg > button { min-height: 44px !important; }
    /* The newsroom logo link is 36px tall in a bar WS1 owns: its hit area grows through a ::after, the bar keeps its size. */
    html body header.gb-newsroom-header > a.gb-newsroom-brand { position: relative !important; }
    html body header.gb-newsroom-header > a.gb-newsroom-brand::after {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: min(0px, calc(50% - 22px)) !important;
      bottom: min(0px, calc(50% - 22px)) !important;
    }
    /* The review title link: it lost live's h2 hit area (humanize's ".gl-sec h2 a::after") when it became an h3, so
       it is positioned here and its ::after is 44px tall on the link itself. */
    html body.gb-lite-home nav.gl-nav > a,
    html body.gb-lite-home .gl-sec > h2 > a,
    html body.gb-lite-home article.gbrw .gbrw-title > a { position: relative !important; }
    html body.gb-lite-home nav.gl-nav > a::after,
    html body.gb-lite-home header.gl-top .gbc-lite-btn::after,
    html body.gb-lite-home .gl-sec > h2 > a::after,
    html body.gb-lite-home article.gbrw .gbrw-title > a::after {
      content: "" !important;
      position: absolute !important;
      top: min(0px, calc(50% - 22px)) !important;
      bottom: min(0px, calc(50% - 22px)) !important;
    }
    html body.gb-lite-home nav.gl-nav > a::after,
    html body.gb-lite-home header.gl-top .gbc-lite-btn::after {
      left: min(0px, calc(50% - 22px)) !important;
      right: min(0px, calc(50% - 22px)) !important;
    }
    html body.gb-lite-home .gl-sec > h2 > a::after { left: -8px !important; right: -8px !important; }
    html body.gb-lite-home article.gbrw .gbrw-title > a::after { left: -3px !important; right: -3px !important; }
    /* Hub pages. The newsroom strip links (whose ::after is the current-page underline) grow to 44px (the account icon
       is in PART A). Links stacked close together (the /top10/ footer, the /watch/ privacy link under its buttons) grow
       their own box, so no hit area reaches over a neighbour. Lone links (the /top10/ and /watch/ header links, the
       privacy summary, the calendar rows) get a centred positioned ::after of at least 44x44, so their boxes stay. The
       author story lists (two-line inline links, 8px apart) take the whole list item, plus half the gap above and below. */
    html body header.gb-newsroom-header .gb-newsroom-nav a { min-width: 44px !important; text-align: center !important; }
    html body footer.gb-top10-footer > a:where(:not([hidden], .hz-hidden)),
    html body details.gw-privacy > a:where(:not([hidden], .hz-hidden)) { display: inline-flex !important; }
    html body footer.gb-top10-footer > a,
    html body details.gw-privacy > a { align-items: center !important; min-height: 44px !important; }
    html body header.gb-top10-header > a:not(.gb-top10-brand),
    html body header.gw-header > a.gw-home,
    html body details.gw-privacy > summary,
    html body ul.gb-cal-list > li > a,
    html body ul.gbc-latest > li { position: relative !important; }
    html body header.gb-top10-header > a:not(.gb-top10-brand)::after,
    html body header.gw-header > a.gw-home::after,
    html body details.gw-privacy > summary::after,
    html body ul.gb-cal-list > li > a::after,
    html body ul.gbc-latest > li > a::after {
      content: "" !important;
      position: absolute !important;
      left: min(0px, calc(50% - 22px)) !important;
      right: min(0px, calc(50% - 22px)) !important;
      top: min(0px, calc(50% - 22px)) !important;
      bottom: min(0px, calc(50% - 22px)) !important;
    }
    html body ul.gbc-latest > li > a::after { left: 0 !important; right: 0 !important; top: -4px !important; bottom: -4px !important; }
  }

  /* [H10] Phone section strip: both edges fade; home.js centres the current section. The strip's ends are as wide as
     the fade (20px), so the first and the last link rest clear of it, and snapping and focus scrolling keep a link 24px
     inside. While a strip link has focus the fade and the snapping step aside: the ring is whole and home.js can place
     the focused link exactly (24px inside both edges). */
  @media (max-width: 900px) {
    html body header nav.gb-newsroom-nav {
      padding-left: 20px !important;
      padding-right: 20px !important;
      scroll-padding-inline: 24px !important;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
      mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
    }
    html body header nav.gb-newsroom-nav:focus-within {
      -webkit-mask-image: none !important;
      mask-image: none !important;
      scroll-snap-type: none !important;
    }
  }

  /* [H13] The steady logo on the other headers (the Room logo is in PART A, with the Halloween note). */
  :where(html:not(.s145-off-h13)):not(.gb-hw) body .gb-newsroom-brand img,
  :where(html:not(.s145-off-h13)):not(.gb-hw) body .gl-logo img,
  :where(html:not(.s145-off-h13)):not(.gb-hw) body img.gb-top10-logo { animation: none !important; }

  /* ---------------- STRETCH ---------------- */

  /* [H16] Phone list titles in the heading face (decision h16, on in the lab); section titles step up to keep the order. */
  :where(html:not(.s145-off-h16)) body.gb-lite-home .gl-card .gl-tx > strong {
    font-family: "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }
  :where(html:not(.s145-off-h16)) body.gb-lite-home .gl-card.is-big .gl-tx > strong { font-size: 28px !important; }
  :where(html:not(.s145-off-h16)) body.gb-lite-home .gl-sec > h2 { font-size: 26px !important; line-height: 1.05 !important; }

  /* [H18] /watch/ and /top10/ join the system: one logo, a content-width CTA, one-colour titles. */
  html body header.gw-header a.gw-brand > span:where(:not([hidden], .hz-hidden)) { display: block !important; }
  html body header.gw-header a.gw-brand > span {
    width: 153px !important;
    height: 46px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: url("/gala-page/wp-content/themes/gamingbroject-newsroom/assets/embedded-06-c1470a961526-s.webp") left center / contain no-repeat !important;
    filter: drop-shadow(0 0 5px rgba(255, 41, 72, 0.75)) drop-shadow(0 0 16px rgba(255, 41, 72, 0.35)) !important;
  }
  /* Day value: no glow on the white header, like the Day newsroom logo and the /top10/ logo. */
  html[data-gb-theme="light"] body header.gw-header a.gw-brand > span { filter: none !important; }
  html body span.gw-cta:where(:not([hidden], .hz-hidden)) { display: inline-flex !important; }
  html body span.gw-cta {
    align-self: flex-start !important;
    justify-self: start !important;
    width: auto !important;
    gap: 10px !important;
    padding: 12px 18px !important;
    border-radius: var(--s145-r-s, 6px) !important;
  }
  html body img.gb-top10-logo { width: 153px !important; height: auto !important; }
  html body .gb-top10-intro > h1 span,
  html body .gb-top10-intro > h1 em,
  html body .gb-top10-intro > h1 b,
  html body .gb-top10-intro > h1 strong { color: inherit !important; }
  html body a.gbvp-room-entry .gbvp-room-title em { color: inherit !important; font-style: normal !important; }

  /* [H17] Chips filled, the chosen one in ink: the /deals/ buttons, and the archive sub-category and search filter links
     (live printed those as outlined pills with a red or no chosen state), the same values as the Room's in PART A. The
     chosen link is the one live marks aria-current (or .is-active). */
  html body div.gbc-deal-tools button,
  html body a.gbc-chip,
  html body .gb-subcategory-nav > a,
  html body .gbc-filter > a {
    background: var(--s145-chip, #1a1420) !important;
    border-color: transparent !important;
    color: var(--s145-chip-tx, #d6cfc7) !important;
    box-shadow: none !important;
  }
  html body .gb-subcategory-nav > a,
  html body .gbc-filter > a { border-radius: var(--s145-r-s, 6px) !important; }
  @media (hover: hover) and (pointer: fine) {
    html body div.gbc-deal-tools button:hover,
    html body a.gbc-chip:hover,
    html body .gb-subcategory-nav > a:hover,
    html body .gbc-filter > a:hover { background: var(--s145-chip-hover, #241c2c) !important; }
  }
  html body div.gbc-deal-tools button[aria-pressed="true"],
  html body div.gbc-deal-tools button.is-active,
  html body .gb-subcategory-nav > a[aria-current],
  html body .gb-subcategory-nav > a.is-active,
  html body .gbc-filter > a[aria-current] {
    background: var(--s145-chip-on, #f7f5fb) !important;
    color: var(--s145-chip-on-tx, #07030c) !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    html body div.gbc-deal-tools button,
    html body a.gbc-chip,
    html body .gb-subcategory-nav > a,
    html body .gbc-filter > a { transition: background-color 150ms ease, color 150ms ease; }
  }

  /* [H14] The newsroom header's signs, and the phone home strip in the same type (one strip voice on every phone page;
     type only there: its line keeps live's 19.5px, so the strip and every box under it keep their size). */
  html body header.gb-newsroom-header .gb-newsroom-nav a {
    font: 700 16px/1 "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
  html body.gb-lite-home nav.gl-nav > a {
    font: 700 16px/19.5px "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
  html body header.gb-newsroom-header .gb-newsroom-nav a::after {
    background: var(--s145-red, #ff2948) !important;
    box-shadow: none !important;
    height: 3px !important;
    border-radius: 0 !important;
  }
  :where(html.s145-on-navcolors) body header.gb-newsroom-header .gb-newsroom-nav a:not(.s145-never)::after {
    background: var(--tab-color, var(--gb-red, var(--s145-red, #ff2948))) !important;
  }
  :where(html.s145-on-navcolors)[data-gb-theme="light"] body header.gb-newsroom-header .gb-newsroom-nav a:not(.s145-never)::after {
    background: color-mix(in srgb, var(--tab-color, var(--s145-red, #d1123a)) 60%, #000) !important;
  }
  /* Header icon buttons share one corner: the account icon was 10px (newsroom) and 12px (phone home) beside 6px. */
  html body header .gbu-icon-btn.gbc-head-acc,
  html body header .gbc-lite-btn.gbc-head-acc { border-radius: var(--s145-r-s, 6px) !important; }

  /* [H13] Power-on on the other logos (decision poweron; the Room logo and the keyframes are in PART A). */
  @media (prefers-reduced-motion: no-preference) {
    :where(html.s145-on-poweron):not(.gb-hw):not([data-gb-theme="light"]) body .gb-newsroom-brand img.s145-poweron,
    :where(html.s145-on-poweron):not(.gb-hw):not([data-gb-theme="light"]) body .gl-logo img.s145-poweron,
    :where(html.s145-on-poweron):not(.gb-hw):not([data-gb-theme="light"]) body img.gb-top10-logo.s145-poweron {
      animation: b-neon-on 700ms linear 1 both !important;
    }
  }
}