:root {
  --bee-cream: #fff9ed;
  --bee-paper: #fffefb;
  --bee-navy: #102d5c;
  --bee-blue: #157ad1;
  --bee-blue-soft: #e9f4fd;
  --bee-gold: #f5bd32;
  --bee-gold-soft: #fff2c9;
  --bee-coral: #f15d58;
  --bee-green: #36a56b;
  --bee-muted: #60708a;
  --bee-line: #e8ddca;
  --bee-shadow: 0 18px 50px rgb(52 58 73 / 10%);
  --bee-radius: 24px;
}

* { box-sizing: border-box; }

.bee-body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--bee-navy);
  background:
    radial-gradient(circle at 8% 6%, rgb(245 189 50 / 13%), transparent 24rem),
    var(--bee-cream);
  font-family: Inter, ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
  line-height: 1.5;
}

button, input, select { font: inherit; }

.bee-header {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 4vw, 64px);
  background: rgb(255 254 251 / 92%);
  border-bottom: 1px solid var(--bee-line);
  backdrop-filter: blur(14px);
}

.bee-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--bee-navy);
  text-decoration: none;
}

.faithsparks-wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.04em;
}

.faithsparks-wordmark span { color: #e9a710; }
.brand-divider { width: 1px; height: 34px; background: var(--bee-line); }
.bee-brand strong { font-size: clamp(.95rem, 2vw, 1.3rem); }
.bee-brand.centered { display: flex; justify-content: center; flex-wrap: wrap; }

.bee-home {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(60px, 9vw, 120px) 0 70px;
}

.home-copy {
  max-width: 1120px;
  text-align: center;
  margin: 0 auto;
}

.home-copy h1 {
  max-width: 760px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 7vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.home-copy p {
  max-width: 660px;
  margin: 28px auto;
  color: var(--bee-muted);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
}

.section-kicker {
  display: inline-block;
  color: var(--bee-blue);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-start-presets{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:center;margin:32px 0 20px;padding:clamp(18px,3vw,28px);text-align:left;background:linear-gradient(135deg,#fff2c9,#e9f4fd);border:1px solid #d8c26b;border-radius:var(--bee-radius);box-shadow:var(--bee-shadow)}
.quick-start-presets h2,.quick-start-presets p{margin:4px 0}.quick-start-presets p{font-size:1rem}.preset-button-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.preset-button-grid button{min-height:52px;padding:10px 12px;color:var(--bee-navy);background:#fff;border:2px solid var(--bee-line);border-radius:12px;font-weight:900;cursor:pointer}.preset-button-grid button.selected{color:var(--bee-blue);border-color:var(--bee-blue);background:var(--bee-blue-soft)}
.room-ready-checklist{display:grid;gap:7px;max-width:560px;margin:22px auto 0;padding:16px;text-align:left;background:#fff;border:1px solid var(--bee-line);border-radius:14px}.room-ready-checklist span{font-weight:800}.room-ready-checklist .ready{color:#26713d}.room-ready-checklist .waiting{color:#865c0a}
.controller-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
  margin-top: 18px;
}
.controller-pair-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-content: start;
  align-items: center;
  min-width: 0;
  padding: 18px;
  text-align: center;
  background: #fff;
  border: 2px solid var(--bee-line);
  border-radius: 16px;
}
.controller-pair-card.team-gold { background: #fffaf0; border-color: #e1b438; }
.controller-pair-card.team-blue { background: #f3faff; border-color: #77b8e9; }
.controller-pair-card.team-blue::before {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: -14px;
  width: 1px;
  content: "";
  background: #d6cebd;
}
.controller-pair-card > strong,
.controller-pair-card > img,
.controller-pair-card > .pair-code,
.controller-pair-card > .controller-ready {
  grid-column: 1 / -1;
}
.controller-pair-card > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  text-transform: capitalize;
}
.controller-pair-card > img {
  width: min(210px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 7px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--bee-line);
  border-radius: 12px;
}
.controller-pair-card .bee-button,
.controller-pair-card .text-button {
  min-height: 44px;
  margin: 0;
}
.pair-code {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  background: rgb(255 255 255 / 78%);
  border: 1px dashed #b9ae99;
  border-radius: 10px;
}
.pair-code span {
  color: var(--bee-muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pair-code code {
  color: var(--bee-navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.controller-ready { color: #26713d; font-weight: 900; }
.learning-context,.display-context{max-width:760px;margin:16px auto 0;padding:16px;text-align:left;background:#fff2c9;border:1px solid #e2bd51;border-radius:14px}.learning-context p,.display-context p{margin:5px 0 0}.family-goal-meter{height:18px;max-width:560px;margin:18px auto;overflow:hidden;background:#e9e4d8;border-radius:999px}.family-goal-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--bee-gold),var(--bee-green));border-radius:inherit}.celebration-stage{position:relative;overflow:hidden}.celebration-stage:before,.celebration-stage:after{content:"✦  •  ✦  •  ✦";position:absolute;top:16px;color:var(--bee-gold);font-size:1.4rem;letter-spacing:.5rem;animation:bee-celebrate 1.2s ease-out both}.celebration-stage:before{left:20px}.celebration-stage:after{right:20px}@keyframes bee-celebrate{from{opacity:0;transform:translateY(20px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.celebration-stage:before,.celebration-stage:after{animation:none}}

@media(max-width:760px){.quick-start-presets{grid-template-columns:1fr}}
@media(max-width:440px){.preset-button-grid{grid-template-columns:1fr}}
@media print{.bee-header,.score-rail,.next-game-actions,.game-feedback,#print-review{display:none!important}.bee-body{background:#fff}.game-layout{display:block!important}.finished-stage{box-shadow:none!important;border:0!important}.review-list{break-inside:avoid}.celebration-stage:before,.celebration-stage:after{display:none}}

.how-to-panel {
  display: grid;
  gap: 18px;
  margin: 46px auto 0;
  padding: clamp(22px, 4vw, 34px);
  text-align: left;
  background: var(--bee-paper);
  border: 1px solid var(--bee-line);
  border-radius: var(--bee-radius);
  box-shadow: var(--bee-shadow);
}

.how-to-panel h2 {
  max-width: 760px;
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.how-steps li {
  min-width: 0;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #d7e7f3;
  border-radius: 14px;
}

.how-steps li::before {
  display: block;
  margin-bottom: 8px;
  color: var(--bee-blue);
  font-size: .74rem;
  font-weight: 900;
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
}

.how-steps strong {
  display: block;
  line-height: 1.15;
}

.how-steps span {
  display: block;
  margin-top: 6px;
  color: var(--bee-muted);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
}

.mode-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-chip-row span {
  padding: 8px 11px;
  color: var(--bee-navy);
  background: white;
  border: 1px solid var(--bee-line);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 900;
}

.bee-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.bee-button:hover { filter: brightness(.98); transform: translateY(-1px); }
.bee-button:active { transform: translateY(1px); }
.bee-button:focus-visible, input:focus-visible {
  outline: 4px solid rgb(21 122 209 / 24%);
  outline-offset: 3px;
}
.bee-button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.bee-button.primary { color: white; background: var(--bee-blue); box-shadow: 0 10px 24px rgb(21 122 209 / 22%); }
.bee-button.secondary { color: var(--bee-blue); background: white; border: 2px solid var(--bee-blue); }
.bee-button.gold { color: #503803; background: var(--bee-gold); }
.bee-button.large { min-height: 60px; padding-inline: 30px; font-size: 1.05rem; }
.bee-button.full { width: 100%; }

.join-panel {
  max-width: 650px;
  margin: 72px auto 0;
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
  background: var(--bee-paper);
  border: 1px solid var(--bee-line);
  border-radius: var(--bee-radius);
  box-shadow: var(--bee-shadow);
}

.join-panel h2, .join-card h1 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; }
.join-panel p, .join-card p { color: var(--bee-muted); }
.selfie-picker { display: flex; align-items: center; gap: 14px; margin: 18px 0; text-align: left; }
.selfie-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.selfie-picker p { margin: 5px 0 0; font-size: .78rem; }
.join-helper-note {
  margin: 4px 0 10px !important;
  padding: 10px 12px;
  color: var(--bee-blue) !important;
  background: #fff7df;
  border: 1px solid var(--bee-line);
  border-radius: 10px;
  font-size: .86rem;
  font-weight: 800;
}
.selfie-button { min-height: 42px; padding: 9px 15px; cursor: pointer; }
.selfie-preview {
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  color: var(--bee-blue);
  background-color: var(--bee-blue-soft);
  background-position: center;
  background-size: cover;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bee-line);
  font-size: 2rem;
}
.avatar-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0; padding: 0; border: 0; }
.avatar-gallery legend { grid-column: 1 / -1; margin-bottom: 4px; font-weight: 900; }
.avatar-choice { display: grid; min-width: 0; gap: 4px; justify-items: center; padding: 7px 3px; border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.avatar-choice:has(input:checked) { background: var(--bee-blue-soft); border-color: var(--bee-blue); }
.avatar-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-choice > span { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; background-color: var(--bee-blue-soft); border-radius: 50%; font-size: 1.5rem; }
.avatar-choice small { max-width: 72px; overflow: hidden; color: var(--bee-muted); font-size: .62rem; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.preset-avatar {
  overflow: hidden;
  background-image: url("/static/bible_bee_avatars/avatar-sprite.png");
  background-repeat: no-repeat;
  background-size: 300% 300% !important;
  border-radius: 50%;
}
.avatar-fox { background-position: 0% 0%; }
.avatar-sunflower { background-position: 50% 0%; }
.avatar-ocean { background-position: 100% 0%; }
.avatar-david { background-position: 0% 50%; }
.avatar-esther { background-position: 50% 50%; }
.avatar-jesus-children { background-position: 100% 50%; }
.avatar-noah { background-position: 0% 100%; }
.avatar-empty-tomb { background-position: 50% 100%; }
.avatar-cross { background-position: 100% 100%; }
.code-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 24px; }
.code-form label { grid-column: 1 / -1; text-align: left; font-weight: 800; }

input {
  width: 100%;
  min-height: 54px;
  padding: 10px 16px;
  color: var(--bee-navy);
  background: white;
  border: 1px solid #b8c7d8;
  border-radius: 13px;
}

select {
  width: 100%;
  min-height: 54px;
  padding: 10px 38px 10px 14px;
  color: var(--bee-navy);
  background: white;
  border: 1px solid #b8c7d8;
  border-radius: 13px;
}

.room-setup-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(150px, .75fr) auto;
  gap: 12px;
  align-items: end;
  max-width: 790px;
  margin: 34px auto 0;
  padding: 16px;
  text-align: left;
  background: rgb(255 254 251 / 82%);
  border: 1px solid var(--bee-line);
  border-radius: 18px;
}
.room-setup-form.expanded {
  grid-template-columns: 1fr;
  max-width: 1120px;
  padding: clamp(18px, 3vw, 28px);
}
.room-setup-form label { display: grid; gap: 6px; }
.room-setup-form label span { font-size: .82rem; font-weight: 900; }
.team-mode-toggle {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--bee-line);
  border-radius: 14px;
  cursor: pointer;
}
.team-mode-toggle input {
  width: 22px;
  min-height: 22px;
  accent-color: var(--bee-blue);
}
.team-mode-toggle span {
  display: grid;
  gap: 2px;
  font-size: 1rem !important;
}
.team-mode-toggle small {
  color: var(--bee-muted);
  font-size: .78rem;
  font-weight: 700;
}
.setup-error {
  max-width: 780px !important;
  margin: 20px auto -14px !important;
  padding: 13px 16px;
  color: #8f2824 !important;
  background: #fff0ee;
  border: 1px solid #f2b6b1;
  border-radius: 12px;
  font-size: .92rem !important;
  font-weight: 800;
}
.deck-library { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; border: 0; }
.deck-library legend { margin-bottom: 10px; font-size: 1rem; font-weight: 900; }
.version-picker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}
.version-picker legend { font-size: 1rem; font-weight: 900; }
.version-options {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 6px;
  padding: 5px;
  background: white;
  border: 1px solid var(--bee-line);
  border-radius: 14px;
}
.version-options label {
  display: block;
  cursor: pointer;
}
.version-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.version-options span {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 7px 14px;
  color: var(--bee-muted);
  border-radius: 10px;
  font-weight: 900;
}
.version-options input:checked + span {
  color: white;
  background: var(--bee-blue);
  box-shadow: 0 8px 18px rgb(21 122 209 / 18%);
}
.version-options input:disabled + span {
  cursor: not-allowed;
  opacity: .45;
}
.quick-game-options {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}
.quick-game-options legend {
  font-size: 1rem;
  font-weight: 900;
}
.quick-game-options > div {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 6px;
  padding: 5px;
  background: white;
  border: 1px solid var(--bee-line);
  border-radius: 14px;
}
.quick-game-options:nth-of-type(3) > div {
  grid-template-columns: repeat(3, minmax(92px, 1fr));
}
.quick-game-options label {
  display: block;
  cursor: pointer;
}
.quick-game-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.quick-game-options span {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 7px 12px;
  color: var(--bee-muted);
  border-radius: 10px;
  font-weight: 900;
  text-align: center;
}
.quick-game-options input:checked + span {
  color: white;
  background: var(--bee-blue);
  box-shadow: 0 8px 18px rgb(21 122 209 / 18%);
}
.custom-game-tools {
  grid-column: 1 / -1;
  display: block;
  gap: 12px;
  margin: 0;
  padding: 16px;
  text-align: left;
  background: #fff9e8;
  border: 1px solid #e5cf91;
  border-radius: 16px;
}
.custom-game-tools legend { padding: 0 8px; color: var(--bee-navy); font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 900; }
.custom-game-tools label { max-width: none; }
.deck-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.deck-card {
  position: relative;
  display: block !important;
  min-height: 142px;
  padding: 16px;
  background: white;
  border: 2px solid var(--bee-line);
  border-radius: 15px;
  cursor: pointer;
}
.deck-card:has(input:checked) { background: var(--bee-blue-soft); border-color: var(--bee-blue); }
.deck-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.deck-card strong, .deck-card small, .deck-card b { display: block; }
.deck-card strong { padding-right: 28px; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.15; }
.deck-card small { margin-top: 4px; color: var(--bee-blue); font-weight: 800; }
.deck-card p { margin: 10px 0 0 !important; color: var(--bee-muted); font-size: .84rem !important; line-height: 1.35; }
.deck-card b { color: var(--bee-muted); font-size: .75rem; }
.deck-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: none;
  width: 26px;
  height: 26px;
  place-items: center;
  color: white;
  background: var(--bee-blue);
  border-radius: 50%;
  font-weight: 900;
}
.deck-card:has(input:checked) .deck-check { display: grid; }
.create-room-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 6px;
  padding-top: 4px;
}
.create-room-row p { margin: 0 !important; color: var(--bee-muted); font-size: .82rem !important; text-align: left; }
.room-build-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  margin: 0 !important;
  color: var(--bee-blue) !important;
  font-size: .84rem !important;
  font-weight: 900;
  text-align: center;
}
.sign-in-reassurance { margin: 14px auto 0 !important; font-size: .9rem !important; }

.active-rooms {
  max-width: 790px;
  margin: 44px auto -34px;
  padding: 22px;
  background: var(--bee-paper);
  border: 1px solid var(--bee-line);
  border-radius: 18px;
}
.active-rooms h2 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; }
.active-rooms > p { margin: -2px 0 10px; color: var(--bee-muted); font-size: .86rem; }
.active-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--bee-line);
}
.active-room-row > a {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 4px;
  color: var(--bee-navy);
  text-decoration: none;
}
.active-room-row a span, .active-room-row a small { display: block; }
.active-room-row a small { margin-top: 3px; color: var(--bee-muted); }
.active-room-row a b { color: var(--bee-blue); white-space: nowrap; }
.delete-room-form { margin: 0; }
.delete-room-form button { padding: 8px; }

#room-code {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mode-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 70px;
  overflow: hidden;
  background: var(--bee-line);
  border: 1px solid var(--bee-line);
  border-radius: var(--bee-radius);
}

.mode-preview article { padding: clamp(24px, 5vw, 44px); background: var(--bee-paper); }
.mode-preview h2 { margin: 12px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; }
.mode-preview p { margin: 0; color: var(--bee-muted); }
.mode-number { color: var(--bee-blue); font-size: .8rem; font-weight: 900; letter-spacing: .14em; }
.bee-footer { padding: 24px; color: var(--bee-muted); text-align: center; font-size: .88rem; }

.join-body { display: grid; place-items: center; padding: 24px; }
.join-screen { width: min(100%, 500px); }
.join-card {
  margin-top: 28px;
  padding: clamp(26px, 7vw, 48px);
  background: var(--bee-paper);
  border: 1px solid var(--bee-line);
  border-radius: var(--bee-radius);
  box-shadow: var(--bee-shadow);
}
.join-card form { display: grid; gap: 12px; margin-top: 26px; }
.join-card label { font-weight: 800; }
.room-label { margin: 0 0 10px; color: var(--bee-blue) !important; font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.form-error { padding: 12px; color: #8f2824 !important; background: #fff0ee; border-radius: 10px; font-weight: 700; }

.room-header { min-height: 70px; padding-block: 10px; }
.room-code-block { display: flex; align-items: baseline; gap: 10px; padding: 9px 15px; color: var(--bee-blue); background: var(--bee-blue-soft); border: 1px solid #b9dcf5; border-radius: 13px; }
.room-code-block span { font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.room-code-block strong { font-size: 1.35rem; letter-spacing: .08em; }
.sound-toggle { padding: 7px 10px; color: var(--bee-blue); background: var(--bee-blue-soft); border: 1px solid #acd0eb; border-radius: 10px; font-size: .75rem; font-weight: 900; cursor: pointer; }
.read-mode-control { display: grid; gap: 2px; color: var(--bee-muted); font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.read-mode-control select { min-height: 34px; padding: 4px 30px 4px 9px; font-size: .75rem; text-transform: none; }
.game-shell { width: min(1480px, calc(100% - 32px)); margin: 16px auto 40px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 350px); gap: 18px; align-items: start; }

.game-stage, .score-rail {
  background: var(--bee-paper);
  border: 1px solid var(--bee-line);
  border-radius: var(--bee-radius);
  box-shadow: var(--bee-shadow);
}

.game-stage {
  min-height: calc(100vh - 126px);
  padding: clamp(22px, 3.5vw, 48px);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.game-stage::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -80px;
  left: -8%;
  height: 140px;
  background: var(--bee-gold-soft);
  border-radius: 50% 50% 0 0;
  opacity: .65;
  pointer-events: none;
}
.loading-stage { display: grid; min-height: 70vh; place-content: center; }
.loading-spark { color: var(--bee-gold); font-size: 3rem; animation: bee-pulse 1.2s ease-in-out infinite; }
@keyframes bee-pulse { 50% { transform: scale(1.2) rotate(12deg); opacity: .65; } }

.round-meta { display: flex; justify-content: center; gap: 16px; color: var(--bee-blue); font-size: .84rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.mode-banner { display: inline-block; margin: 14px 0 0; padding: 9px 24px; color: #573d00; background: var(--bee-gold); border-radius: 11px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.question-prompt {
  max-width: 950px;
  margin: clamp(18px, 2.5vw, 30px) auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  white-space: pre-line;
}
.answers { display: grid; gap: 6px; max-width: 900px; margin: 0 auto 24px; text-align: left; }
.answer-button {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 6px 18px;
  color: var(--bee-navy);
  background: white;
  border: 1px solid #ddd4c5;
  border-radius: 15px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  text-align: left;
  cursor: pointer;
}
.answer-button:hover { border-color: var(--bee-blue); background: #f9fcff; }
.answer-button:disabled { cursor: default; opacity: .72; }
.answer-letter { display: grid; width: 38px; height: 38px; place-items: center; color: white; background: var(--bee-blue); border-radius: 50%; font-family: Inter, sans-serif; font-weight: 900; }
.answer-button:nth-child(2) .answer-letter { background: var(--bee-coral); }
.answer-button:nth-child(3) .answer-letter { background: var(--bee-green); }
.answer-button:nth-child(4) .answer-letter { color: #4a3400; background: var(--bee-gold); }
.answer-button.selected { border-width: 3px; border-color: var(--bee-blue); background: var(--bee-blue-soft); }
.answer-button.correct-answer { border-width: 3px; border-color: var(--bee-green); background: #eaf8f0; opacity: 1; }
.answer-button.wrong-answer.selected { border-color: var(--bee-coral); background: #fff0ef; opacity: 1; }
.answer-feedback { margin: -12px auto 24px; font-size: 1.12rem; font-weight: 900; }
.answer-feedback.good { color: #237d50; }
.answer-feedback.try { color: #a33c37; }
.answer-confirmation {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 20;
  display: grid;
  width: min(720px, calc(100% - 24px));
  max-width: 720px;
  gap: 12px;
  margin: 0 auto;
  padding: 16px;
  color: var(--bee-navy);
  background: var(--bee-blue-soft);
  border: 2px solid #9dc9eb;
  border-radius: 15px;
  box-shadow: 0 18px 50px rgb(16 45 92 / 22%);
}
.answer-confirmation > div { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.answer-confirmation .bee-button { min-height: 44px; padding-block: 9px; }
.is-speaking { outline: 5px solid var(--bee-gold) !important; outline-offset: 3px; filter: brightness(1.04); }

.score-rail { overflow: hidden; }
.score-rail h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 22px 24px 15px; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; }
.family-score { padding: 4px 8px; color: #604600; background: var(--bee-gold-soft); border-radius: 999px; font-family: Inter, sans-serif; font-size: .68rem; white-space: nowrap; }
.team-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 16px;
}
.team-score-card {
  padding: 12px;
  background: white;
  border: 2px solid var(--bee-line);
  border-radius: 14px;
}
.team-score-card strong,
.team-score-card output,
.team-score-card small { display: block; }
.team-score-card output {
  color: var(--bee-blue);
  font-size: 1.35rem;
  font-weight: 900;
}
.team-score-card small {
  color: var(--bee-muted);
  font-size: .72rem;
  font-weight: 800;
}
.team-score-card.team-gold { border-color: #e6bd48; background: #fff8de; }
.team-score-card.team-blue { border-color: #8bc4ef; background: #eef8ff; }
.score-list { max-height: calc(100vh - 340px); overflow-y: auto; }
.player-score { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 17px 22px; border-top: 1px solid var(--bee-line); }
.player-avatar { display: grid; width: 40px; height: 40px; place-items: center; color: white; background: var(--bee-blue); border-radius: 50%; font-weight: 900; }
.player-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.player-avatar > .preset-avatar { width: 100%; height: 100%; border-radius: inherit; }
.player-score:nth-of-type(3n + 1) .player-avatar { background: var(--bee-coral); }
.player-score:nth-of-type(3n + 2) .player-avatar { background: var(--bee-green); }
.player-score strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-score output { color: var(--bee-blue); font-size: 1.15rem; font-weight: 900; }
.team-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  color: #234;
  background: #edf5fd;
  border-radius: 999px;
  font-size: .62rem;
  text-transform: uppercase;
}
.team-pill.team-gold { color: #604600; background: var(--bee-gold-soft); }
.team-pill.team-blue { color: var(--bee-blue); background: var(--bee-blue-soft); }
.score-adjust { display: inline-flex; gap: 4px; }
.player-management { display: grid; justify-items: end; gap: 5px; }
.score-adjust button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--bee-blue);
  background: white;
  border: 1px solid #a9cce7;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}
.presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  background: #a8b0bd;
  border-radius: 50%;
  vertical-align: middle;
}
.presence-dot.online { background: var(--bee-green); }
.presence-dot.offline { background: var(--bee-gold); }
.away-label { display: inline-block; margin-left: 4px; padding: 2px 6px; color: #765707; background: var(--bee-gold-soft); border-radius: 999px; font-size: .62rem; text-transform: uppercase; }
.away-player { padding: 3px 7px; color: var(--bee-muted); background: white; border: 1px solid var(--bee-line); border-radius: 7px; font-size: .68rem; font-weight: 800; cursor: pointer; }
.away-player.is-away { color: #765707; background: var(--bee-gold-soft); }
.switch-team-player { padding: 3px 7px; color: var(--bee-blue); background: white; border: 1px solid #a9cce7; border-radius: 7px; font-size: .68rem; font-weight: 800; cursor: pointer; }
.remove-player {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #9b3d38;
  background: #fff0ef;
  border: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}
.host-controls, .join-invite { margin: 18px; padding: 18px; background: var(--bee-blue-soft); border-radius: 16px; }
.host-controls { display: grid; gap: 10px; }
.text-button { padding: 8px; color: var(--bee-muted); background: transparent; border: 0; font-weight: 800; cursor: pointer; }
.text-button:hover { color: #9b3d38; }
.text-button:disabled { opacity: .45; cursor: not-allowed; }
.danger-text { color: #9b3d38; }
.host-only-label {
  display: block;
  width: max-content;
  margin-bottom: 8px;
  padding: 3px 7px;
  color: #5c460b;
  background: var(--bee-gold-soft);
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.join-invite p { margin: 0; color: var(--bee-muted); font-size: .9rem; }
.join-url { margin-top: 5px !important; color: var(--bee-blue) !important; font-weight: 800; word-break: break-all; }

.lobby-stage { display: grid; place-content: center; }
.lobby-stage h1, .finished-stage h1 { margin: 12px 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; }
.lobby-stage > p, .finished-stage > p { max-width: 650px; margin: 8px auto 30px; color: var(--bee-muted); font-size: 1.15rem; }
.next-game-actions {
  width: min(100%, 560px);
  margin: 30px auto 0;
  padding: 24px;
  border: 1px solid var(--bee-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
}
.next-game-actions h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; }
.finished-join-form { margin-bottom: 14px; text-align: left; }
.finished-join-form label { display: block; margin-bottom: 8px; font-weight: 800; }
.finished-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.finished-code-row input {
  min-width: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 1.2rem;
  font-weight: 900;
}
.next-game-actions > .bee-button { width: 100%; }
.lobby-code-row { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); margin: 24px 0; }
.big-code { color: var(--bee-blue); font-size: clamp(4rem, 13vw, 8rem); font-weight: 900; letter-spacing: .12em; line-height: 1; }
.lobby-qr { display: grid; gap: 5px; color: var(--bee-muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.lobby-qr img { width: 112px; height: 112px; padding: 6px; background: white; border: 1px solid var(--bee-line); border-radius: 12px; }
.waiting-dots::after { content: "…"; display: inline-block; width: 1.3em; text-align: left; }
.player-wait { display: grid; min-height: 70vh; place-content: center; text-align: center; }
.profile-edit-form {
  display: grid;
  gap: 12px;
  width: min(100%, 460px);
  margin: 18px auto 0;
  padding: 18px;
  text-align: left;
  border: 1px solid var(--bee-border);
  border-radius: 8px;
  background: white;
}
.profile-edit-form input[name="player_name"] {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #ccd8e8;
  border-radius: 8px;
  font: inherit;
}
.profile-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.revealed-verse {
  max-width: 850px;
  margin: -8px auto 22px;
  padding: 14px 18px;
  color: #246c49;
  background: #edf9f2;
  border: 1px solid #9cd1b4;
  border-radius: 13px;
}
.revealed-verse p { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; }
.shared-countdown, .auto-next-note {
  color: var(--bee-muted);
  font-weight: 800;
}
.shared-countdown { margin: 0 auto 18px; text-align: center; }
.shared-countdown strong, .auto-next-note strong { color: var(--bee-blue); font-size: 1.15em; }
.challenge-timer { margin: -14px auto 16px; color: #805d08; font-weight: 900; }
.oral-player-panel, .oral-host-panel { max-width: 760px; margin: 0 auto 24px; padding: 20px; background: var(--bee-blue-soft); border-radius: 16px; }
.oral-player-panel p, .oral-host-panel > p { margin-top: 0; color: var(--bee-muted); }
.oral-judge-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #cbddec; text-align: left; }
.oral-judge-row > span { color: var(--bee-muted); font-size: .82rem; font-weight: 800; text-transform: capitalize; }
.oral-judge-row > div { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.oral-judge-row button { padding: 5px 8px; color: var(--bee-blue); background: white; border: 1px solid #9dc9eb; border-radius: 7px; font-size: .72rem; font-weight: 800; cursor: pointer; }
.review-list { max-width: 720px; margin: 30px auto; text-align: left; }
.review-list h2 { margin: 28px 0 8px; font-family: Georgia, "Times New Roman", serif; }
.review-list ul { margin-top: 8px; color: var(--bee-muted); }
.review-row { display: flex; justify-content: space-between; gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--bee-line); }
.review-row span { color: var(--bee-muted); }
.celebration-mark { color: var(--bee-gold); font-size: 4rem; }
.feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.feedback-card { padding: 15px; background: var(--bee-blue-soft); border-radius: 12px; }
.feedback-card p { margin: 7px 0 0; color: var(--bee-muted); font-size: .86rem; }
.encouragement-badge { display: inline-block; margin-left: 6px; padding: 3px 7px; color: #5c460b; background: var(--bee-gold-soft); border-radius: 7px; font-size: .7rem; font-weight: 900; }
.next-deck { margin-top: 24px; padding: 14px; text-align: center; background: #f6f3ec; border-radius: 12px; }
.bee-toast { position: fixed; right: 20px; bottom: 20px; z-index: 5; max-width: min(360px, calc(100% - 40px)); padding: 13px 17px; color: white; background: var(--bee-navy); border-radius: 12px; box-shadow: var(--bee-shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .18s ease; }
.bee-toast.show { opacity: 1; transform: translateY(0); }
.connection-status {
  position: fixed;
  top: 82px;
  left: 50%;
  z-index: 8;
  padding: 9px 16px;
  color: #5f4400;
  background: var(--bee-gold-soft);
  border: 1px solid #e6c75c;
  border-radius: 0 0 12px 12px;
  font-size: .85rem;
  font-weight: 900;
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
  transition: .18s ease;
}
.connection-status.show { opacity: 1; transform: translate(-50%, 0); }

.room-body[data-role="display"] {
  background: #fff7e8;
}
.room-body[data-role="display"] .room-header {
  display: none;
}
.room-body[data-role="display"] .game-shell {
  width: min(1680px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 44px) 0;
}
.display-stage {
  display: grid;
  min-height: calc(100vh - 88px);
  align-content: center;
  gap: clamp(18px, 2.5vw, 34px);
  padding: clamp(28px, 5vw, 72px);
  text-align: center;
  background: var(--bee-paper);
  border: 1px solid var(--bee-line);
  border-radius: var(--bee-radius);
  box-shadow: var(--bee-shadow);
  overflow: hidden;
}
.display-kicker,
.display-topline {
  color: var(--bee-blue);
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
  font-weight: 900;
  text-transform: uppercase;
}
.display-topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
}
.display-stage h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 1;
}
.display-lobby h1 { font-size: clamp(2.8rem, 6vw, 6.2rem); }
.display-lobby .display-prompt { font-size: clamp(2rem, 3.8vw, 4.2rem); }
.display-lobby .display-rosters { width: min(1050px, 100%); margin: 0 auto; }
.display-join-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 90px);
}
.display-join-row div {
  display: grid;
  gap: 8px;
}
.display-join-row span {
  color: var(--bee-muted);
  font-weight: 900;
  text-transform: uppercase;
}
.display-join-row strong {
  color: var(--bee-blue);
  font-size: clamp(5rem, 14vw, 13rem);
  line-height: .9;
  letter-spacing: .1em;
}
.display-join-row img {
  width: clamp(150px, 18vw, 260px);
  height: clamp(150px, 18vw, 260px);
  padding: 10px;
  background: white;
  border: 1px solid var(--bee-line);
  border-radius: 18px;
}
.display-count {
  margin: 0;
  color: var(--bee-muted);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 900;
}
.display-rosters,
.display-team-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.display-roster,
.display-team-card {
  min-width: 0;
  padding: clamp(16px, 2.5vw, 30px);
  background: white;
  border: 3px solid var(--bee-line);
  border-radius: 18px;
}
.display-roster h2 {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
}
.display-roster div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-height: 22vh;
  overflow-y: auto;
}
.display-roster span {
  padding: 7px 11px;
  color: var(--bee-navy);
  background: #f8fbff;
  border: 1px solid var(--bee-line);
  border-radius: 999px;
  font-weight: 800;
}
.display-roster.team-gold,
.display-team-card.team-gold { border-color: #e1b438; background: #fff8de; }
.display-roster.team-blue,
.display-team-card.team-blue { border-color: #77b8e9; background: #eef8ff; }
.display-team-board.compact {
  width: min(820px, 100%);
  margin: 0 auto;
}
.display-team-card span,
.display-team-card strong,
.display-team-card small {
  display: block;
}
.display-team-card span {
  color: var(--bee-muted);
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
  font-weight: 900;
  text-transform: uppercase;
}
.display-team-card strong {
  color: var(--bee-blue);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1;
}
.display-team-card small {
  color: var(--bee-muted);
  font-size: clamp(.85rem, 1.2vw, 1.1rem);
  font-weight: 800;
}
.display-prompt {
  max-width: 1180px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 5.6rem);
  line-height: 1.08;
  white-space: pre-line;
}
.display-timer {
  margin: 0;
  color: #805d08;
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 900;
}
.display-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.display-answers div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 12px 18px;
  text-align: left;
  background: white;
  border: 2px solid var(--bee-line);
  border-radius: 18px;
}
.display-answers span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: white;
  background: var(--bee-blue);
  border-radius: 50%;
  font-weight: 900;
}
.display-answers strong {
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2vw, 2rem);
}
.display-answers .correct-answer {
  border-color: var(--bee-green);
  background: #eaf8f0;
}
.display-reveal,
.display-oral-note,
.display-top-players,
.top-individuals {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 2vw, 26px);
  background: #edf9f2;
  border: 1px solid #9cd1b4;
  border-radius: 18px;
}
.display-reveal span {
  color: #246c49;
  font-weight: 900;
}
.display-reveal p {
  margin: 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
}
.display-top-players,
.top-individuals {
  display: grid;
  gap: 8px;
  text-align: left;
  background: var(--bee-blue-soft);
  border-color: #b8d7ee;
}
.display-top-players h2,
.top-individuals h2 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
}
.display-top-players div,
.top-individuals div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid #c7dced;
  font-weight: 900;
}

@media (max-width: 850px) {
  .bee-header { min-height: 68px; padding: 12px 16px; }
  .room-header { gap: 8px; }
  .brand-divider, .room-header .faithsparks-wordmark { display: none; }
  .game-shell { width: min(100% - 20px, 720px); margin-top: 12px; }
  .game-layout { grid-template-columns: 1fr; }
  .game-stage { min-height: 0; padding: 26px 16px 44px; }
  .score-rail { order: -1; }
  .score-rail h2 { padding-block: 14px 8px; }
  .score-list { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .player-score { min-width: 155px; border-top: 0; }
  .join-invite { display: none; }
  .question-prompt { margin-block: 34px; }
  .room-setup-form.expanded { grid-template-columns: 1fr; }
  .deck-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controller-pair-grid { grid-template-columns: 1fr; gap: 18px; }
  .controller-pair-card.team-blue::before {
    top: -10px;
    right: 8%;
    bottom: auto;
    left: 8%;
    width: auto;
    height: 1px;
  }
}

@media (max-width: 600px) {
  .bee-home { padding-top: 50px; }
  .code-form, .mode-preview { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .finished-code-row { grid-template-columns: 1fr; }
  .finished-code-row .bee-button { width: 100%; }
  .room-setup-form { grid-template-columns: 1fr; }
  .room-setup-form.expanded, .deck-card-grid { grid-template-columns: 1fr; }
  .version-picker { align-items: stretch; flex-direction: column; }
  .version-options { width: 100%; }
  .quick-game-options { align-items: stretch; flex-direction: column; }
  .quick-game-options > div { width: 100%; }
  .control-options > div, .scoring-options > div, .difficulty-options > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-options span, .scoring-options span, .difficulty-options span { min-height: 72px; padding: 10px; }
  .custom-game-tools { grid-template-columns: 1fr; align-items: stretch; }
  .create-room-row { align-items: stretch; flex-direction: column; }
  .active-room-row { align-items: stretch; flex-direction: column; gap: 0; padding-bottom: 10px; }
  .active-room-row > a { width: 100%; }
  .delete-room-form button { width: 100%; text-align: left; }
  .bee-brand { gap: 10px; }
  .bee-brand strong { font-size: .88rem; }
  .room-code-block { padding: 6px 10px; }
  .room-code-block strong { font-size: 1.08rem; }
  .sound-toggle { width: 38px; min-width: 38px; overflow: hidden; padding: 6px 8px; font-size: 0; }
  .sound-toggle::before { content: "♪"; font-size: .88rem; }
  .read-mode-control span { display: none; }
  .read-mode-control select { width: 104px; }
  .round-meta { flex-wrap: wrap; gap: 9px; font-size: .7rem; }
  .mode-banner { margin-top: 16px; }
  .question-prompt { font-size: clamp(1.85rem, 10vw, 3rem); }
  .answer-button { grid-template-columns: 36px 1fr; padding-inline: 12px; }
  .answer-letter { width: 34px; height: 34px; }
  .big-code { font-size: 4rem; }
  .lobby-code-row { gap: 16px; }
  .lobby-qr img { width: 88px; height: 88px; }
  .feedback-grid { grid-template-columns: 1fr; }
  .avatar-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oral-judge-row { grid-template-columns: 1fr auto; }
  .oral-judge-row > div { grid-column: 1 / -1; justify-content: flex-start; }
  .room-body[data-role="display"] .game-shell { width: min(100% - 20px, 720px); }
  .display-stage { min-height: calc(100vh - 24px); padding: 22px 14px; }
  .display-join-row,
  .display-rosters,
  .display-team-board,
  .display-answers { grid-template-columns: 1fr; }
  .display-join-row { display: grid; gap: 18px; }
  .display-join-row strong { font-size: clamp(4rem, 24vw, 6rem); }
  .display-stage h1 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .display-prompt { font-size: clamp(2rem, 11vw, 3.4rem); }
  .display-answers div { grid-template-columns: 42px minmax(0, 1fr); }
  .display-answers span { width: 40px; height: 40px; }
}

@media (max-width: 420px) {
  .control-options > div, .scoring-options > div, .difficulty-options > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}