/* Arcade: partner games you can play any time. Cards on the home page and Arcade page; one player page per game. */

/* ---------- Cards ---------- */
.arcade-home,.more-games{display:flex;flex-direction:column;gap:12px}
.arcade-home > p{margin:0}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.section-head a{color:var(--accent-text);text-decoration:none}
.section-head a:hover{text-decoration:underline;text-underline-offset:3px}
.arcade-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.arcade-card{
  display:flex;flex-direction:column;height:100%;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease;
}
.arcade-card:hover{border-color:var(--accent-deep);transform:translateY(-2px)}
.arcade-card img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:var(--surface-2)}
.ac-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.ac-title{font-family:var(--font-display);font-size:1.15rem;line-height:1.15}
.ac-tag{color:var(--muted);font-size:.95rem}

/* ---------- Game page ---------- */
.crumbs{color:var(--muted)}
.crumbs a{color:var(--accent-text);text-decoration:none}
.tagline{margin:6px 0 0;color:var(--muted);max-width:56ch}
.player{display:flex;flex-direction:column;gap:10px}
.frame{
  position:relative;width:100%;max-width:100%;aspect-ratio:var(--w) / var(--h);
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
}
.frame.portrait{width:min(100%, calc(78vh * var(--w) / var(--h)));margin-inline:auto}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--surface-2)}
.frame:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;border-radius:0}
.cover{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--surface-2);
}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .15s ease}
.cover:hover img{opacity:.75}
.cover-btn{position:relative;pointer-events:none;box-shadow:var(--shadow)}
.player-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}

.game-info{display:flex;flex-direction:column;gap:12px}
.game-info p{margin:0;max-width:64ch}
.how{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;max-width:64ch}
.controls{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px}
.controls dt{font-family:var(--font-hud);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:3px}
.controls dd{margin:0}
.credits{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px;color:var(--muted)}

@media (min-width:560px){
  .arcade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}