:root {
  --navy: #02426D;
  --orange: #D8601E;
  --paper: #F4F1EA;
  --ink: #16120C;
  --red: #D7263D;
  --blue: #1D6FA5;
  --gold: #E3B23C;
  --green: #2E8B57;
  --walnut: #1A1612;
  --lip-navy: #012A46;
  --lip-orange: #8A3C12;
  --lip-red: #9A1B2B;
  --lip-blue: #145078;
  --lip-gold: #B08A24;
  --lip-green: #1E5C3A;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
button, input { font: inherit; border-radius: 0; }
button { cursor: pointer; }
h1, h2, .display {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0;
}
body, p, .lede, .door span, .joinhint, .modes button span {
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  word-spacing: normal;
}

/* Quizi press: chunky lip, translate down on active. Square. Orange/navy, not #3b82f6. */
.press {
  --press-lip: var(--lip-orange);
  position: relative;
  box-shadow: 0 0.55em 0 var(--press-lip);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
.press:hover {
  transform: translate(0, 0.18em);
  box-shadow: 0 0.38em 0 var(--press-lip);
}
.press:active {
  transform: translate(0, 0.55em);
  box-shadow: 0 0 0 var(--press-lip);
}
.press:disabled,
.press:disabled:hover,
.press:disabled:active {
  transform: none;
  box-shadow: 0 0.55em 0 var(--press-lip);
  cursor: default;
}

/* Home: tile hall.svg at 70%, cream ground */
.home {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px 48px;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(244, 241, 234, 0.72), rgba(244, 241, 234, 0.72)),
    url("/img/hall.svg");
  background-size: auto, 160px;
  background-repeat: repeat;
}
.home-card { width: min(640px, 100%); text-align: center; }
.kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}
.home h1 { font-size: clamp(52px, 10vw, 84px); }
.home h1 span { color: var(--orange); }
.lede {
  margin: 14px auto 28px;
  max-width: 34rem;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  padding: 16px 18px;
  box-shadow: 0 6px 0 rgba(2, 66, 109, 0.16);
}
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 12px; }
.door {
  --press-lip: var(--lip-navy);
  min-height: 132px;
  border: 4px solid var(--navy);
  background: #fffaf3;
  padding: 18px 16px;
  text-align: left;
  color: var(--ink);
}
.door:hover { background: var(--orange); --press-lip: var(--lip-orange); }
.door strong { display: block; font-size: 28px; font-family: "Archivo Black", sans-serif; }
.door span { display: block; margin-top: 8px; font-size: 15px; }

/* Host projector: light cream, faint tile, back-row type */
body.host {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(244, 241, 234, 0.9), rgba(244, 241, 234, 0.9)),
    url("/img/hall.svg");
  background-size: auto, 160px;
  background-repeat: repeat;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.host-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding: 14px 20px 10px;
  border-bottom: 10px solid var(--orange);
  gap: 12px;
  background: rgba(244, 241, 234, 0.94);
}
.brand { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--navy); }
.code-block { text-align: center; }
.code-block small { display: block; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.16em; }
.code-block b {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 8vw, 84px);
  letter-spacing: 0.12em;
}
.host-actions { display: flex; gap: 8px; justify-content: end; flex-wrap: wrap; align-items: center; }
.host-play { display: flex; gap: 8px; flex-wrap: wrap; }
.pill, .go {
  --press-lip: var(--lip-navy);
  border: 3px solid var(--navy);
  background: #fffaf3;
  padding: 10px 14px;
  font-weight: 800;
  color: var(--navy);
}
.pill.on, .go {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
  --press-lip: var(--lip-orange);
}
.go { font-size: 18px; }
.sound {
  --press-lip: var(--lip-navy);
  border: 3px solid var(--navy);
  background: #fffaf3;
  color: var(--navy);
  padding: 10px 14px;
  font-weight: 800;
}
.sound.on {
  background: var(--navy);
  color: #fff;
  --press-lip: var(--lip-navy);
}
.scores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 24px;
}
.ticket {
  border: 3px solid var(--ink);
  border-top: 8px solid var(--tick, var(--orange));
  padding: 8px 10px;
  background: #fffaf3;
}
.ticket.buzz { background: var(--orange); }
.ticket .nm { font-weight: 800; }
.ticket .sc {
  font-family: "IBM Plex Mono", monospace;
  font-size: 28px;
  color: var(--navy);
}
.chip {
  background: #fffaf3;
  border: 2px solid var(--navy);
  padding: 8px 12px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.chip b { font-family: "Archivo Black", sans-serif; }
.chip.hot { background: var(--navy); color: #fff; }
.clock {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(48px, 9vw, 92px);
  color: var(--orange);
  line-height: 0.9;
  min-width: 2ch;
  text-align: center;
  letter-spacing: -0.04em;
}
.burst {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.stage { flex: 1; padding: 18px 22px 28px; display: flex; flex-direction: column; }
.stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cat {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy);
  font-size: 13px;
}
.q { font-size: clamp(32px, 5vw, 58px); margin: 8px 0 22px; max-width: 58rem; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 10px; }
.opt, button.opt {
  min-height: 92px;
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  font-size: 22px;
  font-weight: 700;
  background: #fffaf3;
  color: var(--ink);
}
.opt i, .opt .let {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Archivo Black", sans-serif;
  font-size: 26px;
  font-style: normal;
  flex: 0 0 52px;
}
.opt.a i, .opt.a .let { background: var(--red); }
.opt.b i, .opt.b .let { background: var(--blue); }
.opt.c i, .opt.c .let { background: var(--gold); color: var(--ink); }
.opt.d i, .opt.d .let { background: var(--green); }
.opt.right { outline: 6px solid var(--green); }
.opt.wrong { opacity: 0.4; }
.why {
  margin-top: 16px;
  padding: 12px 14px;
  border: 3px solid var(--orange);
  background: #fffaf3;
  font-size: 20px;
}
.banner {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  color: var(--orange);
  margin: 8px 0 18px;
}
.wait { color: #5c5348; font-size: 20px; }

/* Team pad: same cream hall as the host */
body.team {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(244, 241, 234, 0.88), rgba(244, 241, 234, 0.88)),
    url("/img/hall.svg");
  background-size: auto, 160px;
  background-repeat: repeat;
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.team .kicker { color: var(--navy); }
body.team .join { padding: 24px 20px 32px; }
body.team .pad {
  padding: 0 0 24px;
  flex: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.team .pad.has-opts .buzz-wrap { flex: 0; padding: 8px 16px 0; }
body.team .pad.has-opts .buzz {
  width: min(36vw, 140px);
  height: min(36vw, 140px);
  font-size: 28px;
  border-width: 8px;
}
body.team h1 { font-size: clamp(40px, 12vw, 72px); }
body.team h1 em { color: var(--orange); font-style: normal; }
body.team .sound {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 5;
}
body.team .clock { font-size: clamp(36px, 8vw, 64px); }
.field { display: grid; gap: 8px; margin: 16px 0; }
.field label { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.field input {
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--navy);
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  padding: 8px 0;
}
.wide {
  --press-lip: var(--lip-orange);
  width: 100%;
  margin-top: 18px;
  padding: 18px;
  border: 0;
  background: var(--orange);
  color: #16120c;
  font-family: "Archivo Black", sans-serif;
  font-size: 22px;
}
.meta {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  border-bottom: 8px solid var(--orange);
  background: rgba(244, 241, 234, 0.94);
}
.buzz-wrap { flex: 1; display: grid; place-items: center; padding: 20px; }
.buzz {
  width: min(78vw, 340px);
  height: min(78vw, 340px);
  border-radius: 50%;
  border: 14px solid #3a1408;
  background: radial-gradient(circle at 35% 30%, #ff8a3d, var(--orange) 45%, #9a3a10);
  color: #1a1008;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 10vw, 72px);
  box-shadow: 0 18px 0 #5a220c, 0 22px 40px rgba(0,0,0,0.45);
}
.buzz:active { transform: translateY(10px); box-shadow: 0 8px 0 #5a220c; }
.buzz:disabled { filter: grayscale(0.6); opacity: 0.55; transform: none; }
.team-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 16px 28px;
  flex: 1;
}
.team-opts button {
  --press-lip: var(--lip-navy);
  border: 0;
  color: #fff;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  min-height: 28vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  gap: 8px;
}
.team-opts button i {
  font-style: normal;
  font-size: 1.35em;
  line-height: 1;
}
.team-opts button span {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.62em;
  line-height: 1.15;
}
.team-opts .a { background: var(--red); --press-lip: var(--lip-red); }
.team-opts .b { background: var(--blue); --press-lip: var(--lip-blue); }
.team-opts .c { background: var(--gold); color: var(--ink); --press-lip: var(--lip-gold); }
.team-opts .d { background: var(--green); --press-lip: var(--lip-green); }
.team-opts button:disabled { opacity: 0.35; }
.team-opts button.right { outline: 6px solid var(--ink); opacity: 1; }
body.team .pad.has-opts.has-buzz .team-opts button { min-height: 18vh; }
.status {
  text-align: center;
  padding: 32px 20px;
  font-size: 28px;
  font-family: "Archivo Black", sans-serif;
}
body.team .status.compact {
  padding: 8px 16px 4px;
  font-size: 15px;
}
.setup { padding: 20px 24px 40px; display: grid; gap: 14px; }
.count-row, .lightseats { display: flex; flex-wrap: wrap; gap: 8px; }
.count-row button, .lightseats button, .seatpick button {
  border: 2px solid var(--navy);
  background: #fff;
  color: var(--navy);
  padding: 10px 16px;
  font-family: "Archivo Black", sans-serif;
}
.count-row button.on, .modes button.on { background: var(--navy); color: #fff; }
.customn { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; }
.customn input { width: 64px; border: 2px solid var(--navy); padding: 8px; }
.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.seats .namechip, .seats label {
  display: grid;
  gap: 4px;
  border: 2px solid var(--navy);
  padding: 10px;
  background: #fffaf3;
}
.seats .namechip.taken, .seats label.taken { outline: 3px solid var(--orange); }
.seats .namechip b { font-family: "Archivo Black", sans-serif; font-size: 22px; }
.seats input { border: 0; border-bottom: 2px solid var(--navy); font-size: 18px; font-weight: 700; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.modes button { text-align: left; border: 2px solid var(--navy); background: #fff; padding: 14px; display: grid; gap: 6px; }
.modes button b { font-family: "Archivo Black", sans-serif; }
.modes button span { font-size: 14px; }
.joinhint { font-size: 16px; }
.go.big { justify-self: start; padding: 16px 28px; font-size: 22px; }
.err { padding: 16px 24px; color: #8a1c12; }
.seatpick { display: grid; gap: 10px; margin-top: 16px; }
body.team .seatpick button { background: #fffaf3; color: var(--navy); border-color: var(--navy); }
body.team .seatpick button:disabled { opacity: 0.4; }
body.team .status { color: var(--navy); }
.hidden { display: none !important; }
@media (max-width: 700px) {
  .doors, .opts, .host-top { grid-template-columns: 1fr; }
  .host-top { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .press, .door, .buzz, .team-opts button { transition: none; }
  .press:hover, .press:active, .buzz:active { transform: none; }
  .press:hover, .press:active { box-shadow: 0 0.55em 0 var(--press-lip); }
  .buzz:active { box-shadow: 0 18px 0 #5a220c, 0 22px 40px rgba(0,0,0,0.45); }
}