/* AGN Interactive Article Framework v20.16 */
.agn-interactive{
  margin:32px 0;
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.agn-interactive-head{padding:22px 22px 12px}
.agn-interactive-head .eyebrow{
  font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0b4d2f
}
.agn-interactive-head h2{margin:7px 0 8px;font-size:clamp(1.6rem,4vw,2.35rem)}
.agn-interactive-head p{margin:0;line-height:1.55;max-width:760px}
.punt-presets{display:flex;gap:8px;flex-wrap:wrap;padding:0 22px 16px}
.punt-presets button{
  border:1px solid rgba(0,0,0,.18);
  background:#f5f4ef;
  border-radius:999px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
}
.punt-presets button.active{background:#0b4d2f;color:#fff;border-color:#0b4d2f}
.punt-stage-wrap{padding:0 22px 22px}
.punt-stage{
  position:relative;
  min-height:300px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(#d8ecff 0 52%, #1f7a3e 52% 100%);
}
.punt-stage:before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:48%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 10%),
    repeating-linear-gradient(0deg,transparent 0 41px,rgba(255,255,255,.16) 41px 43px);
}
.punt-ball{
  position:absolute;
  left:8%;
  top:58%;
  font-size:30px;
  transform:translate(-50%,-50%) rotate(-14deg);
  z-index:3;
}
.punt-cover{
  position:absolute;
  left:7%;
  bottom:10%;
  width:34px;height:34px;border-radius:50%;
  background:#fff;
  border:4px solid #0b4d2f;
  z-index:2;
  transform:translateX(-50%);
}
.punt-returner{
  position:absolute;
  right:7%;
  bottom:10%;
  width:34px;height:34px;border-radius:50%;
  background:#111;
  border:4px solid #fff;
  z-index:2;
}
.punt-label{
  position:absolute;
  font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,.9);padding:5px 7px;border-radius:6px;z-index:4
}
.punt-label.cover{left:3%;bottom:2%}
.punt-label.returner{right:2%;bottom:2%}
.punt-timer{
  position:absolute;right:14px;top:14px;
  background:rgba(0,0,0,.78);color:#fff;border-radius:10px;padding:8px 10px;
  font-size:1.15rem;font-weight:900;z-index:4
}
.punt-readout{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-top:12px
}
.punt-readout>div{background:#f5f4ef;border-radius:12px;padding:13px}
.punt-readout span{display:block;font-size:.72rem;font-weight:900;text-transform:uppercase;opacity:.62}
.punt-readout strong{display:block;font-size:1.4rem;margin-top:3px}
.punt-control{margin-top:16px}
.punt-control label{font-weight:800}
.punt-control input[type=range]{width:100%;margin-top:8px}
.punt-note{font-size:.86rem;line-height:1.45;opacity:.74;margin-top:10px}
.agn-explainer-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0
}
.agn-explainer-card{background:#f5f4ef;border-radius:14px;padding:16px}
.agn-explainer-card span{font-size:.75rem;font-weight:900;text-transform:uppercase;opacity:.6}
.agn-explainer-card strong{display:block;font-size:1.65rem;margin:5px 0}
@media(max-width:720px){
  .punt-stage{min-height:255px}
  .punt-readout,.agn-explainer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .punt-ball,.punt-cover{transition:none!important;animation:none!important}
}

.punt-replay{
  margin:12px 0 0;
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background:#0b4d2f;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.punt-replay:hover{transform:translateY(-1px)}
.punt-help{margin-top:8px!important;font-size:.9rem;opacity:.75}

/* Punt Lab v2 */
.punt-lab-v2{background:#fff}
.punt-v2-controls{padding:0 22px 18px;display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.punt-v2-controls label{grid-column:1/-1;font-weight:800}
.punt-v2-controls input[type=range]{width:100%}
.punt-run-v2{border:0;border-radius:999px;padding:11px 16px;background:#0b4d2f;color:#fff;font-weight:900;cursor:pointer;min-width:126px}
.punt-v2-field-wrap{padding:0 22px}
.punt-v2-field{display:block;width:100%;height:auto;border-radius:18px;overflow:hidden}
.punt-v2-sky{fill:#d8ecff}
.punt-v2-turf{fill:#1f7a3e}
.punt-v2-yardlines line{stroke:rgba(255,255,255,.28);stroke-width:2}
.punt-v2-arc{fill:none;stroke:rgba(255,255,255,.7);stroke-width:3;stroke-dasharray:10 10}
.punt-v2-punter,.punt-v2-returner,.punt-v2-runner{stroke:#fff;stroke-width:6;stroke-linecap:round;fill:#0b4d2f}
.punt-v2-returner{fill:#111}
.punt-v2-runner{fill:#f4c542;stroke:#0b4d2f}
.punt-v2-label{font:900 17px Arial,Helvetica,sans-serif;fill:#fff;letter-spacing:1px}
.punt-v2-ball ellipse{fill:#7a3e16;stroke:#fff;stroke-width:2}
.punt-v2-ball line{stroke:#fff;stroke-width:2}
.punt-v2-clock rect{fill:rgba(0,0,0,.8)}
.punt-v2-clock text:first-of-type{font:800 13px Arial,Helvetica,sans-serif;fill:#fff;letter-spacing:1px}
#puntClockV2{font:900 24px Arial,Helvetica,sans-serif;fill:#fff}
.punt-v2-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 22px 0}
.punt-v2-result>div{background:#f5f4ef;border-radius:12px;padding:14px}
.punt-v2-result span{display:block;font-size:.72rem;font-weight:900;text-transform:uppercase;opacity:.62}
.punt-v2-result strong{display:block;font-size:1.45rem;margin-top:4px}
.punt-v2-explanation{margin:14px 22px 22px;padding:15px 16px;border-left:4px solid #0b4d2f;background:#f7faf7}
.punt-v2-explanation strong{display:block;line-height:1.45}
.punt-v2-explanation p{margin:7px 0 0;font-size:.88rem;line-height:1.5;opacity:.74}
@media(max-width:720px){
  .punt-v2-controls{grid-template-columns:1fr}
  .punt-run-v2{width:100%}
  .punt-v2-result{grid-template-columns:1fr}
  .punt-v2-label{font-size:14px}
}