/* GamingBroject · humanize layer, live copy (s142, 25/10/2026; tested on /testqq/ as gb-humanize.css 5b58bbce).
   Active only on <html class="gb-human">, which the loader's inline head script sets before paint (?gbhuman=0 turns it off
   for the tab). Lives in @layer gbl with !important, so it wins over the bundle, the light theme and inline slot colours.
   Left alone on purpose: the Gaming Room, the logo, Halloween, the arcade and the boot screen.
   Headings use Barlow Condensed 700 (OFL, latin subset, local file next to this one); body copy stays Inter. */
@font-face {
  font-family: "GB Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("barlow-condensed-latin-700.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer gbl {
  html.gb-human {
    --hz-accent: #ff3158;
    --hz-warm: #c9b8a6;
    --hz-green: #3ccf7e;
    --hz-r-s: 6px;
    --hz-r-l: 14px;
  }
  html.gb-human[data-gb-theme="light"] { --hz-warm: #7a6450; }

  /* Small caps-with-tracking only for section titles; everything else reads in sentence case. */
  html.gb-human body *:not(:is(#sectionTitle, .section-title, #gbu-latest-h, [id^="gbu-row-"], #freeGamesRadarTitle, .gb-phase-title,
      #roomStage, [id^="gbhw"], body [class*="gbhw"], body [class*="arcade"], [id*="arcade"], body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"], .module-box, .space-manual)):not(:is(
      #roomStage, header nav, [id^="gbhw"], body [class*="gbhw"], body [class*="arcade"], [id*="arcade"], body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"], .module-box, .space-manual) *) {
    text-transform: none !important;
  }
  html.gb-human :is(small, summary, button, .read-btn, [class*="kicker"], [class*="badge"], [class*="label"], .card-meta, .gb-offer-head,
      .gb-offer-type, .gb-free-store span, .gb-free-facts span, footer h2, footer h3, .gbu-btn, .consent-btn, .gb-latest-more-button, .gbrw-stamp, .gbrw-eyebrow):not(:is(
      #roomStage, [id^="gbhw"], body [class*="gbhw"], body [class*="arcade"], [id*="arcade"], body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"], .module-box) *) {
    letter-spacing: normal !important;
  }

  /* Glow stays with the room, the logo and Halloween. */
  html.gb-human body *:not(:is(#roomStage, header, [id^="gbhw"], body [class*="gbhw"], body [class*="arcade"], [id*="arcade"], body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"])):not(:is(
      #roomStage, header, [id^="gbhw"], body [class*="gbhw"], body [class*="arcade"], [id*="arcade"], body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"]) *) {
    text-shadow: none !important;
  }
  html.gb-human :is(.card-badge, .gb-offer-badge, .gb-latest-more-button, .consent-btn, .gbu-btn, .read-btn, .v31-subcat-btn, .switch-btn,
      .icon-btn, .gbc-btn, .channel-play, .article-card, a.channel-card, .gbds-link, .gbu-footer-social a, .gb-article-action,
      article.gbrw, .gbrw-stamp, .gbrw-dot, .gbrw-cta),
  html.gb-human :is(.card-badge, .gb-latest-more-button, .consent-btn, .gbu-btn, .read-btn, .v31-subcat-btn, .switch-btn, .icon-btn,
      .gbc-btn, .article-card, a.channel-card, .gbds-link, .gbu-footer-social a, .gb-article-action):hover {
    box-shadow: none !important;
  }
  html.gb-human :is(.gb-latest-more-button, .consent-btn, .gbu-btn, .read-btn, .v31-subcat-btn, .switch-btn, .icon-btn, .gbc-btn):focus-visible {
    outline: 2px solid var(--hz-accent) !important;
    outline-offset: 2px !important;
  }

  /* Two corner sizes: 6px for controls and labels, 14px for cards and panels. Avatars stay round. */
  html.gb-human :is(button, .read-btn, .icon-btn, .card-badge, .v31-subcat-btn, .switch-btn, summary, .gbu-btn, .consent-btn, input, select,
      textarea, .gb-offer-widget, .gbc-btn, .gbds-link, .gbu-footer-social a, .gb-latest-more-button, .gb-article-action, .channel-play,
      .gbu-l-kicker, .gbu-r-kicker, .gb-free-action a, .toast, .gb-free-facts span, .gb-seo-archive-links a, .gbc-off, .gbc-chip,
      .gb-skip-link, .gbrw-stamp, .gbrw-cta):not(:is(.close-btn, .gbds-close, [class*="avatar"], #roomStage *, body [class*="gbhw"], [id^="gbhw"], body [class*="arcade"],
      [id*="arcade"], body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"])) {
    border-radius: var(--hz-r-s) !important;
  }
  html.gb-human :is(.article-card, .card-art, .card-art img, .gb-free-card, .gbu-l-img, .gbu-row-list img, .channel-strip, .v31-subcategory-shell, .consent-banner,
      .dialog-shell, .gb-key-facts, .gb-release-info, .module-box, .gbc-deal, .gbc-msg, .gbc-author, .gbc-card, article.gbrw) {
    border-radius: var(--hz-r-l) !important;
  }

  /* One quiet colour for labels; red stays the brand colour, green only for Free / Active. */
  html.gb-human :is([class*="kicker"], .card-meta.hz-cat):not(:is(#roomStage, body [class*="gbhw"], [id^="gbhw"], body [class*="arcade"], body [class*="boot"]) *) {
    color: var(--hz-warm) !important;
  }
  html.gb-human :is(.gbu-l-kicker, .gbu-r-kicker) {
    background: none !important;
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html.gb-human a.channel-card { --slot-color: var(--hz-accent) !important; }
  html.gb-human .gb-offer-widget.is-upcoming :is(.gb-offer-head, .gb-offer-rel) { color: var(--hz-warm) !important; }
  html.gb-human .gb-offer-widget.is-ended :is(.gb-offer-head, .gb-offer-rel) { color: #a39a92 !important; }
  html.gb-human[data-gb-theme="light"] .gb-offer-widget.is-ended :is(.gb-offer-head, .gb-offer-rel) { color: #6f6660 !important; }
  html.gb-human .card-meta.hz-cat {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  html.gb-human .article-card:has(.card-meta.hz-cat) .card-art > .card-badge:not(.gb-offer-badge) { display: none !important; }
  html.gb-human :is(a.channel-card small, .gb-free-store span, .gb-free-store small) { color: var(--hz-warm) !important; }
  html.gb-human .gbu-sec-head a { color: var(--hz-accent) !important; }
  html.gb-human .gb-article-action.gb-aa-native { color: inherit !important; border-color: rgba(127, 127, 127, 0.3) !important; }
  html.gb-human .card-badge:not(.gb-offer-badge) {
    background: rgba(12, 10, 9, 0.72) !important;
    border: 0 !important;
    color: #f4ece4 !important;
    font-weight: 600 !important;
  }
  html.gb-human .card-badge.gb-offer-badge {
    background: var(--hz-green) !important;
    border: 0 !important;
    color: #06210f !important;
    font-weight: 700 !important;
  }

  /* One centred "Load more stories", flat. */
  html.gb-human #gbLatestMore {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
  html.gb-human .gb-latest-more-button {
    background: var(--hz-accent) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  html.gb-human .gb-latest-more-button::before,
  html.gb-human .gb-latest-more-button::after {
    content: none !important;
    display: none !important;
  }

  /* Heading font: Barlow Condensed (Panos chose option 1 of 3 on 25/10). Body copy stays Inter. */
  html.gb-human :is(h1, h2, h3, .card-title, .gbu-l-title, .gbu-r-title) :is(a, span, strong):not(:is(#roomStage, body [class*="gbhw"], [id^="gbhw"]) *),
  html.gb-human :is(h1, h2, h3, .card-title, .gbu-l-title, .gbu-r-title):not(:is(#roomStage, body [class*="gbhw"], [id^="gbhw"], body [class*="arcade"], [id*="arcade"],
      body [class*="snake"], [id*="snake"], body [class*="boot"], [id*="boot"], .space-manual, footer) *):not(body [class*="gbhw"], [id^="gbhw"], [id*="snake"]) {
    font-family: "GB Barlow Condensed", Inter, system-ui, sans-serif !important;
    font-size-adjust: 0.53;
  }
  html.gb-human :is(h1, h2, h3, .card-title) { letter-spacing: 0.005em; }

  /* Photos: never crop the cover art. Cards keep the 16:9 shape of game art (the wide desktop lead card used to cut the
     top and bottom); any other shape is shown whole over the blurred copy the theme already prints. */
  html.gb-human .card-art {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html.gb-human .card-art > img.card-photo { object-fit: contain !important; }
  html.gb-human .card-art > img.gb-card-photo-backdrop { display: block !important; }
  html.gb-human article.gbrw .gbrw-media {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
  }

  /* Big screens (2K, 4K): header, sections and footer grow with the screen so the page reads like 1080p instead of a
     1320px strip in the middle. The Gaming Room keeps its own sizing. gb-humanize.js reads --hz-zoom to fetch sharper photos. */
  @media (min-width: 2200px) { html.gb-human { --hz-zoom: 1.15; } }
  @media (min-width: 2400px) { html.gb-human { --hz-zoom: 1.25; } }
  @media (min-width: 2700px) { html.gb-human { --hz-zoom: 1.4; } }
  @media (min-width: 3000px) { html.gb-human { --hz-zoom: 1.55; } }
  @media (min-width: 3400px) { html.gb-human { --hz-zoom: 1.75; } }
  @media (min-width: 3800px) { html.gb-human { --hz-zoom: 2; } }
  @media (min-width: 2200px) {
    html.gb-human :is(body > header, body > footer, main > :not(#home)) { zoom: var(--hz-zoom) !important; }
  }

  /* Helpers used by gb-humanize.js */
  html.gb-human .hz-hidden { display: none !important; }
  html.gb-human .hz-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  html.gb-human .hz-mono {
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 50% !important;
    background: #2b2420;
    color: #f3e9df;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    line-height: 1;
  }
  html.gb-human[data-gb-theme="light"] .hz-mono { background: #efe4d8; color: #4a3a2c; }
}

/* Gaming Room on 2K/4K + the "More below" arrow (s142, 25/10; Panos «ena belaki na katalabnei o allos oti ta a8ra einai kato»,
   picked option 3 of 4: the 8-bit arrow). Desktop home only; it fades out on scroll and hides with the room or on phones. */
@layer gbl {
  html.gb-human #home .hz-cue {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 0;
    border-radius: 0;
    background: radial-gradient(closest-side, rgba(4, 2, 8, 0.55), transparent);
    color: #ff3158 !important;
    font: 700 12px/1 "Courier New", ui-monospace, monospace !important;
    letter-spacing: 0.2em !important;
    cursor: pointer;
    transform: translateX(-50%);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms ease;
  }
  html.gb-human #home .hz-cue svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
    filter: drop-shadow(0 0 6px rgba(255, 49, 88, 0.7));
    animation: hz-cue-step 0.9s steps(1, end) infinite;
  }
  html.gb-human #home .hz-cue span {
    color: inherit !important;
    font-family: inherit !important;
    letter-spacing: 0.2em !important;
    animation: hz-cue-blink 1.2s steps(1, end) infinite;
  }
  @keyframes hz-cue-step {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }
  @keyframes hz-cue-blink {
    0%, 100% { opacity: 1; }
    60% { opacity: 0.25; }
  }
  html.gb-human #home .hz-cue.is-away {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
  }
  html.gb-human #home .hz-cue:active { transform: translateX(-50%) scale(0.97); }
  html.gb-human #home .hz-cue:focus-visible { outline: 2px solid #ff3158; outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) {
    html.gb-human #home .hz-cue:hover { color: #ff6a86 !important; }
  }
  html.gb-human #home.gb-desktop-room-collapsed .hz-cue { display: none; }
  @media (max-width: 900px) {
    html.gb-human #home .hz-cue { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.gb-human #home .hz-cue svg,
    html.gb-human #home .hz-cue span { animation: none; }
  }

  /* 2K and 4K: the room grows with the page zoom instead of stopping at 720px. */
  @media (min-width: 2200px) {
    html.gb-human body.home #roomStage.room-stage {
      height: calc(720px * var(--hz-zoom)) !important;
      max-height: none !important;
    }
    html.gb-human #home .hz-cue {
      bottom: calc(14px * var(--hz-zoom));
      gap: calc(6px * var(--hz-zoom));
      padding: calc(8px * var(--hz-zoom)) calc(18px * var(--hz-zoom));
      font-size: calc(12px * var(--hz-zoom)) !important;
    }
    html.gb-human #home .hz-cue svg {
      width: calc(34px * var(--hz-zoom));
      height: calc(34px * var(--hz-zoom));
    }
  }
}
