:root {
  --court-green: #143D35;
  --chalk-ivory: #F7F1DF;
  --clay: #C8643B;
  --midnight: #111827;
  --score-butter: #F2C14E;
  --bleacher-teal: #3E7C78;
  --oxblood: #7A2E36;
  --maple: #D9B77E;
  --display: "Fraunces", serif;
  --body: "Bricolage Grotesque", sans-serif;
  --label: "Archivo", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--chalk-ivory);
  background: var(--midnight);
  font-family: var(--body);
  overflow-x: hidden;
}

.sideline-bench {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) rotate(-1deg);
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--oxblood) 82%, black 18%);
  border: 2px solid var(--chalk-ivory);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .45), inset 0 -5px 0 rgba(0,0,0,.18);
}

.sideline-bench a {
  color: var(--chalk-ivory);
  font-family: var(--label);
  font-size: clamp(.56rem, 1.1vw, .76rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.sideline-bench a:hover,
.sideline-bench a.active {
  color: var(--midnight);
  background: var(--score-butter);
  transform: translateY(-2px);
}

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 6vw, 84px);
}

.court-floor {
  background:
    radial-gradient(circle at 24% 18%, rgba(62,124,120,.32), transparent 28%),
    linear-gradient(115deg, rgba(247,241,223,.04), transparent 38%),
    repeating-linear-gradient(90deg, rgba(247,241,223,.025) 0 1px, transparent 1px 76px),
    var(--court-green);
}

.court-floor.maple {
  color: var(--midnight);
  background:
    repeating-linear-gradient(135deg, rgba(122,46,54,.09) 0 2px, transparent 2px 38px),
    linear-gradient(90deg, rgba(247,241,223,.18), transparent 40%, rgba(200,100,59,.16)),
    var(--maple);
}

.painted-line {
  position: absolute;
  background: var(--chalk-ivory);
  box-shadow: 0 0 0 1px rgba(247,241,223,.18), 0 0 24px rgba(247,241,223,.12);
  transform-origin: center;
  opacity: .92;
  transition: transform .7s cubic-bezier(.2,1.4,.28,1), filter .3s ease, height .3s ease, width .3s ease;
}

.painted-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chalk-ivory);
  transform: translate(6px, -5px);
  opacity: .34;
  transition: transform .55s cubic-bezier(.2,1.4,.28,1), opacity .3s ease;
}

.scene.in-view .painted-line::after,
.painted-line:hover::after { transform: translate(0,0); opacity: .2; }

.sideline.top, .sideline.bottom { height: 9px; width: 118vw; left: -8vw; }
.sideline.top { top: 13%; transform: rotate(-3deg); }
.sideline.bottom { bottom: 13%; transform: rotate(-3deg); }
.baseline.left, .baseline.right { width: 9px; height: 92vh; top: 4vh; }
.baseline.left { left: 9%; transform: rotate(-3deg); }
.baseline.right { right: 11%; transform: rotate(-3deg); }

.center-rug {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(650px, 76vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-5deg);
  border: clamp(10px, 1.5vw, 18px) solid var(--chalk-ivory);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(28px, 7vw, 90px);
  background: radial-gradient(circle, rgba(247,241,223,.12), rgba(20,61,53,.12) 58%, rgba(17,24,39,.22));
  box-shadow: inset 0 0 60px rgba(17,24,39,.28), 0 40px 90px rgba(17,24,39,.35);
}

h1, h2, h3 { font-family: var(--display); margin: 0; font-variation-settings: "SOFT" 85, "WONK" 1; }
h1 { font-size: clamp(4.1rem, 12vw, 11rem); line-height: .78; letter-spacing: -.08em; }
h2 { font-size: clamp(3rem, 7.5vw, 8rem); line-height: .86; letter-spacing: -.055em; }
h3 { font-size: clamp(1.8rem, 3vw, 3.4rem); line-height: .94; }
p { font-size: clamp(1.04rem, 1.65vw, 1.45rem); line-height: 1.42; margin: 0; }

.center-rug p { max-width: 460px; margin-top: 22px; }
.court-label, .sideline-note {
  font-family: var(--label);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: .74rem;
}

.strategy-magnet {
  position: absolute;
  z-index: 5;
  border: 2px solid rgba(17,24,39,.45);
  border-radius: 999px;
  padding: 13px 20px;
  font-family: var(--label);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--midnight);
  box-shadow: 0 14px 25px rgba(0,0,0,.28), inset 0 -4px 0 rgba(0,0,0,.14);
  cursor: pointer;
  transition: transform .4s cubic-bezier(.2,1.5,.34,1), box-shadow .25s ease;
}
.strategy-magnet:hover { transform: translate(var(--nudge-x, 0), var(--nudge-y, 0)) rotate(0deg) scale(1.08); box-shadow: 0 20px 34px rgba(0,0,0,.36); }
.magnet-clay { background: var(--clay); left: 14%; top: 66%; --nudge-x: 14px; --nudge-y: -8px; transform: rotate(-11deg); }
.magnet-butter { background: var(--score-butter); right: 16%; top: 28%; --nudge-x: -10px; --nudge-y: 12px; transform: rotate(8deg); }
.magnet-oxblood { background: var(--oxblood); color: var(--chalk-ivory); right: 24%; bottom: 18%; --nudge-x: -16px; --nudge-y: -11px; transform: rotate(-4deg); }

.parquet-panel { position: absolute; background: var(--maple); opacity: .18; border-radius: 22px; transform: rotate(-9deg); }
.panel-one { width: 28vw; height: 18vh; left: -6vw; top: 18vh; }
.panel-two { width: 34vw; height: 14vh; right: -10vw; bottom: 18vh; }
.ball-arc { position: absolute; right: 8%; top: 18%; width: 280px; height: 280px; border-top: 3px dashed var(--score-butter); border-radius: 50%; transform: rotate(-24deg); opacity: .7; }
.opening-note { position: absolute; left: 8%; bottom: 26%; max-width: 250px; transform: rotate(-4deg); }

.service { background: var(--court-green); }
.vertical-a, .vertical-b { width: 8px; height: 72vh; top: 15vh; }
.vertical-a { left: 31%; } .vertical-b { right: 27%; }
.horizontal-a, .horizontal-b { height: 8px; width: 74vw; left: 13vw; }
.horizontal-a { top: 29%; } .horizontal-b { bottom: 24%; }
.project-frame {
  position: absolute;
  border: 4px solid var(--court-green);
  background: rgba(247,241,223,.28);
  box-shadow: 18px 18px 0 rgba(20,61,53,.18);
  padding: clamp(22px, 4vw, 54px);
}
.frame-large { left: 11%; top: 19%; width: min(670px, 56vw); transform: rotate(-2deg); }
.frame-large p { max-width: 560px; margin-top: 24px; }
.frame-small { right: 9%; bottom: 17%; width: min(410px, 35vw); transform: rotate(4deg); }
.clipboard::before { content:""; position:absolute; top:-18px; left:42%; width:92px; height:28px; border-radius: 10px 10px 4px 4px; background: var(--oxblood); }
.felt-pennant { position: absolute; padding: 12px 42px 12px 18px; background: var(--oxblood); color: var(--chalk-ivory); font-family: var(--label); text-transform: uppercase; letter-spacing:.12em; font-weight:800; clip-path: polygon(0 0,100% 0,82% 50%,100% 100%,0 100%); transition: transform .35s ease; }
.felt-pennant:hover { transform: rotate(var(--r)) translateY(8px); }
.pennant-one { --r: -7deg; left: 58%; top: 14%; transform: rotate(-7deg); }
.pennant-two { --r: 6deg; left: 68%; top: 24%; background: var(--bleacher-teal); transform: rotate(6deg); }
.chair-silhouette { position:absolute; right: 8%; top: 48%; width: 150px; height: 90px; border-radius: 55% 45% 50% 50%; background: var(--clay); box-shadow: 12px 34px 0 -18px var(--midnight), -16px 42px 0 -20px var(--midnight); transform: rotate(-18deg); }

.bleacher-stack { position: absolute; left: 7%; right: 18%; bottom: 13%; display: grid; gap: 0; transform: perspective(900px) rotateX(8deg) rotateZ(-2deg); }
.bleacher-step {
  min-height: 142px;
  display: grid;
  grid-template-columns: 100px 1fr 1.4fr;
  align-items: center;
  gap: 28px;
  padding: 24px 34px;
  background: var(--bleacher-teal);
  border: 3px solid var(--chalk-ivory);
  box-shadow: 0 24px 0 rgba(17,24,39,.28);
  transform: translateX(var(--step, 0));
}
.bleacher-step:nth-child(2) { --step: 7%; background: var(--clay); }
.bleacher-step:nth-child(3) { --step: 14%; background: var(--oxblood); }
.bleacher-step span { font-family: var(--display); font-size: clamp(3rem, 7vw, 7rem); color: var(--score-butter); line-height: .8; }
.tubular-rail { position:absolute; right: 8%; top: 16%; width: 42vw; height: 24vh; border: 10px solid var(--chalk-ivory); border-bottom: 0; border-radius: 90px 90px 0 0; opacity: .8; }
.acrylic-board { position:absolute; right: 8%; top: 22%; width: min(420px, 34vw); height: 310px; background: rgba(247,241,223,.16); border: 2px solid rgba(247,241,223,.7); backdrop-filter: blur(4px); transform: rotate(7deg); }
.board-line.one { width: 70%; height: 5px; left: 15%; top: 45%; transform: rotate(28deg); }
.board-line.two { width: 5px; height: 70%; left: 52%; top: 15%; }
.strategy-dot { position:absolute; width:24px; height:24px; border-radius:50%; box-shadow:0 8px 14px rgba(0,0,0,.25); }
.dot-one { background:var(--score-butter); left:18%; top:22%; } .dot-two { background:var(--clay); right:20%; top:42%; } .dot-three { background:var(--oxblood); left:48%; bottom:18%; }

.scoreboard-shell { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(1.5deg); width:min(980px,86vw); padding:clamp(24px,5vw,62px); background:rgba(17,24,39,.78); border:6px solid var(--score-butter); box-shadow:0 36px 90px rgba(0,0,0,.45), inset 0 0 0 2px rgba(247,241,223,.22); text-align:center; }
.score-row { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2vw,28px); margin:28px 0; }
.score-tile { min-height:clamp(110px,18vw,210px); border:0; background:var(--chalk-ivory); color:var(--midnight); font-family:var(--display); font-size:clamp(2.2rem,7vw,7rem); font-weight:900; cursor:pointer; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,1.3,.3,1), background .3s ease; box-shadow: inset 0 -12px 0 rgba(0,0,0,.13), 0 16px 0 rgba(0,0,0,.24); }
.score-tile:hover, .score-tile.flipped { transform: rotateX(180deg); background: var(--score-butter); }
.score-tile span { display:inline-block; transition: transform .55s ease; }
.score-tile:hover span, .score-tile.flipped span { transform: rotateX(180deg); }
.whistle-shape { position:absolute; left:9%; bottom:18%; width:180px; height:86px; background:var(--score-butter); border-radius:60px 60px 60px 12px; transform:rotate(-18deg); box-shadow: inset -28px 0 0 rgba(200,100,59,.35); }
.whistle-shape::after { content:""; position:absolute; right:30px; top:19px; width:42px; height:42px; border-radius:50%; background:var(--court-green); }
.net-shadow { position:absolute; inset: 16% -10%; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(247,241,223,.08) 34px 37px), repeating-linear-gradient(0deg, transparent 0 34px, rgba(247,241,223,.08) 34px 37px); transform: rotate(-6deg); }

.materials-table { position:absolute; left:8%; top:16%; width:min(760px,78vw); padding:clamp(28px,5vw,68px); background:rgba(247,241,223,.38); border:4px solid var(--court-green); box-shadow: 22px 22px 0 rgba(122,46,54,.22); }
.materials-table p { max-width:650px; margin-top:24px; }
.swatch-row { display:flex; gap:14px; margin-top:34px; }
.swatch { width:68px; height:68px; border-radius:50%; border:3px solid var(--midnight); box-shadow:inset 0 -8px 0 rgba(0,0,0,.14); }
.swatch.green { background:var(--court-green); } .swatch.ivory { background:var(--chalk-ivory); } .swatch.clay { background:var(--clay); } .swatch.butter { background:var(--score-butter); } .swatch.oxblood { background:var(--oxblood); }
.converging-mark { position:absolute; right:7%; bottom:14%; width:min(520px,42vw); height:330px; color:var(--chalk-ivory); background:var(--court-green); border-radius:50%; display:grid; place-items:center; text-align:center; transform:rotate(-6deg); box-shadow:0 34px 70px rgba(17,24,39,.3); }
.converging-mark strong { z-index:2; font-family:var(--display); font-size:clamp(2rem,5vw,5.2rem); line-height:.85; max-width:360px; }
.converge-a { width:80%; height:8px; left:10%; top:48%; transform:rotate(22deg); }
.converge-b { width:80%; height:8px; left:10%; top:48%; transform:rotate(-22deg); }

.scene:not(.in-view) .bleacher-step { transform: translateX(calc(var(--step, 0px) - 9vw)); }
.scene:not(.in-view) .scoreboard-shell { filter: brightness(.78); }

@keyframes slow-rotate { to { transform: rotate(360deg); } }
.ball-arc { animation: slow-rotate 18s linear infinite; }

@media (max-width: 760px) {
  .sideline-bench { max-width: 94vw; overflow: auto; justify-content: flex-start; }
  .scene { padding: 28px; }
  .frame-large, .frame-small, .materials-table, .converging-mark { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 12vh 0; }
  .bleacher-stack { left: 24px; right: 24px; bottom: 17%; }
  .bleacher-step { grid-template-columns: 1fr; gap: 10px; }
  .acrylic-board, .tubular-rail, .chair-silhouette { display: none; }
  .score-row { grid-template-columns: 1fr; }
  .center-rug { width: 88vw; }
}