:root { color-scheme: dark; font: 17px/1.6 system-ui, sans-serif; background: #10151c; color: #e7ecf2; }
body { margin: 0; }
main { max-width: 900px; padding: 32px 24px 72px; margin: auto; }
h1 { line-height: 1.25; }
a { color: #a4eccd; }
.eyebrow { color: #a4eccd; font-size: .8rem; letter-spacing: .15em; }
.flash { color: #ffafaf; margin: 20px auto; max-width: 900px; }
section { border-top: 1px solid #374455; padding: 20px 0; }
button, input, select, textarea { font: inherit; border: 1px solid #738298; border-radius: 6px; background: #1d2835; color: inherit; padding: 10px 14px; }
button { cursor: pointer; }
button:hover { background: #34475a; }
button:disabled { opacity: .5; cursor: wait; }
textarea { box-sizing: border-box; width: 100%; font: 15px/1.6 monospace; }
label { display: block; margin: 12px 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.6 monospace; }
.danger { background: #652936; border-color: #ff9cae; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; }
.nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nav form { margin-left: auto; }
.screen h1 { font-size: clamp(1.6rem, 3vw, 2.8rem); margin: .5em 0; }
.screen pre { font-size: clamp(1rem, 1.5vw, 1.5rem); }
.muted { color: #aeb9c6; }
.room-heading, .join { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.room-heading h2 { margin-right: auto; }
#connection-status { color: #a4eccd; }
#comments { list-style: none; padding: 0; }
#comments li { padding: 12px 0; border-bottom: 1px solid #374455; display: flex; align-items: start; gap: 12px; }
#comments li p { white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; min-width: 0; margin: 0; }
#comments li button { font-size: .8rem; flex-shrink: 0; }
.reaction-button { font-size: 1.5rem; }
#live-reactions { display: flex; align-items: center; overflow: hidden; height: 76px; gap: 12px; }
.live-reaction { font-size: 2.5rem; animation: reaction-arrive 250ms ease-out; }
@keyframes reaction-arrive { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .live-reaction { animation: none; } }
.join { margin: 24px 0; }
.join a { overflow-wrap: anywhere; }
.qr { width: 176px; flex-shrink: 0; background: white; border-radius: 8px; padding: 8px; }
.qr svg { display: block; width: 100%; height: auto; }
.screen { max-width: 1800px; }
.screen #comments { font-size: 1.15rem; max-height: 420px; overflow-y: auto; }
@media (min-width: 1000px) {
  .screen { padding-top: 16px; }
  .screen-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .screen-score pre { max-height: calc(100vh - 230px); overflow-y: auto; }
  .screen-sidebar .join { margin: 0 0 16px; gap: 16px; flex-wrap: nowrap; }
  .screen-sidebar .join > div:last-child { min-width: 0; }
  .screen-sidebar .join h2 { font-size: 1.1rem; }
  .screen-sidebar .join p, .screen-sidebar .join a { font-size: .8rem; }
  .screen-sidebar .qr { width: 124px; }
  .screen-sidebar section { padding: 0; }
  .screen-sidebar h2 { font-size: 1.3rem; }
  .screen-sidebar #submissions-status { margin: 0; }
  .screen #comments { max-height: calc(100vh - 470px); min-height: 80px; }
}