/*
 * "Your games" — the private games a player has been given, on the home,
 * above the public arena. Its own file, linked on the two home pages, for the
 * reason the header's own stylesheets are: it is home-body content, not part
 * of the game widget (whose CSS is scoped under .ax-game), and inlining it in
 * both language homes would be two copies to keep agreeing. See
 * docs/HANDOVER.md trap 3.
 *
 * It reads the home's own custom properties (--paper, --gold-deep, the fonts):
 * same document, so they are in scope. The section is `hidden` until
 * src/ui/home.js has something to draw; a player with nothing assigned never
 * sees it, and the home is exactly as it was.
 */

.mygames {
  background: var(--paper);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 44px) clamp(6px, 2vw, 14px);
}
.mygames[hidden] { display: none; }

.mg-head { max-width: 1180px; margin: 0 auto; }
.mg-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-titlerow h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05; margin: 0;
}
.mg-count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  border: 1px solid rgba(201, 168, 76, .45); border-radius: 999px;
  padding: 3px 9px; color: var(--gold-deep);
}
.mg-lead { font-size: 15px; line-height: 1.5; color: var(--ink-66); margin: 6px 0 0; max-width: 70ch; }

/* Cards pack to the left and cap their width: a single assigned game stays at
   its own size rather than stretching across the page (design C.3). */
.mg-grid { max-width: 1180px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 14px; }

.mg-card {
  flex: 1 1 280px; max-width: 420px; box-sizing: border-box;
  display: block; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  transition: border-color 240ms var(--ease);
}
.mg-card:hover { border-color: rgba(201, 168, 76, .45); }

.mg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-kicker { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--gold-deep); }
.mg-emblem { display: flex; flex: none; width: 15px; height: 15px; color: var(--gold-deep); }
.mg-emblem svg { width: 15px; height: 15px; display: block; }
.mg-via {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--gold-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The condition easiest to forget and most annoying to discover late: it
   travels with the game to all three places it is shown (design B.6). */
.mg-nosum {
  flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em;
  border: 1px solid rgba(8, 8, 8, .20); border-radius: 999px; padding: 2px 8px;
  color: #4A4A46; white-space: nowrap;
}

.mg-name {
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  line-height: 1.15; margin-top: 10px; color: var(--ink);
}
.mg-sub { font-size: 14px; line-height: 1.5; color: var(--ink-66); margin-top: 6px; }

.mg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px;
}
/* 11px carries information, so #4A4A46, not the lighter ink-50 the §7 floor
   reserves for larger text. */
.mg-meta { font-family: var(--font-mono); font-size: 11px; color: #4A4A46; }
.mg-play { font-family: var(--font-mono); font-size: 11px; color: var(--gold-deep); }

/* One card per row on a phone, full width; "Your games" stays above the
   arena. */
@media (max-width: 560px) {
  .mg-card { flex: 1 1 100%; max-width: none; }
}