:root {
  --background: #101114;
  --bar: #101114;
  --band: #191B20;
  --raised: #191B20;
  --foreground: #F5F5F5;
  --heading: #F5F5F5;
  --muted: #A3A7B0;
  --line: #2B2E35;
  --link: #F5F5F5;
  --blue: #3C5E82;
  --blue-hover: #4C729A;
  --red: #e24b4b;
  --online: #F5F5F5;
  --offline: #e24b4b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Familjen Grotesk", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  overflow-x: clip;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--background);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 64px;
  padding: 8px 24px;
}
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--heading);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { display: block; width: 22px; height: 22px; }
.brand span { color: inherit; }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; order: 2; }
.account, .steam-login { order: 3; }
.menu-btn { order: 4; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.nav-link:hover { color: var(--heading); background: var(--raised); }
.nav-link.active {
  color: var(--foreground);
  background: var(--line);
  box-shadow: none;
}
.nav-link.active:hover { background: var(--line); color: var(--foreground); }
.nav-discord,
.nav-discord:hover,
.nav-discord.active {
  color: var(--foreground);
  background: var(--blue);
  box-shadow: none;
}
.nav-discord:hover,
.nav-discord.active:hover { background: var(--blue-hover); }
.steam-login { display: block; line-height: 0; }
.steam-login img { height: 23px; display: block; }
.nav-ava { width: 28px; height: 28px; object-fit: cover; }
.account {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.dropdown { position: relative; }
.steam-login { margin-left: auto; }
.drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.drop-btn:hover { color: var(--heading); }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 40;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: var(--foreground);
  text-decoration: none;
}
.dropdown-menu a:hover { color: var(--foreground); }
.note-btn {
  position: relative;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}
.note-btn img { width: 22px; height: 22px; display: block; }
.note-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.note-menu {
  width: min(300px, calc(100vw - 32px));
  max-height: 360px;
  overflow: auto;
  padding: 0;
}
.note-menu a.note-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.note-menu a.note-item:last-child { border-bottom: 0; }
.note-menu a.note-item.is-new { color: var(--foreground); font-weight: 700; }
.note-menu a.note-item:hover { background: var(--background); }
.note-text { display: block; }
.note-age {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.note-empty { margin: 0; padding: 12px 14px; }

.page { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.band { background: transparent; padding: 0; }
.band.fit { width: auto; max-width: none; padding: 0; }
h1 {
  margin: 8px 0 0;
  color: var(--heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.lead { margin: 16px 0 0; }
.muted { color: var(--muted); }
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 12px;
}
.state { font-weight: 700; }
.state.on { color: var(--online); }
.state.off { color: var(--offline); }
.connect-row { margin: 20px 0 0; }
.connect {
  color: var(--heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.connect:hover { color: var(--red); }
.connect-row .connect {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--blue);
  color: var(--foreground);
  text-decoration: none;
  border-radius: 8px;
}
.connect-row .connect:hover { background: var(--blue-hover); color: var(--foreground); }
.panel { margin-top: 48px; }
.donate-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.donate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.donate-price { margin: 0; color: var(--heading); font-size: 22px; font-weight: 700; line-height: 1.2; }
.donate-time { margin: 2px 0 0; }
.donate-row .btn { flex: none; }
.donor-name { color: var(--foreground); font-weight: 700; text-decoration: none; }
.donor-name:hover { color: var(--red); }
.donor-left { margin: 0; color: var(--heading); font-weight: 700; }
.discord-layout { display: block; }
.discord-copy .lead { margin: 0 0 20px; }
.discord-count { margin: 20px 0 0; font-weight: 700; }
.discord-members {
  list-style: none;
  max-height: 420px;
  margin: 12px 0 0;
  padding: 0;
  overflow: auto;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.discord-members li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.discord-members li:last-child { border-bottom: 0; }
.discord-members img { width: 28px; height: 28px; object-fit: cover; flex: none; background: #000; }
.discord-who { display: flex; flex-direction: column; min-width: 0; }
.discord-name,
.discord-who .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discord-members .pill { margin-left: auto; flex: none; }
.panel h2, h2 {
  margin: 0 0 12px;
  color: var(--heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.players { width: 100%; border-collapse: collapse; }
.players th {
  padding: 10px 8px 10px 0;
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.players td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); }
.players tbody tr:not(.group):hover td { background: rgba(255, 255, 255, 0.03); }
.players th:nth-child(n+2), .players td:nth-child(n+2) { text-align: right; }
.who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.who .yen-tag { flex: none; }
.who img, .face, .nav-ava, .song-face, .ava-big { border-radius: 0; }
.who img { width: 32px; height: 32px; object-fit: cover; background: #000; flex: none; }
.who a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.who a:hover { color: var(--foreground); }
.players tr.group td {
  text-align: left;
  font-weight: 700;
  padding-top: 16px;
  border-bottom: none;
}
.group-alive { color: var(--foreground); }
.group-dead, .group-spec { color: var(--muted); }
#player-table { table-layout: fixed; }
#player-table th,
#player-table td { vertical-align: middle; }
#player-table th:nth-child(2),
#player-table td:nth-child(2),
#player-table th:nth-child(3),
#player-table td:nth-child(3) {
  width: 5.5rem;
  padding-left: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.identity { display: flex; gap: 16px; align-items: center; }
.ava-big {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: #000;
  flex: none;
}
.identity h1 { font-size: 22px; }
.sid { margin: 4px 0 0; }
.profile-note { margin: 18px 0 0; }
.identity .connect { display: inline-block; margin-top: 8px; }
.player-hours { margin: 20px 0 0; max-width: 62ch; color: var(--heading); font-weight: 700; }
.player-meta p { margin: 6px 0 0; }
.who-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--link);
  text-decoration: none;
}
.who-link span { text-decoration: underline; text-underline-offset: 3px; }
.who-link:hover span { color: var(--red); }
form { max-width: 520px; }
label { display: block; margin: 14px 0; font-weight: 700; color: var(--heading); }
input[type=text], input[type=file], select {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--heading);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
}
input[type=file] { height: auto; padding: 6px 8px; color: var(--foreground); }
input[type=text]::placeholder { color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--foreground); }
.check input { width: 16px; height: 16px; accent-color: var(--link); }
form.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  max-width: none;
}
form.inline-form .check { margin: 0; }
form.inline-form select { width: auto; min-width: 8.5rem; margin-top: 0; }
form.inline-form input[type=text] { width: auto; min-width: 0; flex: 1 1 12rem; }
.players.sheet th:nth-child(n+2),
.players.sheet td:nth-child(n+2) { text-align: left; }
.face {
  width: 28px;
  height: 28px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
}
a.face-link, a.clan-link { color: var(--heading); text-decoration: none; }
a.face-link:hover, a.clan-link:hover { color: var(--red); }
.clan-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
a.yen-tag, span.yen-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  background:
    linear-gradient(var(--tag-fill), var(--tag-fill)) padding-box,
    linear-gradient(var(--tag-edge), var(--tag-edge)) border-box;
  color: var(--tag-text);
  font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.824);
  vertical-align: middle;
}
a.yen-tag.plain, span.yen-tag.plain { padding: 0 4px; }
a.yen-tag:not(.plain), span.yen-tag:not(.plain) { gap: 2px; padding: 0 5px 0 3px; }
.yen-tag img { width: 10px; height: 10px; object-fit: contain; flex: none; }
a.yen-tag:hover { color: var(--tag-text); }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: var(--foreground);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--blue-hover); }
.btn:disabled { opacity: 0.45; cursor: default; }
.audio-load { max-width: 420px; }
.audio-crop { margin-top: 18px; }
.audio-crop-title { margin: 0 0 8px; color: var(--heading); font-weight: 700; }
.audio-wave {
  display: block;
  width: 100%;
  height: 96px;
  background: var(--band);
  border: 1px solid var(--line);
  cursor: ew-resize;
  touch-action: none;
}
.audio-wave:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.audio-crop-time { margin: 8px 0 0; }
.audio-crop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.audio-status { min-height: 1.2em; }
.audio-status.err { color: #A94847; }
.song-search {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 36px;
  margin: 0 0 12px;
  padding: 0 2px;
  background: transparent;
  color: var(--heading);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
}
.song-search::placeholder { color: var(--muted); }
.song-search:focus { border-bottom-color: var(--blue); }
.song-none { margin: -4px 0 12px; }
.song-none[hidden] { display: none; }
.audio-sort {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
}
.audio-sort-btn {
  height: auto;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.audio-sort-btn.is-on {
  background: transparent;
  color: var(--heading);
  border-bottom-color: var(--blue);
  font-weight: 700;
}
.audio-sort-btn:focus-visible,
.audio-genre-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.audio-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.audio-genres[hidden] { display: none; }
.audio-genre-btn {
  height: auto;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.audio-genre-btn.is-on {
  background: transparent;
  color: var(--heading);
  border-bottom-color: var(--blue);
  font-weight: 700;
}
#audio-songs {
  display: flex;
  flex-direction: column;
}
.audio-song {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  min-width: 0;
  padding: 8px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.audio-song-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.audio-song span { color: var(--heading); font-weight: 700; }
.audio-song input[type=text] {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio-song input.audio-artist {
  height: 16px;
  color: #ababab;
  font-size: 12px;
  font-weight: 500;
}
.audio-song input.audio-title {
  height: 20px;
  font-weight: 700;
}
.audio-song input.audio-genre {
  height: 16px;
  color: #8f98a0;
  font-size: 12px;
  font-weight: 500;
}
.audio-song-actions { display: flex; gap: 4px; flex: none; }
.audio-song .btn { height: 24px; padding: 0 6px; font-size: 12px; }
.audio-songs-empty { margin: 0; grid-column: 1 / -1; }
.song-log { list-style: none; margin: 12px 0 0; padding: 0; }
.song-log-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.song-log-row time {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.song-log-row p { margin: 0; }
.song-log-name { font-weight: 700; }
.song-log-who { font-weight: 600; text-decoration: none; }
.song-log-who:hover { color: var(--red); }
.btn.ghost {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--line);
}
.btn.ghost:hover { background: transparent; color: var(--foreground); border-color: var(--blue); }
.btn:disabled:hover { background: var(--blue); }
.btn.ghost:disabled:hover { background: transparent; }
.flash {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: transparent;
  border-left: 2px solid var(--red);
  border-radius: 0;
  color: var(--foreground);
}
.flash.ok { color: var(--foreground); border-left-color: var(--blue); }
.flash.err { color: #A94847; }

.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
}
.crop-modal[hidden] { display: none; }
.crop-box {
  width: min(440px, 100%);
  padding: 20px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.crop-box h2 { margin-top: 0; }
.crop-stage {
  width: 320px;
  height: 320px;
  max-width: 100%;
  margin: 14px auto;
  position: relative;
  overflow: hidden;
  background: #000;
  cursor: grab;
  touch-action: none;
}
.crop-stage img {
  position: absolute;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.crop-shade {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--link);
  pointer-events: none;
}
.zoom input { width: 100%; margin-top: 6px; }
.crop-actions { display: flex; gap: 8px; justify-content: flex-end; }

.rules-page { font: inherit; }
.rule-index a { color: var(--heading); }
.rule-index a:hover { color: var(--foreground); }
.rules-page h2 { font-size: 20px; line-height: 1.3; }
.rules { margin: 0; padding-left: 1.3em; }
.rules > li { margin: 0 0 12px; }
.rules > li:last-child { margin-bottom: 0; }
.rule-index { margin: 0; padding-left: 1.2em; }
.rule-index li { margin: 0 0 6px; }
.rule-index a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.admonition {
  margin: 12px 0 0;
  padding: 0 0 10px;
  overflow: hidden;
  background: var(--raised);
  color: var(--foreground);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}
.admonition p { margin: 0; }
.admonition p:not(.admonition-title) { padding: 0 8px; }
.admonition p.admonition-title {
  position: relative;
  margin: 0;
  padding: 10px 12px 0 32px;
  background: transparent;
  color: var(--heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.admonition-title::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 16px;
  height: 16px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z'/></svg>") center / contain no-repeat;
}
.admonition.warn { border-left-color: #e0a14a; }
.admonition.warn .admonition-title { background: transparent; }
.admonition.warn .admonition-title::before {
  background: #e0a14a;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
  mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
}

.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.song-card[hidden] { display: none; }
.song-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.song-card:hover,
.song-card:focus-within { border-color: var(--blue); }
.song-card:hover .song-name,
.song-card:focus-within .song-name { color: var(--heading); }
.song-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.song-actions .song-play,
.song-actions .song-pick { margin-top: 0; }
.song-artist,
.song-name,
.song-plays,
.song-empty {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-artist {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.song-name {
  color: var(--heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.song-credit { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
#audio-tool { margin-top: 28px; }
.request-list { display: flex; flex-direction: column; gap: 12px; }
.request-list .audio-song { flex-wrap: wrap; align-items: flex-start; }
.request-list .audio-song-actions { flex-wrap: wrap; align-items: center; }
.request-list .audio-song-fields { flex: 1; }
.request-panel { margin-top: 28px; }
.request-sort { margin: 0 0 12px; }
.request-ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 16px 16px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
}
.request-ticket:hover,
.request-ticket:focus-within { border-color: var(--blue); }
.request-copy { min-width: 0; }
.request-ticket .song-artist,
.request-ticket .song-name,
.request-ticket .song-credit,
.request-ticket .song-plays {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.request-ticket .song-name {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.request-actions > form { display: none; }
.request-actions .song-play { margin-top: 0; }
.request-actions .btn { min-height: 36px; }
form.request-ticket,
.request-ticket form { max-width: none; }
.request-ticket input.request-field {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  line-height: 1.3;
}
.request-ticket input.request-field-artist {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.request-ticket input.request-field-title {
  color: var(--heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.request-ticket input.request-field-genre {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.song-plays,
.song-empty {
  margin-top: 6px;
  color: #8f98a0;
  font-size: 12px;
}
.song-card.is-playing,
.song-card.is-playing:hover,
.song-card.is-playing:focus-within {
  border-color: var(--blue);
}
.song-play,
.song-pick {
  min-height: 36px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.song-actions form { margin: 0; max-width: none; }
.song-actions .btn { min-height: 36px; }
.song-credit a { color: inherit; }
.song-play:hover,
.song-pick:hover { background: var(--blue); color: var(--foreground); }
.song-card.is-playing .song-play { background: var(--blue); color: var(--foreground); }
a.song-pick {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.song-pick.is-on,
.song-pick.is-on:hover { background: var(--blue); color: var(--foreground); }
.song-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.song-pickers li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.song-face {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: cover;
  background: #171a21;
}
.song-pickers span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
}

.btn, .nav-link, .song-card, .song-play, .song-pick, .menu-btn {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .connect-row .connect, .nav-link, .song-card, .song-play, .song-pick, .audio-sort-btn, .audio-genre-btn {
    transition: none;
  }
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.copy-note { margin: 0; min-height: 1.2em; }
.copy-note.ok { color: var(--foreground); }
.copy-note.err { color: var(--red); }
.status-error { margin: 12px 0 0; color: var(--red); }
.status-error[hidden] { display: none; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.stat {
  min-width: 0;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
.stat:first-child { border-left: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--line);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.pill.on { background: var(--blue); }
.pill.off, .pill.dnd { background: var(--red); }
.pill.idle { background: transparent; color: var(--muted); padding-left: 0; padding-right: 0; }
.stat h2 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.stat-value { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.community-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.community-links a { color: var(--heading); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.community-links a:hover { color: var(--foreground); }

@media (max-width: 800px) {
  .menu-btn { display: inline-flex; order: 3; margin-left: 8px; }
  .account, .steam-login { order: 2; }
  .topbar-inner { flex-wrap: wrap; padding: 8px 16px; }
  .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; order: 4; padding-bottom: 8px; }
  .topbar.nav-open .nav-links { display: flex; }
  .nav-link { min-height: 44px; }
  .request-ticket { flex-direction: column; align-items: stretch; }
  .request-actions { justify-content: flex-start; }
  .notes .note-menu { position: fixed; top: 60px; right: 16px; left: 16px; width: auto; }
  .page { padding: 24px 16px 64px; }
  h1 { font-size: 32px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  #player-table,
  #player-table tbody,
  #player-table tr,
  #player-table td { display: block; width: auto; }
  #player-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #player-table tr:not(.group) {
    margin: 0 0 8px;
    padding: 12px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  #player-table td { padding: 4px 0; border-bottom: 0; text-align: left; overflow-wrap: anywhere; }
  #player-table td:nth-child(2)::before,
  #player-table td:nth-child(3)::before { color: var(--muted); font-weight: 600; }
  #player-table td:nth-child(2)::before { content: "Tempo "; }
  #player-table td:nth-child(3)::before { content: none; }
  .players.sheet,
  .players.sheet tbody,
  .players.sheet tr,
  .players.sheet td { display: block; width: auto; }
  .players.sheet tr { margin: 0 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
  .players.sheet td { padding: 4px 0; border-bottom: 0; text-align: left; overflow-wrap: anywhere; }
  form.inline-form select { min-width: 0; }
  .identity { align-items: flex-start; }
  .donate-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; justify-content: center; }
}

.clan-lead { margin: 12px 0 0; max-width: 62ch; color: var(--muted); }
.clan-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.4; }
.clan-stats strong { color: var(--heading); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.clan-split {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  column-gap: 16px;
  align-items: start;
  margin-top: 28px;
}
.clan-split.is-open { grid-template-columns: minmax(0, max-content) minmax(16rem, 1fr); }
.clan-list-col, .clan-detail { min-width: 0; }
.clan-board { margin-top: 0; }
.clan-detail {
  display: none;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 92px);
}
.clan-split.is-open .clan-detail { display: block; }
.clan-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.clan-find { display: flex; align-items: flex-end; gap: 12px; }
.clan-search { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.clan-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--foreground);
  font: inherit;
}
.clan-clear, .clan-back {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--heading);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.clan-sort { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.clan-sort-btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.clan-sort-btn.is-on { color: var(--heading); border-bottom-color: var(--heading); }
.clan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.clan-row {
  display: grid;
  grid-template-columns: 8.25rem 8.75rem 14rem auto;
  justify-content: start;
  column-gap: 16px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  width: max-content;
  max-width: 100%;
  cursor: pointer;
}
.clan-row:hover { background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), var(--raised); }
.clan-row.is-on { border-color: var(--blue); }
.clan-row.is-on .clan-open { color: var(--blue); }
.clan-row[hidden] { display: none; }
.clan-row-id, .clan-drawer-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.clan-mark { width: 28px; height: 28px; object-fit: contain; flex: none; }
.clan-row .clan-mark { flex: 0 0 28px; }
.clan-drawer-name { min-width: 0; }
.clan-drawer-id h2 { margin: 0; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.clan-mark[hidden] { display: none; }
.clan-row h2 {
  margin: 0;
  min-width: 0;
  color: var(--heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.clan-count {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  width: 100%;
  margin: 0;
}
.clan-num {
  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: right;
}
.clan-unit { color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.25; }
.clan-owner { margin: 0; min-width: 0; width: 100%; }
.clan-row .clan-owner-link { font-size: 16px; font-weight: 500; line-height: 1.25; }
.clan-row .clan-owner-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.clan-row .clan-owner-kicker { color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.25; }
.clan-row .clan-owner-name {
  display: block;
  overflow: hidden;
  color: var(--heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-row .clan-owner-link span:last-child { overflow-wrap: normal; }
.clan-owner-link, .clan-owner-row, .clan-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--heading);
  font-weight: 700;
  text-decoration: none;
}
.clan-owner-link span:last-child, .clan-person-name { overflow-wrap: anywhere; }
.clan-owner-link:hover, .clan-owner-row:hover, .clan-person:hover { color: var(--foreground); }
.clan-open {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--heading);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.clan-note { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--muted); }
.clan-note p { margin: 0; }
.clan-ava {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: #000;
  color: var(--heading);
  font-weight: 700;
  overflow: hidden;
}
.clan-ava-sm { width: 32px; height: 32px; font-size: 14px; }
.clan-ava-owner { width: 64px; height: 64px; font-size: 22px; }
.clan-ava img { width: 100%; height: 100%; object-fit: cover; }
.clan-person-name, .clan-role { display: block; overflow-wrap: anywhere; }
.clan-role { color: var(--muted); font-size: 14px; font-weight: 600; }
.clan-back { display: none; flex: none; }
.clan-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 92px);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--foreground);
}
.clan-sheet.is-in { animation: clan-panel-in 240ms ease-out; }
@keyframes clan-panel-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .clan-sheet.is-in { animation: none; }
}
.clan-drawer-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.clan-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 16px 20px; }
.clan-drawer-count { margin: 2px 0 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.clan-drawer-tag { margin: 8px 0 0; }
.clan-drawer-tag:empty { display: none; }
.clan-drawer h3 { margin: 20px 0 0; color: var(--heading); font-size: 18px; }
.clan-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.clan-owner-row, .clan-person { padding: 12px 0; border-bottom: 1px solid var(--line); }
.clan-drawer-note { margin: 16px 0; color: var(--muted); }
.player-head { display: flex; align-items: center; gap: 20px; }
.player-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  flex: none;
  background: #000;
  color: var(--heading);
  font-size: 32px;
  font-weight: 700;
  overflow: hidden;
}
.player-ava img { width: 100%; height: 100%; object-fit: cover; }
.player-page h1 { margin-top: 0; }
.player-steam { margin: 6px 0 0; }
.player-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 28px 0 0; border-top: 1px solid var(--line); }
.player-facts:not(:has(div)) { display: none; }
.player-facts div { min-width: 0; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); }
.player-facts dt { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.player-facts dd { margin: 6px 0 0; color: var(--heading); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.player-sub { color: var(--muted); font-size: 14px; font-weight: 600; }
.player-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; }
@media (max-width: 1040px) {
  .clan-split.is-open { grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.85fr); }
  .clan-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id count" "owner open";
    row-gap: 6px;
    width: 100%;
  }
  .clan-row-id { grid-area: id; }
  .clan-count { grid-area: count; width: 8.75rem; }
  .clan-owner { grid-area: owner; }
  .clan-open { grid-area: open; }
}
@media (max-width: 720px) {
  .clan-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id count" "owner open";
    row-gap: 6px;
    min-height: 0;
    padding: 12px 16px;
    width: 100%;
  }
  .clan-row-id { grid-area: id; }
  .clan-count { grid-area: count; width: 8.75rem; }
  .clan-owner { grid-area: owner; }
  .clan-open { grid-area: open; }
  .clan-split { display: block; }
  .clan-detail { display: none; position: static; max-height: none; }
  html.clan-show-detail .clan-list-col { display: none; }
  html.clan-show-detail .clan-detail { display: block; }
  .clan-back { display: inline-flex; }
  .clan-sheet { max-height: none; }
  .player-head { align-items: flex-start; }
  .player-facts { grid-template-columns: 1fr; }
  .song-log-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
.drop-btn span {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listen-list { margin-top: 8px; }
.listen-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.listen-row h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.listen-meta { margin: 4px 0 0; color: var(--muted); }
.listen-row audio { display: block; width: min(100%, 480px); margin-top: 10px; }
.listen-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.listen-actions form { max-width: none; margin: 0; }
.mark-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.send-audio { margin-top: 36px; }
.send-audio h2 { margin: 0 0 8px; }
.send-audio .hint { margin: 0 0 8px; color: var(--muted); }
.drop-btn:focus-visible,
.listen-actions .btn:focus-visible,
.send-audio .btn:focus-visible,
.send-audio input:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .mark-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .listen-row audio { scroll-behavior: auto; }
}
.song-card form.name-form,
.request-copy form.name-form { max-width: none; margin: 0; }
.song-card input.song-name {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.song-card input.song-name:focus { border-bottom-color: var(--blue); }
.song-card input.song-name:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }