/* 教師端：沿用 app.css 的色彩變數。投影（1280×720）要清楚，手機上也不能壞版。 */

body.teacher { background: var(--bg); }
.t-wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 64px; }
.teacher h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 40px); line-height: 1.3; margin: 4px 0 16px; }
.t-back { color: var(--ink-3); text-decoration: none; font-size: 14px; }
.t-note { font-size: 14px; color: var(--ink-2); margin: 6px 0 10px; }
.empty { color: var(--ink-3); font-size: 16px; margin: 0; }
.loading { font-size: 20px; color: var(--ink-2); grid-column: 1 / -1; }

/* 路線的顏色（相鄰順序：私下、群組、說了沒效果、跟著笑、吵起來、沒有行動）；--rt 是座位格的淺色底 */
.r-dm { --rc: #eda100; --rt: #fdf0cf; }
.r-group { --rc: #2a78d6; --rt: #dbe9fa; }
.r-tried { --rc: #1baf7a; --rt: #d6f2e7; }
.r-backfire { --rc: #6250d6; --rt: #e3dff8; }
.r-aggressive { --rc: #e34948; --rt: #fadcdc; }
.r-nothing { --rc: #a9b4bf; --rt: #eceff2; }

/* ---------- 按鈕 ---------- */
.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 12px 22px; font-size: 16px; line-height: 1.3; text-decoration: none; }
.t-btn:hover { border-color: var(--accent); }
.t-btn.sm { padding: 6px 14px; font-size: 14px; }
.t-btn.lg { padding: 16px 34px; font-size: clamp(18px, 2.2vw, 24px); }
.t-btn:disabled { opacity: .45; cursor: not-allowed; }
.t-btn.danger { border-color: #e2a9a5; color: #9b1c16; }
.t-btn.danger:hover { border-color: #b3261e; }
.poll-line .t-btn, .rep-meta .t-btn, .proj-note .t-btn { margin-left: 4px; vertical-align: middle; }
.muted { color: var(--ink-3); }

/* ---------- 第 1 屏：課前檢核 ---------- */
.t-check { max-width: 780px; margin: 0 auto; }
.checklist { background: var(--card); border-radius: 18px; padding: 20px 24px 12px 46px; margin: 0 0 14px; font-size: 17px; }
.checklist li { margin-bottom: 10px; padding-left: 2px; }
.checklist li:first-child { color: var(--accent-ink); }
.agree { display: inline-flex; gap: 10px; align-items: center; font-size: 18px; font-weight: 700; padding: 8px 2px; cursor: pointer; }
.agree input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.t-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 20px; }
/* 建立房間要的網站密碼（第二版玩法規格 5.2） */
.t-pass { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); }
.t-pass input { width: 9.5em; border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--card); letter-spacing: .15em; }
.t-pass input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.t-pass input::placeholder { letter-spacing: normal; color: var(--ink-3); }
.t-pass-note { margin: -12px 0 18px !important; }
.recent { margin: 0 0 18px; }
.recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.t-plan { background: var(--card); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.t-plan summary { cursor: pointer; font-weight: 700; }
.t-plan table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 6px; }
.t-plan th, .t-plan td { border-top: 1px solid var(--line); padding: 6px; text-align: left; vertical-align: top; }
.t-plan td:first-child { white-space: nowrap; }
.t-plan a { color: var(--accent-ink); }

/* ---------- 房間畫面（投影） ---------- */
.t-room .kicker { font-size: clamp(14px, 1.6vw, 18px) !important; }
.join { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; background: var(--card); border-radius: 24px; padding: 22px 32px; }
.join-label { color: var(--ink-2); font-size: clamp(15px, 1.7vw, 19px); margin: 0; }
.room-code { font-family: ui-monospace, "Cascadia Mono", Consolas, "Noto Sans TC", monospace; font-size: clamp(56px, min(12vw, 18vh), 150px); font-weight: 700; letter-spacing: .06em; line-height: 1.1; margin: 0 0 10px; color: var(--ink); }
.room-code span + span { margin-left: .3em; }
.join-url { font-size: clamp(17px, 2.3vw, 28px); font-weight: 700; overflow-wrap: anywhere; margin: 2px 0 10px; }
.qr { width: min(36vh, 300px); min-width: 180px; aspect-ratio: 1; }
.qr svg { display: block; width: 100%; height: 100%; border-radius: 10px; }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 6px; }
.counts div { background: var(--card); border-radius: 20px; padding: 12px 16px; text-align: center; }
.counts b { display: block; font-size: clamp(40px, min(8vw, 12vh), 96px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.counts div:last-child b { color: var(--accent-ink); }
.counts span { font-size: clamp(15px, 2vw, 22px); color: var(--ink-2); }
.poll-line { color: var(--ink-3); font-size: 14px; margin: 0 0 14px; }
.poll-line.bad, .rep-meta.bad { color: #b3261e; }
.reveal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.reveal-note { font-size: clamp(16px, 1.8vw, 20px); color: var(--ink-2); }
.opening { margin: 18px 0 0; font-size: 16px; color: var(--ink-2); border-left: 4px solid var(--warm); padding-left: 12px; }

/* ---------- 揭曉後 ---------- */
.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.rep-head h1 { margin: 0 0 4px; }
.rep-head .t-btn { flex: none; }
.rep-meta { color: var(--ink-2); font-size: 15px; margin: 0; }
.demo-banner { background: #fff6e0; border: 1px dashed #e0a030; border-radius: 12px; padding: 10px 14px; font-size: 16px; margin: 0 0 16px; }
/* 結算問卷、揭曉後又有人完成：老師看的提示，沒有個人資料，可以留在投影畫面上 */
.close-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--card); border-radius: 14px; padding: 10px 16px; margin: 0 0 16px; font-size: 15px; }
.close-count { font-variant-numeric: tabular-nums; }
.close-note { color: var(--ink-2); flex: 1 1 18em; min-width: 0; }
.proj-note { background: #eef4fb; border-radius: 12px; padding: 8px 14px; margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }
.proj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.panel { background: var(--card); border-radius: 20px; padding: 18px 24px 22px; min-width: 0; }
.panel.wide { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel h2 { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; margin: 0; }
.demo-tag { flex: none; font-family: var(--sans); font-size: 13px; font-weight: 700; color: #7a4f00; background: #fff1cc; border: 1px dashed #e0a030; border-radius: 999px; padding: 1px 10px; margin-left: 8px; }
.panel .sub { color: var(--ink-2); font-size: clamp(14px, 1.4vw, 16px); margin: 0 0 12px; }
.headline { font-size: clamp(18px, 2vw, 24px); line-height: 1.5; margin: 0 0 14px; }
.headline b { color: var(--accent-ink); font-size: 1.3em; }

/* 座位格 */
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 8px; }
.seat { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: clamp(22px, 2.3vw, 30px); line-height: 1; background: var(--rt); box-shadow: inset 0 -4px 0 var(--rc); }
.seat.empty { background: transparent; box-shadow: none; border: 2px dashed var(--line); }
.seats.flip .seat { animation: seat-in .5s ease both; }
@keyframes seat-in { from { opacity: 0; transform: rotateY(90deg) scale(.8); } to { opacity: 1; transform: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--rc); }

/* 長條 */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(7em, 40%) minmax(0, 1fr) 6em; align-items: center; gap: 12px; font-size: clamp(15px, 1.6vw, 19px); }
.bar-label { display: flex; align-items: center; gap: 6px; line-height: 1.35; }
.bar-icon { font-size: 1.2em; }
.bar-track { height: 22px; background: #f1f4f7; border-radius: 0 6px 6px 0; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--calm); border-radius: 0 6px 6px 0; transition: width .6s ease; }
.bar-fill.c { background: var(--rc); }
.bar-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bar-val small { font-weight: 400; color: var(--ink-3); font-size: .78em; }

/* 想做和做了 */
.gap-cols, .gap-row { display: grid; grid-template-columns: minmax(8em, 36%) minmax(0, 1fr); gap: 12px; }
.gap-cols { font-size: 14px; color: var(--ink-3); margin-bottom: 4px; }
.gap-row { align-items: center; margin-bottom: 10px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.35; }
.gap-label small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gap-bar { display: flex; gap: 2px; height: 34px; }
.gap-zero { color: var(--ink-3); }
.seg { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: var(--rc); }
.seg:first-child { border-radius: 6px 0 0 6px; }
.seg:last-child { border-radius: 0 6px 6px 0; }
.seg:only-child { border-radius: 6px; }
.seg.r-dm, .seg.r-nothing { color: var(--ink); }

/* 第一個人開口 */
.tl { --dot: 18px; }
.tl-plot { display: flex; align-items: flex-end; gap: 4px; min-height: 90px; border-bottom: 2px solid #c3c9d0; padding-top: 4px; }
.tl-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 4px; }
.tl-dots { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.tl-dots i { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--calm); }
.tl-col.first .tl-dots i { background: var(--accent); }
.tl-flag { font-size: 13px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.tl-axis { display: flex; gap: 4px; margin: 4px 0 8px; }
.tl-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ORID */
.orid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.orid > div { background: #f7f9fa; border-radius: 16px; padding: 14px 16px; }
.orid .letter { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent-ink); }
.orid h3 { font-size: 18px; margin: 4px 0 8px; }
.orid ul { margin: 0; padding-left: 1.1em; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; }
.orid li { margin-bottom: 6px; }
.hook { display: inline-block; margin-top: 6px; background: #fff3e6; color: var(--accent-ink); border-radius: 8px; padding: 2px 8px; font-size: 14px; }
.rules { margin: 14px 0 0; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); }

/* 匿名句子 */
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.note-card { margin: 0; font-family: var(--hand); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.6; background: #fffdf6; border: 1px solid #ece6dc; border-radius: 10px; padding: 14px 18px; box-shadow: 0 6px 16px rgba(70, 45, 20, .06); overflow-wrap: anywhere; }

/* ---------- 只給老師看（不要投影） ---------- */
.t-private { margin-top: 28px; border-radius: 20px; overflow: hidden; background: #dfe5eb; }
.t-room .t-private { margin-top: 22px; }
.t-private > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 22px; background: #2f3f4e; color: #fff; font-size: 18px; font-weight: 700; }
.t-private > summary::-webkit-details-marker { display: none; }
.t-private > summary::before { content: "▸"; font-size: 16px; }
.t-private[open] > summary::before { content: "▾"; }
.t-private > summary small { font-size: 14px; font-weight: 400; color: #d5dde5; }
.pending-badge { background: var(--warm); color: #2b2420; border-radius: 999px; padding: 1px 10px; font-size: 14px; }
.private-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; padding: 14px 22px 24px; }
.pv { background: var(--card); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.pv.wide { grid-column: 1 / -1; }
.pv.alert { background: #fff5f4; box-shadow: inset 4px 0 0 #d03b3b; }
.pv h3 { font-size: 18px; margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; }
.pv h4 { font-size: 15px; margin: 14px 0 6px; }
.pv p { margin: 0 0 8px; font-size: 15px; }
.pv .big { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.pv .remind { background: #f7f9fa; border-radius: 10px; padding: 8px 10px; }
.queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.queue li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.q-text { font-size: 16px !important; overflow-wrap: anywhere; }
.q-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-wrap { overflow-x: auto; }
.pp { width: 100%; border-collapse: collapse; font-size: 15px; }
.pp th, .pp td { border-top: 1px solid var(--line); padding: 8px 6px; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp th:first-child, .pp td:first-child { text-align: left; white-space: normal; }
.pp th { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.pp td small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.pp .up { color: #006300; font-weight: 700; }
.pp .down { color: #b3261e; font-weight: 700; }
.lead { margin: 0; padding-left: 1.2em; font-size: 15px; }
.lead li { margin-bottom: 6px; }

/* 提示訊息 */
.t-msg { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: #1f2933; color: #fff; padding: 10px 18px; border-radius: 14px; font-size: 15px; line-height: 1.5; z-index: 50; box-shadow: 0 10px 30px rgba(31, 41, 51, .3); }

/* ---------- 窄螢幕 ---------- */
@media (max-width: 1100px) {
  .orid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .proj, .private-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .t-wrap { padding: 16px 16px 48px; }
  .t-pass { width: 100%; }
  .t-pass input { flex: 1; min-width: 0; width: auto; }
  .join { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
  .qr { width: min(70vw, 260px); min-width: 0; }
  .counts { gap: 8px; }
  .counts div { padding: 10px 4px; border-radius: 14px; }
  .rep-head { flex-direction: column; gap: 8px; }
  .panel { padding: 16px 16px 18px; border-radius: 16px; }
  .private-body { padding: 12px 12px 18px; }
  .orid { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(0, 1fr) 5.5em; gap: 4px 10px; }
  .bar-label { grid-column: 1 / -1; }
  .gap-cols { display: none; }
  .gap-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .seats { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
  .seat { border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .seats.flip .seat { animation: none; }
  .bar-fill { transition: none; }
}