/* Play surfaces — the /play hub, the homepage pills, and shared game chrome.
   Kept out of components.css because that file is already 5k lines and the play
   selectors are self-contained: nothing outside this file styles `.play-*`. */

/* ── Homepage pills ─────────────────────────────────────────────────────── */

.play-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.play-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xs-plus);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-full);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    transform var(--transition-fast);
}

.play-pill:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  transform: translateY(-1px);
}

.play-pill:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 2px;
}

.play-pill-icon {
  display: inline-flex;
  line-height: 1;
}

.play-pill-icon svg {
  width: 15px;
  height: 15px;
}

/* A game that hasn't shipped is deliberately not a link — see GAMES.status in
   js/play-hub.js. It still shows, because knowing what's coming is worth more
   than a tidy row, but it must not look clickable. */
.play-pill.is-soon {
  color: var(--color-text-muted);
  cursor: default;
  opacity: 0.72;
}

.play-pill.is-soon:hover {
  border-color: var(--color-border);
  background: var(--color-bg-card);
  transform: none;
}

.play-pill-soon {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-gold);
}

.play-pill-more {
  border-style: dashed;
  color: var(--color-accent-gold);
}

.strip-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* ── The hub ────────────────────────────────────────────────────────────── */

.play-page {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.play-loading {
  color: var(--color-text-muted);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.play-hub-head h1 {
  font-size: 1.6rem;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.play-hub-sub {
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-bottom: var(--space-md);
}

.play-hub-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-xl);
}

.play-hub-stats strong {
  color: var(--color-text-primary);
}

.play-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* Vertical card: a working miniature of the game on top, the name and pitch
   under it. The preview is a model of the mechanic (js/play-hub.js
   previewScene), not decoration — so it gets the top half of the card. */
.play-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  text-decoration: none;
  position: relative;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

a.play-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

a.play-card:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 2px;
}

.play-card.is-soon {
  opacity: 0.68;
}

.play-card-preview {
  display: block;
  height: 118px;
  border-radius: var(--border-radius-md);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.play-card-icon {
  display: inline-flex;
  margin-right: var(--space-xs);
  color: var(--color-accent);
  vertical-align: -2px;
}

.play-card-icon svg {
  width: 16px;
  height: 16px;
}

.play-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  flex: 1;
}

.play-card-title {
  font-weight: 600;
}

.play-card-tagline {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* Overlaid on the preview's top corner rather than taking a row of the body —
   the body is for the pitch, and the flag is a status, not content. */
.play-card-flag {
  position: absolute;
  /* Inset past the card padding so the chip sits inside the preview's corner. */
  top: calc(var(--space-md) + var(--space-2xs));
  right: calc(var(--space-md) + var(--space-2xs));
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--border-radius-full);
  background: var(--color-overlay);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
}

.play-card-flag.is-open {
  color: var(--color-accent-gold);
}

.play-card-flag.is-done {
  color: var(--color-text-muted);
}

/* ── Hub preview scenes ─────────────────────────────────────────────────── */

/* Every scene is a flex stage that fills the preview frame. Faces are fixed
   small so the scene reads as an illustration of the game, not a product grid. */
.pv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
  padding: var(--space-sm);
  box-sizing: border-box;
}

.pv-face {
  position: relative;
  display: block;
  width: 54px;
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-card);
  overflow: hidden;
}

.pv-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pv-face-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--color-bg-card), var(--color-bg-elevated));
}

/* The price tag / crowd bar pinned to a face's bottom edge. */
.pv-tag {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: var(--border-radius-full);
  background: var(--color-overlay);
  color: var(--color-accent-gold);
  font-size: 0.6rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pv-tag.is-unknown {
  color: var(--color-text-muted);
}

.pv-bar {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  display: block;
  height: 4px;
  border-radius: var(--border-radius-full);
  background: var(--color-overlay);
  overflow: hidden;
}

.pv-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-gold);
}

/* Daily Discovery: a sealed pack mid-fan, top card face-up. */
.pv-fan {
  gap: 0;
}

.pv-card {
  display: block;
  width: 46px;
  aspect-ratio: 3 / 4;
  margin: 0 -5px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-card);
  transform: rotate(var(--r, 0deg));
  overflow: hidden;
}

.pv-card.is-back {
  background: repeating-linear-gradient(
    135deg,
    var(--color-bg-card) 0 5px,
    var(--color-bg-elevated) 5px 10px
  );
}

.pv-card:last-child {
  border-color: var(--color-accent);
  z-index: 1;
}

.pv-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Higher or Lower: known face, the two arrows, unknown face. */
.pv-arrows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
}

.pv-arrows svg {
  width: 14px;
  height: 14px;
}

/* This or That: two faces, "or" between, crowd bars underneath. */
.pv-or {
  color: var(--color-text-muted);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Your Taste: a profile in miniature — three bars and the compass. */
.pv-taste {
  gap: var(--space-md);
}

.pv-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 52%;
}

.pv-rows i {
  display: block;
  width: var(--w);
  height: 6px;
  border-radius: var(--border-radius-full);
  background: var(--color-accent-light);
}

.pv-rows i:first-child {
  background: var(--color-accent-gold);
}

.pv-compass {
  color: var(--color-accent);
  display: inline-flex;
}

.pv-compass svg {
  width: 26px;
  height: 26px;
}

/* ── Shared game chrome ─────────────────────────────────────────────────── */

/* Three columns rather than a flex row with the back link inline: the title must
   stay optically centred as the score digits change width, and a flex row would
   shift it every time a point is scored. */
.play-game-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.play-game-back {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  padding: var(--space-xs) 0;
  white-space: nowrap;
}

.play-game-back:hover {
  color: var(--color-accent);
}

.play-game-titles h1 {
  font-size: 1.35rem;
  margin: 0 0 var(--space-2xs);
  color: var(--color-text-primary);
}

.play-game-titles p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.play-game-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  /* Tabular figures so a two-digit score doesn't nudge the layout. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.play-game-score {
  color: var(--color-accent-gold);
  font-weight: var(--font-weight-semibold);
}

.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* 44px minimum: these are the primary touch targets of every game. */
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--border-radius-md);
  background: var(--color-accent-light);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.play-btn:hover:not(:disabled) {
  background: var(--color-accent);
}

.play-btn:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent-gold);
  outline-offset: 2px;
}

.play-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.play-btn-quiet {
  border-color: var(--color-border);
  background: var(--color-bg-card);
}

.play-btn-quiet:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-bg-card);
}

.play-game-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-md);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--border-radius-lg);
  color: var(--color-text-secondary);
  text-align: center;
}

.play-game-empty p {
  margin: 0;
  max-width: 46ch;
}

.play-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
  text-align: center;
}

.play-summary-score {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}

.play-summary-score strong {
  font-size: 2.4rem;
  color: var(--color-accent-gold);
  font-variant-numeric: tabular-nums;
}

.play-summary-best {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.play-summary-note {
  margin: var(--space-sm) 0 0;
  max-width: 48ch;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.play-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* A finish screen section (the session grid) is content, not chrome: full
   width and left-aligned inside the centred summary. */
.play-summary-section {
  width: 100%;
  margin-top: var(--space-lg);
  text-align: left;
}

.play-summary-section h2 {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

/* ── Round actions (like / love / wishlist / save / view) ───────────────── */

/* The row under a revealed round card. Pills, not icon buttons: the label is
   what separates love from wishlist for a first-time player. */
.play-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.pa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--space-xs-plus);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background var(--transition-fast);
}

.pa-btn:hover {
  border-color: var(--interaction-color, var(--color-accent));
  color: var(--color-text-primary);
}

.pa-btn:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 1px;
}

/* Active state matches the product modal's interaction buttons exactly
   (components.css) — the same reaction should look the same everywhere. */
.pa-btn.is-on {
  background: color-mix(in srgb, var(--interaction-color, var(--color-accent)) 15%, transparent);
  border-color: var(--interaction-color, var(--color-accent));
  color: var(--interaction-color, var(--color-accent));
}

.pa-btn .pa-icon {
  display: inline-flex;
  line-height: 1;
}

.pa-btn .pa-icon svg {
  width: 14px;
  height: 14px;
}

.pa-signin {
  border-style: dashed;
  color: var(--color-text-muted);
}

/* ── Session strip + summary grid ───────────────────────────────────────── */

/* The "previous items" row under a live round. Scrolls horizontally, badges
   show what was done with each doll. */
.play-strip {
  margin-top: var(--space-lg);
}

.play-strip-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.play-strip-row {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  scrollbar-width: none;
}

.play-strip-row::-webkit-scrollbar {
  display: none;
}

.play-thumb {
  position: relative;
  width: 52px;
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-elevated);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.play-thumb:hover {
  border-color: var(--color-accent);
}

.play-thumb:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 1px;
}

.play-thumb.is-picked {
  border-color: var(--color-accent-gold);
}

.play-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--color-bg-card), var(--color-bg-elevated));
}

/* What the player did with this doll, bottom corner. Small on purpose — it's
   a reminder, not a status board. */
.play-thumb-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--border-radius-full);
  background: var(--color-overlay);
  color: var(--color-accent-gold);
}

.play-thumb-badge svg {
  width: 10px;
  height: 10px;
}

/* The "already filed in a collection" indicator, top corner — a marker, since
   the collections themselves are named on hover. */
.play-thumb-saved {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: var(--border-radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-overlay);
}

/* The end-of-game grid: same thumbs, but with names and room to breathe. */
.play-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-sm);
}

.play-session-grid .play-thumb {
  width: auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}

.play-session-grid .play-thumb img,
.play-session-grid .play-thumb-empty {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}

.play-thumb-name {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Session-scoped stats on the finish screen — what *these* dolls say. */
.play-session-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-xl);
  margin-top: var(--space-sm);
}

.play-session-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.play-session-stat span {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.play-session-stat strong {
  color: var(--color-accent-gold);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* ── Higher or Lower ────────────────────────────────────────────────────── */

.hl-switch {
  display: inline-flex;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-full);
  margin-bottom: var(--space-lg);
}

.hl-metric {
  min-height: 36px;
  padding: 0 var(--space-md);
  border: none;
  border-radius: var(--border-radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.hl-metric.is-active {
  background: var(--color-accent-light);
  color: var(--color-text-primary);
}

.hl-metric:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 1px;
}

/* Two equal columns with the "vs" between them. Equal so neither doll reads as
   the featured one — the whole question is a comparison. */
.hl-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-md);
}

.hl-face {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
  min-width: 0;
}

.hl-img {
  aspect-ratio: 3 / 4;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.hl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hl-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.hl-face-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.hl-brand {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hl-name {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  /* Names in this catalogue run long and vary wildly in length; clamping keeps
     the two faces the same height so neither looks like the answer. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hl-value {
  margin-top: var(--space-xs);
  font-size: 1.5rem;
  color: var(--color-accent-gold);
  font-variant-numeric: tabular-nums;
}

.hl-vs {
  align-self: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hl-guess {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.hl-guess-icon {
  display: inline-flex;
  line-height: 1;
}

.hl-guess-icon svg {
  width: 14px;
  height: 14px;
}

/* The action-row slot under a revealed face. Empty before the resolve, and an
   empty slot must not eat the face's flex gap. */
.hl-actions:empty {
  display: none;
}

.hl-actions {
  margin-top: auto;
  padding-top: var(--space-xs);
}

.hl-actions .play-actions {
  margin-top: 0;
}

.hl-hint {
  margin: var(--space-md) 0 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  text-align: center;
}

.hl-result {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-md);
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

/* The class is only ever set together with content, so an empty live region
   never occupies space or announces itself. */
.hl-result.is-right,
.hl-result.is-wrong {
  display: flex;
}

.hl-result.is-right {
  border-color: var(--color-verified);
  background: var(--color-verified-bg);
}

.hl-result.is-right strong {
  color: var(--color-verified);
}

.hl-result.is-wrong {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.hl-result.is-wrong strong {
  color: var(--color-accent-hover);
}

.hl-next {
  margin-left: auto;
}

/* ── This or That ───────────────────────────────────────────────────────── */

.tot-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-md);
}

/* The cell stacks the pickable card over its action row; the card stretches so
   both sides stay the same height once one row of actions is longer. */
.tot-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tot-cell .tot-side {
  flex: 1;
}

.tot-actions:empty {
  display: none;
}

.tot-actions {
  padding-top: var(--space-xs);
}

.tot-actions .play-actions {
  margin-top: 0;
  justify-content: center;
}

.tot-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.tot-side:hover:not(:disabled) {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.tot-side:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 2px;
}

/* Disabled after the pick, but the chosen side must stay legible — it's the
   thing the crowd number is about. */
.tot-side:disabled {
  cursor: default;
  opacity: 0.5;
}

.tot-side.is-chosen {
  opacity: 1;
  border-color: var(--color-accent-gold);
}

.tot-img {
  aspect-ratio: 3 / 4;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.tot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tot-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.tot-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.tot-brand {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tot-name {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tot-specs {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.tot-crowd:not(:empty) {
  margin-top: var(--space-xs);
  color: var(--color-accent-gold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tot-or {
  align-self: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tot-result {
  display: none;
}

.tot-result.is-shown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-md);
}

.tot-crowd-line {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

.tot-crowd-line strong {
  color: var(--color-accent-gold);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.tot-result .play-btn {
  margin-left: auto;
}

/* ── Taste profile ──────────────────────────────────────────────────────── */

.taste-source {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
}

.taste-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.taste-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
}

.taste-stat-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.taste-stat-value {
  font-size: 1.5rem;
  color: var(--color-accent-gold);
  font-variant-numeric: tabular-nums;
}

.taste-stat-note {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.taste-cohort {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  border-left: var(--border-width-thick) solid var(--color-accent-gold);
  border-radius: var(--border-radius-sm);
  background: var(--color-accent-gold-light);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.taste-cohort-src {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.taste-block {
  margin-top: var(--space-xl);
}

.taste-block h2 {
  font-size: 1rem;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
}

.taste-block-sub {
  margin: calc(-1 * var(--space-xs)) 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* ── Taste lenses (like / love / wishlist read separately) ──────────────── */

.taste-lenses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.taste-lens {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
}

.taste-lens h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

.taste-lens-count {
  color: var(--color-accent-gold);
  font-variant-numeric: tabular-nums;
}

.taste-lens-blurb {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.taste-lens-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 0;
}

.taste-lens-rows div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8rem;
}

.taste-lens-rows dt {
  color: var(--color-text-muted);
}

.taste-lens-rows dd {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* An unused lens is an invitation, not a zero — dashed frame, no card fill. */
.taste-lens.is-empty {
  border-style: dashed;
  background: transparent;
}

.taste-lens-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* ── Taste brands ───────────────────────────────────────────────────────── */

.taste-brands {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.taste-brand-row {
  display: grid;
  grid-template-columns: minmax(90px, 170px) 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs-plus);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-bg-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.taste-brand-row:hover {
  border-color: var(--color-accent);
}

.taste-brand-name {
  color: var(--color-text-primary);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taste-brand-bar {
  display: block;
  height: 6px;
  border-radius: var(--border-radius-full);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.taste-brand-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.taste-brand-count {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* ── Taste collection suggestions ───────────────────────────────────────── */

.taste-collections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.taste-collection-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-card);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.taste-collection-card:hover {
  border-color: var(--color-accent);
}

.taste-collection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.taste-collection-title {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.taste-collection-mine {
  flex-shrink: 0;
  padding: 1px var(--space-xs);
  border: var(--border-width) solid var(--color-accent-gold);
  border-radius: var(--border-radius-full);
  color: var(--color-accent-gold);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.taste-collection-meta {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Why this collection matched — the indicator the suggestion stands on. */
.taste-collection-fit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.taste-fit-chip {
  padding: 2px var(--space-xs);
  border-radius: var(--border-radius-full);
  background: var(--color-accent-gold-light);
  color: var(--color-text-secondary);
  font-size: 0.68rem;
}

/* ── Taste discovery map ────────────────────────────────────────────────── */

.taste-discover-group {
  margin-top: var(--space-md);
}

.taste-discover-group h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
  color: var(--color-text-primary);
  font-size: 0.85rem;
}

.taste-discover-icon {
  display: inline-flex;
  color: var(--color-accent);
}

.taste-discover-icon svg {
  width: 15px;
  height: 15px;
}

.taste-discover-count {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.taste-discover-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.taste-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.taste-tags a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 36px;
  padding: 0 var(--space-xs-plus);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-full);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-size: 0.82rem;
  text-decoration: none;
}

.taste-tags a:hover {
  border-color: var(--color-accent);
}

.taste-tags span {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.taste-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.taste-foot {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .play-page {
    padding-top: var(--space-md);
  }

  .play-hub-head h1 {
    font-size: 1.3rem;
  }

  /* The homepage row scrolls rather than wrapping to three lines above the
     rail, which is what pushed the products themselves below the fold. */
  .play-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
  }

  .play-pills::-webkit-scrollbar {
    display: none;
  }

  .strip-head {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* The back link drops onto its own row above the title rather than competing
     with it for a 375px width — three columns here means a two-character title
     column. */
  .play-game-head {
    grid-template-columns: 1fr auto;
    gap: var(--space-sm) var(--space-md);
  }

  .play-game-back {
    grid-column: 1 / -1;
  }

  .play-game-titles h1 {
    font-size: 1.1rem;
  }

  /* Side by side is the point of both games — a stacked layout would need
     scrolling to compare, which is the comparison. The faces narrow instead,
     and "vs" shrinks to a divider. */
  .hl-board,
  .tot-board {
    gap: var(--space-sm);
  }

  .hl-face,
  .tot-side {
    padding: var(--space-sm);
  }

  /* Stretched to a full-height rule rather than a rotated two-character label:
     measured at 375px the vertical text was 13px tall against 365px faces, which
     read as a stray mark rather than a separator. */
  .hl-vs,
  .tot-or {
    align-self: stretch;
    display: flex;
    align-items: center;
    font-size: 0.6rem;
    letter-spacing: 0;
    padding: 0 var(--space-2xs);
    border-left: var(--border-width) solid var(--color-border);
  }

  .hl-value {
    font-size: 1.15rem;
  }

  .hl-name,
  .tot-name {
    font-size: 0.8rem;
  }

  .hl-guess {
    gap: var(--space-xs);
  }

  .hl-guess .play-btn {
    padding: var(--space-sm) var(--space-xs);
    font-size: 0.8rem;
  }

  .hl-next,
  .tot-result .play-btn {
    margin-left: 0;
    width: 100%;
  }

  .taste-stat-value {
    font-size: 1.25rem;
  }

  .play-card-preview {
    height: 100px;
  }

  /* Five pills under a ~160px-wide face: they wrap, and they wrap tight. */
  .pa-btn {
    min-height: 30px;
    padding: 0 var(--space-xs);
    font-size: 0.7rem;
  }

  .pa-btn .pa-icon svg {
    width: 12px;
    height: 12px;
  }

  .play-session-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }

  .taste-brand-row {
    grid-template-columns: minmax(72px, 120px) 1fr auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-pill,
  .play-card,
  .tot-side {
    transition: none;
  }

  .play-pill:hover,
  a.play-card:hover,
  .tot-side:hover:not(:disabled) {
    transform: none;
  }
}

/* The album's hub preview: a page mid-fill.
   Lives here rather than with the rest of the album's CSS because `.pv` above
   sets `display: flex`, and play.css loads after components.css — a grid rule
   over there never applied. */
.pv-album {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  align-content: center;
}
.pv-album .pv-sticker {
  display: block;
  min-height: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
}
.pv-album .pv-sticker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-album .pv-sticker.is-empty {
  border-style: dashed;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.05) 4px, rgba(255, 255, 255, 0.05) 5px);
}

/* Same doll? — two listings and a question mark. */
.pv-dupes { gap: var(--space-xs); }
.pv-qmark {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent-gold);
}