.games-page { padding-bottom: 2rem; }
.games-intro { overflow: hidden; }
.games-intro .card-body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: radial-gradient(ellipse at top right, var(--site-accent-soft), transparent 65%);
}
.games-eyebrow {
  margin-bottom: .4rem;
  color: var(--site-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.games-intro h1 {
  max-width: 24ch;
  margin-bottom: .5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.games-intro p:last-child { max-width: 78ch; color: var(--site-muted); line-height: 1.55; }
.games-list { display:grid; gap:1rem; margin-bottom:1rem; }
.games-card { overflow: hidden; }
.games-card-header { display:grid; grid-template-columns:144px minmax(0,1fr); }
.games-card-header .games-card-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; padding:1.25rem; }
.games-card-copy h2 { font-size:clamp(1.2rem,2.5vw,1.5rem); letter-spacing:-.03em; }
.games-leaderboards { border-top:1px solid var(--site-border); }
.games-card-art {
  display: grid;
  place-items: center;
  min-height: 144px;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(57, 209, 195, .28), transparent 65%),
    linear-gradient(rgba(15, 118, 110, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, .07) 1px, transparent 1px),
    var(--site-accent-soft);
  background-size: auto, 28px 28px, 28px 28px, auto;
  border-right: 1px solid var(--site-border);
}
.games-card-icon {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 24%;
  transform: rotate(-6deg);
  box-shadow: 0 8px 16px rgba(8, 43, 48, .2);
}
.games-card-copy h2 { margin-bottom: .45rem; font-weight: 700; color: var(--site-accent); }
.games-card-copy p { color: var(--site-muted); font-size:.9rem; line-height:1.5; }
.games-card-copy em { font-style: normal; }
.games-card .games-card-play,
.games-card .games-card-play:hover,
.games-card .games-card-play:focus-visible {
  margin-top: .75rem;
  min-height: 44px;
  padding: .45rem 1.25rem;
  transform: none;
}
.games-leaderboards > .card-body { padding:1rem 1.25rem; }
.games-leaderboards-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.games-leaderboards-heading h3 { margin:0; font-size:1.15rem; font-weight:700; letter-spacing:-.025em; }
.games-leaderboards-heading > i { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.6rem; background:var(--site-accent-soft); color:var(--site-accent); font-size:1rem; }
.games-rankings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.games-ranking-section { min-width:0; }
.games-ranking {
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  border:1px solid var(--site-border); border-radius:.75rem;
  background:var(--site-surface-solid); color:var(--site-text, var(--text-charcoal));
}
.games-ranking-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem .85rem; }
.games-ranking-heading :is(h3, h4) { margin:0; font-size:1rem; font-weight:700; letter-spacing:-.015em; }
.games-ranking-label { flex-shrink:0; border-radius:2rem; padding:.25rem .6rem; background:var(--site-accent-soft); color:var(--site-accent); font-size:.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.games-ranking-period { margin:0; padding:0 .85rem .6rem; color:var(--site-muted); font-size:.75rem; }
.games-ranking-status { display:grid; place-items:center; min-height:4.5rem; margin:0; padding:1rem; color:var(--site-muted); text-align:center; font-size:.875rem; }
.games-ranking-table-wrap { min-width:0; overflow-x:auto; }
.games-ranking-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.games-ranking-table th { padding:.5rem .6rem; border-block:1px solid var(--site-border); background:var(--site-surface-soft, var(--site-accent-soft)); color:var(--site-muted); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.games-ranking-table td { padding:.5rem .6rem; border-bottom:1px solid var(--site-border); vertical-align:middle; }
.games-ranking-table tr:last-child td { border-bottom:0; }
.games-ranking-table .games-ranking-rank { width:3rem; padding-left:.75rem; text-align:center; }
.games-ranking-table .games-ranking-value { padding-right:.75rem; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.games-ranking-table td.games-ranking-value { font-weight:700; }
.games-ranking-position { display:inline-grid; place-items:center; min-width:1.75rem; height:1.75rem; border-radius:.55rem; color:var(--site-muted); font-size:.75rem; font-weight:600; font-variant-numeric:tabular-nums; }
.games-ranking-position[data-podium="1"] { background:#fff0c2; color:#795200; }
.games-ranking-position[data-podium="2"] { background:#e8edf4; color:#4c5d74; }
.games-ranking-position[data-podium="3"] { background:#f8e5d7; color:#855331; }
.games-ranking-current { background:var(--site-accent-soft); }
.games-ranking-current td:first-child { box-shadow:inset 3px 0 var(--site-accent); }
.games-ranking-player { display:inline-flex; align-items:center; gap:.625rem; max-width:100%; color:inherit; text-decoration:none; font-weight:600; }
.games-ranking-player:hover { color:var(--site-accent); text-decoration:underline; }
.games-ranking-player img { flex-shrink:0; width:28px; height:28px; object-fit:cover; border-radius:50%; }
.games-ranking-player span { overflow-wrap:anywhere; min-width:0; line-height:1.4; }
.games-ranking-you { margin:.5rem .75rem .65rem; padding:.5rem .65rem; border-radius:.65rem; background:var(--site-accent-soft); color:var(--site-accent); font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums; }
.games-ranking-pagination { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding:.5rem .75rem; border-top:1px solid var(--site-border); }
.games-ranking-nav { min-height:36px; padding:.35rem .7rem; border:1px solid var(--site-border); border-radius:.5rem; background:transparent; color:inherit; font:inherit; font-size:.75rem; font-weight:600; cursor:pointer; }
.games-ranking-nav:hover:not(:disabled) { border-color:var(--site-accent); background:var(--site-accent-soft); color:var(--site-accent); }
.games-ranking-nav:disabled { opacity:.4; cursor:default; }
.games-ranking-nav:focus-visible, .games-ranking-player:focus-visible { outline:2px solid var(--site-accent); outline-offset:3px; }
.games-ranking-page { color:var(--site-muted); font-size:.75rem; font-variant-numeric:tabular-nums; }
.games-ranking-retry { align-self:center; margin:.5rem 1rem 1rem; }
.games-ranking [hidden] { display:none !important; }
.games-overall-body { display:grid; gap:1rem; padding:1.25rem; }
.games-overall-copy { min-width:0; }
.games-overall-copy h2 { margin-bottom:.5rem; font-size:1.25rem; font-weight:700; letter-spacing:-.025em; }
.games-overall-copy p { color:var(--site-muted); font-size:.875rem; line-height:1.55; }
.games-overall-copy p:last-child { margin-bottom:0; }
@media (min-width:992px) {
  .games-overall-body { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); align-items:start; }
}
@media (min-width:1200px) {
  .games-rankings { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .games-card-header { grid-template-columns:88px minmax(0,1fr); }
  .games-card-art { min-height:132px; padding:.75rem; }
  .games-card-icon { width:64px; height:64px; }
  .games-card-header .games-card-copy { padding:1rem; }
  .games-overall-body, .games-leaderboards > .card-body { padding:1rem; }
  .games-leaderboards-heading h3 { font-size:1rem; }
  .games-rankings { grid-template-columns:minmax(0,1fr); gap:.75rem; }
  .games-ranking-heading { padding:.75rem; flex-wrap:wrap; }
  .games-ranking-period { padding-inline:.75rem; }
  .games-ranking-table .games-ranking-rank { padding-left:.75rem; width:3rem; }
  .games-ranking-table .games-ranking-value { padding-right:.75rem; }
  .games-ranking-nav { min-height:44px; }
}