/* Gamers Hub v3 — production styles (namespaced gh-) */

  :root{
    --bg: var(--desert-card);
    --panel: var(--desert-card);
    --card: var(--desert-card);
    --card2: var(--desert-pressed);
    --line: var(--desert-pressed);
    --txt: var(--desert-ink-faint);
    --mut: var(--desert-ink-dim);
    --cyan: var(--color-info);
    --pink: var(--lg-pink);
    --amber: var(--color-warn);
    --red: var(--lg-pink);
    --r: 14px;
  }*{ margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }button{ font: inherit; }html{ scroll-behavior: smooth; }body{
    background: var(--bg);
    color: var(--txt);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }.gh-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 12px; }/* ============ STICKY TOP BAR ============ */
  .gh-topbar{
    position: sticky; top: 0; z-index: 50;
    background: rgba(var(--desert-card-rgb), .88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: none;
  }.gh-topbar-in{ display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; max-width: 1180px; margin: 0 auto; }.gh-logo{ display: flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: 1px; font-size: 15px; }.gh-logo .gh-mark{
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, var(--cyan), var(--pink));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--desert-card);
  }.gh-logo em{ font-style: normal; color: var(--cyan); }.gh-online{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--mut);
    background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
    padding: 6px 10px; border-radius: 999px;
  }.gh-online .gh-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--color-win); box-shadow: 0 0 8px var(--color-win); animation: pulse 1.6s ease infinite; }.gh-online b{ color: var(--txt); }@keyframes pulse{0%,100%{ opacity: 1; }50%{ opacity: .35; } }/* ============ TICKER ============ */
  .gh-ticker{
    background: linear-gradient(90deg, var(--desert-pressed), var(--desert-card) 30%, var(--desert-card) 70%, var(--desert-ink));
    border-bottom: none;
    overflow: hidden; white-space: nowrap;
    padding: 7px 0;
  }.gh-ticker-track{ display: inline-block; animation: tick 32s linear infinite; }.gh-ticker:hover .gh-ticker-track{ animation-play-state: paused; }@keyframes tick{from{ transform: translateX(0); }to{ transform: translateX(-50%); } }.gh-tick-item{ display: inline-block; font-size: 12px; font-weight: 600; color: var(--desert-ink-faint); margin: 0 18px; }a.gh-tick-item{ text-decoration: none; color: inherit; }a.gh-tick-item:hover{ color: var(--cyan); }.gh-tick-item .gh-hot{ color: var(--pink); font-weight: 800; margin-right: 6px; }.gh-tick-item .gh-cyan{ color: var(--cyan); }/* ============ SECTION SCAFFOLD ============ */
  section.gh-block{ margin-top: 22px; }.gh-sec-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; }.gh-sec-title{ font-size: 17px; font-weight: 900; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }.gh-sec-title .gh-bar{ width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), var(--pink)); }.gh-sec-link{ font-size: 12px; color: var(--cyan); font-weight: 700; text-decoration: none; }/* ============ HERO TRAILER ============ */
  .gh-hero{
    position: relative; border-radius: 18px; overflow: hidden;
    border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
    background: var(--desert-bg);
    margin-top: 12px;
  }.gh-hero-media{ position: relative; aspect-ratio: 16/9; background: var(--desert-bg); }.gh-hero-media iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }.gh-hero-tag{
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; gap: 8px; align-items: center;
  }/* .gh-pill removed 2026-10-02 — cohesion rule 2: no pills (site-ops RED) */
  .gh-hero-cap{ padding: 12px 14px; background: linear-gradient(180deg, var(--card), var(--panel)); }.gh-hero-cap h2{ font-size: 19px; font-weight: 900; letter-spacing: -.4px; line-height: 1.2; }.gh-hero-cap h2 .gh-grad{
    background: linear-gradient(90deg, var(--cyan), var(--pink));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }.gh-hero-cap p{ font-size: 12.5px; color: var(--mut); margin-top: 5px; }.gh-hero-meta{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }.gh-countdown{ font-size: 12px; font-weight: 800; color: var(--amber); letter-spacing: .5px; }.gh-btn{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 800; letter-spacing: .4px;
    padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
    text-decoration: none; color: var(--desert-card);
    background: linear-gradient(90deg, var(--cyan), var(--color-info));
    box-shadow: 0 4px 18px rgba(var(--color-info-rgb), .35);
    transition: transform .12s ease;
  }.gh-btn:active{ transform: scale(.96); }.gh-btn.pink{ background: linear-gradient(90deg, var(--pink), var(--desert-accent-soft)); box-shadow: 0 4px 18px rgba(var(--lg-pink-rgb), .35); color: var(--desert-card); }.gh-btn.ghost{ background: transparent; color: var(--txt); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); box-shadow: none; }/* ============ TONIGHT'S PICKER ============ */
  .gh-picker{
    border-radius: 18px; overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(var(--color-info-rgb), .12), transparent 60%),
      radial-gradient(120% 90% at 50% 110%, rgba(var(--lg-pink-rgb), .12), transparent 60%),
      var(--panel);
    border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
    padding: 18px 14px; text-align: center;
    position: relative;
  }.gh-picker .gh-kick{ font-size: 10.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); }.gh-picker h3{ font-size: 22px; font-weight: 900; letter-spacing: -.5px; margin: 4px 0 4px; }.gh-picker .gh-lede{ font-size: 12.5px; color: var(--mut); margin-bottom: 12px; }.gh-slot{
    max-width: 460px; margin: 0 auto 12px;
    border-radius: var(--r); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
    background: var(--desert-card);
    min-height: 118px; padding: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    position: relative; overflow: hidden;
  }.gh-slot::before{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(var(--color-info-rgb), .06) 50%, transparent 80%);
    pointer-events: none;
  }.gh-slot.spinning{ animation: shake .1s linear infinite; border-color: var(--cyan); }@keyframes shake{0%{ transform: translateX(-2px); }50%{ transform: translateX(2px); }100%{ transform: translateX(-2px); } }.gh-slot-art{ width: 100%; height: 74px; border-radius: 10px; margin-bottom: 4px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; }.gh-slot-art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.gh-slot-art .gh-gname{ position: relative; z-index: 1; font-weight: 900; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--desert-card); text-shadow: 0 2px 12px rgba(var(--desert-shadow-rgb), .8); padding: 0 10px; text-align: center; }.gh-slot-title{ font-size: 17px; font-weight: 800; }a.gh-slot-title{ color: inherit; text-decoration: none; border-bottom: 1px dashed var(--mut); }.gh-slot-meta{ font-size: 11.5px; color: var(--mut); }.gh-slot-empty{ color: var(--mut); font-style: italic; font-size: 13px; }.gh-picker-row{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }/* ============ HYPE POLL ============ */
  .gh-poll{ background: var(--panel); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 18px; padding: 16px 14px; }.gh-poll h3{ font-size: 16px; font-weight: 900; margin-bottom: 2px; }.gh-poll .gh-sub{ font-size: 12px; color: var(--mut); margin-bottom: 12px; }.gh-poll-opt{
    display: block; width: 100%; text-align: left;
    background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
    position: relative; overflow: hidden; color: var(--txt);
    transition: border-color .15s ease, transform .1s ease;
  }.gh-poll-opt:active{ transform: scale(.99); }.gh-poll-opt .gh-fill{
    position: absolute; inset: 0; width: 0%;
    background: linear-gradient(90deg, rgba(var(--color-info-rgb), .22), rgba(var(--lg-pink-rgb), .22));
    transition: width .8s cubic-bezier(.2,.8,.2,1);
  }.gh-poll-opt .gh-row{ position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; }.gh-poll-opt .gh-name{ font-size: 13.5px; font-weight: 700; }.gh-poll-opt .gh-pct{ font-size: 13px; font-weight: 800; color: var(--cyan); min-width: 44px; text-align: right; }.gh-poll-opt.voted{ border-color: var(--cyan); }.gh-poll-opt .gh-check{ display: none; color: var(--cyan); font-weight: 900; margin-left: 6px; }.gh-poll-opt.voted .gh-check{ display: inline; }.gh-poll-foot{ font-size: 11.5px; color: var(--mut); margin-top: 6px; text-align: center; }.gh-poll-foot b{ color: var(--txt); }/* ============ SLATE GRID (dense) ============ */
  .gh-slate-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.gh-gcard{
    background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: var(--r);
    overflow: hidden; cursor: pointer; text-decoration: none; color: inherit;
    transition: transform .12s ease, border-color .15s ease;
  }.gh-gcard:active{ transform: scale(.97); }.gh-gart{ position: relative; aspect-ratio: 16/9; overflow: hidden; display: flex; align-items: center; justify-content: center; }.gh-gart img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.gh-gart .gh-gname{
    position: relative; z-index: 1; font-weight: 900; font-size: 12px; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--desert-card); text-shadow: 0 2px 10px rgba(var(--desert-shadow-rgb), .85);
    padding: 0 8px; text-align: center; line-height: 1.35;
  }/* Date badge — rectangular editorial treatment (cohesion rule 2: no pills) */
  .gh-gart .gh-datebadge{
    position: absolute; top: 6px; left: 6px; z-index: 2;
    font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    background: rgba(var(--desert-shadow-rgb), .7); backdrop-filter: blur(4px);
    border: none; color: var(--desert-card);
    padding: 4px 8px; border-radius: 3px;
  }.gh-gart .gh-datebadge.outnow{ background: var(--cyan); color: var(--desert-card); }.gh-gbody{ padding: 9px 10px 10px; }.gh-gbody h4{ font-size: 12.5px; font-weight: 800; line-height: 1.3; }.gh-gbody .gh-plats{ font-size: 10.5px; color: var(--mut); margin-top: 3px; }.gh-gbody .gh-blurb{ font-size: 11px; color: var(--desert-ink-dim); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.gh-trailer-badge{ display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; color: var(--cyan); }.gh-igdb-credit{ text-align: center; font-size: 11px; color: var(--mut); margin: 12px 0 0; opacity: .7; }/* Trailer modal — embedded player stays on our site */
  .gh-modal{ position: fixed; inset: 0; z-index: 9999; background: rgba(var(--desert-shadow-rgb), .85); display: none; align-items: center; justify-content: center; padding: 16px; }.gh-modal.open{ display: flex; }.gh-modal-box{ width: 100%; max-width: 800px; background: var(--desert-card); border-radius: 12px; padding: 16px; position: relative; }.gh-modal-box h3{ font-size: 15px; margin: 0 32px 12px 0; }.gh-modal-x{ position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--desert-card); font-size: 20px; cursor: pointer; padding: 4px 8px; }.gh-video-wrap{ position: relative; padding-bottom: 56.25%; height: 0; }.gh-video-wrap iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }.gh-trailer-card{ background: none; border: none; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }/* ============ THIS OR THAT ============ */
  .gh-versus{ background: var(--panel); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 18px; padding: 16px 14px; }.gh-versus h3{ font-size: 16px; font-weight: 900; }.gh-versus .gh-sub{ font-size: 12px; color: var(--mut); margin-bottom: 12px; }.gh-vs-arena{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }.gh-vs-side{
    border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer;
    border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); background: var(--card);
    transition: transform .1s ease, border-color .15s ease, box-shadow .15s ease;
    position: relative; overflow: hidden; min-height: 118px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  }.gh-vs-side:active{ transform: scale(.96); }.gh-vs-side .gh-vs-art{ position: absolute; inset: 0; opacity: .5; }.gh-vs-side .gh-vs-art .gh-gname{ font-size: 11px; }.gh-vs-side .t{ position: relative; font-size: 13px; font-weight: 800; line-height: 1.3; }.gh-vs-side .d{ position: relative; font-size: 10.5px; color: var(--mut); }.gh-vs-side.picked-a{ border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(var(--color-info-rgb), .35); }.gh-vs-side.picked-b{ border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 22px rgba(var(--lg-pink-rgb), .35); }.gh-vs-mid{ display: flex; align-items: center; justify-content: center; }.gh-vs-badge{
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--pink));
    color: var(--desert-card); font-weight: 900; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
  }.gh-vs-bar{ margin-top: 12px; height: 10px; border-radius: 999px; overflow: hidden; display: flex; background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); }.gh-vs-bar .gh-fa{ background: linear-gradient(90deg, var(--color-info), var(--cyan)); transition: width .8s cubic-bezier(.2,.8,.2,1); }.gh-vs-bar .gh-fb{ background: linear-gradient(90deg, var(--pink), var(--desert-accent-soft)); transition: width .8s cubic-bezier(.2,.8,.2,1); }.gh-vs-nums{ display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; margin-top: 6px; }.gh-vs-nums .gh-na{ color: var(--cyan); }.gh-vs-nums .gh-nb{ color: var(--pink); }.gh-vs-next{ margin-top: 10px; text-align: center; }/* ============ HORIZONTAL RAILS ============ */
  .gh-rail{ display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }.gh-rail::-webkit-scrollbar{ display: none; }.gh-trailer-card{
    flex: 0 0 240px; scroll-snap-align: start;
    background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: var(--r); overflow: hidden;
    text-decoration: none; color: inherit; display: block;
  }.gh-trailer-thumb{ position: relative; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; }.gh-trailer-thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.gh-playbtn{
    position: relative; z-index: 1;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(var(--desert-shadow-rgb), .6); border: 1.5px solid rgba(var(--desert-card-rgb), .85);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--desert-card); backdrop-filter: blur(4px);
  }.gh-trailer-thumb .gh-tlabel{
    position: absolute; z-index: 1; bottom: 6px; left: 6px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(var(--desert-shadow-rgb), .7); padding: 4px 8px; border-radius: 6px; color: var(--cyan);
  }.gh-trailer-body{ padding: 9px 10px 11px; }.gh-trailer-body h4{ font-size: 12.5px; font-weight: 800; line-height: 1.3; }.gh-trailer-body p{ font-size: 11px; color: var(--mut); margin-top: 3px; }.gh-review-card{
    flex: 0 0 200px; scroll-snap-align: start;
    background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: var(--r);
    padding: 14px; position: relative; overflow: hidden;
  }.gh-review-card .gh-score{
    font-size: 40px; font-weight: 900; letter-spacing: -2px;
    background: linear-gradient(180deg, var(--amber), var(--desert-accent-ember));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }.gh-review-card h4{ font-size: 13px; font-weight: 800; margin-top: 2px; line-height: 1.3; }.gh-review-card .gh-who{ font-size: 11px; color: var(--mut); margin-top: 4px; }.gh-review-card .gh-verdict{ font-size: 11.5px; color: var(--desert-ink-faint); margin-top: 8px; font-style: italic; }.gh-review-card.soon{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }.gh-review-card.soon .gh-score{ background: linear-gradient(180deg, var(--cyan), var(--pink)); -webkit-background-clip: text; background-clip: text; }/* ============ WIRE (compact rows) ============ */
  .gh-wire-row{
    display: flex; gap: 10px; align-items: center;
    background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 12px;
    padding: 8px; margin-bottom: 8px;
  }.gh-wire-thumb{
    flex: 0 0 86px; width: 86px; height: 64px; border-radius: 8px; overflow: hidden;
    position: relative; display: flex; align-items: center; justify-content: center;
  }.gh-wire-thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.gh-wire-thumb .gh-gname{ position: relative; z-index: 1; font-size: 8.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--desert-card); text-shadow: 0 1px 6px rgba(var(--desert-shadow-rgb), .9); text-align: center; padding: 0 4px; line-height: 1.3; }.gh-wire-main{ flex: 1; min-width: 0; }.gh-wire-tag{ font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }.gh-wire-tag.review{ color: var(--amber); }.gh-wire-tag.news{ color: var(--cyan); }.gh-wire-tag.preview{ color: var(--pink); }.gh-wire-tag.feature{ color: var(--lg-pink); }.gh-wire-main h4{ font-size: 12.5px; font-weight: 700; line-height: 1.32; margin-top: 2px; }.gh-wire-main .gh-by{ font-size: 10.5px; color: var(--mut); margin-top: 2px; }.gh-hype{
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--card2); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 10px;
    padding: 8px 9px; cursor: pointer; color: var(--txt);
    transition: transform .1s ease, border-color .15s ease;
    font-size: 15px;
  }.gh-hype:active{ transform: scale(.9); }.gh-hype.lit{ border-color: var(--pink); }.gh-hype .n{ font-size: 10.5px; font-weight: 800; color: var(--pink); }.gh-hype.pop{ animation: pop .3s ease; }@keyframes pop{0%{ transform: scale(1); }40%{ transform: scale(1.25); }100%{ transform: scale(1); } }/* ============ COMMUNITY PULSE ============ */
  .gh-pulse-box{ background: var(--panel); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 18px; padding: 16px 14px; }.gh-pulse-box h3{ font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 8px; }.gh-pulse-box h3 .gh-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--color-win); box-shadow: 0 0 8px var(--color-win); animation: pulse 1.6s ease infinite; }.gh-pulse-box .gh-sub{ font-size: 12px; color: var(--mut); margin-bottom: 10px; }.gh-feed{ display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: hidden; position: relative; }.gh-feed::after{ content: ""; position: absolute; inset: auto 0 0 0; height: 44px; background: linear-gradient(180deg, transparent, var(--panel)); pointer-events: none; }.gh-feed-item{
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 12px; background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
    border-radius: 10px; padding: 9px 10px;
    animation: slidein .4s ease;
  }@keyframes slidein{from{ opacity: 0; transform: translateY(-8px); }to{ opacity: 1; transform: none; } }.gh-feed-item .gh-av{
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; color: var(--desert-card);
  }.gh-feed-item .gh-tx b{ font-weight: 800; }.gh-feed-item .gh-tx .t{ color: var(--mut); font-size: 10.5px; margin-left: 6px; }.gh-feed-item .gh-tx .gh-flame{ color: var(--pink); }/* ============ FOOTER ============ */
  .gh-foot{ margin: 30px 0 44px; padding: 18px 4px 0; border-top: none; color: var(--mut); font-size: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }.gh-foot .gh-flogo{ font-weight: 900; color: var(--txt); letter-spacing: 1px; }.gh-foot .gh-flogo em{ font-style: normal; color: var(--cyan); }@media (min-width: 700px){.gh-wrap{ padding: 0 20px; }.gh-slate-grid{ grid-template-columns: repeat(3, 1fr); }.gh-hero-cap h2{ font-size: 26px; }.gh-sec-title{ font-size: 20px; }.gh-trailer-card{ flex-basis: 300px; }.gh-review-card{ flex-basis: 240px; }
  }@media (min-width: 1024px){.gh-slate-grid{ grid-template-columns: repeat(4, 1fr); }
  }/* ============ WIRE LINK + ART FALLBACK ============ */
.gh-wire-link{ text-decoration: none; color: inherit; }.gh-wire-link h4{ transition: color .15s ease; }.gh-wire-link:hover h4{ color: var(--cyan); }.gh-wire-thumb{ display: block; text-decoration: none; }.gh-wire-empty{ color: var(--mut); font-size: 13px; padding: 20px; text-align: center; }
/* ============ STREAM KINGS RAIL (fix-list #25) ============
   Live-data rail: cards link inward to creator pages;the LIVE badge renders
   only when the API feed confirms a live broadcast. Max 8px radius. */
.gh-sk-card{
  flex: 0 0 148px; scroll-snap-align: start; text-decoration: none; color: inherit;
  background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); border-radius: 8px;
  overflow: hidden;
}.gh-sk-art{ position: relative; display: block; width: 100%; height: 92px; background: linear-gradient(135deg, var(--desert-pressed), var(--desert-pressed)); }.gh-sk-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }.gh-sk-live{
  position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 900; letter-spacing: 1px;
  background: var(--desert-accent); color: var(--desert-card); padding: 3px 8px; border-radius: 6px;
}.gh-sk-body{ display: block; padding: 8px 10px 10px; }.gh-sk-body b{ display: block; font-size: 12.5px; font-weight: 800; }.gh-sk-title{ display: block; font-size: 10.5px; color: var(--cyan); margin-top: 2px; line-height: 1.3; }.gh-sk-sub{ display: block; font-size: 10.5px; color: var(--mut); margin-top: 2px; }@media (min-width: 700px){.gh-sk-card{ flex-basis: 172px; }.gh-sk-art{ height: 104px; } }/* If art fails to load, hide the broken slot gracefully (title text remains) */
.art-missing img{ display: none; }.gh-slot-art.art-missing, .gh-gart.art-missing, .gh-vs-art.art-missing, .gh-trailer-thumb.art-missing{
  background: linear-gradient(135deg, var(--desert-pressed), var(--desert-pressed)) !important;
  display: flex; align-items: center; justify-content: center; min-height: 80px;
}/* ============ WIRE THUMBS — PHONE UPGRADE (fix-list #20, 2026-10-02) ============
   Phone-only: bigger newsfeed thumbnails so the wire doesn't look cramped on
   mobile. Desktop keeps the compact 86x64 rows (min-width:700px unchanged). */
@media (max-width: 699.98px){
  .gh-wire-row { gap: 12px; padding: 10px; margin-bottom: 10px; }
  .gh-wire-thumb { flex: 0 0 128px; width: 128px; height: 94px; border-radius: 10px; }
  .gh-wire-thumb .gh-gname { font-size: 10px; }
  .gh-wire-main h4 { font-size: 13.5px; line-height: 1.36; }
  .gh-wire-main .gh-by { font-size: 11px; }
  .gh-hype { padding: 10px 11px; }
}.gh-wire-thumb.art-missing{
  background: linear-gradient(135deg, var(--desert-pressed), var(--desert-pressed)) !important;
  min-height: 64px;
}.gh-slot-art.art-missing .gh-gname, .gh-gart.art-missing .gh-gname{ position: static; font-size: 16px; }/* ============ INTERACTIVE STATE CLASSES ============ */
.gh-slot.gh-spinning{ animation: gh-shake .1s linear infinite; }@keyframes gh-shake{0%,100%{ transform: translateX(0); }25%{ transform: translateX(-2px); }75%{ transform: translateX(2px); } }.gh-vs-side.gh-picked-a{ box-shadow: 0 0 0 2px var(--cyan), 0 0 22px rgba(var(--color-info-rgb), .35); }.gh-vs-side.gh-picked-b{ box-shadow: 0 0 0 2px var(--pink), 0 0 22px rgba(var(--lg-pink-rgb), .35); }.gh-vs-pick{ display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--cyan); background: rgba(var(--color-info-rgb), .12); border: 1px solid rgba(var(--color-info-rgb), .35); border-radius: 999px; padding: 2px 10px; }.gh-hype.gh-lit{ color: var(--pink); }.gh-hype.gh-pop{ animation: gh-pop .3s ease; }@keyframes gh-pop{0%{ transform: scale(1); }50%{ transform: scale(1.25); }100%{ transform: scale(1); } }/* ============ GTA TAKEOVER — full-bleed Vice City promo (page hero) ============ */
  .gh-gta-takeover{ margin: 14px -12px 0; }.gh-gta-link{ position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--desert-card); min-height: 480px; display: flex; align-items: flex-end; }.gh-gta-art{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }.gh-gta-shade{ position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(var(--desert-card-rgb), .92) 0%, rgba(var(--desert-card-rgb), .55) 45%, rgba(var(--desert-card-rgb), .15) 75%, rgba(var(--desert-card-rgb), .35) 100%); }.gh-gta-content{ position: relative; z-index: 2; padding: 36px 22px; max-width: 600px; }.gh-gta-kicker{ display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--lg-pink); margin-bottom: 10px; }/* Fix-list #21 (2026-10-02): gh-gta-live-dot removed — no fake LIVE signal on a non-live countdown. */
  .gh-gta-title{ font-size: clamp(52px, 13vw, 88px); font-weight: 900; line-height: .95; letter-spacing: -1px;
    background: linear-gradient(180deg, var(--desert-card) 30%, var(--desert-accent-soft) 70%, var(--lg-pink)); -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 40px rgba(var(--lg-pink-rgb), .35); margin-bottom: 10px; }.gh-gta-sub{ font-size: 14px; color: var(--desert-ink-faint); margin-bottom: 16px; max-width: 400px; }.gh-gta-cta{ display: inline-block; font-size: 14px; font-weight: 800; padding: 12px 26px; border-radius: 999px;
    background: linear-gradient(90deg, var(--lg-pink), var(--lg-pink)); color: var(--desert-card);
    box-shadow: 0 0 24px rgba(var(--lg-pink-rgb), .5); transition: transform .15s ease; }.gh-gta-link:active .gh-gta-cta{ transform: scale(.96); }@media (min-width: 700px){.gh-gta-takeover{ margin: 18px 0 0; border-radius: 20px; overflow: hidden; }.gh-gta-link{ min-height: 520px; }.gh-gta-content{ padding: 56px 48px; }
  }/* ============ SECTION POLISH — kill the boxy look ============ */
  section.gh-block{ background: transparent; border: none; box-shadow: none; padding: 0; }.gh-block + .gh-block{ border-top: 1px solid rgba(var(--desert-card-rgb), .06); padding-top: 22px; }.gh-sec-title{ font-size: 20px; }/* Picker + poll keep subtle panels, not harsh boxes */
  .gh-picker, .gh-poll, .gh-versus{
    background: linear-gradient(180deg, rgba(var(--desert-card-rgb), .03), rgba(var(--desert-card-rgb), .01));
    border: 1px solid rgba(var(--desert-card-rgb), .07); border-radius: 20px;
  }/* ============ STEAM TOP 10 — live Steam charts (fix-list #26, 2026-10-02) ============ */
.gh-st-feat{
  display: block; position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--card); box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
  text-decoration: none; color: inherit; margin-bottom: 10px;
}.gh-st-feat img{ width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }.gh-st-feat.art-missing img{ display: none; }.gh-st-feat.art-missing{ min-height: 120px; background: linear-gradient(135deg, var(--desert-pressed), var(--desert-pressed)); }.gh-st-feat-cap{
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(var(--desert-shadow-rgb), .85));
}.gh-st-feat-tag{
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--amber);
  background: rgba(var(--color-warn-rgb), .14); border: 1px solid rgba(var(--color-warn-rgb), .4);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 6px;
}.gh-st-feat-cap h4{ font-size: 17px; font-weight: 900; }.gh-st-feat-cap p{ font-size: 12px; color: var(--mut); margin-top: 2px; }.gh-st-row{
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25);
  border-radius: 12px; padding: 8px 10px; margin-bottom: 8px;
  text-decoration: none; color: inherit;
}.gh-st-rank{
  flex: 0 0 30px; font-size: 18px; font-weight: 900; text-align: center;
  background: linear-gradient(180deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.gh-st-thumb{ flex: 0 0 104px; width: 104px; aspect-ratio: 460/215; border-radius: 8px; overflow: hidden; background: var(--desert-pressed); }.gh-st-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }.gh-st-name{ flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.gh-st-move{ flex: 0 0 auto; font-size: 11.5px; font-weight: 800; }.gh-st-up{ color: var(--color-win); }.gh-st-dn{ color: var(--red); }.gh-st-same{ color: var(--mut); }.gh-st-new{ color: var(--desert-pressed); background: var(--amber); border-radius: 6px; padding: 2px 7px; font-size: 10px; letter-spacing: .8px; }.gh-st-n{ flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--mut); }@media (min-width: 700px){.gh-sk-card{ flex-basis: 300px; }.gh-st-thumb{ flex-basis: 140px; width: 140px; }
}/* ============ FIX-LIST #23 — MOBILE LAYOUT RETHINK (James approved 2026-10-02) ============
   Phone only: news first, play second. The Wire moves under the hero, Stream
   Kings + Steam Top 10 follow as live-data rails, picker/poll/versus
   consolidate into one tabbed Playground, the monthly slate becomes a rail.
   Desktop (min-width:700px) keeps the existing order and stacked sections —
   no desktop regression. New components use max 8px radius. */

/* --- Playground tabs (bar hidden on desktop, panels stack as before) --- */
.gh-pg-tabs{ display: flex; gap: 8px; margin-bottom: 12px; }.gh-pg-tab{
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 800;
  padding: 11px 6px; border-radius: 8px; background: var(--card);
  border: none; box-shadow: 0 2px 16px rgba(var(--desert-shadow-rgb), .25); color: var(--mut);
  cursor: pointer;
}.gh-pg-tab.gh-on{ background: var(--desert-pressed); color: var(--cyan); }.gh-pg-panel{ display: none; }.gh-pg-panel.gh-on{ display: block; }@media (min-width: 700px){.gh-pg-tabs{ display: none; }.gh-pg-panel{ display: block !important; }.gh-pg-panel + .gh-pg-panel{ margin-top: 22px; }
}/* --- Phone reorder: hero → wire → stream kings → steam → playground →
       slate → trailers → reviews --- */
@media (max-width: 699.98px){
  .gh-wrap { display: flex; flex-direction: column; }
  .gh-gta-takeover { order: 1; }
  #sec-wire { order: 2; }
  #sec-kings { order: 3; }
  #stSection { order: 4; }
  #playground { order: 5; }
  #sec-slate { order: 6; }
  #sec-trailers { order: 7; }
  #sec-reviews { order: 8; }
  .gh-foot { order: 9; }

  /* Monthly slate becomes a horizontal rail on phone */
  #sec-slate .gh-slate-grid {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 2px 2px 10px; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #sec-slate .gh-slate-grid::-webkit-scrollbar { display: none; }
  #sec-slate .gh-gcard { flex: 0 0 208px; scroll-snap-align: start; }
  #sec-slate .gh-gbody .gh-blurb { display: none; }
}/* ============ DESERT GOLDEN HOUR THEME — DEFAULT (James 2026-10-06) ============
   The Games browse page matches the rest of the site. Desert is unconditional,
   not gated behind prefers-color-scheme.
   Palette: bg #FAF6EE · cards #FFFFFF · text #2A1C11 · accent #C2410C · depth #92400E. */
  :root{
    --bg: var(--desert-bg);      /* page */
    --panel: var(--desert-card);   /* panels */
    --card: var(--desert-card);    /* cards */
    --card2: var(--desert-pressed);   /* inset */
    --line: rgba(var(--desert-ink-rgb), .14);
    --txt: var(--desert-ink);
    --mut: rgba(var(--desert-ink-rgb), .66);
    --cyan: var(--desert-accent);    /* neon -> jewel tone, clears AA on paper */
    --pink: var(--desert-accent-deep);
    --amber: var(--desert-accent);
    --red: var(--desert-accent);
  }/* card shadows: black depth -> warm paper depth */
  .gh-online, .gh-hero, .gh-slot, .gh-poll, .gh-poll-opt, .gh-gcard,
  .gh-versus, .gh-vs-side, .gh-vs-bar, .gh-trailer-card, .gh-review-card,
  .gh-wire-row, .gh-hype, .gh-pulse-box, .gh-feed-item, .gh-sk-card,
  .gh-st-feat, .gh-pg-tab{
    box-shadow: 0 2px 16px rgba(var(--desert-ink-rgb), .13);
  }/* picker slot body is UI chrome (art sits in .gh-slot-art) */
  .gh-slot{ background: var(--desert-card); }
  /* NOTE (kept dark by design): .gh-hero/.gh-hero-media is the trailer stage;
     .gh-gname/.gh-datebadge/.gh-tlabel/.gh-playbtn sit on art; .gh-st-feat-cap
     is a photo scrim; .gh-modal is a modal scrim; .art-missing tiles are art
     fallbacks; .gh-picker keeps its cyan/pink glow wash (tints, not text). */
/* ============ GOLDEN UNIFIED DESIGN (James 2026-10-08) ============
   One cream background everywhere. Cards transparent with a thin
   ink-rule border — no white cards, no dark patches. All text dark ink
   on cream; white text ONLY over image scrims. Min 18px card padding. */
:root{--gh-rule:1px solid rgba(var(--desert-ink-rgb),.12)}
body{background:var(--desert-bg);color:var(--desert-ink)}
/* ---- topbar + ticker: cream, hairlines, no dark gradient patch ---- */
.gh-topbar{background:rgba(var(--desert-bg-rgb),.92);border-bottom:var(--gh-rule)}
.gh-ticker{background:var(--desert-bg);border-top:var(--gh-rule);border-bottom:var(--gh-rule)}
.gh-tick-item{color:rgba(var(--desert-ink-rgb),.68)}
/* ---- cards: transparent + thin border, soft paper shadows ---- */
.gh-online,.gh-slot,.gh-poll-opt,.gh-gcard,.gh-vs-side,.gh-trailer-card,
.gh-review-card,.gh-wire-row,.gh-pulse-box,.gh-feed-item,.gh-sk-card,
.gh-st-feat,.gh-st-row,.gh-pg-tab{background:transparent;border:var(--gh-rule);
  box-shadow:0 2px 14px rgba(var(--desert-ink-rgb),.10)}
.gh-hero{background:transparent;border:var(--gh-rule);
  box-shadow:0 2px 14px rgba(var(--desert-ink-rgb),.10)}
.gh-hero-cap{background:transparent;padding:18px 20px}
.gh-picker,.gh-poll,.gh-versus{background:transparent;border:var(--gh-rule)}
.gh-hype{background:transparent;border:var(--gh-rule)}
.gh-slot{background:transparent;border:var(--gh-rule)}
.gh-modal-box{background:var(--desert-bg);border:var(--gh-rule)}
.gh-modal-x{color:var(--desert-ink)}
.gh-block + .gh-block{border-top:1px solid rgba(var(--desert-ink-rgb),.12)}
.gh-feed::after{background:linear-gradient(180deg,transparent,var(--desert-bg))}
/* ---- over-art text: scrims + white text ---- */
.gh-gart::after,.gh-slot-art::after,.gh-wire-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--scrim-black-rgb),0) 30%,rgba(var(--scrim-black-rgb),.72) 100%)}
.gh-gart .gh-gname,.gh-slot-art .gh-gname,.gh-wire-thumb .gh-gname{text-shadow:0 1px 8px rgba(var(--scrim-black-rgb),.5)}
.gh-st-feat-cap h4{color:var(--desert-card)}
.gh-st-feat-cap p{color:rgba(var(--desert-card-rgb),.78)}
.gh-st-new{color:var(--desert-card)}
/* ---- generous padding: nothing touches card edges ---- */
.gh-poll{padding:20px 18px}
.gh-versus{padding:20px 18px}
.gh-picker{padding:22px 18px}
.gh-wire-row{padding:10px}
.gh-st-row{padding:10px 12px}
.gh-pulse-box{padding:20px 18px}
/* ---- mobile: never overflow horizontally ---- */
img{max-width:100%}
@media (max-width:699.98px){
  .gh-wrap{padding:0 14px}
  .gh-gta-takeover{margin:14px -14px 0}
}

/* ---- games/title/ template page (gt-*): house conversion 2026-10-18 (#145) — the shell's inline styles govern; these are cascade backstops in house values only ---- */
.gt-genre{background:transparent}
.gt-fact{background:#101010}
.gt-cover{background:#101010}

/* ---- GTA takeover hero: light scrims need DARK text (white was invisible) ---- */
.gh-gta-link{color:var(--desert-ink)}
.gh-gta-kicker{color:var(--desert-accent)}
.gh-gta-title{background:linear-gradient(180deg,var(--desert-ink) 25%,var(--desert-accent) 65%,var(--desert-accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(var(--desert-accent-rgb),.25)}
.gh-gta-sub{color:rgba(var(--desert-ink-rgb),.68)}