/* ============================================================
   TierTalk — /stage (จอโปรเจกเตอร์ 1920×1080)
   ห้ามเลื่อนหน้าจอ · ไม่มีปุ่ม · ตัวใหญ่ อ่านจากหลังห้องได้
   ============================================================ */

html,
body {
  height: 100%;
  overflow: hidden;
}

/* แถวที่ 3 = แถบคำถามจากผู้ชม — ตอนซ่อนอยู่ track จะสูง 0 ไม่กินที่ใคร */
body.stage-root {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  cursor: none;                 /* ไม่มีเมาส์บนจอโปรเจกเตอร์ */
}

/* ---------------------------------------------------- ไอคอน */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
}
.icon svg { width: 100%; height: 100%; display: block; }
.icon-sm { width: 22px; height: 22px; }
.icon-lg { width: 40px; height: 40px; }
.icon-xl { width: 76px; height: 76px; }

/* ---------------------------------------------------- Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-2) var(--sp-6);
  min-height: 66px;
  background: var(--color-surface);
  border-bottom: 3px solid var(--color-border-strong);
  box-shadow: var(--shadow-flat);
}
.topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar-mark {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 5px var(--wwa-pink-soft);
}
.topbar-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-foreground);
  letter-spacing: 0;
}
.topbar-right { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.topbar-phase {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  padding: 6px var(--sp-4);
}
.topbar-item {
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  font-size: var(--text-sm);
  padding: 6px var(--sp-4);
}
.topbar-aud {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-foreground);
}
.topbar-aud .icon { color: var(--wwa-red-deep); }
.topbar-aud-unit { color: var(--color-muted-fg); }

.conn { display: inline-flex; align-items: center; }
.conn-dot {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  border: 4px solid var(--color-surface-2);
}
.conn[data-on='0'] .conn-dot {
  background: var(--color-danger);
  animation: pulse-dot 1.2s var(--ease-out) infinite;
}

/* ---------------------------------------------------- พื้นที่หลัก */
.stage-main {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: var(--sp-5) var(--sp-6);
}
.view {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.fit { height: 100%; min-height: 0; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.view-enter { animation: view-in var(--dur-slow) var(--ease-out) both; }

/* ---------------------------------------------------- ทั่วไป */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--wwa-red-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);      /* กันวรรณยุกต์ของหัวเรื่องชนบรรทัดบน */
}
.muted-strong { color: var(--color-muted-fg); font-weight: 700; font-size: var(--text-lg); }
.truncate2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section-title { font-size: var(--text-xl); color: var(--wwa-red-deep); }

.stage-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--color-muted-fg);
  text-align: center;
}
.stage-empty .icon { color: var(--color-border-strong); }
.stage-empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--wwa-ink-mid);
}
.stage-empty-sub { font-size: var(--text-lg); color: var(--color-muted-fg); }

@keyframes slot-pop {
  from { opacity: 0; transform: scale(0.7) translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* เกณฑ์ Tier (ใช้ทั้งหน้า intro และแถบอ้างอิงใต้คำถาม) */
.legend-wrap { display: grid; gap: var(--sp-2); }
.legend-caption { font-size: var(--text-base); font-weight: 700; color: var(--wwa-ink-mid); text-align: center; }
.tier-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.legend-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  min-width: 130px;
  animation: slot-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.legend-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; }
.legend-desc { font-size: var(--text-sm); font-weight: 600; line-height: 1.2; }
.tier-legend.is-compact { gap: var(--sp-2); }
.tier-legend.is-compact .legend-pill { min-width: 104px; padding: 4px var(--sp-4); }
.tier-legend.is-compact .legend-label { font-size: var(--text-lg); }
.tier-legend.is-compact .legend-desc { font-size: var(--text-xs); }

/* ==================================================== LOBBY */
.lobby {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-5);
}
.lobby-head { text-align: center; }
.lobby-title { font-size: var(--text-4xl); color: var(--wwa-red-deep); line-height: 1.05; }
.lobby-body {
  display: grid;
  grid-template-columns: minmax(380px, 480px) 1fr;
  gap: var(--sp-10);
  align-items: center;
  min-height: 0;
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--color-surface);
}
.qr-box {
  width: min(380px, 26vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--wwa-white);
  border-radius: var(--radius);
  padding: var(--sp-2);
  overflow: hidden;
}
.qr-box svg { width: 100%; height: 100%; }
.qr-box.qr-fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-foreground);
  word-break: break-all;
  text-align: center;
  padding: var(--sp-4);
}
.qr-hint { font-size: var(--text-lg); font-weight: 700; color: var(--wwa-red-deep); }
.join-url {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-foreground);
  word-break: break-all;
  text-align: center;
  line-height: 1.2;
}
.room-code { font-size: var(--text-base); color: var(--wwa-ink-mid); }
.room-code b { color: var(--color-primary); font-size: var(--text-lg); letter-spacing: 0.08em; }

.lobby-right {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  min-height: 0;
  align-content: center;
}
.speaker-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--radius-lg);
  text-align: center;
  min-height: 210px;
  justify-content: center;
}
.slot-filled {
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  box-shadow: var(--shadow-clay);
}
.slot-empty {
  background: transparent;
  border: 3px dashed var(--color-border-strong);
  color: var(--color-muted-fg);
}
.slot-ghost {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
}
.slot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  max-width: 100%;
  color: var(--color-foreground);
}
.slot-empty .slot-name { color: var(--color-muted-fg); }
.slot-title { font-size: var(--text-sm); color: var(--wwa-ink-mid); max-width: 100%; }

.pop-in { animation: slot-pop var(--dur-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 60ms); }

.aud-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--wwa-red-deep);
  padding: var(--sp-4) var(--sp-6);
}
.aud-big { font-size: var(--text-2xl); color: var(--color-primary); }

/* ==================================================== INTRO */
.intro {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--sp-8);
  align-content: center;
  justify-items: center;
  text-align: center;
}
.intro-head { display: grid; gap: var(--sp-3); min-height: 0; }
.intro-title { font-size: var(--text-4xl); color: var(--wwa-red-deep); line-height: 1.05; }
.intro-sub { font-size: var(--text-2xl); color: var(--wwa-ink-mid); font-weight: 700; }
.intro-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  justify-self: center;
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  box-shadow: var(--shadow-clay);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-foreground);
}
.intro-count .icon { color: var(--color-primary); }
.intro-count b { color: var(--color-primary); font-size: var(--text-2xl); }
.intro-count-sep { color: var(--color-border-strong); }

/* ==================================================== QUESTION ⭐ */
.question {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-5);
  min-height: 0;
}
.q-body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-4);
  min-height: 0;
  text-align: center;
}
.q-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-8);
  box-shadow: var(--shadow-clay);
  letter-spacing: 0.04em;
}
.q-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--q-fs, 120px);
  line-height: 1.28;   /* สระบน+วรรณยุกต์ของ Mali ล้นกรอบ ~0.15–0.25em ต่ำกว่านี้บรรทัดจะชนกัน */
  color: var(--wwa-red-deep);
  max-width: 96%;
  overflow-wrap: break-word;
}
.q-sub { font-size: var(--text-2xl); color: var(--wwa-ink-mid); font-weight: 700; max-width: 80%; }
.q-image {
  max-height: 26vh;
  border-radius: var(--radius-lg);
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow-clay);
  object-fit: contain;
}

@keyframes q-in {
  from { opacity: 0; transform: scale(0.9) translateY(22px); }
  to { opacity: 1; transform: none; }
}
.q-enter { animation: q-in var(--dur-slow) var(--ease-spring) both; }

.q-legend { display: grid; gap: var(--sp-2); }
.q-legend-cap {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--wwa-ink-mid);
}

/* ==================================================== หัวข้อแบบย่อ (answering / reveal) */
.item-head {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);   /* เดิม 4px ทำให้ 'ข้อ N / M' โดนสระบนของบรรทัดถัดไปทับ */
  text-align: center;
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  padding: var(--sp-3) var(--sp-6);
}
.item-chip-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  padding: 2px var(--sp-5);
}
.item-head-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--q-fs, 56px);
  line-height: 1.28;
  color: var(--wwa-red-deep);
  overflow-wrap: break-word;
}
.item-head-sub { font-size: var(--text-lg); color: var(--wwa-ink-mid); font-weight: 700; }

/* หน้า reveal: item เป็นแค่บริบท พระเอกคือบอร์ด tier ข้างล่าง
   เดิม .item-head-sm ถูกส่งเข้ามาแต่ไม่มี CSS รองรับ → ใช้หัวข้อตัวเดียวกับหน้า question
   (ตัวอักษรสูงสุด 7.5% ของจอ + padding เต็ม + คำบรรยาย) พอมี 6 tier
   แถวเลยเหลือแถวละ ~50px รูปผู้บรรยายถูกเฉือนจนเหลือแต่หัว */
.item-head-sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  border-width: 2px;
}
.item-head-sm .item-head-label {
  font-size: min(var(--q-fs, 56px), 46px);
  line-height: 1.15;
}
.item-head-sm .item-head-sub { display: none; }
.item-head-sm .item-flags { gap: var(--sp-2); }
.item-flags { display: flex; justify-content: center; gap: var(--sp-3); }
.item-flags:empty { display: none; }

.flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  animation: slot-pop var(--dur-slow) var(--ease-spring) both;
}
.flag-ok { background: var(--color-success); color: var(--color-on-primary); }
.flag-hot { background: var(--color-primary); color: var(--color-on-primary); }

/* ==================================================== ANSWERING */
.answering {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-4);
  min-height: 0;
  align-content: center;
}
.timer-wrap { text-align: center; }
.timer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--wwa-red-deep);
  letter-spacing: 0.02em;
}
.timer.is-notimer { font-size: var(--text-3xl); color: var(--wwa-ink-mid); }
.timer.is-done { color: var(--color-danger); }
.timer.is-urgent { color: var(--color-danger); animation: timer-pulse 1s var(--ease-out) infinite; }
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.timer-label { font-size: var(--text-lg); font-weight: 700; color: var(--wwa-ink-mid); }

.ans-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-content: center;
  justify-content: center;
  min-height: 0;
}
.ans-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  animation: slot-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.ans-card.is-answered { border-color: var(--color-success); background: var(--color-surface); }
.ans-card.is-offline-sp { opacity: 0.55; }
.ans-av { position: relative; }
.ans-card.is-waiting .ans-av { animation: waiting-bob 1.8s var(--ease-out) infinite; }
@keyframes waiting-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.ans-tick {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--color-success);
  color: var(--color-on-primary);
  border: 3px solid var(--color-surface);
  opacity: 0;
  transform: scale(0.5);
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);
}
.ans-card.is-answered .ans-tick { opacity: 1; transform: scale(1); }
.ans-tick .icon { width: 22px; height: 22px; }
.ans-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  max-width: 100%;
}
.ans-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--wwa-ink-mid);
}
.ans-status[data-kind='done'] { color: var(--color-success); }
.ans-status[data-kind='none'] { color: var(--color-danger); }

.ans-aud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--wwa-red-deep);
  padding: var(--sp-3) var(--sp-6);
}
.ans-aud-big { font-size: var(--text-2xl); color: var(--color-primary); }
.ans-aud-sep { color: var(--color-border-strong); }

/* ==================================================== REVEAL ⭐⭐ */
.rv {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--sp-3);
  min-height: 0;
}
.rv-holdwrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  border: 3px dashed var(--color-border-strong);
  min-height: 108px;
  transition: opacity var(--dur) var(--ease-out);
}
/* เฉลยครบแล้วไม่มีใครรออยู่ → ยุบเหลือบรรทัดเดียว คืนพื้นที่ ~90px ให้บอร์ด tier
   (เดิมกันที่ไว้ 108px ตลอด ทั้งที่ช่องว่างเปล่า) */
.rv-holdwrap.is-empty {
  opacity: 0.55;
  min-height: 0;
  padding: 2px var(--sp-4);
  border-width: 2px;
}
.rv-hold-cap {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--wwa-ink-mid);
  flex: none;
}
.rv-hold-cap.is-done { color: var(--color-success); }
.rv-hold-cap.is-none { color: var(--color-danger); }
.rv-hold {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.rv-hold-none { color: var(--color-muted-fg); font-weight: 700; }

.rv-av {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-4) 4px 4px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-clay);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  max-width: 320px;
  flex: none;
  will-change: transform;
}
.rv-drop[data-few='1'] .rv-av { max-width: 640px; }
/* ขนาดรูปตามจำนวน tier — ค่าถูกตั้งจาก stage.js ที่ .rv-rows */
.rv-rows .rv-av .avatar {
  width: var(--rv-av-size, 88px);
  height: var(--rv-av-size, 88px);
}
.rv-av-name { min-width: 0; }
.rv-av.is-placed { box-shadow: var(--shadow-lift); }

.rv-colhead {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 30%;
  gap: var(--sp-2);
  padding: 0 var(--sp-1);
}
.rv-colhead.is-solo { grid-template-columns: 190px minmax(0, 1fr); }
.rv-colname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--wwa-red-deep);
}
.rv-colname-aud { color: var(--wwa-ink-mid); }

.rv-rows {
  display: grid;
  /* พื้นล่างของแถว = สูงพอใส่รูปได้เต็มใบ ไม่ให้บีบจนรูปโดนเฉือน */
  grid-auto-rows: minmax(calc(var(--rv-av-size, 88px) + 16px), 1fr);
  gap: var(--sp-2);
  min-height: 0;
}
.rv-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--color-border);
  min-height: 0;
  animation: row-in var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.rv.has-aud .rv-row { grid-template-columns: 190px minmax(0, 1fr) 30%; }
.rv-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2);
  text-align: center;
}
.rv-tier .tier-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
}
.rv-tier .tier-desc { font-size: var(--text-xs); font-weight: 600; line-height: 1.15; }
.rv-drop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-surface-2);
  overflow: hidden;
}
.rv-aud {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--color-surface);
  border-left: 2px solid var(--color-border);
}
.rv-aud-track {
  flex: 1 1 auto;
  height: 30px;
  min-width: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  overflow: hidden;
}
.rv-aud-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.rv-aud-pct {
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--wwa-red-deep);
  min-width: 5.5ch;
  text-align: right;
}
.rv-foot {
  text-align: center;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--wwa-ink-mid);
}
.rv-foot b { color: var(--color-primary); font-size: var(--text-lg); }
.rv-foot-muted { color: var(--color-muted-fg); }

/* ==================================================== BOARD (สะสม) */
.boardview {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-3);
  min-height: 0;
}
.boardview-head { display: flex; align-items: center; gap: var(--sp-3); }
.boardview-head .icon { color: var(--color-primary); }
.boardview-title { font-size: var(--text-2xl); color: var(--wwa-red-deep); }
.boardview-head .badge { font-size: var(--text-base); padding: 6px var(--sp-4); }

.boards-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: var(--sp-4);
  height: 100%;
  min-height: 0;
}
.board {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  overflow: hidden;
}
.board-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 62px;
  min-width: 0;
}
.board-id { display: grid; min-width: 0; }
.board-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.15; }
.board-title { font-size: var(--text-xs); opacity: 0.92; line-height: 1.15; }
.board-body {
  display: grid;
  grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr));
  gap: 6px;
  padding: var(--sp-2);
  min-height: 0;
}
.board .tier-row {
  --tier-label-w: 56px;
  min-height: 0;
  border-width: 2px;
  border-radius: var(--radius-sm);
}
.board .tier-label { font-size: var(--text-base); padding: 2px; }
.board .tier-letter { font-size: var(--text-lg); line-height: 1; }
.board .tier-drop { padding: 5px; gap: 5px; overflow: hidden; }
.board .tier-drop:empty::after { font-size: var(--text-xs); }
/* ป้าย "+N" ที่ fitTierDrops ใส่ให้เมื่อชิปล้นช่อง — ต้องอ่านออกว่ายังมีอีก ไม่ใช่หายเงียบ */
.chip-more {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
  color: var(--wwa-ink-mid);
}
.board-none { padding: var(--sp-4); color: var(--color-muted-fg); }

.boards-grid.is-compact .board-head { min-height: 48px; }
.boards-grid.is-compact .board-body { gap: 4px; padding: 5px; }
.boards-grid.is-compact .board .tier-row { --tier-label-w: 44px; }
.boards-grid.is-compact .board .tier-letter { font-size: var(--text-base); }

.chip-mini {
  font-size: var(--chip-fs, 15px);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  border-width: 2px;
  box-shadow: var(--shadow-flat);
  white-space: normal;
  line-height: 1.15;
  max-width: 100%;
  text-align: center;
  cursor: default;
}
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
.chip-pop { animation: chip-in var(--dur-slow) var(--ease-spring) both; }

.board-back {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background:
    repeating-linear-gradient(135deg, var(--wwa-pink-soft) 0 18px, var(--wwa-pink-mist) 18px 36px);
  color: var(--wwa-red-deep);
}
.board-back-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }

@keyframes board-in {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: none; }
}
.board-reveal { animation: board-in var(--dur-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ==================================================== SPOTLIGHT */
.spotlight {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--sp-8);
  min-height: 0;
}
.spot-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 4px solid var(--speaker-color, var(--color-primary));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay);
}
.spot-name { font-size: var(--text-3xl); color: var(--wwa-red-deep); line-height: 1.1; }
.spot-title { font-size: var(--text-lg); color: var(--wwa-ink-mid); }
.spot-ask {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-5);
}
.spot-round {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-foreground);
  background: var(--color-surface-2);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
}
.spot-board {
  display: grid;
  grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr));
  gap: var(--sp-3);
  min-height: 0;
}
.spot-board .tier-row { --tier-label-w: 150px; min-height: 0; }
.spot-board .tier-letter { font-size: var(--text-2xl); }
.spot-board .chip-mini { font-size: var(--text-lg); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); }
.spot-hidden {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, var(--wwa-pink-soft) 0 22px, var(--wwa-pink-mist) 22px 44px);
  color: var(--wwa-red-deep);
}

/* ==================================================== AUDIENCE */
.audv {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-3);
  min-height: 0;
}
.audv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.audv-title { font-size: var(--text-2xl); color: var(--wwa-red-deep); }
.audv-head .badge { font-size: var(--text-base); padding: 6px var(--sp-4); }
.audv-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.audv-legend-chip {
  padding: 4px var(--sp-4);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-flat);
}

.audv-list { display: grid; gap: var(--sp-3); min-height: 0; }
.audv-list[data-mode='h'] { grid-template-rows: repeat(var(--n, 1), minmax(0, 1fr)); }
.audv-list[data-mode='v'] { grid-template-columns: minmax(0, 1fr); }

.audv-item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-1);
  align-content: center;
  min-height: 0;
  overflow: hidden;   /* ล้นแล้วต้องตัด ห้ามวาดทับแถวข้าง ๆ */
}
/* ข้อเยอะ → แถวเตี้ยจนใส่หมุดอวาตาร์ไม่ได้ ตัดออกแล้วย่อชื่อแทน */
.audv-list[data-dense='1'] .bar-avatars { display: none; }
.audv-list[data-dense='1'] .audv-item-name { font-size: var(--text-sm); }
.audv-list[data-dense='1'] .bar-seg { font-size: var(--text-xs); }
.audv-item-side { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.audv-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.audv-item-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-foreground);
  min-width: 0;
}
.audv-item .badge { font-size: var(--text-xs); }

.audv-item-v {
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.audv-item-v .audv-item-name { font-size: var(--text-3xl); }
.audv-item-v .vbar-group { --vbar-h: auto; height: 100%; min-height: 0; }
.vbar { gap: var(--sp-1); }
.vbar-avs {
  display: flex;
  justify-content: center;
  gap: 2px;
  min-height: 32px;
  align-items: flex-end;
  overflow: hidden;
}
.vbar-slot { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; min-height: 0; }
.audv .vbar-fill {
  animation: none;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease-out);
}
.vbar-value { font-size: var(--text-lg); }
.vbar-label { font-size: var(--text-xl); }

/* ---- แท่งแนวนอน + อวาตาร์ลอยด้านบน ---- */
/* ความสูงทั้งสองค่าถูกตั้งจาก JS ที่ .audv-list ตามจำนวนข้อ
   เดิม .bar-track ประกาศ --bar-h ทับไว้เอง → ค่าที่คำนวณตามจำนวนข้อไม่มีผล
   แถวจึงต้องการ ~96px ในช่องที่เหลือ 61px แล้วชื่อข้อไปโผล่ใต้แท่งของแถวบน */
.bar-stack { position: relative; padding-top: var(--pin-h, 40px); }
.bar-avatars { position: absolute; inset: 0 0 auto 0; height: var(--pin-h, 40px); }
/* --pin-half = ครึ่งความกว้างของอวาตาร์ + วงแหวน ใช้หนีบไม่ให้ปักเลยขอบแล้วโดนตัด
   (เดิมอวาตาร์ของ tier ซ้ายสุด/ขวาสุดถูก overflow:hidden ของ .audv-item เฉือนไปครึ่งใบ) */
.bar-avatars { --pin-half: 21px; }
.bar-pin { position: absolute; bottom: 0; transform: translateX(-50%); display: block; }
.bar-track { border-width: 3px; }
.bar-seg { font-size: var(--text-sm); }
.bar-track.is-blank { position: relative; }
.bar-track.is-blank::after {
  content: 'ยังไม่มีคำตอบจากผู้ชม';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-muted-fg);
  font-size: var(--text-sm);
  font-weight: 700;
}
.bar-empty { padding: 0 var(--sp-4); color: var(--color-muted-fg); font-weight: 700; }

.audv-foot { font-size: var(--text-sm); color: var(--wwa-ink-mid); font-weight: 700; }

/* ==================================================== CONTROVERSY */
.ctr {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  min-height: 0;
}
.ctr-head { display: flex; align-items: center; gap: var(--sp-3); }
.ctr-head .icon { color: var(--color-primary); }
.ctr-title { font-size: var(--text-2xl); color: var(--wwa-red-deep); }

.ctr-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--sp-3);
  min-height: 0;
}
.ctr-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(360px, 40%);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  min-height: 0;
  animation: row-in var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.ctr-row.is-top { border-color: var(--color-primary); box-shadow: var(--shadow-clay); }
.ctr-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-primary);
  text-align: center;
}
.ctr-main { display: grid; gap: var(--sp-2); min-width: 0; }
.ctr-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.ctr-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); min-width: 0; }
.ctr-score { font-weight: 700; font-size: var(--text-base); color: var(--wwa-red-deep); }
.ctr-meter { height: 18px; }

.spread { display: flex; gap: 4px; }
.spread-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) 2px;
  border-radius: var(--radius-sm);
  min-height: 76px;
}
.spread-letter { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1; }
.spread-avs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 28px; align-items: center; }
.spread-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--wwa-ink);
  display: block;
}

.gap-sec {
  background: var(--color-surface-2);
  border: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.gap-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.gap-head .icon { color: var(--wwa-red-deep); }
.gap-title { font-size: var(--text-xl); color: var(--wwa-red-deep); }
.gap-none { font-size: var(--text-base); color: var(--wwa-ink-mid); font-weight: 700; }
.gap-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-3); }
.gap-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  animation: row-in var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}
.gap-item { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.gap-val { font-weight: 700; font-size: var(--text-lg); color: var(--color-primary); }
.gap-dir {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}
.gap-card[data-dir='audience-lower'] .gap-dir { color: var(--color-danger); }
.gap-card[data-dir='audience-higher'] .gap-dir { color: var(--color-success); }

/* ==================================================== SUMMARY */
.sum {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-3);
  min-height: 0;
}
.sum-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.sum-head .icon { color: var(--wwa-gold); align-self: center; }
.sum-title { font-size: var(--text-2xl); color: var(--wwa-red-deep); }
.sum-sub { font-size: var(--text-lg); color: var(--wwa-ink-mid); font-weight: 700; }

.sum-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.sum-card {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--color-surface);
  text-align: center;
}
.sum-card .icon { color: var(--color-primary); }
.sum-label { font-size: var(--text-sm); font-weight: 700; color: var(--wwa-ink-mid); }
.sum-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--wwa-red-deep);
  line-height: 1.1;
}
.sum-note { font-size: var(--text-xs); color: var(--wwa-ink-mid); }
.sum-thanks {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-primary);
}

/* ==================================================== OFFLINE / FX */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-danger);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(-105%);
  transition: transform var(--dur-slow) var(--ease-out);
}
body.is-offline .offline-banner { transform: none; }

.fx-flash {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background: var(--color-primary);
  opacity: 0;
}
.fx-flash.is-on { animation: flash 700ms var(--ease-out) both; }
@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  100% { opacity: 0; }
}

.fx-timeup {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
}
.fx-timeup span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-16);
  box-shadow: var(--shadow-lift);
}
.fx-timeup.is-on { animation: timeup-in 2400ms var(--ease-out) both; }
@keyframes timeup-in {
  0% { opacity: 0; transform: scale(0.85); }
  8% { opacity: 1; transform: scale(1.04); }
  14% { transform: scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* ==================================================== คำถามจากผู้ชม (view 'qa') ⭐
   ขึ้นได้เฉพาะคำถามที่ผู้ดำเนินรายการเลือกขึ้นจอแล้ว (state.pinnedQuestion)
   stage.js วัดขนาดตัวอักษรให้พอดีจอ ตั้งแต่คำถาม 10 ตัวอักษรจนถึง 280 ตัวอักษร */
.qa {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: var(--sp-5);
  min-height: 0;
  text-align: center;
}
.qa-head {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-clay);
}
.qa-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
}
/* กล่องวัดขนาด: เป็นแถว minmax(0,1fr) ของ .qa → สูงคงที่ไม่โตตามข้อความ
   stage.js จึงวัด clientHeight/clientWidth ของกล่องนี้แล้วไล่หาขนาดตัวอักษรที่พอดี */
.qa-textbox {
  display: grid;
  place-items: center;
  width: 82%;
  /* ต้องยืดเต็มแถว 1fr — ถ้าปล่อยให้ align-items:center ของ .qa ย่อกล่องตามเนื้อหา
     ความสูงกล่องจะเท่ากับความสูงข้อความเสมอ แล้วการวัดจะวนอยู่กับตัวเอง */
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}
.qa-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;   /* ค่าตั้งต้น — stage.js เขียนทับด้วยขนาดที่วัดแล้ว */
  /* ที่ขนาด hero (100px+) สระบน+วรรณยุกต์ของ Mali ล้นกรอบชัดกว่าปกติ
     จึงเผื่อมากกว่า .q-label (1.28) — ต่ำกว่านี้บรรทัดเริ่มเบียดกัน */
  line-height: 1.38;
  color: var(--wwa-red-deep);
  max-width: 100%;
  /* ข้อความจากผู้ชมอาจเป็นอักษรรัวยาวไม่มีช่องว่าง — ต้องตัดบรรทัดได้เสมอ */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.qa-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 3px solid var(--color-border-strong);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-muted-fg);
}
/* --color-border-strong ไม่ได้ถูกทำให้เข้มขึ้นในบล็อกโปรเจกเตอร์ของ tokens.css
   บนจอที่สีซีดไอคอนจะหายไปเลย (คอนทราสต์ ~1.7:1) → ใช้โทนเดียวกับข้อความข้าง ๆ */
.qa-note .icon { color: var(--color-muted-fg); }

@keyframes qa-in {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to { opacity: 1; transform: none; }
}
.qa-enter { animation: qa-in var(--dur-slow) var(--ease-spring) both; }

/* ---------- แถบคำถาม: โผล่คู่กับ view อื่น (เป็นแถวของกริดหน้าจอ ไม่ใช่ของลอยทับ) ---------- */
.qa-band {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-6);
  background: var(--color-surface);
  border-top: 4px solid var(--color-primary);
  box-shadow: var(--shadow-soft);
}
.qa-band[hidden] { display: none; }
.qa-band-side { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.qa-band-side .icon { color: var(--color-primary); }
.qa-band-titles { display: grid; min-width: 0; }
.qa-band-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--wwa-red-deep);
}
.qa-band-note {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-muted-fg);
}
.qa-band-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;   /* ค่าตั้งต้น — stage.js เขียนทับด้วยขนาดที่วัดแล้ว */
  line-height: 1.35;
  color: var(--color-foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
  /* stage.js หาขนาดที่ "สูงไม่เกิน 13% ของจอ" มาให้แล้ว
     เพดานตรงนี้เป็นตาข่ายกันเหตุสุดวิสัย (เช่นฟอนต์โหลดช้าแล้วข้อความโตทีหลัง)
     ไม่ให้แถบยืดจนดันเนื้อหาของ view ข้างบนตกจอ */
  max-height: 13vh;
  overflow: hidden;
}
/* ขนาดตัวอักษรเล็กสุดแล้วยังล้น (stage.js ตั้งคลาสนี้ให้) — ต้องจบด้วย …
   ไม่ใช่ตัดกลางคำเงียบ ๆ จำนวนบรรทัดมาจาก stage.js เพราะเพดานเป็น vh ไม่ใช่จำนวนบรรทัด */
.qa-band.is-clipped .qa-band-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--qa-clamp, 3);
  line-clamp: var(--qa-clamp, 3);
}
@keyframes qa-band-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}
/* เลื่อนขึ้นภายในแถวที่จองไว้แล้ว → ไม่มี layout shift ตอนเข้า */
.qa-band.is-in { animation: qa-band-in var(--dur-slow) var(--ease-out) both; }

/* จอเตี้ย (ซ้อมบนโน้ตบุ๊ก 900px) — หน้า reveal 6 tier แทบไม่เหลือที่
   บีบแถบให้บางลง ดีกว่าไปแย่งความสูงแถว tier จนรูปผู้บรรยายโดนเฉือน
   9vh ต้องตรงกับ capRatio ใน renderQaBand() ของ stage.js */
@media (max-height: 950px) {
  .qa-band { padding: var(--sp-2) var(--sp-5); gap: var(--sp-4); }
  .qa-band-text { max-height: 9vh; }
  .qa-band-label { font-size: var(--text-base); }
  .qa-band-note { font-size: var(--text-xs); }
}

/* ==================================================== จอเล็กกว่า 1600px (ซ้อมบนโน้ตบุ๊ก) */
@media (max-width: 1600px) {
  .lobby-body { grid-template-columns: minmax(320px, 400px) 1fr; gap: var(--sp-6); }
  .ctr-row { grid-template-columns: 56px minmax(0, 1fr) minmax(280px, 38%); }
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight { grid-template-columns: minmax(260px, 320px) 1fr; gap: var(--sp-5); }
  .rv-row,
  .rv-colhead { grid-template-columns: 150px minmax(0, 1fr); }
  .rv.has-aud .rv-row,
  .rv-colhead:not(.is-solo) { grid-template-columns: 150px minmax(0, 1fr) 32%; }
  .qa-band { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pop-in,
  .legend-pill,
  .ans-card,
  .board-reveal,
  .chip-pop,
  .rv-row,
  .ctr-row,
  .gap-card,
  .flag,
  .q-enter,
  .qa-enter,
  .qa-band.is-in,
  .view-enter,
  .fx-timeup.is-on,
  .fx-flash.is-on { animation: none; }
  .timer.is-urgent,
  .conn[data-on='0'] .conn-dot,
  .ans-card.is-waiting .ans-av { animation: none; }
  .fx-timeup.is-on { opacity: 1; }
}