/**
 * F-106 Phase 2c — Games Picker Modal
 *
 * Centred dialog with 5 game tiles in a 2-column grid (1-column on tiny
 * screens). Reuses design tokens from css/base.css. Light + dark theme.
 */

/* ── Overlay (dim background) ──────────────────────────────────────────── */
.gpm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;                   /* above contextual-footer (z:50) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  animation: gpm-fade-in 150ms ease-out;
}

@keyframes gpm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lock body scroll while modal is open */
body.gpm-open {
  overflow: hidden;
}

/* ── Dialog (transparent — just close button + tiles floating on dim) ── */
.gpm-dialog {
  background: transparent;
  color: #ffffff;
  border: none;
  box-shadow: none;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  /* No dialog animation — the tiles run their own entrance. */
}

@media (prefers-reduced-motion: reduce) {
  .gpm-overlay { animation: none; }
}

/* ── Close button (floats on dark overlay, right-aligned) ─────────────── */
.gpm-close {
  align-self: flex-end;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, background 150ms ease, transform 100ms ease;
}
.gpm-close:hover  { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.gpm-close:active { transform: scale(0.94); }
.gpm-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── Tile row (single horizontal line, all 5 tiles, no labels) ────────── */
.gpm-tiles {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
}

.gpm-tile {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 0;
  /* Two animations: a bouncy entrance, then a gentle breathing pulse.
   * The entrance uses `both` so it holds the start state before its delay
   * fires (no flash of un-styled position). The breathe runs forever after.
   * Per-tile delays + durations below desync the breathe phase. */
  animation:
    gpm-pop-in 0.50s cubic-bezier(0.34, 1.55, 0.6, 1) both,
    gpm-breathe 3.4s ease-in-out infinite;
  transform-origin: 50% 70%;
}

/* Entrance stagger — each tile lands ~80ms after the previous one.
 * Breathe delays + durations are picked to be coprime-ish so the cycle
 * never re-syncs. */
.gpm-tile:nth-child(1) { animation-delay: 0ms,    560ms;  animation-duration: 0.5s, 3.0s; }
.gpm-tile:nth-child(2) { animation-delay: 80ms,   920ms;  animation-duration: 0.5s, 3.7s; }
.gpm-tile:nth-child(3) { animation-delay: 160ms,  680ms;  animation-duration: 0.5s, 3.2s; }
.gpm-tile:nth-child(4) { animation-delay: 240ms,  1140ms; animation-duration: 0.5s, 3.9s; }
.gpm-tile:nth-child(5) { animation-delay: 320ms,  800ms;  animation-duration: 0.5s, 3.45s; }

.gpm-tile:hover  {
  /* Pause the breathe on hover so the tile sits steady under the cursor. */
  animation-play-state: running, paused;
  filter: brightness(1.08);
}
.gpm-tile:active {
  transform: scale(0.92);
  transition: transform 80ms ease;
}
.gpm-tile:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 14px;
}

@keyframes gpm-pop-in {
  0%   { opacity: 0; transform: scale(0.35) translateY(28px); }
  60%  { opacity: 1; transform: scale(1.10) translateY(-6px); }
  82%  { transform: scale(0.95) translateY(3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes gpm-breathe {
  0%, 100% { transform: scale(1)    translateY(0); }
  50%      { transform: scale(1.045) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .gpm-tile {
    animation: none;
  }
}

.gpm-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.gpm-tile__icon svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 64px;
  aspect-ratio: 1 / 1;
}

/* Visually hide tile labels — branded GameIcons speak for themselves.
 * Keep markup + aria-label on the button for screen readers. */
.gpm-tile__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 359px) {
  /* On very narrow phones (rare), allow tiles to shrink further. */
  .gpm-tiles { gap: 6px; padding: 12px 8px 14px; }
  .gpm-tile__icon svg { max-width: 56px; }
}

/* ── Empty state (no games.json for this topic yet) ───────────────────── */
.gpm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 18px 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}
.gpm-empty__icon {
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
}
.gpm-empty__title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
}
.gpm-empty__sub {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  max-width: 320px;
}

/* Overlay stays dark in BOTH themes — the dim is intentional, not theme-driven.
 * No light-mode override needed since the dialog has no chrome anymore. */