/* The rules on the TV (screens/rules-overlay.js): over whatever is on stage, readable from 3 m. Navy, Audiowide
 * headings, the body in a plain sans (long lines in Audiowide capitals don't read), gold for In short and values. */

@keyframes rov-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) } to { opacity: 1; transform: translate(-50%, -50%) } }
@keyframes rov-bar { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.rules-ov {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%);
  z-index: 50;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 52px 96px 40px;
  background: #00091f;
  color: #d1d5d8;
  text-transform: none;
  letter-spacing: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.rules-ov.is-entering { animation: rov-in .45s var(--dh-ease-out) both; }

.rov-backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  height: 460px;
  background-size: cover;
  background-position: center 40%;
  opacity: .5;
}
.rov-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 21, 70, .35) 0, rgba(0, 9, 31, .78) 260px, #00091f 440px),
    radial-gradient(1200px 500px at 15% 0, rgba(1, 76, 253, .18), transparent 70%);
}

.rov-head { position: relative; flex: none; }
.rov-head__eye {
  font-family: var(--dh-font-display);
  font-size: 22px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #429bfc;
}
.rov-head__eye em { font-style: normal; color: #ffc93c; }
.rov-head__name {
  margin: 6px 0 18px;
  font-family: var(--dh-font-display);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.rov-short {
  display: flex;
  gap: 28px;
  align-items: baseline;
  padding: 20px 28px;
  border-radius: 20px;
  background: rgba(255, 201, 60, .14);
  border: 2px solid rgba(255, 201, 60, .45);
}
.rov-short b {
  flex: none;
  font-family: var(--dh-font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffc93c;
}
.rov-short p { margin: 0; font-size: 34px; line-height: 1.3; font-weight: 600; color: #fff; }

.rov-body {
  --rov-size: 30px;
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 28px 0 24px;
  overflow: hidden;
  font-size: var(--rov-size);
}

.rov-page { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; height: 100%; align-content: start; }
.rov-page--tables:not(.rov-page--two), .rov-page--one { grid-template-columns: 1fr; }

.rov-sec, .rov-table {
  background: rgba(209, 213, 216, .06);
  border: 2px solid rgba(209, 213, 216, .1);
  border-radius: 20px;
  padding: 22px 28px;
}
.rov-table { border-color: rgba(66, 155, 252, .4); }
.rov-sec h3, .rov-table h3 {
  margin: 0 0 10px;
  font-family: var(--dh-font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #429bfc;
}
.rov-table h3 small { font-size: 18px; color: #8e98a0; }
.rov-sec p { margin: 0 0 .35em; font-size: 1em; line-height: 1.32; color: #e4e8ec; }

.rov-table__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.rov-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 7px 0;
  border-top: 1px solid rgba(209, 213, 216, .12);
  font-size: .9em;
}
.rov-table__cols > div > .rov-row:first-child, .rov-table > .rov-row:first-of-type { border-top: 0; }
.rov-row__lead { flex: none; min-width: 84px; }
.rov-row__text { flex: 1; min-width: 0; }
.rov-row__text b { display: block; color: #fff; font-weight: 700; line-height: 1.2; }
.rov-row__text span { display: block; color: #a9b2b9; font-size: .82em; line-height: 1.25; }
.rov-row__value {
  flex: none;
  font-family: var(--dh-font-display);
  font-size: 1em;
  color: #ffc93c;
  white-space: nowrap;
}
.rov-table__note { margin: 12px 0 0; font-size: .74em; line-height: 1.3; color: #a9b2b9; }

.rov-cards { display: inline-flex; gap: .2em; }
.rov-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1.74em;
  height: 2.1em;
  border-radius: .24em;
  background: #f4f6f8;
  color: #0c1631;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  line-height: 1;
}
.rov-card b { font-size: .87em; font-weight: 800; }
.rov-card i { font-style: normal; font-size: .8em; }
.rov-card.is-red { color: #d11a2a; }
.rov-bed {
  display: inline-block;
  min-width: 72px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #122044;
  border: 1px solid rgba(66, 155, 252, .4);
  font-family: var(--dh-font-display);
  font-size: 24px;
  text-align: center;
  color: #fff;
}

.rov-foot {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--dh-font-display);
  font-size: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8e98a0;
}
.rov-foot__page { color: #fff; font-variant-numeric: tabular-nums; }
.rov-foot__bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(209, 213, 216, .14); overflow: hidden; }
.rov-foot__bar i { display: block; height: 100%; background: #ffc93c; transform-origin: left; transform: scaleX(0); }

/* ── The party intro (src/intro-overlay.js): the host's Play intro, the explainer clip full screen over the lobby ── */
@keyframes intro-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes intro-hint { 0%, 70% { opacity: .85 } 100% { opacity: .45 } }
.intro-ov {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #000;
  overflow: hidden;
  animation: intro-in .4s var(--dh-ease-out) both;
}
.intro-ov__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.intro-ov__hint {
  position: absolute;
  right: 40px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  animation: intro-hint 8s linear forwards;
}
.intro-ov__skip,
.intro-ov__sound {
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(0, 9, 31, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font: 20px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}
.intro-ov__skip::before { content: '\23ED'; margin-right: 10px; opacity: .8; }
.intro-ov__sound { border-color: rgba(255, 201, 60, .7); }

/* ── A one-off moment over the stage (src/moment-overlay.js): the server's art under the stage light on a double ring,
   board segments + rings, never confetti. 8 s, then back to the game (out at 7.6 s); the camera-scoring check card;
   the short checked card. ── */
@keyframes moment-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes moment-out { to { opacity: 0 } }
@keyframes moment-seg { from { fill-opacity: 0 } to { fill-opacity: 1 } }
@keyframes moment-stamp {
  0% { opacity: 0; transform: scale(2) rotate(-3deg); }
  9% { opacity: 1; }
  46% { transform: scale(.95) rotate(.5deg); }
  62% { transform: scale(1.02) rotate(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes moment-pulse {
  0% { transform: scale(1); opacity: .8; border-width: 6px; }
  81% { transform: scale(1.5); opacity: 0; border-width: 1px; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes moment-flash { 0% { opacity: .75 } 100% { opacity: 0 } }
@keyframes moment-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes moment-breathe { 0%, 100% { opacity: .85 } 50% { opacity: 1 } }
.moment-ov {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, #001546, #00091f 70%);
  animation: moment-in .4s var(--dh-ease-out) both, moment-out .4s ease-in 7.6s forwards;
}
.moment-ov__beam {
  position: absolute;
  left: 50%;
  top: -40px;
  width: 760px;
  height: 820px;
  transform: translateX(-50%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 220, 140, .3), rgba(255, 201, 60, 0));
  animation: moment-in .6s ease-out both, moment-breathe 3.2s ease-in-out 1.2s infinite;
}
.moment-ov__stage {
  position: absolute;
  left: 50%;
  top: 130px;
  width: 600px;
  height: 600px;
  transform: translateX(-50%);
}
.moment-ov__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.moment-ov__track { fill: none; stroke: rgba(209, 213, 216, .08); stroke-width: 40; }
.moment-ov__seg { fill-opacity: 0; animation: moment-seg .15s ease-out both; filter: drop-shadow(0 0 10px rgba(255, 201, 60, .35)); }
.moment-ov__seg--r { fill: #c81e32; }
.moment-ov__seg--g { fill: #14804a; }
.moment-ov__wires circle, .moment-ov__wires line { fill: none; stroke: rgba(209, 213, 216, .3); stroke-width: 2; }
.moment-ov__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 40px solid #ffc93c;
  opacity: 0;
  animation: moment-flash .38s ease-out 1.13s both;
}
.moment-ov__pulses i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid #ffc93c;
  opacity: 0;
  animation: moment-pulse 1.6s cubic-bezier(.2, .8, .2, 1) infinite;
}
.moment-ov__pulses i:nth-child(1) { animation-delay: 1.13s; }
.moment-ov__pulses i:nth-child(2) { animation-delay: 1.39s; }
.moment-ov__pulses i:nth-child(3) { animation-delay: 1.65s; }
.moment-ov__artwrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  opacity: 0;
  animation: moment-stamp .5s cubic-bezier(.3, 0, .6, 1) .9s both;
  filter: drop-shadow(0 0 44px rgba(255, 201, 60, .65));
}
.moment-ov__img, .moment-ov__placeholder { width: 100%; height: 100%; display: block; }
.moment-ov__words {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 790px;
  text-align: center;
}
.moment-ov__title {
  font-family: var(--dh-font-display);
  font-size: 84px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ffc93c;
  text-shadow: 0 0 40px rgba(255, 201, 60, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: moment-rise .45s var(--dh-ease-out) 1.7s both;
}
.moment-ov__sub {
  margin-top: 18px;
  font-family: var(--dh-font-display);
  font-size: 32px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d1d5d8;
  animation: moment-rise .45s var(--dh-ease-out) 2.3s both;
}
.moment-ov__tag {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  padding: 10px 26px;
  border-radius: 999px;
  z-index: 2;
  border: 2px solid rgba(255, 154, 60, .8);
  background: linear-gradient(rgba(255, 154, 60, .16), rgba(255, 154, 60, .16)), #00091f;
  color: #ff9a3c;
  font-family: var(--dh-font-display);
  font-size: 24px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* QA captures (?moment=): the end state, held. */
.moment-ov--still, .moment-ov--still * { animation-delay: -3s !important; }
.moment-ov--still { animation: none; }
.moment-ov__img { object-fit: contain; }
.moment-ov__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c8, #ffc93c 45%, #b07a10);
  transform: scale(.8);
}
.moment-ov__player {
  margin-bottom: 12px;
  font-family: var(--dh-font-display);
  font-size: 30px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d1d5d8;
  animation: moment-rise .45s var(--dh-ease-out) 1.5s both;
}
.moment-ov--checked, .moment-ov--check { animation: moment-in .3s var(--dh-ease-out) both; }
.moment-ov--checked { animation: moment-in .3s var(--dh-ease-out) both, moment-out .3s ease-in 3.7s forwards; background: rgba(0, 9, 31, .72); }
.moment-ov--checked { display: flex; align-items: center; justify-content: center; }
.moment-ov__card {
  position: relative;
  width: 820px;
  padding: 56px 64px;
  border-radius: 28px;
  text-align: center;
  background: #0c1631;
  border: 3px solid rgba(47, 212, 122, .6);
  box-shadow: 0 0 60px rgba(47, 212, 122, .2);
  animation: moment-rise .4s var(--dh-ease-out) both;
}
.moment-ov__cardicon {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 6px solid #2fd47a;
  position: relative;
}
.moment-ov__cardicon::after {
  content: '';
  position: absolute;
  left: 30px;
  top: 14px;
  width: 22px;
  height: 44px;
  border: solid #2fd47a;
  border-width: 0 8px 8px 0;
  transform: rotate(45deg);
}
.moment-ov__cardtitle { font-family: var(--dh-font-display); font-size: 56px; color: #fff; letter-spacing: .02em; }
.moment-ov__cardsub { margin-top: 16px; font-size: 30px; color: #d1d5d8; }

/* The camera-scoring check: the board in a progress ring, scan lines sweeping, the darts ticking through. */
@keyframes moment-progress { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes moment-scan { from { transform: translateY(-30%); } to { transform: translateY(130%); } }
@keyframes moment-tick { from { opacity: .35; } to { opacity: 1; border-color: rgba(47, 212, 122, .8); background: rgba(47, 212, 122, .14); } }
@keyframes moment-tick-em { from { opacity: 0; } to { opacity: 1; } }
.moment-ov--check { background: radial-gradient(ellipse 60% 70% at 50% 45%, #001546, #00091f 72%); }
.moment-ov__check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 110px;
}
.moment-ov__dial { position: relative; width: 640px; height: 640px; flex: none; }
.moment-ov__progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.moment-ov__progress-track { fill: none; stroke: rgba(209, 213, 216, .1); stroke-width: 2.2; }
.moment-ov__progress-arc {
  fill: none;
  stroke: #ffc93c;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: moment-progress 5s linear forwards;
}
.moment-ov__face {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50%);
  box-shadow: 0 0 60px rgba(255, 201, 60, .18);
}
.moment-ov__board { width: 100%; height: 100%; display: block; transform: scale(1.35); filter: saturate(.75) brightness(.8); }
.moment-ov__rim { fill: #0b0b0b; }
.moment-ov__bed--k { fill: #1a1a1a; }
.moment-ov__bed--w { fill: #e8dcc0; }
.moment-ov__bed--r { fill: #c81e32; }
.moment-ov__bed--g { fill: #14804a; }
.moment-ov__nums text { fill: #d1d5d8; font: 600 26px system-ui, sans-serif; text-anchor: middle; }
.moment-ov__scan { position: absolute; inset: 0; pointer-events: none; }
.moment-ov__scan i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(66, 155, 252, 0), rgba(66, 155, 252, .32));
  border-bottom: 3px solid rgba(66, 155, 252, .95);
  animation: moment-scan 1.4s linear infinite;
}
.moment-ov__scan i:nth-child(2) { animation-delay: -.7s; opacity: .5; }
.moment-ov__checkwords { width: 720px; }
.moment-ov__eyebrow {
  font-family: var(--dh-font-display);
  font-size: 34px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ffc93c;
}
.moment-ov__line {
  margin-top: 14px;
  font-family: var(--dh-font-display);
  font-size: 72px;
  line-height: 1.05;
  color: #fff;
}
.moment-ov__ticks { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 18px; }
.moment-ov__tick {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid rgba(209, 213, 216, .2);
  background: rgba(209, 213, 216, .06);
  opacity: .35;
  animation: moment-tick .3s ease-out both;
}
.moment-ov__tick b { font-family: var(--dh-font-display); font-size: 34px; color: #fff; font-weight: 400; }
.moment-ov__tick em {
  font-style: normal;
  font-size: 22px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #2fd47a;
  opacity: 0;
  animation: inherit;
  animation-name: moment-tick-em;
}
/* QA captures (?moment=): every kind held at its end state. */
.moment-ov--still, .moment-ov--still * { animation-delay: -3s !important; }
.moment-ov.moment-ov--still { animation: none !important; }