/* The Card DB's card view: game-style cards (client/src/lib/gamecard.mjs). The .gcard rules are the Extended Access
   site's (ext/pitch.css, where the game's own measurements are written out) minus the pitch, chemistry and booster
   parts; the fonts are the game's Dinpro, copied from ext/. Pictures come from the game's CDN (CSP img-src). */
@font-face { font-family: Dinpro; font-weight: 400; src: url(fonts/dinpro.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: DinproMedium; src: url(fonts/dinpro-medium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: DinproBold; src: url(fonts/dinpro-bold.woff2) format("woff2"); font-display: swap; }

.db-views { display: inline-flex; margin-left: auto; }
.db-views button { margin: 0; border-radius: 0; }
.db-views button:first-child { border-radius: 6px 0 0 6px; }
.db-views button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.db-views button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* the frame hangs 12.5% past each side of the card box and 4.8% above it, so the columns leave that room */
.db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 22px; padding: 14px 18px 4px; }
.db-grid[hidden] { display: none; }
.db-tile { text-align: center; min-width: 0; }
.db-tile .gcard { width: 100%; max-width: 170px; margin: 0 auto 8px; }
.db-tile-type { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .db-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; padding: 10px 8px 4px; }
}

.gcard { position: relative; width: 100%; aspect-ratio: 8.8/12.5; display: block; line-height: 1;
  container-type: inline-size; font-family: Dinpro, system-ui, sans-serif; filter: drop-shadow(0 .1rem 0 rgba(34,34,34,.5)); }
.gcard .gc-frame { position: absolute; left: -12.5%; top: -4.8%; width: 125%; height: 112.8%; object-fit: contain; }
.gcard .gc-left, .gcard .gc-name, .gcard .gc-stats, .gcard .gc-badges { z-index: 2; }   /* over a full-bleed alt render */
/* the game's two player rules: a cut-out inside the frame, and the alt render that is the whole card art, larger and
   offset up-left (ext/pitch.css has the game's rem values) */
.gcard .gc-player { position: absolute; top: 11.2%; left: 20.5%; width: 75%; height: auto; }
.gcard .gc-player.gc-alt { top: -13.6%; left: -11.4%; width: 124.4%; }
.gcard .gc-left { position: absolute; left: -3.4%; top: 11.2%; width: 40.9%; text-align: center; }
.gcard .gc-left b { display: block; font-family: DinproBold, system-ui, sans-serif; font-size: 19.3cqw; font-weight: 400; line-height: 1; }
.gcard .gc-left span { display: block; margin-top: 2.5cqw; font-size: 10.2cqw; font-family: DinproMedium, system-ui, sans-serif;
  font-weight: 400; text-transform: uppercase; line-height: 1; }
.gcard .gc-name { position: absolute; top: 64%; left: 0; width: 100%; padding: 0 3.4%; box-sizing: border-box; text-align: center;
  font-size: 12.5cqw; font-family: DinproBold, system-ui, sans-serif; font-weight: 400; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .gc-stats { position: absolute; top: 71.2%; left: 0; width: 100%; padding: 0 10.2%; box-sizing: border-box;
  overflow: hidden; white-space: nowrap; font-size: 0; }
.gcard .gc-stats span { display: inline-block; width: 33.33%; text-align: center; line-height: 1; }
.gcard .gc-stats b { font-size: 12cqw; font-family: DinproBold, system-ui, sans-serif; font-weight: 400; }
.gcard .gc-stats i { font-style: normal; font-size: 7.5cqw; margin-left: 1.5cqw; opacity: .95; }
@container (max-width: 80px) {   /* a phone's three-across card: keep the numbers, drop the labels */
  .gcard .gc-stats i { display: none; }
}
.gcard .gc-badges { position: absolute; top: 81.6%; left: 0; width: 100%; display: flex;
  justify-content: center; align-items: center; gap: 4cqw; height: 12cqw; }
.gcard .gc-badges img { height: 100%; width: auto; object-fit: contain; }

/* the frame did not load (CDN blocked, offline, or too slow): a plain tile, every part back in normal flow */
.gcard.gc-noart { background: var(--card); border: 1px solid var(--line); border-radius: 9px; aspect-ratio: auto;
  padding: 7px 6px 8px; text-align: center; line-height: 1.2; filter: none; box-sizing: border-box; }
.gcard.gc-noart .gc-frame, .gcard.gc-noart .gc-player { display: none; }
.gcard.gc-noart .gc-left { position: static; width: auto; display: flex; gap: 5px; align-items: baseline;
  justify-content: center; color: var(--fg) !important; }
.gcard.gc-noart .gc-left b { display: inline; font-size: 20cqw; }
.gcard.gc-noart .gc-left span { display: inline; margin: 0; font-size: 9cqw; }
.gcard.gc-noart .gc-name { position: static; padding: 0; margin-top: 3px; font-size: 12cqw; color: var(--fg) !important; }
.gcard.gc-noart .gc-stats { position: static; padding: 0; margin-top: 4px; color: var(--muted) !important; }
.gcard.gc-noart .gc-badges { position: static; height: 11cqw; margin-top: 4px; }