/* reveal.css — the payoff. Every vote is a physical chip in the voter's colour.
   Chips fly out of the voter's seat and stack up under the accused, so the
   result is built in front of the room instead of announced to it. */

.reveal__body {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: var(--gap);
}

.board {
  display: flex;
  align-items: flex-end;
  align-self: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 4.4rem);
  padding-bottom: 0.5rem;
}

.column {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  align-content: end;
  transition: transform var(--dur-slow) var(--ease-slam);
}

.column--winner {
  transform: translateY(-1.2rem);
}

/* Reserved height for a full room's votes, so nothing shifts as chips land. */
.column__stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 0.34rem;
  height: 10.4rem;
}

/* A landed vote. Same object as the flying chip, so the flight reads as real. */
.chip {
  width: 3.4rem;
  height: 0.9rem;
  border-radius: 0.28rem;
  background: var(--who, var(--ink));
  box-shadow:
    inset 0 0.1rem 0 rgb(255 255 255 / 0.35),
    0 0.25rem 0.7rem rgb(0 0 0 / 0.55);
}

.chip--flying {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 31;
  width: 3.4rem;
  height: 0.9rem;
  will-change: transform;
}

.column .avatar {
  --size: 8.2rem;
  transition: transform var(--dur) var(--ease-slam), box-shadow var(--dur) linear;
}

.column--hit .avatar {
  transform: scale(1.07);
}

.column--winner .avatar {
  --size: 10.4rem;
}

.column__name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.column__count {
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.7rem;
  color: var(--who, var(--ink));
}

.column__plinth {
  width: 8.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--who, var(--line)) 65%, transparent);
}

/* Two players never queue up: they face off across a lit centre line. */
.board.is-duo {
  position: relative;
  gap: clamp(4rem, 16vw, 16rem);
}

.board.is-duo::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 0;
  left: 50%;
  width: 0.14rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}

.board.is-duo .column .avatar {
  --size: 10.4rem;
}

.board.is-duo .column--winner .avatar {
  --size: 12rem;
}

/* 1-1: nobody is crowned, so both rise the same distance. The lift rides on
   the avatar — the column's own entrance animation (fill: both) owns its
   transform and would erase it. */
.column--tied .avatar {
  transform: translateY(-0.7rem);
  box-shadow:
    0 0 0 0.2rem var(--bg),
    0 0 0 0.42rem var(--who),
    0 0 2.6rem color-mix(in srgb, var(--who) 55%, transparent),
    0 0.8rem 2rem rgb(0 0 0 / 0.5);
}

.reveal__empty {
  align-self: center;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reveal__question {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-dim);
  max-width: 46ch;
}

.reveal__voters {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--gap-lg);
  border-top: 1px solid var(--line-soft);
  padding-top: 1.4rem;
}

.reveal__voters .seats .avatar {
  --size: 3.6rem;
}

.reveal__voters .seat__name {
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* MATCH: the only moment the show shouts. */
.match {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  background:
    radial-gradient(34% 30% at 50% 48%, color-mix(in srgb, var(--spot) 46%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg-sink) 82%, transparent);
  pointer-events: none;
}

.match.is-on {
  display: grid;
}

.match__word {
  font-size: clamp(4rem, 15vw, 16rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 4rem color-mix(in srgb, var(--spot) 80%, transparent);
}

.match__why {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spot);
}

/* ── STANDOFF: the same stinger, the opposite emotion ──────────────────
   1-1 is not a win, so the screen splits instead of celebrating: two lit
   halves, the faces thrown at each other and a bolt down the middle. */

.match.is-standoff {
  gap: 1.4rem;
  background:
    radial-gradient(40% 46% at 21% 50%, color-mix(in srgb, var(--a, var(--hot)) 34%, transparent), transparent 70%),
    radial-gradient(40% 46% at 79% 50%, color-mix(in srgb, var(--b, var(--p2)) 34%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-sink) 88%, transparent);
}

.match.is-standoff .match__word {
  font-size: clamp(2.8rem, 8.5vw, 8.4rem);
  max-width: 14ch;
  text-shadow:
    -0.5rem 0 3rem color-mix(in srgb, var(--a, var(--hot)) 85%, transparent),
    0.5rem 0 3rem color-mix(in srgb, var(--b, var(--p2)) 85%, transparent);
}

/* Neutral ink, not a player colour: the subcopy belongs to neither side. */
.match.is-standoff .match__why {
  font-size: 1.35rem;
  letter-spacing: 0.26em;
  color: var(--ink);
}

.clash {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.4rem, 5vw, 4.4rem);
  width: min(84vw, 76rem);
}

.clash__fighter {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  perspective: 1000px;
}

.clash__fighter .avatar {
  --size: clamp(8rem, 16vh, 13rem);
  box-shadow:
    0 0 0 0.24rem var(--bg-sink),
    0 0 0 0.48rem var(--who),
    0 0 3.4rem color-mix(in srgb, var(--who) 60%, transparent),
    0 1.6rem 3.6rem rgb(0 0 0 / 0.7);
}

.clash__fighter--a .avatar {
  animation: clash-in-left 620ms var(--ease-slam) both;
}

.clash__fighter--b .avatar {
  animation: clash-in-right 620ms var(--ease-slam) both;
}

.clash__name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.clash__split {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(3rem, 6vw, 6rem);
  height: clamp(10rem, 22vh, 18rem);
}

.clash__split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.26rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--a, var(--hot)) 75%, transparent) 24%,
    var(--ink) 50%,
    color-mix(in srgb, var(--b, var(--p2)) 75%, transparent) 76%,
    transparent
  );
  box-shadow: 0 0 2.2rem rgb(255 255 255 / 0.45);
  animation: beam-open 520ms var(--ease-out) both;
}

/* A wider, softer column of light so the split still reads from the sofa. */
.clash__split::after {
  content: "";
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: 50%;
  width: 2.4rem;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgb(244 247 251 / 0.16) 45%,
    rgb(244 247 251 / 0.16) 55%,
    transparent
  );
  filter: blur(0.6rem);
  animation: beam-open 620ms var(--ease-out) both;
}

.clash__bolt {
  position: relative;
  z-index: 1; /* above the soft light column, which paints last */
  width: clamp(2.4rem, 4.6vw, 4.4rem);
  aspect-ratio: 0.52;
  background: linear-gradient(180deg, var(--a, var(--hot)), var(--b, var(--p2)));
  clip-path: polygon(60% 0, 20% 54%, 46% 54%, 32% 100%, 80% 42%, 52% 42%, 70% 0);
  filter: drop-shadow(0 0 1.2rem rgb(255 255 255 / 0.55));
  animation: bolt-strike 640ms var(--ease-slam) both;
}

.clash__wave {
  position: absolute;
  width: 6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.2rem solid rgb(244 247 251 / 0.7);
  animation: shockwave 720ms var(--ease-out) both;
}

@keyframes clash-in-left {
  from {
    opacity: 0;
    transform: translateX(-38%) rotateY(-34deg) scale(0.74);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(16deg) scale(1);
  }
}

@keyframes clash-in-right {
  from {
    opacity: 0;
    transform: translateX(38%) rotateY(34deg) scale(0.74);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(-16deg) scale(1);
  }
}

@keyframes beam-open {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.1);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes bolt-strike {
  0% {
    opacity: 0;
    transform: scale(2.6) rotate(-8deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.92) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes shockwave {
  from {
    opacity: 0.85;
    transform: scale(0.2);
  }
  to {
    opacity: 0;
    transform: scale(5.5);
  }
}

/* Lite pass for 1 GB sticks: same staging, no glows or extra compositing. */
:root[data-perf="lite"] .clash__fighter .avatar {
  box-shadow:
    0 0 0 0.24rem var(--bg-sink),
    0 0 0 0.48rem var(--who);
}

:root[data-perf="lite"] .clash__bolt {
  filter: none;
}

:root[data-perf="lite"] .clash__split::before {
  box-shadow: none;
}

:root[data-perf="lite"] .clash__split::after {
  display: none;
}

:root[data-perf="lite"] .clash__wave {
  display: none;
}

:root[data-perf="lite"] .match.is-standoff .match__word {
  text-shadow: none;
}

/* ---------- Modo ligero: el show sin repintados caros ----------
   Las fichas de voto transicionaban `box-shadow` mientras vuelan (repinta toda
   la ficha por fotograma) y el duelo usa desenfoques. En aparatos flojos se
   quedan solo transform y opacidad. */

:root[data-perf="lite"] .chip,
:root[data-perf="lite"] .chip * {
  box-shadow: none !important;
  filter: none !important;
  transition: transform var(--dur) var(--ease-slam) !important;
}

:root[data-perf="lite"] .reveal__stinger,
:root[data-perf="lite"] .reveal__stinger *,
:root[data-perf="lite"] .clash,
:root[data-perf="lite"] .clash * {
  filter: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

:root[data-perf="lite"] .column--winner,
:root[data-perf="lite"] .column {
  box-shadow: none !important;
}