/* Everything that makes an X'd pair impossible to miss: the strike across the screen,
   the dead-looking tile it leaves behind, and the strip that keeps X'd pairs in view. */

/* ---------- the strike ---------- */

.strike {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.strike::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(120, 8, 20, 0.5), rgba(10, 2, 4, 0.82));
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.strike.is-drawing::before { opacity: 1; }
.strike.is-landing::before { opacity: 0; transition-duration: 520ms; }

.strike__x {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 620ms cubic-bezier(0.7, 0, 0.2, 1), opacity 300ms ease-in 380ms;
}
.strike.is-landing .strike__x { opacity: 0; }
.strike__x i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--diagonal);
  height: clamp(14px, 2.4vw, 34px);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6a78, var(--x) 30%, #c8102a);
  box-shadow: 0 0 60px 6px rgba(255, 61, 79, 0.75);
  /* hidden until drawn: each bar is wiped in from one corner to the opposite one */
  clip-path: inset(-80px 100% -80px -80px);
}
.strike__x i:first-child { transform: translate(-50%, -50%) rotate(var(--angle)); }
.strike__x i:last-child { transform: translate(-50%, -50%) rotate(calc(var(--angle) * -1)); }
.strike.is-drawing .strike__x i {
  clip-path: inset(-80px);
  transition: clip-path 260ms cubic-bezier(0.6, 0, 0.1, 1);
}
.strike.is-drawing .strike__x i:last-child { transition-delay: 170ms; }

.strike__label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(92vw, 900px);
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%) scale(1.25);
  opacity: 0;
}
.strike.is-drawing .strike__label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 200ms ease-out 380ms, transform 420ms var(--ease-spring) 380ms;
}
.strike.is-landing .strike__label { opacity: 0; transition: opacity 180ms ease-in; }
.strike__label b {
  padding: 0.12em 0.4em;
  background: #06070a;
  border: 2px solid var(--x);
  font: 600 clamp(2.2rem, 7vw, 6rem)/1 var(--mono);
  letter-spacing: -0.03em;
  color: #fff;
  box-shadow: 0 0 80px rgba(255, 61, 79, 0.6);
}
.strike__label span {
  padding: 8px 14px;
  background: var(--x);
  font: 600 clamp(0.9rem, 1.6vw, 1.25rem)/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a0206;
}

/* ---------- the tile it leaves behind ---------- */

.cell[data-state='xd'] .cell__face img { filter: grayscale(1) contrast(1.1) brightness(0.55); }
.cell[data-state='xd'] .cell__x { background: linear-gradient(160deg, rgba(120, 8, 20, 0.5), rgba(8, 2, 4, 0.72)); }
.cell[data-state='xd'] .cell__x svg { width: 92%; height: 92%; stroke-width: 3.4; }
.cell[data-state='xd'] .cell__pic { animation: xd-throb 2.4s ease-in-out infinite; }
.cell[data-state='xd'] .cell__name { text-decoration: line-through; text-decoration-thickness: 2px; }
.cell[data-state='xd'] .cell__cap {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--x);
  color: #1a0206;
  font-weight: 600;
}
@keyframes xd-throb {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 61, 79, 0.55)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 61, 79, 0.95)); }
}

/* ---------- X'd right now ---------- */

.xd-strip {
  position: absolute;
  top: calc(var(--nav-h) + 40px);
  right: calc(var(--gutter) + 372px);
  z-index: var(--z-ui);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 46%;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 61, 79, 0.55);
  background: linear-gradient(180deg, rgba(255, 61, 79, 0.22), rgba(255, 61, 79, 0.08));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 40px -8px rgba(255, 61, 79, 0.6);
}
.xd-strip__title {
  font: 600 0.6875rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--x-ink);
  white-space: nowrap;
}
.xd-strip__list { display: flex; gap: 6px; overflow: hidden; }
.xd-strip button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(6, 7, 10, 0.6);
  font: 600 var(--t-xs)/1 var(--mono);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast);
}
.xd-strip button:hover { background: rgba(6, 7, 10, 0.9); }
.xd-strip button b { color: var(--x-ink); font-weight: 600; }
.xd-strip .av { --s: 28px; }

@media (max-width: 1199px) {
  .xd-strip { position: static; max-width: none; border-radius: var(--r-lg); flex-wrap: wrap; padding: 10px 12px; }
  .xd-strip__list { flex-wrap: wrap; }
}

/* ---------- time left on the wall ---------- */

.cell__clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
  min-width: 38px;
  padding: 4px 6px;
  border-radius: var(--r-pill);
  background: var(--x);
  color: #1a0206;
  font: 600 0.6875rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg), 0 0 14px rgba(255, 61, 79, 0.7);
}
.cell[data-state='xd'] .cell__clock { display: block; }