:root {color-scheme:dark;font:17px/1.5 system-ui,sans-serif;color:#fff5e7;background:#591329}
* {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#b42841,#591329 62%);}
main {max-width:42rem;margin:auto;padding:1rem 1.1rem 3rem}
header {border-bottom:1px solid #d6a34b;padding:.5rem 0;text-align:center;font:bold 2.1rem Georgia,serif}
a {color:#ffe1a0;text-underline-offset:4px}
header a {text-decoration:none}
h1,h2 {font-family:Georgia,serif;line-height:1.15;margin:.7em 0 .45em}
form, #room {display:grid;gap:1rem}
#entry, #room {background:#72182d;border:1px solid #dcab61;border-radius:16px;padding:1rem}
#entry>a {display:inline-block;margin-top:1rem}
label {display:grid;gap:.4rem}
input,button {min-height:46px;border-radius:9px;font:inherit;padding:.5rem .75rem}
input {border:1px solid #ffd48c;background:#521026;color:#fff}
button {cursor:pointer;border:1px solid #ffdf96;background:#ffe7ae;color:#651229;font-weight:700}
button:disabled {cursor:default;opacity:.62}
button.choice {display:block;width:100%;text-align:left;margin:.5rem 0;color:#fff3e8;background:#551428}
button.choice.correct {background:#1b5942;border-color:#b0e2bc}
button.choice.selected {outline:2px solid #fff2ca;outline-offset:2px}
#notice:empty {display:none}
#notice:not(:empty) {padding:.6rem;border:1px solid #f5bb84;border-radius:8px}
#room p, #room h1, #room h2, #room ol {margin:0}
#room .code {font-size:clamp(1.5rem,7vw,2.3rem);letter-spacing:.12em;color:#ffe1a0}
#room .share {display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
li {overflow-wrap:anywhere}
#room .whatsapp {display:inline-flex;align-items:center;min-height:46px;padding:.5rem .75rem;border-radius:9px;background:#d6f8e2;color:#114e35;font-weight:700;text-decoration:none}


/* Host setup controls are separate from the guest form and room controls. */
.host-setup-controls:has(#quiz-picker:not([hidden])) {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

#quiz-picker {display:grid;gap:.65rem}
#quiz-picker button {
  width:100%;
  min-height:56px;
  padding:.8rem 1rem;
  text-align:left;
  background:linear-gradient(120deg,#ffe7ae,#fff4da);
  box-shadow:0 3px 8px #360a1c55;
}

.host-setup-controls #resume-host {
  background: transparent;
  color: #ffe7ae;
  border-color: #dcab61;
}

#room.host-lobby {margin-top:1rem;gap:1rem}
.host-lobby .lobby-code {
  display:grid;
  gap:.15rem;
  text-align:center;
  padding:.85rem .5rem;
  border-radius:12px;
  background:#521026;
  border:1px solid #b9704f;
}
.host-lobby .lobby-code p {color:#ffe1a0;font-size:.85rem}
#room.host-lobby .code {
  font-family:ui-monospace,monospace;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
#room.host-lobby .share {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));
  gap:.55rem;
  text-align:center;
}
#room.host-lobby .whatsapp {grid-column:1/-1;justify-content:center;gap:.55rem}
.host-lobby .whatsapp img {width:1.25em;height:1.25em}
.host-lobby .share > a:not(.whatsapp) {display:grid;place-items:center;min-height:46px}
.host-lobby .lobby-roster-title {font-size:1.15rem;color:#ffe1a0}
.host-lobby .lobby-roster {display:grid;gap:.35rem;list-style:none;margin:0;padding:0}
.host-lobby .lobby-roster li {padding:.45rem .65rem;border-radius:8px;background:#521026}

.letters-leaderboard {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#521026;
  border-radius:10px;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.letters-leaderboard th, .letters-leaderboard td {padding:.6rem .4rem;text-align:center}
.letters-leaderboard th {background:#ffe7ae;color:#651229;font-size:.8rem}
.letters-leaderboard th:first-child, .letters-leaderboard td:first-child {
  width:50%;
  text-align:left;
  padding-inline-start:.65rem;
  overflow-wrap:anywhere;
}
.letters-leaderboard td {border-bottom:1px solid #dcab6155}
.letters-leaderboard td span {display:block;color:#ffe1a0;font-size:.85rem}

#room .word-timer {
  margin-bottom:.75rem;
  font-variant-numeric:tabular-nums;
}
#room .word-timer-final {
  padding:.65rem;
  border-radius:10px;
  background:#ffe7ae;
  color:#651229;
  font-size:1.3rem;
  font-weight:800;
  text-align:center;
}