:root {
  --bg:        #0c0a14;
  --bg-raised: #16121f;
  --line:      #2a2340;
  --text:      #e8e4f0;
  --muted:     #8a82a6;
  --accent:    #ff2d95;   /* hot magenta */
  --accent-2:  #16e0c8;   /* cyan */
  --gold:      #ffcf40;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% -10%, #1a1030 0%, var(--bg) 60%);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

.site-header {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: #000;   /* matches the logo's black edges */
}
.brand { display: block; width: 100%; text-align: center; }
.brand img { width: min(90vw, 440px); height: auto; display: inline-block; }
.brand:hover { opacity: .85; }
.site-header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }
.site-header nav a { color: var(--muted); font-weight: 600; }
.site-header nav a:hover { color: var(--accent); }

main { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

h1 { font-size: 1.6rem; margin: 0 0 1.25rem; }
.crumb { margin: 0 0 .5rem; }
.crumb a { color: var(--muted); }
.empty { color: var(--muted); }

.section {
  font-size: 1.05rem; margin: 1.75rem 0 .6rem; color: var(--text);
  border-bottom: 1px solid var(--line); padding-bottom: .35rem;
}
.section .sub { color: var(--muted); font-weight: 400; font-size: .85rem; }
.sig-head { color: var(--gold); }
.sig-head.section { border-color: rgba(255, 207, 64, .3); }

.board tr.sig { background: rgba(255, 207, 64, .05); }
.char {
  display: inline-block; margin-left: .5rem; padding: 0 .4rem;
  font-size: .72rem; font-weight: 700; border-radius: 4px;
  color: var(--gold); background: rgba(255, 207, 64, .12);
  border: 1px solid rgba(255, 207, 64, .3); vertical-align: middle;
}
h1 .char { font-size: .85rem; }

/* Challenges */
.challenge-btn {
  font-size: .8rem; font-weight: 700; padding: .3rem .7rem; border-radius: 7px;
  color: var(--bg) !important; vertical-align: middle; margin-left: .6rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.challenge-btn:hover { filter: brightness(1.1); }
.badge {
  display: inline-block; min-width: 1.2em; padding: 0 .35em; margin-left: .15em;
  font-size: .72rem; font-weight: 700; text-align: center; border-radius: 999px;
  color: #fff; background: var(--accent);
}
.chip {
  display: inline-block; padding: .1rem .5rem; border-radius: 6px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
}
.chip.win  { color: var(--bg); background: var(--accent-2); border-color: transparent; }
.chip.loss { color: var(--muted); }
.radios { display: inline-flex; gap: 1rem; margin-top: .4rem; }
.radios .r { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; }
.inline-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.inline-actions button { padding: .5rem 1.2rem; }
.board-line { margin: 0 0 1rem; display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.card select {
  display: block; width: 100%; margin-top: .4rem; padding: .55rem .6rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 1rem;
}

.diffnav {
  display: inline-flex; margin: 0 0 1.25rem; padding: 3px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
}
.diffnav a {
  padding: .4rem 1rem; border-radius: 7px; font-weight: 600;
  color: var(--muted); white-space: nowrap;
}
.diffnav a:hover { color: var(--text); }
.diffnav a.active {
  color: var(--bg);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

table.board {
  width: 100%; border-collapse: collapse;
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.board th, .board td { padding: .6rem .85rem; text-align: left; }
.board thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.board thead th a.sortcol {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center;
  gap: .15em; white-space: nowrap;
}
.board thead th a.sortcol:hover { color: var(--text); }
.board thead th a.sortcol.active { color: var(--text); }
.board tbody tr + tr td { border-top: 1px solid var(--line); }
.board tbody tr:hover { background: rgba(255, 45, 149, .06); }
.board .num { text-align: right; font-variant-numeric: tabular-nums; }

table.status {
  border-collapse: collapse; margin: .4rem 0 .5rem;
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.status th, .status td { padding: .5rem .85rem; text-align: left; }
.status thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.status thead th:first-child, .status thead th:nth-child(2),
.status td.yes, .status td.no { text-align: center; }
.status tbody tr + tr td { border-top: 1px solid var(--line); }
.status td.yes { color: var(--accent-2); font-weight: 700; }
.status td.no  { color: var(--accent); font-weight: 700; }

.rank { font-weight: 700; color: var(--muted); }
.rank-1 { color: var(--gold); text-shadow: 0 0 10px rgba(255, 207, 64, .5); }
.rank-2 { color: #cfd4e0; }
.rank-3 { color: #e0a06a; }

.stars { color: #cfd4e0; letter-spacing: 1px; white-space: nowrap; }
.stars.gold { color: var(--gold); text-shadow: 0 0 8px rgba(255, 207, 64, .55); }
.stars .half { font-size: .8em; color: var(--muted); }

.pb {
  display: inline-block; margin-left: .4rem; padding: 0 .35rem;
  font-size: .68rem; font-weight: 700; border-radius: 4px;
  color: var(--bg); background: var(--accent-2);
}

.card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.5rem; max-width: 520px;
}

/* Lounges tab */
.lounge-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.lounge-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 10px; padding: .8rem 1.1rem;
}
.lounge-info { flex: 1; min-width: 0; }   /* min-width:0 lets a long note wrap instead of overflowing */
.lounge-host { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lounge-meta { color: var(--muted); font-size: .9rem; margin-top: .25rem; line-height: 1.4; }
.lounge-count { color: var(--muted); font-size: .85rem; font-weight: 400; }
.lounge-action { flex-shrink: 0; }
.chip.pending { color: var(--muted); }
.join-btn {
  padding: .4rem 1.1rem; border: none; border-radius: 8px; cursor: pointer;
  font-weight: 700; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.join-btn:hover { filter: brightness(1.1); }
.intent-banner {
  border: 1px solid var(--accent-2); border-radius: 10px; padding: .9rem 1.1rem;
  margin: 0 0 1.25rem; background: rgba(22, 224, 200, .06);
}
.intent-banner form { display: inline; margin-left: .8rem; }
.intent-banner button {
  padding: .35rem 1rem; border: 1px solid var(--accent); border-radius: 8px;
  background: transparent; color: var(--accent); cursor: pointer; font-weight: 600;
}
.intent-banner button:hover { background: var(--accent); color: var(--bg); }
.card.success { border-color: var(--accent-2); }
.card label { display: block; font-weight: 600; margin-bottom: 1rem; }
.card input {
  display: block; width: 100%; margin-top: .4rem; padding: .6rem .75rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 1rem;
}
.card input:focus { outline: none; border-color: var(--accent); }
.card button {
  padding: .6rem 1.25rem; border: 0; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 1rem; color: var(--bg);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.card button:hover { filter: brightness(1.1); }

.apikey {
  background: var(--bg); border: 1px solid var(--accent-2); border-radius: 8px;
  padding: .8rem; margin: 0; font-size: 1.05rem; letter-spacing: .5px;
  color: var(--accent-2); user-select: all;
  white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere;
}
.warn { color: var(--gold); font-size: .9rem; }
.error { color: var(--accent); font-weight: 600; }

/* Downloads page (public list) */
ul.downloads { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
ul.downloads li { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); }
ul.downloads li.current { border-color: var(--accent); }
ul.downloads a.dl { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; text-decoration: none; color: var(--text); }
ul.downloads a.dl:hover { background: rgba(255, 45, 149, .06); }
.dl-name { font-weight: 600; }
.dl-ver { color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-badge { margin-left: auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: .1rem .5rem; }
.dl-notes { margin: 0 1rem .7rem; color: var(--muted); font-size: .85rem; }

/* Booth downloads editor (compact inline rows; overrides the block .card input) */
.dl-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); }
.dl-row.dl-add { border-top: 1px dashed var(--line); margin-top: .3rem; }
.dl-row input, .dl-row select {
  display: inline-block; width: auto; margin-top: 0; padding: .35rem .5rem; font-size: .9rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text);
}
.dl-row input.wide { flex: 1 1 12rem; min-width: 8rem; }
.dl-row button {
  padding: .35rem .7rem; font-size: .85rem; font-weight: 600; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--bg); background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.dl-row button.danger { background: none; border: 1px solid var(--line); color: var(--muted); }
.dl-row button.danger:hover { border-color: var(--accent); color: var(--accent); }

/* My Account page: stacked full-width section cards in a comfortable column. */
.account { max-width: 620px; margin: 0 auto; }
.account .card { max-width: none; margin-bottom: 1.25rem; }
.account .card h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.section-intro { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0 0 1.1rem; }
.section-intro em { color: var(--text); font-style: normal; font-weight: 600; }

/* Numbered getting-started steps on the home page. */
.steps { margin: 1rem 0 1.25rem; padding-left: 1.4rem; }
.steps li { margin: 0 0 .85rem; line-height: 1.6; }
.steps li:last-child { margin-bottom: 0; }
.steps strong { color: var(--text); }
.steps em { color: var(--accent); font-style: normal; font-weight: 600; }

/* DLC ownership attestation: grouped (base / paid), one single-line row per
   title — "[✓] Song by Artist" with the song and artist in contrasting colors.
   Selectors are specific enough to beat the generic .card label/input rules. */
.dlc-group + .dlc-group { margin-top: 1.3rem; }
.dlc-group-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 0 0 .2rem;
}
.dlc-list { list-style: none; margin: 0 0 .2rem; padding: 0; }
.dlc-list li + li { border-top: 1px solid var(--line); }
.dlc-list label.dlc-row {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0; padding: .6rem .15rem; font-weight: 400; cursor: pointer;
}
.dlc-list .dlc-row input[type="checkbox"] {
  flex: 0 0 auto; align-self: center; width: 1.15rem; height: 1.15rem;
  margin: 0 .35rem 0 0; padding: 0; accent-color: var(--accent); cursor: pointer;
}
.dlc-name   { font-weight: 600; color: var(--accent-2); }
.dlc-by     { font-weight: 400; color: var(--muted); font-size: .85rem; }
.dlc-artist { font-weight: 400; color: var(--text); }
.dlc-note   { font-weight: 400; color: var(--muted); font-size: .85rem; }
.dlc-row:hover .dlc-name { color: var(--accent); }
.account .card form + .attest-history { margin-top: 1rem; }

.attest-history { margin-top: .5rem; }
.attest-history summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.attest-history ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); }
.attest-history time { color: var(--text); }

/* Booth — admin/moderation dashboard */
.booth { max-width: 860px; margin: 0 auto; }
.booth .card { max-width: none; margin-bottom: 1.25rem; }
.booth .card h2 { margin: 0 0 .75rem; font-size: 1.1rem; }

.table-wrap { overflow-x: auto; }
table.grid {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.grid th, .grid td { padding: .55rem .8rem; text-align: left; }
.grid tr:first-child th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 600; white-space: nowrap;
}
.grid tr + tr td { border-top: 1px solid var(--line); }
.grid tr:hover td { background: rgba(255, 45, 149, .05); }
.grid td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid td.yes { text-align: center; color: var(--accent-2); font-weight: 700; }
.grid td.no  { text-align: center; color: var(--muted); }

/* Status pills (account list + player drill-down) */
.badge.status-active    { background: var(--accent-2); color: var(--bg); }
.badge.status-suspended { background: var(--gold);     color: var(--bg); }
.badge.status-banned    { background: var(--accent);   color: #fff; }
.badge.status-deleted   { background: var(--muted);    color: var(--bg); }

/* Moderation action row + shared log lists */
.booth-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.1rem; }
.booth-actions input[type="text"] {
  flex: 1 1 220px; width: auto; margin: 0; padding: .5rem .7rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: .9rem;
}
.booth-actions button {
  margin: 0; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.booth-actions button:hover { border-color: var(--accent-2); color: var(--accent-2); filter: none; }
.booth-actions button.danger {
  margin: 0; background: transparent; border-color: var(--accent); color: var(--accent);
}
.booth-actions button.danger:hover { background: var(--accent); color: var(--bg); }

.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { padding: .45rem 0; font-size: .9rem; }
.log-list li + li { border-top: 1px solid var(--line); }
.log-list time { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Discord login + avatars */
.discord-btn {
  padding: .35rem .7rem; border-radius: 6px; color: #fff !important;
  background: #5865F2; font-weight: 700;
}
.discord-btn:hover { filter: brightness(1.1); }
.site-header .me { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); }
.site-header .me img { border-radius: 50%; }

/* Username dropdown: pure-CSS, opens on hover or keyboard focus. */
.user-menu { position: relative; display: inline-flex; }
.user-menu > .me {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--muted);
}
.user-menu:hover > .me, .user-menu:focus-within > .me { color: var(--accent); }
.user-menu .caret { font-size: .7rem; color: var(--muted); }
.user-menu-pop {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
  display: none; flex-direction: column; min-width: 160px; padding: .35rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
}
/* Invisible bridge over the gap between the trigger and the menu, so the cursor
   never leaves the hover region on its way down to a selection. */
.user-menu-pop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem;
}
.user-menu:hover .user-menu-pop, .user-menu:focus-within .user-menu-pop { display: flex; }
.user-menu-pop a { padding: .5rem .7rem; border-radius: 7px; color: var(--text); font-weight: 500; }
.user-menu-pop a:hover { background: var(--bg); color: var(--accent); }
.playercell { display: inline-flex; align-items: center; gap: .5rem; }
.playercell img { border-radius: 50%; }
.player-title { display: flex; align-items: center; gap: .6rem; }
.player-title img { border-radius: 50%; }

.account-id { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.account-id img { border-radius: 50%; }
.muted-line { color: var(--muted); font-size: .88rem; margin: .2rem 0; }
button.danger {
  margin-top: 1rem; padding: .5rem 1rem; border: 1px solid var(--accent);
  border-radius: 8px; background: transparent; color: var(--accent);
  font-weight: 700; cursor: pointer;
}
button.danger:hover { background: var(--accent); color: var(--bg); }

.site-footer {
  border-top: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; text-align: center; padding: 1.5rem;
}
.site-footer .attribution {
  margin: .6rem auto 0; max-width: 620px; font-size: .88rem;
  color: #6b6486; line-height: 1.5;
}

/* ---- achievements grid (player profile) ---- */
.achievements {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ach {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem .9rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-raised);
}
/* .ach-mark is the placeholder where the (future) achievement icon will slot in. */
.ach-mark { font-size: 1.35rem; line-height: 1.2; flex: none; }
.ach-body { min-width: 0; flex: 1; }
/* Name is the bold title on its own line; the requirement sits clearly below it
   in muted, smaller text — separated by weight, colour, and the line break. */
.ach-name { display: block; font-weight: 700; font-size: 1.05rem; color: var(--text); line-height: 1.3; }
.ach-req { display: block; margin-top: .35rem; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.ach-tag {
  flex: none; padding-top: .15rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gold); white-space: nowrap;
}
.ach-tag.muted { color: var(--muted); font-weight: 600; }
.ach.earned { border-color: rgba(255, 207, 64, .45); }
.ach.earned .ach-mark { color: var(--gold); }
.ach.locked { opacity: .5; }
.ach.locked .ach-mark { color: var(--muted); }
.ach.untracked { opacity: .5; border-style: dashed; }
.ach.untracked .ach-mark { color: var(--muted); }

/* Home page: collapsible platform guides */
.guide-intro { color: var(--muted); margin: 0 0 1rem; }
details.guide {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised);
  margin: 0 0 .7rem;
}
details.guide summary {
  cursor: pointer; list-style: none; padding: .9rem 1.1rem;
  font-size: 1.05rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: .6rem;
}
details.guide summary::-webkit-details-marker { display: none; }
details.guide summary::before {
  content: "\25B8"; color: var(--muted); font-size: .9em; transition: transform .15s;
}
details.guide[open] summary::before { transform: rotate(90deg); color: var(--accent); }
details.guide summary:hover { color: var(--accent); }
.guide-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.guide-body > p:first-child { margin-top: 1rem; }
.guide-sub {
  font-size: .95rem; margin: 1.25rem 0 .5rem; color: var(--gold);
}

/* Home page: Discord call-to-action */
.discord-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  border: 1px solid rgba(88, 101, 242, .5); border-radius: 12px;
  background: rgba(88, 101, 242, .1);
}
.discord-cta-text strong { display: block; font-size: 1.05rem; }
.discord-cta-text span { color: var(--muted); font-size: .9rem; }
.discord-btn-lg { padding: .6rem 1.1rem; font-size: 1rem; border-radius: 8px; letter-spacing: .2px; }

/* Lounges: join by private code */
.joincode { display: flex; gap: .5rem; margin: 0 0 1.25rem; max-width: 440px; flex-wrap: wrap; }
.code-in {
  flex: 1 1 12rem; min-width: 10rem; padding: .55rem .75rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
}
.code-in::placeholder { text-transform: none; letter-spacing: normal; color: var(--muted); }
.code-in:focus { outline: none; border-color: var(--accent); }
.joincode .join-btn { flex: 0 0 auto; }