/* FREE PLAY: one game, one card, one PLAY link at every screen size. */
.top { position: relative; padding: 28px 72px 0; text-align: center; }
.title { margin: 0; font: 400 clamp(2.4rem, 9vw, 4.6rem)/1 var(--font-title); }
.mute { position: absolute; top: 16px; right: 16px; }
main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 0; }

.tag { display: inline-block; padding: 2px 6px; border-radius: 2px; font: 700 0.75rem var(--font-pixel); color: var(--ink); vertical-align: 2px; }
.tag.p1 { background: var(--sun); }
.tag.p2 { background: var(--cyan); }
.thumb { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 2px; }
.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.row {
  --accent: var(--sun);
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto 52px;
  grid-template-areas: "thumb" "info" "stats" "go";
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(5, 6, 12, 0.6);
}
.row.live { border-color: var(--accent); }
.row .preview { grid-area: thumb; align-self: start; min-width: 0; }
.row .info { grid-area: info; min-width: 0; }
.row-name { margin: 0; font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.1 var(--font-sign); color: var(--accent); }
.row-players { display: flex; gap: 4px; margin: 8px 0 0; }
.row-hook { margin: 8px 0 0; font-size: 1.25rem; line-height: 1.15; }
.stats { grid-area: stats; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 8px; font-size: 0.95rem; }
.stat { display: grid; gap: 3px; }
.bar { display: flex; gap: 3px; }
.bar i { min-width: 0; flex: 1; height: 8px; background: #232a44; }
.bar i.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.row .fp-btn, .row-soon { grid-area: go; }
.row-soon { display: flex; align-items: center; margin: 0; color: var(--muted); font-size: 1.1rem; }
.row.locked .thumb { opacity: 0.5; }

@media (min-width: 1180px) {
  .list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: two compact cards per row (live scene, name, tags, one line, PLAY). The stat bars and the replay
   button are left out here: at half a phone's width they're too small to read or hit, and scenes restart
   whenever they scroll back into view. */
@media (max-width: 759px) {
  .top { padding-top: 20px; }
  main { padding: 18px 12px 0; }
  .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "thumb" "info" "go";
    gap: 8px;
    padding: 8px;
    border: 2px solid var(--line);
    border-top: 3px solid var(--accent);
  }
  .row.live { border-color: var(--line); border-top-color: var(--accent); }
  .row .stats, .row .preview-replay { display: none; }
  .row-name { font-size: 1.05rem; line-height: 1.05; }
  .row-players { margin: 6px 0 0; }
  .row-hook { margin: 6px 0 0; font-size: 1.02rem; line-height: 1.1; color: var(--soft); }
  .row .fp-btn { min-height: 44px; padding-inline: 8px; }
  .row-soon { min-height: 44px; font-size: 1rem; }
}
footer { padding: 28px 16px 24px; text-align: center; }
.credit { display: inline-block; min-height: 44px; padding: 14px 10px; font: 0.95rem var(--font-screen); letter-spacing: 0.08em; color: #4d4a5c; text-decoration: none; }
.credit:hover, .credit:focus-visible { color: #8ff3ff; }

/* Real scenes, without a bezel. Replay is separate from PLAY and works on touch. */
.preview { background: #0d1226; }
.preview-replay {
  display: block; width: 100%; min-height: 44px; padding: 8px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: #0d1226; color: var(--soft); cursor: pointer;
  font: 1.1rem var(--font-screen);
}
.preview-replay:hover { color: var(--text); background: #182038; }
.preview-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.preview:focus-within { box-shadow: 0 0 0 1px var(--accent); }
@media (hover: hover) { .live:hover .preview { box-shadow: 0 0 0 1px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .preview-replay { display: none; } }