/* ============================================================
   GROOVE ON — late-80s screenprint / synth-pop UI
   Palette: ink aubergine, hot magenta, synth teal, acid yellow,
   xerox cream. Hard shadows, no blur — flat print, slightly
   misregistered, like a gig poster run off too fast.
   ============================================================ */

:root {
  --ink:     #17101F;
  --ink-2:   #221833;
  --cream:   #F4ECDB;
  --magenta: #FF3E8A;
  --cyan:    #35E8DE;
  --acid:    #F2E64B;
  --violet:  #6C4BD8;
  --maxw:    480px;
  --shadow:  4px 4px 0 var(--magenta);
  --shadow2: 4px 4px 0 var(--cyan);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Karla', system-ui, sans-serif;
  background: var(--ink);
  color: var(--cream);
  line-height: 1.5;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

img { user-select: none; -webkit-user-drag: none; }
button, a { touch-action: manipulation; }
input, textarea, select, button { font: inherit; }

/* Desktop / tablet letterbox: app column centered on striped backdrop */
.frame {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background:
    repeating-linear-gradient(-45deg,
      var(--ink) 0 26px,
      var(--ink-2) 26px 52px);
}
.app {
  width: 100%;
  max-width: var(--maxw);
  min-height: 100dvh;
  background: var(--ink);
  padding: 18px 18px calc(48px + env(safe-area-inset-bottom));
  padding-top: calc(18px + env(safe-area-inset-top));
  position: relative;
}
@media (min-width: 500px) {
  .app {
    border-left: 3px solid var(--cream);
    border-right: 3px solid var(--cream);
  }
}

/* ---------- Type ---------- */
.display {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.7rem, 8vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  transform: skewX(-4deg);
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--magenta);
  margin: 10px 0 12px;
  overflow-wrap: anywhere;
}
.pagehead { margin-top: 22px; }
.mark-dot { color: var(--acid); text-shadow: none; }

.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cyan);
  margin: 14px 0 2px;
}
.section-head {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--acid);
  border-bottom: 2px dashed var(--violet);
  padding-bottom: 6px;
  margin: 30px 0 14px;
}
.fineprint {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  color: var(--cream);
  opacity: 0.55;
  margin-top: 10px;
  text-align: center;
}
small { display: block; opacity: 0.65; font-size: 0.78rem; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
}
.brand {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1rem;
  transform: skewX(-4deg);
  text-shadow: 2px 2px 0 var(--magenta);
}
.brand-mini {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back {
  font-family: 'Space Mono', monospace;
  color: var(--cyan);
  text-decoration: none;
  font-size: 1.05rem;
  padding: 4px 8px;
  border: 2px solid var(--cyan);
  line-height: 1;
}
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar { position: relative; }
.btn-update {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--acid);
  border: 2px solid var(--acid);
  box-shadow: 3px 3px 0 var(--magenta);
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 60;
  animation: sendin 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-update:active { transform: translate(calc(-50% + 3px), calc(-50% + 3px)); box-shadow: 0 0 0 var(--magenta); }
.tinylink {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cream);
  opacity: 0.6;
  text-decoration: none;
}
.avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--acid); object-fit: cover; }
.avatar-blank {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet);
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.8rem;
  color: var(--cream);
}
.accountlink { display: flex; text-decoration: none; }

/* ---------- Auth forms ---------- */
.authform { margin-top: 10px; }
.authlinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  font-family: 'Space Mono', monospace;
  font-size: 0.74rem;
}
.authlinks a { color: var(--cyan); text-decoration: none; }
.avatar-drop { aspect-ratio: auto; width: 120px; height: 120px; margin: 14px auto; border-radius: 50%; }
.avatar-drop img { border-radius: 50%; }
.avatar-drop #avatarHint { font-size: 0.58rem; text-align: center; padding: 0 10px; }

.btn-spotifylink {
  background: #1DB954;
  border-color: #1DB954;
  color: #0b0b0b;
  box-shadow: var(--shadow);
  margin-top: 14px;
}

/* File inputs: visually hidden but still label-activatable and change-firing
   (display:none file inputs are unreliable on iOS Safari) */
.filehide {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.art-drop { position: relative; }
.art-drop.drag-over { border-color: var(--acid); background: var(--ink-2); }

.editlink {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-decoration: none;
  border: 2px solid var(--cyan);
  padding: 6px 10px;
  display: inline-block;
  margin: 6px 0;
}

/* ---------- Hero (landing) ---------- */
.hero { margin: 34px 0 8px; text-align: left; }
.hero-mark { display: flex; flex-direction: column; }
.mark-line {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(3rem, 17vw, 4.4rem);
  line-height: 0.92;
  transform: skewX(-5deg);
  text-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--violet);
}
.mark-on { color: var(--cyan); text-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--violet); }
.hero-tag {
  margin: 20px 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
}

/* ---------- How-to steps ---------- */
.howto { margin: 26px 0 30px; }
.how-step { display: flex; gap: 14px; align-items: flex-start; }
.how-key {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  color: var(--acid);
  border: 2px solid var(--acid);
  padding: 2px 7px;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.zig {
  height: 14px;
  margin: 12px 0 12px 12px;
  width: 40px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 4px, var(--violet) 4px 6px);
}

/* ---------- Buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--cream);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--magenta); }
.btn-primary { background: var(--acid); border-color: var(--acid); box-shadow: var(--shadow); }
.btn-spotify { background: #1DB954; border-color: #1DB954; color: #0b0b0b; box-shadow: var(--shadow); margin-top: 8px; }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--violet);
  box-shadow: none;
}
.btn-block { width: 100%; margin-top: 14px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- League cards (dashboard) ---------- */
.league-list { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 10px; }
.league-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink-2);
  border: 3px solid var(--cream);
  box-shadow: var(--shadow2);
  padding: 12px;
  text-decoration: none;
  color: var(--cream);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.league-card:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--cyan); }
.league-art {
  width: 56px; height: 56px;
  object-fit: cover;
  border: 2px solid var(--acid);
  flex-shrink: 0;
}
.league-art-blank {
  display: flex; align-items: center; justify-content: center;
  background: var(--violet);
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.5rem;
}
.league-meta { min-width: 0; }
.league-name { display: block; font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-sub { font-family: 'Space Mono', monospace; font-size: 0.68rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.1em; }
.chev { margin-left: auto; color: var(--magenta); font-weight: 700; font-size: 1.2rem; }

.emptybox {
  border: 2px dashed var(--violet);
  padding: 20px;
  margin: 12px 0;
}

/* ---------- League page ---------- */
.league-hero {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid var(--cream);
  box-shadow: var(--shadow);
  margin-top: 16px;
}
.league-desc { opacity: 0.85; margin-bottom: 12px; }

.copyline {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ink-2);
  border: 2px solid var(--cyan);
  color: var(--cream);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  margin: 6px 0 4px;
}
.copyline-url {
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  color: var(--cyan);
  word-break: break-all;
}
.copyline-hint {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.5;
}
.copyline.copied { border-color: var(--acid); }
.copyline.copied .copyline-hint { color: var(--acid); opacity: 1; }

.nowbox {
  border: 3px solid var(--magenta);
  box-shadow: var(--shadow2);
  padding: 16px;
  margin: 22px 0 6px;
  background: var(--ink-2);
}
.round-title { font-family: 'Archivo Black', sans-serif; font-size: 1.25rem; transform: skewX(-3deg); margin: 4px 0 6px; }
.round-desc { opacity: 0.85; font-size: 0.95rem; margin-bottom: 6px; }
.phase-line { font-family: 'Space Mono', monospace; font-size: 0.75rem; margin: 8px 0 4px; }
.phase-line strong { color: var(--acid); }
.phase-tally { color: var(--cyan); animation: pulse 1.6s ease infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ---------- Standings ---------- */
.standings { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.stand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 2px solid var(--violet);
  background: var(--ink-2);
}
.stand-top { border-color: var(--acid); box-shadow: 3px 3px 0 var(--acid); }
.stand-rank {
  font-family: 'Archivo Black', sans-serif;
  color: var(--magenta);
  width: 22px;
  text-align: center;
}
.stand-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-pts { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 0.85rem; color: var(--cyan); white-space: nowrap; }
.stand-pts small { display: inline; font-size: 0.6rem; opacity: 0.6; }

/* ---------- Rounds timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 14px; padding: 10px 0; }
.tl-dot {
  width: 14px; height: 14px;
  border: 3px solid var(--violet);
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.tl-submitting .tl-dot, .tl-voting .tl-dot { border-color: var(--magenta); background: var(--magenta); }
.tl-tallying .tl-dot { border-color: var(--cyan); background: var(--cyan); animation: pulse 1.6s ease infinite; }
.tl-closed .tl-dot { border-color: var(--acid); background: var(--acid); }
.tl-body { min-width: 0; flex: 1; }
.tl-title { font-weight: 700; display: block; }
.tl-when { font-family: 'Space Mono', monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.6; }

.results { margin-top: 8px; }
.results summary {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyan);
  cursor: pointer;
  user-select: none;
}
.result-list { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.result-rank {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.72rem;
  color: var(--cream);
  background: var(--violet);
  padding: 4px 6px;
  min-width: 32px;
  text-align: center;
  flex-shrink: 0;
  transform: skewX(-4deg);
}
.result-rank-win {
  background: var(--acid);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--magenta);
}
.result-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 2px solid var(--violet); }
.result-win { border-color: var(--acid); background: var(--ink-2); }
.result-art { width: 40px; height: 40px; object-fit: cover; border: 2px solid var(--cream); flex-shrink: 0; }
.result-track { min-width: 0; flex: 1; }
.result-track a { color: var(--cream); text-decoration: none; font-weight: 700; }
.result-claps { font-family: 'Space Mono', monospace; white-space: nowrap; color: var(--magenta); }

/* ---------- Submit screen ---------- */
.searchbox { margin-top: 18px; }
.searchbox input {
  width: 100%;
  background: var(--ink-2);
  border: 3px solid var(--cyan);
  color: var(--cream);
  padding: 13px 14px;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  font-family: 'Karla', sans-serif;
}
.searchbox input::placeholder { color: var(--cream); opacity: 0.4; }
.searchbox input:focus { outline: none; border-color: var(--acid); }

.search-results { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-2);
  border: 2px solid var(--violet);
  padding: 10px;
  width: 100%;
  color: var(--cream);
  cursor: pointer;
  text-align: left;
  transition: transform 0.08s ease;
}
.track-row:active { transform: scale(0.985); }
.track-row-picked { border-color: var(--acid); box-shadow: 3px 3px 0 var(--acid); cursor: default; }
.track-art { width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--cream); flex-shrink: 0; }

/* ---------- Preview play buttons (tap the art) ---------- */
.art-play {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.art-play .track-art { display: block; }
.art-play-icon {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  background: rgba(23, 16, 31, 0.42);
  font-size: 1rem;
  pointer-events: none;
}
.art-play.art-loading .art-play-icon { animation: pulse 0.8s ease infinite; }
.art-play.art-playing .track-art { border-color: var(--magenta); }
.art-play.art-playing .art-play-icon {
  background: rgba(255, 62, 138, 0.32);
  font-size: 0.8rem;
  letter-spacing: 2px;
}

/* Split rows in search results: art plays, the rest picks */
.track-row-split { padding: 0; overflow: hidden; }
.track-row-split .art-play { margin: 10px 0 10px 10px; }
.track-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--cream);
  padding: 10px;
  cursor: pointer;
  text-align: left;
}
.track-pick:active { transform: scale(0.985); }
.pick-hint {
  margin-left: auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  white-space: nowrap;
}
.track-meta { min-width: 0; flex: 1; }
.track-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked { margin-top: 16px; }
.listen {
  font-family: 'Space Mono', monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-decoration: none;
}

/* ============================================================
   THE APPLAUSE METER — signature element
   Fixed to the top of the play screen. Drains as claps are
   spent. When empty: wobbles, then becomes the send button.
   ============================================================ */
.meter-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  padding: 10px 0 12px;
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
  border-bottom: 3px solid var(--cream);
}
.meter-shell {
  position: relative;
  height: 46px;
  border: 3px solid var(--cream);
  background:
    repeating-linear-gradient(-45deg, var(--ink-2) 0 8px, var(--ink) 8px 16px);
  overflow: hidden;
}
.meter-bar {
  height: 100%;
  width: 100%;
  background:
    repeating-linear-gradient(90deg,
      var(--magenta) 0 14px,
      var(--acid)    14px 16px);
  transition: width 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.meter-count {
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.3rem;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
}
.meter-label {
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream);
  text-shadow: 1px 1px 0 var(--ink);
  pointer-events: none;
}
.meter-shell.spent { animation: wobble 0.55s ease; }
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-2.4deg); }
  40% { transform: rotate(2deg); }
  60% { transform: rotate(-1.4deg); }
  80% { transform: rotate(0.8deg); }
}
.btn-send {
  width: 100%;
  margin-top: 0;
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--acid);
  animation: sendin 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sendin {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.vote-intro { margin-top: 16px; font-size: 0.95rem; }
.vote-intro p { margin-bottom: 6px; }

.entries { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-2);
  border: 2px solid var(--violet);
  padding: 12px;
  transition: border-color 0.15s ease;
}
.entry.maxed { border-color: var(--acid); }
.clapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.clap-btn {
  font-size: 1.4rem;
  background: var(--cream);
  border: 3px solid var(--cream);
  width: 52px; height: 46px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--magenta);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  user-select: none;
}
.clap-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--magenta); }
.clap-btn.pop { animation: clappop 0.18s ease; }
@keyframes clappop { 50% { transform: scale(1.18); } }
.clap-btn[disabled] { opacity: 0.35; pointer-events: none; }
.clap-minus {
  background: transparent;
  border: 2px solid var(--violet);
  color: var(--cream);
  width: 52px; height: 24px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}
.clap-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--cyan);
}
.entry.maxed .clap-count { color: var(--acid); font-weight: 700; }

.votedbox { margin-top: 40px; text-align: left; }
.votedbox p { margin: 10px 0 18px; }

/* ---------- Invite ---------- */
.invite-card { margin-top: 24px; }
.invite-art {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid var(--cream);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
}
.invite-desc { margin: 8px 0; opacity: 0.85; }

/* ---------- Wizard ---------- */
.wiz-progress { display: flex; gap: 8px; margin: 18px 0 4px; }
.wiz-pip { width: 26px; height: 8px; background: var(--ink-2); border: 2px solid var(--violet); }
.wiz-pip-on { background: var(--acid); border-color: var(--acid); }

.field { display: block; margin: 14px 0; }
.field span {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyan);
  margin-bottom: 6px;
}
.field em { text-transform: none; opacity: 0.6; }
.field input, .field textarea {
  width: 100%;
  background: var(--ink-2);
  border: 2px solid var(--violet);
  color: var(--cream);
  padding: 12px;
  font-size: 16px;
  font-family: 'Karla', sans-serif;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--acid); }
.field input[type="datetime-local"] { color-scheme: dark; }

.art-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  border: 3px dashed var(--violet);
  cursor: pointer;
  margin: 14px 0;
  overflow: hidden;
}
.art-drop img { width: 100%; height: 100%; object-fit: cover; }
#artHint {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.6;
}

.round-editor {
  border: 2px solid var(--violet);
  padding: 12px;
  margin: 12px 0;
  background: var(--ink-2);
}
.round-editor-head { display: flex; align-items: center; justify-content: space-between; }
.round-editor-locked { opacity: 0.6; border-style: dashed; }
.round-locked-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acid);
  border: 2px solid var(--acid);
  padding: 2px 7px;
}
.round-n {
  font-family: 'Archivo Black', sans-serif;
  color: var(--magenta);
}
.round-remove {
  background: transparent;
  border: 2px solid var(--magenta);
  color: var(--magenta);
  width: 30px; height: 30px;
  cursor: pointer;
  font-weight: 700;
}
.reviewbox { border: 2px solid var(--cyan); padding: 14px; margin: 12px 0; }
.reviewbox h3 { font-family: 'Archivo Black', sans-serif; transform: skewX(-3deg); margin-bottom: 6px; }
.review-round {
  font-size: 0.9rem;
  padding: 8px 0;
  border-bottom: 1px dashed var(--violet);
}
.review-round:last-child { border-bottom: 0; }
.review-round small { font-family: 'Space Mono', monospace; font-size: 0.64rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(var(--maxw) - 40px);
  width: max-content;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 12px 18px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  z-index: 100;
  animation: toastin 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast-err { background: var(--magenta); color: var(--cream); }
@keyframes toastin {
  from { transform: translateX(-50%) translateY(16px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ---------- Error page ---------- */
.errorbox { margin-top: 40px; }
.errorbox p { margin: 10px 0 20px; }

/* ---------- Focus + reduced motion ---------- */
:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}