@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#080d19;--surface:#10192a;--edge:#27334a;--ink:#f4f6fa;--muted:#aebbd0;--gold:#f7cb72;--blue:#8eb7ff;--head:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--body:Inter,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--body)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.46}button,a,input,select,textarea{outline-offset:4px} :focus-visible{outline:2px solid var(--gold)}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.02}h2{font:800 clamp(2.3rem,5vw,4rem)/.98 var(--head);text-transform:uppercase}h3{font-size:1.05rem}.shell{width:min(1280px,calc(100% - 72px));margin-inline:auto}.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-200%);background:var(--gold);color:#17120a;padding:8px;z-index:10}.skip-link:focus{transform:none}.topbar{background:#090e1a;border-bottom:1px solid var(--edge)}.nav{display:flex;min-height:74px;align-items:center;gap:24px;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font:800 22px/1 var(--head);letter-spacing:.055em;white-space:nowrap}.brand b{color:var(--gold)}.brand small{font:700 10px var(--body);color:var(--muted);margin-left:7px}nav{display:flex;gap:24px;align-items:center;color:var(--muted);font-size:.83rem;font-weight:600}nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:9px}nav a:hover{color:var(--gold)}.button{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:43px;padding:9px 17px;border:1px solid var(--edge);background:#18253d;color:var(--ink);border-radius:5px;font-size:.85rem;font-weight:750}.button:hover:enabled,a.button:hover{border-color:var(--blue);background:#223558}.button.primary{background:var(--gold);border-color:var(--gold);color:#17130b}.button.primary:hover{background:#ffe2a8;color:#17130b}.button.quiet{background:transparent}.button.danger{color:#ffadac}.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--edge);background:radial-gradient(ellipse at 86% 32%,#193b72 0,transparent 59%),linear-gradient(112deg,#080e1c 24%,#101d37 100%)}.hero-inner{position:relative;min-height:620px;display:flex;align-items:center;padding:66px 0}.hero-copy{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold);font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em}.eyebrow:before{content:"";width:16px;height:2px;background:currentColor}.hero h1{font:900 clamp(5rem,12vw,11rem)/.77 var(--head);letter-spacing:-.024em;text-transform:uppercase;margin:24px 0}.hero h1 strong{display:block;font-weight:inherit;color:var(--gold)}.tagline{font-size:clamp(1rem,2vw,1.25rem);font-weight:600}.hero-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:25px}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(360px,100%);margin-top:25px}.countdown div{border-top:1px solid #556781;background:#111c30cc;padding:7px 10px 9px;border-radius:0 0 4px 4px}.countdown b{display:block;font:700 2rem/1 var(--head);font-variant-numeric:tabular-nums}.countdown span,.overline{color:var(--muted);font-size:.68rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.arena{position:absolute;pointer-events:none;right:-5%;top:0;width:66%;height:100%;display:grid;place-items:center;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 23%)}.arena:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(132deg,transparent 0 50px,#8eb7ff20 51px 52px,transparent 53px 85px);mask-image:linear-gradient(0deg,transparent,#000 60%)}.arena:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 53%,#92b7ff66 53.2%,transparent 53.5%),linear-gradient(135deg,transparent 68%,#f7cb7255 68.1%,transparent 68.3%)}.section{padding-block:55px;border-bottom:1px solid var(--edge)}.intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:25px;align-items:center}.intro p{font-size:1.1rem;color:var(--muted);max-width:56ch}.principles,.role-grid,.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.principle,.role,.roster article{padding:22px;background:var(--surface);border:1px solid var(--edge);border-radius:6px}.principle{border-top-color:#9c7840}.principle h3{font:800 1.65rem var(--head);text-transform:uppercase;color:var(--gold);margin-bottom:7px}.principle p,.muted{color:var(--muted)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}.role{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:10px;color:var(--ink);min-height:76px}.role:hover{background:#182944;border-color:var(--blue)}.role strong{font-size:1rem}.role small{display:block;color:var(--muted);margin-top:3px}.role .arrow{color:var(--blue);font-size:1.35rem}.footer{padding:24px 0;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.75rem}.footer span:first-child{font-weight:800;letter-spacing:.12em}
.stage{padding-block:32px;background:radial-gradient(ellipse at 85% 0,#234375 0,transparent 63%),#101b30;border-bottom:1px solid var(--edge)}.stage.live{border-bottom:2px solid var(--gold)}.stage-panel{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:24px;align-items:end}.stage h1,.class h1{font:900 clamp(3.4rem,8vw,7rem)/.9 var(--head);text-transform:uppercase;margin:12px 0}.pick-chip{color:var(--gold);font-weight:800}.metrics{background:#090e1acc;border:1px solid var(--edge);padding:16px;border-radius:6px}.metric-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}.meter{height:7px;background:#283953;border-radius:12px;overflow:hidden;margin:10px 0}.meter div{background:var(--gold);height:100%}.room-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);align-items:start;gap:24px}.room-layout .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.room-layout aside{position:sticky;top:14px}.panel{background:var(--surface);border:1px solid var(--edge);border-radius:6px;padding:17px}.tools,.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tools{margin-top:20px}.tools input{flex:1;min-width:145px}.tools button[aria-pressed=true]{background:#29497e;border-color:#709fed}.panel h2{font-size:2rem}.panel label,dialog label{display:grid;gap:5px;color:var(--muted);font-size:.85rem;margin:12px 0}input,select,textarea{min-height:43px;padding:8px 11px;border:1px solid #50607a;border-radius:5px;color:var(--ink);background:#0c1425;max-width:100%;width:auto}textarea{min-height:110px}.hint{color:var(--muted);font-size:.82rem;margin-block:10px}.admin{border-color:#886c3a;margin-bottom:15px}.admin details{margin:13px 0}.admin summary{cursor:pointer}.table-wrap{overflow:auto;margin-top:16px}.table-wrap:focus-visible{outline-offset:1px}table{width:100%;border-collapse:collapse;text-align:left;font-size:.85rem}caption{text-align:left;color:var(--muted);padding-bottom:6px}th{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em}th,td{padding:10px 9px;border-bottom:1px solid var(--edge)}td:first-child{color:var(--gold);font-weight:800;white-space:nowrap}tr.current{background:#213759}.status{color:var(--muted);white-space:nowrap}.status.done{color:#a9e7c7}.status.now{color:#b8d4ff}.status.skipped{color:var(--gold)}.class{padding:44px 0;background:radial-gradient(ellipse at top right,#294781,transparent 68%),#101a2b}.roster article{border-top-color:var(--gold)}.roster strong{display:block;font:750 1.6rem var(--head)}.roster span{color:var(--gold)}.class .actions{margin-top:20px}
dialog{width:min(580px,calc(100% - 28px));max-height:90dvh;overflow:auto;border:1px solid #52688d;border-radius:9px;background:#111b2e;color:var(--ink);padding:27px}dialog::backdrop{background:#050914d9}dialog h2{margin:8px 0 16px}dialog p{margin:10px 0}dialog .actions{margin-top:18px}.reveal{overflow:hidden;width:min(960px,calc(100% - 28px));background:radial-gradient(ellipse at top,#274c86,transparent 74%),#0e1627;text-align:center;padding:clamp(22px,6vw,70px);border-top:4px solid var(--gold)}.reveal .eyebrow,.reveal .actions{justify-content:center}.reveal h2{font-size:clamp(3.4rem,9vw,7rem);color:var(--gold);animation:rise .6s both}.reveal h3{font:800 clamp(2.7rem,7vw,5rem)/1 var(--head);text-transform:uppercase;animation:rise .6s .12s both}.reveal .selected-role{font:800 clamp(1.8rem,5vw,3rem) var(--head);color:var(--blue);animation:rise .6s .25s both}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}#notice{position:fixed;bottom:15px;right:15px;z-index:5;max-width:min(430px,90vw);background:#223755;border:1px solid #6a8cbc;border-radius:5px;padding:10px 16px}#notice:empty{display:none}.presentation .topbar,.presentation .footer,.presentation .admin{display:none}.presentation .stage{padding-block:52px}.exit-presentation{display:none}.presentation .exit-presentation{display:inline-flex;margin-top:12px}
@media(max-width:900px){.shell{width:calc(100% - 36px)}.room-layout{grid-template-columns:1fr}.room-layout aside{position:static}.hero-inner{min-height:550px}.nav{gap:12px}nav{gap:14px}}
@media(max-width:570px){.shell{width:calc(100% - 28px)}.nav{padding-block:10px;flex-wrap:wrap;min-height:0}.nav nav{order:3;width:100%;padding-block:4px}.hero-inner{min-height:0;padding:48px 0}.hero h1{font-size:clamp(4.4rem,15vw,7rem)}.arena{opacity:.45;width:95%;right:-25%}.section{padding-block:32px}.intro,.stage-panel{grid-template-columns:1fr}.principles,.roster{grid-template-columns:1fr}.role-grid,.room-layout .role-grid{grid-template-columns:1fr 1fr;gap:7px}.role{padding:10px;min-height:65px}.role strong{font-size:.86rem;overflow-wrap:anywhere}.footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
.exit-presentation + .exit-presentation{margin-left:8px}
.role .arrow{width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);flex:none;margin-right:5px}

/* The shield is both the frame and the field for the original KTB artwork. */
.team-mark {
  --crest-shape: polygon(50% 0, 97% 13%, 97% 61%, 87% 78%, 50% 100%, 13% 78%, 3% 61%, 3% 13%);
  position: relative;
  display: block;
  isolation: isolate;
  flex: none;
  aspect-ratio: 1;
  clip-path: var(--crest-shape);
  background: linear-gradient(145deg, #fff0c9 4%, #e7bc73 33%, #88612e 58%, #f7cb72 85%);
}
.team-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--crest-shape);
  transform: scale(.9);
  background: radial-gradient(ellipse at 45% 28%, #fffaf0, #e6d5b5 85%);
}
.team-mark img {
  position: absolute;
  width: 147%;
  max-width: none;
  height: auto;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}
.brand-mark { width: 39px; }
.arena { right: -2%; width: 55%; }
.shield {
  position: relative;
  z-index: 1;
  width: min(56%, 350px);
  filter: drop-shadow(0 16px 25px #030818ad);
}
.reveal-mark, .class-mark { width: 66px; }
.reveal-mark { margin: 0 auto 15px; }
.class-mark { margin-bottom: 15px; }
@media (max-width: 900px) {
  .arena { width: 48%; right: -3%; }
  .shield { width: 76%; }
}
@media (max-width: 570px) {
  .brand { font-size: 18px; gap: 7px; }
  .brand-mark { width: 31px; }
  .hero-inner { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 23px; }
  .arena { position: relative; inset: auto; width: 100%; height: 84px; opacity: 1; mask-image: none; place-items: center start; }
  .shield { width: 82px; }
  .hero h1 { font-size: clamp(3.5rem, 14vw, 6rem); }
}

.draft-officials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 25px 0 0;
}
.draft-officials div { border-left: 2px solid #987642; padding-left: 11px; }
.draft-officials dt {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.draft-officials dd { margin: 1px 0 0; font-weight: 700; }

.nav-actions, .music {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-actions .button {
  white-space: nowrap;
}
.music {
  position: relative;
  color: var(--muted);
  font-size: .83rem;
}
.music-volume {
  display: grid;
  align-items: center;
  width: 84px;
  line-height: 1;
}
.music-volume input {
  width: 100%;
  min-height: 24px;
  margin: 0;
  padding: 0;
  accent-color: var(--gold);
}
#music-status:not(:empty) {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 2;
  width: max-content;
  padding: 5px 8px;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--surface);
}
@media (max-width: 870px) {
  .nav { flex-wrap: wrap; padding-block: 10px; }
  .nav nav { order: 1; width: 100%; padding-block: 4px; }
}
@media (max-width: 570px) {
  .nav-actions { order: 2; margin-left: auto; }
  .nav-actions .button { padding-inline: 9px; }
  .nav-actions #facilitator { white-space: normal; line-height: 1.2; }
  .music-volume { width: clamp(62px, 19vw, 84px); }
}