/* Captain's Club · games: the hub (#/games), the home banner, the game screen's frame and the end-of-game card.
   Each game's own rules are in css/game-<id>.css. */

/* ---------- home banner ---------- */
.gbanner{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px;padding:10px 16px 10px 10px;border-radius:20px;background:var(--ink);color:#fff;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--y);text-decoration:none}
.gbanner__art{width:64px;height:64px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.gbanner b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1rem;line-height:1.1;color:var(--y)}
.gbanner small{display:block;font-size:.84rem;color:#d8d8de;line-height:1.35;margin-top:2px}
.gbanner .i{color:var(--y)}
.gbanner:focus-visible{outline:3px solid var(--y);outline-offset:3px}

/* ---------- hub ---------- */
.gcards{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.gcard__a{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px 14px 12px;border-radius:22px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);color:var(--ink);text-decoration:none}
.gcard__a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gcard__art{width:96px;height:96px;filter:drop-shadow(0 4px 4px rgba(11,11,12,.2))}
.gcard__b{display:grid;gap:4px;min-width:0}
.gcard__t{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.15rem;line-height:1.05}
.gcard__p{font-size:.9rem;color:var(--steel);line-height:1.4}
.gcard__rec{display:inline-flex;align-items:center;gap:5px;justify-self:start;margin-top:2px;padding:3px 10px;border-radius:999px;background:var(--y-100);border:1.5px solid var(--ink);font-size:.76rem;font-weight:800}
.gcard__rec .i{width:13px;height:13px}
.gcard__go{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--y);border:2px solid var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:.86rem}
.gcard__go .i{width:18px;height:18px}
.gms__note{display:flex;gap:8px;align-items:flex-start;margin-top:18px;font-size:.84rem;color:var(--steel);line-height:1.45}
.gms__note .i{width:18px;height:18px;flex:none;margin-top:1px}
@media (min-width:720px){
  .gcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gcard__a{grid-template-columns:1fr;justify-items:center;text-align:center;padding:18px 16px 16px;height:100%}
  .gcard__art{width:120px;height:120px}
  .gcard__rec{justify-self:center}
  .gcard__go{align-self:end}
}

/* ---------- game screen frame ---------- */
.gm__stage{position:relative}
.shead--game .shead__lead{max-width:46ch}

/* ---------- end-of-game card ---------- */
.gres{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;margin-top:16px;padding:16px;border-radius:22px;background:var(--y-100);border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s)}
.gres__cap{width:96px;height:auto}
.gres__b{display:grid;gap:4px;min-width:0}
.gres__t{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.3rem;line-height:1.05}
.gres__l{color:var(--ink-3);font-size:.95rem}
.gres__rec{justify-self:start;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--y);font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.gres__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}