/* GamingBroject UI bundle (s130, 2026-10-22, owner OK): gb-polish.css + "@layer gbl, gbu;" + gb-ui-v2.css + gb-light.css, concatenated unchanged and in the same
 * order as the separate files, except that the Inter @font-face URLs point at this folder (self-hosted fonts). Built from
 * gb-polish.css a84442ca, room-gsap-lab.css ebafa900, gb-ui-v2.css 2bc67f3b, gb-light.css a88cc66c. Loaded by gb-ui-live-s130.php. */
/* GamingBroject TESTQQ only: site polish v2 (2026-10-20 s116; v1 2026-10-19 s115).
 * Built from the emil-design-eng, mobile-native and gsap-performance skills.
 * Everything is scoped to html.gbp, which only /testqq/ adds. */
:root {
  --gbp-ease-out: cubic-bezier(.23, 1, .32, 1);
  --gbp-ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* 1. Feels like an app on the phone (mobile-native). */
html.gbp { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; }
html.gbp :is(a, button, [role="button"], summary, label) { touch-action: manipulation; }
html.gbp :is(button, [role="button"], .read-btn, .switch-btn, .v31-subcat-btn, .nav-btn, .icon-btn, .card-badge, .channel-card) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  html.gbp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { font-size: 16px; }
}

/* 2. Press feedback on every control (emil-design-eng). The separate `scale` property
 *    stacks on top of each element's own transform, so nothing jumps. */
html.gbp :is(button, .read-btn, .switch-btn, .v31-subcat-btn, .channel-card, .nav-btn, .icon-btn, .gb-free-action a, .footer-legal button):not(:disabled):active {
  scale: .97;
}

/* 3. Text you can read: no more 6 to 9 px labels. */
html.gbp .card-badge { font-size: 11px !important; letter-spacing: .08em; padding: 6px 9px !important; }
html.gbp .card-meta { font-size: 11px !important; }
html.gbp .social-poster-origin { font-size: 9.5px !important; }
html.gbp .gb-card-byline-copy strong { font-size: 13px !important; }
html.gbp .gb-card-byline-copy small { font-size: 11.5px !important; }
html.gbp .read-btn {
  font-size: 11.5px !important; letter-spacing: .1em; padding: 12px 16px !important;
  min-height: 40px; display: inline-flex !important; align-items: center;
}
html.gbp :is(.gb-free-store span, .gb-free-facts span, .gb-free-action a, .gb-free-action small, .gb-offer-type) { font-size: 11px !important; }
html.gbp .channel-copy small { font-size: 10.5px !important; }
html.gbp .channel-copy span { font-size: 11.5px !important; }
html.gbp .v31-subcategory-head :is(span, strong) { font-size: 10.5px !important; }
html.gbp :is(.footer-contact span, .footer-legal button, .footer-legal span) { font-size: 11px !important; }

/* 4. Pictures: a soft loading shimmer instead of black boxes, then a short fade in. */
@keyframes gbpShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes gbpFade { from { opacity: 0; } }
html.gbp .gbp-loading {
  background-color: #120916;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .045) 50%, rgba(255, 255, 255, 0) 70%);
  background-size: 200% 100%;
  animation: gbpShimmer 1.4s linear infinite;
}
html.gbp img.gbp-wait { opacity: 0 !important; }
html.gbp img.gbp-fade { animation: gbpFade .28s var(--gbp-ease-out) both; }

/* 5. Home and category feed: a magazine grid instead of one huge card per row. */
@media (min-width: 1100px) {
  html.gbp #contentHub #cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch; }
  html.gbp #contentHub #cards > .article-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; min-height: 0 !important; }
  html.gbp #contentHub #cards > .article-card .card-art { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
  html.gbp #contentHub #cards > .article-card .card-art { grid-area: 1 / 1 !important; width: auto !important; }
  html.gbp #contentHub #cards > .article-card .card-body { grid-area: 2 / 1 !important; }
  html.gbp #contentHub #cards > .article-card .card-body { padding: 22px 24px 24px !important; }
  html.gbp #contentHub #cards > .article-card .card-title { font-size: 23px !important; line-height: 1.14 !important; letter-spacing: -.01em; }
  html.gbp #contentHub #cards > .article-card .card-summary {
    font-size: 14.5px !important; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  html.gbp #contentHub #cards > .article-card .gb-card-byline { margin-top: auto !important; }
  /* The newest story leads: two columns wide, two rows tall, the photo fills the space. */
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] { grid-column: 1 / span 2 !important; grid-row: span 2 !important; grid-template-rows: minmax(0, 1fr) auto !important; }
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] .card-art { aspect-ratio: auto !important; min-height: 340px !important; }
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] .card-body { padding: 28px 32px 30px !important; }
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] .card-title { font-size: 36px !important; line-height: 1.06 !important; }
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] .card-summary { font-size: 16px !important; -webkit-line-clamp: 2; }
  /* The two side stories next to it stay compact: picture, label and title. */
  html.gbp #contentHub #cards > .article-card:is([data-gbp-slot="2"], [data-gbp-slot="3"]) :is(.card-summary, .gb-card-byline, .card-actions) { display: none !important; }
  html.gbp #contentHub #cards > .article-card:is([data-gbp-slot="2"], [data-gbp-slot="3"]) .card-body { padding: 16px 20px 18px !important; }
  html.gbp #contentHub #cards > .article-card:is([data-gbp-slot="2"], [data-gbp-slot="3"]) .card-title { font-size: 21px !important; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  html.gbp #contentHub #cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  html.gbp #contentHub #cards > .article-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; min-height: 0 !important; }
  html.gbp #contentHub #cards > .article-card .card-art { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
  html.gbp #contentHub #cards > .article-card .card-art { grid-area: 1 / 1 !important; width: auto !important; }
  html.gbp #contentHub #cards > .article-card .card-body { grid-area: 2 / 1 !important; }
  html.gbp #contentHub #cards > .article-card .card-body { padding: 20px 22px 22px !important; }
  html.gbp #contentHub #cards > .article-card .card-title { font-size: 22px !important; line-height: 1.15 !important; }
  html.gbp #contentHub #cards > .article-card .gb-card-byline { margin-top: auto !important; }
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] { grid-column: 1 / -1 !important; }
  html.gbp #contentHub #cards > .article-card[data-gbp-slot="1"] .card-title { font-size: 30px !important; }
}
@media (max-width: 759px) {
  html.gbp #contentHub #cards > .article-card .card-title { font-size: 27px !important; line-height: 1.1 !important; }
}

/* 6. Cards ease in once as you scroll (subtle, 30 to 60 ms stagger, ease-out). */
html.gbp .gbp-rv { opacity: 0; translate: 0 14px; }
html.gbp .gbp-rv.gbp-in { opacity: 1; translate: 0 0; transition: opacity .5s var(--gbp-ease-out), translate .5s var(--gbp-ease-out); }
html.gbp.gbp-calm .gbp-rv { translate: none; }

/* ---------- v2 (s116) ---------- */

/* 7. Card photo zoom on hover: the theme takes 0.55 s. Now 0.22 s ease-out, mouse only
 *    (phones never get a stuck zoom, reduced motion keeps no animation). */
@media (hover: hover) and (pointer: fine) {
  html.gbp #contentHub .article-card .card-photo { transition: transform .22s var(--gbp-ease-out), filter .22s ease !important; }
}
html.gbp.gbp-calm #contentHub .article-card .card-photo { transition: none !important; }

/* 8. BIOS screen exit starts fast (ease-out) instead of hanging at the start (ease-in). */
html.gbp .boot.crt-off { animation-timing-function: var(--gbp-ease-out) !important; }

/* 9. Mini games: the windows (game choice, player name, game) used to appear in one frame.
 *    Now they pop in (240 ms, from 96%),
 *    and the level resize is quicker (420 to 260 ms). */
@keyframes gbpPop { from { opacity: 0; scale: .96; } }
@keyframes gbpVeil { from { opacity: 0; } }
html.gbp #arcadeSelectOverlay:not(.hidden) { animation: gbpVeil .2s var(--gbp-ease-out) both; }
html.gbp #arcadeSelectOverlay:not(.hidden) .arcade-select-card,
html.gbp #arcadeNameOverlay:not(.hidden) .arcade-name-card,
html.gbp :is(#arcadeOverlay, #snakeOverlay):not(.hidden) .arcade-shell { animation: gbpPop .24s var(--gbp-ease-out) both; }
html.gbp #arcadeOverlay .arcade-shell { transition: width .26s var(--gbp-ease-out) !important; }
html.gbp #arcadeOverlay .arcade-frame { transition: width .26s var(--gbp-ease-out), box-shadow .3s ease !important; }
html.gbp.gbp-calm :is(#arcadeSelectOverlay, #arcadeSelectOverlay .arcade-select-card, #arcadeNameOverlay .arcade-name-card, #arcadeOverlay .arcade-shell, #snakeOverlay .arcade-shell) { animation-name: gbpVeil !important; }

/* 10. One header for the whole site: article pages get the same centered logo and menu as the home. */
html.gbp header.gb-newsroom-header {
  display: grid !important; grid-template-columns: 1fr auto 1fr !important; grid-template-rows: auto auto !important;
  align-items: center !important; justify-items: center !important; gap: 0 !important;
  padding: 5px 92px 7px !important; min-height: 0 !important;
  background: linear-gradient(rgba(2, 1, 6, .996), rgba(3, 1, 8, .965)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 12px 42px rgba(0, 0, 0, .35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important; backdrop-filter: blur(18px) saturate(1.35) !important;
}
html.gbp header.gb-newsroom-header .gb-newsroom-brand { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; margin: 0 !important; padding: 0 !important; }
html.gbp header.gb-newsroom-header .gb-newsroom-brand img {
  width: 258px !important; height: 74px !important; max-width: none !important; object-fit: contain !important;
  filter: drop-shadow(rgba(255, 35, 61, .5) 0 0 10px) drop-shadow(rgba(255, 35, 61, .22) 0 0 22px) !important;
}
html.gbp header.gb-newsroom-header .gb-newsroom-nav {
  grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: stretch !important;
  display: flex !important; justify-content: center !important; flex-wrap: nowrap !important;
  gap: 35.28px !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important;
}
html.gbp header.gb-newsroom-header .gb-newsroom-nav a {
  position: relative !important; display: block !important; white-space: nowrap !important;
  font: 800 12.672px/normal "GB Stranger", "Bookman Old Style", "URW Bookman", "DejaVu Serif", Georgia, serif !important;
  letter-spacing: .95px !important; text-transform: uppercase !important;
  color: rgb(170, 165, 176) !important; padding: 8px 4px 10px !important; margin: 0 !important;
  background: none !important; border: 0 !important; text-decoration: none !important;
  transition: color .18s ease !important;
}
html.gbp header.gb-newsroom-header .gb-newsroom-nav a::after {
  content: "" !important; position: absolute !important; top: auto !important; left: 12% !important; right: 12% !important; bottom: 3px !important;
  width: auto !important; height: 1px !important; border-radius: 0 !important; background: currentColor !important; box-shadow: none !important;
  opacity: 1 !important; transform: scaleX(0) !important; transition: transform .2s var(--gbp-ease-out) !important;
}
html.gbp header.gb-newsroom-header .gb-newsroom-nav a[aria-current] { color: #fff !important; }
html.gbp header.gb-newsroom-header .gb-newsroom-nav a[aria-current]::after { transform: scaleX(1) !important; }
@media (hover: hover) and (pointer: fine) {
  html.gbp header.gb-newsroom-header .gb-newsroom-nav a:hover { color: #fff !important; }
  html.gbp header.gb-newsroom-header .gb-newsroom-nav a:hover::after { transform: scaleX(1) !important; }
}
html.gbp header.gb-newsroom-header .gb-newsroom-nav a:focus-visible { color: #fff !important; outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
@media (max-width: 760px) {
  html.gbp header.gb-newsroom-header { padding: 6px 0 4px !important; }
  html.gbp header.gb-newsroom-header .gb-newsroom-brand img { width: 184px !important; height: 54px !important; }
  html.gbp header.gb-newsroom-header .gb-newsroom-nav {
    justify-content: flex-start !important; gap: 3px !important; padding: 2px 9px 0 !important;
    overflow-x: auto !important; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  html.gbp header.gb-newsroom-header .gb-newsroom-nav::-webkit-scrollbar { display: none; }
  /* Centered when the menu fits, starts at the left edge when it has to scroll. */
  html.gbp header.gb-newsroom-header .gb-newsroom-nav a:first-child { margin-left: auto !important; }
  html.gbp header.gb-newsroom-header .gb-newsroom-nav a:last-child { margin-right: auto !important; }
  html.gbp header.gb-newsroom-header .gb-newsroom-nav a {
    font-size: 11px !important; padding: 2px 7px 4px !important;
    display: flex !important; align-items: center; min-height: 44px; /* finger sized, like the home menu */
  }
  /* Home menu on phones: 10 px was too small to read. */
  html.gbp .site-header .main-nav .nav-btn { font-size: 11px !important; }
}

/* 11. Reading progress on articles: a thin red line under the header. */
html.gbp .gbp-read {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #ff233d, #ff5a6e); box-shadow: 0 0 10px rgba(255, 35, 61, .55);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.gbp .gbp-loading { animation: none; }
}
@layer gbl, gbu;
/* GamingBroject TESTQQ only: UI v2 layer (2026-10-21, s130).
 * Implements the 23 UI proposals of 21/10 on top of the existing markup, on /testqq/ only.
 * Loaded after gb-polish.css. Everything that overrides the site lives in @layer gbu with
 * !important: an !important declaration inside a cascade layer beats every unlayered
 * !important one (theme, plugins, inline <style> blocks, gb-polish), whatever its specificity,
 * so this file never has to win selector wars. Inline style="" !important still wins (none used).
 * Room (#roomStage), arcade overlays and the admin bar are left alone on purpose.
 * Numbers in the comments refer to the proposals (1..23).
 * v2.1 (21/10 evening, owner feedback): the room is left exactly as it was; the "Top stories" rail is no longer docked on
 * it; the channel strip (Top 10 / Hot right now / Free games) takes the rail's look with real photos (14b); photos on
 * phones: the theme's 680 px placeholders for undrawn cards are switched off for the compact rows (13). */

/* 1. One font system: Inter, variable, pinned (fontsource 5.1.0 via jsDelivr), latin + latin-ext + greek. */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("inter-greek-wght-normal.woff2") format("woff2-variations"),
       url("inter-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* "GB Stranger" never loads (its file is missing), so every place that still names it gets Inter too. */
@font-face {
  font-family: "GB Stranger"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("inter-latin-wght-normal.woff2") format("woff2");
}
/* Metric-matched fallback while Inter downloads, so the swap barely moves text (CLS). */
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%;
}

/* 21. Design tokens. 5. Dark form controls and scrollbars. */
:root {
  color-scheme: dark;
  --font-sans: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --r-btn: 10px;
  --tx-1: #f7f5fb; --tx-2: #c9c3d1; --tx-3: #9a93a5;
  --red: #ff2948; --red-btn: #df1a3e; --cyan: #21eaff; --gold: #ffd35a; --green: #43f5a0;
  --surface-1: #0c0712; --surface-2: #130b1b; --line-1: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .18);
  --gbu-ease: cubic-bezier(.23, 1, .32, 1);
  --gbu-hdr: 72px;
}
@media (max-width: 900px) { :root { --gbu-hdr: 56px; } }

@layer gbu {

/* ---------- 1. Fonts ---------- */
html body,
html body :not(:is(#roomStage, #roomStage *, .arcade-overlay, .arcade-overlay *, .arcade-select-overlay, .arcade-select-overlay *, .arcade-name-overlay, .arcade-name-overlay *, #wpadminbar, #wpadminbar *, code, pre, kbd, samp, svg, svg *, .channel-play, .channel-play *, .gb-pixel-label, .boot, .boot *)) {
  font-family: var(--font-sans) !important;
}
html body :is(code, pre, kbd, samp) { font-family: var(--font-mono) !important; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* The never-loading display face: section H1s and "Enter the Gaming Room" become Inter 800 caps. */
html body :is(#sectionTitle, .section-title, #roomStage .room-heading, #roomStage .room-heading *) {
  font-family: var(--font-sans) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important;
  font-style: normal !important;
}
html body #roomStage .room-heading h1 { font-size: 15px !important; line-height: 1.2 !important; }

/* ---------- 21. Tokens on the page frame ---------- */
html, html body { background-color: #050208 !important; color: var(--tx-1); }
html body ::selection { background: rgba(255, 41, 72, .45); color: #fff; }
html body :focus-visible { outline: 2px solid var(--cyan) !important; outline-offset: 2px !important; }

/* ---------- 2. Minimum text sizes: 11 px kickers, 12 px meta, 13 px button labels ---------- */
html body :is(.gb-kicker, .section-kicker, #sectionKicker, .gb-phase-kicker, .gbq-rn-kicker, .gb-article-video-head span,
  .gb-key-facts > div > span, .gb-source-box > span, .gb-author-box small, .gb-signoff-copy small, .gb-tags > span,
  .v31-subcategory-head span, .channel-copy small, .gbrw-eyebrow, .gbrw-stamp, .card-badge, .gl-kick, .gl-badge, .gbvp-room-kicker, .gb-offer-store-label, .gb-aa-panel-title,
  .gb-footer-contact span, .footer-contact span, .gbu-kicker) {
  font-size: 11px !important; line-height: 1.3 !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 800 !important;
}
html body :is(.card-meta, .gb-post-meta, .gb-post-meta time, .gb-related small, .gb-card-byline-copy small, .gb-free-facts span,
  .gb-free-store span, .gb-offer-type, .gb-offer-rel, .gb-offer-when, .gb-free-action small, .channel-copy span, .gb-article-hero figcaption,
  .gb-article-video-head small, .v31-subcategory-head strong, .gb-aa-label, .gl-meta, .gb-article-action-status, .comment-notes,
  .comment-form label, .gb-footer-contact, .footer-legal span, .wp-element-caption, figcaption) {
  font-size: 12px !important; line-height: 1.45 !important;
}
html body :is(.gbvp-room-subtitle) { font-size: 12px !important; }
html body .gb-article-action--comments small { font-size: 11px !important; min-width: 18px; line-height: 18px !important; }
html body nav.gl-bar a { font-size: 11px !important; letter-spacing: .06em !important; }
html body :is(.card-meta, .gb-post-meta) { letter-spacing: .02em !important; color: var(--tx-3) !important; font-weight: 600 !important; text-transform: none !important; }
html body .gb-card-byline-copy strong { font-size: 13px !important; }
/* The 7 px "GB / NEWSROOM" stamp on every card photo says nothing: gone. */
html body :is(.social-poster-origin, .social-poster-mark) { display: none !important; }

/* ---------- 10. Buttons: three variants, 13 px / 700 caps, 44 px, radius 10 ---------- */
html body :is(.gbu-btn, .gb-latest-more-button, [id="submit"], .form-submit .submit, .gb-404-search button, .consent-btn, .gb-consent-actions button,
  .gb-consent-dialog button, .consent-dialog button, .read-btn, .gb-source-box a, .gb-game-hub-link, .gbq-gc-link, .gb-free-action a,
  .gb-seo-more-links > summary, .gb-card-read, .gb-cookie-settings, [id="cookieSettingsButton"], .gbu-comments-open, .gbrw-cta, .gl-more) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-height: 44px !important; padding: 0 18px !important; border-radius: var(--r-btn) !important;
  font: 700 13px/1 var(--font-sans) !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  text-decoration: none !important; white-space: nowrap; cursor: pointer; box-sizing: border-box !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
  text-shadow: none !important; width: auto; max-width: 100% !important;
}
/* Long link labels ("All Resident Evil Requiem coverage →") wrap instead of pushing the page sideways. */
html body :is(.gb-game-hub-link, .gbq-gc-link, .gb-source-box a, .gb-free-action a, .gbrw-cta, .gb-card-read) { white-space: normal !important; line-height: 1.2 !important; padding-top: 10px !important; padding-bottom: 10px !important; text-align: center !important; }
/* Primary: brand red (a touch deeper than the neon so white text passes AA). */
html body :is(.gbu-btn--primary, .gb-latest-more-button, [id="submit"], .form-submit .submit, .gb-404-search button, .consent-btn.accept,
  .gb-consent-actions .is-primary, .gb-consent-actions [data-gb-consent="accept"], .gbu-comments-open) {
  background: var(--red-btn) !important; color: #fff !important; border: 1px solid var(--red-btn) !important;
  box-shadow: 0 0 0 1px rgba(255, 41, 72, .25), 0 6px 22px rgba(255, 41, 72, .28) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.gbu-btn--primary, .gb-latest-more-button, [id="submit"], .form-submit .submit, .gb-404-search button, .consent-btn.accept,
    .gb-consent-actions .is-primary, .gb-consent-actions [data-gb-consent="accept"], .gbu-comments-open):hover { background: #f0244a !important; border-color: #f0244a !important; }
}
/* Secondary: outline. */
html body :is(.gbu-btn--secondary, .consent-btn.reject, .gb-consent-actions [data-gb-consent="reject"], .read-btn, .gb-source-box a,
  .gb-game-hub-link, .gbq-gc-link, .gb-free-action a, .gb-seo-more-links > summary, .gbrw-cta) {
  background: transparent !important; color: var(--tx-1) !important; border: 1px solid var(--line-2) !important; box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.gbu-btn--secondary, .consent-btn.reject, .gb-consent-actions [data-gb-consent="reject"], .read-btn, .gb-source-box a,
    .gb-game-hub-link, .gbq-gc-link, .gb-free-action a, .gb-seo-more-links > summary, .gbrw-cta):hover { border-color: var(--red) !important; color: #fff !important; }
}
/* Ghost: text with an arrow. */
html body :is(.gbu-btn--ghost, .consent-btn.manage, .gb-consent-actions [data-gb-consent="manage"], .gb-card-read, .gb-cookie-settings, [id="cookieSettingsButton"]) {
  background: transparent !important; color: var(--tx-2) !important; border: 1px solid transparent !important; box-shadow: none !important; padding: 0 12px !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.gbu-btn--ghost, .consent-btn.manage, .gb-consent-actions [data-gb-consent="manage"], .gb-card-read, .gb-cookie-settings, [id="cookieSettingsButton"]):hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
}
html body .gb-seo-more-links > summary { list-style: none !important; margin: 0 auto !important; }
html body .gb-seo-more-links > summary::-webkit-details-marker { display: none; }
html body :is(.gb-latest-more-button) { min-width: 260px; }
/* Filter chips (section switcher, sub-categories): one pill style. */
html body :is(.switch-btn, .v31-subcat-btn, .gb-subcategory-nav a, .gb-seo-archive-links a, .gb-tags a) {
  display: inline-flex !important; align-items: center !important; min-height: 36px !important; padding: 0 14px !important;
  border-radius: var(--r-pill) !important; border: 1px solid var(--line-2) !important; background: rgba(255, 255, 255, .03) !important;
  color: var(--tx-2) !important; font: 600 13px/1 var(--font-sans) !important; letter-spacing: .02em !important; text-transform: none !important;
  text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; white-space: nowrap;
}
html body :is(.switch-btn.active, .v31-subcat-btn.active, .v31-subcat-btn[aria-pressed="true"], .gb-subcategory-nav a[aria-current], .gb-subcategory-nav a.is-active) {
  background: rgba(255, 41, 72, .14) !important; border-color: rgba(255, 41, 72, .7) !important; color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.switch-btn, .v31-subcat-btn, .gb-subcategory-nav a, .gb-seo-archive-links a, .gb-tags a):hover { border-color: rgba(255, 255, 255, .4) !important; color: #fff !important; }
}

/* ---------- 11. One header ---------- */
html body :is(header.site-header, header.gb-newsroom-header) {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 500 !important;
  display: grid !important; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) !important; grid-template-rows: var(--gbu-hdr) !important;
  align-items: center !important; justify-items: stretch !important; gap: 0 16px !important;
  height: var(--gbu-hdr) !important; min-height: 0 !important; padding: 0 24px !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-family: var(--font-sans) !important;
}
html body header.gb-newsroom-header { position: sticky !important; }
/* The visible bar is a layer behind the content of the header, so it can shrink on scroll
 * with a transform: nothing below it ever moves (no layout shift). */
html body :is(header.site-header, header.gb-newsroom-header)::before {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; display: block !important;
  background: rgba(5, 2, 10, .9) !important; border-bottom: 1px solid var(--line-1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transform-origin: 50% 0; transition: transform .22s var(--gbu-ease), background-color .22s ease;
  width: auto !important; height: auto !important; opacity: 1 !important; pointer-events: none;
}
html body :is(header.site-header, header.gb-newsroom-header) > :is(#homeBtn, .gb-newsroom-brand) {
  grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important;
  display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; position: static !important;
  transform-origin: 0 50%; transition: transform .22s var(--gbu-ease) !important; width: auto !important; height: auto !important;
}
/* 6. Logo: a crisper, tighter glow (the red pulse from the live plugin keeps running, reduced motion included). */
html body :is(#homeBtn.logo-btn img, .gb-newsroom-brand img, .gl-logo img) {
  width: auto !important; height: 46px !important; max-width: none !important; object-fit: contain !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 0 1px rgba(255, 41, 72, .9)) drop-shadow(0 0 7px rgba(255, 41, 72, .45)) !important;
}
html body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav) {
  grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important;
  display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important;
  gap: 2px !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important;
  background: none !important; border: 0 !important; box-shadow: none !important; position: static !important; transform: none !important;
}
html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a) {
  position: relative !important; display: inline-flex !important; align-items: center !important; min-height: 44px !important;
  padding: 0 12px !important; margin: 0 !important; border: 0 !important; border-radius: var(--r-sm) !important; background: none !important;
  font: 600 13px/1 var(--font-sans) !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--tx-2) !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; white-space: nowrap !important;
  transition: color .16s ease, background-color .16s ease !important; animation: none !important; filter: none !important; transform: none !important;
}
html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a)::before { content: none !important; display: none !important; }
html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a)::after {
  content: "" !important; display: block !important; position: absolute !important; left: 12px !important; right: 12px !important; bottom: 6px !important; top: auto !important;
  width: auto !important; height: 2px !important; border-radius: 2px !important; background: var(--red) !important; box-shadow: 0 0 10px rgba(255, 41, 72, .6) !important;
  opacity: 1 !important; transform: scaleX(0) !important; transition: transform .2s var(--gbu-ease) !important;
}
html body :is(header.site-header #mainNav a.active, header.site-header #mainNav a[aria-current], header.gb-newsroom-header .gb-newsroom-nav a[aria-current], header.gb-newsroom-header .gb-newsroom-nav a.gbu-current) { color: #fff !important; }
html body :is(header.site-header #mainNav a.active, header.site-header #mainNav a[aria-current], header.gb-newsroom-header .gb-newsroom-nav a[aria-current], header.gb-newsroom-header .gb-newsroom-nav a.gbu-current)::after { transform: scaleX(1) !important; }
@media (hover: hover) and (pointer: fine) {
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a):hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
}
html body :is(header.site-header .header-actions, header.gb-newsroom-header .gbu-actions) {
  grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important;
  position: static !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; transform: none !important;
}
html body :is(header.site-header .header-actions .icon-btn:not(.mobile-menu-btn), .gbu-actions .gbu-icon-btn) {
  width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; border-radius: var(--r-btn) !important;
  display: inline-grid !important; place-items: center !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--line-1) !important;
  color: var(--tx-1) !important; box-shadow: none !important;
}
html body .gbu-actions .gbu-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html body header.site-header .header-actions .icon-btn.mobile-menu-btn { display: none !important; }
/* Scrolled: the bar shrinks to 56 px (desktop), only visually. */
@media (min-width: 901px) {
  html.gbu-scrolled body :is(header.site-header, header.gb-newsroom-header)::before { transform: scaleY(.7778); background: rgba(5, 2, 10, .96) !important; }
  html.gbu-scrolled body :is(header.site-header, header.gb-newsroom-header) > :is(#homeBtn, .gb-newsroom-brand) { transform: translateY(-8px) scale(.82); }
  html.gbu-scrolled body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav, header.site-header .header-actions, header.gb-newsroom-header .gbu-actions) { transform: translateY(-8px) !important; transition: transform .22s var(--gbu-ease) !important; }
  html body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav, header.site-header .header-actions, header.gb-newsroom-header .gbu-actions) { transition: transform .22s var(--gbu-ease) !important; }
  html.gbu-scrolled body header.gb-newsroom-header .gbp-read { translate: 0 -16px; }
}
/* Narrow desktops and tablets (901-1180 px): a tighter menu so logo, menu and buttons never overlap. */
@media (min-width: 901px) and (max-width: 1180px) {
  html body :is(header.site-header, header.gb-newsroom-header) { grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 0 16px !important; gap: 0 12px !important; }
  html body :is(#homeBtn.logo-btn img, .gb-newsroom-brand img) { height: 40px !important; }
  html body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav) { justify-self: stretch !important; justify-content: flex-start !important; overflow-x: auto !important; scrollbar-width: none; }
  html body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav)::-webkit-scrollbar { display: none; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a) { padding: 0 8px !important; font-size: 12px !important; letter-spacing: .04em !important; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a)::after { left: 8px !important; right: 8px !important; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a):first-child { margin-left: auto !important; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a):last-child { margin-right: auto !important; }
}
/* Header offsets: the home/hub template places content under its fixed header with --header-h. */
@media (min-width: 901px) {
  html:root { --header-h: var(--gbu-hdr) !important; scroll-padding-top: calc(var(--gbu-hdr) + 12px) !important; }
}
/* The newsroom header stays sticky (in the flow): its box keeps 72 px, only the bar shrinks. */
html body :is(.gbm-read, .gbp-read) { bottom: 0 !important; }
html body .gbm-read { display: none !important; } /* one reading bar is enough (gb-polish keeps its own) */

/* Mobile header: a 56 px bar (logo + search) and one scrolling row of sections with a fade. */
@media (max-width: 900px) {
  html:root { --header-h: calc(56px + 44px + env(safe-area-inset-top, 0px)) !important; scroll-padding-top: calc(100px + 12px) !important; }
  html body :is(header.site-header, header.gb-newsroom-header) {
    grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 56px 44px !important;
    height: calc(100px + env(safe-area-inset-top, 0px)) !important; padding: env(safe-area-inset-top, 0px) 0 0 !important; gap: 0 !important;
  }
  html body :is(header.site-header, header.gb-newsroom-header) > :is(#homeBtn, .gb-newsroom-brand) { padding-left: 16px !important; }
  html body :is(#homeBtn.logo-btn img, .gb-newsroom-brand img) { height: 36px !important; }
  html body :is(header.site-header .header-actions, header.gb-newsroom-header .gbu-actions) { grid-column: 2 !important; grid-row: 1 !important; padding-right: 12px !important; gap: 4px !important; }
  html body header.site-header .header-actions .icon-btn.gbds-toggle { display: none !important; }
  html body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav) {
    grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: stretch !important; justify-content: flex-start !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
    padding: 0 10px !important; gap: 0 !important; height: 44px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gbu-fade-l, 0px), #000 calc(100% - var(--gbu-fade-r, 28px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gbu-fade-l, 0px), #000 calc(100% - var(--gbu-fade-r, 28px)), transparent 100%);
  }
  html body :is(header.site-header #mainNav, header.gb-newsroom-header .gb-newsroom-nav)::-webkit-scrollbar { display: none; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a) { min-height: 44px !important; padding: 0 12px !important; scroll-snap-align: start; margin: 0 !important; font-size: 13px !important; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a):first-child { margin-left: 0 !important; }
  html body :is(header.site-header #mainNav a, header.gb-newsroom-header .gb-newsroom-nav a)::after { bottom: 4px !important; }
}

/* ---------- 11. One consent banner style (home #consentBanner and newsroom/lite #gbConsentBanner) ---------- */
html body :is(#consentBanner.consent-banner, #gbConsentBanner.gb-consent) {
  left: 50% !important; right: auto !important; bottom: 16px !important; top: auto !important; transform: translateX(-50%) !important;
  width: min(960px, calc(100vw - 32px)) !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px 24px !important;
  padding: 16px 20px !important; border-radius: var(--r-lg) !important; border: 1px solid var(--line-2) !important;
  background: rgba(10, 5, 16, .97) !important; box-shadow: 0 18px 60px rgba(0, 0, 0, .55) !important; color: var(--tx-1) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html body :is(#consentBanner.consent-banner[hidden], #gbConsentBanner.gb-consent[hidden]) { display: none !important; }
html body :is(#consentBanner .consent-copy, #gbConsentBanner > div:first-child) { min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
html body :is(#consentBanner #consentTitle, #gbConsentBanner #gbConsentTitle) {
  display: block !important; margin: 0 0 4px !important; font: 700 15px/1.3 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important;
}
html body :is(#consentBanner #consentDescription, #gbConsentBanner #gbConsentDescription) {
  margin: 0 !important; max-width: 62ch !important; font: 400 13px/1.45 var(--font-sans) !important; color: var(--tx-2) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
}
html body :is(#consentBanner .consent-actions, #gbConsentBanner .gb-consent-actions) {
  display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; width: auto !important; grid-template-columns: none !important;
}
html body :is(#consentBanner .consent-actions .consent-btn, #gbConsentBanner .gb-consent-actions button) { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
@media (max-width: 760px) {
  html body :is(#consentBanner.consent-banner, #gbConsentBanner.gb-consent) {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; width: calc(100vw - 16px) !important; grid-template-columns: 1fr !important;
    gap: 8px !important; padding: 12px !important; border-radius: 14px !important; max-height: 132px;
  }
  html body.gbu-has-bar :is(#consentBanner.consent-banner, #gbConsentBanner.gb-consent) { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  html body :is(#consentBanner .consent-copy, #gbConsentBanner > div:first-child) { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; font-size: 12px !important; line-height: 1.4 !important; }
  html body :is(#consentBanner #consentTitle, #gbConsentBanner #gbConsentTitle) { display: inline !important; font-size: 12px !important; line-height: 1.4 !important; margin: 0 4px 0 0 !important; }
  html body :is(#consentBanner #consentDescription, #gbConsentBanner #gbConsentDescription) { display: inline !important; font-size: 12px !important; line-height: 1.4 !important; }
  html body :is(#consentBanner .consent-actions, #gbConsentBanner .gb-consent-actions) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  html body :is(#consentBanner .consent-actions .consent-btn, #gbConsentBanner .gb-consent-actions button) {
    grid-column: auto !important; grid-row: auto !important; order: 0 !important; width: 100% !important; min-width: 0 !important;
    padding: 4px 6px !important; font-size: 12px !important; line-height: 1.15 !important; letter-spacing: .03em !important; white-space: normal !important; text-align: center !important;
  }
  html body :is(#consentBanner .consent-actions .consent-btn.accept, #gbConsentBanner .gb-consent-actions [data-gb-consent="accept"]) { order: 2 !important; }
  html body :is(#consentBanner .consent-actions .consent-btn.manage, #gbConsentBanner .gb-consent-actions [data-gb-consent="manage"]) { order: 3 !important; }
}

/* The two "Cookie settings" dialogs get the same title scale too. */
html body :is(#consentDialog, #gbConsentDialog) :is(h2, h3, [id$="Title"]) { font: 700 20px/1.25 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; margin: 2px 0 0 !important; }
html body :is(#consentDialog, #gbConsentDialog) { border-radius: var(--r-lg) !important; }

/* ---------- 11. One footer (built by gb-ui-v2.js from the links on the page) ---------- */
html body footer.gbu-footer-built > :not(.gbu-footer) { display: none !important; }
html body footer.gbu-footer-built {
  display: block !important; padding: 56px 24px calc(32px + env(safe-area-inset-bottom, 0px)) !important; margin: 64px 0 0 !important;
  background: #07040c !important; border-top: 1px solid var(--line-1) !important; color: var(--tx-2) !important; text-align: left !important;
  min-height: 0 !important; height: auto !important; grid-template-columns: none !important;
}
html body .gbu-footer { max-width: 1200px; margin: 0 auto; }
html body .gbu-footer-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
html body .gbu-footer-brand img { height: 44px !important; width: auto !important; display: block; margin: 0 0 14px; filter: drop-shadow(0 0 1px rgba(255, 41, 72, .9)) drop-shadow(0 0 7px rgba(255, 41, 72, .4)); }
html body .gbu-footer-brand p { margin: 0 0 16px !important; max-width: 40ch; font: 400 14px/1.55 var(--font-sans) !important; color: var(--tx-2) !important; }
html body .gbu-footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
html body .gbu-footer-social a {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border-radius: var(--r-btn); border: 1px solid var(--line-1); color: var(--tx-1) !important; text-decoration: none !important;
  font: 600 13px/1 var(--font-sans) !important; background: rgba(255, 255, 255, .03);
}
html body .gbu-footer-social a svg { width: 18px; height: 18px; }
html body .gbu-footer h2 { margin: 0 0 12px !important; font: 800 11px/1.3 var(--font-sans) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--tx-3) !important; }
html body .gbu-footer ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body .gbu-footer li { margin: 0 !important; }
html body .gbu-footer li > :is(a, button, [id="cookieSettingsButton"], .gb-cookie-settings) {
  display: flex !important; align-items: center !important; min-height: 36px !important; padding: 0 !important; margin: 0 !important;
  font: 500 14px/1.3 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tx-2) !important;
  background: none !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; cursor: pointer; width: auto !important;
}
@media (hover: hover) and (pointer: fine) { html body .gbu-footer li > :is(a, button, [id="cookieSettingsButton"], .gb-cookie-settings):hover { color: #fff !important; background: none !important; } }
html body .gbu-moved { display: none !important; }
html body .gbu-footer-legal-line { overflow-wrap: anywhere; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line-1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font: 400 12px/1.5 var(--font-sans); color: var(--tx-3); }
html body .gbu-footer-legal-line a { color: var(--tx-2) !important; }
@media (max-width: 900px) {
  html body .gbu-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  html body .gbu-footer-brand { grid-column: 1 / -1; }
  html body .gbu-footer li > :is(a, button, [id="cookieSettingsButton"], .gb-cookie-settings) { min-height: 44px !important; }
  html body footer.gbu-footer-built { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 20. Mobile bottom tab bar: hides while you scroll down, back on scroll up ---------- */
html body :is(#gbMobileBottomNav, nav.gl-bar) { transition: transform .26s var(--gbu-ease), opacity .2s ease !important; }
html.gbu-bar-away body :is(#gbMobileBottomNav, nav.gl-bar) { transform: translateY(calc(100% + 24px)) !important; opacity: 0 !important; pointer-events: none !important; }
html body :is(#gbMobileBottomNav, nav.gl-bar) :is(a, button) { min-height: 48px !important; }
html body :is(#gbMobileBottomNav, nav.gl-bar) :is(a, button) span { font-size: 11px !important; letter-spacing: .06em !important; }

/* ---------- 12. Home desktop: the room keeps its v1 height; nothing is docked on it any more (v2.1) ----------
 * The v1 "Top stories" rail (docked on the room's lower edge) is gone: its three stories are the lead and the
 * next two cards of the feed a few pixels further down, and its look now lives in the channel strip (14b). */
@media (min-width: 901px) {
  html body.home #roomStage.room-stage { height: max(600px, min(78vh, 720px)) !important; min-height: 0 !important; max-height: 720px !important; }
  html body.home section#home.hero { position: relative !important; }
}

/* ---------- 13. Denser home and hub feed ---------- */
/* The blurred copy of every card photo is a duplicate layer: drop it, let the photo cover the frame. */
html body #cards > .article-card .gb-card-photo-backdrop { display: none !important; }
html body #cards > .article-card .card-art { overflow: hidden !important; border-radius: var(--r-md) var(--r-md) 0 0 !important; background: #120916 !important; }
html body #cards > .article-card .card-art .card-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; inset: 0 !important; }
/* v2.1: the site's loading shimmer waits for every photo in the frame, including the hidden backdrop copy, which
 * (lazy and display:none) never loads: stop the shimmer as soon as the real photo is in. */
html body #cards > .article-card .card-art:has(> img.card-photo[src]:not(.gbm-wait):not(.gbp-wait)) { animation: none !important; background-image: none !important; }
/* v2.1 (missing photos on phones): the theme skips rendering every phone card (content-visibility:auto) and reserves
 * 680 px for each one it has not drawn yet. The compact rows are ~130 px, so cards came in as empty 680 px boxes and
 * the list jumped by ~550 px per card while scrolling (worst in Safari, which has no scroll anchoring). Draw them. */
@media (max-width: 760px) {
  html body #cards > .article-card { content-visibility: visible !important; contain-intrinsic-size: none !important; }
}
html body #cards > .article-card {
  border-radius: var(--r-md) !important; border: 1px solid var(--line-1) !important; background: var(--surface-1) !important; overflow: hidden !important;
  box-shadow: none !important;
}
html body #cards > .article-card .card-badge { top: 12px !important; left: 12px !important; padding: 6px 10px !important; }
html body #cards > .article-card .card-title { font-weight: 750 !important; letter-spacing: -.01em !important; color: var(--tx-1) !important; text-wrap: pretty; }
html body #cards > .article-card .card-title a { color: inherit !important; }
html body #cards > .article-card .card-summary { color: var(--tx-2) !important; }
@media (min-width: 760px) {
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-title {
    font-size: clamp(20px, 1.55vw, 22px) !important; line-height: 1.25 !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important;
  }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) :is(.card-summary, .gb-card-byline, .card-actions) { display: none !important; }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-body { padding: 16px 18px 18px !important; gap: 8px !important; }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-meta { order: 2; margin: 0 !important; }
  html body #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-title { font-size: clamp(30px, 2.6vw, 38px) !important; line-height: 1.08 !important; }
  html body #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-summary { font-size: 16px !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
  html body #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-actions { display: none !important; }
}
/* The grid is set here without waiting for any script (gb-polish only switches its grid on after
 * its script runs, which moved every card after the first paint: CLS on the hubs). */
@media (min-width: 1100px) {
  html body #contentHub #cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; align-items: stretch !important; }
  html body #contentHub #cards > .article-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; min-height: 0 !important; grid-column: auto !important; grid-row: auto !important; }
  html body #contentHub #cards > .article-card .card-art { grid-area: 1 / 1 !important; width: auto !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
  html body #contentHub #cards > .article-card .card-body { grid-area: 2 / 1 !important; }
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) { grid-column: 1 / span 2 !important; grid-row: span 2 !important; }
  /* Lead story: a 2:1 photo, so its headline sits inside the first screen. */
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) { grid-template-rows: auto minmax(0, 1fr) !important; }
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-art { aspect-ratio: 2.15 / 1 !important; min-height: 0 !important; height: auto !important; }
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-body { padding: 18px 28px 24px !important; gap: 10px !important; }
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-meta { order: 3; margin: 0 !important; }
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .gb-card-byline { order: 4; }
}
/* Review of the week block inside the grid: one full row, not a cell. */
html body #cards > .gbrw { grid-column: 1 / -1 !important; border-radius: var(--r-lg) !important; }
/* The compact "Latest" list (home), built from the cards already in the page. */
html body .gbu-latest { margin: 32px 0 8px; }
html body .gbu-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-1); }
html body .gbu-sec-head h2 { margin: 0 !important; font: 800 20px/1.2 var(--font-sans) !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #fff !important; }
html body .gbu-sec-head a { font: 600 13px/1 var(--font-sans); color: var(--cyan) !important; text-decoration: none !important; display: inline-flex; align-items: center; min-height: 44px; }
html body .gbu-latest ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
html body .gbu-latest li { margin: 0; border-bottom: 1px solid var(--line-1); }
/* v2.1: every row now carries the story's own photo (the same picture as its card), 112x63 in a fixed frame. */
html body .gbu-latest li a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 12px 0; min-height: 87px; box-sizing: border-box; text-decoration: none !important; color: var(--tx-1) !important; }
html body .gbu-latest .gbu-l-img { display: block; width: 112px !important; height: 63px !important; max-width: none !important; object-fit: cover; border-radius: var(--r-sm); background: #120916; box-shadow: inset 0 0 0 1px var(--line-1); }
html body .gbu-latest .gbu-l-text { display: block; min-width: 0; }
html body .gbu-latest .gbu-l-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 4px; }
html body .gbu-latest time { flex: none; font: 600 12px/1.2 var(--font-sans); color: var(--tx-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .gbu-latest .gbu-l-kicker { display: block; min-width: 0; font: 800 11px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .gbu-latest .gbu-l-title { font: 600 16px/1.35 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { html body .gbu-latest li a:hover .gbu-l-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; } }
@media (max-width: 759px) {
  html body .gbu-latest ol { grid-template-columns: 1fr; }
  html body .gbu-latest li a { grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; min-height: 78px; }
  html body .gbu-latest .gbu-l-img { width: 96px !important; height: 54px !important; }
}

/* Phones (the /testqq/ markup on a phone): lead card full, the rest as compact rows. */
@media (min-width: 760px) and (max-width: 1099px) {
  html body #contentHub #cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  html body #contentHub #cards > .article-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; min-height: 0 !important; grid-column: auto !important; grid-row: auto !important; }
  html body #contentHub #cards > .article-card .card-art { grid-area: 1 / 1 !important; width: auto !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
  html body #contentHub #cards > .article-card .card-body { grid-area: 2 / 1 !important; }
  html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) { grid-column: 1 / -1 !important; }
}
/* v2.1: a card the site holds back for "Load more" carries [hidden]. v1's phone rule below set display:grid with a
 * layered !important, which beats the site's own [hidden] rule: phones got all 86 cards (and 86 photos) at once,
 * "Load more" and the "Latest" list had nothing left to show. [hidden] wins again everywhere. */
html body #cards > .article-card[hidden] { display: none !important; }
@media (max-width: 759px) {
  html body #cards > .article-card:not([hidden]):not(:first-child):not([data-gbp-slot="1"]) {
    display: grid !important; grid-template-columns: 116px minmax(0, 1fr) !important; grid-template-rows: auto !important; align-items: start !important;
    gap: 0 12px !important; padding: 12px !important; min-height: 0 !important; height: auto !important; border-radius: var(--r-md) !important;
  }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-art {
    grid-column: 1 !important; grid-row: 1 !important; width: 116px !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important;
    border-radius: var(--r-sm) !important; margin: 0 !important;
  }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-body { grid-column: 2 !important; grid-row: 1 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) :is(.card-badge, .card-summary, .gb-card-byline, .card-actions) { display: none !important; }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-title { font-size: 16px !important; line-height: 1.3 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
  html body #cards > .article-card:not(:first-child):not([data-gbp-slot="1"]) .card-meta { order: 2; margin: 0 !important; }
  html body #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-title { font-size: 24px !important; line-height: 1.15 !important; }
  html body #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-summary { font-size: 15px !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
  html body #cards { gap: 10px !important; }
}

/* ---------- 14. Hubs: one row of filters, first headline near the top ---------- */
html body.gamingbroject-app #contentHub .content-wrap::before { content: none !important; display: none !important; }
html body.gamingbroject-app #contentHub #categorySwitcher { display: none !important; }
html body.gamingbroject-app #contentHub .section-top { display: block !important; min-height: 0 !important; margin: 0 0 16px !important; padding: 0 !important; }
html body.gamingbroject-app #contentHub .section-top > div { width: auto !important; max-width: 760px !important; }
html body.gamingbroject-app #sectionKicker { color: var(--red) !important; margin: 0 0 8px !important; }
html body.gamingbroject-app #sectionTitle { font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.02 !important; margin: 0 0 8px !important; color: #fff !important; text-shadow: none !important; }
html body.gamingbroject-app #sectionIntro { font-size: 16px !important; line-height: 1.5 !important; color: var(--tx-2) !important; margin: 0 !important; max-width: 62ch !important; }
html body.gamingbroject-app:not(.home) #contentHub { padding-top: calc(var(--gbu-hdr) + 28px) !important; }
html body.gamingbroject-app:not(.home) #contentHub .content-wrap { padding-top: 0 !important; margin-top: 0 !important; }
html body.gamingbroject-app #v31SubcategoryShell { padding: 0 !important; margin: 0 0 20px !important; background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; }
html body.gamingbroject-app #v31SubcategoryShell .v31-subcategory-head { display: none !important; }
html body.gamingbroject-app #v31SubcategoryRail { padding: 0 !important; gap: 8px !important; }
/* Home: the same section head, a bit more air under the room. */
html body.home #contentHub { padding-top: 40px !important; }
@media (max-width: 900px) {
  html body.gamingbroject-app:not(.home) #contentHub { padding-top: calc(100px + 20px + env(safe-area-inset-top, 0px)) !important; }
  html body.gamingbroject-app #v31SubcategoryRail { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
  html body.gamingbroject-app :is(.v31-subcat-btn, .gb-subcategory-nav a) { min-height: 44px !important; }
}

/* ---------- 14b. v2.1 Channel strip (Top 10 / Hot right now / Free games) in the style of the old "Top stories" rail ----------
 * One dark glass panel, three tiles: the linked story's own photo (from the page data, set by gb-ui-v2.js), the kicker in
 * the slot's neon role colour, a strong two-line headline and one quiet detail line. Top 10 links to a chart, not a story,
 * so its frame shows the site's own 8-bit trophy instead of a photo. Phones: the same tiles as a swipeable row.
 * The site renders the strip at DOMContentLoaded (home and /news/ only), so its final height is reserved from the first
 * paint on exactly those two pages; on the other hubs the site hides it (.hidden) and nothing is reserved. */
html body.gamingbroject-app.home #channelStrip:not(.hidden),
html body.gamingbroject-app #channelStrip.gb-live-bar:not(.hidden) {
  --gbu-strip-h: 112px;
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 0 !important;
  height: var(--gbu-strip-h) !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important;
  margin: 0 0 20px !important; padding: 8px !important; overflow: hidden !important;
  border: 1px solid var(--line-2) !important; border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 60%), rgba(10, 5, 16, .92) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
/* /news/ (the canonical tells it apart before the site's script runs). Its own rule: a browser without :has() drops only this one. */
html:has(> head > link[rel="canonical"][href$="/category/news/"]) body.gamingbroject-app #channelStrip:not(.hidden) {
  --gbu-strip-h: 112px;
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 0 !important;
  height: var(--gbu-strip-h) !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important;
  margin: 0 0 20px !important; padding: 8px !important; overflow: hidden !important;
  border: 1px solid var(--line-2) !important; border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 60%), rgba(10, 5, 16, .92) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html body #channelStrip.gb-live-bar .channel-card {
  --gbu-ch: var(--slot-color, var(--red));
  position: relative !important; display: grid !important; grid-template-columns: 136px minmax(0, 1fr) !important; grid-template-rows: none !important;
  align-items: center !important; gap: 0 16px !important; height: 94px !important; min-height: 0 !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 16px 0 9px !important; box-sizing: border-box !important; overflow: hidden !important; flex: none !important; width: auto !important;
  grid-column: auto !important; grid-row: auto !important; /* the site spans the last card over a second row at 761-1100 px */
  border: 0 !important; border-left: 1px solid var(--line-1) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; transform: none !important; scale: none !important; opacity: 1 !important;
  color: var(--tx-1) !important; text-decoration: none !important; transition: background-color .2s ease !important;
}
html body #channelStrip.gb-live-bar .channel-card:first-child { border-left: 0 !important; }
html body #channelStrip.gb-live-bar .channel-card[data-live-slot="top10"] { --gbu-ch: var(--red); }
html body #channelStrip.gb-live-bar .channel-card[data-live-slot="hot"] { --gbu-ch: #ff6b35; }
html body #channelStrip.gb-live-bar .channel-card[data-live-slot="free"] { --gbu-ch: var(--green); }
html body #channelStrip.gb-live-bar .channel-card::before,
html body #channelStrip.gb-live-bar .channel-card::after { content: none !important; display: none !important; }
html body #channelStrip.gb-live-bar .channel-card > * { position: relative !important; z-index: 1 !important; }
@media (hover: hover) and (pointer: fine) {
  html body #channelStrip.gb-live-bar .channel-card:hover { background: rgba(255, 255, 255, .035) !important; }
  html body #channelStrip.gb-live-bar .channel-card:hover .channel-copy strong { color: #fff !important; text-decoration: underline !important; text-decoration-color: var(--gbu-ch) !important; text-underline-offset: 3px !important; }
  html body #channelStrip.gb-live-bar .channel-card:hover .gbu-ch-img { transform: scale(1.05); }
}
html body #channelStrip.gb-live-bar .channel-card:focus-visible { outline: 2px solid var(--cyan) !important; outline-offset: -2px !important; }
/* The frame: 136x76 (16:9). Without a photo it is a neon tile with the site's pixel icon in the middle. */
html body #channelStrip.gb-live-bar .channel-play {
  position: relative !important; display: block !important; flex: none !important; grid-template-rows: none !important;
  width: 136px !important; height: 76px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
  overflow: hidden !important; clip-path: none !important; border: 0 !important; border-radius: var(--r-sm) !important;
  color: var(--gbu-ch) !important; transform: none !important; filter: none !important; animation: none !important;
  background: radial-gradient(120% 95% at 50% 115%, color-mix(in srgb, var(--gbu-ch) 34%, transparent), transparent 70%),
              repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), linear-gradient(160deg, #1b0e24, #0a050f) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gbu-ch) 45%, transparent), 0 0 18px color-mix(in srgb, var(--gbu-ch) 16%, transparent) !important;
}
html body #channelStrip.gb-live-bar .channel-play::after { content: none !important; display: none !important; }
html body #channelStrip.gb-live-bar .channel-play .gb-pixel-icon {
  position: absolute !important; left: 50% !important; top: 50% !important; width: 34px !important; height: 34px !important; margin: -24px 0 0 -17px !important;
  fill: currentColor !important; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 70%, transparent)) !important;
}
html body #channelStrip.gb-live-bar .channel-play .gb-pixel-label {
  position: absolute !important; left: 0 !important; right: 0 !important; top: 50% !important; margin-top: 15px !important; text-align: center !important;
  font: 800 12px/1 "Courier New", ui-monospace, monospace !important; letter-spacing: .18em !important; text-indent: .18em !important;
  color: currentColor !important; text-shadow: 0 0 8px currentColor !important;
}
/* With the story photo: the photo fills the frame, the pixel icon becomes a small badge in the corner. */
html body #channelStrip.gb-live-bar .gbu-ch-img {
  position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important;
  width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; border-radius: 0 !important;
  transition: transform .45s var(--gbu-ease) !important;
}
html body #channelStrip.gb-live-bar .channel-play.gbu-has-img { background: #120916 !important; box-shadow: inset 0 0 0 1px var(--line-1) !important; }
html body #channelStrip.gb-live-bar .channel-play.gbu-has-img .gb-pixel-icon {
  z-index: 1 !important; left: 6px !important; top: auto !important; bottom: 6px !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 5px !important;
  box-sizing: border-box !important; border-radius: 6px !important; background: rgba(6, 3, 10, .82) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gbu-ch) 55%, transparent), 0 0 12px color-mix(in srgb, var(--gbu-ch) 35%, transparent) !important;
}
html body #channelStrip.gb-live-bar .channel-play.gbu-has-img .gb-pixel-label { display: none !important; }
/* Copy: kicker, two-line headline, one detail line. */
html body #channelStrip.gb-live-bar .channel-copy { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; margin: 0 !important; }
html body #channelStrip.gb-live-bar .channel-copy small {
  display: block !important; margin: 0 !important; color: var(--gbu-ch) !important; font: 800 11px/1.2 var(--font-sans) !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html body #channelStrip.gb-live-bar .channel-copy strong {
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0 !important; overflow: hidden !important;
  white-space: normal !important; text-overflow: clip !important; color: var(--tx-1) !important; font: 650 15px/1.3 var(--font-sans) !important; letter-spacing: -.005em !important;
}
html body #channelStrip.gb-live-bar .channel-copy > span {
  display: block !important; margin: 0 !important; color: var(--tx-3) !important; font: 500 12px/1.35 var(--font-sans) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html body #channelStrip.gb-live-bar.is-loading .channel-copy :is(strong, span) { color: transparent !important; }
/* Mid widths: the three tiles stay in one row, the frame gets smaller. */
@media (min-width: 901px) and (max-width: 1199px) {
  html body #channelStrip.gb-live-bar .channel-card { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 0 12px !important; padding: 0 12px 0 8px !important; }
  html body #channelStrip.gb-live-bar .channel-play { width: 104px !important; height: 59px !important; }
  html body #channelStrip.gb-live-bar .channel-copy > span { display: none !important; }
}
/* Phones and tablets: the tiles become cards in a row you swipe (the next one peeks in), 92 px tall, nothing reflows. */
@media (max-width: 900px) {
  html body.gamingbroject-app.home #channelStrip:not(.hidden),
  html body.gamingbroject-app #channelStrip.gb-live-bar:not(.hidden) {
    --gbu-strip-h: 92px;
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: min(84%, 360px) !important; gap: 10px !important;
    padding: 0 !important; margin: 0 0 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; overscroll-behavior-x: contain; scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  html:has(> head > link[rel="canonical"][href$="/category/news/"]) body.gamingbroject-app #channelStrip:not(.hidden) {
    --gbu-strip-h: 92px;
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: min(84%, 360px) !important; gap: 10px !important;
    padding: 0 !important; margin: 0 0 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; overscroll-behavior-x: contain; scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  html body #channelStrip.gb-live-bar::-webkit-scrollbar { display: none !important; }
  html body #channelStrip.gb-live-bar .channel-card {
    height: 92px !important; grid-template-columns: 112px minmax(0, 1fr) !important; gap: 0 12px !important; padding: 0 12px 0 10px !important;
    border: 1px solid var(--line-2) !important; border-radius: var(--r-md) !important; scroll-snap-align: start !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%), rgba(12, 7, 18, .95) !important;
  }
  html body #channelStrip.gb-live-bar .channel-card:first-child { border-left: 1px solid var(--line-2) !important; }
  html body #channelStrip.gb-live-bar .channel-play { width: 112px !important; height: 63px !important; }
  html body #channelStrip.gb-live-bar .channel-copy > span { display: none !important; }
}

/* ---------- 3 + 4. Archive, category and 404 grids ---------- */
html body:is(.archive, .error404, .search) .gb-archive-head { margin-bottom: 28px !important; max-width: 900px !important; }
html body:is(.archive, .error404, .search) .gb-archive-head h1.gb-title {
  font-size: clamp(36px, 11vw, 94px) !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.01em !important;
  overflow-wrap: break-word !important; word-break: normal !important; hyphens: manual !important;
}
@media (min-width: 761px) { html body:is(.archive, .error404, .search) .gb-archive-head h1.gb-title { font-size: clamp(40px, 4.4vw, 64px) !important; } }
html body .gb-grid { gap: 20px !important; }
html body .gb-grid > .gb-post-card { border-radius: var(--r-md) !important; border: 1px solid var(--line-1) !important; background: var(--surface-1) !important; overflow: hidden !important; box-shadow: none !important; }
html body .gb-grid > .gb-post-card .gb-post-card-media img { aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; object-fit: cover !important; }
html body .gb-grid > .gb-post-card .gb-post-card-body { padding: 16px 18px 18px !important; gap: 8px !important; }
html body .gb-grid > .gb-post-card h2 {
  font-size: clamp(19px, 1.5vw, 23px) !important; line-height: 1.2 !important; font-weight: 750 !important; letter-spacing: -.01em !important; margin: 6px 0 !important;
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important;
}
html body .gb-grid > .gb-post-card h2 a { color: var(--tx-1) !important; }
html body .gb-grid > .gb-post-card p { font-size: 15px !important; line-height: 1.5 !important; color: var(--tx-2) !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
html body .gb-grid > .gb-post-card .gb-card-read { margin-top: auto !important; padding: 0 !important; min-height: 44px !important; color: var(--cyan) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; justify-content: flex-start !important; }
/* The lead card can stay larger. */
@media (min-width: 900px) {
  html body .gb-grid > .gb-post-card:first-child h2 { font-size: clamp(26px, 2.3vw, 34px) !important; line-height: 1.12 !important; }
}
@media (max-width: 760px) {
  html body .gb-grid > .gb-post-card h2 { font-size: 21px !important; line-height: 1.2 !important; }
  html body .gb-grid > .gb-post-card:first-child h2 { font-size: 24px !important; }
  html body :is(.gb-subcategory-nav) { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 8px !important; scrollbar-width: none; }
}
html body .pagination .page-numbers { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--r-btn) !important; font: 600 14px/1 var(--font-sans) !important; }
html body .gb-404-search { gap: 8px !important; }
html body .gb-404-search input { min-height: 44px !important; border-radius: var(--r-btn) !important; }
/* 4. Phones: a category label is a small pill, never a full-width red bar. */
html body :is(.gl-badge, .card-badge) { justify-self: start !important; align-self: start !important; width: max-content !important; max-width: calc(100% - 24px) !important; display: inline-flex !important; }
html body .gl-card .gl-badge { margin-bottom: 6px !important; padding: 5px 9px !important; }

/* ---------- 15. Article ---------- */
html body.single-post main#gb-main-content { padding-top: 0 !important; }
html body.single-post article.gb-article {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; row-gap: 0 !important;
  width: auto !important; max-width: 1180px !important; margin: 0 auto !important; padding: 28px 24px 48px !important; box-sizing: border-box !important;
}
html body.single-post article.gb-article > * { grid-column: 1 !important; min-width: 0 !important; }
html body.single-post article.gb-article > .gb-breadcrumbs { grid-row: 1 !important; margin: 0 0 16px !important; }
html body.single-post article.gb-article > .gb-article-header { grid-row: 2 !important; }
html body.single-post article.gb-article > .gb-article-hero { grid-row: 3 !important; }
html body.single-post article.gb-article > .gb-key-facts { grid-row: 4 !important; }
html body.single-post article.gb-article > .gb-article-video { grid-row: 5 !important; }
html body.single-post article.gb-article > .gb-article-layout { grid-row: 6 !important; }
/* Breadcrumbs: the last crumb is the (shortened) title, not the word "Article". */
html body .gb-breadcrumbs { display: flex !important; flex-wrap: nowrap !important; overflow: hidden !important; white-space: nowrap !important; align-items: center !important; gap: 4px 8px !important; font: 600 12px/1.3 var(--font-sans) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--tx-3) !important; }
html body .gb-breadcrumbs a { color: var(--tx-2) !important; text-decoration: none !important; }
html body .gb-breadcrumbs > * { flex: 0 0 auto; }
/* The last crumb shows the (shortened) title; the row never wraps, so swapping "Article" for the title moves nothing. */
html body .gb-breadcrumbs > :last-child { flex: 0 1 auto !important; min-width: 0 !important; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-3) !important; }
html body.single-post .gb-article-header { width: auto !important; max-width: 900px !important; margin: 0 !important; padding: 0 !important; }
html body.single-post .gb-article-header .gb-kicker { margin: 0 0 12px !important; color: var(--red) !important; }
html body.single-post .gb-article-header .gb-kicker a { color: inherit !important; text-decoration: none !important; }
html body.single-post .gb-article-header h1 {
  font-size: clamp(34px, 4.2vw, 60px) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  margin: 0 0 16px !important; color: #fff !important; text-wrap: balance; max-width: 28ch;
}
html body.single-post .gb-article-deck { font-size: 20px !important; line-height: 1.5 !important; color: var(--tx-2) !important; margin: 0 0 16px !important; max-width: 62ch !important; }
html body.single-post .gb-article-meta-bar {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px 16px !important;
  min-height: 0 !important; margin: 0 0 20px !important; padding: 10px 0 !important; border-top: 1px solid var(--line-1) !important; border-bottom: 1px solid var(--line-1) !important;
}
html body.single-post .gb-article-publish-meta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px 8px !important; font: 500 13px/1.4 var(--font-sans) !important; color: var(--tx-3) !important; }
/* A line is reserved from the first paint for the byline (and a review's score), which gb-ui-v2.js fills in: no layout shift. */
html body.single-post .gb-article-publish-meta { position: relative !important; padding-top: 30px !important; }
html body.single-post .gb-article-publish-meta > .gbu-byline { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 28px; display: flex !important; align-items: center !important; gap: 10px !important; white-space: nowrap !important; overflow: hidden !important; color: var(--tx-2) !important; }
html body.single-post .gb-article-publish-meta time { color: var(--tx-2) !important; font-weight: 600 !important; }
html body.single-post .gbu-byline a { color: #fff !important; font-weight: 700 !important; text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) { html body.single-post .gbu-byline a:hover { text-decoration: underline !important; text-decoration-color: var(--red) !important; } }
/* Share row: compact 44 px icons on wider screens; phones keep the site's own 4-up grid. */
@media (min-width: 761px) {
  html body.single-post .gb-article-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; margin: 0 !important; }
  html body.single-post .gb-article-actions .gb-article-action {
    width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; border-radius: var(--r-btn) !important;
    align-items: center !important; justify-content: center !important; justify-items: center !important; position: relative !important;
  }
  html body.single-post .gb-article-actions .gb-aa-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
  html body.single-post .gb-article-actions .gb-article-action--comments small { position: absolute !important; top: -4px !important; right: -4px !important; min-width: 18px; height: 18px; font-size: 11px !important; line-height: 18px !important; }
  html body.single-post .gb-article-actions .gb-aa-divider { height: 24px !important; }
}
html body.single-post .gb-article-action-status { position: absolute !important; }
/* Hero right under the deck. */
html body.single-post .gb-article-hero { margin: 0 0 28px !important; width: auto !important; max-width: none !important; }
html body.single-post .gb-article-hero img { border-radius: var(--r-md) !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover !important; }
html body.single-post .gb-article-hero figcaption { color: var(--tx-3) !important; padding: 8px 2px 0 !important; background: none !important; }
/* Key facts. */
html body.single-post .gb-key-facts {
  display: block !important; margin: 0 0 32px !important; padding: 20px 22px !important; border-radius: var(--r-lg) !important;
  border: 1px solid var(--line-1) !important; background: var(--surface-1) !important; box-shadow: none !important; width: auto !important; max-width: 760px !important;
}
html body.single-post .gb-key-facts > div { margin: 0 0 12px !important; display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap; width: auto !important; }
html body.single-post .gb-key-facts > div > span { color: var(--red) !important; }
html body.single-post .gb-key-facts h2 { font-size: 20px !important; line-height: 1.2 !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 800 !important; }
html body.single-post .gb-key-facts ul { margin: 0 !important; padding: 0 0 0 18px !important; width: auto !important; }
html body.single-post .gb-key-facts li { font-size: 16px !important; line-height: 1.5 !important; color: var(--tx-2) !important; margin: 0 0 8px !important; }
html body.single-post .gb-key-facts li::marker { color: var(--red); }
/* Reading column: 68 characters, 19/1.65 text, a 1.25 heading scale. */
html body.single-post .gb-article-layout { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
html body.single-post .gb-article-layout > div { width: auto !important; max-width: none !important; margin: 0 !important; }
html body.single-post .gb-article-layout > div > * { max-width: 68ch !important; font-size: 19px; }
html body.single-post .gb-article-content { font-size: 19px !important; line-height: 1.65 !important; color: #e9e5ef !important; }
html body.single-post .gb-article-content > p, html body.single-post .gb-article-content li { font-size: 19px !important; line-height: 1.65 !important; }
html body.single-post .gb-article-content > p { margin: 0 0 1.15em !important; }
html body.single-post .gb-article-content h2 { font-size: 30px !important; line-height: 1.2 !important; margin: 56px 0 14px !important; font-weight: 800 !important; letter-spacing: -.01em !important; text-transform: none !important; color: #fff !important; }
html body.single-post .gb-article-content h3 { font-size: 24px !important; line-height: 1.25 !important; margin: 40px 0 12px !important; font-weight: 750 !important; color: #fff !important; }
html body.single-post .gb-article-content h4 { font-size: 19px !important; line-height: 1.3 !important; margin: 32px 0 10px !important; font-weight: 700 !important; }
html body.single-post .gb-article-content a:not(.gb-ytf__btn):not(.gbq-gc-link):not(.gb-game-hub-link) { color: var(--cyan) !important; text-decoration: underline !important; text-decoration-color: rgba(33, 234, 255, .4) !important; text-underline-offset: 3px !important; }
html body.single-post .gb-article-content :is(figure, .wp-block-image) img { border-radius: var(--r-md) !important; }
html body.single-post .gb-article-content figure.wp-block-table table { font-size: 16px !important; }
/* Fewer end widgets: keep "More on <game>", the game card, source, tags, author and "Related stories". */
html body.single-post :is(.gbq-read-next, .gb-seo-game-links, .gb-article-signoff) { display: none !important; }
html body.single-post .gb-preferred-source { font-size: 14px !important; }
html body.single-post .gb-preferred-source a { font-size: 14px !important; font-weight: 600 !important; }
html body.single-post :is(.gb-game-related, .gbq-game-card, .gb-source-box, .gb-author-box, .gb-comments) {
  border-radius: var(--r-lg) !important; border: 1px solid var(--line-1) !important; background: var(--surface-1) !important; box-shadow: none !important;
}
html body.single-post .gb-game-related { padding: 20px 22px !important; margin: 40px 0 !important; }
html body.single-post .gb-game-related h2 { font-size: 20px !important; margin: 0 0 10px !important; letter-spacing: 0 !important; text-transform: none !important; }
html body.single-post .gb-game-related li { font-size: 16px !important; line-height: 1.45 !important; margin: 0 0 8px !important; }
html body.single-post .gbq-game-card { padding: 20px 22px !important; margin: 40px 0 !important; }
html body.single-post .gbq-game-card .gbq-ctx-h { font-size: 20px !important; margin: 0 0 8px !important; }
html body.single-post .gbq-game-card :is(.gbq-ctx-p, li) { font-size: 16px !important; line-height: 1.5 !important; }
html body.single-post .gb-source-box { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 4px 16px !important; padding: 16px 20px !important; margin: 32px 0 24px !important; }
html body.single-post .gb-source-box > span { grid-column: 1 !important; color: var(--tx-3) !important; }
html body.single-post .gb-source-box > strong { grid-column: 1 !important; font-size: 17px !important; line-height: 1.3 !important; color: #fff !important; }
html body.single-post .gb-source-box > a { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
html body.single-post .gb-source-box .gbu-source-host { display: block; font: 500 12px/1.4 var(--font-sans); color: var(--tx-3); letter-spacing: 0; text-transform: none; }
html body.single-post .gb-tags { gap: 8px !important; margin: 0 0 24px !important; }
html body.single-post .gb-tags a { min-height: 36px !important; font-size: 13px !important; }
html body.single-post .gb-author-box { padding: 20px 22px !important; margin: 0 0 32px !important; }
html body.single-post .gb-author-box h2 { font-size: 20px !important; }
html body.single-post .gb-author-box p { font-size: 15px !important; line-height: 1.55 !important; color: var(--tx-2) !important; }
/* Related stories: a quieter heading and the same card frame as the feed. */
html body.single-post .gb-related { max-width: 1180px !important; margin: 0 auto !important; padding: 24px 24px 0 !important; box-sizing: border-box !important; width: auto !important; }
html body.single-post .gb-related h2#gb-related-title { font-size: 30px !important; line-height: 1.15 !important; margin: 4px 0 20px !important; letter-spacing: -.01em !important; }
html body.single-post .gb-related-grid { gap: 20px !important; }
html body.single-post .gb-related-grid > article { border-radius: var(--r-md) !important; border: 1px solid var(--line-1) !important; overflow: hidden !important; background: var(--surface-1) !important; }
html body.single-post .gb-related-grid h3 { font-size: 19px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
html body.single-post .gb-related-grid small { padding: 12px 18px 0 !important; color: var(--tx-3) !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 600 !important; }
@media (max-width: 760px) {
  html body.single-post article.gb-article { padding: 16px 16px 40px !important; }
  html body.single-post .gb-article-header h1 { font-size: clamp(30px, 8.6vw, 40px) !important; max-width: none; }
  html body.single-post .gb-article-deck { font-size: 17px !important; }
  html body.single-post .gb-article-content, html body.single-post .gb-article-content > p, html body.single-post .gb-article-content li { font-size: 17px !important; line-height: 1.6 !important; }
  html body.single-post .gb-article-content h2 { font-size: 25px !important; margin: 44px 0 12px !important; }
  html body.single-post .gb-article-content h3 { font-size: 21px !important; }
  html body.single-post .gb-source-box { grid-template-columns: 1fr !important; }
  html body.single-post .gb-source-box > a { grid-column: 1 !important; grid-row: auto !important; justify-self: start !important; }
  html body.single-post .gb-breadcrumbs a { min-height: 44px; display: inline-flex !important; align-items: center; }
  html body.single-post .gb-related { padding: 16px 16px 0 !important; }
}
/* 23. Wide screens: a reading column plus a right rail with sticky key facts. */
@media (min-width: 1200px) {
  html body.single-post article.gb-article { grid-template-columns: minmax(0, 1fr) 320px !important; column-gap: 56px !important; }
  html body.single-post article.gb-article > :is(.gb-breadcrumbs, .gb-article-header) { grid-column: 1 / -1 !important; }
  html body.single-post article.gb-article > .gb-key-facts {
    grid-column: 2 !important; grid-row: 3 / span 4 !important; align-self: start !important;
    position: sticky !important; top: calc(var(--gbu-hdr) + 20px) !important; margin: 4px 0 0 !important; max-width: none !important;
  }
  html body.single-post .gb-key-facts li { font-size: 15px !important; }
  html body.single-post .gb-article-header { max-width: none !important; }
}

/* ---------- 7. Comments: an inviting empty state ---------- */
html body.single-post .gb-comments { padding: 22px !important; margin: 0 0 40px !important; }
html body.single-post .gb-comments-heading h2 { font-size: 24px !important; line-height: 1.2 !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
html body .gbu-comments-empty { margin: 4px 0 16px !important; font: 400 16px/1.5 var(--font-sans) !important; color: var(--tx-2) !important; }
html body .gb-comments.gbu-collapsed #respond { display: none !important; }
html body .gb-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) { border-radius: var(--r-btn) !important; font-size: 16px !important; }
html body .gb-comments .comment-reply-title { font-size: 20px !important; }

/* ---------- 9. Video facade: a big sharp still, the title and a red play button ---------- */
html body .gb-article-video { border-radius: var(--r-lg) !important; overflow: hidden !important; border: 1px solid var(--line-1) !important; background: #000 !important; margin: 0 0 32px !important; }
html body .gb-article-video-head { padding: 12px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
html body .gb-article-video-head span { color: var(--red) !important; }
html body .gb-ytf { position: relative !important; aspect-ratio: 16 / 9 !important; background: #000 !important; }
html body .gb-ytf .gb-ytf__btn { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; }
html body .gb-ytf .gb-ytf__btn img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; aspect-ratio: auto !important; }
html body .gb-ytf .gb-ytf__btn::after {
  content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .78) 100%) !important;
}
html body .gb-ytf .gb-ytf__play {
  position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2 !important;
  width: 68px !important; height: 68px !important; border-radius: 50% !important; background: var(--red-btn) !important;
  box-shadow: 0 0 0 6px rgba(255, 41, 72, .25), 0 10px 30px rgba(0, 0, 0, .5) !important; transition: transform .18s var(--gbu-ease), background-color .18s ease !important;
}
html body .gb-ytf .gb-ytf__play::before {
  content: "" !important; position: absolute !important; left: 27px !important; top: 21px !important; width: 0 !important; height: 0 !important;
  border-style: solid !important; border-width: 13px 0 13px 21px !important; border-color: transparent transparent transparent #fff !important; background: none !important;
}
html body .gb-ytf .gb-ytf__play::after { content: none !important; }
@media (hover: hover) and (pointer: fine) { html body .gb-ytf .gb-ytf__btn:hover .gb-ytf__play { transform: translate(-50%, -50%) scale(1.06) !important; background: #f0244a !important; } }
html body .gb-ytf .gbu-yt-title {
  position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; pointer-events: none;
  font: 700 18px/1.3 var(--font-sans); color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 760px) { html body .gb-ytf .gbu-yt-title { font-size: 15px; left: 14px; right: 14px; bottom: 12px; } }

/* ---------- 16. "Our take": the site's signature box ---------- */
html body :is(.gbu-take, section.gb-editor-take) {
  margin: 40px 0 !important; padding: 20px 24px !important; border: 0 !important; border-left: 3px solid var(--red) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important; background: rgba(255, 41, 72, .06) !important; box-shadow: none !important;
}
html body :is(.gbu-take, section.gb-editor-take) .gbu-kicker { display: block; color: var(--red) !important; margin: 0 0 8px !important; }
html body .gbu-take > .gbu-take-h:not(.gbu-take-kicker) { font-size: 22px !important; line-height: 1.25 !important; margin: 0 0 10px !important; }
html body .gbu-take > .gbu-take-h.gbu-take-kicker { font-size: 11px !important; line-height: 1.3 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--red) !important; margin: 0 0 8px !important; font-weight: 800 !important; }
html body :is(.gbu-take, section.gb-editor-take) p { margin: 0 0 .8em !important; }
html body :is(.gbu-take, section.gb-editor-take) p:last-child { margin-bottom: 0 !important; }
html body section.gb-editor-take > h2#gb-editor-take-title { font-size: 11px !important; line-height: 1.3 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--red) !important; margin: 0 0 8px !important; font-weight: 800 !important; }

/* ---------- 17. Reviews: verdict box and score badge (from the page's own scores) ---------- */
html body .gbu-verdict {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: center; margin: 8px 0 40px; padding: 22px 24px;
  border-radius: var(--r-lg); border: 1px solid rgba(255, 211, 90, .35); background: linear-gradient(135deg, rgba(255, 211, 90, .08), rgba(255, 211, 90, .02));
}
html body .gbu-verdict-score { display: grid; place-items: center; text-align: center; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 24px rgba(255, 211, 90, .25), inset 0 0 24px rgba(255, 211, 90, .12); }
html body .gbu-verdict-score strong { display: block; font: 800 52px/1 var(--font-sans); color: var(--gold); font-variant-numeric: tabular-nums; }
html body .gbu-verdict-score span { display: block; font: 700 13px/1.2 var(--font-sans); color: var(--tx-2); margin-top: 4px; }
html body .gbu-verdict-score small { display: block; font: 600 11px/1.3 var(--font-sans); color: var(--tx-3); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; max-width: 120px; }
html body .gbu-verdict-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html body .gbu-verdict-bars li { display: grid; grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; margin: 0; font: 600 15px/1.2 var(--font-sans); color: var(--tx-1); }
html body .gbu-verdict-bars .gbu-bar { height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); overflow: hidden; }
html body .gbu-verdict-bars .gbu-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb347, var(--gold)); }
html body .gbu-verdict-bars b { font: 800 15px/1 var(--font-sans); color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
html body .gbu-verdict-pc { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body .gbu-verdict-pc h3 { font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; margin: 0 0 8px !important; }
html body .gbu-verdict-pc .gbu-pros h3 { color: var(--green) !important; }
html body .gbu-verdict-pc .gbu-cons h3 { color: var(--red) !important; }
html body .gbu-verdict-pc ul { margin: 0; padding-left: 18px; }
html body .gbu-verdict-pc li { font-size: 16px !important; line-height: 1.5 !important; }
html body .gbu-score-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 211, 90, .55); background: rgba(255, 211, 90, .1); color: var(--gold) !important; text-decoration: none !important;
  font: 800 13px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
html body .gbu-score-pill small { font: 600 11px/1 var(--font-sans); color: var(--tx-3); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 760px) {
  html body .gbu-verdict { grid-template-columns: 1fr; justify-items: stretch; padding: 18px; }
  html body .gbu-verdict-score { width: 132px; margin: 0 auto; }
  html body .gbu-verdict-score strong { font-size: 42px; }
  html body .gbu-verdict-bars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: 6px 12px; font-size: 15px; }
  html body .gbu-verdict-bars li > span:first-child { grid-area: l; }
  html body .gbu-verdict-bars li > .gbu-bar { grid-area: b; }
  html body .gbu-verdict-bars li > b { grid-area: v; }
  html body .gbu-verdict-pc { grid-template-columns: 1fr; }
}

/* ---------- 18. Free games: live offers first, expired ones last and dimmed ---------- */
html body .gb-free-grid > .gb-free-card[data-offer-state="active"] { order: -3 !important; }
html body .gb-free-grid > .gb-free-card[data-offer-state="upcoming"] { order: -2 !important; }
html body .gb-free-grid > .gb-free-card[data-offer-state="unverified"] { order: -1 !important; }
html body .gb-free-grid > .gb-free-card[data-offer-state="ended"] { order: 1 !important; opacity: .55 !important; filter: saturate(.35) !important; }
@media (hover: hover) and (pointer: fine) { html body .gb-free-grid > .gb-free-card[data-offer-state="ended"]:hover { opacity: .9 !important; filter: none !important; } }
html body .gb-free-grid > .gb-free-card { border-radius: var(--r-md) !important; }
html body .gb-free-card h3 { font-size: clamp(19px, 1.5vw, 23px) !important; line-height: 1.2 !important; letter-spacing: -.01em !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
html body .gb-free-card .gb-free-copy > p:not(.gb-offer-window) { font-size: 15px !important; line-height: 1.5 !important; color: var(--tx-2) !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
html body .gb-free-card .gb-offer-widget.is-active .gb-offer-head { color: var(--green) !important; }
html body.gamingbroject-app #freeGamesRadar .gb-phase-title { font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.05 !important; text-transform: uppercase; letter-spacing: .04em !important; }

/* ---------- 22. Home rows for PC, Console and Guides ---------- */
html body .gbu-rows { max-width: 1296px; margin: 0 auto; padding: 24px 24px 8px; box-sizing: border-box; }
html body .gbu-row { margin: 0 0 40px; }
html body .gbu-row-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
html body .gbu-row-list li { margin: 0; }
html body .gbu-row-list a { display: block; color: var(--tx-1) !important; text-decoration: none !important; }
html body .gbu-row-list img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); display: block; background: #120916; margin: 0 0 10px; }
html body .gbu-row-list .gbu-r-kicker { display: block; font: 800 11px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
html body .gbu-row-list .gbu-r-title { font: 650 17px/1.3 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body .gbu-row-list time { display: block; font: 600 12px/1.3 var(--font-sans); color: var(--tx-3); margin-top: 6px; }
@media (hover: hover) and (pointer: fine) { html body .gbu-row-list a:hover .gbu-r-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; } }
@media (max-width: 900px) {
  html body .gbu-rows { padding: 16px 16px 0; }
  html body .gbu-row-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  html body .gbu-row-list li { scroll-snap-align: start; }
}

/* ---------- 21. Neon roles: red = brand/news, cyan = links, gold = reviews/scores, green = free ---------- */
html body [data-gbu-role="review"] :is(.card-badge, .gbu-l-kicker, .gbu-r-kicker), html body .gbu-r-kicker[data-gbu-role="review"] { color: #1a1205 !important; }
html body #cards > .article-card[data-gbu-role="review"] .card-badge { background: var(--gold) !important; box-shadow: 0 0 14px rgba(255, 211, 90, .45) !important; color: #1a1205 !important; }
html body #cards > .article-card[data-gbu-role="free"] .card-badge { background: var(--green) !important; box-shadow: 0 0 14px rgba(67, 245, 160, .4) !important; color: #03140b !important; }
html body :is(.gbu-l-kicker, .gbu-r-kicker)[data-gbu-role="review"] { color: var(--gold) !important; }
html body :is(.gbu-l-kicker, .gbu-r-kicker)[data-gbu-role="free"] { color: var(--green) !important; }
html body :is(.gbu-l-kicker, .gbu-r-kicker)[data-gbu-role="pc"] { color: var(--cyan) !important; }
html body :is(.gbu-l-kicker, .gbu-r-kicker)[data-gbu-role="console"] { color: #ff9d34 !important; }
html body :is(.gbu-l-kicker, .gbu-r-kicker)[data-gbu-role="guide"] { color: #b9a6ff !important; }

/* ---------- 19. Phones: the home-screen card only after the consent banner is gone (also enforced in JS) ---------- */
html body.gbu-consent-open #gbHomeScreen { display: none !important; }

/* ---------- 20. Tap targets on phones ---------- */
@media (max-width: 900px) {
  html body :is(.gb-tags a, .pagination a, .gb-seo-archive-links a, .gb-related-grid h3 a, .gb-game-related li a, .footer-pages a, .gl-foot a, .gl-foot button) { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  html body .gb-seo-archive-links { gap: 8px !important; }
}

/* Search popover for pages whose header had no search (articles, categories, 404). */
html body dialog.gbu-search { margin: 0 auto; top: calc(var(--gbu-hdr) + 12px); width: min(640px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #0b0612; color: var(--tx-1); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
html body dialog.gbu-search::backdrop { background: rgba(0, 0, 0, .6); }
html body dialog.gbu-search form { display: flex; gap: 8px; padding: 16px; margin: 0; }
html body dialog.gbu-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: #05020a; color: #fff; font: 500 16px/1.2 var(--font-sans); }
html body dialog.gbu-search .gbu-search-close { padding: 0 !important; width: 44px; font-size: 16px !important; }
@media (max-width: 900px) { html body dialog.gbu-search { top: calc(56px + 8px); } }

} /* end @layer gbu */

/* Reduced motion: shorter, calmer transitions, but the logo pulse keeps running (owner's choice). */
@media (prefers-reduced-motion: reduce) {
  @layer gbu {
    html body :is(header.site-header, header.gb-newsroom-header)::before,
    html body :is(header.site-header, header.gb-newsroom-header) > *,
    html body :is(#gbMobileBottomNav, nav.gl-bar) { transition-duration: .01s !important; }
    html body #channelStrip .gbu-ch-img { transition: none !important; transform: none !important; }
  }
}

/* v2.2: photo boxes keep their size without relying on aspect-ratio (Safari collapsed them to 0 height in the grid). */
@layer gbu {
  html body #cards > .article-card .card-art { aspect-ratio: auto !important; height: 0 !important; min-height: 0 !important; padding: 56.25% 0 0 !important; position: relative !important; align-self: start !important; }
  html body #cards > .article-card .card-art > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  @media (min-width: 1100px) {
    html body #contentHub #cards > .article-card:is(:first-child, [data-gbp-slot="1"]) .card-art { padding-top: 46.5% !important; }
  }
  html body .gb-grid > .gb-post-card .gb-post-card-media { position: relative !important; display: block !important; height: 0 !important; padding-top: 56.25% !important; overflow: hidden !important; }
  html body .gb-grid > .gb-post-card .gb-post-card-media img { position: absolute !important; inset: 0 !important; height: 100% !important; aspect-ratio: auto !important; }
}
/* GamingBroject light theme ("Day mode"), s130, 2026-10-22. Live copy in wp-content/gb-ui/, loaded by the mu-plugin
 * gb-ui-live-s130.php; /testqq/gb-light.css is the lab copy.
 * For readers who do not like the dark site. Dark stays the default; the reader switches with the
 * sun/moon button in the header and the choice is remembered (localStorage "gb:theme").
 * Active only while <html data-gb-theme="light">. Loaded after gb-ui-v2.css.
 *
 * Cascade: everything lives in @layer gbl, and the page declares "@layer gbl, gbu;" BEFORE
 * gb-ui-v2.css. For !important declarations an earlier layer beats a later one and every unlayered
 * rule, so these rules win over gbu, gb-polish, the theme and the plugins whatever their
 * specificity. Inside gbl, specificity decides: the catch-alls below use :where() and weigh only
 * (0,2,0) (":root[data-gb-theme]"), so every named rule after them (0,3,0)+ overrides them.
 *
 * Never touched: the Gaming Room (#roomStage, section#home: it is a photograph of a dark room),
 * the arcade overlays (a game screen), the WP admin bar, video frames, photographs. */

/* Theme switch: the new theme opens as a circle from the button (gb-light.js drives it through the
 * View Transitions API). Without the API, or with reduced motion, the switch is instant. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.gbt-switching *, :root.gbt-switching *::before, :root.gbt-switching *::after { transition: none !important; }

@layer gbl {

/* ---------- Tokens ---------- */
:root[data-gb-theme="light"] {
  color-scheme: light !important;
  --gl-bg: #f4f3f6;      /* ground: cool paper, a breath of the brand's violet-black */
  --gl-card: #ffffff;    /* panels and cards: one tone step up */
  --gl-s2: #eceaf0;      /* tiles, photo placeholders, inputs, the footer field */
  --gl-s3: #e2dfe8;      /* pressed / hover step */
  --gl-ink: #15121b;     /* 16.8:1 on the ground */
  --gl-body: #26222d;    /* long-form reading */
  --gl-tx2: #4f4958;     /* 7.8:1 */
  --gl-tx3: #6a6474;     /* 5.2:1 */
  --gl-red: #d1123a;     /* the brand red, deepened for white: 4.9:1 as text, 5.4:1 under white text */
  --gl-red-2: #b30d31;   /* pressed */
  --gl-red-wash: rgba(209, 18, 58, .07);
  --gl-red-line: rgba(209, 18, 58, .32);
  --gl-teal: #007385;    /* the cyan, for links and "free": 5.0:1 */
  --gl-gold: #9a6400;    /* review scores: 4.5:1 */
  --gl-gold-fill: #c58a00;
  --gl-green: #0a7a4c;
  --gl-line: rgba(21, 18, 27, .1);
  --gl-line-2: rgba(21, 18, 27, .18);
  --gl-float: 0 1px 2px rgba(21, 18, 27, .06), 0 14px 36px -10px rgba(21, 18, 27, .22);
  /* UI v2 tokens, remapped, so every gbu rule that uses them follows. */
  --tx-1: #15121b !important; --tx-2: #4f4958 !important; --tx-3: #6a6474 !important;
  --red: #d1123a !important; --red-btn: #d1123a !important; --cyan: #007385 !important;
  --gold: #9a6400 !important; --green: #0a7a4c !important;
  --surface-1: #ffffff !important; --surface-2: #eceaf0 !important;
  --line-1: rgba(21, 18, 27, .1) !important; --line-2: rgba(21, 18, 27, .18) !important;
}

/* ---------- Frame ---------- */
:root[data-gb-theme="light"],
:root[data-gb-theme="light"] body { background: var(--gl-bg) !important; color: var(--gl-ink) !important; }

/* Catch-all: every text in the page turns to ink; neon glows, light hairlines and halos go.
 * Named rules below put back secondary greys, accents and text on colour. */
:root[data-gb-theme="light"] :where(body *):not(:where(#roomStage, #roomStage *, #home, #home *, .gbr-dots, .gbr-dots *, .arcade-overlay, .arcade-overlay *, .arcade-select-overlay, .arcade-select-overlay *, .arcade-name-overlay, .arcade-name-overlay *, #wpadminbar, #wpadminbar *, .gb-ytf, .gb-ytf *, img, video, iframe, canvas, picture)) {
  color: var(--gl-ink) !important;
  text-shadow: none !important;
  border-color: var(--gl-line) !important;
  box-shadow: none !important;
}
:root[data-gb-theme="light"] ::selection { background: rgba(209, 18, 58, .16) !important; color: var(--gl-ink) !important; }
:root[data-gb-theme="light"] body :focus-visible { outline-color: var(--gl-teal) !important; }

/* Form fields (not checkboxes or buttons). */
:root[data-gb-theme="light"] body :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="hidden"])):not(#wpadminbar *) {
  background: var(--gl-card) !important; color: var(--gl-ink) !important; border: 1px solid var(--gl-line-2) !important;
}
:root[data-gb-theme="light"] body :is(textarea, input)::placeholder { color: var(--gl-tx3) !important; opacity: 1 !important; }

/* ---------- Bars: headers, the phone tab bar ---------- */
:root[data-gb-theme="light"] :is(header.site-header, header.gb-newsroom-header)::before {
  background: rgba(255, 255, 255, .94) !important; background-image: none !important; box-shadow: 0 1px 0 var(--gl-line) !important;
}
:root[data-gb-theme="light"] header.gl-top { background: rgba(255, 255, 255, .96) !important; background-image: none !important; box-shadow: 0 1px 0 var(--gl-line) !important; }
:root[data-gb-theme="light"] nav.gl-nav { background: var(--gl-card) !important; background-image: none !important; }
:root[data-gb-theme="light"] nav.gl-bar { background: rgba(255, 255, 255, .97) !important; background-image: none !important; box-shadow: var(--gl-float) !important; border-color: var(--gl-line) !important; }
:root[data-gb-theme="light"] .gl-find > form { background: var(--gl-card) !important; box-shadow: var(--gl-float) !important; }

/* ---------- Footers and the cookie banner ---------- */
:root[data-gb-theme="light"] :is(footer#community, footer.gb-site-footer, footer.gl-foot) { background: var(--gl-s2) !important; background-image: none !important; }
:root[data-gb-theme="light"] :is(footer#community, footer.gb-site-footer, footer.gl-foot)::before { background: none !important; }
:root[data-gb-theme="light"] :is(#consentBanner, #gbConsentBanner, dialog#consentDialog, dialog.gb-consent-dialog) { background: var(--gl-card) !important; background-image: none !important; box-shadow: var(--gl-float) !important; }

/* ---------- Page fields: flat ground instead of the dark gradients ---------- */
:root[data-gb-theme="light"] :is(#contentHub, #freeGamesRadar) { background: transparent !important; background-image: none !important; }
:root[data-gb-theme="light"] :is(#contentHub, #freeGamesRadar)::before,
:root[data-gb-theme="light"] :is(#contentHub, #freeGamesRadar)::after { background: none !important; opacity: 0 !important; }

/* ---------- Surfaces: one tone step above the ground ---------- */
:root[data-gb-theme="light"] :is(article.article-card, article.gb-post-card, .gb-related-grid > article, aside.gb-key-facts, section.gbq-game-card,
  section.gb-author-box, section#comments, aside.gb-game-related, aside.gb-source-box, aside.gbq-read-next, aside.gb-seo-game-links,
  article.gb-free-card, #channelStrip, article.gbrw, a#gbvpRoomEntry, [id^="gb-aa-more"], section.gb-article-signoff, aside.gbp3-frontend-social-launcher) {
  background: var(--gl-card) !important; background-image: none !important;
}
:root[data-gb-theme="light"] [id^="gb-aa-more"] { box-shadow: var(--gl-float) !important; }
:root[data-gb-theme="light"] :is(#channelStrip, article.gbrw)::before,
:root[data-gb-theme="light"] :is(#channelStrip, article.gbrw)::after { background: none !important; box-shadow: none !important; }

/* Photo placeholders: the colour seen while a picture loads, and around letterboxed ones. */
:root[data-gb-theme="light"] :is(.card-art, .gb-free-media, .channel-play, .gb-card-byline > img, .gbrw-media, .gbrw-face, .gb-author-box-avatar,
  .gb-related-media, .gb-post-card-media, .gbu-l-img, .gbvp-room-thumb, figure.gb-article-hero, #contentHub a > img) {
  background-color: var(--gl-s2) !important;
}
:root[data-gb-theme="light"] :is(.gb-free-media, .channel-play, .gb-post-card-media) { background-image: none !important; }
:root[data-gb-theme="light"] .card-art::after { background: none !important; }
:root[data-gb-theme="light"] .gl-ph { background-color: var(--gl-s2) !important; background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) !important; background-size: 220% 100% !important; }

/* Small panels inside the Top 10 / Hot / Free strip. */
:root[data-gb-theme="light"] :is(.channel-copy > strong, .channel-copy > span) { background: none !important; }

/* ---------- Secondary text ---------- */
/* The colour lists below use :where(), so each weighs (0,2,1) whatever it names (an id in an :is() list would lift the
 * whole list): between them the later rule wins, in this order: secondary grey, accent, text on colour. */
:root[data-gb-theme="light"] body :where(.gl-nav > a, .gl-intro, .gbvp-room-subtitle, .gl-sum, .gbrw-sum, .gb-offer-when, .gb-offer-type, .gbu-footer-brand > p,
  footer li > a, footer li > button, footer span > a, .gl-bar > a, #gbConsentDescription, #consentDescription, #consentManage, #cookieSettingsButton, .gb-cookie-settings,
  .gb-newsroom-nav > a, .gb-breadcrumbs > a, .gb-article-deck, .gbu-byline, .gbu-byline > span, .gb-article-publish-meta time, .gbq-ctx-facts > li,
  .gb-tags > a, .gb-author-box p, .gbu-comments-empty, .gbu-verdict-score span, a.nav-btn.arcade-sign, #sectionIntro, .v31-subcat-btn,
  .card-summary, .gb-seo-archive-links > a, .gb-free-copy > p, .gb-free-facts > span, .gbp3-frontend-social-launcher > span, .gb-intro > p, p.gb-intro,
  .gb-subcategory-nav > a, .gb-post-card-body > p, .gb-phase-intro, .gb-seo-more-links > summary) {
  color: var(--gl-tx2) !important;
}
:root[data-gb-theme="light"] body :where(.gl-meta, .gbrw span > small, .gbu-footer-col > h2, .gbu-footer-legal-line > span, .gb-breadcrumbs > span, .gbu-crumb-title,
  .gb-article-publish-meta > span:not(.gbu-byline), .gb-aa-panel-title, .gb-tags > span, .gb-related-grid article > small, .gbu-score-pill > small, .gbu-verdict-score small,
  .gb-author-box small, .gb-signoff-copy small, .gb-source-box > span, .card-meta, .gb-card-byline-copy > small, .gbrw-kind, .gbu-l-meta > time,
  .gb-free-action > small, #contentHub a > time, .gb-article-video-head > small, .gb-offer-store-label, .gb-post-meta, .gb-post-meta > time) {
  color: var(--gl-tx3) !important;
}
/* Long-form reading: a touch softer than headline ink. */
:root[data-gb-theme="light"] body .gb-article-content :is(p, li, blockquote, figcaption, td, th, dd),
:root[data-gb-theme="light"] body :is(.gb-key-facts li, .gbq-ctx-p) { color: var(--gl-body) !important; }

/* ---------- Accent text ---------- */
:root[data-gb-theme="light"] body :where(.gl-kick, .gbvp-room-kicker, .gbvp-room-title > em, #latest > h2, .gl-sec > h2, .gb-offer-head, .gb-offer-rel,
  .gb-kicker, .gb-kicker > a, .gb-kicker > span, .gb-key-facts > div > span, #gb-editor-take-title, .gb-article-video-head > span, #sectionKicker,
  .gb-pixel-label, .channel-copy > small, .gbrw-eyebrow, .gb-404-latest, #bootBrand, .boot-line, .boot-progress-head > span, #bootPct, .gb-aa-label) {
  color: var(--gl-red) !important;
}
:root[data-gb-theme="light"] body :where(.gb-source > a, .gb-preferred-source > a, a.gbq-inline, .gbq-ctx-p a, .gbq-read-next a, .gb-seo-game-links a,
  .gb-game-related a, .gb-release-info a, .gbu-sec-head > a, .gbu-l-kicker, .gbu-r-kicker, .gb-phase-kicker, .gb-free-store > span, a.gb-card-read,
  .gl-sec h2 > a, .gl-sec h2 > a > span) {
  color: var(--gl-teal) !important;
}
:root[data-gb-theme="light"] body .gb-article-content :is(p, li) a:not([class*="btn"], [class*="button"]) { color: var(--gl-teal) !important; text-decoration-color: rgba(0, 115, 133, .4) !important; }
:root[data-gb-theme="light"] body :where(.gbu-verdict-score strong, .gbu-verdict-bars li > b, .gbq-ctx-facts li > b) { color: var(--gl-gold) !important; }

/* ---------- Text and fills on colour ---------- */
:root[data-gb-theme="light"] body :where(.gl-find form > button, .gl-badge, .gbrw-stamp, .gb-offer-pill, [id$="onsentAccept"], #consentSave, .gb-consent-actions > button.is-primary, .gb-ytf__play, .gbu-btn--primary,
  .gbp3-frontend-social-launcher > button, .card-badge, #gbLatestMoreButton, .gb-404-search > button, span.page-numbers.current, .gb-article-action > small) {
  background-color: var(--gl-red) !important; background-image: none !important; color: #fff !important; border-color: var(--gl-red) !important;
}
:root[data-gb-theme="light"] body :where(.gl-find form > button, .gl-badge, .gbrw-stamp, .gb-offer-pill, [id$="onsentAccept"], #consentSave, .gb-consent-actions > button.is-primary, .gbu-btn--primary,
  .gbp3-frontend-social-launcher > button, .card-badge, #gbLatestMoreButton, .gb-404-search > button, span.page-numbers.current, .gb-article-action > small) * { color: #fff !important; }
:root[data-gb-theme="light"] body .gb-article-action > small { border-color: var(--gl-card) !important; }
:root[data-gb-theme="light"] body .card-badge.gb-offer-badge { background-color: var(--gl-green) !important; border-color: var(--gl-green) !important; }
:root[data-gb-theme="light"] #gbLatestMoreButton::after { background: none !important; }
@media (hover: hover) and (pointer: fine) {
  :root[data-gb-theme="light"] body :is(#gbLatestMoreButton, [id$="onsentAccept"], .gbu-btn--primary, .gb-404-search > button, .gl-find form > button):hover { background-color: var(--gl-red-2) !important; }
}
/* Dots and underlines that are the accent. */
:root[data-gb-theme="light"] :is(.gbvp-room-kicker, .card-meta, .gb-newsroom-nav > a, a.nav-btn.arcade-sign)::before,
:root[data-gb-theme="light"] :is(.gbvp-room-kicker, .card-meta, .gb-newsroom-nav > a, a.nav-btn.arcade-sign)::after { box-shadow: none !important; }
:root[data-gb-theme="light"] body :is(.gbrw-dot, .gb-offer-status-dot, .boot-caret, #bootBar) { background-color: var(--gl-red) !important; }

/* Text that sits on a photograph keeps its white. */
:root[data-gb-theme="light"] body :is(.gl-roomcard > span, .gl-roomcard > span *) { color: #fff !important; }

/* ---------- Coloured frames that carry meaning ---------- */
:root[data-gb-theme="light"] body :is(article.gbrw, a.gl-roomcard, a#gbvpRoomEntry, aside.gbp3-frontend-social-launcher) { border-color: var(--gl-red-line) !important; }
:root[data-gb-theme="light"] body :is(.gbvp-room-arrow) { border-color: var(--gl-red-line) !important; color: var(--gl-red) !important; }
:root[data-gb-theme="light"] body a.gb-article-action.gb-aa-control { border-color: var(--gl-red-line) !important; }
:root[data-gb-theme="light"] body button.gb-article-action.gb-aa-control { border-color: rgba(0, 115, 133, .35) !important; }
:root[data-gb-theme="light"] body :is(.gb-free-action > a, .gbrw-cta, .gb-seo-archive-links > a, .gb-seo-more-links > summary, .v31-subcat-btn, .gb-tags > a, .gbu-footer-social > a) { border-color: var(--gl-line-2) !important; }

/* Free-game offer chip (was red neon on black). */
:root[data-gb-theme="light"] body span.gb-offer-widget { background: var(--gl-red-wash) !important; border-color: var(--gl-red-line) !important; }

/* Our Take, the review verdict, the score pill. */
:root[data-gb-theme="light"] body section.gb-editor-take { background: var(--gl-red-wash) !important; background-image: none !important; border-color: var(--gl-red-line) !important; }
:root[data-gb-theme="light"] body section#gbu-verdict { background: rgba(154, 100, 0, .06) !important; background-image: none !important; border-color: rgba(154, 100, 0, .35) !important; }
:root[data-gb-theme="light"] body .gbu-verdict-score { border-color: var(--gl-gold) !important; }
:root[data-gb-theme="light"] body .gbu-bar { background: var(--gl-s2) !important; }
:root[data-gb-theme="light"] body .gbu-bar > i { background: var(--gl-gold-fill) !important; background-image: none !important; box-shadow: none !important; }
:root[data-gb-theme="light"] body a.gbu-score-pill { background: rgba(154, 100, 0, .07) !important; border-color: rgba(154, 100, 0, .45) !important; }
:root[data-gb-theme="light"] body a.gbu-score-pill strong { color: var(--gl-gold) !important; }

/* Category sub-navigation chips. */
:root[data-gb-theme="light"] body .gb-subcategory-nav > a { background: var(--gl-card) !important; border-color: var(--gl-line-2) !important; }

/* Video block: the frame stays black (it is the player); its head becomes a quiet band. */
:root[data-gb-theme="light"] body .gb-article-video-head { background: var(--gl-s2) !important; background-image: none !important; }
:root[data-gb-theme="light"] body .gb-article-video-frame::before { background: var(--gl-red) !important; background-image: none !important; }
:root[data-gb-theme="light"] body :is(.gb-article-content ul, .gb-key-facts ul) > li::before { background-color: var(--gl-teal) !important; box-shadow: none !important; }

/* Skip link: dark chip on the light page. */
:root[data-gb-theme="light"] body a.gb-skip-link { background: var(--gl-ink) !important; color: #fff !important; }

/* Phone header search: its icon stroke is hard-coded white. */
:root[data-gb-theme="light"] body header.gl-top .gl-find > summary svg { stroke: currentColor !important; }

/* Phone social button next to the search. */
:root[data-gb-theme="light"] body #gbvpSocialToggle { background: var(--gl-card) !important; background-image: none !important; border-color: var(--gl-line-2) !important; }

/* The logo in daylight: the same artwork with the neon switched off. gb-logo-day.webp keeps the letter tubes, drops the
 * glow (pink haze on white) and sets them in the brand red; it sits next to this file. The link paints it; the original
 * image stays in place, invisible, for its alt text. The neon pulse stops: a printed sign does not flicker. */
:root[data-gb-theme="light"] body :is(header .logo-btn, header .gb-newsroom-brand, header.gl-top .gl-logo) {
  background: url("gb-logo-day.webp?v=1") center / contain no-repeat !important;
}
:root[data-gb-theme="light"] body :is(header .logo-btn, header .gb-newsroom-brand, header.gl-top .gl-logo) img { opacity: 0 !important; animation: none !important; }
/* Narrow headers put the logo against the screen edge; the crisp day logo needs the page's 12px margin. */
@media (max-width: 1100px) {
  :root[data-gb-theme="light"] body :is(header.site-header .logo-btn, header.gb-newsroom-header .gb-newsroom-brand) { margin-left: 12px !important; }
}
:root[data-gb-theme="light"] body .gbu-footer-brand img { content: url("gb-logo-day.webp?v=1"); filter: none !important; animation: none !important; }

/* ---------- The Gaming Room on a light page: a framed window ----------
 * The room stays itself (a photograph of a dark room with its neon signs), but sits inside the page like the cards do:
 * page-coloured margins and rounded corners. A rounded clip-path on #home draws it, so the room's geometry, hotspots and
 * the GSAP light-up never move; it also holds on phones, where #home scrolls the room sideways as a panorama (an overlay
 * inside it would scroll away). The clip starts below the fixed header: --gbl-room-top is the stage's offset in #home,
 * set by gb-light.js (the fallbacks match the theme's 72px / 100px). Nothing inside #home is fixed, so nothing else is cut. */
:root[data-gb-theme="light"] #home {
  --gbl-gap: 20px; --gbl-r: 20px; --gbl-top: var(--gbl-room-top, 72px);
  clip-path: inset(calc(var(--gbl-top) + var(--gbl-gap)) var(--gbl-gap) var(--gbl-gap) round var(--gbl-r)) !important;
}
@media (max-width: 900px) {
  :root[data-gb-theme="light"] #home { --gbl-gap: 12px; --gbl-r: 16px; --gbl-top: var(--gbl-room-top, 100px); }
}
/* Lights on: a daytime room is brighter. Only the photograph layers, not the signs. */
:root[data-gb-theme="light"] #roomStage .gbx-cam { filter: brightness(1.25) contrast(.95) !important; }
/* The room's own controls become light chips (they are page controls, not signs in the room). */
:root[data-gb-theme="light"] #roomStage .room-heading {
  margin-top: 20px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .96) !important; background-image: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 2px rgba(21, 18, 27, .12), 0 10px 28px -8px rgba(0, 0, 0, .45) !important;
}
@media (max-width: 900px) { :root[data-gb-theme="light"] #roomStage .room-heading { margin-top: 12px !important; } }
:root[data-gb-theme="light"] #roomStage .room-heading h1 { color: var(--gl-ink) !important; text-shadow: none !important; }
:root[data-gb-theme="light"] #roomStage .room-heading h1 span { color: var(--gl-red) !important; text-shadow: none !important; }
:root[data-gb-theme="light"] #gbDesktopRoomHide {
  background: rgba(255, 255, 255, .96) !important; color: var(--gl-ink) !important; border-color: rgba(21, 18, 27, .14) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 2px rgba(21, 18, 27, .12), 0 10px 28px -8px rgba(0, 0, 0, .45) !important;
}
:root[data-gb-theme="light"] #gbDesktopRoomHide svg { stroke: currentColor !important; }
:root[data-gb-theme="light"] :is(#gbRoomGuide, #roomStage .mobile-room-hint) {
  background: rgba(255, 255, 255, .96) !important; background-image: none !important; color: var(--gl-ink) !important; border-color: rgba(21, 18, 27, .14) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 2px rgba(21, 18, 27, .12), 0 10px 28px -8px rgba(0, 0, 0, .45) !important;
}
:root[data-gb-theme="light"] :is(#gbRoomGuide, #roomStage .mobile-room-hint) * { color: inherit !important; text-shadow: none !important; }
:root[data-gb-theme="light"] :is(#gbRoomGuide, #roomStage .mobile-room-hint) :is(svg, i, b) { color: var(--gl-teal) !important; }

/* Dark islands keep the dark look: the room, the arcade, the video player. */
:root[data-gb-theme="light"] #roomStage { box-shadow: none !important; }
:root[data-gb-theme="light"] :is(#home, .gbr-dots, .arcade-overlay, .arcade-select-overlay, .arcade-name-overlay, .gb-ytf) {
  color-scheme: dark;
  color: #f7f5fb !important;
  --tx-1: #f7f5fb !important; --tx-2: #c9c3d1 !important; --tx-3: #9a93a5 !important;
  --red: #ff2948 !important; --red-btn: #df1a3e !important; --cyan: #21eaff !important; --gold: #ffd35a !important; --green: #43f5a0 !important;
  --surface-1: #0c0712 !important; --surface-2: #130b1b !important; --line-1: rgba(255, 255, 255, .1) !important; --line-2: rgba(255, 255, 255, .18) !important;
}

/* Top 10 / Hot / Free tiles in their phone layout. */
:root[data-gb-theme="light"] body a.channel-card { background: var(--gl-card) !important; background-image: none !important; border-color: var(--gl-line) !important; }

/* The full theme's bottom bar on phones (Home / Latest / Free / Search / Arcade). */
:root[data-gb-theme="light"] body #gbMobileBottomNav { background: rgba(255, 255, 255, .97) !important; background-image: none !important; box-shadow: var(--gl-float) !important; border-color: var(--gl-line) !important; }
:root[data-gb-theme="light"] body #gbMobileBottomNav > :is(a, button) { color: var(--gl-tx2) !important; background: none !important; }
:root[data-gb-theme="light"] body #gbMobileBottomNav > :is(a, button) * { color: inherit !important; }
:root[data-gb-theme="light"] body #gbMobileBottomNav > .is-active { color: var(--gl-red) !important; background: var(--gl-red-wash) !important; }

/* ---------- Overlays: search, cookie settings, the social panels ---------- */
:root[data-gb-theme="light"] body :is(.dialog-shell, dialog.gbu-search, #gbDesktopSocialPanel, #gbvpSocialPanel) {
  background: var(--gl-card) !important; background-image: none !important; box-shadow: var(--gl-float) !important; border-color: var(--gl-line) !important;
}
:root[data-gb-theme="light"] body :is(.dialog-shell, #gbDesktopSocialPanel, #gbvpSocialPanel)::before,
:root[data-gb-theme="light"] body :is(.dialog-shell, #gbDesktopSocialPanel, #gbvpSocialPanel)::after { background: none !important; box-shadow: none !important; }
:root[data-gb-theme="light"] body .dialog-head { background: var(--gl-card) !important; background-image: none !important; }
:root[data-gb-theme="light"] body :is(.search-result, .gbds-link, .gbvp-social-link) { background: var(--gl-s2) !important; background-image: none !important; border-color: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  :root[data-gb-theme="light"] body :is(.search-result, .gbds-link, .gbvp-social-link):hover { background: var(--gl-s3) !important; }
}
:root[data-gb-theme="light"] body :where(.dialog-kicker) { color: var(--gl-red) !important; }
:root[data-gb-theme="light"] body :where(.search-result > small, #consentSettingsDescription, .dialog-shell label small, #gbDesktopSocialPanel small, #gbvpSocialPanel div > span) { color: var(--gl-tx2) !important; }

/* ---------- The boot screen ("Game on systems"), in daylight ---------- */
:root[data-gb-theme="light"] #boot { background: var(--gl-bg) !important; background-image: none !important; }
:root[data-gb-theme="light"] #boot::before, :root[data-gb-theme="light"] #boot::after { background: none !important; opacity: 0 !important; }
:root[data-gb-theme="light"] #boot .progress-track { background: var(--gl-red-wash) !important; border-color: var(--gl-red-line) !important; }

} /* @layer gbl */

/* ---------- The theme button (both themes) ---------- */
@layer gbl {
.gb-theme-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; cursor: pointer; }
.gb-theme-toggle svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.gb-theme-toggle :is(.gbt-sun, .gbt-moon) { transform-box: view-box; transform-origin: 12px 12px; transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), transform 320ms cubic-bezier(.23, 1, .32, 1); }
/* Dark page: the sun invites to daylight. Light page: the moon leads back. */
.gb-theme-toggle .gbt-moon { opacity: 0; transform: rotate(-70deg) scale(.6); }
:root[data-gb-theme="light"] .gb-theme-toggle .gbt-sun { opacity: 0; transform: rotate(70deg) scale(.6); }
:root[data-gb-theme="light"] .gb-theme-toggle .gbt-moon { opacity: 1; transform: none; }
.gb-theme-toggle:active { transform: scale(.94) !important; transition: transform 120ms cubic-bezier(.23, 1, .32, 1) !important; }
/* Phone header (lite pages): same box as the social button beside it. */
header.gl-top .gb-theme-toggle {
  display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important;
  border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .04) !important; color: var(--tx-1, #f7f5fb) !important;
}
:root[data-gb-theme="light"] header.gl-top .gb-theme-toggle { border-color: var(--gl-line-2) !important; background: var(--gl-card) !important; color: var(--gl-ink) !important; }
@media (prefers-reduced-motion: reduce) {
  .gb-theme-toggle :is(.gbt-sun, .gbt-moon) { transition: opacity 120ms linear; transform: none !important; }
}
}