.replay-hero{padding-bottom:48px}.replay-section{padding-top:54px}.replay-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.72fr);gap:32px;align-items:start}.replay-stage{background:#07182c;border:1px solid #193b59;box-shadow:var(--shadow)}.stage-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 18px;color:white;font-family:Arial,Helvetica,sans-serif}.stage-toolbar>div{display:flex;align-items:center;gap:12px}.scenario-name{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#cbd6df}.stage-actions{display:flex;gap:8px}.mini-btn{border:1px solid #5b7184;background:transparent;color:white;padding:8px 11px;font:700 .65rem Arial;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.mini-btn:disabled{opacity:.35;cursor:not-allowed}.canvas-shell{background:#07182c;padding:0 14px 14px}.canvas-shell canvas{display:block;width:100%;height:auto;background:#145c43;border:14px solid #5e351c;border-radius:16px;box-shadow:inset 0 0 0 5px #2b170c}.result-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #29465e;color:white}.result-strip>div{padding:16px 18px;border-right:1px solid #29465e}.result-strip>div:last-child{border-right:0}.result-strip small{display:block;font:700 .62rem Arial;text-transform:uppercase;letter-spacing:.1em;color:#93a9ba}.result-strip strong{display:block;margin-top:4px;font-size:1rem}.replay-controls{border:1px solid var(--line);background:white}.control-block{padding:25px;border-bottom:1px solid var(--line)}.control-block:last-child{border-bottom:0}.control-block h2{font-size:2.2rem;margin:8px 0 18px}.control-block label{display:flex;justify-content:space-between;gap:15px;margin:16px 0 7px;font:700 .72rem Arial;text-transform:uppercase;letter-spacing:.1em}.control-block output{color:var(--blue2)}.control-block input[type=range]{width:100%;accent-color:var(--blue)}.control-block select{width:100%;padding:12px;border:1px solid #aebdca;background:#fff;font:1rem Georgia}.training-ball-control{position:relative;width:min(100%,290px);margin:12px auto}.training-ball-control img{display:block;width:100%}.contact-point{position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.9);background:rgba(255,255,255,.18);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;transform:translate(-50%,-50%)}.contact-point.active{outline:4px solid #07182c;outline-offset:3px}.contact-point.follow{left:50%;top:26%}.contact-point.right{left:72%;top:50%}.contact-point.draw{left:50%;top:73%}.contact-point.left{left:28%;top:50%}.contact-point.center{left:50%;top:50%}.control-readout{text-align:center;margin:10px 0 0}.launch-shot{width:100%;text-align:center;cursor:pointer}.fine-print{font-size:.78rem;color:#5b6d7d;line-height:1.5;margin:14px 0 0}.action-block{background:var(--mist)}
@media(max-width:1020px){.replay-layout{grid-template-columns:1fr}.replay-controls{display:grid;grid-template-columns:1fr 1fr}.control-block{border-right:1px solid var(--line)}.action-block{grid-column:1/-1}.training-ball-control{max-width:245px}}
@media(max-width:680px){.stage-toolbar{align-items:flex-start;flex-direction:column}.stage-toolbar>div{width:100%;justify-content:space-between}.result-strip{grid-template-columns:1fr}.result-strip>div{border-right:0;border-bottom:1px solid #29465e}.result-strip>div:last-child{border-bottom:0}.replay-controls{display:block}.control-block{border-right:0}.canvas-shell{padding:0 7px 7px}.canvas-shell canvas{border-width:8px;border-radius:10px}}

/* ── SHOT INTRODUCTION SYSTEM ─────────────────────────────────────────── */

/* Tab strip — five shot selectors */
.intro-tab-strip {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid rgba(212,175,55,0.2);
  scrollbar-width: thin;
}
.intro-tab {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(212,175,55,0.12);
  cursor: pointer;
  transition: background 0.2s;
  color: rgba(243,240,232,0.55);
}
.intro-tab:last-child { border-right: 0; }
.intro-tab:hover { background: rgba(212,175,55,0.06); color: rgba(243,240,232,0.85); }
.intro-tab.active {
  background: rgba(212,175,55,0.12);
  color: #f3f0e8;
  border-bottom: 2px solid #D4AF37;
}
.intro-tab-atlas {
  font: bold 11px Arial;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D4AF37;
}
.intro-tab-name {
  font: italic 13px Georgia;
  text-align: center;
  line-height: 1.2;
}
.intro-tab-level {
  font: 10px Arial;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* Play/Skip buttons */
.intro-actions {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
.intro-btn {
  padding: 10px 22px;
  border: 1px solid rgba(212,175,55,0.5);
  background: transparent;
  color: #D4AF37;
  font: 700 11px Arial;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.intro-btn.primary {
  background: rgba(212,175,55,0.15);
}
.intro-btn:hover {
  background: rgba(212,175,55,0.25);
  border-color: #D4AF37;
  color: #f3f0e8;
}

/* Overlay text panel — appears on canvas during animation */
.intro-overlay {
  animation: fadeInUp 0.4s ease;
}
.intro-overlay-inner {
  background: rgba(7,24,44,0.9);
  border: 1px solid rgba(212,175,55,0.35);
  border-left: 3px solid #D4AF37;
  padding: 14px 18px;
  max-width: 520px;
  backdrop-filter: blur(4px);
}
.intro-overlay-atlas {
  font: bold 10px Arial;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D4AF37;
  margin-bottom: 5px;
}
.intro-overlay-text {
  font: italic bold 18px Georgia;
  color: #f3f0e8;
  line-height: 1.3;
  margin-bottom: 4px;
}
.intro-overlay-sub {
  font: 12px Arial;
  color: rgba(243,240,232,0.65);
  line-height: 1.5;
}
.intro-overlay-cta {
  margin-top: 8px;
  font: bold 11px Arial;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4AF37;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Section header above intro */
#intro-wrap {
  margin-bottom: 0;
}
#intro-wrap::before {
  content: 'SHOT INTRODUCTION · WAVE 001 PATTERNS';
  display: block;
  padding: 12px 18px 0;
  font: bold 10px Arial;
  letter-spacing: 0.22em;
  color: rgba(212,175,55,0.6);
}

/* Divider between intro and replay */
.replay-section {
  padding-top: 36px !important;
  border-top: 2px solid rgba(212,175,55,0.15);
  margin-top: 8px;
}
.replay-section::before {
  content: 'NOW YOU TRY IT · INTERACTIVE REPLAY LAB';
  display: block;
  text-align: center;
  font: bold 10px Arial;
  letter-spacing: 0.22em;
  color: rgba(212,175,55,0.5);
  margin-bottom: 28px;
}

@media (max-width: 680px) {
  .intro-tab { min-width: 100px; padding: 10px 6px; }
  .intro-tab-name { font-size: 11px; }
  .intro-actions { flex-direction: column; }
  .intro-btn { width: 100%; text-align: center; }
  .intro-overlay-text { font-size: 15px; }
}

/* ── BSB INTRO SYSTEM v2.0 ─────────────────────────────────────────── */
#bsb-intro-wrap {
  background: #07182c;
  border-bottom: 2px solid rgba(212,175,55,0.25);
}
#bsb-intro-wrap::before {
  content: 'WAVE 001 PATTERN INTRODUCTION · MIRROR SYSTEM · DR. DAVE ALCIATORE / CSU';
  display: block;
  padding: 10px 18px 0;
  font: bold 9px Arial;
  letter-spacing: 0.22em;
  color: rgba(212,175,55,0.5);
}
.bsb-tab-strip { display:flex; overflow-x:auto; border-bottom:1px solid rgba(212,175,55,.18); }
.bsb-tab {
  flex:1; min-width:130px; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:12px 8px;
  background:transparent; border:none;
  border-right:1px solid rgba(212,175,55,.1);
  cursor:pointer; color:rgba(243,240,232,.5); transition:background .2s;
}
.bsb-tab:last-child{border-right:0}
.bsb-tab:hover{background:rgba(212,175,55,.07);color:rgba(243,240,232,.85)}
.bsb-tab.active{background:rgba(212,175,55,.13);color:#f3f0e8;border-bottom:2px solid #D4AF37}
.bsb-tab-id{font:bold 11px Arial;letter-spacing:.12em;text-transform:uppercase;color:#D4AF37}
.bsb-tab-name{font:italic 12px Georgia;text-align:center;line-height:1.2}
.bsb-tab-lvl{font:10px Arial;letter-spacing:.1em;text-transform:uppercase;opacity:.45}
#bsb-intro-desc{
  padding:10px 18px;margin:0;
  font:italic 13px Georgia;color:rgba(243,240,232,.65);
  border-bottom:1px solid rgba(212,175,55,.12);line-height:1.5;
}
.bsb-intro-acts{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid rgba(212,175,55,.12);
}
.bsb-btn{
  padding:9px 20px;border:1px solid rgba(212,175,55,.5);
  background:transparent;color:#D4AF37;
  font:bold 11px Arial;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s;
}
.bsb-btn.primary{background:rgba(212,175,55,.15)}
.bsb-btn:hover{background:rgba(212,175,55,.25);border-color:#D4AF37;color:#f3f0e8}
.bsb-physics-note{
  font:10px Arial;color:rgba(212,175,55,.4);letter-spacing:.08em;margin-left:auto;
}
.bsb-canvas-shell{position:relative;padding:0 14px 14px}
#bsb-overlay-host{
  position:absolute;bottom:28px;left:28px;right:28px;
  pointer-events:none;z-index:10;
}
.bsb-overlay{animation:bsbFadeUp .4s ease}
.bsb-overlay{
  background:rgba(7,24,44,.9);
  border:1px solid rgba(212,175,55,.35);border-left:3px solid #D4AF37;
  padding:13px 16px;max-width:500px;
  backdrop-filter:blur(4px);
}
.bsb-ov-atlas{font:bold 10px Arial;letter-spacing:.18em;text-transform:uppercase;color:#D4AF37;margin-bottom:4px}
.bsb-ov-text{font:italic bold 17px Georgia;color:#f3f0e8;line-height:1.3;margin-bottom:3px}
.bsb-ov-sub{font:12px Arial;color:rgba(243,240,232,.65);line-height:1.5}
.bsb-ov-go{margin-top:7px;font:bold 11px Arial;letter-spacing:.14em;text-transform:uppercase;color:#D4AF37}
@keyframes bsbFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.replay-section{padding-top:32px!important;border-top:2px solid rgba(212,175,55,.15)}
.replay-section::before{
  content:'YOUR TURN · INTERACTIVE REPLAY LAB';
  display:block;text-align:center;
  font:bold 9px Arial;letter-spacing:.22em;color:rgba(212,175,55,.45);margin-bottom:24px;
}
@media(max-width:680px){
  .bsb-tab{min-width:90px;padding:9px 5px}
  .bsb-tab-name{font-size:10px}
  .bsb-intro-acts{flex-direction:column}
  .bsb-btn{width:100%;text-align:center}
  .bsb-physics-note{margin-left:0}
}