/* =========================================================
   PINEFORGE COLLECTIVE — Game library
   The editorial system applied to the catalogue: a trailer-led hero,
   a genre filter and one rich card per game with real gameplay frames.
   ========================================================= */

.games-route .route-main { padding-top:84px; }
.games-route .route-main > section::after { display:none; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.library-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(40px,6vw,88px);
  padding-top:clamp(56px,7vw,96px) !important;
  background:
    radial-gradient(46rem 34rem at 82% 46%,color-mix(in srgb,var(--forge-copper) 20%,transparent),transparent 70%),
    radial-gradient(36rem 30rem at 4% 10%,rgba(67,119,79,.2),transparent 72%);
}
:root[data-theme="light"] .library-hero {
  background:
    radial-gradient(46rem 34rem at 82% 46%,rgba(201,140,92,.2),transparent 70%),
    radial-gradient(36rem 30rem at 4% 10%,rgba(122,164,105,.22),transparent 72%);
}
.library-hero-copy { min-width:0; }
.library-hero .eyebrow { margin-bottom:22px; }
.library-hero h1 {
  margin:0;
  font:500 clamp(44px,5.4vw,82px)/.98 var(--font-display);
  letter-spacing:-.052em;
  text-wrap:balance;
}
.library-hero h1 span {
  background:var(--ed-heading-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:.08em;
}
.library-hero-copy > p:not(.eyebrow) {
  margin:24px 0 0;
  max-width:36em;
  color:var(--text-secondary);
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.7;
}
.library-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:36px 0 0;
  border-top:1px solid var(--ed-line);
}
.library-stats > div {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:22px 18px 0 0;
}
.library-stats > div + div { padding-left:18px; border-left:1px solid var(--ed-line); }
.library-stats dd { display:contents; margin:0; }
.library-stats dd b {
  order:-1;
  color:var(--ed-ember);
  font:500 clamp(34px,3.4vw,46px)/1 var(--font-display);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.library-stats dt { color:var(--text-primary); font:600 14px/1.3 var(--font-display); }
.library-stats dd small { color:var(--text-secondary); font:400 12.5px/1.4 var(--font-body); }
.library-hero-media { min-width:0; }

/* ---------------------------------------------------------
   Filter
   --------------------------------------------------------- */
.library-section { padding-top:clamp(40px,5vw,72px) !important; }
.library-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(32px,4vw,44px); }
.library-filters button {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--ed-line-strong);
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
  font:600 12.5px/1 var(--font-display);
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.library-filters button span { font:500 10.5px/1 var(--font-mono); opacity:.72; }
.library-filters button:hover { color:var(--text-primary); border-color:var(--ed-ember); }
.library-filters button[aria-pressed="true"] { border-color:transparent; background:var(--text-primary); color:var(--bg-primary); }

/* ---------------------------------------------------------
   Game cards
   --------------------------------------------------------- */
.game-library {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:24px;
}
.library-card {
  --tile-accent:var(--accent-primary);
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--ed-line);
  border-radius:calc(var(--ed-radius) + 2px);
  background:var(--ed-card);
  transition:border-color .35s ease,box-shadow .5s ease,transform .5s var(--ease);
}
.library-card:hover {
  border-color:color-mix(in srgb,var(--tile-accent) 50%,transparent);
  box-shadow:0 30px 70px -36px color-mix(in srgb,var(--tile-accent) 70%,transparent);
}
.library-card-art {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  background:color-mix(in srgb,var(--tile-accent) 24%,var(--bg-secondary));
  cursor:pointer;
  isolation:isolate;
}
.library-card-art::before {
  content:"";
  position:absolute;
  inset:-24px;
  background:var(--tile-cover) center / cover no-repeat;
  filter:blur(24px) saturate(1.25) brightness(.78);
}
.library-card-art img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
.library-card-art--contain img { object-fit:contain; }
.library-card-art:hover img,
.library-card-art:focus-visible img { transform:scale(1.04); }
.library-card-art:focus-visible { outline:2px solid var(--tile-accent); outline-offset:-4px; }
.library-card-status {
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(244,242,233,.2);
  border-radius:999px;
  background:rgba(6,12,8,.62);
  color:#f4f2e9;
  font:600 10px/1 var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.library-card-status::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--tile-accent);
  box-shadow:0 0 10px var(--tile-accent);
}
.library-card-body {
  display:grid;
  flex:1 1 auto;
  align-content:start;
  gap:18px;
  padding:22px 24px 26px;
}
.library-card-head {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.library-card-head .game-tile-icon {
  width:48px;
  height:48px;
  border-radius:13px;
  background-position:calc(var(--icon,0) * -48px) 0;
  background-size:384px 48px;
}
.library-card-head small {
  display:block;
  color:color-mix(in srgb,var(--tile-accent) 58%,var(--text-secondary));
  font:600 10px/1.3 var(--font-display);
  letter-spacing:.13em;
  text-transform:uppercase;
}
:root[data-theme="light"] .library-card-head small { color:color-mix(in srgb,var(--tile-accent) 36%,var(--text-primary)); }
.library-card-head h3 { margin:5px 0 0; font:600 clamp(22px,2vw,26px)/1.1 var(--font-display); letter-spacing:-.025em; }
.library-card-index { align-self:start; color:var(--text-secondary); font:500 11px/1 var(--font-mono); letter-spacing:.08em; }
.library-card-body > p { margin:0; color:var(--text-secondary); font-size:15px; line-height:1.65; }
.library-card-facts { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.library-card-facts li {
  padding:7px 11px;
  border:1px solid var(--ed-line);
  border-radius:999px;
  color:var(--text-primary);
  font:500 12px/1.2 var(--font-body);
}
.library-card-frames { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.library-card-frames button {
  position:relative;
  aspect-ratio:4 / 3;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--ed-line);
  border-radius:12px;
  background:#0a140e;
  cursor:pointer;
}
.library-card-frames img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease),opacity .3s ease; }
.library-card-frames button:hover img,
.library-card-frames button:focus-visible img { transform:scale(1.06); }
.library-card-frames button:focus-visible { outline:2px solid var(--tile-accent); outline-offset:2px; }
.library-card-open { justify-self:start; padding:0 0 6px; border-top:0; border-left:0; border-right:0; background:none; cursor:pointer; }

/* ---------------------------------------------------------
   Contact and follow
   --------------------------------------------------------- */
.library-cta {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(40px,6vw,96px);
  border-top:1px solid var(--ed-line);
}
.library-cta-copy > p:not(.eyebrow) { margin:22px 0 32px; max-width:40ch; color:var(--text-secondary); font-size:16px; line-height:1.7; }
.library-follow .social-links { display:grid; gap:12px; }
.library-note { margin:18px 0 0; color:var(--text-secondary); font-size:13px; line-height:1.6; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1099px) {
  .library-hero { grid-template-columns:1fr; }
  .library-hero-copy { max-width:720px; }
  .library-cta { grid-template-columns:1fr; }
}

@media (max-width:899px) {
  .game-library { grid-template-columns:1fr; }
}

@media (max-width:719px) {
  .games-route .route-main { padding-top:76px; }
  .library-hero h1 { font-size:clamp(40px,11vw,52px); }
  .library-stats > div { padding-right:10px; }
  .library-stats > div + div { padding-left:12px; }
  .library-filters {
    flex-wrap:nowrap;
    margin-inline:calc(-1 * var(--ed-inline));
    padding:2px var(--ed-inline) 6px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .library-filters::-webkit-scrollbar { display:none; }
  .library-filters button { flex:0 0 auto; }
  .library-card-body { gap:16px; padding:18px 18px 22px; }
  .library-card-frames { gap:8px; }
  .library-card-frames button { border-radius:10px; }
}

@media (max-width:400px) {
  .library-stats { grid-template-columns:1fr; }
  .library-stats > div,
  .library-stats > div + div { display:grid; grid-template-columns:auto 1fr; gap:2px 18px; padding:16px 0; border-left:0; border-bottom:1px solid var(--ed-line); }
  .library-stats dd b { grid-row:span 2; align-self:center; }
}

@media (prefers-reduced-motion:reduce) {
  .library-card,
  .library-card-art img,
  .library-card-frames img { transition:none !important; }
}

@media (forced-colors:active) {
  .library-hero h1 span { color:CanvasText; background:none; }
  .library-card,
  .library-filters button { border-color:CanvasText; }
}