/* The "choose your round" form both games open with, and the shelf they sit on.
 * Big radio cards, one block per question, nothing to type.
 */

.gm-hero { text-align: center; margin-bottom: 40px; }
.gm-hero .gm-emoji { font-size: clamp(48px, 9vw, 76px); line-height: 1; }

.gm-form { max-width: 820px; margin: 0 auto; }
.gm-block { margin-bottom: 34px; }
.gm-block-title { font: 700 15px var(--eq-font-display); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.gm-block-title .gm-step {
  width: 26px; height: 26px; border-radius: 50%; background: var(--eq-lime); color: var(--eq-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

.gm-options { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.gm-options--counts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.gm-options--themes { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

.gm-option input { position: absolute; opacity: 0; pointer-events: none; }
.gm-option-body {
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px; border-radius: 16px; border: 2px solid var(--eq-border);
  background: var(--eq-surface); text-align: center; transition: border-color .15s, background .15s, transform .15s;
}
.gm-option-body:hover { border-color: rgba(200,245,66,.55); transform: translateY(-2px); }
.gm-option input:checked + .gm-option-body { border-color: var(--eq-lime); background: rgba(200,245,66,.1); }
.gm-option input:focus-visible + .gm-option-body { outline: 2px solid var(--eq-cyan); outline-offset: 3px; }
.gm-option-emoji { font-size: 30px; line-height: 1; }
.gm-option-label { font: 700 20px var(--eq-font-display); color: var(--eq-text); }
.gm-option input:checked + .gm-option-body .gm-option-label { color: var(--eq-lime); }
.gm-option-label--sm { font-size: 15.5px; }
.gm-option-hint { font-size: 12.5px; color: var(--eq-text-faint); }

.gm-actions { text-align: center; margin-top: 8px; }
.gm-start { font-size: 18px; padding: 18px 44px; }
.gm-note { margin-top: 14px; font-size: 12.5px; color: var(--eq-text-faint); }

/* The shelf at /games/: one card per game. */
.gm-shelf { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 900px; margin: 0 auto; }
.gm-game {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 30px 28px; border-radius: var(--eq-r-block); border: 2px solid var(--eq-border);
  background: var(--eq-surface); text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, background .15s;
}
.gm-game:hover { border-color: var(--eq-lime); background: rgba(200,245,66,.07); transform: translateY(-3px); }
.gm-game-emoji { font-size: 44px; line-height: 1; }
.gm-game-title { font: 700 24px var(--eq-font-display); color: var(--eq-text); margin: 0; }
.gm-game:hover .gm-game-title { color: var(--eq-lime); }
.gm-game-blurb { font-size: 15px; color: var(--eq-text-muted); margin: 0; line-height: 1.5; }
.gm-game-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.gm-game-tags span {
  padding: 5px 12px; border-radius: var(--eq-r-pill); border: 1px solid var(--eq-border);
  font-size: 12px; color: var(--eq-text-faint);
}
.gm-game-go { font: 700 14px var(--eq-font-display); color: var(--eq-lime); }

/* Getting from one game to the other without going back to the shelf. */
.gm-switch { text-align: center; margin-top: 34px; font-size: 13.5px; color: var(--eq-text-faint); }
.gm-switch a { color: var(--eq-cyan); }