/* Header and footer. */

/* Top bar after TOP BAR.jpg (Voltaic): transparent over the hero art, logo lockup left, tracked caps nav,
   slim underline search, quiet log in, white slanted GET KEY with a red arrow. Brand, nav and actions sit in
   one flex row with a fixed gap, so the nav can never run into the search; narrower screens fold the search
   to an icon, and below 961px the nav and search move into the menu. The bar fills in dark once the page
   scrolls (scroll timeline, opacity only; browsers without it keep the fill). */
:root { --bar: 72px; }
.topbar { height: var(--bar); margin-bottom: 0; background: linear-gradient(180deg, rgba(4, 4, 5, .72), rgba(4, 4, 5, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.topbar::after { display: none; }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 8, 9, .94); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .topbar::before { opacity: 0; animation: bar-fill linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
}
@keyframes bar-fill { to { opacity: 1; } }

/* The hero art runs up under the bar: the bar gives back its height and the first hero section adds it to its
   top padding, so the copy stays exactly where it was. Only for the known hero sections. */
.topbar:has(+ #content > :is(.rdr-hero, .page-head, .ah, .gp):first-child) { margin-bottom: calc(-1 * var(--bar)); }
#content > .rdr-hero:first-child { min-height: calc(min(78vh, 720px) + var(--bar)); padding-top: calc(70px + var(--bar)); }
#content > .page-head:first-child { min-height: calc(min(44vw, 560px) + var(--bar)); padding-top: calc(80px + var(--bar)); }
#content > .ah:first-child { min-height: calc(clamp(480px, 44vw, 640px) + var(--bar)); padding-top: calc(96px + var(--bar)); }
#content > .gp:first-child > .game-page:first-child { padding-top: calc(26px + var(--bar)); }
#content > .gp:first-child > .game-page:first-child > .game-fx { height: calc(820px + var(--bar)); }

.topbar-inner { position: relative; gap: 40px; width: min(var(--wrap), calc(100% - 48px)); }

/* Logo mark with a two-line lockup: wordmark over a small tracked line. */
.brand { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; row-gap: 3px; margin: 0; padding: 0; background: none; border: 0; }
.brand-mark { grid-row: 1 / span 2; width: 44px; height: 44px; filter: none; }
.brand .hb-wordmark { grid-column: 2; align-self: end; }
.brand-wordmark { display: block; height: 25px; }
.brand::after { content: "Script hub"; grid-column: 2; align-self: start; color: #c9c9cf; font: 600 9.5px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }

/* Nav: centered in the space between logo and actions, small widely tracked caps, no boxes;
   thin silver underline on hover, red on the active tab. */
.topnav { flex: none; gap: 0; margin: 0 auto; }
.topnav a { padding: 0 16px; color: #f1f1f3; font: 600 12.5px/1 var(--display); letter-spacing: .2em; white-space: nowrap; }
.topnav a:hover, .topnav a[aria-current="page"] { color: #fff; }
.topnav a::after { content: ""; position: absolute; left: 16px; right: calc(16px + .2em); top: calc(50% + 14px); bottom: auto; width: auto; height: 2px; margin: 0; background: rgba(255, 255, 255, .6); box-shadow: none; transform: scaleX(0); transition: transform .28s var(--ease); }
.topnav a:hover::after, .topnav a[aria-current="page"]::after { transform: scaleX(1); }
.topnav a[aria-current="page"]::after { background: var(--red); box-shadow: none; }

/* Actions: slim underlined search, understated log in, white parallelogram CTA, menu button on small screens. */
.top-actions { flex: none; display: flex; align-items: center; gap: 26px; height: 100%; }
.top-search { position: relative; flex: none; width: 150px; max-width: none; margin: 0; }
.top-search-btn { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 22px; height: 32px; color: #d6d6db; font-size: 15px; cursor: pointer; }
.top-search .top-search-btn svg { position: static; transform: none; color: inherit; font-size: inherit; }
.top-search input { width: 100%; height: 32px; padding: 0 0 0 28px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .26); background: none; clip-path: none; color: #fff; font: 600 11.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; transition: border-color .2s, opacity .2s, translate .2s; }
.top-search input::placeholder { color: #d6d6db; opacity: 1; }
.top-search input:focus { background: none; border-color: transparent; border-bottom-color: #fff; }
.top-search input:focus::placeholder { color: var(--dim); }
.top-login { flex: none; display: flex; align-items: center; gap: 9px; height: 30px; margin: 0; padding: 0; color: #b9b9c0; font: 600 11.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; cursor: default; }
.top-login svg { flex: none; font-size: 16px; }
.top-cta { flex: none; align-self: center; height: 40px; gap: 12px; margin: 0; padding: 0 26px 0 30px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); background: #f3f1ed; color: #0b0b0d; filter: none; font: 700 12px/1 var(--display); letter-spacing: .2em; transition: background .2s; }
.top-cta:hover { background: #fff; filter: none; }
.top-cta svg { color: var(--red); font-size: 14px; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; transition: translate .2s; }
.top-cta:hover svg { translate: 2px -2px; }

/* Mobile menu in the same language. */
.menu summary { width: 42px; height: 42px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; }
.menu[open] summary { box-shadow: inset 0 0 0 1px #fff; color: #fff; }
.menu-panel a { color: #e6e6ea; font: 600 12.5px/1 var(--display); letter-spacing: .22em; }
.menu-panel a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .04); box-shadow: inset 2px 0 0 var(--red); }
.menu-search input { height: 42px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .26); background: none; font: 600 11.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.menu-search input::placeholder { color: #c9c9cf; }
.menu-search input:focus { border-color: transparent; border-bottom-color: #fff; }

/* Footer: RDR2 dense block. Stacked logo + rating box, three link columns, newsletter-style join field,
   then socials, legal line and a small mark. */
.footer { margin-top: 72px; padding: 64px 0 26px; border-top: 1px solid rgba(255, 255, 255, .08); background: #070708; }
.footer::before { display: none; }
.footer-top { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .7fr)) minmax(0, 1.35fr); gap: 40px; }
.footer-brand > a { flex-direction: column; align-items: flex-start; gap: 12px; width: max-content; }
.footer-wordmark { height: 80px; }
.footer-rating { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.rating-box { flex: none; display: grid; justify-items: center; gap: 2px; width: 66px; padding: 7px 0 5px; border: 2px solid #fff; background: #000; }
.rating-box img { width: 40px; height: 40px; }
.rating-box b { color: #fff; font: 700 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.footer-rating ul { margin: 0; padding: 0; list-style: none; color: #e6e6ea; font-size: 13px; line-height: 1.45; }
.footer-col h2, .footer-news h2 { margin-bottom: 14px; color: #fff; font: 700 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.footer-col a { display: flex; align-items: center; gap: 7px; padding: 5px 0; color: #a9a9b2; font-size: 14px; }
.footer-col a:hover { color: #fff; padding-left: 0; }
.footer-col .ext { flex: none; font-size: 12px; opacity: .6; }
.footer-news p { max-width: 340px; margin: 0 0 16px; color: #a9a9b2; font-size: 14px; }
.news-field { display: flex; align-items: stretch; max-width: 380px; height: 52px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(0, 0, 0, .55); transition: border-color .2s; }
.news-field:hover { border-color: #fff; }
.news-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px; overflow: hidden; }
.news-input img { height: 30px; width: auto; }
.news-input em { overflow: hidden; color: #8f8f98; font-style: normal; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.news-field b { flex: none; display: grid; place-items: center; width: 52px; background: #c8111b; color: #fff; font-size: 21px; transition: background .2s; }
.news-field b svg { stroke-width: 2; transition: transform .2s; }
.news-field:hover b svg { transform: translate(2px, -2px); }

.footer-bottom { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .7fr)) minmax(0, 1.35fr); align-items: center; gap: 40px; margin-top: 34px; padding-top: 0; border-top: 0; color: #8f8f98; font-size: 13px; }
.footer-bottom p { grid-column: 2 / -1; min-width: 0; padding-right: 84px; }
.footer-bottom { position: relative; }
.footer-badge { position: absolute; right: 0; top: 50%; margin-top: -30px; }
.footer-bottom .inline-wordmark { height: 2.5em; vertical-align: -.85em; filter: none; }
.follow-row { flex: none; display: flex; gap: 4px; margin-left: -10px; }
.follow-icon { display: grid; place-items: center; width: 44px; height: 44px; color: #c9c9cf; font-size: 26px; transition: color .2s, translate .2s; }
.follow-icon:hover { color: #fff; translate: 0 -2px; }
.follow-icon circle { fill: currentColor; stroke: none; }
.footer-badge { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; transition: border-color .2s; }
.footer-badge img { width: 48px; height: 48px; }
.footer-badge:hover { border-color: #fff; }

/* Header widths are measured so the last tab stays at least 40px clear of the search at every width. */
@media (max-width: 1599px) {
  .top-login > span { display: none; }
}
@media (max-width: 1360px) {
  .topnav a { padding: 0 12px; font-size: 12px; letter-spacing: .15em; }
  .topnav a::after { left: 12px; right: calc(12px + .15em); }
  .top-actions { gap: 22px; }
  .top-search { width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .topnav a::after { transform: none; opacity: 0; transition: opacity .2s linear; }
  .topnav a:hover::after, .topnav a[aria-current="page"]::after { opacity: 1; }
  .top-cta svg, .news-field b svg, .top-search input { transition: none; }
}
/* Search folds to its icon; focusing it drops the field under the bar. */
@media (max-width: 1280px) {
  .top-search { display: block; width: 22px; height: 32px; }
  .top-search input { position: absolute; top: calc(100% + 20px); right: -14px; width: 280px; height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 8, 9, .97); opacity: 0; translate: 0 -6px; pointer-events: none; }
  .top-search:focus-within input { opacity: 1; translate: none; pointer-events: auto; }
  .top-search input:focus { border-color: rgba(255, 255, 255, .2); border-bottom-color: #fff; }
}
@media (max-width: 1220px) {
  .brand::after { display: none; }
  .topnav a { padding: 0 11px; font-size: 12px; letter-spacing: .14em; }
  .topnav a::after { left: 11px; right: calc(11px + .14em); }
  .top-cta { padding: 0 22px 0 26px; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-bottom { grid-template-columns: auto minmax(0, 1fr); }
  .footer-bottom p { grid-column: auto; }
  .footer-brand { grid-column: span 3; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
  .footer-rating { margin-top: 0; }
  .footer-news { grid-column: span 3; }
}
@media (max-width: 960px) {
  .topnav { display: none; }
  .top-search { display: none; }
  .top-actions { gap: 18px; }
  .top-login > span { display: inline; }
  .menu { order: 1; align-self: center; margin: 0; }
  .topbar-inner .menu { margin-left: 0; position: static; }
  .menu-panel { right: 0; top: calc(100% + 8px); }
  .top-cta { order: 2; }
}
@media (max-width: 640px) {
  :root { --bar: 66px; }
  #content > .rdr-hero:first-child { min-height: 0; padding-top: calc(48px + var(--bar)); }
  #content > .page-head:first-child { padding-top: calc(40px + var(--bar)); }
  #content > .ah:first-child { min-height: 0; padding-top: calc(56px + var(--bar)); }
  .topbar-inner { width: calc(100% - 32px); gap: 16px; }
  .brand { column-gap: 9px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-wordmark { height: 24px; }
  .top-login { display: none; }
  .top-actions { gap: 12px; }
  .top-cta { height: 36px; gap: 9px; padding: 0 18px 0 20px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); font-size: 11px; letter-spacing: .16em; }
  .top-cta span { display: inline; }
  .top-cta svg { display: block; font-size: 12px; }
  .footer { margin-top: 56px; padding-top: 48px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-brand, .footer-news { grid-column: span 2; }
  .footer-wordmark { height: 64px; }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .footer-bottom p { padding-right: 0; }
  .footer-badge { top: 0; margin-top: -8px; }
}
@media (max-width: 360px) {
  .brand-mark { width: 36px; height: 36px; }
  .brand-wordmark { height: 21px; }
  .top-cta { padding: 0 14px 0 16px; letter-spacing: .12em; }
}