/* DO NOT EDIT — copied from packages/shared/src/design/css/game-tiles.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* packages/shared/src/design/css/game-tiles.css
 *
 * The game-logo tile, shared by every surface that shows a game's wordmark:
 * desktop Home / Game Library / tab strip / Quick Match / Create Lobby,
 * /app Home + Codex, /m's bf-games tiles.
 *
 * Until 2026-09-17 each of those drew a WHITE PLATE behind the logo, because
 * the shipped art was dark line work drawn for light packaging. Six separate
 * implementations of one workaround. The art is now bright-on-transparent, so
 * the plate is gone and the tile is dark by default like every other surface.
 *
 * The per-game brand colour (`--tile`, set per tile by the call site from
 * tokens.ts's --game-*) now marks HOVER and SELECTION instead of being
 * permanent decoration.
 *
 * It is deliberately NOT painted at full saturation. Those values were chosen
 * to frame a white inset, not to sit behind a logo, and measured against the
 * new art five of eight fall below the 3:1 floor for graphical objects —
 * Dice Throne and Riftbound at 1.00 (an orange wordmark on its own orange),
 * Star Wars 1.25, Yu-Gi-Oh 2.42, Pokemon 2.90. Mixed 28% over --bg every game
 * clears it, worst case Dice Throne at 3.73, and the tile still unmistakably
 * reads as that game's colour. 28% is the knob: raise for more colour, lower
 * for more contrast. Do not swap this back to a bare var(--tile). */

.tdtt-gametile__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--input);
  border-radius: 10px;
  transition: background 0.15s;
}

.tdtt-gametile__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Selection is not a hover state — it must hold on touch, where :hover never
   fires. Declared outside the pointer guard for exactly that reason. */
.tdtt-gametile.on .tdtt-gametile__plate {
  background: color-mix(in srgb, var(--tile) 28%, var(--bg));
}

@media (hover: hover) {
  .tdtt-gametile:hover .tdtt-gametile__plate {
    background: color-mix(in srgb, var(--tile) 28%, var(--bg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tdtt-gametile__plate { transition: none; }
}

/* ── Game logo rail ───────────────────────────────────────────────────────
   `.tdtt-gamerail` (desktop's GameTabStrip, /app Codex/Rules/Leaderboard,
   /m's bf-games) -- a horizontally scrolling strip of tiles with optional
   scroll arrows. Which arrows show and how far a click scrolls is decided by
   `gameRailArrows` / `gameRailStep` (ui/gameRail.ts -> window.TDTT.gameRailCore),
   not by CSS; this file only draws the row.

   Whether a rail tile also carries `.tdtt-cardtile` differs by surface: /app's
   three rails (Leaderboard, Codex, Rules) keep it, the same base class every
   other `.tdtt-gametile` call site uses; desktop's GameTabStrip does not.
   Either way the rules below re-supply the button reset, the anchor for the
   `.on` brackets and the plate's own geometry, overriding whatever
   `.tdtt-cardtile` would otherwise contribute on /app (its own border/
   padding/`overflow: hidden`, which would clip the brackets) so both call
   sites end up pixel-identical regardless of which base class they started
   from. */
.tdtt-gamerail {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.tdtt-gamerail__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  /* `overflow-x: auto` also clips the vertical axis (its `overflow-y`
     computes to `auto`, not `visible`) -- this padding keeps the tiles' -1px
     bracket overhang from being cut off. The brackets' `filter: drop-shadow`
     glow can still clip a hair at the very top/bottom; that is an accepted
     trade for not showing a vertical scrollbar. */
  padding: 2px;
}
.tdtt-gamerail__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tdtt-gamerail__track { scroll-behavior: auto; }
}

.tdtt-gamerail__track > .tdtt-gametile {
  flex: 1 1 0;
  min-width: 104px;
  max-width: 150px;
}

.tdtt-gamerail .tdtt-gametile {
  position: relative; /* anchors the .on reticle brackets below */
  /* `.tdtt-cardtile` is the thing that normally clips overflow -- on /app,
     where a rail tile DOES carry that class (see the header comment above),
     this rule overrides its `overflow: hidden`; on desktop, where it does
     not, this rule supplies the same property from scratch. Either way that
     clip would cut off the brackets' -1px corner overhang, so this stays
     visible on purpose regardless of which base class the tile started
     from. */
  overflow: visible;
  background: var(--input);
  border: 2px solid transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  appearance: none;
}

.tdtt-gamerail .tdtt-gametile__plate {
  aspect-ratio: 3 / 2;
  padding: 16px 18px;
  box-sizing: border-box;
}

/* Active state: reticle corner brackets, moved here from /app Codex's
   `.codex-game-tile.on` so Codex, Rules and Leaderboard share one selected
   look (the same cue desktop draws via `.bf-ticket-on`). It is a filter cue
   (brackets), not a mode switch (a segmented tab's solid fill), because
   selecting a game tab scopes the page to one game's data. */
.tdtt-gamerail .tdtt-gametile.on {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgb(from var(--cyan) r g b / 0.45);
}
.tdtt-gamerail .tdtt-gametile.on::before,
.tdtt-gamerail .tdtt-gametile.on::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--cyan);
  filter: drop-shadow(0 0 5px var(--cyan));
  pointer-events: none;
}
.tdtt-gamerail .tdtt-gametile.on::before {
  left: -1px;
  top: -1px;
  border-right: none;
  border-bottom: none;
  border-radius: 5px 0 0 0;
}
.tdtt-gamerail .tdtt-gametile.on::after {
  right: -1px;
  bottom: -1px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 5px 0;
}

/* Dimmed (leaderboard only): a game not installed, still clickable. */
.tdtt-gametile.is-dim { opacity: 0.55; }

.tdtt-gamerail__arrow {
  flex: 0 0 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--cyan);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
@media (hover: hover) {
  .tdtt-gamerail__arrow:hover { background: var(--surface-2); border-color: var(--border-hi); }
}
.tdtt-gamerail__arrow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-gamerail__arrow[hidden] { display: none; }