/* ==========================================================================
   3RR Game — games.css
   Page-specific layout for games.html: search masthead, filter rail,
   category guides and the glossary grid.
   ========================================================================== */

/* ---------------------------------------------------------- 1. masthead */
.games-head { background: var(--color-bg-block-tint); }
.games-head h1 { margin-bottom: var(--space-md); }

.games-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin-top: var(--space-lg);
  background: var(--color-bg-base);
  clip-path: var(--clip-angle-chip);
  box-shadow: var(--shadow-card);
}

.games-search__icon {
  display: grid;
  place-items: center;
  width: 52px;
  flex: none;
  color: var(--color-sapphire-block);
}
.games-search__icon svg { width: 20px; height: 20px; }

.games-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem 1.4rem 1rem 0;
  background: transparent;
  border: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
}
.games-search__input::placeholder { color: var(--color-text-muted); }
.games-search__input:focus { outline: none; }
.games-search:focus-within { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-sapphire-block); }
.games-search__input::-webkit-search-cancel-button { cursor: pointer; }

/* ----------------------------------------------------------- 2. filters */
.games-filters { margin-bottom: var(--space-lg); }

.games-filters .chip { cursor: pointer; border: 0; }
.games-filters .chip:hover { box-shadow: inset 0 0 0 1.5px var(--color-sapphire-block); }
.games-filters .chip--solid:hover { box-shadow: 0 8px 18px rgba(30, 79, 216, 0.28); }

.games-blurb {
  max-width: 72ch;
  margin: var(--space-md) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.games-count {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.games-empty {
  padding: var(--space-lg);
  background: var(--color-bg-block-tint);
  clip-path: var(--clip-angle-chip);
  text-align: center;
  color: var(--color-text-secondary);
}

.games-more { margin-top: var(--space-xl); }
.games-more [hidden] { display: none; }

/* ------------------------------------------------------- 3. guide blocks */
.guide-list { display: grid; gap: var(--space-lg); }

.guide {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1.4rem, 3.6vw, 2rem);
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  box-shadow: var(--shadow-inset-hair), 0 6px 18px rgba(11, 23, 48, 0.05);
}

.guide__mark {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex: none;
  background: linear-gradient(125deg, var(--color-navy-ink), #26386080);
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--color-cyan-bright);
}

.guide__body h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.guide__body p { font-size: var(--fs-sm); }

@media (min-width: 768px) {
  .guide { grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: start; }
}

@media (min-width: 1200px) {
  .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide:nth-child(odd) { transform: translateY(0); }
  .guide:nth-child(even) { transform: translateY(24px); }
}

/* ---------------------------------------------------------- 4. glossary */
.glossary { display: grid; gap: var(--space-md); }

.glossary__item {
  padding: 1.1rem 1.25rem;
  background: var(--color-bg-block-tint);
  clip-path: var(--clip-angle-chip);
}
.glossary__item h3 {
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sapphire-block);
}
.glossary__item p { font-size: var(--fs-sm); margin: 0; }

@media (min-width: 768px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .glossary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -------------------------------------------- 5. angled-surface shadow pass */
.games-search { box-shadow: none; filter: var(--drop-card); }
.games-search:focus-within { box-shadow: inset 0 0 0 2px var(--color-sapphire-block); filter: var(--drop-card-hover); }
.guide { box-shadow: var(--shadow-inset-hair); filter: var(--drop-soft); }
.games-filters .chip--solid:hover { box-shadow: none; filter: var(--drop-btn); }

.games-search { box-shadow: inset 0 0 0 1px var(--color-border-soft); }
.games-search:focus-within { box-shadow: inset 0 0 0 2px var(--color-sapphire-block); }

/* filter pills follow the same tinted-fill rule */
.games-filters .chip:hover { box-shadow: none; background: var(--color-bg-block-deep); }
.games-filters .chip--solid:hover { background: linear-gradient(115deg, var(--color-sapphire-deep), var(--color-sapphire-btn-end)); }