/* Server Votes — Discord-dark public surface. Standalone stylesheet:
   this page never loads admin.css, so no global-input trap here. Mobile-first. */

:root {
  --sv-bg: #313338;
  --sv-bg-2: #2b2d31;
  --sv-bg-3: #1e1f22;
  --sv-card: #383a40;
  --sv-card-hover: #404249;
  --sv-border: #26272b;
  --sv-text: #dbdee1;
  --sv-muted: #949ba4;
  --sv-blurple: #5865f2;
  --sv-blurple-soft: rgba(88, 101, 242, 0.18);
  --sv-green: #23a55a;
  --sv-red: #da373c;
  --sv-gold: #f0b232;
  --sv-radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: "gg sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100%;
}

a { color: var(--sv-blurple); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ---------- ribbon / header ---------- */

.sv-ribbon {
  background: var(--sv-gold);
  color: #1e1f22;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  padding: 5px 10px;
  letter-spacing: 0.02em;
}

.sv-header { background: var(--sv-bg-3); border-bottom: 1px solid var(--sv-border); }

.sv-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  max-width: 860px;
  margin: 0 auto;
}

.sv-brand { display: flex; align-items: center; gap: 10px; }
.sv-trophy { font-size: 30px; }
.sv-brand h1 { margin: 0; font-size: 19px; letter-spacing: 0.01em; }
.sv-server { color: var(--sv-muted); font-size: 12.5px; }

.sv-phase-chip {
  background: var(--sv-blurple-soft);
  color: #aab4ff;
  border: 1px solid rgba(88, 101, 242, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sv-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
  max-width: 860px;
  margin: 0 auto;
  overflow-x: auto;
}

.sv-tab {
  background: var(--sv-bg-2);
  color: var(--sv-muted);
  border: 1px solid var(--sv-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.sv-tab.active { background: var(--sv-blurple); border-color: var(--sv-blurple); color: #fff; }
.sv-tab:not(.active):hover { background: var(--sv-card-hover); color: var(--sv-text); }

/* ---------- layout ---------- */

.sv-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 12px 56px;
  min-height: 60vh;
}

.sv-loading { text-align: center; color: var(--sv-muted); padding: 60px 0; }

.sv-footer {
  text-align: center;
  color: var(--sv-muted);
  font-size: 12px;
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--sv-border);
  background: var(--sv-bg-3);
}

/* ---------- phase banner ---------- */

.sv-banner {
  background: var(--sv-bg-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sv-banner .sv-banner-title { font-weight: 700; font-size: 14px; }
.sv-banner .sv-banner-sub { color: var(--sv-muted); font-size: 12.5px; }
.sv-countdown { color: var(--sv-gold); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }

.sv-banner-actions { display: flex; gap: 8px; }

.sv-btn {
  background: var(--sv-blurple);
  color: #fff;
  border: none;
  border-radius: var(--sv-radius);
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  transition: filter 0.15s;
}
.sv-btn:hover { filter: brightness(1.1); }
.sv-btn.ghost { background: var(--sv-bg-2); border: 1px solid var(--sv-border); color: var(--sv-text); }
.sv-btn.big { width: 100%; padding: 13px; font-size: 15px; }
.sv-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- gallery grid ---------- */

.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.sv-grid.emoji-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }

.sv-card {
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 12px 10px;
  text-align: center;
  position: relative;
  transition: background 0.15s, transform 0.15s;
}
.sv-card:hover { background: var(--sv-card-hover); }

.sv-card .sv-title {
  font-weight: 600;
  font-size: 13.5px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-card .sv-credit { color: var(--sv-muted); font-size: 11.5px; margin-top: 2px; }

.sv-seed {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--sv-bg-3);
  color: var(--sv-muted);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
}

.sv-card.is-winner { border-color: var(--sv-gold); box-shadow: 0 0 0 1px var(--sv-gold) inset; }
.sv-card.is-winner .sv-seed { color: var(--sv-gold); }
.sv-card.is-out { opacity: 0.45; }
.sv-card .sv-flag { position: absolute; top: 6px; right: 6px; font-size: 13px; }

/* emoji + sticker rendering: real Discord scale on a chat-mock swatch */
.sv-emoji-swatch {
  background: var(--sv-bg-3);
  border-radius: 6px;
  padding: 10px 6px;
  font-size: 44px;
  line-height: 1;
}
.sv-emoji-swatch img { width: 44px; height: 44px; object-fit: contain; }
.sv-sticker-swatch {
  background: var(--sv-bg-3);
  border-radius: 6px;
  padding: 10px 6px;
  font-size: 84px;
  line-height: 1;
}
.sv-sticker-swatch img { width: 96px; height: 96px; object-fit: contain; }

/* ---------- soundboard tap-tile play button ---------- */

.sv-play {
  --p: 0; /* progress 0..1, driven by audio.js */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background:
    radial-gradient(closest-side, var(--sv-card) 82%, transparent 83% 100%),
    conic-gradient(var(--sv-blurple) calc(var(--p) * 360deg), var(--sv-bg-3) 0);
  transition: filter 0.15s;
}
.sv-card:hover .sv-play { background:
    radial-gradient(closest-side, var(--sv-card-hover) 82%, transparent 83% 100%),
    conic-gradient(var(--sv-blurple) calc(var(--p) * 360deg), var(--sv-bg-3) 0); }
.sv-play.playing { filter: drop-shadow(0 0 6px rgba(88, 101, 242, 0.55)); }
.sv-play .ico { pointer-events: none; }

/* ---------- matchup feed (bracket + ballot) ---------- */

.sv-round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 2px 10px;
  flex-wrap: wrap;
}
.sv-round-head h2 { margin: 0; font-size: 15px; }
.sv-round-head .side { color: var(--sv-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.sv-round-head .side.losers { color: var(--sv-red); }

.sv-matchup {
  background: var(--sv-bg-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 12px;
  margin-bottom: 10px;
}

.sv-matchup .vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.sv-matchup .vs-badge {
  align-self: center;
  color: var(--sv-gold);
  font-weight: 800;
  font-size: 13px;
}

.sv-contender {
  background: var(--sv-card);
  border: 2px solid transparent;
  border-radius: var(--sv-radius);
  padding: 10px 8px;
  text-align: center;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.sv-contender.pickable { cursor: pointer; }
.sv-contender.pickable:hover { background: var(--sv-card-hover); }
.sv-contender.picked { border-color: var(--sv-blurple); background: var(--sv-blurple-soft); }
.sv-contender.won { border-color: var(--sv-green); }
.sv-contender.lost { opacity: 0.45; }
.sv-contender .sv-title { font-size: 12.5px; }
.sv-contender .pick-mark {
  position: absolute; top: 5px; right: 6px;
  color: var(--sv-blurple);
  font-size: 14px; font-weight: 800;
  display: none;
}
.sv-contender.picked .pick-mark { display: block; }

.sv-matchup .meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--sv-muted);
  font-size: 11.5px;
}

.sv-bye { color: var(--sv-muted); font-size: 12.5px; font-style: italic; align-self: center; text-align: center; }

/* ---------- tally bars (reveal) ---------- */

.sv-tally { margin-top: 10px; }
.sv-tally .bar-row {
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.sv-tally .bar-track {
  background: var(--sv-bg-3);
  border-radius: 6px;
  height: 20px;
  overflow: hidden;
  position: relative;
}
.sv-tally .bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--sv-muted);
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sv-tally .bar-fill.winner { background: linear-gradient(90deg, var(--sv-green), #2fc06a); }
.sv-tally .bar-label {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 8px;
  font-size: 11.5px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.sv-tally .bar-pct { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sv-tiebreak { color: var(--sv-gold); font-size: 11.5px; margin-top: 4px; }

/* winner flip + shine */
@keyframes sv-flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes sv-shine {
  0% { background-position: -120px 0; }
  100% { background-position: 240px 0; }
}
.sv-contender.reveal-won {
  animation: sv-flip 0.45s ease-out;
  border-color: var(--sv-green);
  background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  background-size: 240px 100%;
  background-repeat: no-repeat;
  animation: sv-flip 0.45s ease-out, sv-shine 1.1s ease-out 0.45s;
}

/* ---------- full bracket tree ---------- */

.sv-tree-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  background: var(--sv-bg-2);
  padding: 14px;
}
.sv-tree { display: flex; gap: 22px; min-width: max-content; }
.sv-tree-col { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 168px; }
.sv-tree-col h3 {
  margin: 0 0 2px;
  font-size: 11.5px;
  color: var(--sv-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.sv-node {
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  font-size: 12px;
  overflow: hidden;
}
.sv-node .slot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
}
.sv-node .slot + .slot { border-top: 1px solid var(--sv-border); }
.sv-node .slot.w { background: rgba(35, 165, 90, 0.16); }
.sv-node .slot.l { opacity: 0.5; }
.sv-node .seed { color: var(--sv-muted); font-weight: 700; }
.sv-node .votes { color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.sv-tree-rail-label {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sv-tree-rail-label.losers { color: var(--sv-red); }

/* ---------- ballot ---------- */

.sv-ballot-note {
  background: var(--sv-blurple-soft);
  border: 1px solid rgba(88, 101, 242, 0.45);
  border-radius: var(--sv-radius);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.sv-upvote-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--sv-border);
  background: var(--sv-bg-3);
  color: var(--sv-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sv-card.upvoted { border-color: var(--sv-blurple); }
.sv-card.upvoted .sv-upvote-toggle { background: var(--sv-blurple); border-color: var(--sv-blurple); color: #fff; }

.sv-sticky-submit {
  position: sticky;
  bottom: 10px;
  margin-top: 16px;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  border-radius: var(--sv-radius);
}

.sv-done {
  text-align: center;
  padding: 56px 16px;
}
.sv-done .big-ico { font-size: 54px; }
.sv-done h2 { margin: 10px 0 6px; }
.sv-done p { color: var(--sv-muted); margin: 0 auto; max-width: 420px; }

/* ---------- submission form ---------- */

.sv-form { max-width: 460px; margin: 0 auto; }
.sv-form label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 5px; }
.sv-form input[type="text"] {
  width: 100%;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  color: var(--sv-text);
  padding: 11px 12px;
  font-size: 14px;
}
.sv-form input[type="text"]:focus { outline: none; border-color: var(--sv-blurple); }
.sv-drop {
  border: 2px dashed var(--sv-border);
  border-radius: var(--sv-radius);
  background: var(--sv-bg-2);
  padding: 26px 14px;
  text-align: center;
  color: var(--sv-muted);
  cursor: pointer;
  transition: border-color 0.15s;
}
.sv-drop:hover, .sv-drop.drag { border-color: var(--sv-blurple); color: var(--sv-text); }
.sv-drop .picked-name { color: var(--sv-green); font-weight: 600; }
.sv-limits { color: var(--sv-muted); font-size: 12px; margin-top: 6px; }

/* ---------- modal ---------- */

.sv-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.sv-modal {
  background: var(--sv-bg);
  border: 1px solid var(--sv-border);
  border-radius: 10px;
  max-width: 380px;
  width: 100%;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.sv-modal h3 { margin: 0 0 8px; font-size: 16px; }
.sv-modal p { color: var(--sv-muted); font-size: 13.5px; margin: 0 0 16px; }
.sv-modal .row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- confetti ---------- */

#sv-confetti-root { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.sv-confetto {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: sv-fall linear forwards;
}
@keyframes sv-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.7; }
}

/* ---------- toast ---------- */

.sv-toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  color: var(--sv-text);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  z-index: 70;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ---------- slot table + tree advancement ---------- */

.sv-slot-panel {
  background: var(--sv-bg-2);
  border: 1px solid var(--sv-gold);
  border-radius: var(--sv-radius);
  padding: 14px;
  margin-top: 18px;
}
.sv-slot-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; color: var(--sv-gold); }
.sv-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--sv-border);
  background: var(--sv-bg-3);
}
.sv-chip.clinched { border-color: rgba(35, 165, 90, 0.6); color: #7fd8a5; }
.sv-chip.fighting { border-color: rgba(240, 178, 50, 0.7); color: var(--sv-gold); }
.sv-node .adv { color: var(--sv-green); font-weight: 800; }
.sv-node.trim-note {
  padding: 8px;
  color: var(--sv-muted);
  font-size: 11.5px;
  border-style: dashed;
}

/* ---------- staff console ---------- */

.sv-queue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sv-bg-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sv-queue-row .info { flex: 1; min-width: 0; }
.sv-queue-row .info .sv-title { margin-top: 0; white-space: normal; }
.sv-queue-row .acts { display: flex; gap: 6px; flex-shrink: 0; }

.sv-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.sv-admin-grid label { display: block; font-weight: 600; font-size: 12px; color: var(--sv-muted); }
.sv-admin-grid input, .sv-admin-grid select {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  color: var(--sv-text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.sv-admin-grid input:focus, .sv-admin-grid select:focus { outline: none; border-color: var(--sv-blurple); }

.sv-links-out {
  background: var(--sv-bg-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 12px;
  margin-top: 10px;
}
.sv-links-out .lnk {
  font-family: Consolas, Menlo, monospace;
  font-size: 11.5px;
  color: var(--sv-text);
  padding: 3px 0;
  border-bottom: 1px dashed var(--sv-border);
  word-break: break-all;
}
.sv-links-out .lnk:last-of-type { border-bottom: none; }

.sv-modal input[type="text"] {
  width: 100%;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  color: var(--sv-text);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 14px;
}
.sv-modal input[type="text"]:focus { outline: none; border-color: var(--sv-blurple); }

.sv-form input[type="password"] {
  width: 100%;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  color: var(--sv-text);
  padding: 11px 12px;
  font-size: 14px;
}
.sv-form input[type="password"]:focus { outline: none; border-color: var(--sv-blurple); }

.sv-reg-err {
  background: rgba(218, 55, 60, 0.14);
  border: 1px solid rgba(218, 55, 60, 0.5);
  border-radius: var(--sv-radius);
  color: #f0a5a8;
  font-size: 13px;
  padding: 9px 12px;
  margin-top: 12px;
}

.sv-queue-context {
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--sv-blurple);
  background: var(--sv-bg-3);
  border-radius: 0 6px 6px 0;
  color: var(--sv-text);
  font-size: 12.5px;
  white-space: pre-wrap;
}

textarea.sv-context-note {
  width: 100%;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  color: var(--sv-text);
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
textarea.sv-context-note:focus { outline: none; border-color: var(--sv-blurple); }
.sv-modal textarea.sv-context-note { min-height: 140px; }

/* ---------- multi-segment clip editor ---------- */

.sv-seg-track {
  position: relative;
  height: 44px;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  touch-action: none; /* the editor owns pointer gestures */
  overflow: hidden;
}
.sv-seg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: var(--sv-blurple-soft);
  border: 1px solid var(--sv-blurple);
  border-radius: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-seg.selected { background: rgba(88, 101, 242, 0.38); }
.sv-seg-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #cdd3ff;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.sv-seg-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
}
.sv-seg-handle.left  { left: -4px; border-left: 4px solid var(--sv-blurple); }
.sv-seg-handle.right { right: -4px; border-right: 4px solid var(--sv-blurple); }
.sv-seg-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sv-seg-total { font-weight: 700; font-size: 13px; color: var(--sv-green); font-variant-numeric: tabular-nums; }
.sv-seg-total.over { color: var(--sv-red); }

/* entries toolbar + danger button */
.sv-chip.count { cursor: pointer; }
.sv-chip.count.active { border-color: var(--sv-blurple); color: #aab4ff; }
.sv-btn.danger { background: var(--sv-bg-2); border: 1px solid rgba(218, 55, 60, 0.6); color: #f0a5a8; }
.sv-btn.danger:hover { background: rgba(218, 55, 60, 0.15); filter: none; }

/* presentation sliders */
.sv-slider-row { margin-bottom: 12px; }
.sv-slider-row label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sv-muted); margin-bottom: 4px; }
.sv-slider-row label .val { color: var(--sv-gold); font-variant-numeric: tabular-nums; }
.sv-slider-row input[type="range"] { width: 100%; accent-color: var(--sv-blurple); margin: 0; }
#sv-preview-area { margin-top: 14px; }

@media (min-width: 640px) {
  .sv-brand h1 { font-size: 22px; }
  .sv-main { padding: 20px 16px 64px; }
}

/* ── Track badges ─────────────────────────────────────────────────────────
   Three kinds of thing share the review queue and the Entries list, and they
   are judged completely differently — you play a sound, you look at an emoji.
   Which one you are looking at should be answerable without reading. */
.sv-track-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--sv-bg-2);
  color: var(--sv-muted);
  border: 1px solid var(--sv-border);
}
.sv-track-badge.sound   { background: rgba(88, 101, 242, 0.18); color: #aab4ff; border-color: transparent; }
.sv-track-badge.emoji   { background: rgba(240, 178, 50, 0.18); color: #f5cd7a; border-color: transparent; }
.sv-track-badge.sticker { background: rgba(35, 165, 90, 0.18);  color: #6ee7a0; border-color: transparent; }

/* Shown at the size Discord will actually render them, so a reviewer judges
   what people will really see rather than a flattering enlargement. */
.sv-img-swatch {
  display: block;
  object-fit: contain;
  background: repeating-conic-gradient(var(--sv-bg-3) 0% 25%, var(--sv-bg-2) 0% 50%) 50% / 12px 12px;
  border-radius: 6px;
}
.sv-img-swatch.emoji   { width: 48px;  height: 48px; }
.sv-img-swatch.sticker { width: 80px;  height: 80px; }

/* ── Context "ⓘ" on a gallery card ───────────────────────────────────────
   Present only when the submitter actually wrote something. A button, not a
   hover tooltip, because most people will vote on a phone and there is no
   hover there. Sits opposite the seed so the two never collide. */
.sv-card { position: relative; }
.sv-info {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 31, 34, 0.72);
  color: var(--sv-text);
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.sv-info:hover, .sv-info:focus-visible { opacity: 1; background: var(--sv-blurple); outline: none; }

/* Paragraphs survive — someone explaining a meme's history writes in them. */
.sv-info-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sv-text);
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Admin row layout: stop the text column collapsing ────────────────────
   The row is flex: media, info, actions. `.media` and `.acts` were both
   unshrinkable, so once a fourth button appeared they took the whole width
   between them and the info column — the title and the context note — was
   squeezed to one word per line while the row sat mostly empty.

   Fixed by making the two edges behave: the media column is capped and may
   shrink, the actions wrap onto a second line instead of growing sideways,
   and the info column is given a real floor so it can never be crushed. */
.sv-queue-row { flex-wrap: wrap; align-items: flex-start; }
/* `width: 100%` inside a shrink-to-fit flex item is circular: the parent sizes
   to its content, the content asks for 100% of the parent, and the browser
   resolves that to nothing. The audio player vanished entirely — present in the
   DOM, zero pixels wide. An explicit width breaks the loop and lets the column
   size to something real. */
.sv-queue-row .media {
  flex: 0 0 auto;
  max-width: 280px;
}
.sv-queue-row .media audio { width: 260px; height: 32px; display: block; }
.sv-queue-row .info { flex: 1 1 320px; min-width: 260px; }
.sv-queue-row .acts {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  row-gap: 6px;
}

/* The context note is the thing worth reading — give it room and let it wrap
   like prose rather than rationing it a word per line. */
.sv-queue-context {
  max-width: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* Narrow screens: stack outright rather than pretending three columns fit. */
@media (max-width: 720px) {
  .sv-queue-row { flex-direction: column; }
  .sv-queue-row .media, .sv-queue-row .info, .sv-queue-row .acts { width: 100%; max-width: none; }
  .sv-queue-row .media audio { width: 100%; }
  .sv-queue-row .acts { justify-content: flex-start; }
}

/* ---------- landing page (all tracks at a glance) + fill indicator ---------- */

.sv-land-panel {
  background: var(--sv-bg-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* Official is its own thing, visually — enshrined, not competing. */
.sv-land-panel.sv-official {
  background: linear-gradient(180deg, rgba(240, 178, 50, 0.08), var(--sv-bg-2) 55%);
  border-color: rgba(240, 178, 50, 0.35);
}

.sv-land-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scrollbar-width: thin;
}

.sv-mini {
  flex: 0 0 132px;
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 10px;
  text-align: center;
  position: relative;
}
.sv-mini .sv-title { font-size: 13px; margin-top: 6px; word-break: break-word; }
.sv-mini .sv-credit { font-size: 11px; }
.sv-mini .sv-emoji-swatch, .sv-mini .sv-sticker-swatch { margin: 0 auto; }
.sv-mini .sv-sticker-swatch img { width: 72px; height: 72px; }
.sv-mini .sv-play { margin: 0 auto; }

.sv-mini.is-official { border-color: rgba(240, 178, 50, 0.45); }
.sv-rank {
  position: absolute;
  top: -8px;
  left: -6px;
  font-size: 16px;
  background: var(--sv-bg-3);
  border: 1px solid rgba(240, 178, 50, 0.45);
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1;
}

.sv-land-none { color: var(--sv-muted); font-size: 13px; padding: 8px 2px; }
.sv-land-closes { margin: 2px 0 6px; font-size: 13px; }
.sv-land-more { margin-top: 4px; }

/* The fill indicator. Deliberately NOT a progress bar that celebrates 100% —
   the sentence under the bar carries the honest state, and "full but
   uncontested" stays amber because zero short is not the finish line. */
.sv-fill { margin: 4px 0 10px; }
.sv-fill-bar {
  height: 8px;
  background: var(--sv-bg-3);
  border: 1px solid var(--sv-border);
  border-radius: 999px;
  overflow: hidden;
}
.sv-fill-in {
  height: 100%;
  background: var(--sv-blurple);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.sv-fill.full .sv-fill-in { background: var(--sv-gold); }
.sv-fill.contested .sv-fill-in { background: var(--sv-green); }
.sv-fill-line { margin-top: 5px; font-size: 13px; color: var(--sv-muted); }
.sv-fill.contested .sv-fill-line { color: var(--sv-green); }
.sv-fill.full .sv-fill-line { color: var(--sv-gold); }

/* Admin fill sentences reuse .sv-fill-line outside a .sv-fill wrapper. */
.sv-fill-line.urgent { color: #f38688; }
.sv-fill-line.contested { color: var(--sv-green); }
.sv-fill-line.full { color: var(--sv-gold); }
.sv-fill-line.filling { color: var(--sv-text); }
/* The server icon renders larger than an emoji or sticker in review, because it
   is judged as a whole image rather than as something glanceable in a message —
   and Discord shows it as a circle almost everywhere, so preview it that way. */
.sv-img-swatch.icon { width: 96px; height: 96px; border-radius: 50%; }
.sv-track-badge.icon { background: rgba(240, 178, 50, 0.22); color: #f7d98a; border-color: transparent; }

/* Landing minis: the server icon previews as a circle, like Discord shows it. */
.sv-sticker-swatch.icon-round img { border-radius: 50%; }

/* ── Staff access in the header ───────────────────────────────────────────
   Was a footer link. It is the door the people who run this walk through
   several times an hour, so it belongs where it can be reached without
   scrolling past every entry in the gallery first. */
.sv-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sv-staff-btn {
  white-space: nowrap;
  font-size: 13px;
  padding: 7px 12px;
}
@media (max-width: 560px) {
  /* On a phone the label costs more than it earns — the lock still reads as
     "the way in" and the tap target stays full size. */
  .sv-staff-btn { font-size: 0; padding: 7px 10px; }
  .sv-staff-btn::first-letter { font-size: 16px; }
}