/* Cadre d'un mini-jeu : en-tête (avec photo facultative), barre de commandes et ligne de
   statut. Le plateau lui-même appartient à la destination.
   Balisage : .games > article.game > header.game-head (.game-head--photo) + plateau +
   .game-hud (.hud-help, .hud-count, .hud-actions) + p.game-status (.ok, .bad). */

.games { display: grid; gap: 28px; }
.game { background: var(--panel-solid); border: 1px solid var(--line); }
.game-head { padding: 22px 24px 4px; }
.game-head h3 { margin: 6px 0 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.game-head p:not(.tag) { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.game-head--photo { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: start; }
.game-head figure { position: relative; margin: 2px 0 0; border: 1px solid var(--line); }
.game-head figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.game-head figcaption { padding: 6px 10px; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.game-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 24px; border-top: 1px solid var(--line); }
.game-hud .hud-help { margin: 0; font-size: .8rem; color: var(--muted); }
.game-hud .hud-help b { color: var(--pearl); font-weight: 600; }
.game-hud .hud-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.game-hud .hud-count { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--gold); font-variant-numeric: tabular-nums; }
.game-hud [hidden] { display: none; }
.game .d-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.game-status { min-height: 3em; margin: 0; padding: 0 24px 20px; font-family: var(--font-lore); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--pearl); }
.game-status.ok { color: var(--page-accent-hi, var(--gold-hi)); }
.game-status.bad { color: #ffb08a; }

@media (max-width: 680px) {
  .game-head--photo { grid-template-columns: minmax(0, 1fr); }
  .game-head, .game-hud, .game-status { padding-inline: 16px; }
  .game-hud .hud-actions { width: 100%; margin-left: 0; }
  .game-hud .hud-actions .d-btn { flex: 1; }
}