/* Phase 5.1: Game Card Redesign — Diorama Z-stack, spring tilt,
   per-game accent, locked blur-reveal, pointer glare + spotlight,
   bento grid, all 5 states, WCAG 2.2 AA, reduced-motion + touch fallbacks.
   No emoji, no neon glow, no fake trend line, no pure black. */
@layer pages {

  /* ═══════════════════════════════════════
     GRID — Asymmetric bento, not 3 identical columns
     ═══════════════════════════════════════ */
  .games-page-grid {
    container-type: inline-size;
    container-name: gameGrid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--game-card-min, 280px), 100%), 1fr));
    gap: var(--bento-gap, 24px);
  }

  .game-card--featured {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  @container gameGrid (min-width: 780px) {
    .game-card--featured {
      grid-column: 1 / 3;
    }
  }

  @container gameGrid (max-width: 640px) {
    .games-page-grid {
      grid-template-columns: 1fr;
    }
    .game-card--featured {
      grid-column: 1;
    }
  }

  /* ═══════════════════════════════════════
     TOOLBAR — Search + Sort + Results
     ═══════════════════════════════════════ */
  .games-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-md, 16px);
  }

  .games-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  .games-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted, #6b6b80);
    pointer-events: none;
  }

  .games-search-input {
    width: 100%;
    height: var(--touch-relaxed, 48px);
    padding: 0 70px 0 40px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-full, 9999px);
    background: var(--glass-bg, rgba(255,255,255,0.04));
    color: var(--text-primary, #e8e6e3);
    font-size: 0.875rem;
    font-family: var(--font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
  }

  .games-search-input:focus {
    outline: none;
    border-color: var(--game-accent, var(--accent-red, #cc1122));
    box-shadow: 0 0 0 3px oklch(from var(--game-accent, var(--accent-red)) 55% 0.12 hue / 0.25);
  }

  .games-search-input::placeholder { color: var(--text-muted, #6b6b80); }
  .games-search-input::-webkit-search-cancel-button,
  .games-search-input::-webkit-search-decoration { appearance: none; -webkit-appearance: none; }

  .games-search-hint {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 4px;
    background: var(--glass-bg, rgba(255,255,255,0.04));
    color: var(--text-muted, #6b6b80);
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    line-height: 1.4;
    pointer-events: none;
  }

  .sort-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-full, 9999px);
    background: var(--glass-bg, rgba(255,255,255,0.04));
    color: var(--text-secondary, #8a8a9a);
    font-size: 0.8125rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ═══════════════════════════════════════
     GAME CARD — DIORAMA BASE
     ═══════════════════════════════════════ */
  /* ═══════════════════════════════════════
     SKELETON — matches final card layout
     ═══════════════════════════════════════ */
  .games-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--game-card-min, 280px), 100%), 1fr));
    gap: var(--bento-gap, 24px);
  }

  .games-skeleton-card {
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
    background: oklch(15% 0.012 20);
    overflow: hidden;
    contain: layout paint;
  }

  .games-skeleton-img {
    height: 200px;
    background: linear-gradient(
      90deg,
      oklch(18% 0.01 20) 0%,
      oklch(25% 0.01 20 / 0.4) 40%,
      oklch(18% 0.01 20) 80%
    );
    background-size: 200% 100%;
    animation: games-skeleton-shimmer 2s ease-in-out infinite;
  }

  .games-skeleton-body {
    padding: 14px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .games-skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
      90deg,
      oklch(18% 0.01 20) 0%,
      oklch(25% 0.01 20 / 0.4) 40%,
      oklch(18% 0.01 20) 80%
    );
    background-size: 200% 100%;
    animation: games-skeleton-shimmer 2s ease-in-out infinite;
  }

  .games-skeleton-line--short { width: 50%; animation-delay: 0.15s; }
  .games-skeleton-line--medium { width: 75%; animation-delay: 0.3s; }

  @keyframes games-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ═══════════════════════════════════════
     UPGRADE MODAL
     ═══════════════════════════════════════ */
  .upgrade-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .upgrade-modal-backdrop.visible {
    opacity: 1;
    pointer-events: all;
  }

  .upgrade-modal {
    width: min(90vw, 420px);
    padding: 40px 36px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.05));
    border-radius: 20px;
    background: oklch(15% 0.012 20);
    text-align: center;
    position: relative;
  }

  .upgrade-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
    color: var(--text-primary);
    cursor: pointer;
  }

  .upgrade-modal-title { font-size: 1.5rem; margin: 16px 0 8px; }
  .upgrade-modal-desc { font-size: 0.9rem; margin: 0 0 20px; }
  .upgrade-modal-icon { font-size: 3rem; }
  .upgrade-modal-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.1s;
  }
  .upgrade-modal-btn:active { transform: scale(0.96); }

  /* ═══════════════════════════════════════
     CONTENT VISIBILITY
     ═══════════════════════════════════════ */
  #games-grid,
  .games-page-grid,
  #keyboard-controls-guide {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }

  .games-filter-bar { contain: layout paint style; }

  /* ═══════════════════════════════════════
     CONTROLS ACCORDION
     ═══════════════════════════════════════ */
  .controls-accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .controls-group {
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: var(--glass-bg, rgba(255,255,255,0.02));
    transition: border-color 0.2s ease;
  }

  .controls-group[open] { border-color: oklch(100% 0 0 / 0.12); }

  .controls-group summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
  }
  .controls-group summary::-webkit-details-marker { display: none; }
  .controls-group summary::before {
    content: '▸';
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .controls-group[open] summary::before { transform: rotate(90deg); }

  .controls-group .controls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
  }
  .controls-group .controls-table td {
    padding: 4px 12px;
    border-top: 1px solid oklch(100% 0 0 / 0.04);
  }
  .controls-group .controls-table kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: oklch(25% 0.01 285);
    border: 1px solid oklch(100% 0 0 / 0.08);
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
  }

  /* ═══════════════════════════════════════
     CONTAINER QUERIES — skeleton adapt
     ═══════════════════════════════════════ */
  @container gameGrid (max-width: 380px) {
    .games-skeleton-img { height: 150px; }
  }

  @container gameGrid (max-width: 280px) {
    .games-skeleton-img { height: 120px; }
  }

  /* ═══════════════════════════════════════
     VIEWPORT BREAKPOINTS
     ═══════════════════════════════════════ */
  @media (max-width: 1024px) {
    .games-page-grid,
    .games-skeleton-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .game-card--featured {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 640px) {
    .games-page-grid,
    .games-skeleton-grid {
      grid-template-columns: 1fr;
    }
    .game-card--featured {
      grid-column: 1;
    }
  }

  /* ═══════════════════════════════════════
     REDUCED MOTION — skeleton
     ═══════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    @keyframes games-skeleton-shimmer { 0%, 100% { background-position: 0 0; } }
  }
}