/* components/embed.css — full-bleed game players + hero */
.hero{ position:relative; padding-block:4rem 3rem }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center }
.hero__grid > div{ min-width:0 }
@media (max-width:820px){ .hero__grid{grid-template-columns:1fr} }
.hero__art{ aspect-ratio:4/3; border-radius:var(--radius); border:1px solid var(--border-strong);
  box-shadow:var(--glow-a), var(--shadow); min-height:260px; contain:paint }
.section-head .btn, .section-head > a.btn{ align-self:center }
.hero h1{ background:linear-gradient(120deg,var(--accent),var(--accent-3),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.3em }
.hero__lead{ font-size:1.15rem; color:var(--fg-muted); max-width:60ch }
.hero__cta{ margin-top:1.6rem }
.scanlines{ position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px) }
.gameframe{ border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden;
  background:#000; box-shadow:var(--shadow) }
.gameframe__bar{ display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-bottom:1px solid var(--border);
  background:var(--bg-elev); font-size:.75rem; color:var(--fg-muted) }
.gameframe__dots span{ width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px }
.gameframe iframe{ width:100%; height:min(74vh,760px); border:0; display:block; background:#000 }
.gameframe--full iframe{ height:calc(100vh - 120px) }
.empty{ padding:3rem 1rem; text-align:center; color:var(--fg-muted); border:1px dashed var(--border); border-radius:var(--radius) }
.stat{ padding:1.1rem 1.3rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card) }
.stat b{ font-size:1.8rem; display:block; color:var(--accent) }
.stat span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--fg-muted) }