/* ============================================================
   css/games.css — /games/ hub (games/index.php)
   Same look as Kodle and the tools hub: Outfit + JetBrains Mono, dotted
   background, dark feature card. Scoped to .gm because style.css sets
   `* { font-family: Urbanist }`, html at 62.5% and letter-spacing on a/p/li.
   Resets use :where() so they never outrank the .gm-* classes.
   ============================================================ */

.gm {
  --gm-ink: #0d2419;
  --gm-green: #0b6b43;
  --gm-green-dk: #08502f;
  --gm-mint: #e8f5ee;
  --gm-neon: #6ee7a8;
  --gm-text: #3f4a45;
  --gm-muted: #5a645f;
  --gm-line: #e4e7e5;
  --gm-term: #0e1311;
  --gm-c: #0f8f5d;
  --gm-p: #b97a0f;
  --gm-a: #3a4541;
  --gm-sans: 'Outfit', system-ui, sans-serif;
  --gm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gm-ink);
  background-color: #f5f6f3;
  background-image: radial-gradient(#e3e8e5 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
.gm, .gm * { font-family: var(--gm-sans); box-sizing: border-box; }
.gm h1 span, .gm h2 span, .gm h3 span { font-family: var(--gm-sans) !important; }
.gm .gm-mono, .gm .gm-mono * { font-family: var(--gm-mono); }
:where(.gm) a, :where(.gm) p, :where(.gm) li { font-size: inherit; line-height: inherit; letter-spacing: normal; font-weight: inherit; }
:where(.gm) p, :where(.gm) h1, :where(.gm) h2, :where(.gm) h3, :where(.gm) ul { margin: 0; }
:where(.gm) ul { padding: 0; list-style: none; }
.gm :focus-visible { outline: 3px solid var(--gm-green); outline-offset: 3px; }

/* Generous gap under the site header and above the footer wave. */
.gm-wrap { max-width: 1200px; margin: 0 auto; padding: 72px 24px 128px; display: flex; flex-direction: column; gap: 64px; }

/* ---------- hero ---------- */
.gm-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 760px; margin: 0 auto; }
.gm-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--gm-green); }
.gm-h1 { font-size: clamp(36px, 5.6vw, 60px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; color: var(--gm-ink); }
.gm-h1 span { color: var(--gm-green); }
.gm-lead { font-size: 18px; line-height: 1.6; color: var(--gm-text); max-width: 620px; }

/* ---------- sections ---------- */
.gm-section { display: flex; flex-direction: column; gap: 22px; }
.gm-section__head { display: flex; flex-direction: column; gap: 6px; }
.gm-h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--gm-ink); }
.gm-section__sub { font-size: 16px; color: var(--gm-muted); }

/* ---------- Kodle feature card ---------- */
.gm-feature {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: var(--gm-term);
  border-radius: 26px;
  box-shadow: 0 0 0 1px #1d2622, 0 40px 80px -40px rgba(11, 107, 67, .65);
  color: #eef5f1;
}
.gm-feature__glow { position: absolute; inset: -40% -10% auto auto; width: 460px; height: 460px; background: radial-gradient(circle, rgba(20, 160, 106, .25), transparent 65%); pointer-events: none; }
.gm-feature__art { position: relative; display: flex; justify-content: center; gap: 8px; }
.gm-mini {
  width: clamp(44px, 7vw, 64px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 12px; color: #fff; font-weight: 800; font-size: clamp(20px, 3vw, 30px); line-height: 1;
}
.gm-mini.is-c { background: var(--gm-c); box-shadow: 0 0 22px -6px rgba(18, 180, 110, .8); }
.gm-mini.is-p { background: var(--gm-p); }
.gm-mini.is-a { background: var(--gm-a); }
.gm-feature__body { position: relative; display: flex; flex-direction: column; gap: 12px; }
.gm-feature__kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--gm-neon); }
.gm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gm-neon); animation: gm-pulse 2s infinite; }
.gm-feature__title { font-size: 40px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #fff; }
.gm-feature__pitch { font-size: 17px; line-height: 1.6; color: #c9d6cf; max-width: 480px; }
.gm-feature__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.gm .gm-link { font-size: 16px; font-weight: 700; color: var(--gm-neon); text-decoration: underline; text-underline-offset: 4px; }
.gm .gm-link:hover { color: #a5f3c9; }

/* ---------- Vault game cards ---------- */
.gm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gm-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gm-line); border-radius: 22px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.gm-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(13, 36, 25, .35); }
.gm-tile__thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 40px; color: rgba(13, 36, 25, .3); background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
.gm-tile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gm-tile__thumb--2 { background: linear-gradient(135deg, #e0e7ff, #f8fafc); }
.gm-tile__thumb--3 { background: linear-gradient(135deg, #d1fae5, #f8fafc); }
.gm-tile__thumb--4 { background: linear-gradient(135deg, #fef3c7, #f8fafc); }
.gm-tile__thumb--5 { background: linear-gradient(135deg, #fce7f3, #f8fafc); }
.gm-tile__thumb--6 { background: linear-gradient(135deg, #cffafe, #f8fafc); }
.gm-tile__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.gm-tile__tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gm-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gm-green); background: var(--gm-mint); border-radius: 999px; padding: 4px 11px; }
.gm-badge i { font-size: 11px; }
.gm-topic { font-size: 12px; font-weight: 700; color: var(--gm-muted); }
.gm-tile__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--gm-ink); }
.gm-tile__pitch { font-size: 16px; line-height: 1.6; color: var(--gm-text); }

/* ---------- actions ---------- */
.gm-actions { display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 20px; }
.gm-action { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 380px; text-align: center; }
.gm-note { font-size: 15px; color: var(--gm-muted); }

.gm .gm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; font-weight: 800; line-height: 1.2; border-radius: 999px; padding: 14px 26px;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .15s;
}
.gm .gm-btn:hover { transform: translateY(-1px); }
.gm .gm-btn--neon { background: var(--gm-neon); color: #06251a; border: 0; }
.gm .gm-btn--neon:hover { background: #8ff0bd; color: #06251a; }
.gm .gm-btn--solid { background: var(--gm-green); color: #fff; border: 0; }
.gm .gm-btn--solid:hover { background: var(--gm-green-dk); color: #fff; }
.gm .gm-btn--ghost { background: #fff; color: var(--gm-green); border: 2px solid var(--gm-green); padding: 12px 24px; }
.gm .gm-btn--ghost:hover { background: var(--gm-green); color: #fff; }

@keyframes gm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 168, .5); } 50% { box-shadow: 0 0 0 6px rgba(110, 231, 168, 0); } }

@media (max-width: 960px) {
  .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-feature { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}
@media (max-width: 640px) {
  .gm-wrap { padding: 44px 16px 96px; gap: 48px; }
  .gm-lead { font-size: 16px; }
  .gm-feature { padding: 24px 20px; border-radius: 22px; }
  .gm-feature__title { font-size: 32px; }
  .gm-feature__pitch { font-size: 16px; }
  .gm-grid { grid-template-columns: 1fr; }
  .gm-actions { flex-direction: column; align-items: stretch; }
  .gm-action { max-width: none; }
  .gm .gm-btn { width: 100%; }
  .gm-feature__cta { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gm *, .gm .gm-btn { animation: none !important; transition: none !important; }
}