.setup-screen {
  display: grid;
  grid-template-columns: minmax(245px, .78fr) minmax(0, 1.45fr);
  max-width: 1000px;
  width: 100%;
  margin: 4vh auto 0;
  padding: 0;
  overflow: hidden;
}

.category-sidebar {
  padding: 32px 26px;
  background: linear-gradient(160deg, #111a30, #131e37);
  border-right: 1px solid var(--line);
}

.category-sidebar h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.025em; }
.category-sidebar .eyebrow { margin-bottom: 6px; }
.category-summary { margin: 7px 0 18px; }
.category-list {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(55vh, 500px);
  overflow-y: auto;
  scrollbar-color: #43557e #111a30;
  scrollbar-width: thin;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #293858;
  border-radius: 9px;
  background: #17233d;
  color: #e8edfb;
  font-size: .9rem;
}

.category-count {
  min-width: 25px;
  padding: 2px 7px;
  border-radius: 20px;
  background: #26365c;
  color: #afbddb;
  text-align: center;
  font-size: .75rem;
  font-weight: 800;
}

.category-loading { padding: 11px; color: var(--muted); font-size: .88rem; }
.category-note { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; line-height: 1.5; }
.setup-main { min-width: 0; padding: 40px 44px; }
.setup-main .intro { margin-bottom: 24px; }
.board-placeholder { min-height: 66px; }

@media (max-width: 720px) {
  .setup-screen { grid-template-columns: 1fr; margin-top: 2vh; }
  .category-sidebar { padding: 23px 21px; border-right: 0; border-bottom: 1px solid var(--line); }
  .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; }
  .category-item { padding: 8px; font-size: .8rem; }
  .setup-main { padding: 27px 21px; }
}

@media (max-width: 420px) {
  .category-list { grid-template-columns: 1fr; max-height: 190px; }
  .setup-main { padding: 24px 18px; }
}

.mode-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 24px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mode-tab { padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.mode-tab:hover { color: var(--text); background: #1a2743; }
.mode-tab.active { color: var(--accent); background: #26365c; border-color: #405781; }
.category-count-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #131e37; }
.category-count-setting label { color: var(--muted); font-size: .88rem; font-weight: 700; }
.category-count-setting select { min-width: 120px; padding: 9px 11px; border: 1px solid #405781; border-radius: 8px; background: #10182d; color: var(--text); font: inherit; }
.mode-panel h2 { margin: 0 0 10px; font-size: 1.35rem; }
.room-mode-options { display: grid; gap: 9px; margin: 18px 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.room-mode-options legend { padding: 0 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.room-mode-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid #293858; border-radius: 9px; background: #17233d; cursor: pointer; }
.room-mode-option input { margin: 3px 0 0; accent-color: var(--accent); }
.room-mode-option span { display: grid; gap: 4px; }
.room-mode-option strong { font-size: .9rem; }
.room-mode-option small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.mode-panel > label, .remote-answer label, .player-card > label { display: block; margin: 14px 0 7px; color: var(--muted); font-size: .88rem; font-weight: 700; }
.mode-input { width: 100%; margin: 0 0 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #10182d; color: var(--text); font: inherit; }
.mode-input:focus { border-color: var(--blue); }
.public-field { display: block; max-width: 420px; margin: 12px 0; color: var(--muted); font-weight: 700; }
.public-field .mode-input { display: block; margin: 5px 0 0; }
.public-alert:not(:empty) { padding: 12px 16px; margin: 12px 0; border: 1px solid #e08383; border-radius: 10px; background: #472632; color: #fff; }
.guest-entry { margin: 20px 0; padding: 20px; border: 1px solid #405781; border-radius: 12px; background: #17243f; }
.guest-entry h3 { margin: 0 0 5px; }
.host-entry { margin-top: 20px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 12px; }
.host-entry > summary { cursor: pointer; font-weight: 700; }
.host-entry[open] > summary { margin-bottom: 16px; }
.public-board-scroll { overflow-x: auto; margin: 22px 0; padding-bottom: 8px; }
.public-board { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(var(--question-columns), minmax(100px, 1fr)); gap: 9px; align-items: stretch; }
.public-board-topic, .public-board-question, .public-board-empty { min-height: 66px; }
.public-board-topic { display: flex; align-items: center; padding: 12px 16px; border-radius: 10px; background: #26365c; color: #fff; font-weight: 800; overflow-wrap: anywhere; }
.public-board-question { width: 100%; display: grid; place-items: center; padding: 10px; color: var(--accent); font-size: 1.35rem; font-weight: 800; }
.public-board-question:disabled { color: #7181a5; }
.public-board-empty { border-radius: 10px; background: #111a2d; opacity: .45; }
.join-action { margin-top: 8px; }
.host-lobby { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.host-lobby h3 { margin: 20px 0 9px; }
.room-code-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #495c86; border-radius: 12px; background: #111a30; }
.room-code-card strong { color: var(--accent); font-size: 1.8rem; letter-spacing: .18em; }
.room-addresses, .host-player-list { display: grid; gap: 7px; margin: 8px 0 15px; padding-left: 20px; color: var(--muted); font-size: .85rem; }
.room-addresses a { color: #9ab6ff; overflow-wrap: anywhere; }
.host-player-list li span { float: right; color: var(--green); }
.player-view { width: 100%; margin: 0 auto; animation: appear .3s ease; }
.player-view .topbar { margin-bottom: 20px; }
.player-view .topbar h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.player-card { padding: clamp(22px, 5vw, 42px); }
.player-card .question-text { font-size: clamp(1.4rem, 4vw, 2.4rem); }
.remote-buzz { display: block; width: 100%; min-height: 72px; margin: 20px 0; font-size: 1.35rem; letter-spacing: .04em; }
.remote-buzz-sent { background: #26365c; color: var(--muted); }
.buzzer-mode-label { margin-bottom: 10px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.remote-answer { max-width: 680px; margin-top: 20px; }
.remote-answer-chip { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #111a30; }
.remote-answer-list { display: grid; gap: 8px; margin: 14px 0; }
.remote-submit { margin-top: 6px; }
.player-topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.player-topic-list span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #17233d; }
.final-submitted-answer { margin: 12px 0 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #10182d; line-height: 1.5; }
@media (max-width: 720px) {
  .player-view { width: 100%; }
  .player-view .topbar { padding: 0 4px; }
  .mode-tabs { gap: 4px; }
  .mode-tab { flex: 1 1 auto; padding: 8px; font-size: .75rem; }
  .host-player-list li span { float: none; display: block; }
}