:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111318;
  color: #f4f5f7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #252a35, #111318 55%);
}

nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #343946;
}

nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

main {
  width: min(960px, calc(100% - 2rem));
  margin: 2rem auto;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  padding: 1.25rem;
  border: 1px solid #3a4150;
  border-radius: 14px;
  background: rgba(27, 31, 39, 0.92);
}

label {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

input,
select,
button {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 9px;
  border: 1px solid #50596b;
  font: inherit;
}

input,
select {
  background: #151922;
  color: inherit;
}

button {
  cursor: pointer;
  background: #e7e9ee;
  color: #111318;
  font-weight: 700;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.secondary {
  background: transparent;
  color: inherit;
}

.error {
  color: #ff9a9a;
  min-height: 1.4rem;
}

.muted {
  color: #aeb5c2;
}

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

ul {
  padding-left: 1.25rem;
}

#vote-area {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

#playback-audio {
  width: 100%;
  margin-top: 1rem;
}

.big-phase {
  text-align: center;
  padding: 2rem 1rem;
}

.big-phase h1 {
  margin-bottom: 0.25rem;
  font-size: clamp(2rem, 8vw, 4rem);
}

#timer {
  min-height: 2rem;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

[hidden] { display: none !important; }
button, input, select, a { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, canvas:focus-visible {
  outline: 3px solid #a69aff;
  outline-offset: 3px;
}
.profile-card { margin: 1.25rem 0; }
.character-profile-heading { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.character-name-field { width: min(420px, 75%); }
.character-wins { white-space: nowrap; color: #f8cf70; }
.character-editor { display: grid; grid-template-columns: 210px 1fr; gap: 2rem; align-items: start; }
.character-preview { position: sticky; top: 1rem; text-align: center; padding: 1.25rem .75rem; border-radius: 18px; background: radial-gradient(ellipse at center, #49406a, #242434 72%); }
.character-avatar { display: block; width: 100%; height: auto; }
.character-preview .character-avatar { max-height: 290px; }
.character-preview figcaption, .character-preview p { color: #c4bed4; font-size: .85rem; }
.character-section-label { color: #c4bed4; font-size: .9rem; margin: .25rem 0 .7rem; }
.character-feature-list { display: grid; gap: .4rem; }
.character-feature-row { display: grid; grid-template-columns: 70px 36px 1fr 36px; gap: .5rem; align-items: center; border-bottom: 1px solid #363645; padding: .35rem 0; }
.character-feature-row button { padding: .35rem; background: #353346; color: #eee9ff; }
.character-choice { text-align: center; font-size: .85rem; }
.character-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; }
.character-color-row { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .35rem .5rem; border: 1px solid #464152; border-radius: 9px; }
.character-color-row.is-active { border-color: #b9a7ff; background: #40324e; }
.character-color-select { background: transparent; color: inherit; border: 0; text-align: left; padding: .35rem 0; font-size: .85rem; }
.character-color-row input[type=color] { width: 36px; height: 32px; flex: 0 0 36px; padding: 2px; cursor: pointer; }
.character-wheel-panel { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 1rem; padding: .75rem; background: #171923; border-radius: 12px; }
.character-color-wheel { width: 170px; max-width: 100%; height: auto; touch-action: none; cursor: crosshair; grid-row: span 3; border-radius: 50%; }
.character-brightness { width: 100%; padding: 0; accent-color: #ba9dff; }
.character-wheel-panel label { font-size: .85rem; margin-bottom: .4rem; }
.character-wheel-hint { font-size: .8rem; color: #aeb5c2; margin: 0; }
.character-profile-actions { margin-top: 1rem; }
.character-profile-save { width: auto; background: #c7b4ff; }
.character-profile-status { min-height: 1.4rem; font-size: .85rem; color: #cfbddf; margin-bottom: 0; }
.player-list, #scoreboard { padding: 0; list-style: none; }
.player-row { display: flex; align-items: center; gap: .85rem; padding: .5rem 0; }
.player-avatar { width: 44px; height: 58px; flex: 0 0 44px; overflow: hidden; border-radius: 10px; background: #343044; }
.player-meta { display: block; margin-top: .2rem; font-size: .85rem; }
.is-offline { opacity: .5; }
.score-row { display: grid; grid-template-columns: 24px 44px 1fr auto auto; gap: .85rem; align-items: center; border-bottom: 1px solid #343946; padding: .5rem 0; }
.score-rank { color: #aeb5c2; }
.score-row > .muted { font-size: .85rem; }
.standup-stage { margin-bottom: 1rem; background: linear-gradient(145deg, #332443, #1b1e2b); }
.stage-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.stage-heading h2 { font-size: 1.15rem; margin-top: 0; }
.stage-heading .muted { font-size: .85rem; }
.stage-players { display: flex; justify-content: safe center; gap: .85rem; overflow-x: auto; padding: .5rem .25rem 1rem; }
.stage-player { flex: 1 0 120px; max-width: 180px; min-width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: .4rem .6rem 1rem; border: 1px solid #584860; border-radius: 16px; background: #242030; transition: border-color .25s, background .25s, box-shadow .25s, transform .25s; }
.stage-player.is-active { opacity: 1; border: 2px solid #f3bb70; background: #443049; box-shadow: 0 0 25px #f3bb7033; transform: translateY(-3px); }
.stage-player strong { width: 100%; overflow-wrap: anywhere; font-size: .9rem; }
.stage-player > .muted { font-size: .75rem; }
.stage-avatar { width: 100%; max-width: 120px; }
.stage-microphone { height: 30px; color: #f3bb70; }
.stage-microphone svg { height: 26px; width: 26px; animation: microphone-in .25s ease-out; }
@keyframes microphone-in { from { transform: translateY(-7px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rating-choices { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; max-width: 540px; width: 100%; margin: .25rem auto; }
.rating-choices button { font-size: 1.6rem; padding: .85rem .25rem; border-color: #bd9ae7; background: #cfb8ef; }
.rating-choices button:hover:not(:disabled) { background: #f3bb70; transform: translateY(-2px); }
.audio-visuals { max-width: 720px; margin: 1.25rem auto; padding: .9rem; text-align: left; border: 1px solid #424259; border-radius: 12px; background: #151822; }
.audio-heading { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .5rem; }
.spectrogram-wrap { position: relative; overflow: hidden; border-radius: 7px; }
#spectrogram { display: block; width: 100%; height: 130px; background: #11182b; }
.frequency-high, .frequency-low { position: absolute; left: .4rem; font-size: .65rem; color: #cdd3e9; background: #11182bb0; border-radius: 3px; padding: .1rem .3rem; }
.frequency-high { top: .2rem; }
.frequency-low { bottom: .2rem; }
.audio-progress { height: 7px; overflow: hidden; background: #373348; border-radius: 5px; margin-top: .5rem; }
#audio-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #aa82ff, #ffbe76); box-shadow: 2px 0 6px #ffc574; }
.audio-level-row { display: flex; align-items: center; gap: .7rem; font-size: .7rem; color: #aeb5c2; margin-top: .7rem; }
.audio-level-track { height: 5px; background: #303647; border-radius: 5px; width: 130px; overflow: hidden; }
#audio-level-fill { width: 0; height: 100%; background: linear-gradient(90deg, #77d5b3, #f7ce71); }
.home-link { display: inline-block; margin: 1rem auto; padding: .7rem 1rem; color: #151922; background: #c7b4ff; border-radius: 9px; text-decoration: none; font-weight: 700; }
.countdown-number { font-size: clamp(3rem, 10vw, 5rem) !important; font-weight: 800; color: #f3bb70; }
.audio-comparison { max-width: 720px; text-align: left; margin: 1rem auto; padding: 1rem; background: #151822; border: 1px solid #424259; border-radius: 12px; }
.audio-comparison figure { margin: 0 0 .65rem; }
.audio-comparison figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-size: .85rem; }
.audio-comparison canvas { display: block; width: 100%; height: 120px; background: #11182b; }
.comparison-time-axis { display: flex; justify-content: space-between; font-size: .7rem; color: #aeb5c2; }
#comparison-status { min-height: 1rem; font-size: .75rem; margin: .5rem 0 0; }
.round-result-row { display: flex; align-items: center; gap: 1rem; text-align: left; max-width: 680px; margin: .75rem auto; padding: .5rem .75rem; background: #242030; border-radius: 12px; }
.result-avatar { width: 76px; flex: 0 0 76px; }
.round-result-row p { margin: .5rem 0; }
.mic-check { max-width: 580px; margin: 1rem auto; padding: 1rem; text-align: left; border: 1px solid #655279; border-radius: 14px; background: #282235; }
.mic-check h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.mic-check p { font-size: .9rem; }
.mic-check audio { display: block; width: 100%; margin: .85rem 0; }
.mic-check-confirm { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.mic-check-confirm input { width: auto; accent-color: #cfb8ef; }
.mic-check.is-complete { border-color: #77d5b3; }
.round-result-copy { flex: 1; min-width: 0; }
.round-result-copy .score-breakdown { font-size: .85rem; color: #cfbddf; }
.settings-group { min-width: 0; margin: 1rem 0; padding: .9rem; border: 1px solid #51445f; border-radius: 12px; }
.settings-group legend { padding: 0 .35rem; font-weight: 700; }
.settings-checkbox { display: flex; align-items: center; gap: .65rem; }
.settings-checkbox input[type=checkbox] { width: auto; flex: 0 0 auto; accent-color: #cfb8ef; }
@media (max-width: 640px) {
  .character-editor { grid-template-columns: 1fr; gap: 1rem; }
  .character-preview { position: static; width: 160px; margin: 0 auto; padding: .5rem; }
  .character-preview .character-avatar { max-height: 210px; }
  .character-profile-heading { align-items: start; }
  .character-name-field { width: 65%; }
  .character-wheel-panel { grid-template-columns: 140px 1fr; gap: .75rem; }
  .character-color-wheel { width: 140px; }
  .score-row { grid-template-columns: 20px 36px 1fr auto; gap: .5rem; font-size: .8rem; }
  .score-row > .muted { display: none; }
  .score-row .player-avatar { width: 36px; height: 48px; }
  .stage-heading { align-items: start; }
  .stage-heading .muted { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-player { transition: none; }
  .stage-microphone svg { animation: none; }
}
.result-controls { margin-top: 1.5rem; }
.result-controls button { width: 100%; }