/* ==========================================================================================
   KIC 2026 India Qualifier — Round 1 Draw · OBS page styles (CONTRACT.md §7b, §8 "Royal Blue & Champagne")

   The look follows the organiser's official "Qualified Team Lineup" posters: a vivid royal-blue
   field with light blooms and the pale HoK tower, satin golden-cloth ribbons and gold blade
   flourishes, champagne-gold satin type, chamfered royal-blue team plates with a champagne rim.

   Rules baked into this file:
   - The stage is a fixed 1920×1080 box scaled by app.js; every coordinate below is a stage pixel.
   - Only `transform` and `opacity` ever animate. Keylines, glows and shadows are static.
   - Minimum on-screen text is 20 px (wheel labels are drawn on canvas, not here).
   - A CSS comment never contains the two characters that close it early.
   ========================================================================================== */

/* ---- brand fonts (drop-in): KIC2025 (condensed display) and Radikal (geometric sans) are the
   organiser's proprietary faces. Put the files in fonts/ and they are used automatically; until
   then the Google Fonts substitutes below take over (Big Shoulders Display, Outfit). local() first,
   so an installed copy never triggers a fetch. font-display: swap keeps text visible either way. */
@font-face {
  font-family: "KIC2025";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("KIC2025 Bold"), local("KIC2025-Bold"), url("../fonts/KIC2025-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "KIC2025";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("KIC2025 Regular"), local("KIC2025-Regular"), url("../fonts/KIC2025-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Radikal";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local("Radikal Medium"), local("Radikal-Medium"), url("../fonts/Radikal-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Radikal";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Radikal Bold"), local("Radikal-Bold"), url("../fonts/Radikal-Bold.woff2") format("woff2");
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #1e3ca2;
  overflow: hidden;
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

.fit {
  position: fixed;
  inset: 0;
  background: #1e3ca2;
  overflow: hidden;
}

.stage {
  /* ---- design tokens (§8) ---- */
  --kd-blue: #2e53d9;
  --kd-blue-mid: #2647c3;
  --kd-blue-deep: #1e3ca2;
  --kd-blue-ink: #14297a;
  --kd-navy: #0b1848;
  --kd-bloom: #51a1ee;
  --kd-pale: #68a4f1;
  --kd-white: #ffffff;
  --kd-cream: #fff6df;
  --kd-champagne: #f3d9aa;
  --kd-plate: #e3d9be;
  --kd-crest: #ffc994;
  --kd-gold: #d9a85b;
  --kd-gold-deep: #a5732b;
  --kd-alert: #ff7a45;
  --gold-metal: linear-gradient(180deg, #fff8e6 0%, #f6e4c0 30%, #edd09a 52%, #ddb26c 74%, #c08e44 100%);
  --gold-rim: linear-gradient(160deg, #fff3d6 0%, #f3d9aa 38%, #d9a85b 74%, #b5843a 100%);
  --plate-fill: linear-gradient(180deg, #2c4fd2 0%, #1e3ca2 100%);
  --plate-fill-quiet: linear-gradient(180deg, rgba(20, 41, 122, 0.55) 0%, rgba(11, 24, 72, 0.5) 100%);
  --font-display: "KIC2025", "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Radikal", "Outfit", "Albert Sans", system-ui, sans-serif;
  --font-mono: "Radikal", "Outfit", "Albert Sans", system-ui, sans-serif;

  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, #2f56de 0%, #2a4dd0 34%, #2444bb 70%, #1b37a0 100%);
  color: var(--kd-white);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
}

/* generic show/hide used by app.js */
.is-on {
  visibility: visible !important;
}

/* ------------------------------------------------------------------ atmosphere */

.field {
  /* the posters' light blooms: a bright bloom behind the wheel, softer ones at the corners */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 760px 560px at 960px 420px, rgba(81, 161, 238, 0.42), rgba(81, 161, 238, 0) 70%),
    radial-gradient(ellipse 520px 380px at 1560px 140px, rgba(104, 164, 241, 0.3), rgba(104, 164, 241, 0) 70%),
    radial-gradient(ellipse 620px 420px at 260px 980px, rgba(81, 161, 238, 0.2), rgba(81, 161, 238, 0) 70%),
    radial-gradient(ellipse 420px 300px at 300px 160px, rgba(104, 164, 241, 0.16), rgba(104, 164, 241, 0) 70%);
  z-index: 1;
  pointer-events: none;
}
.tower {
  /* the pale HoK tower from the posters' background art, kept behind the right column */
  position: absolute;
  right: -150px;
  top: -70px;
  height: 1040px;
  width: auto;
  opacity: 0.5;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 40%), linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 40%), linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  z-index: 2;
  pointer-events: none;
}
.cloth {
  position: absolute;
  pointer-events: none;
  display: block;
}
.clothTopWrap {
  /* a corner of satin ribbon at the top-right, as on the posters: clipped to the corner and faded
     toward the counter so the numbers stay on blue */
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  height: 320px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(205deg, #000 22%, rgba(0, 0, 0, 0) 62%);
  mask-image: linear-gradient(205deg, #000 22%, rgba(0, 0, 0, 0) 62%);
}
.cloth-top {
  right: -300px;
  top: -400px;
  width: 900px;
  transform: rotate(150deg) scaleX(-1);
  transform-origin: 50% 50%;
  opacity: 0.95;
}
.cloth-bottom {
  /* the big golden cloth flowing along the bottom edge */
  left: -160px;
  top: 690px;
  width: 1560px;
  transform: rotate(-16deg) scaleY(0.72);
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, #000 62%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, #000 62%);
  z-index: 6;
  animation: clothSway 26s ease-in-out infinite alternate;
}
@keyframes clothSway {
  from {
    transform: rotate(-16deg) scaleY(0.72) translateX(0);
  }
  to {
    transform: rotate(-16deg) scaleY(0.72) translateX(22px);
  }
}
.blade {
  position: absolute;
  pointer-events: none;
  display: block;
  z-index: 4;
}
.blade-top {
  /* the blue-and-gold blade sweeping across the top, behind the headline */
  left: 620px;
  top: -200px; /* high enough that its gold edge clears the subtitle */
  width: 1100px;
  transform: rotate(8deg);
  opacity: 0.72;
}
.blade-right {
  right: -80px;
  top: 40px;
  width: 620px;
  transform: rotate(18deg);
  opacity: 0.9;
}
.beam {
  /* the light behind the wheel, breathing (app.js fades it out in the finale) */
  position: absolute;
  left: 460px;
  top: 78px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, rgba(255, 246, 223, 0.22) 0%, rgba(104, 164, 241, 0.26) 34%, rgba(81, 161, 238, 0) 66%);
  opacity: 0.85;
  animation: beamBreath 9s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes beamBreath {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}
.finScrim {
  /* the finale's veil: a deep-blue scrim, heavier toward the edges, laid over every piece of
     atmosphere (field, tower, cloth, blades, beam, vignette all sit below z 10) and under the top
     bar, so the ribbons and blades recede and the matchups board sits on quiet ground. Faded in by
     app.js (opacity only). */
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 1500px 900px at 960px 560px, rgba(11, 24, 72, 0.6) 0%, rgba(11, 24, 72, 0.72) 55%, rgba(11, 24, 72, 0.88) 100%);
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  pointer-events: none;
}
.embers {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 40;
  pointer-events: none;
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 1400px 820px at 960px 520px, rgba(11, 24, 72, 0) 58%, rgba(11, 24, 72, 0.42) 100%);
  z-index: 7;
  pointer-events: none;
}

/* ------------------------------------------------------------------ plates */

/* A chamfered royal-blue plate with a champagne rim (the posters' team-plate idiom): the rim is
   the ::before, the fill the ::after, both cut at the top-left and bottom-right corners. */
.panel {
  position: absolute;
  --cut: 18px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-rim);
  clip-path: var(--chamfer);
  z-index: -2;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--plate-fill);
  clip-path: var(--chamfer);
  z-index: -1;
}
.panel.chamfer-both {
  --chamfer: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.goldText {
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: absolute;
  left: 96px;
  top: 46px;
  width: 1728px;
  height: 150px;
  z-index: 20;
}
.tb-left {
  position: absolute;
  left: 0;
  top: 0;
  height: 147px;
}
.lockup {
  /* the official KIC India Qualifiers lockup, at 1:1 (poster scale, never blown up) */
  position: absolute;
  left: 0;
  top: 0;
  width: 229px;
  height: 147px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(11, 24, 72, 0.35));
}
.presented {
  position: absolute;
  left: 252px;
  top: 48px;
  width: 111px;
  height: 51px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(11, 24, 72, 0.35));
}
.tb-centre {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1000px;
  transform: translateX(-50%);
  text-align: center;
}
.eyebrow {
  font: 600 20px/22px var(--font-ui);
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  color: var(--kd-white);
  text-transform: uppercase;
  height: 22px;
  text-shadow: 0 2px 8px rgba(11, 24, 72, 0.5);
}
.titleRow {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 2px;
}
.title {
  margin: 0;
  font: 900 64px/64px var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  filter: drop-shadow(0 3px 0 rgba(120, 76, 20, 0.35)) drop-shadow(0 6px 14px rgba(11, 24, 72, 0.45));
}
.subtitle {
  margin-top: 4px;
  font: 500 20px/22px var(--font-ui);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  /* White, like the posters' wide-tracked "QUALIFIED" label, with a firm navy shadow: the top
     blade's pale gold edge runs close behind this line, and champagne-on-champagne washed out. */
  color: #ffffff;
  white-space: nowrap;
  visibility: hidden;
  text-shadow: 0 1px 2px rgba(11, 24, 72, 0.85), 0 2px 10px rgba(11, 24, 72, 0.6);
}
.finHead {
  /* the finale headline, laid exactly over the title + subtitle (same top, same faces, same sizes)
     so the crossfade reads as the words changing, not the layout moving */
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.finTitle {
  font: 900 64px/64px var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  filter: drop-shadow(0 3px 0 rgba(120, 76, 20, 0.35)) drop-shadow(0 6px 14px rgba(11, 24, 72, 0.45));
}
.finSub {
  /* one supporting line; flex-centred so a long line overflows the 1000 px block symmetrically */
  display: flex;
  justify-content: center;
  margin-top: 4px;
  font: 500 20px/22px var(--font-ui);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(11, 24, 72, 0.85), 0 2px 10px rgba(11, 24, 72, 0.6);
}
.tb-logo {
  /* the organiser's own event.logo, when supplied (rarely needed now that the lockup is built in) */
  position: absolute;
  left: 384px;
  top: 40px;
  width: 220px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-logo img {
  max-width: 220px;
  max-height: 64px;
  object-fit: contain;
  display: block;
}
.tb-right {
  position: absolute;
  right: 0;
  top: 4px;
  text-align: right;
}
.counterRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  height: 52px;
}
.counter {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 16px;
  height: 52px;
  padding-right: 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.45);
  text-shadow: 0 2px 8px rgba(11, 24, 72, 0.5);
}
.counter .state {
  font: 600 20px/24px var(--font-ui);
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
}
.counter .pick {
  font: 800 46px/52px var(--font-display);
  letter-spacing: 0.03em;
  color: var(--kd-white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hokLogo {
  width: 144px;
  height: 49px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(11, 24, 72, 0.4));
}

/* ------------------------------------------------------------------ match columns */

/* Two columns of four cards, 154 px tall on a 178 px pitch (24 px apart). They sit staggered: the
   left column low (into the bottom-left corner the draw log used to hold), the right column high
   (into the space the odds line used to hold), clear of the facecam reserve below it. js/ui-dom.js
   COL_X / COL_Y / CARD_GAP must match these numbers (the flying chip lands on them). */
.col {
  position: absolute;
  width: 416px;
  height: 688px;
  z-index: 20;
  transform-origin: 50% 50%;
}
.col-l {
  left: 96px;
  top: 262px;
}
.col-r {
  left: 1408px;
  top: 146px;
}
.card {
  left: 0;
  width: 416px;
  height: 154px;
  padding: 4px 0 0;
  transform-origin: 50% 50%;
  overflow: visible;
  --cut: 14px;
}
.card::before {
  /* a quiet group plate behind each pairing: a thin champagne keyline ... */
  background: linear-gradient(160deg, rgba(243, 217, 170, 0.34), rgba(243, 217, 170, 0.14) 60%, rgba(243, 217, 170, 0.26));
}
.card::after {
  /* ... over a translucent deep-blue fill, so the plates inside carry the weight */
  inset: 1px;
  background: linear-gradient(180deg, rgba(20, 41, 122, 0.4), rgba(11, 24, 72, 0.34));
}
.card.is-dead {
  opacity: 0.35;
}
.cardHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  margin: 0 12px 4px 14px;
}
.cardTitle {
  font: 600 20px/24px var(--font-ui);
  letter-spacing: 0.3em;
  color: var(--kd-white);
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.cardTitle::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 14px;
  margin-right: 10px;
  background: var(--gold-metal);
  clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
}
.fmt {
  font: 600 20px/22px var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--kd-navy);
  padding: 0 8px;
  background: linear-gradient(180deg, #fff3d9, #e3d9be);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.slot {
  position: relative;
  height: 52px;
  margin: 0 8px;
}
.slotKey {
  /* the team plate: champagne rim (::before) + royal-blue fill (::after), chamfered */
  position: absolute;
  inset: 0;
  --cut: 12px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.slotKey::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-rim);
  clip-path: var(--chamfer);
  opacity: 0.3;
}
.slotKey::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--plate-fill-quiet);
  clip-path: var(--chamfer);
}
.slot[data-mode="target"] .slotKey::before {
  opacity: 1;
  animation: keyPulse 1.2s ease-in-out infinite;
}
.slot[data-mode="target"] .slotKey::after {
  background: linear-gradient(180deg, rgba(46, 83, 217, 0.85), rgba(30, 60, 162, 0.9));
}
.slot[data-mode="filled"] .slotKey::before {
  opacity: 1;
}
.slot[data-mode="filled"] .slotKey::after {
  background: var(--plate-fill);
}
@keyframes keyPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.slotFlash {
  position: absolute;
  inset: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: var(--kd-cream);
  opacity: 0;
  pointer-events: none;
}
.slotVoid {
  position: absolute;
  inset: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 122, 69, 0.85), rgba(255, 122, 69, 0.3));
  opacity: 0;
  pointer-events: none;
}
.slotGhost {
  position: absolute;
  left: 22px;
  top: 0;
  font: 600 20px/52px var(--font-ui);
  letter-spacing: 0.22em;
  color: rgba(243, 217, 170, 0.5);
  text-transform: uppercase;
}
.slot[data-mode="target"] .slotGhost {
  color: rgba(255, 246, 223, 0.95);
}
.slot.is-drawing .slotGhost {
  color: var(--kd-cream);
}
.slot[data-mode="filled"] .slotGhost {
  display: none;
}
.slotFill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  opacity: 0;
  transform-origin: 20% 50%;
}
.slot[data-mode="filled"] .slotFill {
  opacity: 1;
}
.slotChip {
  flex: none;
  width: 28px;
  font: 600 20px/52px var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--kd-champagne);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.slotCrest {
  flex: none;
  width: 40px;
  height: 40px;
}
.slotName {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 800 30px/48px var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kd-white);
  display: flex;
  align-items: center;
}
.slotName::before {
  /* the thin divider between logo and name on the official plate */
  content: "";
  flex: none;
  display: inline-block;
  width: 1px;
  height: 28px;
  margin-right: 12px;
  background: rgba(255, 255, 255, 0.55);
}
.slotName > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vsRow {
  position: relative;
  height: 12px;
  margin: 2px 8px;
}
.vsLine {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(243, 217, 170, 0), rgba(243, 217, 170, 0.5) 20%, rgba(243, 217, 170, 0.5) 80%, rgba(243, 217, 170, 0));
}
.vs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 22px;
  margin: -11px 0 0 -23px;
  background: linear-gradient(180deg, #fff3d9, #e3d9be);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  font: 800 20px/22px var(--font-display);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--kd-navy);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform-origin: 50% 50%;
}
.cardSweepClip {
  /* clips the travelling sweep to the card's chamfered plate (the sweep itself translates ±100 %) */
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: var(--chamfer);
  pointer-events: none;
}
.cardSweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 246, 223, 0) 30%, rgba(255, 246, 223, 0.34) 50%, rgba(255, 246, 223, 0) 70%);
  opacity: 0;
}

/* ------------------------------------------------------------------ finale board */

/* "ROUND 1 MATCHUPS": one horizontal row per match, centred, in a single column of eight so every
   pairing reads left to right as "A vs B". Row = a small match label in a left gutter, team A's
   plate (logo | name, the name set toward the centre), a champagne VS chip on the centre line, team
   B's plate mirrored. The plates are the official team-plate idiom (royal fill, champagne rim,
   chamfered) with nothing else on them. Rows are 78 px on an 86 px pitch from y 206 to 886 — clear
   of the top bar and of the facecam reserve (y 892+). Entrance (opacity + translateY, per row) is
   written by app.js; afterwards nothing here moves. z 66: above the SAMPLE DATA watermark (65), so
   the watermark never crosses a name. */
.finale {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 66;
  visibility: hidden;
  pointer-events: none;
}
.fbRow {
  position: absolute;
  left: 284px;
  width: 1216px;
  height: 78px;
  opacity: 0;
}
.fbLabel {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  font: 600 20px/78px var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kd-champagne);
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(11, 24, 72, 0.6);
}
.fbPlate {
  top: 0;
  width: 500px;
  height: 78px;
  --cut: 14px;
  isolation: isolate; /* keeps the .panel rim/fill pseudo-elements inside this plate */
  filter: drop-shadow(0 4px 10px rgba(11, 24, 72, 0.45));
}
.fbPlate.is-a {
  left: 136px;
}
.fbPlate.is-b {
  left: 716px;
}
.fbInner {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  padding: 0 18px 0 12px;
}
.fbPlate.is-b .fbInner {
  flex-direction: row-reverse;
  padding: 0 12px 0 18px;
}
.fbCrest {
  flex: none;
  width: 64px;
  height: 64px;
}
.fbDiv {
  /* the thin white divider of the official plate, between logo and name */
  flex: none;
  width: 1px;
  height: 44px;
  margin: 0 16px 0 14px;
  background: rgba(255, 255, 255, 0.55);
}
.fbPlate.is-b .fbDiv {
  margin: 0 14px 0 16px;
}
.fbName {
  flex: 1;
  min-width: 0;
  font: 800 44px/74px var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kd-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right; /* team A reads toward the centre line ... */
  text-shadow: 0 2px 8px rgba(11, 24, 72, 0.4);
}
.fbPlate.is-b .fbName {
  text-align: left; /* ... and so does team B */
}
.fbVs {
  position: absolute;
  left: 644px;
  top: 21px;
  width: 64px;
  height: 36px;
  background: linear-gradient(180deg, #fff3d9, #e3d9be);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font: 800 26px/36px var(--font-display);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--kd-navy);
  text-align: center;
}

/* ------------------------------------------------------------------ crests / portraits */

.crest {
  /* a team logo on a deep-royal disc in a champagne ring, or a generated crest: royal-blue
     medallion, champagne ring, champagne monogram (the official blue/champagne idiom) */
  --crest: 40px;
  position: relative;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 50% 55%, #2f56de 0%, #1e3ca2 70%, #14297a 100%);
  box-shadow:
    inset 0 0 0 calc(var(--crest) * 0.06) #f3d9aa,
    inset 0 0 0 calc(var(--crest) * 0.085) rgba(11, 24, 72, 0.55),
    0 0 0 1px rgba(165, 115, 43, 0.6),
    0 2px 8px rgba(11, 24, 72, 0.45);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.crest.has-logo {
  background: radial-gradient(circle at 50% 50%, #1a3390 0%, #14297a 100%);
}
.crest img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
}
.crestMono {
  font: 800 calc(var(--crest) * 0.44) / 1 var(--font-display);
  letter-spacing: 0.03em;
  color: var(--kd-champagne);
  transform: translateY(calc(var(--crest) * 0.02));
  text-shadow: 0 1px 2px rgba(11, 24, 72, 0.6);
}
.crest-lg::before {
  /* an inner champagne hairline ring on the large (reveal / chip) crest */
  content: "";
  position: absolute;
  inset: calc(var(--crest) * 0.12);
  border-radius: 50%;
  border: 1px solid rgba(243, 217, 170, 0.5);
  pointer-events: none;
}
.crest-lg .crestMono {
  font-size: calc(var(--crest) * 0.36);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ wheel */

.wheelBox {
  position: absolute;
  left: 530px;
  top: 148px;
  width: 860px;
  height: 860px;
  z-index: 30;
}
#wheel,
#wheelGhost {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
#wheelGhost {
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}
.hubBtn {
  position: absolute;
  z-index: 3;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pointerFlash {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 223, 0.95) 0%, rgba(243, 217, 170, 0.5) 38%, rgba(217, 168, 91, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 45;
  pointer-events: none;
}

/* ------------------------------------------------------------------ status line */

.status {
  position: absolute;
  left: 580px;
  top: 986px;
  width: 760px;
  height: 40px;
  z-index: 31;
  text-align: center;
  --cut: 14px;
  transform-origin: 50% 50%;
}
.status::after {
  background: linear-gradient(180deg, rgba(30, 60, 162, 0.96), rgba(20, 41, 122, 0.96));
}
.status #statusText {
  display: block;
  font: 800 26px/40px var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kd-champagne);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ facecam reserve */

.facecam {
  position: absolute;
  left: 1408px;
  top: 892px;
  width: 416px;
  height: 134px;
  z-index: 20;
  pointer-events: none;
}

/* ------------------------------------------------------------------ reveal card (the official lineup) */

.reveal {
  position: absolute;
  left: 550px;
  top: 343px;
  width: 820px;
  height: 470px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.revealGlow {
  position: absolute;
  inset: 18px;
  border-radius: 8px;
  box-shadow:
    0 0 90px 30px rgba(255, 246, 223, 0.2),
    0 0 220px 70px rgba(81, 161, 238, 0.45);
  animation: glowBreath 2.4s ease-in-out infinite;
  z-index: 0;
}
@keyframes glowBreath {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
.revealCard {
  position: absolute;
  left: 0;
  top: 0;
  width: 820px;
  height: 470px;
  z-index: 1;
  --cut: 26px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  overflow: hidden;
  clip-path: var(--chamfer);
}
.revealCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-rim);
  z-index: 0;
}
.revealCard::after {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    radial-gradient(ellipse 520px 300px at 50% 12%, rgba(81, 161, 238, 0.5), rgba(81, 161, 238, 0) 70%),
    linear-gradient(180deg, #2e53d9 0%, #2445c0 55%, #1b37a0 100%);
  clip-path: var(--chamfer);
  z-index: 0;
}
.revealArt {
  /* gold blade flourishes in the card corners (decorative, clipped by the card) */
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
.revealArt-tl {
  left: -120px;
  top: -70px;
  width: 460px;
  transform: rotate(-12deg);
}
.revealArt-br {
  right: -140px;
  bottom: -110px;
  width: 460px;
  transform: rotate(168deg);
}
.reveal.no-players .revealCard {
  top: 60px;
  height: 350px;
}
.revealHead {
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  height: 58px;
  z-index: 2;
}
.revealEyebrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font: 600 22px/58px var(--font-ui);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--kd-white);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(11, 24, 72, 0.5);
}
.revealFmt {
  position: absolute;
  right: 26px;
  top: 17px;
  font: 600 20px/24px var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--kd-navy);
  padding: 0 9px;
  background: linear-gradient(180deg, #fff3d9, #e3d9be);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.revealPlayers {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 74px;
  height: 232px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  z-index: 3;
}
.reveal.no-players .revealPlayers {
  display: none;
}
.revealArcs {
  /* the blue fret-pattern arcs with tassels behind the team plate (a genuine HoK motif) */
  position: absolute;
  left: 0;
  width: 820px;
  top: 246px;
  height: 228px;
  display: block;
  opacity: 0.95;
  z-index: 2;
  pointer-events: none;
}
.reveal.no-players .revealArcs {
  top: 88px;
}
.revealPlate {
  /* LOGO | divider | NAME, on the chamfered royal-blue plate with a champagne rim */
  position: absolute;
  left: 40px;
  right: 40px;
  top: 314px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 28px;
  z-index: 3;
  --cut: 20px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.revealPlate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-rim);
  clip-path: var(--chamfer);
  z-index: -2;
}
.revealPlate::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(180deg, #1e3ca2 0%, #14297a 100%);
  clip-path: var(--chamfer);
  z-index: -1;
}
.reveal.no-players .revealPlate {
  top: 116px;
  height: 140px;
  gap: 26px;
}
.revealCrest {
  flex: none;
  width: 64px;
  height: 64px;
  position: relative;
  z-index: 2;
}
.reveal.no-players .revealCrest {
  width: 108px;
  height: 108px;
}
.plateDivider {
  flex: none;
  width: 1px;
  height: 52px;
  background: rgba(255, 255, 255, 0.6);
}
.reveal.no-players .plateDivider {
  height: 88px;
}
.revealNameWrap {
  position: relative;
  min-width: 0;
  max-width: 560px;
  height: 64px;
  overflow: hidden;
  z-index: 2;
}
.reveal.no-players .revealNameWrap {
  height: 96px;
  max-width: 520px;
}
.revealName {
  font: 800 56px/64px var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--kd-white);
  transform-origin: 0 50%;
  text-shadow: 0 2px 10px rgba(11, 24, 72, 0.45);
}
.reveal.no-players .revealName {
  font-size: 84px;
  line-height: 96px;
}
.revealMeta {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 412px;
  font: 600 20px/24px var(--font-ui);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--kd-champagne);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 3;
}
.reveal.no-players .revealMeta {
  top: 280px;
}
.revealRule {
  display: none;
}

/* the official player card: blue interior in a gold frame with a corner shard, the cut-out photo
   breaking out above the frame, the IGN on a champagne name plate */
.player {
  position: relative;
  flex: none;
  width: 106px;
  height: 194px;
  opacity: 0;
}
.pcFrame {
  position: absolute;
  inset: 0;
  --pcut: 16px;
  --pchamfer: polygon(var(--pcut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pcut));
}
.pcFrame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-rim);
  clip-path: var(--pchamfer);
}
.pcFrame::after {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(104, 164, 241, 0.32) 44%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 62%, rgba(104, 164, 241, 0.22) 72%, rgba(255, 255, 255, 0) 82%),
    linear-gradient(180deg, #2e53d9 0%, #1e3ca2 62%, #172f8a 100%);
  clip-path: var(--pchamfer);
}
.pcShard {
  /* the gold shard at the top-left corner of the frame */
  position: absolute;
  left: 2px;
  top: 2px;
  width: 30px;
  height: 30px;
  background: var(--gold-rim);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 0.95;
}
.pcGlow {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 6%;
  height: 46%;
  background: url("../assets/official/player-card-glow.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.pcPhoto {
  /* the cut-out breaks out above the card; the sides and bottom clip to the frame */
  position: absolute;
  left: -6%;
  right: -6%;
  top: -13%;
  bottom: 30px;
  clip-path: inset(0 calc(6% + 2px) 0 calc(6% + 2px));
}
.pcPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(11, 24, 72, 0.45));
}
.pcSil {
  /* no photo yet: a clean pale-blue silhouette */
  position: absolute;
  left: 2px;
  right: 2px;
  top: 8%;
  bottom: 30px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'><circle cx='50' cy='42' r='26' fill='%2368A4F1'/><path d='M4 140c0-36 20-56 46-56s46 20 46 56z' fill='%2368A4F1'/></svg>") center bottom / 84% auto no-repeat;
  opacity: 0.55;
}
.pcPlate {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 30px;
  background: linear-gradient(180deg, #fff3d9 0%, #e3d9be 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.ign {
  min-width: 0;
  font: 700 22px/30px var(--font-display);
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  color: var(--kd-navy);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.role {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  font: 600 20px/22px var(--font-ui);
  letter-spacing: 0.1em;
  color: rgba(243, 217, 170, 0.85);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role:empty {
  display: none;
}
.portrait,
.portraitInit {
  display: none;
}

/* ------------------------------------------------------------------ flying chip */

.chip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 62; /* above the banners: the last team's chip flies while its banner fades */
  visibility: hidden;
  pointer-events: none;
}
.chipY {
  position: absolute;
  left: 0;
  top: 0;
}
.chipS {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  transform-origin: 50% 50%;
}

/* ------------------------------------------------------------------ banners */

.banner {
  position: absolute;
  left: 410px;
  top: 486px;
  width: 1100px;
  z-index: 60;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.bannerPlate {
  position: relative;
  padding: 24px 60px 26px;
  --cut: 26px;
  --chamfer: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  clip-path: var(--chamfer);
}
.bannerPlate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-rim);
  clip-path: var(--chamfer);
  z-index: -2;
}
.bannerPlate::after {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    radial-gradient(ellipse 600px 200px at 50% 0%, rgba(81, 161, 238, 0.45), rgba(81, 161, 238, 0) 70%),
    linear-gradient(180deg, rgba(30, 60, 162, 0.98), rgba(20, 41, 122, 0.98));
  clip-path: var(--chamfer);
  z-index: -1;
}
.bannerText {
  font: 900 60px/64px var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  filter: drop-shadow(0 3px 0 rgba(120, 76, 20, 0.35));
}
.bannerSub {
  margin-top: 8px;
  font: 600 22px/26px var(--font-ui);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--kd-white);
  text-transform: uppercase;
  visibility: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner[data-kind="void"] .bannerPlate::before {
  background: linear-gradient(160deg, #ffd2b8, #ff7a45 55%, #c8451a);
}
.banner[data-kind="void"] .bannerText {
  background: linear-gradient(180deg, #fff1e6, #ffc39f 60%, #ff7a45);
  -webkit-background-clip: text;
  background-clip: text;
}
.banner[data-kind="complete"] .bannerText {
  font-size: 68px;
  line-height: 72px;
}

/* ------------------------------------------------------------------ overlays */

.tags {
  /* operator tags (REHEARSAL, SAMPLE DATA, MUTED, ...): right-aligned in the strip above the
     graphics-safe area, clear of the counter and the headline */
  position: absolute;
  right: 96px;
  top: 10px;
  text-align: right;
  z-index: 70;
  pointer-events: none;
  line-height: 0;
  white-space: nowrap;
}
.tag {
  display: inline-block;
  margin: 0 0 0 6px;
  padding: 0 9px;
  font: 600 20px/22px var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid rgba(243, 217, 170, 0.6);
  color: var(--kd-champagne);
  background: rgba(11, 24, 72, 0.7);
}
.tag[data-kind="rehearsal"] {
  color: #ffd27a;
  border-color: #ffc45c;
}
.tag[data-kind="sample"] {
  color: #ffc39f;
  border-color: var(--kd-alert);
}
.tag[data-kind="warn"] {
  color: #ffc39f;
  border-color: rgba(255, 122, 69, 0.8);
}
.tag[data-kind="muted"] {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}
.tag[data-kind="info"] {
  color: #d6ecff;
  border-color: rgba(191, 227, 255, 0.7);
}
.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font: 800 150px/1 var(--font-display);
  letter-spacing: 0.22em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.95);
  opacity: 0.08;
  white-space: nowrap;
  z-index: 65;
  pointer-events: none;
  visibility: hidden;
}
.prompt {
  position: absolute;
  left: 50%;
  top: 214px;
  transform: translateX(-50%);
  padding: 14px 40px;
  background: rgba(11, 24, 72, 0.96);
  border: 1px solid var(--kd-champagne);
  border-radius: 3px;
  font: 800 26px/30px var(--font-display);
  letter-spacing: 0.06em;
  color: var(--kd-white);
  white-space: nowrap;
  z-index: 75;
  visibility: hidden;
  box-shadow: 0 8px 40px rgba(11, 24, 72, 0.7);
}
.setup {
  position: absolute;
  left: 96px;
  right: 96px;
  top: 6px;
  padding: 6px 18px;
  font: 600 20px/26px var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--kd-white);
  background: rgba(160, 40, 20, 0.94);
  border: 1px solid rgba(255, 122, 69, 0.8);
  border-radius: 3px;
  z-index: 76;
  visibility: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setup[data-kind="warn"] {
  background: rgba(140, 88, 10, 0.94);
  border-color: rgba(255, 196, 92, 0.9);
}
.guides {
  position: absolute;
  inset: 0;
  z-index: 78;
  pointer-events: none;
  visibility: hidden;
}
.guide {
  position: absolute;
  border: 1px dashed rgba(191, 227, 255, 0.8);
  font: 500 20px/24px var(--font-ui);
  color: #bfe3ff;
  padding: 2px 6px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.guide-safe {
  left: 96px;
  top: 54px;
  width: 1728px;
  height: 972px;
  align-items: flex-start;
  justify-content: center;
}
.guide-facecam {
  left: 1408px;
  top: 892px;
  width: 416px;
  height: 134px;
  border-color: rgba(255, 122, 69, 0.9);
  color: var(--kd-alert);
}
.guide-wheel {
  left: 530px;
  top: 148px;
  width: 860px;
  height: 860px;
  border-color: rgba(255, 246, 223, 0.6);
  color: var(--kd-cream);
}
.guide-reveal {
  left: 550px;
  top: 343px;
  width: 820px;
  height: 470px;
  border-color: rgba(243, 217, 170, 0.6);
  color: var(--kd-champagne);
}
.hud {
  position: absolute;
  left: 700px;
  top: 4px;
  padding: 6px 10px;
  font: 500 15px/19px var(--font-ui);
  color: #bfe3ff;
  background: rgba(11, 24, 72, 0.8);
  border: 1px solid rgba(191, 227, 255, 0.4);
  white-space: pre;
  z-index: 79;
  visibility: hidden;
  pointer-events: none;
}
.help {
  position: absolute;
  inset: 0;
  background: rgba(11, 24, 72, 0.88);
  z-index: 90;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.helpPanel {
  width: 1180px;
  max-height: 940px;
  padding: 28px 44px 32px;
  overflow: hidden;
  --cut: 22px;
}
.helpPanel::after {
  background: linear-gradient(180deg, rgba(30, 60, 162, 0.98), rgba(20, 41, 122, 0.98));
}
.helpPanel h2 {
  margin: 0 0 12px;
  font: 800 40px/44px var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.helpPanel h3 {
  margin: 10px 0 6px;
  font: 600 20px/24px var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kd-champagne);
}
.helpCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.helpPanel dl {
  margin: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 4px 14px;
}
.helpPanel dt {
  font: 800 22px/28px var(--font-display);
  letter-spacing: 0.04em;
  color: var(--kd-white);
  white-space: nowrap;
}
.helpPanel dd {
  margin: 0;
  font: 500 20px/28px var(--font-ui);
  color: rgba(255, 255, 255, 0.9);
}
.helpPanel code {
  font: 600 20px/28px var(--font-ui);
  color: var(--kd-champagne);
}
.helpNote {
  margin: 12px 0 0;
  font: 500 20px/26px var(--font-ui);
  color: rgba(255, 255, 255, 0.9);
}
.helpWarn {
  margin: 0;
  padding-left: 22px;
  font: 500 20px/26px var(--font-ui);
  color: #ffc39f;
  max-height: 160px;
  overflow: hidden;
}
.helpClose {
  margin-top: 14px;
  font: 600 20px/24px var(--font-ui);
  letter-spacing: 0.18em;
  color: var(--kd-champagne);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ reduced motion */

.stage[data-motion="reduced"] .beam,
.stage[data-motion="reduced"] .cloth-bottom,
.stage[data-motion="reduced"] .slotKey::before,
.stage[data-motion="reduced"] .revealGlow {
  animation: none;
}
.stage[data-motion="reduced"] .beam {
  opacity: 0.85;
}
.stage[data-motion="reduced"] .slot[data-mode="target"] .slotKey::before {
  opacity: 0.9;
}
.stage[data-motion="reduced"] .revealGlow {
  opacity: 0.85;
}