/* ---------- Games page ---------- */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.games-hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px 24px 34px;
  text-align:center;
}

.games-hero h1{
  margin:0 0 12px;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:800;
}

.games-section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px 104px;
}

.games-status{
  margin:40px 0;
  text-align:center;
  color:var(--ink-muted);
  font-size:.98rem;
}
.games-status.is-error{ color:var(--ink); font-weight:600; }

.game-cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
}

.game-card{
  display:flex;
  flex-direction:column;
  padding:20px 20px 16px;
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:0 0 0 1px #e9edf3, 0 1px 2px rgba(16,21,28,.04);
  transition:box-shadow .18s ease, transform .18s ease;
}
.game-card:hover{
  box-shadow:0 0 0 1px #dbe4f1, 0 6px 20px rgba(16,21,28,.07);
  transform:translateY(-2px);
}

.game-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:72px;
}

.game-card-icon{
  width:72px; height:72px;
  border-radius:18px;
  object-fit:cover;
  background:#f4f6f9;
  flex:none;
  /* the same soft ring the timeline icons wear */
  box-shadow:0 0 0 5px rgba(31,111,235,.22);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 22%, transparent);
}

.game-card-name{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.3;
}
.game-card-name a{ color:var(--ink); }
.game-card-name a:hover{ color:var(--blue); text-decoration:none; }
.game-card-name a:focus-visible{
  outline:3px solid var(--blue-soft);
  outline-offset:3px;
  border-radius:6px;
}

.game-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:20px 0 0;
  padding:16px 0 0;
  border-top:1px solid #eef1f5;
}

.game-stat{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.game-stat dt{
  order:2;
  font-size:.76rem;
  font-weight:600;
  color:var(--ink-muted);
}

.game-stat dd{
  order:1;
  margin:0;
  font-size:1.22rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.15;
}

/* ----- per-game sparkline ----- */
.game-chart{ margin:16px 0 0; }

.spark{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:300 / 92;
  overflow:visible;
}

.spark-line{
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* hairline, solid, one shade off the surface — a grid should recede */
.spark-base{
  stroke:#e6eaf0;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

.spark-peak{
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.spark-now{
  fill:var(--blue);
  stroke:#fff;          /* 2px surface ring, so the dot reads over the line */
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.spark-cross{
  stroke:var(--ink-muted);
  stroke-width:1;
  opacity:.35;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}

.spark-hover{
  fill:var(--blue);
  stroke:#fff;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}

.spark-hit{ fill:transparent; }

.game-chart-cap{
  margin:8px 0 0;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
}


/* ----- hover readout, shared by every sparkline ----- */
.spark-tip{
  position:absolute;
  z-index:80;
  pointer-events:none;
  padding:7px 10px;
  border-radius:10px;
  background:var(--ink);
  color:#fff;
  font-size:.78rem;
  line-height:1.35;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(16,21,28,.22);
}
.spark-tip b{ font-weight:800; font-variant-numeric:tabular-nums; }
.spark-tip span{ opacity:.72; font-variant-numeric:tabular-nums; }

@media (max-width: 520px){
  .games-hero{ padding:48px 16px 26px; }
  .games-section{ padding:0 16px 72px; }
  .game-cards{ grid-template-columns:1fr; gap:16px; }
  .game-card{ padding:16px 16px 14px; }
  .game-card-icon{ width:60px; height:60px; border-radius:15px; }
  .game-stat dd{ font-size:1.1rem; }
}