@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Bungee&display=swap');
:root {
  --paper:oklch(96% .03 90);
  --ink:oklch(25% .045 320);
  --muted:oklch(47% .03 320);
  --red:oklch(56% .18 28);
  --yellow:oklch(87% .15 86);
  --green:oklch(84% .10 153);
  --pink:oklch(86% .07 10);
  --line:oklch(82% .025 90);
  --surface:oklch(98% .015 90);
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  font-family:'Archivo',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select {
  font:inherit;
  color:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  min-height:48px;
  border:2px solid var(--ink);
  background:var(--surface);
  padding:12px 20px;
  font-weight:800;
  border-radius:8px;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
}

button:hover:not(:disabled) {
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}

button:active:not(:disabled) {
  transform:translate(3px,3px);
  box-shadow:none;
}

button:disabled {
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}

button.primary {
  background:var(--yellow);
}

button.positive {
  background:var(--green);
}

button.negative {
  background:var(--pink);
}

button.quiet {
  box-shadow:none;
  border:1px solid var(--line);
  background:transparent;
  font-weight:600;
}

a {
  color:inherit;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--red);
  outline-offset:5px;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,.display {
  font-family:'Bungee',sans-serif;
  font-weight:400;
}

h2 {
  font-size:1.5rem;
  line-height:1.4;
}

h3 {
  font-size:1rem;
}

p {
  line-height:1.6;
  max-width:65ch;
}

.muted {
  color:var(--muted);
}

.eyebrow {
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.topbar {
  max-width:1248px;
  margin:auto;
  padding:24px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:16px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-family:'Bungee',sans-serif;
  font-size:1rem;
  line-height:1.1;
}

.brand small {
  display:block;
  font-family:'Archivo',sans-serif;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.2em;
  margin-top:5px;
}

.brand-mark {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:50%;
  font-size:1.7rem;
  box-shadow:2px 2px 0 var(--ink);
}

.edition {
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
}

.loading {
  padding:64px;
}

main {
  max-width:1184px;
  margin:auto;
  padding:40px 32px 64px;
}

footer {
  border-top:1px solid var(--line);
  max-width:1184px;
  margin:auto;
  padding:24px 32px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--muted);
}

.landing {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  align-items:center;
  padding:40px 0 64px;
}

.hero-title {
  font-size:4.5rem;
  line-height:1.06;
  margin:24px 0;
}

.hero-title span {
  color:var(--red);
}

.hero-copy {
  font-size:1.125rem;
  max-width:34ch;
}

.hero-actions {
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:32px;
}

.hero-actions button {
  padding:16px 28px;
}

.sticker {
  display:inline-block;
  background:var(--green);
  padding:8px 12px;
  border:1px solid var(--ink);
  transform:rotate(-3deg);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.05em;
}

.record-art {
  aspect-ratio:1;
  position:relative;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:48% 48% 8px 8px;
  display:grid;
  place-items:center;
  box-shadow:8px 8px 0 var(--ink);
}

.vinyl {
  width:76%;
  aspect-ratio:1;
  border-radius:50%;
  background:repeating-radial-gradient(circle,var(--ink) 0 6px,oklch(34% .035 320) 7px,var(--ink) 8px);
  display:grid;
  place-items:center;
  transform:rotate(-14deg);
}

.vinyl-label {
  width:43%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--red);
  border:2px solid var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  font-family:'Bungee',sans-serif;
  font-size:1.3rem;
}

.vinyl-label small {
  font-family:'Archivo',sans-serif;
  font-size:.55rem;
  letter-spacing:.15em;
}

.art-caption {
  position:absolute;
  bottom:20px;
  left:24px;
  font-weight:800;
  font-size:.7rem;
  letter-spacing:.12em;
}

.star {
  position:absolute;
  top:0;
  right:-12px;
  font-size:5rem;
  color:var(--red);
  text-shadow:2px 2px var(--ink);
}

.steps {
  border-top:2px solid var(--ink);
  padding-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.step {
  display:flex;
  gap:16px;
}

.step-number {
  font-family:'Bungee',sans-serif;
  font-size:1.5rem;
  color:var(--red);
}

.step p {
  font-size:.875rem;
  margin-top:6px;
}

.join-layout {
  max-width:520px;
  margin:32px auto 64px;
}

.join-layout h1 {
  font-size:2.5rem;
  line-height:1.15;
  margin:20px 0;
}

.join-layout form {
  display:grid;
  gap:20px;
  margin-top:32px;
}

.field {
  display:grid;
  gap:8px;
  font-size:.875rem;
  font-weight:700;
}

input,select {
  width:100%;
  border:2px solid var(--ink);
  border-radius:6px;
  min-height:48px;
  padding:12px;
  background:var(--surface);
}

.small-input {
  max-width:110px;
}

.room-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:28px;
}

.room-heading h1 {
  font-size:2rem;
  line-height:1.3;
  margin-top:8px;
}

.connection {
  font-size:.75rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:8px;
}

.connection::before {
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:oklch(50% .12 153);
}

.connection.offline::before {
  background:var(--red);
}

.room-code {
  font-size:.75rem;
  font-weight:600;
  color:var(--muted);
  margin-top:8px;
}

.round-tag {
  display:inline-flex;
  background:var(--yellow);
  border:2px solid var(--ink);
  padding:8px 14px;
  border-radius:6px;
  font-family:'Bungee',sans-serif;
  font-size:1.125rem;
  transform:rotate(-2deg);
}

.game-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:32px;
  align-items:start;
}

.console {
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--surface);
  box-shadow:5px 5px 0 var(--ink);
  overflow:hidden;
}

.console-top {
  padding:16px 24px;
  border-bottom:2px solid var(--ink);
  background:var(--yellow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.console-top .eyebrow {
  letter-spacing:.06em;
}

.console-body {
  padding:24px;
  display:grid;
  gap:24px;
}

.status-copy {
  font-size:1.125rem;
  font-weight:800;
}

.action-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.action-row button {
  flex:1;
  white-space:nowrap;
}

.divider {
  height:1px;
  background:var(--line);
}

.turn-stage {
  padding:24px 0;
  text-align:center;
  min-height:158px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.turn-stage .turn-name {
  font-family:'Bungee',sans-serif;
  font-size:2rem;
  overflow-wrap:anywhere;
}

.turn-stage .turn-caption {
  font-size:.875rem;
  color:var(--muted);
}

.turn-stage.win {
  background:var(--green);
  border:1px solid var(--ink);
  border-radius:8px;
  padding:24px 12px;
}

.settings {
  display:flex;
  gap:16px;
  align-items:end;
  flex-wrap:wrap;
}

.settings .field {
  flex:1;
  min-width:100px;
}

.settings button {
  flex:1;
}

.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.section-title h2 {
  font-size:1.125rem;
}

.count {
  border:1px solid var(--ink);
  border-radius:50%;
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  font-size:.75rem;
  font-weight:800;
}

.sidebar {
  display:grid;
  gap:32px;
}

.ranking,.queue {
  list-style:none;
  margin:0;
  padding:0;
}

.ranking li,.queue li {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.ranking li:first-child {
  border-top:2px solid var(--ink);
}

.rank-number {
  width:26px;
  flex:none;
  font-weight:800;
  font-size:.875rem;
  color:var(--muted);
}

.player-info {
  flex:1;
  min-width:0;
}

.player-name {
  font-weight:800;
  overflow-wrap:anywhere;
}

.player-meta {
  font-size:.7rem;
  color:var(--muted);
  margin-top:4px;
}

.score {
  font-family:'Bungee',sans-serif;
  font-size:1.25rem;
  white-space:nowrap;
}

.score small {
  font-family:'Archivo',sans-serif;
  font-size:.65rem;
  font-weight:500;
}

.you {
  display:inline-block;
  margin-left:6px;
  padding:3px 5px;
  background:var(--yellow);
  border-radius:3px;
  font-size:.6rem;
  font-weight:800;
  vertical-align:middle;
}

.queue-position {
  border:1px solid var(--ink);
  border-radius:6px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-weight:800;
}

.queue li.active .queue-position {
  background:var(--yellow);
}

.queue .result {
  font-size:.7rem;
  font-weight:800;
}

.empty {
  border-top:1px dashed var(--line);
  padding:20px 0;
  color:var(--muted);
  font-size:.875rem;
}

.invite {
  display:grid;
  gap:12px;
}

.invite input {
  font-size:.75rem;
  min-width:0;
}

.invite-row {
  display:flex;
  gap:8px;
}

.invite-row button {
  white-space:nowrap;
  box-shadow:none;
}

.private-link {
  font-size:.75rem;
  color:var(--muted);
}

details {
  border-top:1px solid var(--line);
  padding-top:16px;
}

summary {
  cursor:pointer;
  font-size:.875rem;
  font-weight:700;
  min-height:32px;
}

details form {
  display:grid;
  gap:12px;
  margin-top:12px;
}

.finish-row {
  margin-top:24px;
  text-align:right;
}

.finish-confirm {
  margin-top:20px;
  padding:20px;
  background:var(--pink);
  border:2px solid var(--ink);
  border-radius:8px;
  display:grid;
  gap:16px;
}

.player-console {
  text-align:center;
}

.player-console .console-top {
  background:var(--pink);
}

.buzz-area {
  height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.buzzer {
  width:220px;
  height:220px;
  flex:none;
  border:4px solid var(--ink);
  border-radius:50%;
  background:var(--red);
  color:var(--paper);
  box-shadow:0 10px 0 var(--ink),inset 0 0 0 8px oklch(72% .14 28);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  touch-action:manipulation;
}

.buzzer:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 12px 0 var(--ink),inset 0 0 0 8px oklch(72% .14 28);
}

.buzzer:active:not(:disabled) {
  transform:translateY(8px);
  box-shadow:0 2px 0 var(--ink);
}

.buzzer:disabled {
  opacity:1;
  background:var(--line);
  color:var(--muted);
  box-shadow:0 8px 0 var(--ink),inset 0 0 0 8px var(--paper);
}

.buzzer strong {
  font-family:'Bungee',sans-serif;
  font-size:1.8rem;
}

.buzzer small {
  font-size:.65rem;
  letter-spacing:.12em;
}

.player-message {
  min-height:64px;
  display:grid;
  align-content:center;
  gap:6px;
}

.player-message strong {
  font-size:1.125rem;
}

.player-message p {
  font-size:.875rem;
  margin:auto;
}

.own-score {
  padding:12px 16px;
  background:var(--green);
  border:1px solid var(--ink);
  border-radius:6px;
  text-align:right;
}

.own-score small {
  display:block;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.08em;
}

.own-score strong {
  font-family:'Bungee',sans-serif;
  font-size:1.5rem;
}

.finale {
  text-align:center;
  padding:32px 0 48px;
  display:grid;
  justify-items:center;
  gap:16px;
}

.finale h1 {
  font-size:3rem;
  line-height:1.2;
}

.finale .winner-name {
  font-family:'Bungee',sans-serif;
  font-size:2rem;
  color:var(--red);
  overflow-wrap:anywhere;
  max-width:100%;
}

.finale .medal {
  font-size:4rem;
  color:var(--red);
}

.final-rank {
  max-width:640px;
  margin:auto;
}

.notice {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  background:var(--ink);
  color:var(--paper);
  padding:16px 24px;
  border-radius:8px;
  z-index:10;
  font-size:.875rem;
  box-shadow:3px 3px 0 var(--red);
}

[hidden] {
  display:none!important;
}

.banner {
  padding:12px 16px;
  background:var(--yellow);
  border:1px solid var(--ink);
  font-size:.875rem;
  margin-bottom:20px;
  border-radius:6px;
}

.queue-section {
  margin-top:32px;
}

.on-air {
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
}

.on-air::before {
  content:'●';
  color:var(--red);
  margin-right:6px;
}

.hint {
  font-size:.75rem;
  color:var(--muted);
}

@media(max-width:800px) {
  .landing {
    gap:32px;
  }
  .hero-title {
    font-size:3rem;
  }
  .game-grid {
    grid-template-columns:1fr;
  }
  .sidebar {
    grid-template-columns:1fr 1fr;
  }
  .game-grid.player-grid .sidebar {
    grid-template-columns:1fr;
  }
  .record-art {
    box-shadow:5px 5px 0 var(--ink);
  }
  .vinyl-label {
    font-size:.9rem;
  }
  .steps {
    gap:16px;
  }
  .step {
    gap:8px;
  }
}

@media(max-width:560px) {
  .topbar {
    padding:20px;
  }
  .edition {
    font-size:.55rem;
    max-width:70px;
    text-align:right;
    line-height:1.6;
  }
  main {
    padding:28px 20px 40px;
  }
  .landing {
    grid-template-columns:1fr;
    padding:8px 0 40px;
    gap:40px;
  }
  .hero-title {
    font-size:clamp(2.2rem,11vw,3.2rem);
  }
  .hero-copy {
    font-size:1rem;
  }
  .hero-actions button {
    width:100%;
  }
  .record-art {
    max-width:300px;
    width:100%;
    justify-self:center;
  }
  .steps {
    grid-template-columns:1fr;
    gap:24px;
  }
  .room-heading {
    gap:12px;
  }
  .room-heading h1 {
    font-size:1.5rem;
  }
  .connection {
    font-size:.65rem;
  }
  .console-top {
    padding:14px 16px;
  }
  .console-body {
    padding:20px 16px;
  }
  .sidebar {
    grid-template-columns:1fr;
  }
  .invite-row {
    flex-wrap:wrap;
  }
  .invite-row input {
    flex:1 1 100%;
  }
  .invite-row button {
    width:100%;
  }
  .round-tag {
    font-size:1rem;
  }
  .action-row button {
    font-size:.875rem;
    padding:12px;
  }
  .buzzer {
    width:210px;
    height:210px;
  }
  .buzz-area {
    height:310px;
  }
  .finale h1 {
    font-size:2rem;
  }
  footer {
    padding:24px 20px;
    font-size:.55rem;
  }
  .join-layout h1 {
    font-size:2rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.hero-actions + .hint {
  margin-top:12px;
}

textarea {
  width: 100%;
  min-height: 144px;
  resize: vertical;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 5px;
}
.rules-form { display: grid; grid-template-columns: 1fr 1fr; }
.rules-form .target-field, .rules-form .hint, .rules-form button { grid-column: 1 / -1; }
.song-picker { display: grid; gap: 12px; }
.private-song { display: grid; gap: 8px; overflow-wrap: anywhere; }
.song-reveal { padding: 20px; border: 2px solid var(--ink); border-radius: 8px; background: var(--green); display: grid; gap: 8px; }
.song-reveal h2 { overflow-wrap: anywhere; font-size: 1.5rem; }
.goal-tag { font-size: .75rem; font-weight: 800; margin-top: 8px; }
.playlist-panel { min-width: 0; }
.playlist-panel summary { min-height: 44px; }
.spotify-link { display: inline-flex; min-height: 48px; align-items: center; gap: 8px; font-weight: 700; font-size: .875rem; }
.auto-finish { display: grid; gap: 12px; margin: 24px 0; }
.quick-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.game-grid > *, .field, .song-picker, input, select { min-width: 0; }
@media (max-width: 560px) {
  input, select, textarea { font-size: 16px; }
  .room-heading { margin-bottom: 20px; }
  .round-tag { white-space: nowrap; font-size: .875rem; }
  .room-heading .eyebrow { font-size: .625rem; }
  .player-console .console-body { gap: 12px; padding: 16px; }
  .player-console .console-top { padding: 12px 16px; }
  .buzz-area { height: 244px; gap: 20px; }
  .buzzer { width: 184px; height: 184px; }
  .buzzer strong { font-size: 1.5rem; }
  .player-message { min-height: 60px; }
  .own-score { padding: 8px 12px; }
  .turn-stage { min-height: 110px; padding: 12px 0; }
  .action-row { display: grid; grid-template-columns: 1fr 1fr; }
  .action-row button { white-space: normal; min-height: 48px; }
  .song-reveal { padding: 16px; }
  .song-reveal h2 { font-size: 1.25rem; }
}