:root {
  color-scheme: dark;
  --gold: #d9ad4c;
  --gold-bright: #ffe29a;
  --ivory: #fff8e8;
  --steel: #182632;
  --steel-light: #2f4556;
  --ink: #05090d;
  --cyan: #55d4ec;
  --red: #b64a35;
  --muted: #a7b5c1;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  font-family: "Trebuchet MS", Inter, ui-sans-serif, system-ui, sans-serif;
}

.academy-backdrop,
#stage,
.rain,
.scanlines,
.vignette,
.blackout,
.hud-corners,
.energy-gate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.academy-backdrop {
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(3, 7, 11, .28), rgba(3, 7, 11, .2) 42%, rgba(2, 5, 8, .88) 100%),
    url("/assets/academy-gate.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(.8) contrast(1.1) brightness(.74);
  transform: scale(1.015);
  animation: academy-breathe 14s ease-in-out infinite alternate;
}

#stage { z-index: 1; pointer-events: none; }

.energy-gate {
  z-index: 1;
  left: 50%;
  top: 47%;
  width: min(34vw, 560px);
  height: min(54vh, 650px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .58;
  background:
    radial-gradient(ellipse at center, rgba(87, 211, 236, .18), transparent 48%),
    url("/assets/vfx-circle.png") center / min(23vw, 360px) auto no-repeat;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 28px rgba(67, 196, 225, .28));
}

.energy-gate i {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 2px;
  height: 68%;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, transparent, rgba(123, 229, 255, .55), rgba(255, 229, 157, .15));
  box-shadow: 0 0 22px rgba(76, 211, 240, .7);
  animation: gate-current 3.8s ease-in-out infinite;
}

.energy-gate i:nth-child(2) { transform: translateX(-70px) rotate(-4deg); animation-delay: -1.4s; }
.energy-gate i:nth-child(3) { transform: translateX(70px) rotate(4deg); animation-delay: -2.6s; }

.rain {
  z-index: 2;
  pointer-events: none;
  opacity: .17;
  background-image: repeating-linear-gradient(104deg, transparent 0 22px, rgba(178, 222, 235, .16) 23px, transparent 24px 46px);
  background-size: 240px 130px;
  animation: rain-fall 1.2s linear infinite;
}

.scanlines {
  z-index: 3;
  pointer-events: none;
  opacity: .2;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
}

.vignette {
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 18%, transparent 82%, rgba(0, 0, 0, .78)),
    radial-gradient(ellipse at 50% 43%, transparent 14%, rgba(2, 5, 8, .12) 46%, rgba(0, 0, 0, .76) 105%);
}

.hud-corners { z-index: 6; pointer-events: none; }
.hud-corners i { position: absolute; width: 58px; height: 58px; opacity: .75; }
.hud-corners i::before,
.hud-corners i::after { content: ""; position: absolute; background: linear-gradient(90deg, var(--gold), transparent); }
.hud-corners i::before { width: 58px; height: 1px; }
.hud-corners i::after { width: 1px; height: 58px; background: linear-gradient(180deg, var(--gold), transparent); }
.hud-corners i:nth-child(1) { top: 18px; left: 18px; }
.hud-corners i:nth-child(2) { top: 18px; right: 18px; transform: scaleX(-1); }
.hud-corners i:nth-child(3) { bottom: 18px; left: 18px; transform: scaleY(-1); }
.hud-corners i:nth-child(4) { right: 18px; bottom: 18px; transform: scale(-1); }

.show-shell {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(250px, 1fr) auto auto;
  gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(20px, 2.6vw, 46px) clamp(24px, 4vw, 72px) clamp(26px, 3vw, 52px);
}

.show-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(215, 174, 80, .24);
  box-shadow: 0 8px 24px -24px var(--gold-bright);
}

.brand { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .12em; }
.brand img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(231, 189, 88, .3)); }
.brand strong,
.brand small { display: block; }
.brand strong { font-family: Georgia, serif; font-size: 20px; letter-spacing: .03em; }
.brand small { margin-top: 3px; color: var(--gold); font-size: 8px; font-weight: 800; }

.broadcast-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dfeaf0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.broadcast-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e3523d;
  box-shadow: 0 0 12px #e3523d;
  animation: live-pulse 1.3s ease-in-out infinite;
}

.show-head-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.show-head-actions button,
.phase {
  min-height: 32px;
  padding: 8px 13px;
  border: 1px solid rgba(215, 174, 80, .38);
  background: linear-gradient(180deg, rgba(25, 36, 44, .9), rgba(5, 10, 14, .9));
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.show-head-actions button { cursor: pointer; }
.show-head-actions button:disabled { color: var(--cyan); cursor: default; }
.phase { color: var(--gold); }

.show-title { align-self: start; margin-top: clamp(2px, 1.5vh, 18px); text-align: center; }
.show-title p { margin: 0; color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.show-title h1 {
  max-width: 1100px;
  margin: 7px auto 6px;
  color: var(--ivory);
  font: 500 clamp(34px, 4.6vw, 72px)/.95 Georgia, serif;
  letter-spacing: .025em;
  text-wrap: balance;
  text-shadow: 0 4px 26px #000, 0 0 30px rgba(216, 174, 79, .12);
}
#subtitle { color: #b9c6cf; font-size: clamp(10px, 1vw, 14px); font-weight: 500; letter-spacing: .04em; text-transform: none; }

.winner-zone {
  align-self: center;
  justify-self: center;
  width: min(1080px, 92vw);
  display: grid;
  grid-template-columns: minmax(72px, 150px) minmax(420px, 760px) minmax(72px, 150px);
  align-items: center;
  gap: clamp(12px, 2.2vw, 34px);
}

.school-sigil {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  opacity: .72;
}
.school-sigil::before,
.school-sigil::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(215, 174, 80, .25);
  transform: rotate(45deg);
  background: rgba(4, 10, 14, .28);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, .75), 0 0 20px rgba(215, 174, 80, .08);
}
.school-sigil::after { inset: 20%; border-color: rgba(87, 198, 227, .25); transform: rotate(45deg); }
.school-sigil img { position: relative; z-index: 1; width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .8)); }
.school-sigil-right img { width: 78%; height: 78%; }

.winner-focus {
  position: relative;
  min-height: 194px;
  display: grid;
  align-content: center;
  padding: 28px clamp(26px, 4vw, 64px) 24px;
  border: 1px solid rgba(217, 173, 76, .7);
  background:
    linear-gradient(90deg, rgba(4, 9, 13, .94), rgba(20, 33, 42, .9) 50%, rgba(4, 9, 13, .94)),
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, .018) 9px 10px);
  text-align: center;
  box-shadow: 0 16px 55px rgba(0, 0, 0, .75), inset 0 0 0 3px rgba(2, 5, 8, .85), inset 0 0 0 4px rgba(217, 173, 76, .2);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  isolation: isolate;
}

.winner-focus::before,
.winner-focus::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 44%;
  height: 70%;
  transform: translateY(-50%);
  opacity: .22;
  background: url("/assets/vfx-flare.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}
.winner-focus::before { left: -8%; }
.winner-focus::after { right: -8%; transform: translateY(-50%) scaleX(-1); }

.focus-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
  color: #8fa5b4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.focus-topline b { color: #6ee1f0; font-weight: 900; }

.winner-focus strong {
  display: block;
  color: #fffaf0;
  font: 800 clamp(31px, 4.5vw, 68px)/1 "Trebuchet MS", ui-monospace, Consolas, monospace;
  letter-spacing: .11em;
  text-shadow: 0 2px 2px #000, 0 0 22px rgba(255, 211, 119, .25);
}
.winner-focus small { display: block; margin-top: 10px; color: var(--gold-bright); font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }

.focus-scan {
  position: absolute;
  inset: 3px;
  pointer-events: none;
  overflow: hidden;
  clip-path: inherit;
}
.focus-scan::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(82, 221, 238, .15), transparent);
  animation: terminal-scan 3.4s linear infinite;
}

.focus-rule { display: flex; align-items: center; gap: 9px; margin-top: 15px; }
.focus-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(215, 174, 80, .55)); }
.focus-rule i:last-child { transform: scaleX(-1); }
.focus-rule b { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }

.winner-focus.is-reveal { animation: reveal-panel .72s cubic-bezier(.18, .85, .2, 1); }
.winner-focus.is-reveal strong { animation: reveal-code .7s cubic-bezier(.16, .8, .2, 1); }
body.reveal-flash .energy-gate { animation: gate-burst .75s ease-out; }

.selection-log {
  width: min(1120px, 92vw);
  justify-self: center;
  padding: 9px 14px 11px;
  border: 1px solid rgba(99, 130, 148, .2);
  background: linear-gradient(180deg, rgba(5, 10, 14, .72), rgba(4, 8, 11, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.progress-heading,
.log-heading { display: flex; align-items: center; gap: 10px; color: #8fa4b2; font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.progress-heading { justify-content: space-between; margin-bottom: 6px; }
.progress-heading strong { color: var(--gold-bright); font: 800 11px ui-monospace, Consolas, monospace; }
.progress { margin-bottom: 9px; }
.progress div { height: 7px; overflow: hidden; border: 1px solid rgba(114, 142, 158, .25); background: #03070a; box-shadow: inset 0 0 8px #000; }
.progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #3e7895, #57d3e9 58%, #ffe39c); box-shadow: 0 0 13px rgba(91, 220, 238, .6); transition: width .45s ease; }
.log-heading i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(215, 174, 80, .28), transparent); }
.log-heading small { color: #718691; font-size: 7px; letter-spacing: .12em; }

.winner-wall {
  min-height: 38px;
  max-height: 68px;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.winner-chip {
  padding: 4px 7px;
  border-left: 2px solid rgba(215, 174, 80, .55);
  background: linear-gradient(90deg, rgba(28, 42, 51, .86), rgba(8, 14, 18, .75));
  color: #c8d4da;
  font: 8px ui-monospace, Consolas, monospace;
  letter-spacing: .04em;
  animation: chip-in .35s ease both;
}

footer { display: flex; justify-content: space-between; align-items: end; gap: 24px; color: #81939f; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.schools { display: flex; gap: 20px; align-items: end; }
.schools figure { display: grid; grid-template-columns: 30px auto; align-items: center; gap: 7px; margin: 0; }
.schools img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(215, 174, 80, .15)); }
.schools figcaption { color: #9eabb3; font-size: 7px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.show-disclaimer { text-align: right; }

.mock-watermark {
  position: fixed;
  z-index: 12;
  inset: auto 0 0;
  padding: 8px;
  border-top: 1px solid rgba(255, 159, 84, .65);
  background: repeating-linear-gradient(135deg, rgba(119, 45, 19, .96) 0 14px, rgba(75, 28, 13, .97) 14px 28px);
  color: #ffd8b3;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .5);
}
.blackout { z-index: 20; background: #000; }
.fallback { position: fixed; z-index: 14; top: 12px; left: 50%; transform: translateX(-50%); padding: 8px 12px; background: #1d1111; color: #ffc3c3; font-size: 10px; }

.overlay body { background: transparent; }
.overlay .academy-backdrop,
.overlay .rain,
.overlay .scanlines,
.overlay .vignette,
.overlay .hud-corners,
.overlay .energy-gate,
.overlay .show-title,
.overlay footer,
.overlay .brand,
.overlay .broadcast-label,
.overlay .selection-log .log-heading,
.overlay .winner-wall { display: none; }
.overlay .show-shell { grid-template-rows: auto 1fr auto; background: transparent; }
.overlay .show-head { grid-template-columns: 1fr; border: 0; }
.overlay .show-head-actions { justify-self: end; }
.overlay .winner-zone { grid-row: 2; align-self: end; margin-bottom: 7vh; }
.overlay .selection-log { grid-row: 3; border: 0; background: transparent; }

@keyframes academy-breathe { from { transform: scale(1.015); } to { transform: scale(1.045); } }
@keyframes rain-fall { from { background-position: 0 -130px; } to { background-position: -20px 130px; } }
@keyframes gate-current { 0%, 100% { opacity: .15; height: 58%; } 50% { opacity: .8; height: 76%; } }
@keyframes live-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes terminal-scan { from { transform: translateY(-20%); } to { transform: translateY(540%); } }
@keyframes reveal-panel { 0% { opacity: .3; transform: scale(.94); filter: brightness(2.2) blur(4px); } 56% { transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes reveal-code { 0% { opacity: 0; letter-spacing: .28em; transform: translateY(8px); } 100% { opacity: 1; letter-spacing: .11em; transform: none; } }
@keyframes gate-burst { 0% { opacity: .4; filter: brightness(1); } 34% { opacity: 1; filter: brightness(2.8) drop-shadow(0 0 60px rgba(87, 214, 238, .85)); } 100% { opacity: .58; filter: drop-shadow(0 0 28px rgba(67, 196, 225, .28)); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 900px) {
  .show-shell { padding: 18px 22px 30px; }
  .show-head { grid-template-columns: 1fr auto; }
  .broadcast-label { display: none; }
  .winner-zone { grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; }
  .winner-focus { min-height: 166px; padding-inline: 24px; }
  .schools figcaption { display: none; }
}

@media (max-width: 650px) {
  .show-shell { grid-template-rows: auto auto minmax(225px, 1fr) auto auto; padding: 14px 14px 28px; }
  .brand small,
  .show-head-actions button,
  .school-sigil { display: none; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 17px; }
  .winner-zone { width: 96vw; grid-template-columns: 1fr; }
  .winner-focus { min-height: 154px; padding: 24px 18px 20px; }
  .focus-topline { font-size: 7px; }
  .winner-focus strong { font-size: clamp(27px, 9vw, 46px); }
  .selection-log { width: 96vw; }
  .show-title h1 { font-size: 34px; }
  .show-title p { font-size: 7px; }
  .schools { gap: 8px; }
  footer > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rain { display: none; }
  .academy-backdrop { transform: none; }
}