.replay-action {
  min-width: 48px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(111, 172, 255, .28);
  border-radius: 11px;
  background: rgba(15, 35, 64, .75);
  color: #dceaff;
  font: inherit;
  font-size: .65rem;
  font-weight: 1000;
  letter-spacing: .08em;
  cursor: pointer;
}
.replay-action:disabled { opacity:.42; cursor:not-allowed; }
.replay-overlay {
  position: fixed;
  inset: 0;
  z-index: 1860;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(2, 8, 17, .92);
  backdrop-filter: blur(10px);
}
.replay-overlay[hidden] { display:none; }
.replay-panel {
  width: min(94vw, 780px);
  max-height: min(90vh, 820px);
  overflow:auto;
  padding:20px;
  border:1px solid rgba(111,172,255,.28);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(8,22,43,.99),rgba(3,12,24,.99));
  box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 48px rgba(73,130,255,.08);
}
.replay-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.replay-head span { color:#80b7ff; font-size:.61rem; font-weight:1000; letter-spacing:.14em; }
.replay-head h2 { margin:5px 0; color:#f0f6ff; font-size:clamp(1.5rem,5vw,2.1rem); }
.replay-head p { margin:0; max-width:590px; color:#99afd0; font-size:.77rem; line-height:1.45; }
.replay-close {
  min-width:74px;
  min-height:40px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:#e3edff;
  font-weight:900;
  cursor:pointer;
}
.replay-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0 12px; }
.replay-mode,
.replay-threat {
  text-align:left;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  color:#eef5ff;
  cursor:pointer;
}
.replay-mode { min-height:116px; padding:13px; }
.replay-mode.is-selected,
.replay-threat.is-selected { border-color:rgba(109,175,255,.58); background:rgba(79,132,228,.13); box-shadow:inset 0 0 24px rgba(79,132,228,.05); }
.replay-mode:disabled,
.replay-threat:disabled { opacity:.42; cursor:not-allowed; }
.replay-mode span,
.replay-threat__level { display:block; color:#79aaf2; font-size:.55rem; font-weight:1000; letter-spacing:.11em; }
.replay-mode strong,
.replay-threat strong { display:block; margin:7px 0 5px; font-size:.95rem; }
.replay-mode small,
.replay-threat small { display:block; color:#8fa6c8; font-size:.67rem; line-height:1.4; }
.replay-threats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.replay-threat { min-height:175px; padding:13px; }
.replay-mutators { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.replay-mutators i {
  padding:4px 6px;
  border:1px solid rgba(118,176,255,.16);
  border-radius:999px;
  background:rgba(83,131,214,.08);
  color:#9bc2ff;
  font-size:.49rem;
  font-style:normal;
  font-weight:1000;
  letter-spacing:.07em;
}
.replay-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.replay-summary > div,
.endless-score {
  padding:11px 13px;
  border:1px solid rgba(113,174,255,.18);
  border-radius:13px;
  background:rgba(74,119,200,.07);
}
.replay-summary span,
.endless-score span { display:block; color:#7fa9e5; font-size:.54rem; font-weight:1000; letter-spacing:.1em; }
.replay-summary strong,
.endless-score strong { display:block; margin:4px 0 2px; color:#eef5ff; font-size:.9rem; }
.replay-summary small,
.endless-score small { color:#829abc; font-size:.59rem; line-height:1.35; }
.endless-score { margin:0 0 10px; }
.endless-score strong { font-size:1.2rem; }
@media (max-width:720px) {
  .replay-panel { padding:16px; }
  .replay-head { gap:10px; }
  .replay-head p { font-size:.7rem; }
  .replay-modes,
  .replay-threats,
  .replay-summary { grid-template-columns:1fr; }
  .replay-mode { min-height:98px; }
  .replay-threat { min-height:0; }
}
@media (prefers-reduced-motion:reduce) {
  .replay-overlay { backdrop-filter:none; }
}