/* ============================================================
   CONNECT FOUR — The Ultimate Showdown
   Title / character-select screen.
   Palette derived entirely from "A Tense Connect Four Showdown.png".
   ============================================================ */

:root {
  --charcoal:      #16130e;  /* Tiago's sweater / the board        */
  --charcoal-deep: #0d0b08;  /* blackout / deepest shadow          */
  --stone:         #8b7d6a;  /* backdrop taupe                     */
  --ivory:         #ece4d4;  /* Rita's shirt                       */
  --grey:          #a99c89;  /* muted warm grey — secondary text   */
  --grey-hi:       #c2b7a5;  /* small text over mid tones          */
  --grey-dim:      #7e7364;  /* rules / quietest details           */

  --accent-red:    #b04a2f;  /* terracotta — the red pieces        */
  --accent-ivory:  #e9e0cf;  /* Rita's accent                      */
  --accent-grey:   #a89a86;  /* spectator accent                   */

  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui:      'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Physical board position in the hero photograph. These are adjusted for
     the different background crops below so the camera always finds it. */
  --entry-board-y: 72%;
  --entry-zoom: 5.6;
  --entry-zoom-mid: 4;
  --entry-duration: 3s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--charcoal-deep);
}

body {
  font-family: var(--font-ui);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

/* ============ OPENING CARD ============ */

.intro {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 80px);
  background:
    radial-gradient(ellipse 62% 54% at 50% 47%, rgba(77, 51, 36, .16), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 34%, rgba(0, 0, 0, .16)),
    var(--charcoal-deep);
  transition: opacity .65s ease, visibility .65s step-end;
}

.intro::before,
.intro::after {
  position: absolute;
  content: '';
  left: 50%;
  width: min(64px, 14vw);
  height: 1px;
  background: rgba(236, 228, 212, .34);
  transform: translateX(-50%);
}

.intro::before { top: clamp(38px, 7vh, 76px); }
.intro::after { bottom: clamp(38px, 7vh, 76px); }

.intro-copy {
  position: relative;
  top: -clamp(8px, 2.5vh, 24px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 760px);
  text-align: center;
}

.intro h1 {
  font-family: var(--font-display);
  max-width: 720px;
  font-size: clamp(44px, 6.1vw, 86px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 5px 38px rgba(0, 0, 0, .48);
  animation: intro-quote-in 1.55s .4s cubic-bezier(.16, 1, .3, 1) backwards;
}

.intro-attribution {
  margin-top: clamp(20px, 3vh, 28px);
  padding-left: .28em;
  font-size: clamp(8px, .72vw, 10px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .28em;
  color: var(--grey-hi);
  text-transform: uppercase;
  animation: intro-detail-in 1s 1.05s ease-out backwards;
}

.intro-enter {
  margin-top: clamp(38px, 6vh, 58px);
  padding: 12px 18px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ivory);
  background: var(--accent-red);
  border: 1px solid var(--accent-red);
  cursor: pointer;
  animation: intro-detail-in 1s 1.35s ease-out backwards;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.intro-enter:hover {
  background: #c05a3d;
  border-color: #c05a3d;
  transform: translateY(-1px);
}

.intro-enter:focus-visible {
  outline: 1px solid var(--ivory);
  outline-offset: 3px;
}

.intro-enter:active { transform: none; }

.intro.is-leaving {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.intro.is-leaving .intro-copy { animation: intro-depart .55s ease both; }

@keyframes intro-quote-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(7px) scale(.99);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes intro-detail-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes intro-depart {
  to { opacity: 0; transform: translateY(-8px); }
}

/* ============ NOW PLAYING ============ */

.now-playing {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 8px 8px 10px;
  color: var(--ivory);
  background: rgba(13, 11, 8, .12);
  border: 0;
  border-left: 1px solid rgba(236, 228, 212, .38);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: none;
  font-family: var(--font-ui);
  text-align: left;
  pointer-events: auto;
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(-10px, 0, 0);
  transform-origin: left center;
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    filter .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
}

.now-playing:hover {
  background: rgba(13, 11, 8, .3);
}

.now-playing::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(236, 228, 212, .65), transparent);
  transform: scaleX(0);
  transform-origin: left;
}

.now-playing.is-visible {
  opacity: .7;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.now-playing.is-visible:hover,
.now-playing.is-visible:focus-within { opacity: 1; }

.now-playing.is-visible::after {
  animation: now-playing-line 4.6s .2s cubic-bezier(.2, .7, .2, 1) both;
}

.now-playing-copy {
  display: flex;
  flex-direction: column;
  width: 104px;
  min-width: 0;
}

.now-playing-artist,
.now-playing-song {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing-artist {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .12em;
}

.now-playing-song {
  font-size: 9px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .18em;
  color: var(--grey-hi);
}

.now-playing-actions {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin-left: auto;
  padding-left: 4px;
}

.now-playing-action {
  min-width: 0;
  padding: 0 7px;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--grey);
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(236, 228, 212, .14);
  cursor: pointer;
  opacity: .76;
  transition: color .2s ease, background .2s ease, opacity .2s ease;
}

.now-playing-volume {
  display: flex;
  align-items: center;
  width: 70px;
  padding: 0 7px;
  border-left: 1px solid rgba(236, 228, 212, .14);
}

.now-playing-volume-slider {
  width: 56px;
  height: 16px;
  margin: 0;
  color: var(--ivory);
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.now-playing-volume-slider::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(236, 228, 212, .42);
}

.now-playing-volume-slider::-webkit-slider-thumb {
  width: 8px;
  height: 8px;
  margin-top: -3.5px;
  background: currentColor;
  border: 1px solid rgba(13, 11, 8, .52);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(236, 228, 212, .08);
  -webkit-appearance: none;
  appearance: none;
}

.now-playing-volume-slider::-moz-range-track {
  height: 1px;
  background: rgba(236, 228, 212, .42);
  border: 0;
}

.now-playing-volume-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: currentColor;
  border: 1px solid rgba(13, 11, 8, .52);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(236, 228, 212, .08);
}

.now-playing-action:hover,
.now-playing-action:focus-visible,
.now-playing.is-muted .now-playing-mute {
  color: var(--ivory);
  background: rgba(236, 228, 212, .06);
  opacity: 1;
}

.now-playing.is-muted {
  color: var(--grey-hi);
}

@keyframes now-playing-line {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { transform: scaleX(1); opacity: 1; }
  82%  { transform: scaleX(1); opacity: .7; transform-origin: right; }
  100% { transform: scaleX(0); opacity: 0; transform-origin: right; }
}

/* ============ STAGE ============ */

.stage { position: fixed; inset: 0; z-index: 1; }

.bg-parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform .45s cubic-bezier(.2, .6, .3, 1);
}

.bg {
  position: absolute;
  inset: -2.5%;   /* bleed so parallax never shows edges */
  /* Bottom-anchored on purpose: the empty wall is cropped, the players,
     the board and the foreground table all stay in frame. */
  background: url("A%20Tense%20Connect%20Four%20Showdown.png") 50% 100% / cover no-repeat;
  filter: saturate(.7) contrast(1.14) brightness(.84);
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.01); }
  to   { transform: scale(1.06); }
}

/* Readability grade: gentle top + bottom falloff, photograph stays hero */
.overlay-grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 70% at 50% 43%, transparent 34%, rgba(8, 7, 5, .52) 100%),
    linear-gradient(180deg, rgba(8, 7, 5, .52) 0%, rgba(8, 7, 5, .08) 28%, transparent 44%),
    linear-gradient(0deg, rgba(8, 7, 5, .72) 0%, rgba(8, 7, 5, .22) 24%, transparent 44%);
}

/* Per-character scene emphasis. The selected subject remains clear while the
   rest of the photograph falls decisively into shadow. */
.focus {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}

.focus-tiago {
  background: radial-gradient(ellipse 27% 46% at 24% 36%,
    transparent 0%, rgba(13, 10, 7, .12) 32%,
    rgba(13, 10, 7, .74) 64%, rgba(13, 10, 7, .94) 100%);
}

.focus-rita {
  background: radial-gradient(ellipse 27% 46% at 78% 36%,
    transparent 0%, rgba(13, 10, 7, .12) 32%,
    rgba(13, 10, 7, .74) 64%, rgba(13, 10, 7, .94) 100%);
}

.focus-spectator {
  background: radial-gradient(ellipse 22% 38% at 50% 72%,
    transparent 0%, rgba(13, 10, 7, .18) 32%,
    rgba(13, 10, 7, .78) 64%, rgba(13, 10, 7, .95) 100%);
}

body[data-focus="tiago"]     .focus-tiago     { opacity: .72; }
body[data-focus="rita"]      .focus-rita      { opacity: .72; }
body[data-focus="spectator"] .focus-spectator { opacity: .72; }

body.has-selection[data-focus="tiago"]     .focus-tiago,
body.has-selection[data-focus="rita"]      .focus-rita,
body.has-selection[data-focus="spectator"] .focus-spectator { opacity: 1; }

/* Cinematic darkening behind the UI when leaving for the match */
.blackout {
  position: absolute;
  inset: 0;
  background: var(--charcoal-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease .15s;
}

body.leaving .blackout { opacity: .93; }

/* ============ UI FRAME ============ */

.ui { position: fixed; inset: 0; z-index: 2; }

/* --- Title block: sits in the photograph's upper negative space --- */

.title-block {
  position: absolute;
  top: clamp(28px, 5.5vh, 64px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity .35s ease .45s;
}

body.entered .title-block { opacity: 1; }
body.leaving .title-block { opacity: 0; transform: translate(-50%, -10px); transition-delay: 0s; }

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(45px, 6.5vw, 94px);
  line-height: .92;
  letter-spacing: -.055em;
  text-shadow: 0 4px 34px rgba(0, 0, 0, .62);
  white-space: nowrap;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(7px) scale(.985);
}

body.entered .title {
  animation: film-title-in 1.85s .5s cubic-bezier(.16, 1, .3, 1) both;
}

.subtitle {
  margin-top: 0;
  padding-left: .48em;
  font-size: clamp(8px, .7vw, 11px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .48em;
  color: var(--grey-hi);
  text-shadow: 0 1px 12px rgba(10, 8, 5, .6);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
}

body.entered .subtitle {
  animation: film-subtitle-in 1.15s 1.35s ease-out both;
}

@keyframes film-title-in {
  0% {
    opacity: 0;
    filter: blur(7px);
    letter-spacing: -.025em;
    transform: translateY(7px) scale(.985);
  }
  45% { opacity: .82; }
  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: -.055em;
    transform: none;
  }
}

@keyframes film-subtitle-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: .82; transform: none; }
}

/* --- Character select: docked low, over the foreground table --- */

.select {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 34px);
  width: min(1180px, calc(100vw - 64px));
  transform: translate(-50%, 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition:
    opacity 1s cubic-bezier(.16, 1, .3, 1) 1.75s,
    transform 1s cubic-bezier(.16, 1, .3, 1) 1.75s;
}

body.entered .select { opacity: 1; transform: translate(-50%, 0); }

.cards {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.card {
  position: relative;
  display: block;
  min-width: 190px;
  padding: 0 0 7px;

  font-family: var(--font-ui);
  color: var(--ivory);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;

  transition: color .25s ease, opacity .4s ease, transform .25s ease;
}

.card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.card:hover { transform: translateY(-3px); }
.card:hover::after,
.card.selected::after { transform: scaleX(1); }

body.has-selection .card:not(.selected) { opacity: .16; }
body.has-selection .card:not(.selected):hover { opacity: .62; }

.card .name {
  display: block;
  font-size: clamp(42px, 4.7vw, 68px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.075em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .7);
}

body.leaving .card:not(.selected) { opacity: 0; }
body.leaving .card.selected {
  opacity: 0;
  transform: scale(1.08);
  transition-delay: 0s, 0s, 0s, 0s, .6s;
}

.select-status {
  min-height: 13px;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .26em;
  text-indent: .26em;
  color: var(--grey-hi);
  text-align: center;
}

.select-status.error { color: #db846b; }

/* ============ PLAYER AUTHENTICATION ============ */

.auth {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 11, 8, .74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .22s ease;
}

.auth[hidden] { display: none; }
.auth.show { opacity: 1; }

.auth-panel {
  width: min(330px, 100%);
  padding: 28px;
  color: var(--ivory);
  background: rgba(22, 19, 14, .96);
  border: 1px solid rgba(236, 228, 212, .22);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
  transform: translateY(8px);
  transition: transform .22s ease;
}

.auth.show .auth-panel { transform: none; }

.auth-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: .06em;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  font: 500 16px var(--font-ui);
  letter-spacing: .16em;
  color: var(--ivory);
  caret-color: var(--accent-red);
  background: rgba(13, 11, 8, .72);
  border: 1px solid rgba(236, 228, 212, .24);
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-input::placeholder {
  color: var(--grey);
  letter-spacing: .08em;
  opacity: 1;
}

.auth-input:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 2px rgba(176, 74, 47, .16);
}

.auth-error {
  min-height: 16px;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: .2em;
  color: #db846b;
}

.auth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.auth-cancel,
.auth-submit {
  padding: 10px 16px;
  font: 500 10px var(--font-ui);
  letter-spacing: .24em;
  color: var(--grey-hi);
  background: transparent;
  border: 1px solid rgba(236, 228, 212, .22);
  cursor: pointer;
}

.auth-submit {
  color: var(--ivory);
  background: var(--accent-red);
  border-color: var(--accent-red);
}

.auth-cancel:disabled,
.auth-submit:disabled { opacity: .55; cursor: wait; }

/* --- Focus visibility (keyboard) --- */

.card:focus-visible,
.now-playing-action:focus-visible,
.now-playing-volume-slider:focus-visible,
.vs-back:focus-visible,
.auth-cancel:focus-visible,
.auth-submit:focus-visible {
  outline: 1px solid var(--ivory);
  outline-offset: 3px;
}

/* ============ VS SCREEN ============ */

.vs {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transition: opacity .6s ease;
}

.vs[hidden] { display: none; }
.vs.show { opacity: 1; }

.vs-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .46em;
  text-indent: .46em;
  color: var(--grey);
}

.vs-row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 4vw, 56px);
}

.vs-name {
  font-family: var(--font-display);
  font-size: min(9vw, 12vh, 116px);
  letter-spacing: .05em;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .5);
}

.vs-mark {
  font-family: var(--font-display);
  font-size: min(4.5vw, 6.5vh, 52px);
  color: var(--accent-red);
}

.vs.show .vs-name { animation: vs-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.vs.show .vs-name:last-child { animation-delay: .12s; }

@keyframes vs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.vs-sub {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--grey);
}

.vs-back {
  margin-top: 22px;
  padding: 0 0 3px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .34em;
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.vs-back:hover { color: var(--ivory); border-bottom-color: var(--grey-dim); }

/* ============ RESPONSIVE ============ */

/* Ultrawide: re-anchor so faces stay in frame */
@media (min-aspect-ratio: 21/10) {
  :root {
    --entry-board-y: 80%;
    --entry-zoom: 6.2;
    --entry-zoom-mid: 4.4;
  }
  .bg { background-position: 50% 62%; }
}

@media (max-width: 900px) {
  .select { width: calc(100vw - 48px); }
  .card { min-width: 0; }
  .card .name { font-size: clamp(30px, 4.8vw, 44px); }
}

@media (max-width: 640px) {
  :root {
    --entry-board-y: 76%;
    --entry-zoom: 2.85;
    --entry-zoom-mid: 2.2;
  }
  .bg { background-position: 50% 60%; }

  .now-playing {
    top: clamp(78px, 13vh, 104px);
    right: 12px;
    bottom: auto;
    left: auto;
    gap: 6px;
    max-width: calc(100vw - 24px);
    padding-right: 6px;
    transform: translate3d(0, -8px, 0);
  }

  .now-playing.is-visible { transform: none; }
  .now-playing-copy { width: 76px; }
  .now-playing-actions { padding-left: 0; }
  .now-playing-action {
    padding-right: 5px;
    padding-left: 5px;
    font-size: 6px;
    letter-spacing: .13em;
  }
  .now-playing-volume {
    width: 58px;
    padding-right: 5px;
    padding-left: 5px;
  }
  .now-playing-volume-slider { width: 48px; }

  /* deeper bottom falloff so the docked selector stays readable */
  .overlay-grade {
    background:
      radial-gradient(ellipse 80% 68% at 50% 42%, transparent 26%, rgba(8, 7, 5, .58) 100%),
      linear-gradient(180deg, rgba(8, 7, 5, .54) 0%, rgba(8, 7, 5, .12) 26%, transparent 44%),
      linear-gradient(0deg, rgba(8, 7, 5, .82) 0%, rgba(8, 7, 5, .4) 32%, transparent 58%);
  }

  .title-block { gap: 6px; }
  .title { font-size: min(11vw, 8vh); }
  .intro h1 {
    max-width: 520px;
    font-size: clamp(38px, 11vw, 54px);
    line-height: 1.05;
  }
  .intro-enter { margin-top: clamp(38px, 7vh, 58px); }

  .select {
    bottom: 28px;
    align-items: flex-start;
  }
  .cards {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .card {
    width: auto;
    padding: 0 0 5px;
  }
  .card .name { font-size: clamp(34px, 11vw, 48px); }
  .select-status { text-align: left; }
}

@media (max-height: 640px) and (min-width: 641px) {
  .title { font-size: min(6vw, 12vh); }
  .title-block { top: 12px; }
  .select { bottom: 12px; }
  .card .name { font-size: min(3.2vw, 7vh); }
}

/* ============ REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
  .bg-parallax { transition: none; }
  .now-playing.is-visible::after { animation: none; }
  .vs.show .vs-name { animation: none; }
  .intro-copy,
  .intro h1,
  .intro-attribution,
  .intro-enter,
  .intro.is-leaving .intro-copy {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
  .title,
  .subtitle {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   POST-SELECTION — cinematic match experience
   ============================================================ */

.film-grain {
  position: fixed;
  inset: -35%;
  z-index: 20;
  opacity: .026;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain-shift .24s steps(2) infinite;
}

@keyframes grain-shift {
  0% { transform: translate3d(-2%, 1%, 0); }
  33% { transform: translate3d(2%, -3%, 0); }
  66% { transform: translate3d(1%, 3%, 0); }
  100% { transform: translate3d(-3%, -1%, 0); }
}

.experience-screen {
  position: fixed;
  inset: 0;
  z-index: 8;
  color: var(--ivory);
}

.experience-screen[hidden] { display: none !important; }

body.in-experience .stage { background: var(--charcoal-deep); }
body.in-experience .now-playing {
  top: auto;
  bottom: 18px;
}
body.in-lock .blackout { opacity: .5; }
body.in-coin .blackout { opacity: .86; }
body.in-vs .blackout { transition: none; }
body.in-match .blackout,
body.in-result .blackout { opacity: 1; transition: none; }

.film-kicker {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--grey);
}

.quiet-action,
.editorial-button {
  font: 500 9px/1 var(--font-ui);
  letter-spacing: .34em;
  color: var(--ivory);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.quiet-action {
  padding: 5px 0;
  border-bottom: 1px solid rgba(236, 228, 212, .34);
}

/* ---------- lock-in ---------- */

.lock-in {
  display: grid;
  place-items: center;
  background: rgba(13, 11, 8, .08);
  opacity: 0;
  transition: opacity .7s ease;
}

.lock-in.show { opacity: 1; }

.lock-in-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lock-wait {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: .33em;
  color: var(--grey-hi);
}

.waiting-dots { display: flex; gap: 7px; }
.waiting-dots i {
  width: 8px;
  height: 8px;
  background: var(--accent-red);
  border-radius: 50%;
  opacity: .2;
  animation: waiting-dot 1.8s ease-in-out infinite;
}
.waiting-dots i:nth-child(2) { animation-delay: .28s; }
.waiting-dots i:nth-child(3) { animation-delay: .56s; }

@keyframes waiting-dot {
  0%, 65%, 100% { opacity: .18; transform: scale(.72); }
  25% { opacity: 1; transform: scale(1); }
}

.lock-quote {
  margin-top: 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  color: var(--grey);
}

.lock-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 28px;
}
.lock-in.has-connection-error .waiting-dots { display: none; }

/* ---------- rigged coin toss ---------- */

.coin-toss {
  --coin-toss-duration: 4200ms;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(176, 74, 47, .1), transparent 31%),
    rgba(13, 11, 8, .42);
  opacity: 0;
  transition: opacity .55s ease;
  perspective: 900px;
}

.coin-toss.show { opacity: 1; }

.coin-toss-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 680px);
  text-align: center;
}

.coin-toss h2 {
  margin-top: 16px;
  font: 300 clamp(34px, 5vw, 68px)/1.04 var(--font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.coin-scene {
  position: relative;
  width: clamp(104px, 13vw, 156px);
  aspect-ratio: 1;
  margin: clamp(34px, 6vh, 58px) 0 38px;
  transform-style: preserve-3d;
}

.coin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.coin::after {
  position: absolute;
  inset: 2px;
  content: '';
  border: 5px solid #7f321f;
  border-radius: 50%;
  transform: translateZ(-4px);
}

.coin-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 10px 17px;
  color: var(--ivory);
  background-color: #7d3929;
  border: 3px solid #d17658;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(96, 31, 18, .42), inset -9px -12px 18px rgba(48, 18, 11, .28);
  backface-visibility: hidden;
  overflow: hidden;
}

.coin-face[data-player="tiago"] {
  background-image:
    linear-gradient(0deg, rgba(50, 19, 13, .94) 0%, rgba(68, 27, 19, .28) 48%, rgba(30, 23, 19, .08) 70%),
    url("A%20Tense%20Connect%20Four%20Showdown.png");
  background-position: center, 18% 33%;
  background-size: auto, auto 340%;
  filter: saturate(.76) contrast(1.08);
}

.coin-face[data-player="rita"] {
  background-image:
    linear-gradient(0deg, rgba(50, 19, 13, .94) 0%, rgba(68, 27, 19, .24) 48%, rgba(30, 23, 19, .05) 70%),
    url("A%20Tense%20Connect%20Four%20Showdown.png");
  background-position: center, 82% 33%;
  background-size: auto, auto 340%;
  filter: saturate(.68) sepia(.08) contrast(1.08);
}

.coin-face small {
  font: 600 clamp(6px, .55vw, 8px)/1 var(--font-ui);
  letter-spacing: .34em;
  text-indent: .34em;
  color: rgba(236, 228, 212, .7);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.coin-face strong {
  font: 700 clamp(12px, 1.4vw, 17px)/1 'Arial Narrow', var(--font-ui);
  letter-spacing: .16em;
  text-indent: .16em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

.coin-heads { transform: rotateY(0) translateZ(4px); }
.coin-tails { transform: rotateY(180deg) translateZ(4px); }

.coin-shadow {
  position: absolute;
  right: 8%;
  bottom: -28%;
  left: 8%;
  height: 16%;
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  filter: blur(8px);
}

.coin-actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(52px, 8vh, 78px);
}

.coin-actions .coin-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: clamp(112px, 14vw, 146px);
  padding: 0 4px 10px;
  color: var(--ivory);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(236, 228, 212, .28);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .25s ease;
}

.coin-choice-disc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: clamp(104px, 13vw, 136px);
  aspect-ratio: 1;
  padding: 0 10px 17px;
  color: rgba(236, 228, 212, .82);
  background-color: #7d3929;
  border: 2px solid #d17658;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px rgba(74, 25, 15, .38),
    inset -10px -13px 18px rgba(45, 16, 9, .3),
    0 14px 26px rgba(0, 0, 0, .28);
  transition: filter .25s ease, box-shadow .25s ease, transform .25s ease;
}

.coin-choice-disc::before,
.coin-choice-disc::after {
  position: absolute;
  inset: 4px;
  content: '';
  border: 4px solid rgba(96, 31, 18, .42);
  border-radius: 50%;
}

.coin-choice-disc::after {
  inset: auto 16% 8px;
  height: 42%;
  border: 0;
  background: linear-gradient(transparent, rgba(39, 14, 9, .42));
  border-radius: 0 0 50% 50%;
}

.coin-choice-disc[data-player="tiago"] {
  background-image:
    linear-gradient(0deg, rgba(50, 19, 13, .94) 0%, rgba(68, 27, 19, .28) 48%, rgba(30, 23, 19, .08) 70%),
    url("A%20Tense%20Connect%20Four%20Showdown.png");
  background-position: center, 18% 33%;
  background-size: auto, auto 340%;
  filter: saturate(.76) contrast(1.08);
}

.coin-choice-disc[data-player="rita"] {
  background-image:
    linear-gradient(0deg, rgba(50, 19, 13, .94) 0%, rgba(68, 27, 19, .24) 48%, rgba(30, 23, 19, .05) 70%),
    url("A%20Tense%20Connect%20Four%20Showdown.png");
  background-position: center, 82% 33%;
  background-size: auto, auto 340%;
  filter: saturate(.68) sepia(.08) contrast(1.08);
}

.coin-choice-disc small,
.coin-choice-disc b {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

.coin-choice-disc small {
  font: 600 clamp(6px, .55vw, 8px)/1 var(--font-ui);
  letter-spacing: .34em;
  text-indent: .34em;
  color: rgba(236, 228, 212, .7);
}

.coin-choice-disc b {
  font: 700 clamp(12px, 1.4vw, 17px)/1 'Arial Narrow', var(--font-ui);
  letter-spacing: .16em;
  text-indent: .16em;
}

.coin-actions .coin-choice > strong {
  font: 500 10px/1 var(--font-ui);
  letter-spacing: .32em;
  text-indent: .32em;
}

.coin-actions .coin-choice:hover,
.coin-actions .coin-choice:focus-visible {
  color: #d4775b;
  border-color: var(--accent-red);
  outline: none;
  transform: translateY(-2px);
}

.coin-actions .coin-choice:hover .coin-choice-disc,
.coin-actions .coin-choice:focus-visible .coin-choice-disc {
  filter: saturate(1.18) brightness(1.07);
  box-shadow:
    inset 0 0 0 5px rgba(74, 25, 15, .34),
    inset -10px -13px 18px rgba(45, 16, 9, .24),
    0 18px 34px rgba(0, 0, 0, .38),
    0 0 0 2px rgba(209, 118, 88, .18);
  transform: rotate(-2deg) scale(1.035);
}

.coin-actions .coin-choice:last-child:hover .coin-choice-disc,
.coin-actions .coin-choice:last-child:focus-visible .coin-choice-disc { transform: rotate(2deg) scale(1.035); }

.coin-actions .coin-choice:disabled { opacity: .38; cursor: wait; }
.coin-actions > span { font: italic 11px/1 Georgia, serif; color: var(--grey-dim); }

.coin-status {
  min-height: 12px;
  margin-top: 25px;
  font-size: 8px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--grey);
}

.coin-result {
  position: absolute;
  top: calc(50% + clamp(112px, 16vh, 150px));
  left: 50%;
  opacity: 0;
  transform: translate(-50%, 8px);
}

.coin-result p {
  margin-bottom: 9px;
  font-size: 9px;
  letter-spacing: .46em;
  text-indent: .46em;
  color: var(--grey-hi);
}

.coin-result strong {
  display: block;
  white-space: nowrap;
  font: 700 clamp(22px, 3vw, 38px)/1 'Arial Narrow', var(--font-display);
  letter-spacing: .08em;
}

.coin-toss.is-tossing .coin-actions { display: none; }
.coin-toss.is-tossing .coin-status { animation: coin-status var(--coin-toss-duration) ease both; }
.coin-toss.is-tossing .coin-scene { animation: coin-flight var(--coin-toss-duration) cubic-bezier(.2, .68, .22, 1) both; }
.coin-toss.is-tossing .coin-shadow { animation: coin-shadow var(--coin-toss-duration) ease both; }
.coin-toss[data-result="heads"].is-tossing .coin { animation: coin-spin-heads var(--coin-toss-duration) cubic-bezier(.18, .62, .2, 1) both; }
.coin-toss[data-result="tails"].is-tossing .coin { animation: coin-spin-tails var(--coin-toss-duration) cubic-bezier(.18, .62, .2, 1) both; }
.coin-toss.is-tossing .coin-result { animation: coin-verdict var(--coin-toss-duration) ease both; }

@keyframes coin-flight {
  0% { transform: translateY(0) scale(1); }
  18% { transform: translateY(-14vh) scale(.92); }
  48% { transform: translateY(3vh) scale(1); }
  61% { transform: translateY(-3vh) scale(.98); }
  72%, 100% { transform: translateY(0) scale(1); }
}

@keyframes coin-spin-heads {
  0% { transform: rotateX(8deg) rotateY(0); }
  48% { transform: rotateX(14deg) rotateY(1260deg); }
  72%, 100% { transform: rotateX(8deg) rotateY(1800deg); }
}

@keyframes coin-spin-tails {
  0% { transform: rotateX(8deg) rotateY(0); }
  48% { transform: rotateX(14deg) rotateY(1440deg); }
  72%, 100% { transform: rotateX(8deg) rotateY(1980deg); }
}

@keyframes coin-shadow {
  0%, 72%, 100% { opacity: .72; transform: scale(1); }
  18% { opacity: .16; transform: scale(.45); }
  48% { opacity: .85; transform: scale(1.08); }
  61% { opacity: .38; transform: scale(.72); }
}

@keyframes coin-status {
  0%, 18% { opacity: 1; }
  32%, 100% { opacity: 0; }
}

@keyframes coin-verdict {
  0%, 71% { opacity: 0; transform: translate(-50%, 8px); filter: blur(3px); }
  80%, 100% { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
}

/* ---------- cinematic encounter transition ---------- */

.vs {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  opacity: 1;
  transition: none;
}

.vs-sequence {
  position: absolute;
  inset: 0;
}

.cinema-bars span {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 8;
  height: clamp(24px, 7vh, 72px);
  background: #080705;
  transform: scaleY(0);
  pointer-events: none;
}
.cinema-bars span:first-child { top: 0; transform-origin: top; }
.cinema-bars span:last-child { bottom: 0; transform-origin: bottom; }
.vs.play .cinema-bars span { animation: encounter-bars var(--entry-duration) ease both; }

@keyframes encounter-bars {
  0% { transform: scaleY(0); }
  5%, 78% { transform: scaleY(1); }
  92%, 100% { transform: scaleY(0); }
}

.encounter-portraits {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.encounter-portrait {
  position: absolute;
  inset: -3%;
  background: url("A%20Tense%20Connect%20Four%20Showdown.png") 50% 100% / cover no-repeat;
  opacity: 0;
  will-change: clip-path, filter, opacity, transform;
}

.encounter-tiago {
  clip-path: polygon(0 0, 56% 0, 48% 100%, 0 100%);
  transform-origin: 23% 42%;
}

.encounter-rita {
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 48% 100%);
  transform-origin: 78% 42%;
}

.vs.play .encounter-tiago { animation: encounter-tiago var(--entry-duration) cubic-bezier(.16, .76, .2, 1) both; }
.vs.play .encounter-rita { animation: encounter-rita var(--entry-duration) cubic-bezier(.16, .76, .2, 1) both; }

@keyframes encounter-tiago {
  0%, 3% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: scale(1.2) translateX(-2%); filter: saturate(.15) contrast(1.35) brightness(.48); }
  10% { opacity: 1; clip-path: polygon(0 0, 56% 0, 48% 100%, 0 100%); }
  16%, 38% { opacity: 1; transform: scale(1.11); filter: saturate(.52) contrast(1.22) brightness(.72); }
  45% { opacity: .72; transform: scale(1.04); filter: saturate(.35) contrast(1.3) brightness(.52); }
  53%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes encounter-rita {
  0%, 13% { opacity: 0; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transform: scale(1.2) translateX(2%); filter: saturate(.15) contrast(1.35) brightness(.48); }
  20% { opacity: 1; clip-path: polygon(56% 0, 100% 0, 100% 100%, 48% 100%); }
  26%, 38% { opacity: 1; transform: scale(1.11); filter: saturate(.52) contrast(1.22) brightness(.72); }
  45% { opacity: .72; transform: scale(1.04); filter: saturate(.35) contrast(1.3) brightness(.52); }
  53%, 100% { opacity: 0; transform: scale(1); }
}

.encounter-slash {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 50%;
  z-index: 5;
  width: 1px;
  background: linear-gradient(transparent, rgba(236, 228, 212, .9) 30%, #fff 50%, rgba(176, 74, 47, .8) 70%, transparent);
  box-shadow: 0 0 18px rgba(236, 228, 212, .7), 0 0 70px rgba(176, 74, 47, .35);
  opacity: 0;
  transform: rotate(7deg) scaleY(.2);
  pointer-events: none;
}

.vs.play .encounter-slash { animation: encounter-slash var(--entry-duration) ease both; }

@keyframes encounter-slash {
  0%, 35% { opacity: 0; transform: rotate(7deg) scaleY(.2); }
  39% { opacity: 1; transform: rotate(7deg) scaleY(1); }
  43% { opacity: .55; }
  49%, 100% { opacity: 0; transform: rotate(7deg) scaleY(1.2); }
}

/* Once the authoritative countdown begins, drive the camera into the board
   that already exists in the photograph. The transform origin is the board,
   so it remains pinned while the rest of the scene falls out of frame. */
body.entering-game .bg-parallax {
  transform: none !important;
  transition: none;
}

body.entering-game .bg {
  transform-origin: 50% var(--entry-board-y);
  animation: enter-photo var(--entry-duration) cubic-bezier(.46, .03, .22, 1) both;
  will-change: transform, filter;
}

body.entering-game .overlay-grade {
  animation: entry-grade var(--entry-duration) ease both;
}

body.entering-game .blackout {
  animation: entry-blackout var(--entry-duration) linear both;
}

@keyframes enter-photo {
  0%, 45% { transform: scale(1.025); filter: saturate(.48) contrast(1.2) brightness(.52) blur(0); }
  53%  { transform: scale(1.08); filter: saturate(.72) contrast(1.14) brightness(.82) blur(0); }
  76%  { transform: scale(1.9); filter: saturate(.66) contrast(1.2) brightness(.76) blur(0); }
  92%  { transform: scale(var(--entry-zoom-mid)); filter: saturate(.55) contrast(1.35) brightness(.58) blur(.4px); }
  100% { transform: scale(var(--entry-zoom)); filter: saturate(.4) contrast(1.5) brightness(.24) blur(4px); }
}

@keyframes entry-grade {
  0%, 44% { opacity: .72; }
  56%  { opacity: .28; }
  78%  { opacity: .12; }
  100% { opacity: 1; }
}

@keyframes entry-blackout {
  0%   { opacity: .72; }
  8%, 40%  { opacity: .26; }
  52%  { opacity: .58; }
  67%  { opacity: .08; }
  92%  { opacity: .34; }
  100% { opacity: 1; }
}

.vs::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% var(--entry-board-y), rgba(236, 228, 212, .28), transparent 5%),
    radial-gradient(circle at 50% var(--entry-board-y), transparent 0 7%, rgba(13, 11, 8, .16) 22%, rgba(13, 11, 8, .76) 72%);
}

.vs.play::after {
  animation: entry-lens var(--entry-duration) ease-in both;
}

@keyframes entry-lens {
  0%, 56% { opacity: 0; transform: scale(1); }
  72%     { opacity: .45; }
  91%     { opacity: .78; transform: scale(1.18); }
  100%    { opacity: 1; transform: scale(1.7); }
}

.entry-kicker {
  position: absolute;
  top: clamp(46px, 9vh, 90px);
  left: 50%;
  z-index: 6;
  font: 500 9px/1 var(--font-ui);
  letter-spacing: .52em;
  text-indent: .52em;
  color: var(--grey-hi);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.vs.play .entry-kicker {
  animation: entry-kicker var(--entry-duration) ease both;
}

@keyframes entry-kicker {
  0%       { opacity: 0; transform: translate(-50%, -8px); letter-spacing: .72em; }
  6%, 35%  { opacity: 1; transform: translate(-50%, 0); letter-spacing: .52em; }
  43%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}

.entry-target {
  position: absolute;
  top: var(--entry-board-y);
  left: 50%;
  z-index: 6;
  width: clamp(118px, 19vw, 292px);
  aspect-ratio: 1.22 / 1;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.entry-target span {
  position: absolute;
  width: 19px;
  height: 19px;
  border-color: rgba(236, 228, 212, .72);
  border-style: solid;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .7));
}
.entry-target span:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.entry-target span:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.entry-target span:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.entry-target span:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.vs.play .entry-target {
  animation: target-lock var(--entry-duration) cubic-bezier(.35, .05, .16, 1) both;
}

@keyframes target-lock {
  0%, 55%  { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  62%, 70% { opacity: .88; transform: translate(-50%, -50%) scale(1); }
  84%      { opacity: .48; transform: translate(-50%, -50%) scale(1.7); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}

.vs-name,
.vs-mark,
.vs-title-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: 0;
  z-index: 3;
  text-shadow: 0 7px 45px rgba(0, 0, 0, .72);
}

.vs-name {
  top: auto;
  bottom: clamp(72px, 12vh, 126px);
  display: flex;
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.vs-name small {
  margin-bottom: 9px;
  font: 500 clamp(7px, .65vw, 9px)/1 var(--font-ui);
  letter-spacing: .42em;
  color: var(--grey-hi);
}

.vs-name strong {
  font: 700 clamp(54px, 8vw, 118px)/.75 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.055em;
}

.vs-tiago { right: auto; left: clamp(30px, 7vw, 110px); }
.vs-rita { right: clamp(30px, 7vw, 110px); left: auto; align-items: flex-end; text-align: right; }

.vs-rita strong { color: var(--accent-ivory); }
.vs-tiago strong { color: #d07154; }

.vs-mark span {
  display: grid;
  width: clamp(60px, 7vw, 92px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(236, 228, 212, .5);
  border-radius: 50%;
  background: rgba(13, 11, 8, .62);
  box-shadow: 0 0 0 8px rgba(13, 11, 8, .2), 0 0 50px rgba(176, 74, 47, .2);
}

.vs-mark {
  font: 400 clamp(20px, 2.5vw, 38px)/1 Georgia, serif;
  font-style: italic;
  color: var(--grey);
}

.vs-title-card { align-content: center; justify-items: center; text-align: center; }
.encounter-command {
  margin-bottom: 18px;
  font: italic 400 clamp(15px, 1.5vw, 22px)/1 Georgia, serif;
  letter-spacing: .14em;
  color: #d07154;
}
.vs-title-card h2 {
  width: 100%;
  font: 700 clamp(58px, 9vw, 132px)/.85 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.055em;
  text-align: center;
  white-space: nowrap;
}
.vs-title-card p {
  margin-top: 22px;
  font-size: 9px;
  letter-spacing: .38em;
  color: var(--grey-hi);
}
.vs-title-card p + p {
  margin-top: 9px;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  letter-spacing: .12em;
  color: var(--grey-dim);
}

.vs.play .vs-tiago { animation: entry-tiago var(--entry-duration) ease both; }
.vs.play .vs-mark { animation: entry-vs var(--entry-duration) ease both; }
.vs.play .vs-rita { animation: entry-rita var(--entry-duration) ease both; }
.vs.play .vs-title-card { animation: entry-title var(--entry-duration) ease both; }

@keyframes entry-tiago {
  0%, 7% { opacity: 0; transform: translateX(-30px); filter: blur(7px); }
  13%, 37% { opacity: 1; transform: translateX(0); filter: blur(0); }
  44%, 100% { opacity: 0; transform: translateX(-12px); filter: blur(2px); }
}

@keyframes entry-vs {
  0%, 28% { opacity: 0; transform: scale(.72) rotate(-8deg); filter: blur(4px); }
  36%, 43% { opacity: 1; transform: scale(1); filter: blur(0); }
  50%, 100% { opacity: 0; transform: scale(1.3); filter: blur(3px); }
}

@keyframes entry-rita {
  0%, 17% { opacity: 0; transform: translateX(30px); filter: blur(7px); }
  23%, 37% { opacity: 1; transform: translateX(0); filter: blur(0); }
  44%, 100% { opacity: 0; transform: translateX(12px); filter: blur(2px); }
}

@keyframes entry-title {
  0%, 51% { opacity: 0; transform: scale(.88); filter: blur(8px); }
  59%, 72% { opacity: 1; transform: scale(1); filter: blur(0); }
  84%, 100% { opacity: 0; transform: scale(1.14); filter: blur(4px); }
}

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

.match {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 72% at 50% 46%, rgba(73, 65, 52, .18), transparent 72%),
    #0d0b08;
  opacity: 0;
  transition: opacity .55s ease;
}

.match.show { opacity: 1; }

/* The digital board resolves out of the enlarged photographed board, giving
   the final cut a little inherited momentum instead of feeling like a reset. */
.match.arriving.show { animation: match-arrival 1s cubic-bezier(.16, .74, .18, 1) both; }
.match.arriving .board-wrap { animation: board-arrival 1s cubic-bezier(.16, .74, .18, 1) both; }
.match.arriving .match-header,
.match.arriving .turn-copy { animation: interface-arrival .8s .2s ease both; }

@keyframes match-arrival {
  0% { opacity: 0; filter: brightness(.5); }
  24% { opacity: 1; filter: brightness(.72); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes board-arrival {
  0% { opacity: 0; transform: scale(1.34); filter: blur(10px) drop-shadow(0 38px 38px rgba(0,0,0,.7)); }
  34% { opacity: 1; filter: blur(1px) drop-shadow(0 32px 34px rgba(0,0,0,.62)); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 28px 30px rgba(0,0,0,.52)); }
}

@keyframes interface-arrival {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

.match-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: clamp(24px, 4vh, 48px) clamp(28px, 5vw, 84px) 0;
}

.player-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.player-rita { justify-self: end; align-items: flex-end; text-align: right; }

.player-identity {
  display: flex;
  align-items: center;
  gap: 7px;
}

.player-name {
  font: 700 clamp(32px, 3.4vw, 54px)/.84 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.045em;
}

.player-piece {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #4b4740 0, #1e1c19 57%, #080706 100%);
  color: #777168;
  font: 700 10px/.9 Georgia, 'Times New Roman', serif;
  text-shadow: 1px 1px 1px rgba(255,255,255,.14), -1px -1px 1px rgba(0,0,0,.85);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.15), 0 2px 5px rgba(0,0,0,.45);
}
.player-piece::after { content: 'T'; }
.player-rita .player-piece {
  background: radial-gradient(circle at 35% 28%, #fff9ed 0, #ece4d4 60%, #aaa08e 100%);
  color: #817765;
  text-shadow: 1px 1px 1px rgba(255,255,255,.85), -1px -1px 1px rgba(83,75,61,.28);
}
.player-rita .player-piece::after { content: 'R'; }

.connection-state {
  font-size: 7px;
  letter-spacing: .3em;
  color: var(--grey-dim);
}
.player-mark.disconnected { opacity: .38; }

.match-title-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.spectator-count {
  font-size: 7px;
  letter-spacing: .22em;
  color: var(--grey-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.mega-solver-toggle {
  position: relative;
  margin-top: 7px;
  padding: 9px 12px 8px 28px;
  color: var(--ivory);
  background: linear-gradient(135deg, #c1583b, #963722);
  border: 1px solid rgba(236, 228, 212, .48);
  border-radius: 2px;
  box-shadow: 0 7px 20px rgba(112, 32, 15, .38), inset 0 1px rgba(255, 255, 255, .14);
  font: 800 9px/1 var(--font-ui);
  letter-spacing: .16em;
  text-shadow: 0 1px 2px rgba(13, 11, 8, .55);
  cursor: pointer;
  transform: translateY(0);
  transition: color .18s ease, background .18s ease, border-color .18s ease,
    box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}
.mega-solver-toggle::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--ivory);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(236, 228, 212, .16), 0 0 12px rgba(236, 228, 212, .62);
  transform: translateY(-50%);
}
.mega-solver-toggle:hover:not(:disabled),
.mega-solver-toggle:focus-visible {
  background: linear-gradient(135deg, #d36a4b, #aa4229);
  border-color: var(--ivory);
  box-shadow: 0 9px 25px rgba(112, 32, 15, .5), 0 0 0 3px rgba(236, 228, 212, .12);
  transform: translateY(-1px);
}
.mega-solver-toggle:focus-visible { outline: 1px solid var(--ivory); outline-offset: 3px; }
.mega-solver-toggle:not(:disabled) { animation: mega-solver-beacon 2.4s ease-in-out infinite; }
.mega-solver-toggle.is-active {
  background: linear-gradient(135deg, #d36a4b, #a83f27);
  border-color: var(--ivory);
}
.mega-solver-toggle:disabled {
  cursor: default;
  opacity: .62;
  filter: saturate(.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .1);
}

@keyframes mega-solver-beacon {
  0%, 100% { box-shadow: 0 7px 20px rgba(112, 32, 15, .38), inset 0 1px rgba(255, 255, 255, .14); }
  50% { box-shadow: 0 8px 25px rgba(176, 74, 47, .62), 0 0 0 3px rgba(176, 74, 47, .12), inset 0 1px rgba(255, 255, 255, .14); }
}

.match-title {
  justify-self: center;
  margin: 0;
  padding-top: 2px;
  color: var(--ivory);
  font: italic 400 clamp(17px, 1.8vw, 28px)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: .12em;
  text-align: center;
  text-wrap: balance;
}

.match-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1vh 20px 4.5vh;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}
.match.is-threat .match-stage { transform: scale(1.015); }

.board-wrap {
  position: relative;
  width: min(58vw, 64vh, 690px);
  isolation: isolate;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.52));
}

.board {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(4px, .55vw, 9px);
  aspect-ratio: 7 / 6;
  padding: clamp(12px, 1.45vw, 22px);
  overflow: hidden;
  background:
    linear-gradient(104deg, rgba(255,255,255,.055), transparent 17%, rgba(0,0,0,.18) 48%, rgba(255,255,255,.035) 82%, transparent),
    linear-gradient(180deg, #29251f, #15130f 44%, #1c1914 100%);
  border: 1px solid rgba(236, 228, 212, .1);
  border-radius: 4px 4px 2px 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -14px 25px rgba(0,0,0,.38),
    inset 10px 0 20px rgba(255,255,255,.018),
    0 5px 2px #080705;
}

.board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 5%, rgba(255,255,255,.025) 33%, transparent 44%);
  mix-blend-mode: screen;
}

.board-column {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(4px, .55vw, 9px);
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.board-column::after {
  content: '';
  position: absolute;
  inset: -8px -4px;
  z-index: -1;
  background: rgba(236,228,212,.055);
  opacity: 0;
  transition: opacity .18s ease;
}
.board-column:not(:disabled):hover::after,
.board-column:not(:disabled):focus-visible::after { opacity: 1; }
.board-column:focus-visible { outline: 1px solid rgba(236,228,212,.32); outline-offset: 5px; }
.board-column:disabled { cursor: default; }

.slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
}
.slot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, #080705 0 55%, #11100d 67%, #302b24 73%, #0b0a08 100%);
  box-shadow:
    inset 2px 5px 8px rgba(0,0,0,.86),
    inset -2px -3px 5px rgba(255,255,255,.035),
    0 1px 0 rgba(255,255,255,.055);
}

.piece,
.ghost-piece {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 18%),
    radial-gradient(circle at 50% 58%, var(--piece-hi) 0, var(--piece) 67%, var(--piece-low) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.1),
    inset 0 -5px 8px rgba(0,0,0,.22),
    0 4px 7px rgba(0,0,0,.54);
}

/* Initials are pressed into the material, rather than printed on top. */
.piece::after,
.ghost-piece::after {
  content: 'T';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mark-shadow);
  font: 700 clamp(18px, 3.1vw, 46px)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.08em;
  text-indent: -.08em;
  text-shadow:
    1px 1px 1px var(--mark-light),
    -1px -1px 1px rgba(0,0,0,.78),
    0 1px 2px rgba(0,0,0,.5);
  opacity: .9;
}

.piece {
  position: absolute;
  inset: 6%;
  z-index: 2;
  --piece: #201e1a;
  --piece-hi: #3c3933;
  --piece-low: #090806;
  --mark-shadow: #615d55;
  --mark-light: rgba(255,255,255,.18);
  transition: filter .45s ease, opacity .45s ease, transform .45s ease;
}
.piece.rita {
  --piece: #ece4d4;
  --piece-hi: #fff8eb;
  --piece-low: #aaa08d;
  --mark-shadow: #847a68;
  --mark-light: rgba(255,255,255,.92);
}
.piece.rita::after { content: 'R'; }
.piece.just-dropped {
  animation: piece-fall var(--fall-time, .42s) cubic-bezier(.28,.72,.42,1) both;
}
@keyframes piece-fall {
  from { transform: translateY(calc(var(--drop, 6) * -114%)); filter: brightness(1.12); }
  88% { transform: translateY(1.5%); }
  to { transform: translateY(0); }
}

.board-wrap.land { animation: board-land .19s ease-out; }
@keyframes board-land { 0%,100% { transform: none; } 48% { transform: translateY(1px) scaleY(.998); } }

.ghost-piece {
  top: clamp(-62px, -5.5vw, -44px);
  left: calc((100% / 7) * var(--ghost-column, 3) + (100% / 14));
  z-index: 1;
  width: calc((100% - clamp(24px, 2.9vw, 44px)) / 7 - clamp(4px, .55vw, 9px));
  aspect-ratio: 1;
  --piece: #201e1a;
  --piece-hi: #3c3933;
  --piece-low: #090806;
  --mark-shadow: #615d55;
  --mark-light: rgba(255,255,255,.18);
  opacity: 0;
  transform: translateX(-50%) translateY(5px);
  transition: left .16s ease, opacity .16s ease, transform .16s ease;
}
.ghost-piece.rita {
  --piece: #ece4d4;
  --piece-hi: #fff8eb;
  --piece-low: #aaa08d;
  --mark-shadow: #847a68;
  --mark-light: rgba(255,255,255,.92);
}
.ghost-piece.rita::after { content: 'R'; }
.board-wrap.can-play:hover .ghost-piece,
.board-wrap.keyboard-hover .ghost-piece { opacity: .54; transform: translateX(-50%); }

.board-foot {
  position: relative;
  z-index: 3;
  width: calc(100% + 6%);
  height: clamp(12px, 1.2vw, 18px);
  margin: -2px -3% 0;
  background: linear-gradient(180deg, #24201a, #0c0a08 78%);
  border-radius: 2px 2px 5px 5px;
  box-shadow: 0 12px 15px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.07);
}
.board-foot::before,
.board-foot::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 14%;
  height: 8px;
  background: #0b0907;
  border-radius: 0 0 3px 3px;
}
.board-foot::before { left: 7%; }
.board-foot::after { right: 7%; }

.turn-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 1px 0 0;
  padding: 4px 11px 4px 5px;
  color: var(--ivory);
  background: rgba(236, 228, 212, .09);
  border: 1px solid rgba(236, 228, 212, .28);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .05);
  font: 700 8px/1 var(--font-ui);
  letter-spacing: .22em;
  white-space: nowrap;
}

.turn-copy::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  content: 'T';
  color: #8f897f;
  background: radial-gradient(circle at 35% 28%, #4b4740 0, #1e1c19 57%, #080706 100%);
  border-radius: 50%;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.15), 0 2px 5px rgba(0,0,0,.45);
  font: 700 11px/.9 Georgia, 'Times New Roman', serif;
  letter-spacing: 0;
  text-shadow: 1px 1px 1px rgba(255,255,255,.14), -1px -1px 1px rgba(0,0,0,.85);
}

.turn-copy[data-player="rita"] {
  color: #fff8eb;
  background: rgba(236, 228, 212, .15);
  border-color: rgba(236, 228, 212, .46);
}

.turn-copy[data-player="rita"]::before {
  content: 'R';
  color: #817765;
  background: radial-gradient(circle at 35% 28%, #fff9ed 0, #ece4d4 60%, #aaa08e 100%);
  text-shadow: 1px 1px 1px rgba(255,255,255,.85), -1px -1px 1px rgba(83,75,61,.28);
}

.moment-copy {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  font: 700 clamp(52px, 9vw, 132px)/.9 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.045em;
  color: var(--ivory);
  text-shadow: 0 8px 50px rgba(0,0,0,.72);
  opacity: 0;
  pointer-events: none;
}
.moment-copy.show { animation: moment-card var(--moment-duration, 2.8s) ease both; }
.moment-copy.turn-announcement {
  box-sizing: border-box;
  padding: 0 clamp(22px, 8vw, 140px);
  white-space: pre-line;
  text-align: center;
  font-size: clamp(32px, 6.4vw, 92px);
  line-height: .94;
}
@keyframes moment-card {
  0%, 100% { opacity: 0; transform: scale(.99); }
  14%, 80% { opacity: .96; transform: scale(1); }
}

.match-error {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 8;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: .2em;
  color: #c97962;
}

.match.resolving .board-column { pointer-events: none; }
.match.resolving .piece:not(.winning) { filter: brightness(.22) saturate(.42); opacity: .5; }
.match.resolving .piece.winning {
  z-index: 5;
  outline: 2px solid transparent;
  outline-offset: 5px;
  animation:
    winning-lock .58s calc(var(--win-order, 0) * .32s + .48s) cubic-bezier(.16, 1, .3, 1) both,
    winning-pulse 1s 2s ease-in-out 3 both;
}
@keyframes winning-lock {
  0% {
    filter: brightness(.72) saturate(.8);
    transform: scale(.92);
    outline-color: transparent;
    box-shadow: inset 0 2px 4px rgba(255,255,255,.1), inset 0 -5px 8px rgba(0,0,0,.22);
  }
  62% {
    filter: brightness(1.72) saturate(1.12);
    transform: scale(1.1);
    outline-color: rgba(242,234,220,.98);
    box-shadow:
      0 0 0 4px rgba(13,11,8,.88),
      0 0 0 8px rgba(242,234,220,.96),
      0 0 34px 10px rgba(236,228,212,.48),
      inset 0 2px 4px rgba(255,255,255,.24);
  }
  100% {
    filter: brightness(1.34) saturate(1.06);
    transform: scale(1.035);
    outline-color: rgba(242,234,220,.9);
    box-shadow:
      0 0 0 3px rgba(13,11,8,.9),
      0 0 0 7px rgba(242,234,220,.88),
      0 0 26px 7px rgba(236,228,212,.34),
      inset 0 2px 4px rgba(255,255,255,.2);
  }
}
@keyframes winning-pulse {
  0%, 100% {
    filter: brightness(1.3) saturate(1.04);
    transform: scale(1.035);
    outline-color: rgba(242,234,220,.82);
    box-shadow:
      0 0 0 3px rgba(13,11,8,.9),
      0 0 0 7px rgba(242,234,220,.84),
      0 0 25px 7px rgba(236,228,212,.32),
      inset 0 2px 4px rgba(255,255,255,.2);
  }
  50% {
    filter: brightness(1.9) saturate(1.14);
    transform: scale(1.1);
    outline-color: #fffaf0;
    box-shadow:
      0 0 0 4px rgba(13,11,8,.94),
      0 0 0 10px rgba(255,250,240,1),
      0 0 44px 14px rgba(236,228,212,.62),
      inset 0 2px 5px rgba(255,255,255,.32);
  }
}

/* ---------- result ---------- */

.result {
  --result-ivory: #f2eadc;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #080705;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1);
}
.result.play { opacity: 1; }
.result::before,
.result::after {
  position: absolute;
  z-index: 3;
  content: '';
  pointer-events: none;
}
.result::before {
  inset: clamp(16px, 2.8vw, 42px);
  border: 1px solid rgba(236, 228, 212, .12);
  clip-path: inset(0 50% 0 50%);
}
.result::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(8,7,5,.68), transparent 18% 82%, rgba(8,7,5,.68));
}
.result.play::before { animation: result-frame 1.8s 1.1s cubic-bezier(.16, 1, .3, 1) both; }

.result-stage {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}
.result.play .result-stage { animation: result-stage-in 2.4s .35s ease both; }
.result-stage::before {
  position: absolute;
  inset: 0;
  content: '';
  background:
    radial-gradient(ellipse 42% 34% at 50% 65%, rgba(176, 74, 47, .16), transparent 72%),
    radial-gradient(ellipse 78% 90% at 50% 110%, rgba(102, 70, 48, .15), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 42%, rgba(0,0,0,.25));
}
.result-spotlight {
  position: absolute;
  top: -42%;
  width: 52vw;
  height: 146%;
  opacity: 0;
  background: linear-gradient(180deg, rgba(242,234,220,.105), rgba(242,234,220,.012) 72%, transparent);
  filter: blur(14px);
  transform-origin: 50% 0;
}
.result-spotlight-left { left: -4%; transform: rotate(-18deg); clip-path: polygon(44% 0, 58% 0, 100% 100%, 0 100%); }
.result-spotlight-right { right: -4%; transform: rotate(18deg); clip-path: polygon(42% 0, 56% 0, 100% 100%, 0 100%); }
.result.play .result-spotlight-left { animation: spotlight-left 4s 1s cubic-bezier(.16, 1, .3, 1) both; }
.result.play .result-spotlight-right { animation: spotlight-right 4s 1s cubic-bezier(.16, 1, .3, 1) both; }
.result-horizon {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(720px, 66vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,228,212,.36), transparent);
  transform: translateX(-50%) scaleX(0);
}
.result.play .result-horizon { animation: result-horizon-in 1.6s 3.45s cubic-bezier(.16, 1, .3, 1) both; }
.result-glow {
  position: absolute;
  left: 50%;
  bottom: -24vh;
  width: min(92vw, 1100px);
  aspect-ratio: 2.5;
  border-radius: 50%;
  background: rgba(176, 74, 47, .14);
  filter: blur(70px);
  transform: translateX(-50%) scale(.4);
  opacity: 0;
}
.result.play .result-glow { animation: result-glow 3.4s 3.35s ease both; }

.result-copy {
  position: relative;
  z-index: 4;
  width: min(1120px, calc(100% - 48px));
  min-height: min(650px, 78vh);
  display: grid;
  place-items: center;
  text-align: center;
}
.result-preamble,
.result-headline,
.result-reveal { grid-area: 1 / 1; }
.result-preamble { opacity: 0; }
.result-preamble p {
  margin-bottom: clamp(20px, 3.5vh, 34px);
  font: 500 clamp(7px, .72vw, 10px)/1 var(--font-ui);
  letter-spacing: .52em;
  text-indent: .52em;
  color: var(--accent-red);
}
.result-preamble strong {
  display: block;
  font: 300 clamp(28px, 4.3vw, 62px)/1.08 var(--font-display);
  letter-spacing: -.035em;
  color: var(--result-ivory);
}
.result.play .result-preamble { animation: result-preamble 3.5s .75s ease both; }

.result-headline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
}
.result-headline::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(1080px, 92vw);
  height: clamp(180px, 29vw, 390px);
  content: '';
  opacity: 0;
  background: radial-gradient(ellipse, rgba(242,234,220,.2), rgba(176,74,47,.11) 36%, transparent 72%);
  filter: blur(22px);
  transform: translate(-50%, -50%) scale(.18);
}
.result h2 {
  font: 700 clamp(72px, 13.5vw, 194px)/.72 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.07em;
  color: var(--result-ivory);
  text-shadow: 0 12px 80px rgba(0,0,0,.8);
  white-space: nowrap;
}
.result h2 span {
  display: inline-block;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.result h2 span:last-child { color: var(--accent-red); }
.result-rule {
  width: min(610px, 62vw);
  height: 1px;
  margin-top: clamp(34px, 5vh, 54px);
  background: linear-gradient(90deg, transparent, rgba(236,228,212,.52) 18% 82%, transparent);
  transform: scaleX(0);
}
.result.play .result-headline { animation: result-headline 1.7s 3.72s cubic-bezier(.16, 1, .3, 1) both; }
.result.play .result-headline::before { animation: result-event-flash 1.4s 3.58s cubic-bezier(.16, 1, .3, 1) both; }
.result.play h2 span:first-child { animation: result-word-left 1.25s 4.02s cubic-bezier(.16, 1, .3, 1) both; }
.result.play h2 span:last-child { animation: result-word-right 1.25s 4.12s cubic-bezier(.16, 1, .3, 1) both; }
.result.play .result-rule { animation: result-rule-in 1.2s 4.85s cubic-bezier(.16, 1, .3, 1) both; }

.result-reveal {
  align-self: end;
  margin-bottom: clamp(4px, 2vh, 20px);
  opacity: 0;
}
.result-confirmation {
  margin-bottom: 15px;
  font: 600 clamp(7px, .66vw, 9px)/1 var(--font-ui);
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--accent-red);
}
.result-aside {
  margin: 0 0 24px;
  font: italic 13px/1.5 Georgia, serif;
  color: var(--grey);
}
.editorial-button {
  min-width: 170px;
  padding: 14px 0;
  border-top: 1px solid rgba(236,228,212,.26);
  border-bottom: 1px solid rgba(236,228,212,.26);
}
.editorial-button span { margin-left: 20px; color: var(--accent-red); }
.result.play .result-reveal { animation: result-reveal-in .9s 5.45s ease both; }

@keyframes result-stage-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes result-frame { to { clip-path: inset(0); } }
@keyframes result-preamble {
  0% { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  18%, 66% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
}
@keyframes result-headline {
  0% { opacity: 0; transform: scale(.86); filter: blur(12px); }
  68% { opacity: 1; transform: scale(1.035); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes result-event-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  38% { opacity: .95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .28; transform: translate(-50%, -50%) scale(1.22); }
}
@keyframes result-word-left { from { opacity: 0; transform: translateX(-42px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes result-word-right { from { opacity: 0; transform: translateX(42px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes result-horizon-in { to { transform: translateX(-50%) scaleX(1); } }
@keyframes result-rule-in { to { transform: scaleX(1); } }
.result-rule { transform-origin: center; }
@keyframes spotlight-left { from { opacity: 0; transform: rotate(-28deg); } to { opacity: .7; transform: rotate(-8deg); } }
@keyframes spotlight-right { from { opacity: 0; transform: rotate(28deg); } to { opacity: .7; transform: rotate(8deg); } }
@keyframes result-glow { from { opacity: 0; transform: translateX(-50%) scale(.4); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes result-reveal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .board-wrap { width: min(74vw, 61vh, 640px); }
}

@media (max-width: 640px) {
  body.in-experience .now-playing {
    right: auto;
    bottom: 10px;
    left: 12px;
  }
  .film-grain { opacity: .018; }
  .coin-toss h2 { font-size: 11vw; }
  .coin-scene { width: 108px; margin-top: 42px; }
  .coin-actions { gap: 10px; margin-top: clamp(48px, 8vh, 66px); }
  .coin-actions .coin-choice { width: min(36vw, 132px); }
  .coin-choice-disc { width: min(31vw, 116px); }
  .vs-name { bottom: clamp(58px, 11vh, 88px); }
  .vs-name strong { font-size: 16vw; }
  .vs-name small { font-size: 6px; }
  .vs-tiago { left: 20px; }
  .vs-rita { right: 20px; }
  .vs-mark span { width: 54px; }
  .encounter-portrait { background-size: auto 100%; }
  .encounter-tiago { background-position: 22% 100%; }
  .encounter-rita { background-position: 79% 100%; }
  .vs-title-card h2 { font-size: 11.2vw; }

  .match { grid-template-rows: 124px 1fr auto; overflow-y: auto; }
  .match-header { padding: 26px 20px 0; }
  .player-name { font-size: 9vw; }
  .player-piece { width: 15px; height: 15px; font-size: 9px; }
  .mega-solver-toggle { padding: 7px 9px 7px 23px; font-size: 7px; }
  .mega-solver-toggle::before { left: 8px; width: 6px; height: 6px; }
  .match-title { max-width: 25vw; padding-top: 0; font-size: clamp(13px, 4vw, 18px); }
  .turn-copy { gap: 6px; min-height: 25px; padding: 3px 8px 3px 4px; font-size: 6px; letter-spacing: .14em; }
  .turn-copy::before { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; }
  .match-stage { justify-content: flex-start; padding: 4vh 12px 18px; }
  .board-wrap { width: min(92vw, 58vh); }
  .ghost-piece { top: -10.5vw; width: 10vw; }
  .moment-copy { font-size: 17vw; }

  .result-copy { min-height: 82vh; }
  .result h2 { font-size: 17vw; }
  .result-preamble strong { font-size: clamp(28px, 8.8vw, 46px); }
  .result-reveal { width: min(100%, 320px); }

}

@media (max-height: 700px) and (min-width: 641px) {
  .match-header { padding-top: 22px; }
  .board-wrap { width: min(52vw, 61vh); }
  .match-stage { padding-bottom: 3vh; }
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
  .mega-solver-toggle:not(:disabled) { animation: none; }
  body.entering-game .bg,
  body.entering-game .overlay-grade,
  body.entering-game .blackout,
  .vs.play::after,
  .vs.play .cinema-bars span,
  .vs.play .encounter-tiago,
  .vs.play .encounter-rita,
  .vs.play .encounter-slash,
  .vs.play .entry-kicker,
  .vs.play .entry-target { animation: none; }
  .encounter-portraits,
  .encounter-slash,
  .cinema-bars { display: none; }
  .entry-kicker { opacity: 1; }
  .entry-target { opacity: .55; }
  .coin-toss.is-tossing .coin-scene,
  .coin-toss.is-tossing .coin-shadow,
  .coin-toss[data-result="heads"].is-tossing .coin,
  .coin-toss[data-result="tails"].is-tossing .coin,
  .coin-toss.is-tossing .coin-status,
  .coin-toss.is-tossing .coin-result { animation-duration: .01ms; }
  .coin-toss.is-tossing .coin-result { opacity: 1; transform: translate(-50%, 0); filter: none; }
  .vs.play .vs-tiago,
  .vs.play .vs-mark,
  .vs.play .vs-rita { display: none; }
  .vs.play .vs-title-card { opacity: 1; animation: none; }
  .match.arriving.show,
  .match.arriving .board-wrap,
  .match.arriving .match-header,
  .match.arriving .turn-copy,
  .piece.just-dropped,
  .board-wrap.land,
  .match.resolving .piece.winning,
  .result.play::before,
  .result.play .result-stage,
  .result.play .result-spotlight-left,
  .result.play .result-spotlight-right,
  .result.play .result-horizon,
  .result.play .result-glow,
  .result.play .result-preamble,
  .result.play .result-headline,
  .result.play .result-headline::before,
  .result.play h2 span,
  .result.play .result-rule,
  .result.play .result-reveal { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .result-preamble { display: none; }
}