.match-shell {
  min-height: 100%;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 248, 236, 0.55), transparent 52%),
    radial-gradient(80% 50% at 100% 80%, rgba(196, 163, 90, 0.12), transparent 45%),
    linear-gradient(168deg, #e8d5b0 0%, var(--bg-deep) 42%, #d4b896 100%);
  color: var(--ink);
  font-family: var(--font-ui);
}

.match-shell__texture {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.match-shell__rings {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.match-shell__rings::before,
.match-shell__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 163, 90, 0.22);
  box-shadow:
    inset 0 0 0 6px rgba(139, 30, 45, 0.04),
    0 0 40px rgba(196, 163, 90, 0.08);
}

.match-shell__rings::before {
  width: min(120vw, 520px);
  height: min(120vw, 520px);
  top: -18%;
  right: -28%;
}

.match-shell__rings::after {
  width: min(90vw, 360px);
  height: min(90vw, 360px);
  bottom: 8%;
  left: -22%;
  border-color: rgba(139, 30, 45, 0.12);
}

/* Texture/rings sit at z-index 0. In-flow chrome must paint above them.
   Do not assign position/z-index to overlays — a previous catch-all
   forced the dock and voice FAB to `position: relative`, so the mic
   sat on Selección / Mensajes / Perfil and the dock left the viewport. */
.match-shell > *:not(.match-shell__texture):not(.match-shell__rings):not(.match-dock):not(.voice-assistant):not(.match-logo-menu):not(.match-top) {
  position: relative;
  z-index: 1;
}

.match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 248, 236, 0.94), rgba(250, 247, 241, 0.88));
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(42, 22, 24, 0.06);
}

.match-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-brand__word {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 248, 236, 0.6);
}

.match-brand__word-accent {
  color: var(--accent);
}

.match-nav__link--quiet {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
}

.match-nav__link--quiet:hover {
  color: var(--royal);
}

.match-signin {
  width: min(440px, calc(100% - 24px));
  margin: 10px auto 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(165deg, rgba(255, 248, 236, 0.96), rgba(247, 239, 224, 0.92));
  box-shadow: var(--shadow-soft);
}

.match-signin__hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.match-signin__form {
  display: grid;
  gap: 10px;
}

.match-signin__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.match-boot {
  text-align: center;
  padding: 48px 16px;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

/* Affinity axis weights inside the score breakdown */
.match-score__weight {
  font-style: normal;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 8px;
  opacity: 0.85;
}

.match-score__foot {
  border-top: 1px dashed var(--line-strong);
  margin-top: 4px;
  padding-top: 8px;
  opacity: 0.72;
  font-size: 0.9em;
}

.match-brand__tag {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.match-nav {
  display: flex;
  gap: 8px;
}

.match-nav__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 10px;
}

.match-main {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.match-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.35);
}

.match-tab {
  min-height: 40px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--ink-muted);
}

.match-tab.is-active {
  background: var(--ink);
  color: var(--bg-elevated);
}

.match-feed__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.match-feed__eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.match-feed__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
}

.match-feed__count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 6px;
}

.match-feed__stage {
  touch-action: none;
  min-height: 420px;
  margin-bottom: 16px;
}

.match-card {
  position: relative;
  padding: 20px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: rgba(250, 247, 241, 0.95);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s;
  user-select: none;
}

.match-card.is-dragging {
  box-shadow: 0 22px 48px rgba(42, 22, 24, 0.14);
}

.match-card__hero {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.match-card__initial {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  background: rgba(139, 30, 45, 0.08);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.match-card__identity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
}

.match-card__identity p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.match-card__about {
  margin: 0 0 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.match-card__why {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
}

.match-card__why p {
  margin: 0 0 6px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.match-card__why p:last-child {
  margin-bottom: 0;
}

.match-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.match-card__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 2px;
}

.match-card__meta p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
}

.match-score {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.45);
  text-align: left;
}

.match-score__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  min-width: 42px;
  color: var(--ink);
}

.match-score__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-score__copy strong {
  font-size: 0.88rem;
}

.match-score__copy em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.match-score__chev {
  color: var(--ink-muted);
  font-weight: 700;
}

.match-score__suffix {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 600;
  margin-right: 4px;
}

.match-card__score-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(42, 22, 24, 0.72);
  color: #fff8ec;
  font-family: var(--font-display);
  box-shadow: 0 4px 14px rgba(42, 22, 24, 0.28);
  backdrop-filter: blur(6px);
}

.match-card__score-badge strong {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.match-card__score-badge span {
  font-size: 0.72rem;
  opacity: 0.82;
}

.match-card__anchor {
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.match-card__anchor:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.match-card__anchor:hover {
  background: rgba(196, 163, 90, 0.1);
}

.match-overlap {
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
}

.match-overlap__block {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.match-overlap__block--agree {
  background: rgba(196, 163, 90, 0.12);
  border-color: rgba(196, 163, 90, 0.35);
}

.match-overlap__block--disagree {
  background: rgba(139, 30, 45, 0.06);
  border-color: rgba(139, 30, 45, 0.18);
}

.match-overlap__title {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
}

.match-overlap__block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.match-overlap__block li {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink);
  padding-left: 14px;
  position: relative;
}

.match-overlap__block--agree li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.match-overlap__block--disagree li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--royal);
  font-weight: 700;
}

.match-score__detail {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.match-score__detail li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.match-card__stamp {
  position: absolute;
  top: 18px;
  padding: 6px 12px;
  border: 2px solid;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  background: rgba(250, 247, 241, 0.92);
}

.match-card__stamp.is-like {
  right: 16px;
  color: var(--royal);
  border-color: var(--accent);
  transform: rotate(8deg);
}

.match-card__stamp.is-pass {
  left: 16px;
  color: var(--danger);
  border-color: var(--danger);
  transform: rotate(-8deg);
}

.match-feed__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.match-act {
  min-height: 52px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--line-strong);
}

.match-act--pass {
  background: transparent;
  color: var(--ink-soft);
}

.match-act--like {
  background: var(--royal);
  color: var(--bg-elevated);
  border-color: var(--royal);
}

.match-feed__hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.match-feed__like-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tier-glow, rgba(139, 30, 45, 0.2)) 55%, #fff8ec);
  border: 1px solid color-mix(in srgb, var(--tier-frame, #8b1e2d) 35%, transparent);
  color: var(--ink, #3a2a22);
  font-size: 0.9rem;
  text-align: center;
}

.match-hit {
  text-align: center;
  padding: 28px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.match-hit__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.match-hit__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
}

.match-hit__text {
  margin: 0;
  max-width: 30ch;
  color: var(--ink-soft);
}

.match-hit__score {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.match-hit__score-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}

.match-hit__score strong {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.match-hit__score em {
  font-style: normal;
  font-size: 1rem;
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.7;
}

.match-card__matching-score {
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.4);
}

.match-card__matching-score span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.match-card__matching-score strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.match-card__matching-score em {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: 1px;
  opacity: 0.7;
}

.match-score__num em {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: 1px;
  opacity: 0.7;
}

.match-hit__why {
  margin: 8px 0 0;
  display: grid;
  gap: 4px;
  max-width: 36ch;
  text-align: center;
  animation: match-hit-fade-in 0.45s ease both;
}

.match-hit__why p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.match-hit__fuse {
  position: relative;
  width: min(280px, 86vw);
  height: 150px;
  margin: 8px 0 4px;
  display: grid;
  place-items: center;
}

.match-hit__card {
  position: absolute;
  width: 88px;
  height: 112px;
  border-radius: 14px;
  border: 1px solid rgba(196, 163, 90, 0.55);
  background:
    linear-gradient(160deg, rgba(255, 248, 236, 0.95), rgba(250, 247, 241, 0.88));
  box-shadow: 0 10px 28px rgba(42, 22, 24, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.match-hit__card span {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--ink);
}

.match-hit__card small {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 7ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-hit__card--self {
  left: 12%;
  animation: match-fuse-in-left 2.1s cubic-bezier(0.33, 1.15, 0.4, 1) both;
}

.match-hit__card--other {
  right: 12%;
  animation: match-fuse-in-right 2.1s cubic-bezier(0.33, 1.15, 0.4, 1) both;
}

.match-hit__card--joined {
  opacity: 0;
  transform: scale(0.72);
  background:
    linear-gradient(155deg, rgba(255, 214, 160, 0.95), rgba(250, 247, 241, 0.92));
  border-color: rgba(196, 90, 55, 0.45);
  animation: match-fuse-join 2.1s cubic-bezier(0.33, 1.15, 0.4, 1) both;
}

.match-hit__fuse.is-done .match-hit__card--self,
.match-hit__fuse.is-done .match-hit__card--other {
  opacity: 0;
  pointer-events: none;
}

.match-hit__flame {
  position: absolute;
  width: 42px;
  height: 64px;
  border-radius: 50% 50% 40% 40%;
  background:
    radial-gradient(circle at 50% 70%, #fff6c8 0%, #f5a623 35%, #c44b1a 70%, transparent 78%);
  filter: blur(0.5px);
  opacity: 0;
  z-index: 1;
  animation: match-flame 2.1s ease-in-out both;
}

.match-hit__flame--a {
  left: 38%;
  top: 18%;
  animation-delay: 0.15s;
}

.match-hit__flame--b {
  left: 48%;
  top: 8%;
  width: 54px;
  height: 78px;
  animation-delay: 0.35s;
}

.match-hit__flame--c {
  left: 56%;
  top: 22%;
  animation-delay: 0.25s;
}

.match-hit__note {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--ink-muted);
  max-width: 28ch;
}

.match-hit__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(280px, 100%);
  align-items: stretch;
  animation: match-hit-fade-in 0.4s ease both;
}

@keyframes match-fuse-in-left {
  0% {
    transform: translate(-28px, 8px) rotate(-8deg);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  70% {
    transform: translate(42px, 0) rotate(-2deg) scale(0.94);
    opacity: 1;
  }
  100% {
    transform: translate(52px, 0) scale(0.55);
    opacity: 0;
  }
}

@keyframes match-fuse-in-right {
  0% {
    transform: translate(28px, 8px) rotate(8deg);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  70% {
    transform: translate(-42px, 0) rotate(2deg) scale(0.94);
    opacity: 1;
  }
  100% {
    transform: translate(-52px, 0) scale(0.55);
    opacity: 0;
  }
}

@keyframes match-fuse-join {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.55);
  }
  78% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes match-flame {
  0%,
  18% {
    opacity: 0;
    transform: translateY(12px) scale(0.5);
  }
  35% {
    opacity: 0.9;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateY(-10px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-28px) scale(0.7);
  }
}

@keyframes match-hit-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-hit__card--self,
  .match-hit__card--other,
  .match-hit__card--joined,
  .match-hit__flame,
  .match-hit__why,
  .match-hit__actions {
    animation: none !important;
  }

  .match-hit__card--self,
  .match-hit__card--other {
    opacity: 0;
  }

  .match-hit__card--joined {
    opacity: 1;
    transform: none;
  }

  .match-hit__flame {
    display: none;
  }
}

.match-empty,
.match-gate {
  padding: 28px 8px 36px;
  text-align: center;
}

.match-gate {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(196, 163, 90, 0.18), transparent 70%);
  border-radius: var(--radius-panel);
}

.match-empty h1,
.match-gate h1,
.match-list h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink);
}

.match-empty p,
.match-gate p,
.match-list__empty {
  margin: 0 auto;
  color: var(--ink-soft);
  max-width: 34ch;
  line-height: 1.45;
}

.match-empty__meta {
  margin-top: 12px !important;
  font-size: 0.88rem;
  color: var(--ink-muted) !important;
}

.match-empty__actions,
.match-gate__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.match-gate__actions .match-act {
  min-height: 52px;
}

.match-list {
  text-align: left;
}

.match-list ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.match-list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(250, 247, 241, 0.9);
  width: 100%;
  text-align: left;
}

.match-list__row--btn {
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.match-list__row--btn:hover {
  border-color: var(--ink);
}

.match-list__row strong {
  display: block;
}

.match-list__row span {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.match-list__copy {
  flex: 1;
  min-width: 0;
}

.match-list__sub {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-align: center;
}

.match-verify-card {
  text-align: left;
  margin: 0 0 16px;
  padding: 16px;
  border: 2px solid var(--ink);
  background: var(--bg-elevated);
}

.match-verify-card strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.match-verify-card p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.match-verify-card .match-act {
  width: 100%;
}

.match-verify {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.match-verify__footer {
  margin-top: 8px;
}

.match-list__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  background: rgba(139, 30, 45, 0.08);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.match-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 60vh;
}

.match-chat__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-chat__back {
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.match-chat__head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
}

.match-chat__head p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.match-chat__thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.4);
  min-height: 280px;
  max-height: 48vh;
  overflow-y: auto;
}

.match-chat__empty {
  margin: auto;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  max-width: 28ch;
  line-height: 1.45;
}

.match-chat__bubble {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.match-chat__bubble p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}

.match-chat__bubble time {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.match-chat__bubble.is-mine {
  align-self: flex-end;
  background: var(--ink);
  border-color: var(--ink);
}

.match-chat__bubble.is-mine p,
.match-chat__bubble.is-mine time {
  color: var(--bg-elevated);
}

.match-chat__bubble.is-theirs {
  align-self: flex-start;
  background: rgba(250, 247, 241, 0.95);
}

.match-chat__composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.match-chat__composer input {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(250, 247, 241, 0.95);
  font: inherit;
  color: var(--ink);
}

.match-chat__error {
  margin: 0 16px 8px;
}

.billing-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 16px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(250, 247, 241, 0.92);
}

.billing-banner--compact {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.billing-banner__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.billing-banner__status {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: normal;
}

.billing-banner__copy,
.billing-banner__warn,
.billing-banner__note {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.billing-banner__warn {
  color: var(--royal, #8b1e2d);
}

/* No payment button in the web banner — Play Billing only (TWA). */

/* ── Weekly home + bottom dock (2026-08-21-D) ── */

.match-shell--app {
  --match-dock-h: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--match-dock-h);
}

.match-main--docked {
  padding-bottom: 24px;
}

.match-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(250, 247, 241, 0.96);
  backdrop-filter: blur(8px);
}

.match-dock__item {
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 600 0.68rem/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}

.match-dock__item:active {
  background: rgba(139, 30, 45, 0.06);
}

.match-dock__item.is-active {
  color: var(--royal, #8b1e2d);
  background: rgba(196, 163, 90, 0.12);
}

.match-dock__badge {
  display: inline-flex;
  min-width: 1.25rem;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--royal, #8b1e2d);
  color: #fff8f0;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

.match-act--heart {
  min-height: 44px;
  margin-top: 8px;
}

.match-week-tile__acts {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  position: relative;
  z-index: 6;
}

.match-week-tile__heart,
.match-week-tile__flame {
  position: relative;
  top: auto;
  right: auto;
  z-index: 6;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  color: #fff8f0;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(20, 8, 10, 0.28);
}

.match-week-tile__heart {
  background: #8b1e2d;
  animation: match-heart-pulse 2.4s ease-in-out infinite;
}

.match-week-tile__flame {
  background: #c45a14;
  animation: match-flame-pulse 2.6s ease-in-out infinite;
}

.match-week-tile__heart:disabled,
.match-week-tile__flame:disabled {
  opacity: 0.4;
  animation: none;
}

@keyframes match-heart-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 18px rgba(139, 30, 45, 0.28);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 12px 26px rgba(139, 30, 45, 0.45);
  }
}

@keyframes match-flame-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 18px rgba(196, 90, 20, 0.28);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 12px 26px rgba(196, 90, 20, 0.48);
  }
}

.match-act--flame {
  background: #c45a14;
  color: #fff8f0;
  border-color: #c45a14;
}

.match-week-tile__score {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(42, 22, 24, 0.78);
  color: #fff8ec;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.fifa-shield-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.match-week-tile-wrap {
  position: relative;
  perspective: 1100px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter:
    drop-shadow(0 10px 18px rgba(20, 8, 10, 0.32))
    drop-shadow(0 0 16px var(--tier-glow));
}

.match-week-tile--fifa {
  --fifa-ink: #2c2110;
  --fifa-foil: linear-gradient(165deg, #f3c089 0%, #c8884a 42%, #8a4e22 100%);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  min-height: 0;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fifa-ink);
  font: inherit;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transform-style: preserve-3d;
  transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  /* Clip lives on each face so 3D flip is not flattened. */
  -webkit-clip-path: none;
  clip-path: none;
}

.match-week-tile--fifa[data-plan="free"] {
  --fifa-ink: #2a1610;
  --fifa-foil: linear-gradient(168deg, #f6d2a4 0%, #e0a066 28%, #b06a2c 62%, #6e3a16 100%);
}

.match-week-tile--fifa[data-plan="paid"],
.match-week-tile--fifa[data-plan="subscriber"] {
  --fifa-ink: #2a3038;
  --fifa-foil: linear-gradient(168deg, #ffffff 0%, #eef2f6 34%, #c5ccd4 68%, #9aa3ad 100%);
}

.match-week-tile--fifa[data-plan="vip"] {
  --fifa-ink: #2c2110;
  --fifa-foil: linear-gradient(168deg, #fff6c8 0%, #f0d56a 26%, #d4a017 58%, #b8860b 82%, #f3e08a 100%);
}

.match-week-tile--fifa.is-flipped,
.match-week-tile-wrap.is-flipped .match-week-tile--fifa {
  transform: rotateY(180deg);
}

.match-week-tile--fifa.is-flipped .match-week-tile__face--front,
.match-week-tile-wrap.is-flipped .match-week-tile__face--front {
  pointer-events: none;
}

.match-week-tile--fifa.is-flipped .match-week-tile__face--back,
.match-week-tile-wrap.is-flipped .match-week-tile__face--back {
  pointer-events: auto;
}

.match-week-tile--fifa:not(.is-revealed) {
  cursor: grab;
}

.match-week-tile--fifa.is-flipped {
  cursor: grabbing;
}

.match-week-tile__foil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fifa-foil);
  pointer-events: none;
}

.match-week-tile__foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0%, transparent 28%, transparent 62%, rgba(255, 255, 255, 0.18) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.07) 0 2px,
      transparent 2px 6px
    );
  pointer-events: none;
}

.match-week-tile__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--fifa-ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-clip-path: url(#un8-fifa-shield);
  clip-path: url(#un8-fifa-shield);
}

.match-week-tile--fifa > .match-week-tile__face {
  overflow: visible;
}

.match-week-tile__face--front {
  z-index: 2;
  transform: rotateY(0deg);
}

.match-week-tile__face--back {
  display: flex;
  flex-direction: column;
  /* Keep copy inside the shield body — top tip + side tapers clip hard. */
  padding: 18% 16% 16%;
  text-align: left;
  color: #1c1410;
  z-index: 1;
  transform: rotateY(180deg);
  pointer-events: none;
}

.match-week-tile__back-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 8px 6px;
  border-radius: 10px;
  background: rgba(255, 250, 242, 0.92);
  box-shadow: inset 0 0 0 1px rgba(28, 20, 16, 0.08);
  color: #1c1410;
  overflow: hidden;
}

.match-week-tile__face--front,
.match-week-tile__back-head,
.match-week-tile__prompt {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
}

.match-week-tile__back-head {
  display: block;
  width: 100%;
  text-align: left;
}

.match-week-tile__prompt {
  width: 100%;
  text-align: left;
  border-radius: 8px;
  padding: 4px 6px;
  margin: 0 -6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fifa-ink) 18%, transparent);
}

.match-week-tile__heart.is-sent {
  opacity: 1;
  animation: none;
  cursor: default;
  background: #5c1420;
}

.match-week-tile--fifa[data-mood="ember"] .match-week-tile__face--front .match-week-tile__photo {
  filter: saturate(1.08) contrast(1.04);
}

.match-week-tile--fifa[data-mood="ink"] .match-week-tile__face--front .match-week-tile__photo {
  filter: saturate(0.88) contrast(1.08);
}

.match-week-tile--fifa[data-mood="olive"] .match-week-tile__face--front .match-week-tile__photo {
  filter: sepia(0.18) saturate(0.95);
}

.match-week-tile--fifa[data-mood="dusk"] .match-week-tile__face--front .match-week-tile__photo {
  filter: hue-rotate(-8deg) saturate(1.05);
}

.match-week-tile__rating {
  position: absolute;
  top: 8%;
  left: 10%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
  line-height: 0.86;
  color: #2a1610;
  text-shadow: none;
}

.match-week-tile--fifa[data-score-band="green"] .match-week-tile__rating strong,
.match-week-tile--fifa[data-score-band="green"] .match-week-tile__back-score,
.match-pack__card[data-score-band="green"] .match-pack__card-score {
  color: #1b8a3a;
}

.match-week-tile--fifa[data-score-band="yellow"] .match-week-tile__rating strong,
.match-week-tile--fifa[data-score-band="yellow"] .match-week-tile__back-score,
.match-pack__card[data-score-band="yellow"] .match-pack__card-score {
  color: #d4a017;
}

.match-week-tile--fifa[data-score-band="orange"] .match-week-tile__rating strong,
.match-week-tile--fifa[data-score-band="orange"] .match-week-tile__back-score,
.match-pack__card[data-score-band="orange"] .match-pack__card-score {
  color: #e07a14;
}

.match-week-tile--fifa[data-score-band="red"] .match-week-tile__rating strong,
.match-week-tile--fifa[data-score-band="red"] .match-week-tile__back-score,
.match-pack__card[data-score-band="red"] .match-pack__card-score {
  color: #c62828;
}

.match-week-tile__rating strong {
  font-family: var(--font-display);
  font-size: 2.15rem;
  font-weight: 800;
}

.match-week-tile__rating em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  opacity: 0.72;
}

.match-week-tile__tenure {
  position: absolute;
  top: 52px;
  left: 8px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(20, 10, 12, 0.62);
  color: #fff8ec;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.match-week-tile__stats {
  position: absolute;
  left: 8px;
  bottom: 58px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff8ec;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.match-week-tile__stats span {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.match-week-tile__stats b {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.match-week-tile__stats i {
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.match-week-tile__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 22px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: linear-gradient(transparent, rgba(20, 10, 12, 0.82));
  color: #fff8ec;
  text-align: left;
}

.match-week-tile__plate strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
}

.match-week-tile__plate span {
  font-size: 0.72rem;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-week-tile__back-score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display), "Source Sans 3", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: #1c1410;
}

.match-week-tile__back-score-n {
  color: inherit;
  font-weight: 800;
}

.match-week-tile__back-score-den {
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.55;
  color: #1c1410;
}

.match-week-tile--fifa[data-score-band="green"] .match-week-tile__back-score,
.match-week-tile--fifa[data-score-band="green"] .match-week-tile__back-score-n {
  color: #1b8a3a;
}

.match-week-tile--fifa[data-score-band="yellow"] .match-week-tile__back-score,
.match-week-tile--fifa[data-score-band="yellow"] .match-week-tile__back-score-n {
  color: #b8860b;
}

.match-week-tile--fifa[data-score-band="orange"] .match-week-tile__back-score,
.match-week-tile--fifa[data-score-band="orange"] .match-week-tile__back-score-n {
  color: #c45f0a;
}

.match-week-tile--fifa[data-score-band="red"] .match-week-tile__back-score,
.match-week-tile--fifa[data-score-band="red"] .match-week-tile__back-score-n {
  color: #c62828;
}

.match-week-tile__back-score-label {
  margin: 2px 0 0;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.62;
  color: #1c1410;
}

.match-week-tile__back-name {
  display: block;
  font-family: var(--font-display), "Source Sans 3", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1c1410;
}

.match-week-tile__back-meta {
  margin: 0;
  font-size: 0.66rem;
  opacity: 0.78;
  color: #1c1410;
}

.match-week-tile__fifa-stats {
  list-style: none;
  margin: 2px 0 0;
  padding: 5px 0 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  border-top: 1px solid rgba(28, 20, 16, 0.14);
  border-bottom: 1px solid rgba(28, 20, 16, 0.14);
  flex: 0 0 auto;
}

.match-week-tile__fifa-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.match-week-tile__fifa-stat-lab {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
  color: #1c1410;
}

.match-week-tile__fifa-stat-val {
  font-family: var(--font-display), "Source Sans 3", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  color: #1c1410;
  font-variant-numeric: tabular-nums;
}

.match-week-tile__back-block {
  margin: 0;
  font-size: 0.64rem;
  line-height: 1.25;
  color: #1c1410;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 1.6em;
}

.match-week-tile__back-kicker {
  display: block;
  margin-bottom: 1px;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5c1420;
}

.match-week-tile__go-profile {
  appearance: none;
  margin-top: auto;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff8ec;
  background: linear-gradient(165deg, #8b1e2d 0%, #5c1420 100%);
  box-shadow: 0 4px 10px rgba(40, 8, 12, 0.28);
  cursor: pointer;
}

.match-week-tile__go-profile:disabled {
  opacity: 0.55;
  cursor: default;
}

.match-week-tile__go-profile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fifa-ink) 55%, #fff8ec);
  outline-offset: 2px;
}

.match-week-tile__hold-hint {
  margin: auto 0 0;
  font-size: 0.62rem;
  line-height: 1.25;
  opacity: 0.72;
  text-align: center;
}

.match-profile-reader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--paper, #f7f1e6);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.match-profile-reader__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--paper, #f7f1e6) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #2a1610) 10%, transparent);
}

.match-profile-reader__bar > button:first-child {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink, #2a1610);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

.match-profile-reader__wait {
  margin: 0 0 0 auto;
  max-width: 16rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-muted);
  text-align: right;
}

.match-profile-reader__chat {
  appearance: none;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff8ec;
  background: linear-gradient(165deg, #8b1e2d 0%, #5c1420 100%);
  cursor: pointer;
}

.match-profile-reader__body {
  flex: 1;
  padding: 0 0 28px;
}

@media (prefers-reduced-motion: reduce) {
  .match-week-tile--fifa {
    transition: none;
  }

  .match-week-tile--fifa.is-flipped,
  .match-week-tile-wrap.is-flipped .match-week-tile--fifa {
    transform: none;
  }

  .match-week-tile__face--front,
  .match-week-tile__face--back {
    transition: opacity 0.2s ease;
  }

  .match-week-tile--fifa:not(.is-flipped) .match-week-tile__face--back,
  .match-week-tile-wrap:not(.is-flipped) .match-week-tile__face--back {
    opacity: 0;
  }

  .match-week-tile--fifa.is-flipped .match-week-tile__face--front,
  .match-week-tile-wrap.is-flipped .match-week-tile__face--front {
    opacity: 0;
  }

  .match-week-tile--fifa.is-flipped .match-week-tile__face--back,
  .match-week-tile-wrap.is-flipped .match-week-tile__face--back {
    opacity: 1;
    transform: none;
  }

  .match-week-tile__heart,
  .match-week-tile__flame {
    animation: none;
  }
}

.match-card__liked {
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(139, 30, 45, 0.9);
  color: #fff8f0;
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 36ch;
}

.match-feed__countdown {
  margin: 6px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent, #c4a35a);
  letter-spacing: 0.02em;
}

.match-feed__short {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 36ch;
}

.match-week-grid {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.match-week-grid--bleed {
  gap: 10px;
  min-height: min(72vh, 560px);
}

.match-week-grid--bleed.is-animating li {
  animation: none;
}

@keyframes match-tile-in {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.88) rotateX(8deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.03) rotateX(0deg);
  }
  78% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.match-feed.is-swapping .match-feed__title {
  animation: match-title-pulse 1.15s var(--ease);
}

@keyframes match-title-pulse {
  0%,
  100% {
    transform: none;
  }
  40% {
    transform: scale(1.03);
    color: var(--royal);
  }
}

.match-week-tile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.match-week-tile.match-week-tile--fifa {
  display: block;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fifa-ink);
  aspect-ratio: 5 / 7;
  min-height: 0;
  height: auto;
}

.match-week-tile--bleed {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  min-height: min(34vh, 260px);
  height: 100%;
  box-shadow: var(--shadow-soft);
}

.match-week-tile__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 248, 236, 0.35), transparent 55%),
    linear-gradient(165deg, #6e1522 0%, #8b1e2d 42%, #3d1018 100%);
}

.match-week-tile--fifa .match-week-tile__photo {
  /* Full card; foil shows as Rand outside the photo shield clip. */
  inset: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  -webkit-clip-path: none;
  clip-path: none;
  filter: none;
}

.match-week-tile--fifa .match-week-tile__img,
.match-week-tile--fifa .match-week-tile__monogram {
  -webkit-clip-path: url(#un8-fifa-shield-photo);
  clip-path: url(#un8-fifa-shield-photo);
}

.match-week-tile--fifa .match-week-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 0;
}

.match-week-tile--fifa .match-week-tile__monogram {
  color: rgba(42, 22, 16, 0.28);
}

.match-week-tile__monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 12vw, 4.2rem);
  font-weight: 600;
  color: rgba(255, 248, 236, 0.92);
  letter-spacing: 0.04em;
}

.match-week-tile__veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(transparent, rgba(42, 22, 24, 0.78));
  color: #fff8ec;
}

.match-week-tile__veil strong {
  font-size: 1.05rem;
  font-family: var(--font-display);
}

.match-week-tile__veil span {
  font-size: 0.82rem;
  opacity: 0.88;
}

.match-week-tile.is-active {
  border-color: var(--royal, #8b1e2d);
  box-shadow: 0 0 0 1px rgba(139, 30, 45, 0.25);
}

.match-week-tile__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #8b1e2d, #5c1420);
  color: #faf7f1;
  font-family: var(--font-display);
  font-weight: 600;
  flex-shrink: 0;
}

.match-week-tile__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.match-week-tile__copy strong {
  font-size: 0.92rem;
}

.match-week-tile__copy span {
  font-size: 0.78rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-card--bleed {
  padding: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
}

.match-card__hero--photo {
  position: relative;
  display: block;
  margin: 0;
  min-height: min(58vh, 420px);
}

.match-card__photo-plane {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(100% 70% at 70% 10%, rgba(196, 163, 90, 0.28), transparent 50%),
    linear-gradient(168deg, #8b1e2d 0%, #5c1420 55%, #2a1618 100%);
  overflow: hidden;
}

.match-card__photo,
.match-week-tile__img,
.match-pack__card-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.match-card__photo-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(42, 22, 24, 0.55) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(42, 22, 24, 0.18) 100%);
  z-index: 1;
}

.match-card__photo-plane > * {
  z-index: 0;
}

.match-card--bleed .match-card__initial {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: clamp(4rem, 22vw, 7rem);
  color: rgba(255, 248, 236, 0.9);
}

.match-card--bleed .match-card__identity {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 36px 18px 18px;
  background: linear-gradient(transparent, rgba(42, 22, 24, 0.82));
  color: #fff8ec;
}

.match-card--bleed .match-card__identity h2 {
  color: #fff8ec;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.match-card--bleed .match-card__identity p {
  color: rgba(255, 248, 236, 0.82);
}

.match-card__body {
  padding: 16px 18px 20px;
  background: rgba(250, 247, 241, 0.96);
  border: 1px solid var(--line-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

.match-card--bleed .match-card__body {
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 248, 236, 0.98), rgba(247, 239, 224, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 28px rgba(42, 22, 24, 0.1);
}

.match-feed__back {
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--royal);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  font: inherit;
}

.match-feed__stage--bleed {
  min-height: 0;
}

.match-dock {
  animation: match-dock-in 0.5s var(--ease) both;
}

@keyframes match-dock-in {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

.match-dock__item.is-active {
  animation: match-dock-active 0.35s var(--ease);
}

@keyframes match-dock-active {
  from {
    transform: scale(0.96);
  }
  to {
    transform: none;
  }
}

.match-extra {
  margin: 16px 0;
  text-align: center;
}

.match-who {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}

.match-who--peek {
  margin: 0 0 14px;
  padding: 12px 0 0;
  border-top: 1px dashed var(--line-strong);
}

.match-who__hint {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: var(--ink-muted);
  max-width: 40ch;
}

.match-who__list--cards {
  gap: 10px;
}

.match-who__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.match-who__photo,
.match-who__mono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 18%;
  background: rgba(196, 90, 55, 0.16);
}

.match-who__mono {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.match-who__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-who__row .match-act {
  flex-shrink: 0;
}

.match-who-page__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.match-who-page__card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
}

.match-who-page__photo,
.match-who-page__mono {
  width: 92px;
  height: 120px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 8px;
  background: rgba(196, 90, 55, 0.16);
}

.match-who-page__mono {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
}

.match-who-page__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.match-who-page__body span {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.match-who-page__body p {
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.match-who__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.match-who__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.match-who__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}

.match-who__list li.match-who__row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.match-who__list span {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.match-profile-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 20px;
}

.match-profile-billing {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
  background:
    linear-gradient(165deg, rgba(255, 248, 236, 0.7), rgba(255, 255, 255, 0.35));
  box-shadow: 0 8px 24px rgba(92, 64, 51, 0.06);
}

.billing-banner__credits {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--royal);
  font-size: 0.95rem;
}

/* ── Tier chrome — card plan, not viewer. Bronze / silver / gold. ── */

.match-feed,
.match-week-grid,
.match-week-tile,
.match-card,
.match-empty,
.match-pack {
  --tier-frame: #b06a2c;
  --tier-mid: #e0a066;
  --tier-deep: #4a2610;
  --tier-glow: rgba(176, 106, 44, 0.38);
  --tier-edge: linear-gradient(145deg, #e8bd8a 0%, #b06a2c 46%, #4a2610 100%);
  --tier-rank: 0;
}

/* free — copper/bronze */
[data-plan="free"],
.match-feed[data-plan="free"],
.match-week-grid[data-plan="free"],
.match-week-tile[data-plan="free"],
.match-card[data-plan="free"],
.match-empty[data-plan="free"],
.match-pack[data-plan="free"] {
  --tier-frame: #b06a2c;
  --tier-mid: #e0a066;
  --tier-deep: #4a2610;
  --tier-glow: rgba(176, 106, 44, 0.38);
  --tier-edge: linear-gradient(145deg, #e8bd8a 0%, #b06a2c 46%, #4a2610 100%);
  --tier-rank: 0;
}

/* paid — silver. subscriber kept as a transition alias. */
[data-plan="paid"],
[data-plan="subscriber"],
.match-feed[data-plan="paid"],
.match-feed[data-plan="subscriber"],
.match-week-grid[data-plan="paid"],
.match-week-grid[data-plan="subscriber"],
.match-week-tile[data-plan="paid"],
.match-week-tile[data-plan="subscriber"],
.match-card[data-plan="paid"],
.match-card[data-plan="subscriber"],
.match-empty[data-plan="paid"],
.match-empty[data-plan="subscriber"],
.match-pack[data-plan="paid"],
.match-pack[data-plan="subscriber"] {
  --tier-frame: #9aa3ad;
  --tier-mid: #e6ebf0;
  --tier-deep: #3d454e;
  --tier-glow: rgba(190, 200, 212, 0.48);
  --tier-edge: linear-gradient(145deg, #f2f5f8 0%, #9aa3ad 46%, #3d454e 100%);
  --tier-rank: 1;
}

/* vip — gold */
[data-plan="vip"],
.match-feed[data-plan="vip"],
.match-week-grid[data-plan="vip"],
.match-week-tile[data-plan="vip"],
.match-card[data-plan="vip"],
.match-empty[data-plan="vip"],
.match-pack[data-plan="vip"] {
  --tier-frame: #c9971f;
  --tier-mid: #f0d67a;
  --tier-deep: #6b4a06;
  --tier-glow: rgba(201, 151, 31, 0.52);
  --tier-edge: linear-gradient(145deg, #f7e6a8 0%, #c9971f 45%, #6b4a06 100%);
  --tier-rank: 2;
}

.match-week-tile--bleed {
  box-shadow:
    0 0 0 2px var(--tier-frame),
    0 0 18px var(--tier-glow),
    var(--shadow-soft);
}

.match-week-tile--bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  background: var(--tier-edge);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.92;
}

.match-week-tile--bleed .match-week-tile__photo {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 248, 236, 0.28), transparent 55%),
    linear-gradient(165deg, var(--tier-deep) 0%, var(--tier-frame) 42%, #2a1618 100%);
}

.match-card[data-plan] {
  border-color: var(--tier-frame);
  box-shadow:
    0 0 0 1px var(--tier-frame),
    0 0 20px var(--tier-glow),
    var(--shadow-soft);
}

.match-card--bleed[data-plan] {
  border: none;
  box-shadow: none;
}

.match-card--bleed[data-plan] .match-card__hero--photo {
  box-shadow:
    0 0 0 2px var(--tier-frame),
    0 0 22px var(--tier-glow);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.match-card--bleed[data-plan] .match-card__photo-plane {
  background:
    radial-gradient(100% 70% at 70% 10%, color-mix(in srgb, var(--tier-mid) 40%, transparent), transparent 50%),
    linear-gradient(168deg, var(--tier-frame) 0%, var(--tier-deep) 55%, #2a1618 100%);
}

.match-card--bleed[data-plan] .match-card__body {
  border-color: var(--tier-frame);
  box-shadow: 0 8px 20px var(--tier-glow);
}

/* ── Pack / selection reveal — dark → stack → seat → blur exit ── */

.match-week-stage {
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
}

.match-feed.is-pack-open .match-week-grid {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.match-feed.is-pack-open:has(.match-pack.is-exit) .match-week-grid {
  opacity: 1;
  visibility: visible;
}

.match-feed.is-pack-open,
.match-feed.is-pack-open .match-week-stage {
  overflow: hidden;
  min-height: min(560px, calc(100dvh - var(--match-dock-h, 72px) - 110px));
}

.match-pack {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.match-pack__veil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(12, 6, 8, 0.88);
  opacity: 0;
  transition: opacity 0.28s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
  pointer-events: none;
}

.match-pack__sign {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: match-pack-sign-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-pack__sign-mark.un8-hearts {
  width: min(42vw, 168px);
  height: calc(min(42vw, 168px) * 200 / 120);
  color: #c43a52;
  filter: drop-shadow(0 0 28px rgba(196, 58, 82, 0.45));
}

@keyframes match-pack-sign-in {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.match-pack.is-dark .match-pack__veil,
.match-pack.is-stack .match-pack__veil,
.match-pack.is-deal .match-pack__veil,
.match-pack.is-landed .match-pack__veil {
  opacity: 1;
}

.match-pack.is-exit .match-pack__veil {
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.36s ease, backdrop-filter 0.36s ease, -webkit-backdrop-filter 0.36s ease;
}

.match-pack.is-exit {
  pointer-events: none;
}

.match-pack__fan {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.match-pack__card {
  --i: 0;
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  -webkit-clip-path: url(#un8-fifa-shield);
  clip-path: url(#un8-fifa-shield);
  background: transparent;
  color: #2a1610;
  opacity: 0;
  transform: scale(0.86);
  filter: drop-shadow(0 10px 18px rgba(20, 8, 10, 0.45));
  transition:
    left 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
  transition-delay: 0ms;
}

.match-pack.is-deal .match-pack__card:not(.is-seated) {
  transition-delay: 0ms;
}

.match-pack.is-stack .match-pack__card,
.match-pack.is-deal .match-pack__card,
.match-pack.is-landed .match-pack__card {
  opacity: 1;
  transform: scale(1);
}

.match-pack.is-dark .match-pack__card {
  opacity: 0;
  transform: scale(0.72);
}

.match-pack.is-exit .match-pack__card {
  opacity: 0;
  filter: blur(8px) drop-shadow(0 8px 14px rgba(20, 8, 10, 0.28));
  transition:
    opacity 0.34s ease,
    filter 0.34s ease,
    transform 0.34s ease;
}

.match-pack__card-foil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tier-edge);
  pointer-events: none;
}

.match-pack__card-foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0%, transparent 28%, transparent 62%, rgba(255, 255, 255, 0.18) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.07) 0 2px,
      transparent 2px 6px
    );
  pointer-events: none;
}

.match-pack__card[data-plan="free"] {
  --tier-edge: linear-gradient(168deg, #f6d2a4 0%, #e0a066 28%, #b06a2c 62%, #6e3a16 100%);
}

.match-pack__card[data-plan="paid"],
.match-pack__card[data-plan="subscriber"] {
  --tier-edge: linear-gradient(168deg, #ffffff 0%, #eef2f6 34%, #c5ccd4 68%, #9aa3ad 100%);
}

.match-pack__card[data-plan="vip"] {
  --tier-edge: linear-gradient(168deg, #fff6c8 0%, #f0d56a 26%, #d4a017 58%, #b8860b 82%, #f3e08a 100%);
}

.match-pack__card-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  -webkit-clip-path: none;
  clip-path: none;
  filter: none;
}

.match-pack__card-img,
.match-pack__card-mono {
  -webkit-clip-path: url(#un8-fifa-shield-photo);
  clip-path: url(#un8-fifa-shield-photo);
}

.match-pack__card-mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 600;
  color: rgba(42, 22, 16, 0.28);
  z-index: 0;
}

.match-pack__card-score {
  position: absolute;
  top: 8%;
  left: 10%;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  font-weight: 800;
  line-height: 0.9;
  color: #2a1610;
  pointer-events: none;
}

.match-pack__card-score em {
  font-style: normal;
  font-size: 0.45em;
  font-weight: 700;
  margin-left: 1px;
  opacity: 0.72;
}

.match-pack__card[data-score-band="green"] .match-pack__card-score { color: #1b8a3a; }
.match-pack__card[data-score-band="yellow"] .match-pack__card-score { color: #d4a017; }
.match-pack__card[data-score-band="orange"] .match-pack__card-score { color: #e07a14; }
.match-pack__card[data-score-band="red"] .match-pack__card-score { color: #c62828; }

.match-pack__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 4;
  text-align: center;
  color: #f7efe6;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  padding: 0 16px;
}

.match-pack.is-stack .match-pack__copy,
.match-pack.is-deal .match-pack__copy,
.match-pack.is-landed .match-pack__copy {
  opacity: 1;
  transform: none;
}

.match-pack.is-exit .match-pack__copy {
  opacity: 0;
}

.match-pack__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.match-pack__hint {
  margin: 4px 0 0;
  font-size: 0.78rem;
  opacity: 0.78;
}

@media (prefers-reduced-motion: reduce) {
  .match-pack__card,
  .match-pack__veil,
  .match-pack__copy,
  .match-pack__sign {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

.match-feed.is-pack-open .match-feed__title {
  animation: match-title-pulse 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .match-week-grid--bleed.is-animating li,
  .match-feed.is-swapping .match-feed__title,
  .match-feed.is-pack-open .match-feed__title,
  .intro-stage__orbit,
  .intro-stage__faces,
  .intro-stage__faces span,
  .match-dock,
  .match-dock__item.is-active,
  .progress__item.is-active .progress__label {
    animation: none !important;
  }

  .match-feed.is-pack-open .match-week-grid {
    opacity: 0;
  }
}

/* Intro (skippable brand welcome) */
.intro-stage {
  position: relative;
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 24px 12px;
  overflow: hidden;
}

.intro-stage__orbit {
  position: absolute;
  inset: 8% 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(196, 163, 90, 0.35), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(139, 30, 45, 0.18), transparent 50%);
  animation: intro-orbit 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes intro-orbit {
  from {
    transform: scale(0.92) rotate(-4deg);
  }
  to {
    transform: scale(1.06) rotate(4deg);
  }
}

.intro-stage__faces {
  position: relative;
  display: flex;
  gap: 10px;
  font-size: 2.4rem;
  line-height: 1;
  animation: intro-faces 1.2s var(--ease) both;
}

.intro-stage__faces span {
  display: inline-block;
  animation: intro-bounce 1.8s ease-in-out infinite;
}

.intro-stage__faces span:nth-child(2) {
  animation-delay: 0.15s;
}

.intro-stage__faces span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes intro-faces {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.intro-stage__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 600;
}

.intro-stage__text {
  position: relative;
  margin: 0;
  max-width: 28ch;
  color: var(--ink-soft);
}

.intro-stage video {
  position: relative;
  width: min(100%, 360px);
  border-radius: 12px;
  background: #2a1618;
}

.progress__label::before {
  margin-right: 4px;
}

.progress__item.is-active .progress__label {
  animation: progress-label-glow 1.4s ease-in-out infinite alternate;
}

@keyframes progress-label-glow {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 1;
  }
}


/* ── The ten-word comment composer (Masco 2026-08-29) ─────────────────────
   Deliberately plain. The comment is the interesting thing on the screen; the
   box around it should not compete with the card above it. */

.match-act__count {
  font-style: normal;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.match-act--heart:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.match-compose {
  margin: 12px 0 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
}

.match-compose--grid {
  margin-top: 4px;
}

.match-compose--sheet {
  margin: 0 0 12px;
  position: relative;
  z-index: 8;
}

.match-compose__lead {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.match-compose__quote {
  margin: 0 0 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(139, 30, 45, 0.06);
  border: 1px solid var(--line);
}

.match-compose__quote img {
  display: block;
  width: 100%;
  height: 88px;
  object-fit: cover;
  object-position: center 18%;
}

.match-compose__quote blockquote {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
}

.match-compose__anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.match-compose__anchor {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.match-compose__anchor.is-on {
  background: var(--royal);
  border-color: var(--royal);
  color: var(--white);
}

.match-compose__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
}

.match-compose__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.match-compose__count {
  margin: 6px 0 12px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Nine of ten warns in gold; eleven blocks in crimson. The Send button is
   already disabled by then — this only explains why. */
.match-compose__count.is-near {
  color: #8a6508;
}

.match-compose__count.is-over {
  color: var(--danger);
  font-weight: 600;
}

.match-compose__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Inbound opener on the Messages tab. */
.match-who__comment {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── Phone HUD + logo menu + lockup split (2026-09-11) ── */

.match-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.match-brand--hit {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  max-width: 4.8rem;
  line-height: 0;
}

.match-hud {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.match-hud__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(42, 22, 24, 0.88);
  color: #fff8ec;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.match-hud__chip em {
  font-style: normal;
  font-size: 0.9rem;
}

.match-hud__chip--flame {
  background: rgba(196, 90, 20, 0.95);
}

.match-hud__coin {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #f6e27a, #c9971f 55%, #6b4a06);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 236, 0.4);
}

.match-top .match-brand__word {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.match-top .match-nav {
  min-width: 0;
}

.match-hud {
  overflow: visible;
}

.match-hud__chip {
  flex-shrink: 0;
}

.match-logo-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
}

.match-logo-menu__veil {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(42, 22, 24, 0.62);
  animation: match-menu-veil 0.28s ease both;
}

.match-logo-menu__bloom {
  position: relative;
  z-index: 1;
  width: min(88vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 18px;
  border-radius: 24px;
  background: var(--bg);
  animation: match-menu-bloom 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-logo-menu__bloom .brand--compact {
  margin-bottom: 6px;
}

.match-logo-menu__item {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  font-weight: 700;
}

.match-logo-menu__item--quiet {
  border-color: transparent;
  background: transparent;
  font-weight: 600;
  opacity: 0.72;
  min-height: 40px;
}

@keyframes match-menu-veil {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes match-menu-bloom {
  from {
    opacity: 0;
    transform: scale(0.72) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.match-feed.is-pack-open .match-week-grid {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.match-feed.is-pack-open:has(.match-pack.is-exit) .match-week-grid {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 520px) {
  .match-shell--app {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100dvh;
    box-shadow: var(--shadow-soft);
  }

  .match-dock {
    left: 50%;
    right: auto;
    width: 430px;
    margin-left: -215px;
    transform: none;
  }
}

@media (max-width: 480px) {
  .match-nav__link--quiet {
    display: none;
  }

  .match-feed__eyebrow {
    display: none;
  }

  .match-act {
    font-size: 0.82rem;
    min-height: 48px;
    padding: 0 6px;
  }
}

/* ── Flame send (giving your weekly flame) ── */
.match-flame-send {
  position: relative;
  isolation: isolate;
  min-height: min(72dvh, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 36px;
  outline: none;
  cursor: pointer;
}

.match-flame-send__veil {
  position: absolute;
  inset: -8px;
  z-index: 0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(255, 140, 50, 0.22), transparent 58%),
    radial-gradient(120% 80% at 50% 100%, rgba(42, 16, 8, 0.55), transparent 50%),
    #1a0e0a;
  animation: match-flame-veil 0.28s var(--ease, ease) both;
}

.match-flame-send__stage {
  position: relative;
  z-index: 1;
  width: min(72vw, 260px);
  height: min(72vw, 260px);
}

.match-flame-send__bloom {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 210, 120, 0.55) 0%, rgba(255, 120, 40, 0.28) 42%, transparent 70%);
  opacity: 0;
  animation: match-flame-bloom 3.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-flame-send__sparks {
  position: absolute;
  inset: 8%;
  pointer-events: none;
}

.match-flame-send__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 8px #ffb347;
  opacity: 0;
  animation: match-flame-spark 1.35s calc(1.15s + (var(--s) * 0.05s)) ease-out both;
}

.match-flame-send__face {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  overflow: hidden;
  background: #3a2218;
  border: 3px solid rgba(255, 196, 120, 0.85);
  box-shadow:
    0 0 0 8px rgba(255, 140, 50, 0.12),
    0 18px 40px rgba(20, 8, 4, 0.45);
  animation: match-flame-face 3.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-flame-send__face span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: 4rem;
  color: #f6e2c4;
}

.match-flame-send__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-flame-send__token {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: 54px;
  height: 78px;
  margin-left: -27px;
  pointer-events: none;
  animation: match-flame-rise 3.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.match-flame-send__wick {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 40% 40%;
  background:
    radial-gradient(circle at 50% 72%, #fff6c8 0%, #f5a623 34%, #c44b1a 68%, transparent 78%);
  filter: blur(0.4px);
  box-shadow: 0 0 22px rgba(255, 150, 40, 0.7);
}

.match-flame-send__copy {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  text-align: center;
  color: #f8ead4;
  animation: match-flame-copy 0.7s 1.5s var(--ease, ease) both;
}

.match-flame-send__title {
  margin: 0 0 8px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
}

.match-flame-send__hint {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 234, 212, 0.62);
}

@keyframes match-flame-veil {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes match-flame-rise {
  0% {
    opacity: 0;
    transform: translateY(46vh) scale(0.42);
  }
  14% {
    opacity: 1;
  }
  56% {
    opacity: 1;
    transform: translateY(6%) scale(1.18);
  }
  78% {
    opacity: 0.85;
    transform: translateY(-6%) scale(0.42);
  }
  100% {
    opacity: 0;
    transform: translateY(-10%) scale(0.15);
  }
}

@keyframes match-flame-bloom {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.4);
  }
  62% {
    opacity: 0.9;
    transform: scale(1.18);
  }
  100% {
    opacity: 0.22;
    transform: scale(1.4);
  }
}

@keyframes match-flame-face {
  0%,
  38% {
    transform: scale(0.9);
    filter: brightness(0.82);
  }
  64% {
    transform: scale(1.08);
    filter: brightness(1.16);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

@keyframes match-flame-spark {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--s) * 36deg)) translateY(0) scale(0.35);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--s) * 36deg)) translateY(-96px) scale(0.15);
  }
}

@keyframes match-flame-copy {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.match-flame-send.is-reduced .match-flame-send__token,
.match-flame-send.is-reduced .match-flame-send__bloom,
.match-flame-send.is-reduced .match-flame-send__spark,
.match-flame-send.is-reduced .match-flame-send__face,
.match-flame-send.is-reduced .match-flame-send__copy {
  animation: none;
}

.match-flame-send.is-reduced .match-flame-send__token,
.match-flame-send.is-reduced .match-flame-send__spark {
  display: none;
}

.match-flame-send.is-reduced .match-flame-send__bloom {
  opacity: 0.28;
}

.match-flame-send.is-reduced .match-flame-send__copy {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .match-flame-send__token,
  .match-flame-send__bloom,
  .match-flame-send__spark,
  .match-flame-send__face,
  .match-flame-send__copy,
  .match-flame-send__veil {
    animation: none !important;
  }

  .match-flame-send__token,
  .match-flame-send__spark {
    display: none;
  }

  .match-flame-send__copy {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   REVEAL 2026-09-20-D — dark → present → hold → fall
   Masco: "dark like FIFA, then the cards presented one by one till the four
   make up almost the whole screen, then you press and they fall back."
   Seats are computed in PackReveal.tsx; everything here is paint and timing.
   ========================================================================== */

.match-pack {
  position: fixed;
  inset: 0;
  z-index: 60;
  border-radius: 0;
}

/* Deeper and slower than the old veil. Mysterious is dark, not busy. */
.match-pack__veil {
  background: rgba(9, 5, 7, 0.94);
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease;
}

.match-pack.is-dark .match-pack__veil,
.match-pack.is-present .match-pack__veil,
.match-pack.is-hold .match-pack__veil,
.match-pack.is-fall .match-pack__veil {
  opacity: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* A card is invisible in the deck and arrives as it travels to its seat. */
.match-pack.is-present .match-pack__card,
.match-pack.is-hold .match-pack__card,
.match-pack.is-fall .match-pack__card {
  opacity: 0;
  transform: scale(0.9);
}

.match-pack.is-present .match-pack__card.is-seated,
.match-pack.is-hold .match-pack__card,
.match-pack.is-fall .match-pack__card {
  opacity: 1;
  transform: scale(1);
}

/* Presentation travel: unhurried, so the eye can follow one card. */
.match-pack.is-present .match-pack__card,
.match-pack.is-hold .match-pack__card {
  transition:
    left 0.66s cubic-bezier(0.18, 0.9, 0.24, 1),
    top 0.66s cubic-bezier(0.18, 0.9, 0.24, 1),
    width 0.66s cubic-bezier(0.18, 0.9, 0.24, 1),
    height 0.66s cubic-bezier(0.18, 0.9, 0.24, 1),
    opacity 0.34s ease,
    transform 0.52s cubic-bezier(0.18, 0.9, 0.24, 1),
    filter 0.35s ease;
}

.match-pack.is-hold .match-pack__card {
  filter: drop-shadow(0 16px 30px rgba(12, 4, 8, 0.6));
}

/* The fall: quicker, and they shrink into the grid rather than fly. */
.match-pack.is-fall .match-pack__card {
  transition:
    left 0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    top 0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    width 0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    height 0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s ease;
  filter: drop-shadow(0 8px 14px rgba(20, 8, 10, 0.4));
}

.match-pack.is-fall .match-pack__veil {
  opacity: 0.55;
  transition: opacity 0.52s ease;
}

.match-pack.is-present .match-pack__copy,
.match-pack.is-hold .match-pack__copy {
  opacity: 1;
  transform: none;
}

.match-pack.is-fall .match-pack__copy {
  opacity: 0;
}

/* The hold waits for a press, so the hint has to look like it is waiting. */
.match-pack.is-hold .match-pack__hint {
  animation: match-pack-wait 2.2s ease-in-out infinite;
}

@keyframes match-pack-wait {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

.match-pack.is-hold .match-pack__title {
  font-size: 1.28rem;
}

/* Name — only legible once the cards are big, which is the point of hold. */
.match-pack__card-name {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 66%;
  z-index: 3;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 3.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2a1610;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-pack.is-present .match-pack__card.is-seated .match-pack__card-name,
.match-pack.is-hold .match-pack__card-name {
  opacity: 1;
}

.match-pack.is-fall .match-pack__card-name {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .match-pack.is-hold .match-pack__hint {
    animation: none !important;
  }
}

/* The pack now portals onto <body>, so it outranks the sticky header (z 5),
   the dock (z 20) and the voice FAB (z 25). A reveal with the HUD painted on
   top of it is not a takeover. */
.match-pack {
  z-index: 2000;
}

/* The old reveal-the-grid rule matched `.match-feed .match-pack`; the portal
   broke that descendant chain, so it is restated from the body. */
body:has(.match-pack.is-fall) .match-feed.is-pack-open .match-week-grid,
body:has(.match-pack.is-exit) .match-feed.is-pack-open .match-week-grid {
  opacity: 1;
  visibility: visible;
}

.match-pack__copy {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* At showcase size the name sits over hair and shoulders, so it needs its own
   ground rather than a text-shadow fighting a dark photo. */
.match-pack__card-name {
  color: #fbf4ec;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  background: linear-gradient(
    to bottom,
    rgba(18, 8, 12, 0) 0%,
    rgba(18, 8, 12, 0.55) 40%,
    rgba(18, 8, 12, 0.55) 60%,
    rgba(18, 8, 12, 0) 100%
  );
  padding: 4px 6px;
}

/* ==========================================================================
   2026-09-20-E — buttons live INSIDE the card, and they hold still
   Masco: "place the buttons inside the cards and not let them go bigger and
   smaller, that looks kinda cheap."
   ========================================================================== */

/* The pulse was a forever 12 % scale loop on both buttons. Gone. Feedback is
   colour and a press-in now, never size. */
.match-week-tile__heart,
.match-week-tile__flame {
  animation: none !important;
}

.match-week-tile__acts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  margin-top: 0;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.match-week-tile__acts > button {
  pointer-events: auto;
}

.match-week-tile__heart,
.match-week-tile__flame {
  width: 46px;
  height: 46px;
  font-size: 1.25rem;
  border: 1.5px solid rgba(255, 245, 235, 0.55);
  box-shadow: 0 6px 16px rgba(12, 4, 8, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: filter 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}

.match-week-tile__heart { background: rgba(139, 30, 45, 0.92); }
.match-week-tile__flame { background: rgba(196, 90, 20, 0.92); }

.match-week-tile__heart:active,
.match-week-tile__flame:active {
  filter: brightness(1.28);
}

.match-week-tile__heart.is-sent {
  background: rgba(139, 30, 45, 0.5);
  border-color: rgba(255, 245, 235, 0.85);
}

/* Peeking the stats back is the card's own gesture — the buttons step away. */
.match-week-tile-wrap.is-flipped .match-week-tile__acts {
  opacity: 0;
  pointer-events: none;
}

/* The card takes the room the button row used to take. */
.match-week-grid--bleed {
  gap: 6px;
  margin-inline: -6px;
}

/* ==========================================================================
   THE MELT — the portrait giving way to the heart or the flame
   Masco: "an animation the picture melting with the heart or the flame after
   pressing it". Same timing for both; `data-kind` swaps token and palette.
   ========================================================================== */

/* The face is eaten from the top while it sinks and softens. `clip-path`
   inset animates everywhere; a mask-position tween does not. */
.match-flame-send__face {
  animation:
    match-flame-face 3.2s cubic-bezier(0.22, 1, 0.36, 1) both,
    un8-melt-face 2.2s 0.85s cubic-bezier(0.55, 0, 0.7, 0.4) both;
}

@keyframes un8-melt-face {
  0% {
    clip-path: inset(0 0 0 0);
    filter: none;
    transform: translateY(0) scaleY(1);
  }
  45% {
    clip-path: inset(26% 0 0 0);
    filter: blur(1.2px) saturate(1.1);
    transform: translateY(5%) scaleY(1.04);
  }
  100% {
    clip-path: inset(100% 0 0 0);
    filter: blur(6px) saturate(1.3);
    transform: translateY(16%) scaleY(1.14);
    opacity: 0.15;
  }
}

/* What is left behind as it goes: a bead of molten colour under the face. */
.match-flame-send__drip {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 1;
  width: 46%;
  height: 34%;
  margin-left: -23%;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(
    ellipse at 50% 30%,
    var(--melt-hot, rgba(255, 196, 120, 0.85)) 0%,
    var(--melt-mid, rgba(226, 110, 40, 0.5)) 45%,
    transparent 72%
  );
  filter: blur(6px);
  opacity: 0;
  animation: un8-melt-drip 2.4s 1.1s ease-out both;
  pointer-events: none;
}

@keyframes un8-melt-drip {
  0% { opacity: 0; transform: translateY(-8%) scale(0.7); }
  40% { opacity: 0.9; transform: translateY(4%) scale(1.05); }
  100% { opacity: 0; transform: translateY(18%) scale(0.85); }
}

/* The heart token — same rise and same beat as the flame's wick. */
.match-flame-send__heart {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 38%, #ff8fa3 0%, #c4384f 38%, #8b1e2d 72%);
  filter: drop-shadow(0 0 20px rgba(196, 56, 82, 0.8));
  clip-path: path(
    "M27 76 C12 62 0 46 0 30 C0 18 8 10 16 10 C21 10 25 13 27 17 C29 13 33 10 38 10 C46 10 54 18 54 30 C54 46 42 62 27 76 Z"
  );
}

/* Heart palette for the whole overlay — bordeaux where the flame is amber. */
.match-flame-send[data-kind="heart"] {
  --melt-hot: rgba(255, 150, 175, 0.85);
  --melt-mid: rgba(160, 34, 58, 0.5);
}

.match-flame-send[data-kind="heart"] .match-flame-send__veil {
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(52, 10, 22, 0.55), transparent 50%),
    #17090e;
}

.match-flame-send[data-kind="heart"] .match-flame-send__bloom {
  background: radial-gradient(
    circle,
    rgba(255, 150, 175, 0.5) 0%,
    rgba(180, 40, 70, 0.26) 42%,
    transparent 70%
  );
}

.match-flame-send[data-kind="heart"] .match-flame-send__face {
  border-color: rgba(255, 168, 188, 0.85);
  box-shadow:
    0 0 0 8px rgba(180, 40, 70, 0.14),
    0 18px 40px rgba(18, 6, 10, 0.5);
}

.match-flame-send[data-kind="heart"] .match-flame-send__spark {
  background: #ffc2d0;
  box-shadow: 0 0 8px #d64f6e;
}

@media (prefers-reduced-motion: reduce) {
  .match-flame-send__face,
  .match-flame-send__drip {
    animation: none !important;
  }
}

/* Sit the pair on the wide part of the shield, not on the taper, and keep
   them inside the silhouette at card width. Overrides the block above. */
.match-week-tile__acts {
  bottom: 17%;
  gap: 10px;
}

.match-week-tile__heart,
.match-week-tile__flame {
  width: 42px;
  height: 42px;
  font-size: 1.15rem;
}

/* ==========================================================================
   2026-09-21-A — Masco's polish pass before Camilla gets the link
   ========================================================================== */

/* 1 · The photo sits lower in the shield. The crop window moves UP the source,
   which puts the head lower in the frame and stops cutting the forehead. */
.match-week-tile__img,
.match-pack__card-img {
  object-position: 50% 30%;
}

/* 2 · iOS-style glass buttons — translucent, thin bright rim, no size change.
   Red for the heart, orange for the flame, both reading through to the photo. */
.match-week-tile__heart,
.match-week-tile__flame {
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.12),
    0 6px 18px rgba(12, 4, 8, 0.32);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: background-color 0.18s ease, filter 0.18s ease;
}

.match-week-tile__heart {
  background: rgba(255, 59, 48, 0.34);
}

.match-week-tile__flame {
  background: rgba(255, 149, 0, 0.34);
}

.match-week-tile__heart:active {
  background: rgba(255, 59, 48, 0.58);
}

.match-week-tile__flame:active {
  background: rgba(255, 149, 0, 0.58);
}

.match-week-tile__heart.is-sent {
  background: rgba(255, 59, 48, 0.62);
  border-color: rgba(255, 255, 255, 0.85);
}

/* 3 · The score has a shine. `--score-a` / `--score-b` are set inline from
   `scoreInk(score)` — the band picks the hue, the position inside the band
   picks the lift, so 94 does not look like 90. */
.match-pack__card-score,
.match-week-tile__rating strong {
  background: linear-gradient(
    168deg,
    var(--score-a, #f6e2c4) 0%,
    var(--score-a, #f6e2c4) 34%,
    var(--score-b, #b08a3c) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55))
    drop-shadow(0 2px 6px rgba(20, 8, 10, 0.35));
}

/* The band colours used to be set straight on `color`, which would now beat
   the gradient. They are neutralised; the hue lives in `--score-a/b`. */
.match-pack__card[data-score-band="green"] .match-pack__card-score,
.match-pack__card[data-score-band="yellow"] .match-pack__card-score,
.match-pack__card[data-score-band="orange"] .match-pack__card-score,
.match-pack__card[data-score-band="red"] .match-pack__card-score {
  color: transparent;
}

/* 4 · One card per corner, each sliding in from its own side of the screen.
   Masco: "one card animation placed in the first corner left up, than another
   one placed in the second corner right up etc." The entry seats are off-screen
   (see `entrySeats`), so a card travels in at full size — no growing out of a
   pile in the middle, and no four-at-once. */
.match-pack.is-present .match-pack__card,
.match-pack.is-hold .match-pack__card,
.match-pack.is-fall .match-pack__card {
  transform: none;
}

.match-pack.is-present .match-pack__card:not(.is-seated) {
  opacity: 1;
  transform: rotate(var(--tilt, -4deg));
}

.match-pack.is-present .match-pack__card[data-slot="1"]:not(.is-seated),
.match-pack.is-present .match-pack__card[data-slot="3"]:not(.is-seated) {
  --tilt: 4deg;
}

.match-pack.is-present .match-pack__card.is-seated,
.match-pack.is-hold .match-pack__card {
  opacity: 1;
  transform: rotate(0deg);
}

.match-pack.is-dark .match-pack__card {
  opacity: 0;
  transform: none;
}

/* 5 · The header stopped colliding. The credits chip was pushing into the UN8
   lockup and the language `<select>` was sitting on the flame. Three roles:
   the mark never shrinks, the chip takes the slack and is allowed to shrink,
   the picker is capped. */
.match-top {
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
  flex-wrap: nowrap;
}

.match-top > .match-brand--hit {
  flex: 0 0 auto;
  margin-right: 2px;
}

.match-top > .billing-banner--compact {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 4px 6px;
}

.match-top > .match-nav {
  flex: 0 0 auto;
  min-width: 0;
}

/* The picker is the widest thing in the bar and it does not need to be. */
.match-top select {
  max-width: 96px;
  font-size: 0.76rem;
  padding: 4px 6px;
  text-overflow: ellipsis;
}

/* Give the hearts and flame chips their own air so nothing overlaps them. */
.match-top .billing-banner__hud,
.match-top .match-hud {
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* The numeral was clipped by the shield's top curve once it got its shine and
   its drop-shadow. Bring it inside the silhouette. */
.match-pack__card-score,
.match-week-tile__rating {
  top: 12%;
  left: 12%;
}

.match-week-tile__rating strong {
  line-height: 1;
}

/* ==========================================================================
   2026-09-21-B — the photo really moves down, and the send animation keeps
   the card
   ========================================================================== */

/* WHY the last attempt was invisible: `object-position` only bites on the axis
   where the image overflows. These portraits are wider than 5 : 7, so cover
   scales to the HEIGHT and the overflow is horizontal — a vertical
   object-position changes nothing at all. So the clip moves to the PHOTO
   WRAPPER (clip-path clips the whole subtree) and the image slides inside it.
   Scale covers the gap the shift would otherwise open at the top. */
.match-week-tile__photo,
.match-pack__card-photo {
  -webkit-clip-path: url(#un8-fifa-shield-photo);
  clip-path: url(#un8-fifa-shield-photo);
}

.match-week-tile__img,
.match-pack__card-img {
  -webkit-clip-path: none;
  clip-path: none;
  object-position: 50% 50%;
  transform: translateY(6%) scale(1.14);
  transform-origin: 50% 50%;
}

/* ── The send: the card stays whole. The melt is off. ── */
.match-flame-send__face {
  animation: match-flame-face 3.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-flame-send__drip {
  display: none;
}

/* One emoji, thrown in from below, landing on the card. */
.match-flame-send__token {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  top: 46%;
  animation: none;
  display: grid;
  place-items: center;
}

.match-flame-send__glyph {
  font-size: 54px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(12, 4, 8, 0.5));
  animation: un8-token-fly 0.9s cubic-bezier(0.3, 0.9, 0.2, 1) both;
}

@keyframes un8-token-fly {
  0% {
    transform: translate(0, 210px) scale(0.5) rotate(-12deg);
    opacity: 0;
  }
  18% { opacity: 1; }
  78% {
    transform: translate(0, 6px) scale(1.14) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(0.96) rotate(0deg);
    opacity: 1;
  }
}

/* On contact the token flares once and stays put. */
.match-flame-send.is-touched .match-flame-send__glyph {
  animation: un8-token-hit 0.42s ease-out both;
}

@keyframes un8-token-hit {
  0% { transform: scale(0.96); }
  40% { transform: scale(1.5); filter: drop-shadow(0 0 26px rgba(255, 220, 160, 0.9)); }
  100% { transform: scale(1.05); }
}

/* A hundred of them, out of the point of contact. */
.match-flame-send__burst {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

.match-flame-send__bit {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 22px;
  line-height: 1;
  font-style: normal;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  will-change: transform, opacity;
  animation: un8-bit-pop 1.5s var(--d, 0ms) cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* Hearts bloom out, drift up, fade where they are. */
@keyframes un8-bit-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  14% {
    transform: translate(-50%, -50%) scale(calc(var(--sc, 1) * 1.25)) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
      scale(var(--sc, 1))
      rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

/* Flames are thrown further and leave the screen instead of fading in place. */
.match-flame-send[data-kind="flame"] .match-flame-send__bit {
  animation-duration: 1.9s;
  animation-name: un8-bit-fly;
}

@keyframes un8-bit-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  12% {
    transform: translate(-50%, -50%) scale(calc(var(--sc, 1) * 1.3));
    opacity: 1;
  }
  70% { opacity: 1; }
  100% {
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px) * 2.6))
      scale(calc(var(--sc, 1) * 0.7))
      rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-flame-send__glyph,
  .match-flame-send__bit {
    animation: none !important;
    opacity: 1;
  }
}

/* ==========================================================================
   2026-09-21-C — the Rand is back, and the card itself shines
   Masco: "now there is almost no rand at all. Make a little space from the
   pictures so that you can see the color of the cards a little. And give them
   also a shiny effect like the numbers."
   ========================================================================== */

/* The photo wrapper is now inset, so the tier foil — bronze, silver, gold —
   shows as a frame all the way round instead of being covered. The shield
   clip is objectBoundingBox, so the shape simply scales to the smaller box.
   The image's own scale drops from 1.14 to 1.08: the downward shift still
   works, and less of the photo is thrown away. */
.match-week-tile__photo,
.match-pack__card-photo {
  inset: 4.5%;
}

.match-week-tile__img,
.match-pack__card-img {
  transform: translateY(6%) scale(1.08);
}

/* A specular band across the foil, and a slow sweep — the same idea as the
   shine on the numerals, applied to the metal. `::after` already carries the
   foil's grain, so this is `::before`. */
.match-week-tile__foil::before,
.match-pack__card-foil::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 1;
  background: linear-gradient(
    102deg,
    transparent 36%,
    rgba(255, 255, 255, 0.5) 46%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.5) 54%,
    transparent 64%
  );
  transform: translateX(-72%);
  opacity: 0;
  pointer-events: none;
  animation: un8-foil-sweep 6.5s ease-in-out 1.4s infinite;
}

@keyframes un8-foil-sweep {
  0%, 58% {
    transform: translateX(-72%);
    opacity: 0;
  }
  64% { opacity: 0.62; }
  86% { opacity: 0.62; }
  100% {
    transform: translateX(72%);
    opacity: 0;
  }
}

/* Stagger the sweep so the four cards never flash in unison — that reads as a
   glitch rather than as foil. */
.match-week-grid > li:nth-child(2) .match-week-tile__foil::before { animation-delay: 2.0s; }
.match-week-grid > li:nth-child(3) .match-week-tile__foil::before { animation-delay: 3.4s; }
.match-week-grid > li:nth-child(4) .match-week-tile__foil::before { animation-delay: 4.8s; }

.match-pack__card[data-slot="1"] .match-pack__card-foil::before { animation-delay: 2.0s; }
.match-pack__card[data-slot="2"] .match-pack__card-foil::before { animation-delay: 3.4s; }
.match-pack__card[data-slot="3"] .match-pack__card-foil::before { animation-delay: 4.8s; }

/* A touch more contrast in the metal itself, so the rim reads as a rim. */
.match-week-tile__foil::after,
.match-pack__card-foil::after {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 26%,
      transparent 60%,
      rgba(255, 255, 255, 0.26) 100%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.09) 0 2px,
      transparent 2px 6px
    );
}

@media (prefers-reduced-motion: reduce) {
  .match-week-tile__foil::before,
  .match-pack__card-foil::before {
    animation: none !important;
    opacity: 0.35;
    transform: translateX(-10%);
  }
}

/* ==========================================================================
   2026-09-21-E — one inset, not two
   The 4.5 % wrapper inset from pass -C was STACKED on top of the photo
   clip-path's own inset, and a percentage inset resolves against width for
   the sides and height for the top, so the two compounded unevenly — which is
   exactly the wobble Masco saw. The rim is now defined in ONE place: the
   `un8-fifa-shield-photo` path in FifaShieldClip.tsx.
   ========================================================================== */
.match-week-tile__photo,
.match-pack__card-photo {
  inset: 0;
}

/* With the rim coming from the path again, the photo needs less blow-up to
   cover the downward shift. */
.match-week-tile__img,
.match-pack__card-img {
  transform: translateY(5%) scale(1.1);
}

/* The rim is geometrically even, but on a card whose photo has a pale
   background (Hannah, Grace) it still READ as thin, because a light photo and
   a light foil have no edge between them. A hairline shadow around the
   clipped photo silhouette gives the rim an edge on every card regardless of
   what the photograph happens to be. drop-shadow follows the clip path, so it
   traces the shield rather than a box. */
.match-week-tile__photo,
.match-pack__card-photo {
  filter:
    drop-shadow(0 0 1px rgba(28, 12, 16, 0.6))
    drop-shadow(0 1px 3px rgba(28, 12, 16, 0.32));
}