/* ============================================================
   Felt Trainer — Poker Starting Hands Chart (static reference)
   Tokens, reset, and .seo-* content styles live in shared/styles.css.
   This file styles only the 13×13 strength grid + legend swatches.
   ============================================================ */

.hrc-wrap { width: 100%; overflow-x: auto; margin: 18px 0 6px; }

.hrc-grid {
  display: grid;
  grid-template-columns: 1.4em repeat(13, 1fr);
  gap: 2px;
  min-width: 340px;
  max-width: 620px;
}

.hrc-h {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.hrc-rh { font-size: 0.62rem; }
.hrc-corner { background: transparent; }

.hrc-cell {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: 0.5rem; font-weight: 700; letter-spacing: -0.04em;
  color: #06210f;
  font-variant-numeric: tabular-nums;
  cursor: default; user-select: none;
}

/* strength tiers — bright = strong, dark = fold */
.hrc-cell.t-premium { background: #34d17e; color: #04220f; box-shadow: inset 0 0 0 1px #7ff0ad; }
.hrc-cell.t-strong  { background: #2ba35f; color: #042a14; }
.hrc-cell.t-medium  { background: #3c7d54; color: #e6f5ec; }
.hrc-cell.t-weak    { background: #2c4a39; color: #b9d4c4; }
.hrc-cell.t-trash   { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); }

.hrc-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }

/* legend swatches in the tier table */
.hrc-sw {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  vertical-align: middle; margin-right: 6px;
}
.hrc-sw.t-premium { background: #34d17e; }
.hrc-sw.t-strong  { background: #2ba35f; }
.hrc-sw.t-medium  { background: #3c7d54; }
.hrc-sw.t-weak    { background: #2c4a39; }
.hrc-sw.t-trash   { background: rgba(255,255,255,0.12); }

.seo-updated { font-size: 0.82rem; color: var(--text-dim); margin-top: 18px; }

@media (max-width: 600px) {
  .hrc-cell { font-size: 0.42rem; }
  .hrc-h { font-size: 0.54rem; }
}