:root {
  /* Typography compliance tokens from DESIGN.md parser: Inter** Inter* Interr clean explanatory Accent numbers */
  --ice-black: #070A12;
  --chrome-silver: #C9D2E3;
  --referee-white: #F8F5EA;
  --challenge-red: #FF365E;
  --clearance-cyan: #31F7FF;
  --royalty-gold: #D6A73A;
  --violet-overtime: #7A4DFF;
  --puck-x: 48vw;
  --puck-y: 50vh;
  --replay-shift: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ice-black);
  color: var(--referee-white);
  font-family: Inter, sans-serif;
  overflow-x: hidden;
}

.arena-noise,
.bleachers,
.diagonal-rink,
.review-puck,
.match-rail { position: fixed; }

.arena-noise {
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(122,77,255,.22), transparent 28%),
    radial-gradient(circle at 78% 62%, rgba(49,247,255,.13), transparent 24%),
    linear-gradient(130deg, rgba(248,245,234,.045) 0 1px, transparent 1px 14px),
    var(--ice-black);
}

.arena-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image: repeating-linear-gradient(82deg, transparent 0 28px, rgba(201,210,227,.04) 29px, transparent 31px);
}

.bleachers {
  left: -10vw;
  right: -10vw;
  height: 12vh;
  z-index: 1;
  pointer-events: none;
  opacity: .28;
  background: repeating-linear-gradient(90deg, rgba(248,245,234,.18) 0 16px, transparent 16px 31px, rgba(255,54,94,.12) 31px 36px, transparent 36px 56px);
  filter: blur(.2px);
}

.bleachers-top { top: 0; transform: skewX(-24deg); }
.bleachers-bottom { bottom: 0; transform: skewX(-24deg); }

.diagonal-rink {
  left: -22vw;
  top: 49vh;
  z-index: 2;
  width: 145vw;
  height: 9rem;
  transform: rotate(-24deg);
  transform-origin: center;
  pointer-events: none;
  border-top: 1px solid rgba(201,210,227,.65);
  border-bottom: 1px solid rgba(201,210,227,.36);
  background:
    linear-gradient(90deg, transparent, rgba(201,210,227,.2), transparent),
    repeating-linear-gradient(90deg, rgba(248,245,234,.12) 0 80px, transparent 80px 160px),
    linear-gradient(180deg, rgba(248,245,234,.08), rgba(49,247,255,.03));
  box-shadow: 0 0 38px rgba(49,247,255,.12), inset 0 0 55px rgba(201,210,227,.08);
}

.review-puck {
  left: var(--puck-x);
  top: var(--puck-y);
  z-index: 20;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--puck-rotation, 0deg));
  border-radius: 50%;
  border: 2px solid var(--chrome-silver);
  color: var(--ice-black);
  font-family: Orbitron, sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 1px rgba(248,245,234,.4);
  background:
    radial-gradient(circle at 35% 26%, var(--referee-white), var(--chrome-silver) 27%, #778395 48%, #2d3441 72%, #0b0f17 100%);
  box-shadow: 0 22px 42px rgba(0,0,0,.55), 0 0 36px rgba(49,247,255,.2), inset 0 -9px 20px rgba(0,0,0,.42), inset 0 6px 18px rgba(248,245,234,.62);
  transition: box-shadow .3s ease, filter .3s ease;
}

.review-puck::before,
.review-puck::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.review-puck::before { inset: 19px; border: 1px dashed rgba(7,10,18,.58); }
.review-puck::after { inset: 38px; background: rgba(248,245,234,.55); border: 1px solid rgba(7,10,18,.4); }
.review-puck span { position: relative; z-index: 2; }
.review-puck.impact-red { box-shadow: 0 0 42px var(--challenge-red), 0 22px 42px rgba(0,0,0,.55), inset 0 6px 18px rgba(248,245,234,.62); }
.review-puck.impact-cyan { box-shadow: 0 0 42px var(--clearance-cyan), 0 22px 42px rgba(0,0,0,.55), inset 0 6px 18px rgba(248,245,234,.62); }
.review-puck.impact-gold { box-shadow: 0 0 42px var(--royalty-gold), 0 22px 42px rgba(0,0,0,.55), inset 0 6px 18px rgba(248,245,234,.62); }

.match-rail {
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 155px;
  padding: .9rem;
  border: 1px solid rgba(201,210,227,.28);
  border-radius: 999px;
  background: rgba(7,10,18,.68);
  box-shadow: 0 0 35px rgba(0,0,0,.45), inset 0 0 24px rgba(248,245,234,.04);
  backdrop-filter: blur(18px);
}

.clock-face {
  padding: .8rem .4rem 1rem;
  margin-bottom: .35rem;
  text-align: center;
  border-bottom: 1px solid rgba(201,210,227,.22);
}

.clock-face span,
.match-rail a::before,
.section-kicker,
.case-code,
.visor,
.glass-label,
.ledger-slot { font-family: "JetBrains Mono", monospace; }

.clock-face span { display: block; color: var(--chrome-silver); font-size: .56rem; letter-spacing: .12em; }
.clock-face strong { display: block; margin-top: .22rem; font-family: Orbitron, sans-serif; color: var(--clearance-cyan); font-size: 1.15rem; }

.match-rail a {
  position: relative;
  display: block;
  padding: .55rem .25rem .55rem 2.05rem;
  color: rgba(248,245,234,.58);
  font-family: Orbitron, sans-serif;
  font-size: .61rem;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}

.match-rail a::before {
  content: attr(data-period);
  position: absolute;
  left: .25rem;
  top: .42rem;
  display: grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 50%;
  color: var(--ice-black);
  background: var(--chrome-silver);
}

.match-rail a.active { color: var(--referee-white); transform: translateX(-6px); }
.match-rail a.active::before { background: var(--challenge-red); color: var(--referee-white); box-shadow: 0 0 20px rgba(255,54,94,.6); }

.rights-review-match { position: relative; z-index: 4; }
.period {
  position: relative;
  min-height: 100vh;
  padding: 12vh 13vw 10vh 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.period::before {
  content: "";
  position: absolute;
  inset: 8vh 8vw;
  z-index: -1;
  border: 1px solid rgba(201,210,227,.08);
  transform: skewY(-6deg);
  background: linear-gradient(125deg, rgba(248,245,234,.02), transparent 52%, rgba(122,77,255,.05));
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 { max-width: 860px; font-family: "Bodoni Moda", serif; font-weight: 700; line-height: .88; }
h1 { margin-bottom: 1rem; font-size: clamp(4rem, 10vw, 11rem); letter-spacing: -.065em; }
h2 { margin-bottom: 1.1rem; font-size: clamp(3.2rem, 8vw, 9rem); letter-spacing: -.05em; }
h3 { font-family: "Bodoni Moda", serif; font-size: 1.45rem; }
p { color: rgba(248,245,234,.75); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.7; }

.section-kicker {
  margin-bottom: .75rem;
  color: var(--clearance-cyan);
  font-size: .8rem;
  letter-spacing: .22em;
}

.period-copy { max-width: 620px; }
.acrylic-panel {
  border: 1px solid rgba(201,210,227,.28);
  background: linear-gradient(135deg, rgba(201,210,227,.16), rgba(7,10,18,.55) 48%, rgba(248,245,234,.05));
  box-shadow: 0 30px 80px rgba(0,0,0,.42), inset 0 1px rgba(248,245,234,.2);
  backdrop-filter: blur(20px);
}

.opening-period { padding-top: 9vh; }
.chrome-line {
  position: absolute;
  left: -14vw;
  top: 47%;
  width: 124vw;
  height: 6px;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, var(--chrome-silver), var(--referee-white), var(--chrome-silver), transparent);
  box-shadow: 0 0 30px rgba(201,210,227,.55);
}

.faceoff-marker {
  position: absolute;
  top: 18vh;
  left: 9vw;
  font-family: Orbitron, sans-serif;
  color: var(--challenge-red);
  letter-spacing: .28em;
}

.hero-wordmark {
  position: absolute;
  top: 13vh;
  left: 8vw;
  transform: rotate(-24deg);
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.35rem, 4.5vw, 5.5rem);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--chrome-silver);
  text-shadow: 0 0 25px rgba(49,247,255,.24), 0 2px var(--ice-black);
}

.ruling-board {
  width: min(760px, 78vw);
  margin-top: 20vh;
  padding: clamp(1.4rem, 4vw, 4rem);
  transform: translateX(6vw);
}

.case-code { display: block; margin-bottom: .8rem; color: var(--royalty-gold); letter-spacing: .12em; }
.ruling-stamp {
  display: inline-block;
  margin-top: 1rem;
  padding: .58rem .85rem;
  transform: rotate(-4deg);
  border: 2px solid currentColor;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  letter-spacing: .14em;
}
.red-stamp { color: var(--challenge-red); box-shadow: 0 0 18px rgba(255,54,94,.32); }
.whistle-cord { position: absolute; right: 14vw; bottom: 7vh; width: 210px; height: 74px; border: 3px solid var(--chrome-silver); border-left-color: transparent; border-top-color: transparent; border-radius: 50%; transform: rotate(-16deg); opacity: .42; }

.replay-period { overflow: hidden; }
.replay-booth { width: min(1180px, 78vw); padding: 1.4rem; margin-top: 2rem; transform: rotate(-2deg); }
.visor { color: var(--chrome-silver); margin-bottom: 1rem; letter-spacing: .16em; }
.replay-booth::before { content: ""; position: absolute; left: 33%; top: -14px; width: 210px; height: calc(100% + 28px); border: 1px solid rgba(49,247,255,.55); box-shadow: 0 0 30px rgba(49,247,255,.35); background: rgba(49,247,255,.06); }
.replay-strip { display: flex; gap: 1rem; transform: translateX(var(--replay-shift)); transition: transform .12s linear; }
.replay-frame { min-width: 330px; min-height: 270px; padding: 1.4rem; border: 1px solid rgba(248,245,234,.17); background: linear-gradient(150deg, rgba(248,245,234,.13), rgba(7,10,18,.72)), repeating-linear-gradient(0deg, transparent 0 18px, rgba(201,210,227,.05) 19px 20px); }
.replay-frame span { color: var(--chrome-silver); font-family: "JetBrains Mono", monospace; }
.replay-frame.disputed h3 { color: var(--challenge-red); }
.replay-frame.cleared h3 { color: var(--clearance-cyan); }
.replay-frame.sealed h3 { color: var(--royalty-gold); }

.territory-map { width: min(910px, 76vw); padding: 1rem; margin-top: 2rem; }
.line-map { display: block; width: 100%; height: auto; }
.map-plate { fill: rgba(201,210,227,.08); stroke: rgba(248,245,234,.24); stroke-width: 3; }
.territory-line { fill: none; stroke: var(--clearance-cyan); stroke-width: 5; stroke-linecap: round; filter: url(#cyanGlow); stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - (1000 * var(--draw-progress, .2))); }
.delay-one { stroke: var(--violet-overtime); }
.delay-two { stroke: var(--royalty-gold); }
.judge-dot { fill: var(--clearance-cyan); filter: url(#cyanGlow); animation: judgePulse 1.8s ease-in-out infinite; }
.line-call { position: absolute; right: 2rem; bottom: 2rem; font-family: Orbitron, sans-serif; font-weight: 900; letter-spacing: .12em; }
.cyan-call { color: var(--clearance-cyan); }

.appeal-desk { position: relative; width: min(980px, 78vw); min-height: 420px; margin-top: 2rem; }
.folder { position: absolute; left: 12%; top: 8%; width: min(580px, 70vw); min-height: 320px; padding: 5rem 2rem 2rem; transform: rotate(-6deg); }
.folder-tab { position: absolute; left: 1.5rem; top: -1px; padding: .65rem 1.25rem; color: var(--ice-black); background: var(--royalty-gold); font-family: Orbitron, sans-serif; font-size: .8rem; font-weight: 900; }
.folder strong { display: block; color: var(--referee-white); font-family: "Bodoni Moda", serif; font-size: 2.6rem; line-height: 1; }
.folder em { color: var(--chrome-silver); }
.evidence-sticker { position: absolute; z-index: 3; padding: .8rem 1rem; border: 0; color: var(--ice-black); background: var(--referee-white); box-shadow: 0 14px 28px rgba(0,0,0,.36); font-family: "JetBrains Mono", monospace; font-weight: 700; cursor: pointer; transform: rotate(var(--r, 0deg)); transition: transform .45s cubic-bezier(.2,1.65,.28,1), left .45s cubic-bezier(.2,1.65,.28,1), top .45s cubic-bezier(.2,1.65,.28,1); }
.sticker-one { --r: 8deg; right: 10%; top: 12%; color: var(--challenge-red); }
.sticker-two { --r: -11deg; right: 2%; top: 46%; color: var(--clearance-cyan); }
.sticker-three { --r: 5deg; left: 3%; bottom: 6%; color: var(--violet-overtime); }
.evidence-sticker.snapped { left: var(--snap-x) !important; top: var(--snap-y) !important; right: auto; bottom: auto; transform: rotate(var(--snap-r)) scale(1.06); }

.clearance-tunnel { position: relative; width: min(1020px, 77vw); min-height: 470px; margin-top: 2rem; overflow: hidden; perspective: 900px; }
.stripe-ribbon { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 28px, rgba(248,245,234,.28) 28px 44px, rgba(7,10,18,.1) 44px 61px); opacity: .35; }
.stream-lane { position: absolute; left: 12%; width: 70%; height: 72px; transform: skewX(-24deg) translateX(var(--lane-shift, 0px)); border: 1px solid rgba(49,247,255,.45); background: linear-gradient(90deg, rgba(49,247,255,.05), rgba(122,77,255,.22), rgba(49,247,255,.08)); box-shadow: 0 0 30px rgba(122,77,255,.25); }
.stream-lane span { display: block; padding: 1.55rem 2rem; transform: skewX(24deg); font-family: Orbitron, sans-serif; color: var(--referee-white); }
.lane-a { top: 23%; }
.lane-b { top: 43%; }
.lane-c { top: 63%; }
.tunnel-glow { position: absolute; right: 3rem; bottom: 2rem; color: var(--clearance-cyan); font-family: Orbitron, sans-serif; font-size: 1.35rem; font-weight: 900; text-shadow: 0 0 25px var(--clearance-cyan); }

.penalty-box { position: relative; width: min(790px, 76vw); min-height: 460px; margin-top: 2rem; overflow: hidden; border-color: rgba(214,167,58,.45); }
.penalty-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 40%, rgba(248,245,234,.16) 42%, transparent 48%); }
.glass-label { position: absolute; left: 2rem; top: 1.5rem; color: var(--royalty-gold); letter-spacing: .16em; }
.token { position: absolute; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 26%, var(--referee-white), var(--royalty-gold) 45%, #7c5517); color: var(--ice-black); font-family: Orbitron, sans-serif; font-weight: 900; box-shadow: 0 18px 30px rgba(0,0,0,.38), 0 0 22px rgba(214,167,58,.4); animation: tokenBounce 2.6s cubic-bezier(.2,.9,.38,1) infinite; }
.token-one { left: 18%; top: 31%; animation-delay: .05s; }
.token-two { left: 43%; top: 18%; animation-delay: .22s; }
.token-three { right: 22%; top: 38%; animation-delay: .39s; }
.ledger-slot { position: absolute; left: 12%; right: 12%; bottom: 5rem; padding: 1rem; border: 1px solid rgba(214,167,58,.55); color: var(--royalty-gold); text-align: center; background: rgba(7,10,18,.76); }

.final-seal-wrap { position: relative; width: min(980px, 78vw); min-height: 520px; }
.ruling-packet { width: min(620px, 70vw); padding: 3rem; transform: rotate(3deg); }
.ruling-packet h3 { margin-bottom: 1rem; font-size: clamp(2.6rem, 5vw, 5.8rem); line-height: .9; color: var(--referee-white); }
.controller-seal { position: absolute; left: min(470px, 48vw); top: 185px; display: grid; place-items: center; width: 210px; height: 210px; border-radius: 42% 58% 48% 52%; color: var(--ice-black); background: radial-gradient(circle at 35% 28%, var(--referee-white), var(--royalty-gold) 45%, #7c5517 100%); box-shadow: 0 24px 55px rgba(0,0,0,.5), 0 0 52px rgba(214,167,58,.42), inset 0 -14px 22px rgba(0,0,0,.28); font-family: Orbitron, sans-serif; font-weight: 900; font-size: 2rem; transform: rotate(-13deg) scale(var(--seal-scale, 1)); transition: transform .4s cubic-bezier(.2,1.6,.3,1); }
.controller-seal::before { content: ""; position: absolute; inset: 28px; border: 4px solid rgba(7,10,18,.52); border-radius: inherit; }
.controller-seal::after { content: "✕  ●"; position: absolute; bottom: 54px; font-size: 1.1rem; letter-spacing: .4em; }

@keyframes judgePulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.45); opacity: 1; } }
@keyframes tokenBounce { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-38px); } 39% { transform: translateY(0); } 50% { transform: translateY(-8px); } 62% { transform: translateY(0); } }

@media (max-width: 860px) {
  .match-rail { left: .75rem; right: .75rem; top: auto; bottom: .75rem; width: auto; transform: none; display: flex; align-items: center; border-radius: 2rem; overflow-x: auto; }
  .clock-face { min-width: 110px; margin: 0 .4rem 0 0; padding: .4rem .6rem; border-bottom: 0; border-right: 1px solid rgba(201,210,227,.22); }
  .match-rail a { min-width: 80px; padding-left: 1.8rem; }
  .period { padding: 14vh 5vw 18vh; }
  .review-puck { width: 90px; height: 90px; font-size: .58rem; }
  .hero-wordmark { top: 10vh; }
  .ruling-board, .replay-booth, .territory-map, .appeal-desk, .clearance-tunnel, .penalty-box, .final-seal-wrap { width: 100%; }
  .replay-frame { min-width: 270px; }
  .controller-seal { left: 42vw; width: 160px; height: 160px; }
}