/*!
 * GameLedger — the score-led index
 * ---------------------------------------------------------------------------
 * The base site (NorthFiveFun) shows games as a GRID of tall cards: a 16:9
 * cover with the app logo floating over it, on a dark neon palette.
 * GameGuide 002 shows them as filled, rounded ROWS led by a small app icon.
 *
 * GameLedger shows neither. It is an INDEX - the way a financial paper or a
 * book catalogue sets a table of entries:
 *   - a hairline rule between rows instead of a filled card,
 *   - the Play Store score as the LEADING column, set large in a ruled cell,
 *   - the score, the icon and the text on COLUMNS THAT LINE UP DOWN THE WHOLE
 *     LIST (CSS grid, not a flex row), so the list reads as a table,
 *   - condensed uppercase for the labels, serif for the prose.
 *
 * The markup is IDENTICAL to the base site - the same .card-grid /
 * .game-card / .game-card__* elements, rendered by the same three places
 * (build_site.py for the server-rendered pages, data.js for the client-side
 * grid, detail.js for the related-games list). Only the presentation changes,
 * so there is still exactly ONE source of truth for the markup.
 *
 * The colours come from the variant palette in variant.json; this file only
 * changes the SHAPE and the flow.
 */

/* ==========================================================================
   1. The index
   ========================================================================== */

.card-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.game-card {
  /* Grid, not flex: the three columns line up down the whole list, which is
     what makes it read as a table rather than as a stack of cards. */
  display: grid;
  grid-template-columns: 50px 38px minmax(0, 1fr);
  column-gap: 11px;
  align-items: start;
  padding: 13px 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  box-shadow: none;
  transition: background-color 0.16s ease;
}

.game-card:hover {
  background: var(--card-2);
  transform: none;
}

/* --------------------------------------------------------------------------
   The score cell - the leading column.
   The base site floats the score in a pill over the cover; here it is the
   first thing in the row, set large and boxed like a figure in a table.
   -------------------------------------------------------------------------- */

.game-card::before {
  content: attr(data-score);
  /* The base floats this pill over the cover; here it is a table column, so
     it has to leave the absolute positioning and join the grid. */
  position: static;
  top: auto;
  right: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

/* A game nobody has rated yet shows 0 in the data attribute; an en dash says
   "no score yet" without a red box. */
.game-card[data-score="0"]::before {
  content: "\2013";
  border-color: var(--border);
  background: transparent;
  color: var(--text-mute);
}

/* The icon is the second column: small, square, pasted in like a stamp. */
.game-card__media {
  grid-column: 2;
  grid-row: 1;
  width: 38px;
  height: 38px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
}

.game-card__cover {
  display: none;
}

.game-card__media::after {
  display: none;
}

.game-card__logo {
  position: static;
  left: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1px;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
}

/* The text is the wide third column. */
.game-card__body {
  grid-column: 3;
  grid-row: 1;
  gap: 2px;
  min-width: 0;
  padding: 0;
}

/* ==========================================================================
   2. Entry text
   ========================================================================== */

.game-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.game-card__title a {
  color: var(--text);
}

.game-card__dev {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Two lines of serif - this is the prose column of the table. */
.game-card__sum {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-family: var(--font);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.game-card__meta {
  gap: 7px;
  margin-top: 5px;
  padding-top: 0;
  font-size: 10.5px;
}

/* The score already leads the row; only the star and the count stay here. */
.game-card__meta .rating__val {
  display: none;
}

.game-card__meta .rating--unrated .rating__val {
  display: inline;
}

.game-card__meta .rating__star {
  color: var(--star);
}

.game-card__meta .rating__count {
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Badges are ruled labels, not filled pills. */
.game-card__meta .badge {
  height: 19px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.game-card__meta .badge--rank {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* ==========================================================================
   3. Section headings - a heavy rule over a small-caps title
   ========================================================================== */

.section-head {
  align-items: baseline;
  margin-bottom: 6px;
  padding: 8px 0 6px;
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--divider);
}

.section-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-more {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The page title of a category or genre page reads like a printed section
   head, not a body paragraph. */
.page-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. The masthead
   ========================================================================== */

.hero {
  margin: 10px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}

.hero__eyebrow {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--text);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero__text {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ==========================================================================
   5. Buttons, brand
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}