/* Echo Garden replay: the shared synthwave palette (same tokens as the main, Tour and Ideas pages). */
:root {
  --bg: #0b0221; --panel: #1a0840; --panel-edge: #3b1670; --ink: #f4e9ff; --muted: #b9a6dc;
  --line: #3b1670; --grid: rgba(255, 43, 214, 0.28); --leaf: #39ff9f; --leaf-2: #9dffcf;
  --soil: #5a2a7a; --bed: #2a0f55; --wood: #ff7a3d; --sun: #ffb238; --raw: #ff5c7a;
  --played: #22e6ff; --glow: rgba(255, 178, 56, 0.45); --btn: #12052b; --btn-ink: #f4e9ff;
  --primary: #ff2bd6; --primary-ink: #12052b; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(120% 60% at 50% 0%, #2a0a52 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--ink);
  font: 17px/1.5 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  padding: 12px 16px 32px;
  overflow-x: hidden;
}
body.dragging { outline: 4px dashed var(--sun); outline-offset: -8px; }
.back {
  display: inline-block; color: var(--wood); font-size: 16px; text-decoration: none;
  padding: 6px 0; font-weight: 600;
}
.back:hover, .back:focus-visible { text-decoration: underline; }
.top, .grid, .transport, .invite, .foot { max-width: 1180px; margin-left: auto; margin-right: auto; }
h1 { font-size: clamp(22px, 4.2vw, 34px); line-height: 1.2; margin: 6px 0 8px; color: var(--ink); }
h2 { font-size: 20px; margin: 0 0 4px; color: var(--wood); }
h3 { font-size: 17px; margin: 10px 0 4px; }
p { margin: 0 0 8px; }
.notice {
  background: var(--panel); border-left: 6px solid var(--sun); border-radius: 8px;
  padding: 10px 12px; max-width: 70ch;
}
.panel {
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 14px;
  padding: 14px; min-width: 0;
  box-shadow: 0 2px 0 var(--panel-edge);
}
.transport { margin-top: 12px; margin-bottom: 14px; }
@media (min-width: 861px) and (min-height: 760px) { .transport { position: sticky; top: 0; z-index: 5; } }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.row.wrap { flex-wrap: wrap; margin-top: 6px; }
.btn {
  font: inherit; font-size: 17px; font-weight: 600; border-radius: 10px; padding: 8px 16px;
  border: 2px solid var(--panel-edge); background: var(--btn); color: var(--btn-ink); cursor: pointer;
  min-height: 44px; white-space: nowrap;
}
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); min-width: 92px; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn[aria-pressed="true"] { background: var(--sun); color: #2b1d0e; border-color: var(--sun); }
.time { font-variant-numeric: tabular-nums; font-size: 17px; margin-left: auto; white-space: nowrap; }
#scrub { width: 100%; margin: 10px 0 2px; accent-color: var(--leaf); min-height: 28px; }
.ctl { font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.ctl select { font: inherit; font-size: 16px; padding: 4px 6px; border-radius: 8px; background: var(--btn); color: var(--btn-ink); border: 2px solid var(--panel-edge); }
.ctl.check input { width: 20px; height: 20px; accent-color: var(--leaf); }
.hint { font-size: 16px; color: var(--muted); margin: 6px 0 0; }
.explain { color: var(--muted); font-size: 16px; }
.status { font-size: 16px; font-variant-numeric: tabular-nums; margin: 6px 0 0; min-height: 1.5em; }
.verdict { font-size: 16px; margin: 4px 0 6px; }
.verdict b { font-weight: 700; }
.verdict .bad { color: var(--raw); font-weight: 700; }
.verdict .good { color: var(--leaf); font-weight: 700; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.panel.arm { grid-row: span 2; }
.panel.stats, .panel.load { grid-column: span 1; }
@media (max-width: 860px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .panel.arm { grid-row: auto; }
}

.cv { display: block; width: 100%; border-radius: 10px; background: var(--bg); touch-action: manipulation; }
.cv.side { margin-top: 10px; }
.loopcv { cursor: pointer; }
.hists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hists figure { margin: 0; min-width: 0; }
.hists figcaption { font-size: 16px; margin-bottom: 4px; }
@media (max-width: 480px) { .hists { grid-template-columns: minmax(0, 1fr); } }
code { font-size: 16px; background: var(--bg); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
input[type="file"] { font: inherit; font-size: 16px; max-width: 100%; }
.foot { color: var(--muted); font-size: 16px; margin-top: 18px; }

/* Neon headings in the shared monospace. */
h1, h2 { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
h1 { color: #ff2bd6; text-shadow: 0 0 16px #ff2bd666; }
h2 { color: #22e6ff; }
.invite { margin-top: 14px; }
.invite p { margin: 0; }