/* =============================================================================
 * Zöld Küldetés — a JÁTÉKKÁRTYA, közös komponens.
 *
 * A kezdőlap (index.html) és a hub (app.html, #/) ugyanezt a kártyát rajzolja,
 * ugyanabból a rendererből (js/gameCard.js). A stílus ezért itt él, egy helyen;
 * a RÁCSOT viszont az oldal adja: a kezdőlap mobilon vízszintes lapozó
 * (landing.css), a hub függőleges rács (style.css).
 *
 * Forrás: Adam Claude Design terve (design-ref/kezdolap-design.md). A tokenek a
 * tokens.css-ben vannak, amit mindkét oldal betölt.
 * ========================================================================== */

/* A kártya színe EGYETLEN számból, a játék hue-jából születik (a terv oklch
   képletei). Így a kilenc szín egy rendszer, nem kilenc kézzel kevert érték. */
.zk-card {
  --tint: oklch(0.94 0.04 var(--h));
  --card-ink: oklch(0.4 0.1 var(--h));
  box-sizing: border-box;
  background: var(--tint);
  border: 2px solid transparent;
  border-radius: 24px;
  padding: 22px 24px;
  min-height: 212px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  color: var(--zk-ink);
  text-decoration: none;
  transition: border-color .15s;
}
/* Régi böngésző, ami nem ismeri az oklch-t: semleges krém kártya, olvasható
   szöveggel. Szín nélkül is működjön, ne essen szét. */
@supports not (color: oklch(0.9 0.04 120)) {
  .zk-card { --card-ink: var(--zk-green); background: #EDEAE1; }
}
a.zk-card:hover { border-color: var(--zk-green); }
a.zk-card:focus-visible { outline: 3px solid var(--zk-accent); outline-offset: 4px; }
.zk-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.zk-card-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zk-code { font: 800 30px/1 'Lexend', sans-serif; letter-spacing: -.02em; color: var(--card-ink); }
.zk-hu { font: 500 14px/1 'Lexend', sans-serif; color: var(--card-ink); }
.zk-icon { width: 44px; height: 44px; flex: none; fill: var(--card-ink); display: block; }
.zk-card-body { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.zk-card-body strong { font: 700 22px/1.1 'Lexend', sans-serif; color: var(--zk-ink); }
.zk-card-body span { font: 400 15px/1.4 'Lexend', sans-serif; color: var(--zk-muted); text-wrap: pretty; }
.zk-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.zk-tags { display: flex; align-items: center; gap: 6px; min-width: 0; }
.zk-time,
.zk-new {
  font: 600 13px/1 'Lexend', sans-serif;
  color: var(--zk-ink);
  background: #fff;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Az ÚJ a narancs CTA-szín: a tinta rajta 6.8:1 (a game-card teszt méri). */
.zk-new { background: var(--zk-accent); font-weight: 700; letter-spacing: .04em; }
.zk-play { font: 700 15px/1 'Lexend', sans-serif; color: var(--zk-green); white-space: nowrap; }

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

/* PONTOZÁSI TÁMPONT + MÁSODLAGOS R-KÓD (UX-review 2026-11-07). A kártya
   sorrendje: magyar név → leírás → idő és pontozás → indítás. Az angol R-kód
   (REPAIR, RETHINK…) a terv keretrendszere, de a játékos a magyar nevet
   keresi: a kód kis címke lett, a név a hangsúlyos. */
.zk-code { font: 700 13px/1 'Lexend', sans-serif; letter-spacing: .1em; }
.zk-hu { font: 500 13px/1 'Lexend', sans-serif; }
.zk-card-body strong { font-size: 24px; }
.zk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zk-score {
  font: 500 13px/1.25 'Lexend', sans-serif; color: var(--zk-ink);
  background: rgba(255, 255, 255, .6); padding: 6px 10px; border-radius: 999px;
}
.zk-card-foot { justify-content: flex-end; }
.zk-tags:empty { display: none; }
.zk-card-foot:has(.zk-tags:not(:empty)) { justify-content: space-between; }