/**
 * Stage branding: text wordmarks only (no logo image).
 * PC mid-match:
 *   - Center seam vertical "ruletka.me" between partner | you (original place)
 *   - Still most of the time; soft glow; one quick 360°; 20s rest; repeat
 *   - Cycle 22s = ~0.4s still + ~0.9s glow + ~0.7s spin + 20s still
 *   - Glass pill: brand-tint rim + stronger backdrop so wordmark reads on busy video
 *   - Themes: light/pink inverted glass; matrix green rim; saloon gold rim
 *   - Tile bottom watermarks stay hidden
 * Full "ruletka.me" — never clip mid-word.
 * Does not block clicks (pointer-events: none).
 */

/* —— Tile watermarks: always hidden on PC match (center seam owns brand) —— */
.stage-wm {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  z-index: 6;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.4s ease;
  max-width: none;
  width: max-content;
  overflow: visible;
}

html.match-live .stage-wm,
.stage.has-brand-live .stage-wm,
.stage.has-brand-live .tile-remote:hover .stage-wm,
.stage.has-brand-live .tile-local:hover .stage-wm {
  opacity: 0 !important;
  visibility: hidden !important;
}

#remote-empty:not(.hidden) ~ .stage-wm,
.tile-remote:has(#remote-empty:not(.hidden)) .stage-wm {
  opacity: 0 !important;
}
#local-empty:not(.hidden) ~ .stage-wm-local,
.tile-local:has(#local-empty:not(.hidden)) .stage-wm-local {
  opacity: 0 !important;
}

.stage-wm-text {
  display: inline-block;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  max-width: none;
  width: max-content;
  overflow: visible;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

@media (max-width: 720px) {
  .stage-wm {
    bottom: 4.75rem;
  }
  .stage-wm-text {
    font-size: 0.75rem;
  }
}

/* —— Center seam wordmark (between partner | you) —— */
.stage {
  position: relative;
}
.stage-brand-center {
  /* Do NOT set grid-column/row. An abspos grid item with a definite
     grid area uses that cell as its containing block — 1 / -1 can
     collapse to the first (partner) column, so left:50% lands mid-tile
     next to mute (2026-08-14_14-17.png). Auto placement → CB is the
     .stage padding box → 50% is the partner|you seam. */
  grid-column: auto;
  grid-row: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  /* Above frost-vid (z:30); below interactive chrome (side-rail z:50) */
  z-index: 36;
  transform: translate(-50%, -50%) scale(0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  /* Soft entrance: fade + slight scale-in when has-brand-live turns on */
  transition:
    opacity 0.4s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 0.4s cubic-bezier(0.22, 0.9, 0.28, 1),
    visibility 0s linear 0.4s;
  max-width: none;
  max-height: none;
  /* 0×0 point on the seam; pill overflows equally onto both tiles */
  width: 0;
  height: 0;
  overflow: visible;
}
.stage.has-brand-live .stage-brand-center {
  opacity: 0.86;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.4s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 0.4s cubic-bezier(0.22, 0.9, 0.28, 1),
    visibility 0s linear 0s;
}

.stage-brand-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 0.72rem 0.36rem;
  border-radius: 999px;
  /* P3 glass: denser dark plate + brand-blue rim so mark reads on busy video */
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    radial-gradient(
      circle at 38% 32%,
      rgba(46, 52, 70, 0.86),
      rgba(5, 7, 12, 0.9)
    );
  border: 1px solid rgba(180, 200, 255, 0.28);
  /* Depth: brand-tint rim → dark outer → drop → soft blue/rose halo → inset bevel */
  box-shadow:
    0 0 0 1px rgba(100, 140, 255, 0.26),
    0 0 0 2px rgba(0, 0, 0, 0.42),
    0 8px 28px rgba(0, 0, 0, 0.58),
    0 0 34px rgba(120, 150, 255, 0.18),
    0 0 16px rgba(220, 130, 180, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(1.28);
  backdrop-filter: blur(12px) saturate(1.28);
  pointer-events: none;
  will-change: transform, opacity, box-shadow;
  transform-origin: center center;
}

/*
 * Full "ruletka.me" vertical along the partner|you seam.
 */
.stage-brand-wordmark {
  display: inline-block;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.98);
  /* Punchier shadow so full "ruletka.me" holds over bright/busy video */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 2px 10px rgba(0, 0, 0, 0.82),
    0 0 18px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  max-width: none;
  max-height: none;
  width: max-content;
  height: max-content;
  overflow: visible;
  transform-origin: center center;
  line-height: 1.15;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-combine-upright: none;
}

/*
 * Still → glow → one quick 360° → 20s still → repeat.
 * 22s cycle, linear timeline (ease only on the spin itself):
 *   0.00–0.40s  still
 *   0.40–1.30s  halo glow (hold 0°)
 *   1.30–2.00s  one 360° (~0.7s)
 *   2.00–22.0s  still (~20s)
 * !important: pixel theme zeros * animations; exclude is on the node,
 * but leftover stage rules still need the win.
 */
.stage.has-brand-live .stage-brand-spin {
  animation: stage-brand-pulse-spin 22s linear infinite !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes stage-brand-pulse-spin {
  /* still */
  0%,
  1.82% {
    transform: rotate(0deg) scale(1);
    box-shadow:
      0 0 0 1px rgba(100, 140, 255, 0.26),
      0 0 0 2px rgba(0, 0, 0, 0.42),
      0 8px 28px rgba(0, 0, 0, 0.58),
      0 0 34px rgba(120, 150, 255, 0.18),
      0 0 16px rgba(220, 130, 180, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  }
  /* glow peak — still upright */
  4.5% {
    transform: rotate(0deg) scale(1.06);
    box-shadow:
      0 0 0 1px rgba(180, 210, 255, 0.85),
      0 0 0 2px rgba(0, 0, 0, 0.42),
      0 8px 28px rgba(0, 0, 0, 0.58),
      0 0 28px rgba(170, 205, 255, 0.95),
      0 0 64px rgba(150, 190, 255, 0.7),
      0 0 90px rgba(255, 180, 220, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  }
  /* glow hold, then snap into the spin */
  5.91% {
    transform: rotate(0deg) scale(1.03);
    box-shadow:
      0 0 0 1px rgba(160, 195, 255, 0.55),
      0 0 0 2px rgba(0, 0, 0, 0.42),
      0 8px 28px rgba(0, 0, 0, 0.58),
      0 0 40px rgba(150, 185, 255, 0.45),
      0 0 16px rgba(220, 130, 180, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.28);
    animation-timing-function: cubic-bezier(0.18, 0, 0.22, 1);
  }
  /* mid-spin */
  7.5% {
    transform: rotate(180deg) scale(1.08);
    box-shadow:
      0 0 0 1px rgba(140, 175, 255, 0.4),
      0 0 0 2px rgba(0, 0, 0, 0.42),
      0 10px 32px rgba(0, 0, 0, 0.6),
      0 0 36px rgba(140, 175, 255, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(0, 0, 0, 0.26);
    animation-timing-function: cubic-bezier(0.22, 0, 0.28, 1);
  }
  /* spin settle → 20s rest */
  9.09%,
  100% {
    transform: rotate(360deg) scale(1);
    box-shadow:
      0 0 0 1px rgba(100, 140, 255, 0.26),
      0 0 0 2px rgba(0, 0, 0, 0.42),
      0 8px 28px rgba(0, 0, 0, 0.58),
      0 0 34px rgba(120, 150, 255, 0.18),
      0 0 16px rgba(220, 130, 180, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage.has-brand-live .stage-brand-spin {
    animation: none !important;
  }
}

.stage-brand-logo {
  display: none !important;
}
.stage-brand-word {
  display: none !important;
}

/*
 * Seam follows data-brand-seam (set from live people in applyStageLayoutMode):
 *   duo  (1v1 / hunt / connecting 3rd) → 50% partner|you
 *   trio (3 live people)               → 33.333% partner|3rd
 *   quad (4-way / 2×2)                 → 50% stage cross
 * Do NOT key off .stage-trio or #remote-third:not([hidden]) — connecting
 * unhides that node on 1v1 and used to slide the pill off the seam.
 */
.stage[data-brand-seam="duo"] .stage-brand-center,
.stage[data-brand-seam="quad"] .stage-brand-center,
.stage:not([data-brand-seam]) .stage-brand-center {
  left: 50%;
  top: 50%;
}
.stage[data-brand-seam="trio"] .stage-brand-center {
  left: 33.333%;
  top: 50%;
}

@media (max-width: 720px) {
  .stage-brand-center {
    left: 50%;
    top: 50%;
  }
  .stage[data-brand-seam="trio"] .stage-brand-center {
    left: 33.333%;
  }
  .stage-brand-spin {
    padding: 0.6rem 0.32rem;
  }
  .stage-brand-wordmark {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
}

/*
 * Phone portrait 1v1: tiles stack (partner TOP · you BOTTOM). Seam is
 * horizontal at ~56% (grid 1.12fr / 0.88fr). Rotate wordmark to a
 * horizontal pill on that seam — not vertical on the partner tile.
 */
@media (max-width: 900px) and (orientation: portrait) {
  .stage.has-brand-live:not(.stage-trio):not(.stage-quad):not(.stage-grid-2x2)
    .stage-brand-center,
  .stage[data-brand-seam="duo"]:not(.stage-trio):not(.stage-quad):not(.stage-grid-2x2)
    .stage-brand-center {
    left: 50%;
    top: 56%;
  }
  .stage:not(.stage-trio):not(.stage-quad):not(.stage-grid-2x2) .stage-brand-spin {
    flex-direction: row;
    padding: 0.3rem 0.78rem;
  }
  .stage:not(.stage-trio):not(.stage-quad):not(.stage-grid-2x2) .stage-brand-wordmark {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
}

/* Themes — light / pink: inverted glass + ink wordmark for pale video */
html[data-theme="light"] .stage-wm-text,
html[data-theme="pink"] .stage-wm-text {
  color: rgba(16, 20, 32, 0.82);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.5);
}
html[data-theme="light"] .stage-brand-wordmark {
  color: rgba(14, 18, 30, 0.94);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(255, 255, 255, 0.65),
    0 1px 3px rgba(0, 0, 0, 0.14);
}
html[data-theme="pink"] .stage-brand-wordmark {
  color: rgba(72, 18, 48, 0.94);
  text-shadow:
    0 1px 2px rgba(255, 240, 248, 0.95),
    0 0 12px rgba(255, 220, 235, 0.7),
    0 1px 3px rgba(80, 20, 50, 0.12);
}
/* Light: cool frosted plate + soft brand-blue rim */
html[data-theme="light"] .stage-brand-spin {
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.32) 48%,
      rgba(200, 210, 230, 0.36) 100%
    ),
    radial-gradient(
      circle at 38% 32%,
      rgba(255, 255, 255, 0.94),
      rgba(220, 226, 240, 0.92)
    );
  border-color: rgba(70, 100, 180, 0.28);
  box-shadow:
    0 0 0 1px rgba(90, 130, 220, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 8px 24px rgba(30, 40, 70, 0.18),
    0 0 28px rgba(100, 140, 230, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(40, 50, 80, 0.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
/* Pink: blush glass + rose rim (reads on pale/busy video) */
html[data-theme="pink"] .stage-brand-spin {
  background:
    linear-gradient(
      160deg,
      rgba(255, 245, 250, 0.78) 0%,
      rgba(255, 220, 235, 0.4) 48%,
      rgba(240, 180, 210, 0.32) 100%
    ),
    radial-gradient(
      circle at 38% 32%,
      rgba(255, 248, 252, 0.94),
      rgba(250, 220, 232, 0.9)
    );
  border-color: rgba(220, 90, 150, 0.36);
  box-shadow:
    0 0 0 1px rgba(230, 100, 160, 0.28),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 8px 24px rgba(80, 30, 55, 0.16),
    0 0 28px rgba(240, 120, 180, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(160, 60, 110, 0.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}

/* Matrix: green brand-tint rim (cheap; border survives keyframe box-shadow) */
html[data-theme="matrix"] .stage-brand-wordmark {
  color: rgba(180, 255, 210, 0.96);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(0, 140, 60, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.7);
}
html[data-theme="matrix"] .stage-brand-spin {
  background:
    linear-gradient(
      160deg,
      rgba(40, 120, 70, 0.18) 0%,
      rgba(0, 40, 20, 0.12) 42%,
      rgba(0, 0, 0, 0.22) 100%
    ),
    radial-gradient(
      circle at 38% 32%,
      rgba(12, 36, 22, 0.88),
      rgba(0, 4, 2, 0.92)
    );
  border-color: rgba(0, 200, 90, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 180, 70, 0.34),
    0 0 0 2px rgba(0, 0, 0, 0.5),
    0 8px 28px rgba(0, 0, 0, 0.62),
    0 0 32px rgba(0, 180, 70, 0.2),
    inset 0 1px 0 rgba(120, 255, 180, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Saloon: gold brand-tint rim */
html[data-theme="saloon"] .stage-brand-wordmark {
  color: rgba(255, 236, 200, 0.96);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(201, 162, 39, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.7);
}
html[data-theme="saloon"] .stage-brand-spin {
  background:
    linear-gradient(
      160deg,
      rgba(201, 162, 39, 0.16) 0%,
      rgba(80, 40, 16, 0.14) 42%,
      rgba(0, 0, 0, 0.22) 100%
    ),
    radial-gradient(
      circle at 38% 32%,
      rgba(48, 30, 16, 0.88),
      rgba(10, 6, 3, 0.92)
    );
  border-color: rgba(201, 162, 39, 0.48);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.36),
    0 0 0 2px rgba(0, 0, 0, 0.48),
    0 8px 28px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(201, 162, 39, 0.16),
    inset 0 1px 0 rgba(255, 230, 170, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
}