/* Same system as the site root: Inter, warm off-white ground, small quiet type, hairline dividers.
   This page adds the game's own palette (sun, coral, blue, mint on ink) in a few blocky pieces
   with hard shadows, the way the app itself is drawn. */
:root {
  --background: #fafaf9;
  --foreground: #1a1a18;
  --muted-foreground: #888882;
  --border: rgb(0 0 0 / 10%);
  --ink: #151515;
  --paper: #f7f3e8;
  --sun: #ffd84a;
  --coral: #ff5c4d;
  --blue: #64a6ff;
  --mint: #8ed8bc;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 42rem; margin: 0 auto; padding: 5rem 1.5rem; }
h1 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; margin: 0; }
h2 { font-size: 0.875rem; font-weight: 500; margin: 0 0 0.75rem; }
p { margin: 0 0 0.75rem; color: rgb(26 26 24 / 80%); }
.muted { color: var(--muted-foreground); font-size: 0.75rem; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
section { margin-bottom: 0.5rem; }
a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #e5e5e5;
  transition: text-decoration-color 150ms;
}
a:hover { text-decoration-color: currentColor; }
nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; }
p code { background: rgb(0 0 0 / 5%); padding: 0.1em 0.35em; border-radius: 0.3rem; }

/* Header with the app icon */
.app { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.25rem; }
.app .muted { line-height: 1.4; }
.app img { width: 3rem; height: 3rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }

/* The fun part: the three moves of the game as three blocks, drawn the way the app draws them. */
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1.75rem 0 0.75rem; padding: 0 0.35rem 0.35rem 0; }
.moves div {
  position: relative; padding: 0.8rem 0.9rem 0.85rem; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0.35rem; box-shadow: 5px 5px 0 var(--ink);
  transition: transform 150ms, box-shadow 150ms;
}
.moves div:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.moves .song { background: var(--blue); }
.moves .react { background: var(--sun); }
.moves .skip { background: var(--coral); }
.moves i { position: absolute; top: 0.6rem; right: 0.8rem; font-style: normal; font-size: 1.15rem; line-height: 1; }
.moves small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.65rem; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 1.6rem; }
.moves b { display: block; font-weight: 600; font-size: 0.85rem; line-height: 1.3; margin-bottom: 0.2rem; }
.moves span { display: block; font-size: 0.72rem; line-height: 1.45; color: rgb(21 21 21 / 80%); }
@media (max-width: 560px) {
  .moves { grid-template-columns: 1fr; gap: 0.8rem; }
  .moves small { margin-bottom: 0.6rem; }
}

/* One accent button, in the game's sun yellow with its hard shadow */
.store {
  display: inline-block; margin-top: 0.75rem; padding: 0.6rem 1.1rem;
  background: var(--sun); color: var(--ink); font-weight: 600; font-size: 0.875rem;
  border: 2px solid var(--ink); border-radius: 0.35rem; text-decoration: none; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms, box-shadow 120ms;
}
.store:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.store + .store { margin-left: 0.6rem; background: #fff; }

/* Feature list */
ul.features { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.35rem; }
ul.features li { color: rgb(26 26 24 / 80%); padding-left: 1.25rem; position: relative; }
ul.features li::before { content: "♪"; position: absolute; left: 0.1rem; color: var(--coral); font-weight: 600; }
ul.features li:nth-child(4n+2)::before { color: #e0b400; }
ul.features li:nth-child(4n+3)::before { color: var(--blue); }
ul.features li:nth-child(4n)::before { color: #3fb489; }

/* A song's life: the guest's two buttons and the boo meter, as they look on the phone */
.vote { margin: 0 0 0.75rem; border: 2px solid var(--ink); border-radius: 0.35rem; box-shadow: 5px 5px 0 var(--ink); background: var(--paper); overflow: hidden; }
.vote .now { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 2px solid var(--ink); }
.vote .now .art { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 0.3rem; border: 2px solid var(--ink); background: #fff; display: grid; place-items: center; }
.vote .now .art svg { width: 1.5rem; height: 1.5rem; }
.vote .now b { display: block; font-weight: 600; font-size: 0.85rem; line-height: 1.25; color: var(--ink); }
.vote .now span { display: block; font-size: 0.7rem; color: rgb(21 21 21 / 65%); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }
.vote .buttons { display: grid; grid-template-columns: 1fr 1fr; }
.vote .buttons div { padding: 0.7rem 0.9rem 0.75rem; color: var(--ink); }
.vote .buttons div:first-child { background: var(--sun); border-right: 2px solid var(--ink); }
.vote .buttons div:last-child { background: var(--coral); }
.vote .buttons i { font-style: normal; font-size: 1.3rem; line-height: 1; vertical-align: -0.15em; margin-right: 0.45rem; }
.vote .buttons b { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; line-height: 1.2; }
.vote .buttons small { display: block; margin-top: 0.2rem; font-size: 0.68rem; font-weight: 500; opacity: 0.8; line-height: 1.35; }
.vote .meter { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-top: 2px solid var(--ink); background: #fff; font-size: 0.72rem; color: var(--ink); }
.vote .meter b { font-weight: 600; letter-spacing: 0.08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.65rem; }
.vote .meter span { color: rgb(21 21 21 / 65%); }
.vote .meter .boxes { margin-left: auto; display: flex; gap: 0.3rem; }
.vote .meter .boxes i { width: 0.8rem; height: 0.8rem; border: 2px solid var(--ink); display: block; }
.vote .meter .boxes i.on { background: var(--coral); }

/* Rules the server enforces: a small grid of numbers */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0 0 0.75rem; }
.rules div { border: 2px solid var(--ink); border-radius: 0.35rem; padding: 0.6rem 0.8rem; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.rules .sun { background: var(--sun); }
.rules .mint { background: var(--mint); }
.rules .blue { background: var(--blue); }
.rules .coral { background: var(--coral); }
.rules b { display: block; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.rules span { color: rgb(21 21 21 / 70%); font-size: 0.72rem; line-height: 1.4; display: block; }
@media (max-width: 480px) { .rules { grid-template-columns: 1fr 1fr; } }

/* Inline tags: a small colored chip around a word, with a mark where there is one */
.tag {
  display: inline-flex; align-items: center; gap: 0.3em; vertical-align: baseline;
  padding: 0.05em 0.5em 0.05em 0.4em; border-radius: 999px; border: 1.5px solid var(--ink);
  font-size: 0.8em; font-weight: 600; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.tag svg { width: 1em; height: 1em; flex: none; }
.tag.spotify { background: #e3f6ea; }
.tag.youtube { background: #fde4e4; }
.tag.cheer, .tag.order { background: var(--sun); }
.tag.boo, .tag.chaos { background: var(--coral); }
.tag.fair, .tag.hall { background: var(--mint); }
.tag.lobby, .tag.shield { background: var(--blue); }

/* Mocks: small drawings of the app's screens, in its own blocky style. The .vote block above is one of them. */
.mock { margin: 0 0 0.75rem; border: 2px solid var(--ink); border-radius: 0.35rem; box-shadow: 5px 5px 0 var(--ink); background: var(--paper); overflow: hidden; color: var(--ink); }
.mock small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.62rem; letter-spacing: 0.1em; font-weight: 600; color: rgb(21 21 21 / 70%); }
.mock .btn {
  display: block; padding: 0.4rem 0.7rem; border: 2px solid var(--ink); border-radius: 0.3rem; background: #fff;
  font-size: 0.75rem; font-weight: 600; text-align: center; box-shadow: 2px 2px 0 var(--ink); line-height: 1.4;
}
.mock .btn em { font-style: normal; font-weight: 500; color: rgb(21 21 21 / 65%); }
.mock .btn.blue { background: var(--blue); }
.mock .btn.sun { background: var(--sun); }
.mock .btn.mint { background: var(--mint); }
.mock .btn.coral { background: var(--coral); }
.av { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--ink); font-style: normal; font-weight: 700; font-size: 0.65rem; flex: none; }
.av.sun { background: var(--sun); } .av.coral { background: var(--coral); } .av.blue { background: var(--blue); } .av.mint { background: var(--mint); }

/* The invite card: code, passcode, QR, and the lobby strip under it */
.invite { display: grid; grid-template-columns: 1fr auto; background: var(--sun); }
.invite .code { padding: 0.9rem 1rem; }
.invite .code > b { display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: 0.18em; line-height: 1.1; margin: 0.1rem 0 0.6rem; }
.invite .pass { display: inline-block; background: #fff; border: 2px solid var(--ink); border-radius: 0.3rem; padding: 0.4rem 0.7rem; box-shadow: 2px 2px 0 var(--ink); margin-bottom: 0.7rem; }
.invite .pass b { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; letter-spacing: 0.2em; font-weight: 700; }
.invite .pass span { display: block; font-size: 0.62rem; color: rgb(21 21 21 / 70%); }
.invite .btns { display: flex; gap: 0.5rem; }
.invite .btns .btn { display: inline-block; }
.invite .qr { align-self: center; margin: 0.9rem 1rem; display: grid; grid-template-columns: repeat(18, 0.3rem); gap: 0; padding: 0.35rem; background: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.invite .qr i { width: 0.3rem; height: 0.3rem; display: block; }
.invite .qr i.on { background: var(--ink); }
.invite .lobby { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 1rem; background: #fff; border-top: 2px solid var(--ink); }
.invite .lobby > div:first-child { flex: 1 1 12rem; }
.invite .lobby b { display: block; font-weight: 600; font-size: 0.85rem; }
.invite .lobby span:not(.btn) { display: block; font-size: 0.7rem; color: rgb(21 21 21 / 65%); }
.invite .lobby .count { font-size: 0.75rem; }
.invite .lobby .count b { display: inline; font-weight: 700; }
@media (max-width: 480px) { .invite { grid-template-columns: 1fr; } .invite .qr { display: none; } }

/* The host's controls and the queue mode picker */
.host { display: grid; grid-template-columns: 1fr 1.2fr; }
.host .controls { padding: 0.8rem 0.9rem; display: grid; gap: 0.45rem; align-content: start; border-right: 2px solid var(--ink); background: #fff; }
.host .modes { padding: 0.8rem 0.9rem; display: grid; gap: 0.45rem; align-content: start; }
.host .modes > div { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 2px solid var(--ink); border-radius: 0.3rem; background: #fff; box-shadow: 2px 2px 0 var(--ink); }
.host .modes > div.on { background: var(--sun); }
.host .modes i { font-style: normal; font-size: 1.1rem; }
.host .modes b { display: block; font-weight: 600; font-size: 0.75rem; }
.host .modes span { display: block; font-size: 0.65rem; color: rgb(21 21 21 / 65%); }
.host .modes em { margin-left: auto; font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; border: 1.5px solid var(--ink); padding: 0.1rem 0.35rem; background: #fff; white-space: nowrap; }
@media (max-width: 560px) { .host { grid-template-columns: 1fr; } .host .controls { border-right: 0; border-bottom: 2px solid var(--ink); } }

/* Power-ups and the guess row */
.powers { display: grid; grid-template-columns: 1fr 1fr; }
.powers .power { padding: 0.8rem 0.9rem; border-bottom: 2px solid var(--ink); }
.powers .power.blue { background: var(--blue); border-right: 2px solid var(--ink); }
.powers .power.sun { background: var(--sun); }
.powers .power i { font-style: normal; font-size: 1.3rem; display: block; margin-bottom: 0.2rem; }
.powers .power b { display: block; font-weight: 700; font-size: 0.85rem; }
.powers .power span { display: block; font-size: 0.68rem; color: rgb(21 21 21 / 70%); }
.powers .guess { grid-column: 1 / -1; padding: 0.8rem 0.9rem; background: var(--mint); }
.powers .people { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.45rem 0; }
.powers .people span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem 0.25rem 0.3rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 0.75rem; font-weight: 600; box-shadow: 2px 2px 0 var(--ink); }
.powers .people span.picked { background: var(--sun); }
.powers .note { display: block; font-size: 0.68rem; color: rgb(21 21 21 / 70%); }
@media (max-width: 480px) { .powers { grid-template-columns: 1fr; } .powers .power.blue { border-right: 0; } }

/* The Hall of Fame: stat tiles, a podium, and the awards */
.hall .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; padding: 0.8rem 0.9rem 0; }
.hall .stats div { border: 2px solid var(--ink); border-radius: 0.3rem; padding: 0.4rem 0.55rem; background: #fff; box-shadow: 2px 2px 0 var(--ink); }
.hall .stats b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.hall .stats span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.55rem; letter-spacing: 0.08em; font-weight: 600; color: rgb(21 21 21 / 70%); }
.hall .stats .sun { background: var(--sun); } .hall .stats .blue { background: var(--blue); } .hall .stats .mint { background: var(--mint); } .hall .stats .coral { background: var(--coral); }
.hall .podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; align-items: end; padding: 0.9rem 0.9rem 0.8rem; }
.hall .podium div { text-align: center; border: 2px solid var(--ink); border-radius: 0.3rem; padding: 0.6rem 0.4rem 0.5rem; box-shadow: 3px 3px 0 var(--ink); }
.hall .podium .first { padding-top: 1.1rem; padding-bottom: 0.9rem; }
.hall .podium .blue { background: var(--blue); } .hall .podium .sun { background: var(--sun); } .hall .podium .mint { background: var(--mint); }
.hall .podium .av { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; margin-bottom: 0.25rem; }
.hall .podium b { display: block; font-weight: 700; font-size: 0.8rem; }
.hall .podium span { display: block; font-size: 0.7rem; font-weight: 600; }
.hall .podium em { display: block; font-style: normal; font-size: 0.85rem; margin-top: 0.15rem; }
.hall .awards { list-style: none; margin: 0; padding: 0.8rem 0.9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; background: #fff; border-top: 2px solid var(--ink); }
.hall .awards li { display: flex; align-items: center; gap: 0.6rem; border: 2px solid var(--ink); border-radius: 0.3rem; padding: 0.45rem 0.6rem; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.hall .awards i { font-style: normal; font-size: 1.3rem; }
.hall .awards b { display: block; font-weight: 700; font-size: 0.75rem; }
.hall .awards span { display: block; font-size: 0.65rem; color: rgb(21 21 21 / 70%); line-height: 1.35; }
@media (max-width: 560px) {
  .hall .stats { grid-template-columns: repeat(3, 1fr); }
  .hall .stats div:nth-child(n+4) { display: none; }
  .hall .awards { grid-template-columns: 1fr; }
}

/* Backstage: totals, a month of bars, and a few traffic rows */
.backstage .totals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; padding: 0.8rem 0.9rem; background: var(--ink); }
.backstage .totals div { border: 2px solid var(--ink); border-radius: 0.3rem; padding: 0.4rem 0.55rem; background: var(--paper); }
.backstage .totals .live { background: var(--mint); }
.backstage .totals b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.backstage .totals span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.55rem; letter-spacing: 0.08em; font-weight: 600; color: rgb(21 21 21 / 70%); }
.backstage .pulse { padding: 0.8rem 0.9rem 0.6rem; }
.backstage .bars { display: flex; align-items: flex-end; gap: 3px; height: 4.5rem; margin: 0.5rem 0 0.35rem; border-bottom: 2px solid var(--ink); }
.backstage .bars i { flex: 1 1 0; height: var(--h); background: var(--sun); border: 1.5px solid var(--ink); border-bottom: 0; position: relative; }
.backstage .bars i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--coral); }
.backstage .legend { font-size: 0.65rem; color: rgb(21 21 21 / 70%); }
.backstage .legend em { display: inline-block; width: 0.6rem; height: 0.6rem; border: 1.5px solid var(--ink); vertical-align: -0.05em; margin-right: 0.2rem; }
.backstage .legend em.sun { background: var(--sun); } .backstage .legend em.coral { background: var(--coral); }
.backstage .traffic { padding: 0.7rem 0.9rem 0.8rem; background: #fff; border-top: 2px solid var(--ink); }
.backstage .rows { display: grid; gap: 0.3rem; margin-top: 0.45rem; }
.backstage .rows div { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; align-items: center; gap: 0.5rem; font-size: 0.7rem; }
.backstage .rows span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.65rem; }
.backstage .rows i { display: block; height: 0.7rem; width: var(--w); background: var(--blue); border: 1.5px solid var(--ink); }
.backstage .rows b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .backstage .totals { grid-template-columns: repeat(3, 1fr); } .backstage .totals div:nth-child(n+4) { display: none; } }

/* Room noise: the live feed of songs, cheers and boos */
.noise .head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; border-bottom: 2px solid var(--ink); background: #fff; }
.noise .row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.9rem; font-size: 0.75rem; border-bottom: 1.5px solid rgb(21 21 21 / 15%); background: var(--paper); }
.noise .row p { margin: 0; color: var(--ink); line-height: 1.4; }
.noise .row b { font-weight: 600; }
.noise .row em { font-style: normal; font-size: 0.85rem; }
.noise .row time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6rem; color: rgb(21 21 21 / 55%); white-space: nowrap; }
.noise .row .av { background: #fff; }
.noise .row.now { background: var(--sun); }
.noise .row.up { background: #fff7d6; }
.noise .row.down { background: #ffe4e0; }
.noise .row.down.unmasked { background: var(--coral); }
.noise .row.song:not(.now) { background: #fff; color: rgb(21 21 21 / 70%); }
.noise .foot { padding: 0.55rem 0.9rem; font-size: 0.68rem; color: rgb(21 21 21 / 70%); background: #fff; border-top: 2px solid var(--ink); }
@media (max-width: 480px) { .noise .row time { display: none; } .noise .row { grid-template-columns: auto 1fr auto; } }
.noise .sep { padding: 0.35rem 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.58rem; letter-spacing: 0.1em; font-weight: 600; color: rgb(21 21 21 / 60%); background: #fff; border-bottom: 1.5px solid rgb(21 21 21 / 15%); }