/* ============================================================
   Augusta 12 hero scene, scoped under .hero-scene.
   Canvas 2D composite: base art + accumulated trails + per-frame
   overlay, drawn to one visible canvas each frame. See hero.js.
   ============================================================ */

.hero-scene{
  margin:0 0 28px;
}

.hero-canvas-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
}

.hero-canvas-wrap canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.hero-legend{
  position:absolute;
  right:12px;
  bottom:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 14px;
  box-shadow:0 2px 10px rgba(28,27,24,.12);
  max-width:220px;
}
.hero-legend[hidden]{display:none;}
.hero-legend .legend-title{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.hero-legend ul{list-style:none;margin:0;padding:0;}
.hero-legend li{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:5px;
}
.hero-legend li:last-child{margin-bottom:0;}
.hero-legend .swatch{
  flex:none;
  width:14px;
  height:14px;
}
.hero-legend .shot-legend{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--line);
  display:none;
}
.hero-legend .shot-legend li{text-transform:none;}
.hero-legend .shot-legend .num{
  flex:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--ink);
  color:var(--card);
  font-size:9px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-caption-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}
.hero-caption{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  max-width:60ch;
}
.hero-replay{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clay-text);
  background:none;
  border:none;
  padding:4px 2px;
  cursor:pointer;
  border-bottom:1px solid transparent;
}
.hero-replay:hover{border-bottom-color:var(--clay);}
.hero-replay[hidden]{display:none;}

@media (max-width:640px){
  .hero-canvas-wrap{aspect-ratio:506/900;}
  .hero-legend{max-width:170px;padding:8px 10px;}
  .hero-legend .shot-legend{display:block;}
}