/* Discovery cards explain the experience first; the full library owns filters. */
.featured .section-heading h2{font-size:clamp(30px,3vw,36px);line-height:1.2}
.featured-grid{gap:20px;align-items:stretch}
/* Direct access to the full catalogue below the curated Home games. */
.featured .home-games-browse{display:flex;align-items:center;justify-content:center;gap:6px;min-height:50px;width:100%;margin-top:20px;padding:12px 16px;border:1px solid #56d9c066;border-radius:12px;background:#56d9c00a;color:var(--mint);font-size:15px;font-weight:750;line-height:1.4;text-decoration:none;text-align:center}
.featured .home-games-browse:hover{color:#a9f5e7;border-color:var(--mint);background:#56d9c01a}
.featured .home-games-browse:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.featured-grid .featured-card{border-radius:20px;box-shadow:0 8px 22px #0002}
.featured-card .cover-link{aspect-ratio:16/9}
.featured-card .game-body{padding:18px;min-width:0}
.featured-card .featured-info{min-width:0}
.featured-card .card-meta{display:none}
.featured-card h3{margin:0 0 6px;font-size:20px;line-height:1.25;letter-spacing:-.02em;overflow-wrap:break-word}
.featured-card .playstyle{margin:0 0 9px;color:var(--mint);font-size:12px;font-weight:750;line-height:1.4}
.featured-card .description{margin:0 0 9px;color:#d3e2ec;font-size:14px;line-height:1.45}
.featured-card .focus{margin:0 0 12px;color:#a9c3d5;font-size:12px;line-height:1.45}
.featured-card .focus:before{content:none}
.featured-card .card-stats{margin:auto 0 12px;font-size:12px;line-height:1.4;color:#a9c3d5;gap:6px 12px}
.featured-card .card-stats:empty{display:none}
.featured-card .card-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px;gap:8px;margin-top:0;align-items:stretch}
.featured-card .card-stats:empty + .card-actions{margin-top:auto}
.featured-card .play-button,.featured-card .gameplay-preview-button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 9px;border-radius:11px;font-size:13px;line-height:1.25;font-weight:800;text-align:center;white-space:normal;overflow-wrap:break-word}
.featured-card .play-button{background:var(--mint);color:#05211c;border:1px solid transparent}
.featured-card .gameplay-preview-button{color:#d9eaf4;background:#163347;border:1px solid #496a80;cursor:pointer}
.featured-card .gameplay-preview-button:hover{background:#20455c;border-color:var(--mint)}
.featured-card .favorite-button{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0}
.featured-card .gameplay-preview-button:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.featured-card .gameplay-preview-button:disabled{cursor:default;opacity:.7}

/* Native dialog: keyboard focus stays in the preview until it is dismissed. */
.gameplay-dialog{width:min(760px,calc(100% - 32px));max-width:760px;max-height:90dvh;padding:0;border:1px solid #466b83;border-radius:22px;background:var(--panel);color:var(--ink);box-shadow:0 28px 90px #0009;overflow:auto;overscroll-behavior:contain}
.gameplay-dialog:not([open]){display:none}
.gameplay-dialog::backdrop{background:#020a12c9;backdrop-filter:blur(5px)}
.gameplay-dialog .preview-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.gameplay-dialog .preview-title{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.02em;overflow-wrap:break-word}
.gameplay-dialog .preview-close{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;padding:0;border:1px solid #496a80;border-radius:12px;background:#163347;color:var(--ink);font:inherit;font-size:25px;cursor:pointer}
.gameplay-dialog .preview-close:hover{border-color:var(--mint);color:var(--mint)}
.gameplay-dialog .preview-media{margin:0;background:#071522}
.gameplay-dialog .preview-media img{display:block;width:100%;height:auto;max-height:380px;aspect-ratio:16/9;object-fit:contain;background:#071522}
.gameplay-dialog .preview-media img[hidden],.gameplay-dialog .preview-image-status[hidden]{display:none}
.gameplay-dialog .preview-image-status{padding:18px;color:#c9dde9;font-size:14px;line-height:1.5}
.gameplay-dialog .preview-media figcaption{padding:8px 18px;color:#abc4d6;font-size:12px;line-height:1.45}
.gameplay-dialog .preview-body{padding:18px;min-width:0}
.gameplay-dialog .preview-body h3{margin:18px 0 6px;font-size:16px;line-height:1.35}
.gameplay-dialog .preview-body h3:first-child{margin-top:0}
.gameplay-dialog .preview-body p{margin:0 0 12px;color:#c9dde9;font-size:14px;line-height:1.5;overflow-wrap:break-word}
.gameplay-dialog .preview-playstyle{color:var(--mint)}
.gameplay-dialog .preview-controls{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 14px;margin:0 0 18px;font-size:14px;line-height:1.5}
.gameplay-dialog .preview-controls dt{color:#a9c3d5;font-weight:750}
.gameplay-dialog .preview-controls dd{margin:0;color:#e1edf5;min-width:0;overflow-wrap:break-word}
.gameplay-dialog .preview-launch{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;padding:12px 18px;border:1px solid transparent;border-radius:12px;background:var(--mint);color:#05211c;font-weight:800;font-size:15px;line-height:1.4;text-align:center}
.gameplay-dialog .preview-launch:hover{background:#7be5d1}
.gameplay-dialog .preview-close:focus-visible,.gameplay-dialog .preview-launch:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.gameplay-dialog .preview-status{margin:0;color:#c9dde9;font-size:14px;line-height:1.5}

/* Filtering still searches every game; only visible results are paginated. */
.load-more-row,.load-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:26px 0 0}
.load-more-row[hidden],.load-more[hidden]{display:none}
.load-more-row p,.load-more p{margin:0;color:#b8cfdd;font-size:13px;line-height:1.5}
.load-more-row button,.load-more button,.load-more-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid #496a80;border-radius:12px;background:#163347;color:var(--ink);font:inherit;font-size:14px;font-weight:800;line-height:1.4;text-align:center;cursor:pointer}
.load-more-row button:hover,.load-more button:hover,.load-more-button:hover{border-color:var(--mint);background:#20455c}
.load-more-row button:focus-visible,.load-more button:focus-visible,.load-more-button:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

@media(max-width:980px) and (min-width:701px){.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .featured .section-heading{gap:4px 16px;margin-bottom:16px}
  .featured .section-heading h2{font-size:30px}
  .featured-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .featured-grid .featured-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 14px;padding:14px;border-radius:18px;align-content:start}
  .featured-card .cover-link{grid-column:1;grid-row:1;align-self:start;aspect-ratio:1;width:96px;border-radius:12px}
  .featured-card .game-cover{object-fit:cover}
  .featured-card .game-body{display:contents}
  .featured-card .featured-info{grid-column:2;grid-row:1;min-width:0}
  .featured-card h3{font-size:18px;line-height:1.25;margin:0 0 5px}
  .featured-card .playstyle{font-size:12px;line-height:1.4;margin:0 0 6px}
  .featured-card .description{font-size:14px;line-height:1.4;margin:0 0 6px}
  .featured-card .focus{font-size:12px;line-height:1.4;margin:0}
  .featured-card .card-stats{grid-column:1/-1;margin:0;font-size:12px;line-height:1.4}
  .featured-card .card-actions{grid-column:1/-1;margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px;gap:8px}
  .featured-card .card-stats:empty + .card-actions{margin-top:0}
  .featured-card .play-button,.featured-card .gameplay-preview-button{font-size:13px;min-height:48px}
  .gameplay-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);margin:auto;border-radius:18px}
  .gameplay-dialog .preview-header{padding:12px 14px}
  .gameplay-dialog .preview-title{font-size:20px}
  .gameplay-dialog .preview-body{padding:16px}
  .gameplay-dialog .preview-media figcaption{padding-inline:16px}
  .gameplay-dialog .preview-controls{grid-template-columns:1fr;gap:3px;margin-bottom:16px}
  .gameplay-dialog .preview-controls dd{margin-bottom:9px}
}
@media(max-width:360px){
  .featured-grid .featured-card{grid-template-columns:84px minmax(0,1fr);gap:10px 12px;padding:12px}
  .featured-card .cover-link{width:84px}
  .featured-card h3{font-size:17px}
  .featured-card .card-actions{gap:6px}
  .featured-card .play-button,.featured-card .gameplay-preview-button{padding-inline:6px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .featured-grid .featured-card,.featured-grid .featured-card .game-cover{transition:none}
  .featured-grid .featured-card:hover,.featured-grid .featured-card:hover .game-cover{transform:none}
}
@media print{.gameplay-dialog{display:none!important}.load-more-row,.load-more{display:none}}
