/* Slot review hero — key art identifies the game, published numbers stay above the fold.
   Fraunces comes from sections.css. */

.slot-hero{
  background:linear-gradient(150deg,#07402E 0%,#042C21 74%);
  border-bottom:1px solid var(--line);
  padding:44px 0 0;
}
.slot-hero + .section{padding-top:34px}

.slot-hero-grid{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:48px;align-items:center;
}

/* --- the stage: artwork doubles as the demo launcher --- */
.slot-stage{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#04140f}
.slot-stage-art{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  padding:0;border:0;background:#0b1722;cursor:pointer;
}
.slot-stage.is-static .slot-stage-art{cursor:default}
.slot-stage-art img{width:100%;height:100%;object-fit:cover;display:block}
.slot-stage-initials{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:Fraunces,Georgia,serif;font-weight:700;font-size:54px;color:var(--ink);opacity:.85;
}
.slot-stage-veil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(4,20,15,.12),rgba(4,20,15,.62));
}
.slot-stage-play{
  display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:var(--button);color:var(--buttonink);font-size:30px;padding-left:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .18s;
}
.slot-stage-art:hover .slot-stage-play,
.slot-stage-art:focus-visible .slot-stage-play{transform:scale(1.07)}
.slot-stage-hint{
  position:absolute;left:12px;right:12px;bottom:14px;text-align:center;
  font-size:12.5px;font-weight:700;color:#EAF5EE;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.slot-stage-host iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#04140f}
.slot-stage-bar{
  display:flex;align-items:center;gap:14px;padding:11px 14px;
  border-top:1px solid var(--line);
}
.slot-stage-bar p{margin:0;flex:1;min-width:0;font-size:12px;color:#8FAFA0}
.slot-stage-bar .btn{min-height:38px;padding:0 16px;font-size:13px;flex:0 0 auto}

.slot-hero-kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:700}
.slot-hero-kicker a{
  color:var(--forest-2);background:var(--gold);padding:5px 11px;border-radius:6px;
  text-decoration:none;letter-spacing:.02em;
}
.slot-hero-kicker a:hover{filter:brightness(1.08)}
.slot-hero-kicker span{
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700;
}

.slot-hero-title{
  margin:16px 0 0;
  font-family:Fraunces,Georgia,'Times New Roman',serif;
  font-variation-settings:'opsz' 120,'wght' 600,'SOFT' 40,'WONK' 1;
  font-weight:600;
  font-size:clamp(36px,4.4vw,60px);line-height:1.02;letter-spacing:-.02em;
}
.slot-hero .page-update-date{margin:12px 0 0;font-size:12px;color:var(--heromuted)}
.slot-hero-lede{margin:14px 0 0;font-size:16.5px;color:#CFE3D7;max-width:60ch}

.slot-hero-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.slot-hero-btn{
  display:inline-block;text-decoration:none;
  background:var(--button);color:var(--buttonink);
  font-weight:700;font-size:15px;padding:13px 24px;border-radius:12px;
  transition:filter .16s;
}
.slot-hero-btn:hover{filter:brightness(1.08)}
.slot-hero-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.slot-hero-btn.ghost:hover{border-color:var(--gold);color:var(--gold);filter:none}
.slot-hero-btn.is-off{
  background:transparent;color:#8FAFA0;border:1px dashed var(--line);cursor:default;
}
.slot-hero-meta{margin:16px 0 0;font-size:12px;color:#8FAFA0}

/* --- published figures --- */
.slot-hero-specs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;margin:34px 0 0;padding:0;
  border-top:1px solid rgba(255,255,255,.12);
}
.slot-hero-specs > div{
  padding:18px 22px 20px 0;margin-right:22px;
  border-right:1px solid rgba(255,255,255,.12);min-width:0;
}
.slot-hero-specs > div:last-child{border-right:0;margin-right:0}
.slot-hero-specs dt{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--muted);
}
.slot-hero-specs dd{
  margin:7px 0 0;
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'opsz' 120,'wght' 700,'SOFT' 30,'WONK' 1;
  font-weight:700;font-size:26px;line-height:1.1;color:var(--gold);
  overflow-wrap:anywhere;
}
/* Unconfirmed fields are notes, not figures, so they must not read as headline numbers. */
.slot-hero-specs dd.unset{
  font-family:Inter,system-ui,sans-serif;font-variation-settings:normal;
  font-size:13px;font-weight:500;color:#8FAFA0;line-height:1.35;
}

@media (max-width:1080px){
  .slot-hero-grid{grid-template-columns:1fr;gap:26px}
  .slot-hero-specs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slot-hero-specs > div:nth-child(3n){border-right:0;margin-right:0}
}
@media (max-width:720px){
  .slot-hero{padding:30px 0 0}
  .slot-hero + .section{padding-top:24px}
  .slot-hero-title{font-size:clamp(30px,8vw,40px)}
  .slot-hero-btn{flex:1 1 100%;text-align:center}
  .slot-hero-specs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
  .slot-hero-specs > div{padding:14px 14px 16px 0;margin-right:14px}
  .slot-hero-specs > div:nth-child(3n){border-right:1px solid rgba(255,255,255,.12);margin-right:14px}
  .slot-hero-specs > div:nth-child(2n){border-right:0;margin-right:0}
  .slot-hero-specs dd{font-size:21px}
}
@media (max-width:720px){.slot-stage-play{width:62px;height:62px;font-size:22px}.slot-stage-hint{font-size:11.5px}}

/* The demo section keeps its copy; the player itself is in the hero. */
.demo-note{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 22px;margin:14px 0 0}
.demo-note h3{margin:0;font-size:17px}
.demo-note p{margin:8px 0 0;color:var(--muted);font-size:14px}
.demo-note .demo-actions{margin-top:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}