/* spotlight.css — loaded only by spotlight.html, on top of style.css.
 *
 * The homepage hero in style.css stays the comparison baseline and is not touched here.
 * Everything below styles the new full-bleed hero: the current game title is the page's
 * h1, the description reads on the left, and the arrows, pause control and unnumbered
 * progress pills sit discreetly in the bottom-right corner. The cover art is only a
 * Source artwork is graded under a gradient while retaining its original detail.
 */
:root{--spot-autoplay:7s}

/* Header: the spotlight page runs a compact 82.5px bar, ~10% shorter than the homepage's 94px
   (style.css) — 75px raised by 10%. The logo steps up with it (27px -> 29.7px), the gaps and the
   search narrow fractionally, and controls keep 44px touch targets so the row stays balanced
   instead of stretching. Scoped to .page-spotlight (the class is on <html>) and to >=851px so the
   shared wrapping header at 721–850px and the mobile layout are left exactly as they are. */
@media(min-width:851px){
  .page-spotlight .site-header{height:82.5px;gap:clamp(22px,3.8vw,46px)}
  .page-spotlight .site-header nav{gap:clamp(17px,2.3vw,28px)}
  .page-spotlight .wordmark{font-size:29.7px}
  .page-spotlight .nav-link{font-size:14px;padding:13px 0}
  .page-spotlight .search-box{max-width:270px;width:24%;min-height:44px;padding:11px 12px}
  .page-spotlight .header-icon{width:44px;height:44px}
  .page-spotlight{scroll-padding-top:92px}
}
/* Nav: an explicit 2px lime underline, inside the button just under the label and flush to its
   right edge — never a pill, never a rounded background, and never a bar parked at the header's
   bottom edge. It rests at 24px and grows to the full width of the text/button on hover or
   keyboard focus. Identical at desktop and mobile, so the header height is untouched. */
.page-spotlight .nav-link{position:relative}
.page-spotlight .nav-link.active:after,
.page-spotlight .nav-link:focus-visible:after{content:'';position:absolute;right:0;left:auto;transform:none;bottom:3px;width:24px;height:2px;background:var(--lime);transition:width .5s cubic-bezier(.4,0,.2,1)}
.page-spotlight .nav-link.active:hover:after,
.page-spotlight .nav-link.active:focus-visible:after{width:100%}
@media(max-width:720px){
  .page-spotlight .wordmark{font-size:27px}
  .page-spotlight .site-header{padding-top:22px;padding-bottom:15px}
  .page-spotlight .nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .page-spotlight .header-icon{width:44px;height:44px}
}

/* Header order on the spotlight UI: search, then the favourites heart with the saved count,
   then the dummy account, then the burger placeholder. The favourites heart is a header icon,
   so it keeps the same 40px (44px on the spotlight header) touch target as the other tools. */
.page-spotlight .favourite-button{position:relative;color:#cfd8c4}
.page-spotlight .favourite-button svg{width:18px;height:18px}
.page-spotlight .favourite-button:hover{border-color:var(--lime);color:var(--lime)}
.page-spotlight .favourite-button.active,
.page-spotlight .favourite-button[aria-current="page"]{border-color:var(--lime);color:var(--lime)}
.page-spotlight .favourite-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--lime);color:#0b0d0b;font-size:11px;font-weight:700;line-height:1}
/* The burger is a placeholder until a real menu lands; the popover shows a short note instead
   of the old original-home / spotlight-preview links. */
.page-spotlight .popover .popover-note{margin:0;padding:6px 12px;font-size:13px;line-height:1.6;color:#a9b39c}

/* The header and the footer use the straight Pixel text wordmark the shared pages use —
   "GAMEFLEX" plus the lime <span class="logo-pixel">, no curve image. The anchor keeps class
   .wordmark, its accessible "GAMEFLEX home" name, and the footer's smaller 27px size. */
.page-spotlight .footer-logo{font-size:27px}

/* Spotlight runs a darker page than the homepage: --bg drops to #0b0d0b on <html>, body inherits
   it, and the header, hero fade and footer pick up the same value so nothing seams. */
html.page-spotlight{--bg:#0b0d0b;background:var(--bg)}
.page-spotlight .site-header{background:#0b0d0bfa}
.page-spotlight footer{border-top:1px solid var(--border)}

.hero-spotlight{height:auto;min-height:min(86vh,820px);display:flex;flex-direction:column;justify-content:flex-end;padding:56px 4.6% 118px;background:#0b0d0b}
.hero-spotlight .hero-image{background-position:center 40%;background-size:cover;filter:saturate(.95) brightness(.8);transform:none}
.hero-spotlight .hero-shade{background:linear-gradient(90deg,#090b09f7 0%,#090b09d9 32%,#090b0970 58%,#090b091f 82%),linear-gradient(0deg,#0b0d0b 0%,#0b0d0beb 15%,#0b0d0b00 58%),radial-gradient(72% 62% at 86% 6%,#c4fa5317,transparent 72%)}
.hero-spotlight .hero-image.hero-fade{animation:hero-fade .6s ease-out}
.hero-spotlight .hero-image.hero-image-empty{background-color:#141a15}

/* Body copy ----------------------------------------------------------------------- */
.hero-spotlight .hero-slider{position:static;width:auto;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;text-align:left;display:block}
.hero-spotlight .hero-slide{display:flex;flex-direction:column;gap:0;align-items:flex-start;max-width:min(760px,60ch)}
.hero-spotlight .hero-slide .eyebrow{justify-content:flex-start;color:var(--lime);font-size:13px;letter-spacing:2.2px}
.hero-spotlight h1{font-size:clamp(38px,5.8vw,84px);font-weight:700;line-height:1.02;letter-spacing:-2.6px;margin:16px 0 14px;max-width:18ch;text-shadow:0 4px 38px #000000ab}
.hero-spotlight .hero-slide-meta{margin:0 0 14px;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:#cbd5bf}
.hero-spotlight .hero-slide-copy{display:block;overflow:visible;margin:0 0 12px;font-size:clamp(16px,1.45vw,19px);line-height:1.72;color:#dfe6d5;max-width:56ch}
.hero-spotlight .hero-slide-req{display:block;overflow:visible;margin:0;padding-left:12px;border-left:2px solid #c4fa5366;font-size:14px;line-height:1.65;color:#b9c4a9;max-width:58ch}
.hero-spotlight .hero-actions{margin-top:26px;gap:12px}

/* Controls, bottom right ----------------------------------------------------------- */
.hero-spotlight .hero-slider-controls{position:absolute;right:4.6%;bottom:30px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hero-spotlight .hero-buttons{display:flex;align-items:center;gap:8px}
.hero-spotlight .hero-dots{display:flex;flex-wrap:nowrap;overflow:visible;justify-content:flex-end;gap:10px;padding:6px 0}
.hero-spotlight .hero-dot{position:relative;flex:0 0 auto;width:34px;height:7px;min-width:0;padding:0;border:0;border-radius:999px;background:#ffffff33;overflow:hidden;transition:background .2s}
.hero-spotlight .hero-dot:hover{background:#ffffff5c}
.hero-spotlight .hero-dot.active{background:#ffffff4a}
.hero-spotlight .hero-dot.active::after{content:'';position:absolute;inset:0;background:var(--lime);border-radius:999px;transform:scaleX(0);transform-origin:left center;animation:spot-pill-fill var(--spot-autoplay) linear forwards}
.hero-spotlight .hero-dots.is-paused .hero-dot.active::after{animation-play-state:paused}
.hero-spotlight .hero-dots.is-static .hero-dot.active::after{animation:none;transform:scaleX(1)}
@keyframes spot-pill-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Up-next thumbnails. These replace the pills on the spotlight page: five small cover
   cuts of the games that follow the current slide. app.js still builds pills, so the block
   above stays as the fallback when spotlight.mjs cannot load (or hero.slides is absent). */
.hero-spotlight .hero-thumb{position:relative;flex:0 0 auto;width:84px;height:48px;min-width:0;min-height:44px;padding:0;border:1px solid #ffffff2e;border-radius:8px;background:#0d110ccc;overflow:hidden;cursor:pointer;box-shadow:0 6px 18px #00000059;transition:border-color .2s,box-shadow .2s,transform .2s}
.hero-spotlight .hero-thumb:hover{border-color:#c4fa5399;transform:translateY(-1px)}
.hero-spotlight .hero-thumb:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.hero-spotlight .hero-thumb[hidden]{display:none}
.hero-spotlight .hero-thumb-art{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.82);transition:filter .2s}
.hero-spotlight .hero-thumb:hover .hero-thumb-art,.hero-spotlight .hero-thumb:focus-visible .hero-thumb-art{filter:saturate(1.02) brightness(1)}

/* Thin progress bar for the current slide. Shares --spot-autoplay with the timer and the
   same paused/static states spotlight.mjs paints on #hero-dots. */
.hero-spotlight .hero-progress{width:332px;max-width:100%;display:flex;align-items:center;gap:9px;margin:0 0 2px}
.hero-spotlight .hero-progress-label{flex:0 0 auto;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#9aa78c;white-space:nowrap}
.hero-spotlight .hero-progress-track{position:relative;flex:1 1 auto;height:2px;border-radius:999px;background:#ffffff26;overflow:hidden}
.hero-spotlight .hero-progress-fill{position:absolute;inset:0;border-radius:999px;background:var(--lime);transform:scaleX(0);transform-origin:left center;animation:spot-progress var(--spot-autoplay) linear forwards}
.hero-spotlight .hero-progress.is-paused .hero-progress-fill{animation-play-state:paused}
.hero-spotlight .hero-progress.is-static .hero-progress-fill{animation:none;transform:scaleX(1)}
@keyframes spot-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-spotlight .hero-arrow{width:40px;height:40px;border-radius:999px;border:1px solid #ffffff2e;background:#0d110ccc;backdrop-filter:blur(6px);font-size:20px;color:#e6ecdc}
.hero-spotlight .hero-arrow:hover:not(:disabled){border-color:var(--lime);color:var(--lime);background:#131a0ecc}
.hero-spotlight .hero-pause .icon-pause,.hero-spotlight .hero-pause .icon-play{width:17px;height:17px}
.hero-spotlight .hero-pause .icon-play{display:none}
.hero-spotlight .hero-pause[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
.hero-spotlight .hero-pause[aria-pressed="true"] .icon-pause{display:none}
.hero-spotlight .hero-pause[aria-pressed="true"] .icon-play{display:block}

/* Responsive ---------------------------------------------------------------------- */
@media(max-width:1050px){
  .hero-spotlight{min-height:auto;padding:48px 4.6% 30px}
  .hero-spotlight h1{font-size:clamp(34px,7vw,58px);letter-spacing:-1.9px}
  .hero-spotlight .hero-slider-controls{position:static;margin-top:26px;width:100%;align-items:flex-start}
  .hero-spotlight .hero-dots,.hero-spotlight .hero-buttons{justify-content:flex-start}
  .hero-spotlight .hero-slide{max-width:none}
}
@media(max-width:720px){
  .hero-spotlight{padding:34px 5% 26px}
  .hero-spotlight .hero-image{background-position:center 42%;filter:saturate(.95) brightness(.65);transform:none}
  .hero-spotlight h1{font-size:clamp(30px,8.6vw,44px);letter-spacing:-1.5px;margin:12px 0 12px;max-width:none}
  .hero-spotlight .hero-slide-meta{font-size:12px;letter-spacing:1.1px}
  .hero-spotlight .hero-slide-copy{font-size:16px;line-height:1.68}
  .hero-spotlight .hero-slide-req{font-size:13px}
  .hero-spotlight .hero-actions{width:100%;gap:9px}
  .hero-spotlight .hero-actions .button{flex:1 1 auto;justify-content:center}
  .hero-spotlight .hero-slider-controls{gap:12px}
  .hero-spotlight .hero-dots{width:100%;gap:6px;padding:6px 0}
  .hero-spotlight .hero-dot{flex:1 1 0;width:auto;max-width:26px;min-width:8px}
  .hero-spotlight .hero-progress{width:100%}
  .hero-spotlight .hero-thumb{flex:1 1 0;width:auto;max-width:none;height:auto;aspect-ratio:84/48;min-height:44px}
  .hero-spotlight .hero-arrow{width:44px;height:44px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .page-spotlight .nav-link:after{transition:none}
  .hero-spotlight .hero-dot.active::after{animation:none;transform:scaleX(1)}
}