.replay-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 12px;
  margin-top: 18px;
}

.minimap-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid currentColor;
  color: var(--muted);
  font: 720 8px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.minimap-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; box-shadow: 0 0 10px currentColor; }
.minimap-status.online { color: var(--green); }
.minimap-status.busy { color: var(--gold); }
.minimap-status.offline { color: var(--red); }

.replay-upload-panel { padding: 20px; }
.replay-drop-zone {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 34px;
  border: 1px dashed var(--line-strong);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
    linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--surface) 82%, transparent));
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.replay-drop-zone::before {
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 0 54px transparent, inset 0 0 0 55px var(--line);
}
.replay-drop-zone::after {
  position: absolute;
  width: 1px;
  height: 260px;
  background: var(--line);
  content: "";
  box-shadow: -130px 130px 0 -130px var(--line), 130px -130px 0 -130px var(--line);
  transform: rotate(42deg);
}
.replay-drop-zone:hover, .replay-drop-zone.dragging { border-color: var(--accent); background-color: var(--accent-soft); }
.replay-drop-zone.disabled { cursor: not-allowed; opacity: .6; }
.replay-drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.replay-drop-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; }
.replay-drop-icon { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font: 42px/1 var(--display); }
.replay-drop-content strong { color: var(--text); font: 700 24px var(--display); letter-spacing: -.02em; }
.replay-drop-content span { color: var(--muted); font-size: 11px; }
.replay-selected-file { min-height: 22px; color: var(--accent) !important; overflow-wrap: anywhere; font: 700 9px var(--mono); }
.replay-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.replay-actions button:disabled { cursor: not-allowed; opacity: .5; }

.replay-process-panel { min-height: 100%; padding: 24px; border-top: 2px solid var(--gold); }
.replay-process-panel h2 { margin: 8px 0 10px; font: 720 26px var(--display); }
.replay-process-panel > p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.replay-progress { margin: 26px 0 12px; }
.replay-progress-track { height: 7px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-raised); }
.replay-progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 42%, transparent); transition: width .35s ease; }
.replay-progress-label { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font: 700 9px var(--mono); }
.replay-meta-list { display: grid; gap: 1px; margin-top: 22px; border: 1px solid var(--line); background: var(--line); }
.replay-meta-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 13px; background: var(--surface); font-size: 10px; }
.replay-meta-list span { color: var(--muted); }
.replay-meta-list strong { color: var(--text); text-align: right; }

.replay-video-panel { margin-top: 22px; overflow: hidden; }
.replay-video-panel[hidden] { display: none; }
.replay-video-panel video { display: block; width: 100%; background: #020609; }
.replay-video-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-top: 1px solid var(--line); }
.replay-video-actions p { margin: 0; color: var(--muted); font-size: 10px; }
.replay-offline-note { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); color: var(--muted); font-size: 10px; line-height: 1.7; }
.replay-offline-note[hidden] { display: none; }

@media (max-width: 980px) {
  .replay-page-grid { grid-template-columns: 1fr; }
  .replay-drop-zone { min-height: 250px; }
}

@media (max-width: 680px) {
  .replay-upload-panel, .replay-process-panel { padding: 14px; }
  .replay-drop-zone { min-height: 220px; padding: 20px 14px; }
  .replay-drop-zone::before { width: 180px; height: 180px; }
  .replay-drop-content strong { font-size: 19px; }
  .replay-video-actions { align-items: stretch; flex-direction: column; }
}