/* Extraction Compass — game detail page (render-ssr.php, ec_render_game_page):
   back link, facts, tags, blurb, price/CCU/rating, editorial rating bars,
   screenshot carousel, trailer, similar games, latest articles, and the
   per-game dates block. Extracted from the render-ssr.php inline <style>.
   Tokens/reset/fonts: /tokens.css + /base.css. Header: /header.css. */

  /* Same richer ambient wash as the tool + planner (this page used to inherit
     it from index.php's inline <style>). */
  body{
    background:
      radial-gradient(ellipse 900px 500px at 12% -8%, rgba(226,87,74,0.10) 0%, transparent 60%),
      radial-gradient(ellipse 900px 600px at 88% 8%, rgba(91,143,199,0.08) 0%, transparent 60%),
      radial-gradient(ellipse at top left, #202020 0%, var(--bg-void) 55%),
      var(--bg-void);
    background-attachment: fixed, fixed, scroll, scroll;
  }

  .gamepage{ max-width: 940px; margin: 0 auto; padding: 32px clamp(20px, 3vw, 40px) 72px; }
  .gp-back{ display: inline-block; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; border: 1px solid var(--line); padding: 12px 18px; transition: border-color .15s ease, color .15s ease; }
  .gp-back:hover{ border-color: var(--accent-red-bright); color: var(--accent-red-bright); }
  .gp-back-top{ margin: 0 0 22px; }
  .gp-back-bottom{ margin-top: 36px; }
  .gamepage h1{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 14px; }
  .gamepage h2{ font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-red-bright); background: var(--accent-red-dim); border-left: 3px solid var(--accent-red-bright); padding: 9px 14px; margin: 34px 0 16px; }
  .gp-facts{ display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 18px; padding: 0; }
  .gp-facts div{ display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-md); }
  .gp-facts dt{ margin: 0; color: var(--text-dim); }
  .gp-facts dd{ margin: 0; color: var(--text-primary); font-weight: 600; }
  /* .card-tags (in den "aehnliche Spiele"-Kacheln) kommt aus /components.css. */
  .gp-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
  .gp-blurb{ font-size: var(--fs-lg); color: var(--text-primary); line-height: 1.6; margin: 0 0 8px; }
  .gp-about p{ font-size: var(--fs-base); color: var(--text-muted); line-height: 1.7; margin: 0 0 12px; }
  .gp-price{ font-size: var(--fs-lg); margin: 0 0 8px; }
  .gp-ccu, .gp-rating{ font-family: var(--font-mono); font-size: var(--fs-md); color: var(--text-muted); margin: 0 0 8px; }
  .gp-ccu{ margin-bottom: 14px; }
  .gp-ccu-label, .gp-rating-label{ color: var(--text-dim); }
  .gp-rating strong{ color: var(--text-primary); }
  .gp-rating-meta{ color: var(--text-dim); }
  .gp-ccu-label{ color: var(--text-dim); }
  .gp-links{ display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
  .gp-link{ display: inline-block; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 11px 16px; background: var(--bg-panel-raised); border: 1px solid var(--line); border-left: 3px solid var(--text-dim); color: var(--text-primary); text-decoration: none; transition: border-color .15s, color .15s; }
  .gp-link:hover{ border-left-color: var(--accent-red-bright); color: var(--accent-red-bright); }
  .gp-link-alt{ border-left-color: var(--accent-green); }
  .gp-muted, .gp-post-date{ color: var(--text-dim); font-size: var(--fs-md); }
  .gp-bars{ margin: 0 0 8px; }
  .gp-bar-row{ display: grid; grid-template-columns: 160px 1fr 44px; align-items: center; gap: 10px; font-size: var(--fs-md); margin-bottom: 10px; }
  .gp-bar{ height: 6px; background: var(--track); position: relative; }
  .gp-bar-fill{ position: absolute; inset: 0 auto 0 0; background: var(--accent-red-bright); }
  .gp-bar-val{ text-align: right; font-family: var(--font-mono); font-weight: 700; }
  /* ---- Screenshot-Karussell (oben) ---- */
  .gp-carousel{ margin: 6px 0 22px; }
  .gp-carousel-main{ position: relative; aspect-ratio: 16/9; background: var(--bg-panel-raised); border: 1px solid var(--line); overflow: hidden; }
  .gp-carousel-main img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
  .gp-car-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); line-height: 1; background: rgba(20,20,20,0.72); color: #fff; border: none; cursor: pointer; transition: background .15s; }
  .gp-car-arrow:hover{ background: rgba(20,20,20,0.92); }
  .gp-car-prev{ left: 0; }
  .gp-car-next{ right: 0; }
  .gp-car-count{ position: absolute; right: 8px; bottom: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; color: #fff; background: rgba(20,20,20,0.72); padding: 3px 7px; }
  .gp-carousel-thumbs{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .gp-car-thumb{ width: 84px; aspect-ratio: 16/9; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; opacity: .55; transition: opacity .15s, border-color .15s; overflow: hidden; }
  .gp-car-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .gp-car-thumb:hover{ opacity: .85; }
  .gp-car-thumb.is-active{ opacity: 1; border-color: var(--accent-red-bright); }

  /* ---- Trailer ---- */
  .gp-trailer{ position: relative; aspect-ratio: 16/9; margin: 4px 0 8px; }
  .gp-trailer iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--line); }

  /* ---- Screenshot-Raster (unten) ---- */
  .gp-shots{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 8px; }
  .gp-shots img{ width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--line); cursor: zoom-in; }
  .gp-section{ margin-top: 8px; }
  /* .grid + .grid-compact (das "aehnliche Spiele"-Raster) kommen aus /components.css. */
  .gp-posts{ display: flex; flex-direction: column; }
  .gp-post{ display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-primary); text-decoration: none; font-size: var(--fs-base); }
  .gp-post:last-child{ border-bottom: none; }
  .gp-post:hover .gp-post-title{ color: var(--accent-red-bright); }
  .gp-post-title{ font-weight: 600; }
  .gp-post-all{ display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
  .gp-post-all:hover{ color: var(--accent-red-bright); }

  /* ---- Termine fuer dieses Spiel (bild-forward, an kalender.php angelehnt) ---- */
  .gp-cal-list{ display: grid; gap: 12px; }
  .gp-cal-card{
    display: grid; grid-template-columns: 176px 1fr;
    background: var(--bg-panel); border: 1px solid var(--line);
    border-left: 3px solid var(--line); overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .gp-cal-card:hover{ border-color: var(--text-dim); transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.6); }
  .gp-cal-accent-wipe, .gp-cal-accent-season{ border-left-color: var(--accent-red-bright); }
  .gp-cal-accent-release{ border-left-color: var(--accent-gold); }
  .gp-cal-accent-update, .gp-cal-accent-playtest{ border-left-color: var(--text-muted); }
  .gp-cal-card.is-est{ background: repeating-linear-gradient(135deg, var(--bg-panel) 0 10px, var(--bg-panel-raised) 10px 20px); }

  .gp-cal-thumb{ position: relative; aspect-ratio: 16/9; background: var(--bg-panel-raised); overflow: hidden; }
  .gp-cal-thumb-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .gp-cal-thumb-glyph{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-glyph); color: var(--line); }
  .gp-cal-type-tag{ position: absolute; left: 0; bottom: 0; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(20,20,20,0.82); padding: 4px 8px; }

  .gp-cal-body{ padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 5px; }
  .gp-cal-date{
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; letter-spacing: .02em;
    color: var(--text-primary);
  }
  .gp-cal-title{ font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; margin: 1px 0 0; color: var(--text-primary); }
  .gp-cal-note{ font-size: var(--fs-md); color: var(--text-muted); line-height: 1.5; margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gp-cal-est-note{ font-size: var(--fs-xs); color: var(--text-dim); font-style: italic; margin: 2px 0 0; }
  .gp-cal-badge{ font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; }
  .gp-cal-badge-est, .gp-cal-badge-warn{ background: var(--accent-gold); color: var(--on-gold); }
  .gp-cal-badge-live{ background: var(--accent-red-bright); color: #fff; }
  .gp-cal-foot{ display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin-top: 8px; }
  .gp-cal-link{ font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
  .gp-cal-link:hover{ color: var(--accent-red-bright); }

  .gp-cal-past{ margin-top: 18px; }
  .gp-cal-past > summary{ cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 10px 0; }
  .gp-cal-past[open] > summary{ color: var(--text-muted); }
  .gp-cal-past .gp-cal-list{ margin-top: 12px; }
  .gp-cal-past .gp-cal-card{ opacity: .78; }
  .gp-cal .gp-post-all{ margin-top: 16px; }

  /* ---- Lightbox ---- */
  .gp-lightbox{ position: fixed; inset: 0; z-index: 200; background: rgba(8,9,10,0.92); display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
  .gp-lightbox[hidden]{ display: none; }
  .gp-lightbox img{ max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--line); }
  .gp-lb-close{ position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; font-size: var(--fs-xl); background: rgba(20,20,20,0.72); color: #fff; border: none; cursor: pointer; }
  .gp-lb-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-glyph); background: rgba(20,20,20,0.6); color: #fff; border: none; cursor: pointer; }
  .gp-lb-arrow:hover, .gp-lb-close:hover{ background: rgba(20,20,20,0.92); }
  .gp-lb-prev{ left: 12px; }
  .gp-lb-next{ right: 12px; }
  .gp-lb-count{ position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .06em; color: #ccc; }

  @media (max-width: 560px){
    .gp-bar-row{ grid-template-columns: 110px 1fr 40px; }
    .gp-car-thumb{ width: 64px; }
    .gp-lb-arrow{ width: 40px; height: 52px; font-size: var(--fs-2xl); }
    .gp-cal-card{ grid-template-columns: 1fr; }
    .gp-cal-thumb{ aspect-ratio: 16/7; }
  }

  /* ---- 404: unknown game slug (ec_render_not_found) ---- */
  .ec-notfound{ max-width: 720px; padding: 80px clamp(20px, 3vw, 40px); text-align: center; }
  .ec-notfound h1{
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-h1); text-transform: uppercase;
    letter-spacing: -.01em; margin: 0 0 14px;
  }
  .ec-notfound p{ color: var(--text-muted); font-size: var(--fs-lg); max-width: 48ch; margin: 0 auto 28px; }
  .ec-notfound-cta{
    display: inline-block; font-family: var(--font-mono); font-size: var(--fs-sm);
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-primary); border: 1px solid var(--line);
    padding: 13px 20px; text-decoration: none;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .ec-notfound-cta:hover{ border-color: var(--accent-red-bright); color: var(--accent-red-bright); }