/* Immaculate Grid — game pages + /games/ catalog (docroot /fleet-games.css) */

.article-page.game-page .article-main {
  max-width: min(980px, 94vw);
}

.article-page.game-page h1 {
  margin-bottom: 0.35rem;
}

.game-page-lead {
  color: var(--muted);
  margin: 0 0 0.75rem;
  font-size: 1rem;
  max-width: 60ch;
}

.fleet-game-embed {
  position: relative;
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  background: linear-gradient(135deg, #1a222c 0%, #2a3544 100%);
  border: 1px solid var(--line, #e2ddd4);
  box-shadow: 0 12px 40px rgba(28, 36, 48, 0.1);
  aspect-ratio: 16 / 10;
  max-height: min(72vh, 720px);
  min-height: 280px;
}

.fleet-game-embed::before {
  content: "Loading game…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 0;
}

.fleet-game-embed iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f1419;
}

.game-page-about {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, #e2ddd4);
}

.game-page-about details {
  border: 1px solid var(--line, #e2ddd4);
  border-radius: var(--radius, 12px);
  background: #fff;
  padding: 0.85rem 1rem 1rem;
}

.game-page-about summary {
  cursor: pointer;
  font-family: var(--display, Georgia, serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent, #2d6a9f);
  list-style: none;
  user-select: none;
}

.game-page-about summary::-webkit-details-marker {
  display: none;
}

.game-page-about summary::after {
  content: " ▾";
  font-size: 0.85em;
  opacity: 0.75;
}

.game-page-about details[open] summary::after {
  content: " ▴";
}

.game-about-body {
  margin-top: 0.75rem;
  font-size: 0.98rem;
  color: var(--text, #1c2430);
}

.game-about-body h2,
.game-about-body h3 {
  font-family: var(--display, Georgia, serif);
  margin-top: 1.25rem;
  font-size: 1.15rem;
}

.game-about-body p {
  margin: 0.75rem 0;
}

.games-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
}

.games-catalog-grid li {
  margin: 0;
}

.games-catalog-grid a {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line, #e2ddd4);
  border-radius: var(--radius, 12px);
  background: #fff;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.games-catalog-grid a:hover {
  border-color: var(--accent, #2d6a9f);
  box-shadow: 0 8px 24px rgba(28, 36, 48, 0.08);
  transform: translateY(-1px);
}

.games-catalog-note {
  color: var(--muted, #5c6773);
  margin: 0 0 0.5rem;
  max-width: 62ch;
}

@media (max-width: 720px) {
  .fleet-game-embed {
    aspect-ratio: 4 / 3;
    min-height: 240px;
    max-height: min(58vh, 520px);
  }

  .games-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.65rem;
  }

  .games-catalog-grid a {
    padding: 0.75rem 0.85rem;
    font-size: 0.92rem;
  }
}

/* ===== Self-hosted native games (same-origin, no iframe) ===== */
.ig-game {
  margin: 1rem auto 1.5rem;
  max-width: 520px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line, #e2ddd4);
  border-radius: var(--radius, 12px);
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 12px 40px rgba(28, 36, 48, 0.08);
  font-family: var(--font, system-ui, sans-serif);
}
.ig-g-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.ig-g-status {
  font-weight: 600;
  color: var(--text, #1c2430);
  min-height: 1.4em;
}
.ig-g-score {
  font-weight: 700;
  color: var(--accent, #2d6a9f);
}
.ig-g-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ig-btn {
  appearance: none;
  border: 1px solid var(--accent, #2d6a9f);
  background: var(--accent, #2d6a9f);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ig-btn:hover { background: var(--accent-hover, #1d4e79); }
.ig-btn:active { transform: translateY(1px); }
.ig-btn.ig-btn-ghost {
  background: #fff;
  color: var(--accent, #2d6a9f);
}
.ig-btn.ig-btn-ghost:hover { background: #f3f6f9; }

/* 2048 */
.ig-2048-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #bbada0;
  border-radius: 10px;
  padding: 10px;
  aspect-ratio: 1 / 1;
  touch-action: none;
  user-select: none;
}
.ig-2048-cell {
  display: grid;
  place-items: center;
  background: rgba(238, 228, 218, 0.35);
  border-radius: 6px;
  font-weight: 800;
  font-size: clamp(1.1rem, 6vw, 2rem);
  color: #776e65;
  transition: transform 0.08s ease;
}
.ig-2048-cell[data-v="2"]{background:#eee4da}
.ig-2048-cell[data-v="4"]{background:#ede0c8}
.ig-2048-cell[data-v="8"]{background:#f2b179;color:#f9f6f2}
.ig-2048-cell[data-v="16"]{background:#f59563;color:#f9f6f2}
.ig-2048-cell[data-v="32"]{background:#f67c5f;color:#f9f6f2}
.ig-2048-cell[data-v="64"]{background:#f65e3b;color:#f9f6f2}
.ig-2048-cell[data-v="128"]{background:#edcf72;color:#f9f6f2;font-size:clamp(0.95rem,5vw,1.6rem)}
.ig-2048-cell[data-v="256"]{background:#edcc61;color:#f9f6f2;font-size:clamp(0.95rem,5vw,1.6rem)}
.ig-2048-cell[data-v="512"]{background:#edc850;color:#f9f6f2;font-size:clamp(0.95rem,5vw,1.6rem)}
.ig-2048-cell[data-v="1024"]{background:#edc53f;color:#f9f6f2;font-size:clamp(0.8rem,4vw,1.3rem)}
.ig-2048-cell[data-v="2048"]{background:#edc22e;color:#f9f6f2;font-size:clamp(0.8rem,4vw,1.3rem)}
.ig-2048-hint { margin-top: 0.6rem; color: var(--muted, #5c6773); font-size: 0.85rem; text-align: center; }

/* Word / Equation grids */
.ig-wg-grid { display: grid; gap: 6px; justify-content: center; margin: 0 auto; }
.ig-wg-row { display: grid; gap: 6px; grid-auto-flow: column; justify-content: center; }
.ig-wg-tile {
  width: clamp(38px, 11vw, 52px);
  height: clamp(38px, 11vw, 52px);
  display: grid;
  place-items: center;
  border: 2px solid var(--line, #d3d6da);
  border-radius: 6px;
  font-weight: 800;
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  text-transform: uppercase;
  color: var(--text, #1c2430);
  background: #fff;
}
.ig-wg-tile.is-filled { border-color: #878a8c; }
.ig-wg-tile.correct { background: #6aaa64; border-color: #6aaa64; color: #fff; }
.ig-wg-tile.present { background: #c9b458; border-color: #c9b458; color: #fff; }
.ig-wg-tile.absent  { background: #787c7e; border-color: #787c7e; color: #fff; }
.ig-kb { display: grid; gap: 6px; margin-top: 0.9rem; }
.ig-kb-row { display: flex; gap: 5px; justify-content: center; }
.ig-key {
  appearance: none; border: 0; border-radius: 5px;
  background: #d3d6da; color: #1c2430;
  font-weight: 700; font-size: 0.85rem;
  padding: 0.7rem 0.55rem; min-width: 26px; cursor: pointer;
  flex: 1; max-width: 44px;
}
.ig-key.wide { max-width: 70px; font-size: 0.72rem; }
.ig-key.correct { background: #6aaa64; color: #fff; }
.ig-key.present { background: #c9b458; color: #fff; }
.ig-key.absent  { background: #787c7e; color: #fff; }

/* Connections / Group Four */
.ig-c4-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ig-c4-cell {
  display: grid; place-items: center; text-align: center;
  min-height: 64px; padding: 0.4rem; border-radius: 8px;
  background: #efefe6; color: #1c2430; font-weight: 700;
  font-size: clamp(0.7rem, 2.6vw, 0.95rem); cursor: pointer; user-select: none;
  border: 2px solid transparent; line-height: 1.15;
}
.ig-c4-cell.sel { background: #5a594e; color: #fff; }
.ig-c4-solved {
  grid-column: 1 / -1; display: grid; place-items: center;
  padding: 0.7rem; border-radius: 8px; color: #1c2430; font-weight: 700;
}
.ig-c4-solved small { display: block; font-weight: 500; opacity: 0.85; }
.ig-c4-g0 { background: #f9df6d; } .ig-c4-g1 { background: #a0c35a; }
.ig-c4-g2 { background: #b0c4ef; } .ig-c4-g3 { background: #ba81c5; color:#fff; }
.ig-c4-mistakes { display: flex; gap: 6px; justify-content: center; margin-top: 0.5rem; }
.ig-c4-dot { width: 12px; height: 12px; border-radius: 50%; background: #5a594e; }
.ig-c4-dot.used { background: #d3d6da; }

/* Get 10 */
.ig-g10-grid { display: grid; gap: 6px; }
.ig-g10-cell {
  display: grid; place-items: center; aspect-ratio: 1/1;
  border-radius: 8px; font-weight: 800; cursor: pointer; color: #fff;
  font-size: clamp(1rem, 5vw, 1.5rem); transition: transform 0.08s;
}
.ig-g10-cell.sel { outline: 3px solid #1c2430; outline-offset: -3px; }
.ig-g10-cell[data-v="1"]{background:#9ec5fe} .ig-g10-cell[data-v="2"]{background:#74a9f7}
.ig-g10-cell[data-v="3"]{background:#4f8cf0} .ig-g10-cell[data-v="4"]{background:#3b6fd6}
.ig-g10-cell[data-v="5"]{background:#9b6ad6} .ig-g10-cell[data-v="6"]{background:#c25fb0}
.ig-g10-cell[data-v="7"]{background:#e0568a} .ig-g10-cell[data-v="8"]{background:#ef7d52}
.ig-g10-cell[data-v="9"]{background:#edc53f;color:#1c2430} .ig-g10-cell[data-v="10"]{background:#6aaa64}

/* Waffle / Word Swap */
.ig-wf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 320px; margin: 0 auto; }
.ig-wf-cell {
  display: grid; place-items: center; aspect-ratio: 1/1; border-radius: 6px;
  font-weight: 800; font-size: clamp(1rem, 6vw, 1.6rem); text-transform: uppercase;
  background: #edeff1; color: #1c2430; cursor: pointer; user-select: none; border: 2px solid transparent;
}
.ig-wf-cell.gap { visibility: hidden; cursor: default; }
.ig-wf-cell.sel { border-color: #1c2430; }
.ig-wf-cell.correct { background: #6aaa64; color: #fff; }
.ig-wf-cell.present { background: #c9b458; color: #fff; }
.ig-wf-cell.fixed { background: #6aaa64; color: #fff; cursor: default; }