/* THE ONE CAPELLA 3D — giao diện (gói C). Token, khung trang, nút, thanh điều khiển chép và sửa từ
   game-capella-gio-g/claude-v1/styles.css (bố cục đã được anh Long duyệt).
   Luật tương phản cứng: MỌI chữ nằm trên nền tự chứa của chính component đó (navy + chữ ngà · ngà + chữ mực).
   v2: 2 theme — tối (mặc định, giá trị v1) và sáng «Máy chiếu» (:root[data-theme="light"]). Màu mặt + chữ đi qua token theo VAI TRÒ
   (--navy-* = mặt · --text* và --fg = chữ trên mặt · --accent-text = chữ nhấn vàng · --inv-* = trạng thái đang chọn); nền GIẤY
   (The One Page, toast, Thẻ Tiệc…) giữ ngà + chữ mực ở cả 2 theme. */

:root {
  color-scheme: dark;
  --ivory: #f6f0e3; --ivory-2: #ebe3d2; --ivory-3: #ddd2bb; --paper-line: #cdbf9f;
  --ink: #0f1a2d; --ink-2: #2f3c55; --ink-3: #56617a;
  --gold: #d9b46a; --gold-2: #f0d39a; --gold-ink: #6e4f12;
  --amber: #f2b45a; --mint: #a8e0c4; --rose: #ff9aa8; --pink: #ffb3d1;
  --pass-bg: #e6f4ec; --pass-ink: #12372a; --fail-bg: #fbe4e7; --fail-ink: #6a1424;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --radius: 12px;
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --top-h: 54px; --time-h: 56px; --tool-h: 66px; --col-w: 312px;
  --focus: #ffd27a;
}
/* v2 · bảng màu theo VAI TRÒ — theme tối = đúng giá trị v1. Khối này áp lại cho phần LUÔN TỐI khi theme sáng (Thẻ Đen). */
:root, :root[data-theme="light"] .blackcard {
  --navy-950: #070e1a; --navy-900: #0b1423; --navy-850: #0f1a2d; --navy-800: #13213a; --navy-750: #182844; --navy-700: #1f3253;
  --line: #2e4269; --line-2: #42598a;
  --text: #f6f0e3; --text-2: #cdd5e4; --text-3: #b2bed2;
  --fg: #f6f0e3;                                            /* chữ chính trên mặt (v1: --ivory dùng làm chữ) */
  --accent-text: #d9b46a; --accent-text-2: #f0d39a;         /* chữ nhấn vàng (v1: --gold / --gold-2 dùng làm chữ) */
  --inv-bg: #f6f0e3; --inv-fg: #0f1a2d; --inv-bg-hover: #ebe3d2;   /* đang chọn / đang ghi / đang ở */
  --hover-line: #5a74a8; --hover-line-2: #6a86bd;
  --warn-text: #f2b45a; --neg-text: #ffc4cc;
  --danger-bg: #3a1820; --danger-fg: #ffd6dc; --danger-line: #8a3444;
  --fade-0: rgba(15, 26, 45, 0);                            /* đầu dải mờ «Cuộn xem thêm» (= mặt bảng, trong suốt) */
  --scrim: rgba(7, 14, 26, .78);
  --timer-track: #1f3253; --timer-ring: #d9b46a;
}
/* v2 · theme sáng «Máy chiếu» (học bảng màu sáng, ấm của bản Codex): mặt ngà/kem, chữ navy, viền champagne giữ.
   Chữ nhấn vàng đổi sang vàng đậm #6e4f12 (vàng nhạt trên kem chỉ ~1,9:1). Đo WCAG ở docs/UI.md «v2». */
:root[data-theme="light"] {
  color-scheme: light;
  --navy-950: #fbf6ec;   /* thanh trên + thanh điều khiển */
  --navy-900: #efe5d2;   /* nền trang, 2 cột */
  --navy-850: #fffdf8;   /* thẻ, bảng, tấm trạm, thanh tiến trình */
  --navy-800: #f6efe1;   /* mục trong thẻ, đầu/chân bảng, lựa chọn */
  --navy-750: #fffaf2;   /* nút */
  --navy-700: #ece1c9;   /* chip, rê chuột, ô chữ cái */
  --line: #e0cfab; --line-2: #c3a873;
  --text: #0f1a2d; --text-2: #39455e; --text-3: #525c73;
  --fg: #0f1a2d;
  --accent-text: #6e4f12; --accent-text-2: #6e4f12;
  --inv-bg: #0f1a2d; --inv-fg: #f6f0e3; --inv-bg-hover: #23324f;
  --hover-line: #9c7d43; --hover-line-2: #9c7d43;
  --warn-text: #8a4b00; --neg-text: #9b1c31;
  --danger-bg: #fbe4e7; --danger-fg: #6a1424; --danger-line: #e3a0ab;
  --fade-0: rgba(255, 253, 248, 0);
  --scrim: rgba(54, 40, 18, .42);
  --timer-track: #eadcbe; --timer-ring: #b07f22;
  --shadow: 0 12px 32px rgba(70, 50, 20, .22);
  --focus: #9a5b00;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--navy-900); color: var(--text); font: 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 200; background: var(--ivory); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── khung trang */
.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: var(--col-w) minmax(0, 1fr) var(--col-w);
  grid-template-rows: var(--top-h) var(--time-h) minmax(0, 1fr) var(--tool-h);
  grid-template-areas: "top top top" "time time time" "left stage right" "tool tool tool";
  background: var(--navy-900);
}
.topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; background: var(--navy-950); border-bottom: 1px solid var(--line); min-width: 0; }
.brand, .brand-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-capella { height: 26px; width: auto; }
.brand-sep { width: 1px; height: 26px; background: var(--line-2); }
.game-title { margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; min-width: 0; }
.game-title .t-main { font-size: 20px; letter-spacing: .12em; font-weight: 850; color: var(--fg); }
.game-title .t-sub { font-size: 15px; letter-spacing: .04em; font-weight: 700; color: var(--accent-text); }
.gold { color: var(--accent-text); }
.sim-note { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.kw-pill { background: var(--ivory); border-radius: 8px; padding: 2px 6px; display: inline-flex; }
.kw-pill img { height: 28px; width: auto; }
.wordmark { font-size: 17px; letter-spacing: .02em; color: var(--fg); white-space: nowrap; font-weight: 600; }
.wordmark b { color: #ff6b7d; font-weight: 900; letter-spacing: .04em; }
.wordmark i { font-style: normal; color: var(--text-2); }

.col-left, .col-right { min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--navy-900); scrollbar-width: thin; }
.col-left { grid-area: left; border-right: 1px solid var(--line); }
.col-right { grid-area: right; border-left: 1px solid var(--line); }
.stage { grid-area: stage; position: relative; overflow: hidden; min-width: 0; min-height: 0; background: radial-gradient(ellipse at 50% 38%, #1b2c4c 0%, #0e1830 55%, #070e1a 100%); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mobile-strip { display: none; }
.mobile-close { display: none !important; }

/* ───────── nút */
.btn {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--navy-750); color: var(--fg);
  font-weight: 650; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:not(:disabled):not([aria-disabled="true"]):hover { background: var(--navy-700); border-color: var(--hover-line); }
.btn[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.btn[aria-pressed="true"]:not(:disabled):hover { background: var(--inv-bg-hover); color: var(--inv-fg); }
.btn.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn.primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--gold-2); color: var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--navy-800); color: var(--text-3); border-color: var(--line); cursor: not-allowed; }
.btn.small { min-height: 44px; padding: 0 12px; font-size: 15px; }
.btn.ghost { background: transparent; }
.btn.ghost:not(:disabled):hover { background: var(--navy-750); }
.btn.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-line); }
.btn.danger:not(:disabled):hover { background: #4a1f29; color: #ffe3e7; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.seg .btn { border: 0; border-radius: 0; min-width: 48px; padding: 0 10px; }
.seg .btn + .btn { border-left: 1px solid var(--line); }
.seg-label { font-size: 14px; color: var(--text-2); margin-right: 6px; }

.toolbar { grid-area: tool; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; background: var(--navy-950); border-top: 1px solid var(--line); flex-wrap: nowrap; min-width: 0; }
.toolbar .grp { display: flex; align-items: center; gap: 8px; }
.toolbar .sep { width: 1px; height: 30px; background: var(--line); margin: 0 2px; }
.toolbar .mobile-only { display: none; }

/* ───────── thanh tiến trình: 8 trạm · Line-Up · Giờ G */
.timebar { grid-area: time; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--navy-850); border-bottom: 1px solid var(--line); min-width: 0; }
.wchip { flex: none; display: grid; line-height: 1.15; padding: 4px 12px; border-radius: 10px; background: var(--navy-750); border: 1px solid var(--line-2); color: var(--fg); max-width: 270px; }
.wchip b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wchip span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pdot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 850; font-size: 13px; background: var(--navy-900); color: var(--fg); border: 2px solid var(--line-2); position: relative; }
.pdot.done { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.pdot.now { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); box-shadow: 0 0 0 5px rgba(217, 180, 106, .35); }
.pdot.down { background: var(--danger-bg); color: var(--danger-fg); border-color: #c24a5e; }
.plink { flex: none; width: 8px; height: 2px; background: var(--line-2); }
.ppill { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; background: var(--navy-900); color: var(--text-2); border: 2px solid var(--line-2); white-space: nowrap; }
.ppill.now { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.ppill.done { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.gtrack { position: relative; flex: 1; min-width: 120px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 999px; background: var(--navy-900); border: 2px solid var(--line-2); color: var(--text-2); }
.gtrack.now { border-color: var(--inv-bg); }
.gtrack.done { border-color: var(--gold); }
.gtrack .gl { flex: none; font-size: 14px; font-weight: 850; color: var(--fg); }
.gtrack .gbar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--navy-700); }
.gtrack .gfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #a98645, #e9c987); }
.gmark { position: absolute; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; border: 2px solid var(--navy-900); }
.gmark.pass { background: var(--mint); color: var(--pass-ink); }
.gmark.fail { background: #ff8696; color: #3a0a14; }
.gmark.wow { background: var(--pink); color: #4a1030; }
.gmark.warn { background: var(--amber); color: var(--ink); }
.gtrack .gt { flex: none; font-size: 14px; font-weight: 750; color: var(--fg); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.phase-chip { flex: none; font-size: 15px; font-weight: 750; padding: 6px 12px; border-radius: 999px; background: var(--navy-700); color: var(--fg); white-space: nowrap; border: 1px solid var(--line-2); }
.phase-chip.hot { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }

/* ───────── The One Page (giấy ngà — chữ mực) */
.onesheet { background: var(--ivory); color: var(--ink); border-radius: var(--radius); padding: 10px 12px 8px; border-top: 5px solid var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.onesheet h2 { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 850; }
.onesheet h2 small { font-size: 12px; letter-spacing: .02em; text-transform: none; font-weight: 700; color: var(--ink-3); }
.onesheet .rules { margin: 2px 0 6px; font-size: 12px; color: var(--ink-3); }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.line { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; padding: 4px 0; border-bottom: 1px dashed var(--paper-line); color: var(--ink); }
.line:last-child { border-bottom: 0; }
.line .ln { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--ink); color: var(--ivory); margin-top: 1px; }
.line .ld { font-size: 13px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.line .ld .lt { font-size: 11px; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--gold-ink); }
.line .lx { font-size: 14.5px; line-height: 1.28; color: var(--ink); font-weight: 600; }
.line.empty .lx { color: var(--ink-3); font-weight: 500; letter-spacing: .2em; }
.line.empty .ln { background: var(--ivory-3); color: var(--ink-2); }
.line.now { background: #fff8e6; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--gold); padding-left: 4px; padding-right: 4px; margin: 2px -4px; }
.line.now .ln { background: var(--gold-ink); color: var(--ivory); }
.line.now .lx { color: var(--gold-ink); font-weight: 750; letter-spacing: 0; }
.line.now .lx::after { content: "▍"; margin-left: 2px; animation: caret 1s steps(1) infinite; }
.line.fresh { animation: inkin .8s ease-out; }
.line.down .ln { background: #8a2a3c; color: #fff1f3; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes inkin { from { background: #ffe9a8; } to { background: transparent; } }

/* ───────── điểm tiệc (navy) */
.scorecard { background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--text); }
.scorecard h2, .incidents h2, .judges h2, .gclock h2 { margin: 0 0 6px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 800; }
.sc-total { display: flex; align-items: baseline; gap: 8px; }
.sc-total b { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.05; }
.sc-total span { font-size: 15px; color: var(--text-2); }
.sc-total .sc-goal { margin-left: auto; font-size: 13px; font-weight: 750; padding: 2px 8px; border-radius: 999px; background: var(--navy-700); color: var(--fg); border: 1px solid var(--line-2); white-space: nowrap; }
.sc-total .sc-goal.ok { background: var(--pass-bg); color: var(--pass-ink); border-color: #9fd0b6; }
.sc-rows { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.sc-rows li { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 14px; color: var(--text-2); padding: 2px 0; border-bottom: 1px solid var(--navy-750); }
.sc-rows li:first-child { grid-column: 1 / -1; font-size: 15px; }
.sc-rows li b { color: var(--fg); font-variant-numeric: tabular-nums; }
.sc-rows li.neg b { color: var(--neg-text); }
.sc-note { margin: 6px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.3; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 4px; }
.pips i { width: 9px; height: 16px; border-radius: 2px; background: var(--ivory); border: 1px solid var(--gold); }
.pips i.off { background: #5a2733; border-color: #a54a5c; transform: rotate(-70deg) translateX(3px); }

/* ───────── cột phải */
.gclock, .incidents, .judges { background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--text); }
.gc-row { display: flex; align-items: baseline; gap: 8px; }
.gc-row b { font-size: 36px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.05; }
.gc-row span { font-size: 15px; color: var(--text-2); }
.gc-row .gc-speed { margin-left: auto; font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--navy-700); color: var(--fg); border: 1px solid var(--line-2); }
.gc-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.35; }
.gc-sub b { color: var(--fg); }
.inc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inc { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 6px 8px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); }
.inc .it { font-size: 12px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.inc .in { font-size: 15px; font-weight: 700; color: var(--fg); line-height: 1.3; }
.inc .iw { grid-column: 2; font-size: 13px; color: var(--text-2); line-height: 1.3; }
.inc .chip { grid-column: 2; justify-self: start; }
.inc.warning { border-color: var(--amber); }
.inc.pass { border-color: #4f9e78; }
.inc.fail { border-color: #c24a5e; }
.inc.wow { border-color: #d77aa6; }
.inc.preview { border-style: dashed; border-color: var(--line-2); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 850; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.chip.pass { background: var(--pass-bg); color: var(--pass-ink); border-color: #9fd0b6; }
.chip.fail { background: var(--fail-bg); color: var(--fail-ink); border-color: #e3a0ab; }
.chip.warn { background: #3a2412; color: #ffd9a8; border-color: #8a5a22; }
.chip.wow { background: #fde7f1; color: #5a1238; border-color: #e7a6c4; }
.chip.info { background: var(--navy-700); color: var(--fg); border-color: var(--line-2); }
.muted { color: var(--text-2); font-size: 15px; margin: 0; }
.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.face { display: grid; justify-items: center; gap: 1px; padding: 4px 2px 6px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); text-align: center; }
.face svg { width: 48px; height: 48px; }
.face .fr { font-size: 12px; font-weight: 800; color: var(--fg); line-height: 1.2; }
.face .fm { font-size: 12px; font-weight: 700; color: var(--text-2); }
.face.happy { border-color: #4f9e78; }
.face.worried { border-color: var(--amber); }

/* ───────── lớp nhãn 3D, băng thông báo, toast */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.tag { position: absolute; left: 0; top: 0; will-change: transform; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(11, 20, 35, .93); color: var(--ivory); border: 1px solid var(--line-2); font-size: 14px; font-weight: 750; white-space: nowrap; }
.tag .tn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--ivory); color: var(--ink); }
.tag.now { background: var(--ivory); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 180, 106, .45); font-size: 16px; }
.tag.now .tn { background: var(--ink); color: var(--ivory); }
.tag.done .tn { background: var(--gold); color: var(--ink); }
.tag.dim { opacity: .82; }
.itag { position: absolute; left: 0; top: 0; will-change: transform; padding: 4px 10px; border-radius: 10px; font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.itag.warning { background: #3a2412; color: #ffe2bd; border: 2px solid var(--amber); }
.itag.pass { background: var(--pass-bg); color: var(--pass-ink); border: 2px solid #4f9e78; }
.itag.fail { background: var(--fail-bg); color: var(--fail-ink); border: 2px solid #c24a5e; }
.itag.wow { background: #fde7f1; color: #5a1238; border: 2px solid #d77aa6; }
.dtag { position: absolute; left: 0; top: 0; will-change: transform; padding: 2px 8px; border-radius: 8px; background: rgba(11, 20, 35, .93); color: var(--ivory); border: 1px solid var(--line-2); font-size: 13px; font-weight: 800; white-space: nowrap; }
.dtag.down { background: #3a1820; color: #ffd6dc; border-color: #8a3444; }

.banners { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; display: grid; gap: 6px; width: min(680px, calc(100% - 24px)); pointer-events: none; }
.banner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(11, 20, 35, .96); color: var(--ivory); border: 2px solid var(--line-2); font-size: 17px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.banner b { color: var(--ivory); }
.banner .bi { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 16px; background: var(--navy-700); color: var(--ivory); }
.banner.warning { border-color: var(--amber); } .banner.warning .bi { background: var(--amber); color: var(--ink); }
.banner.pass { border-color: var(--mint); } .banner.pass .bi { background: var(--mint); color: var(--pass-ink); }
.banner.fail { border-color: #ff8696; } .banner.fail .bi { background: #ff8696; color: #3a0a14; }
.banner.wow { border-color: var(--pink); } .banner.wow .bi { background: var(--pink); color: #4a1030; }
.banner .sec { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 15px; white-space: nowrap; }
.banner .bsub { display: block; font-size: 14px; color: var(--text-2); }

.toasts { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: grid; gap: 8px; width: min(620px, calc(100% - 24px)); pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 12px; background: var(--ivory); color: var(--ink); font-size: 17px; font-weight: 650; box-shadow: var(--shadow); border-left: 6px solid var(--gold); animation: toast-in .25s ease-out; }
.toast.fail { border-left-color: #c43c52; } .toast.pass { border-left-color: #2f8a5e; } .toast.wow { border-left-color: #c2588b; }
.toast small { display: block; font-size: 14px; color: var(--ink-2); font-weight: 600; }
@keyframes toast-in { from { transform: translateY(8px); } to { transform: none; } }

.pausecard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; background: rgba(11, 20, 35, .97); color: var(--ivory); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 20px; text-align: center; box-shadow: var(--shadow); max-width: min(460px, calc(100% - 24px)); }
.pausecard p { margin: 0 0 10px; font-size: 17px; }
.fps { position: absolute; right: 8px; bottom: 8px; z-index: 6; background: rgba(11, 20, 35, .92); color: var(--ivory); border: 1px solid var(--line-2); border-radius: 8px; padding: 2px 8px; font: 600 13px/1.4 ui-monospace, Menlo, monospace; }

/* ───────── lớp phủ chung */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.sheet { position: relative; width: 100%; max-width: 980px; max-height: calc(100dvh - 32px); overflow: auto; background: var(--navy-850); color: var(--text); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 26px; scrollbar-width: thin; }
.sheet h2 { margin: 0 0 6px; font-size: 26px; color: var(--fg); outline: none; }
.sheet h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.sheet p { margin: 0 0 10px; font-size: 17px; color: var(--text); }
.sheet .close { position: absolute; right: 12px; top: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ───────── màn mở: chọn chế độ + tiệc */
.intro { background: radial-gradient(ellipse at 50% 30%, rgba(27, 44, 76, .9), rgba(7, 14, 26, .95)); }
.intro .sheet { max-width: 1060px; text-align: center; }
.in-brand { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.in-brand .logo-capella { height: 30px; }
.in-title { margin: 6px 0 0; font-size: 46px; letter-spacing: .12em; font-weight: 900; color: var(--fg); line-height: 1.1; }
.in-sub { margin: 4px 0 10px !important; font-size: 22px !important; font-weight: 750; color: var(--accent-text) !important; letter-spacing: .04em; }
.in-lede { font-size: 20px !important; font-weight: 650; color: var(--fg) !important; margin: 0 auto 4px !important; max-width: 780px; }
.in-note { font-size: 16px !important; color: var(--text-2) !important; max-width: 760px; margin: 0 auto 10px !important; }
.in-sec { margin: 14px 0 6px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 800; }
.picks { display: grid; gap: 12px; }
.picks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.picks.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick { position: relative; display: grid; gap: 2px; align-content: start; text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--navy-800); color: var(--fg); cursor: pointer; min-height: 44px; }
.pick:hover:not(:disabled) { background: var(--navy-750); border-color: var(--hover-line); }
.pick[aria-checked="true"] { background: var(--navy-700); border-color: var(--inv-bg); box-shadow: inset 0 0 0 2px var(--inv-bg); }
.pick:disabled { cursor: not-allowed; background: var(--navy-850); border-style: dashed; color: var(--text-2); }
.pick .pk-t { font-size: 20px; font-weight: 850; color: inherit; }
.pick .pk-s { font-size: 15px; color: var(--text-2); line-height: 1.35; }
.pick .pk-k { font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.pick .pk-lock { font-size: 13px; font-weight: 750; color: var(--text-2); }
.pick .pk-on { position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 850; background: var(--inv-bg); color: var(--inv-fg); border-radius: 6px; padding: 1px 7px; display: none; }
.pick[aria-checked="true"] .pk-on { display: block; }
.in-opts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.in-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.in-actions .btn.primary { min-width: 240px; min-height: 54px; font-size: 19px; }
.in-foot { margin-top: 12px !important; font-size: 14px !important; color: var(--text-3) !important; }

/* ───────── Thẻ Tiệc (6 giây) */
.wcard { background: linear-gradient(180deg, rgba(7, 14, 26, .15), rgba(7, 14, 26, .55)); place-items: end center; padding-bottom: calc(var(--tool-h) + 24px); }
.wc { width: min(640px, calc(100% - 24px)); background: var(--ivory); color: var(--ink); border-radius: 18px; padding: 16px 22px 14px; border-top: 6px solid var(--gold); box-shadow: var(--shadow); text-align: center; animation: wcin .5s ease-out; }
.wc .wc-k { font-size: 14px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.wc h2 { margin: 2px 0 2px; font-size: 32px; color: var(--ink); outline: none; }
.wc .wc-c { font-size: 22px; font-weight: 750; color: var(--ink); margin: 0; }
.wc .wc-f { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0; padding: 0; list-style: none; }
.wc .wc-f li { font-size: 15px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ivory-2); color: var(--ink); border: 1px solid var(--paper-line); }
.wc .wc-n { font-size: 15px; color: var(--ink-2); margin: 0 0 10px; }
.wc .wc-bar { height: 4px; border-radius: 2px; background: var(--ivory-3); overflow: hidden; margin-bottom: 10px; }
.wc .wc-bar i { display: block; height: 100%; width: 0; background: var(--gold-ink); }
.wc .btn { min-width: 220px; }
@keyframes wcin { from { transform: translateY(16px) scale(.98); } to { transform: none; } }

/* ───────── tấm trạm / Line-Up / Hậu tiệc: bảng bên phải giữa thanh tiến trình và thanh điều khiển */
.station, .lineup, .debrief { top: calc(var(--top-h) + var(--time-h)); bottom: var(--tool-h); place-items: stretch end; padding: 8px 12px; background: linear-gradient(90deg, rgba(7, 14, 26, 0) 0%, rgba(7, 14, 26, 0) 30%, rgba(7, 14, 26, .45) 70%); }
.panel { width: min(640px, 47vw); max-height: 100%; display: flex; flex-direction: column; background: var(--navy-850); color: var(--text); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.debrief .panel { width: min(760px, 56vw); }
.p-head { flex: none; padding: 12px 18px 10px; border-bottom: 1px solid var(--line); background: var(--navy-800); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.p-step { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.p-head h2 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--fg); outline: none; grid-column: 1; }
.p-who { grid-column: 1; margin: 2px 0 0; font-size: 16px; color: var(--text-2); line-height: 1.35; }
.p-who b { color: var(--fg); }
.p-timer { grid-column: 2; grid-row: 1 / span 3; width: 78px; height: 78px; position: relative; display: grid; place-items: center; }
.p-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.p-timer b { position: relative; font-size: 30px; font-weight: 900; color: var(--fg); font-variant-numeric: tabular-nums; }
.p-timer.low b { color: var(--warn-text); }
.p-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 18px 6px; position: relative; overscroll-behavior: contain; background: var(--navy-850); scrollbar-width: thin; }
.p-more { display: none; position: sticky; bottom: -6px; margin: 0 -18px; padding: 14px 0 6px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-2); background: linear-gradient(180deg, var(--fade-0) 0%, var(--navy-850) 55%); pointer-events: none; }
.p-scroll.has-more .p-more { display: block; }
.blk-h { margin: 4px 0 6px; font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.private { margin: 0 0 12px; padding: 10px 12px 10px 52px; position: relative; border-radius: 12px; background: #fdf3df; color: var(--ink); border: 2px solid #c79a4b; box-shadow: inset 0 0 0 3px #fff9ec; }
.private::before { content: ""; position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d7505f, #8e1f2e 70%); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.private .pv-k { display: block; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #7a2030; }
.private .pv-t { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.minisheet { margin: 0 0 8px; padding: 6px 10px; border-radius: 12px; background: var(--ivory); color: var(--ink); border-top: 4px solid var(--gold); }
.minisheet .line { padding: 3px 0 3px 32px; }
.minisheet .line .lx { font-size: 15px; }
.blind-note { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--navy-800); border: 1px dashed var(--line-2); color: var(--text-2); font-size: 15px; }
.p-opts { flex: none; display: grid; gap: 8px; padding: 8px 18px 10px; border-top: 1px solid var(--line); background: var(--navy-850); }
.opt { display: grid; grid-template-columns: 46px 1fr; gap: 2px 12px; align-items: center; text-align: left; padding: 9px 12px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--navy-800); color: var(--fg); cursor: pointer; min-height: 60px; }
.opt:hover:not(:disabled) { border-color: var(--hover-line-2); background: var(--navy-750); }
.opt[aria-checked="true"] { border-color: var(--inv-bg); background: var(--navy-700); box-shadow: inset 0 0 0 2px var(--inv-bg); }
.opt .letter { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: var(--navy-700); color: var(--fg); border: 2px solid var(--line-2); }
.opt[aria-checked="true"] .letter { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.opt .ol { font-size: 18px; font-weight: 750; line-height: 1.32; color: var(--fg); }
.opt .on { font-size: 14px; line-height: 1.3; color: var(--text-2); font-style: italic; }
.opt.blind { border-style: dashed; }
.opt:disabled { cursor: not-allowed; opacity: 1; background: var(--navy-850); color: var(--text-2); }
.opt:disabled .ol { color: var(--text-2); }
.p-foot { flex: none; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--navy-800); display: flex; align-items: center; gap: 12px; }
.p-foot .hint { flex: 1; font-size: 15px; line-height: 1.35; color: var(--text-2); margin: 0; }
.p-foot .btn.primary { min-width: 170px; min-height: 52px; font-size: 18px; }
.p-foot .btn { min-height: 52px; }

/* Line-Up */
.lu-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lu-line { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--ivory); color: var(--ink); border-left: 5px solid var(--gold); }
.lu-line .ln { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 15px; background: var(--ink); color: var(--ivory); }
.lu-line .lb { display: grid; gap: 0; min-width: 0; }
.lu-line .lb small { font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.lu-line .lb span { font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.lu-line .btn { min-height: 44px; font-size: 14px; padding: 0 10px; background: var(--ivory-2); color: var(--ink); border-color: var(--paper-line); }
.lu-line .btn:not(:disabled):hover { background: var(--ivory-3); color: var(--ink); border-color: #b9a77f; }
.lu-line.picked { box-shadow: inset 0 0 0 2px var(--ink); }
.andon { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--line-2); color: var(--text); }
.andon p { margin: 0 0 6px; font-size: 15px; color: var(--text-2); }
.andon p b { color: var(--fg); }
.andon .lost { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: 8px; padding: 6px 8px; margin: 0; }
.andon .used { color: var(--pass-ink); background: var(--pass-bg); border: 1px solid #9fd0b6; border-radius: 8px; padding: 6px 8px; margin: 0; }

/* Thẻ Đen — chọn thứ tự xử lý */
.blackcard { background: rgba(7, 14, 26, .7); }
.blackcard .sheet { max-width: 640px; border: 2px solid var(--ivory); background: #0a0f1a; }
.blackcard .bc-k { display: inline-block; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--ivory); border-radius: 6px; padding: 2px 8px; }
.blackcard .p-opts { padding: 8px 0 0; border: 0; background: transparent; }

/* ───────── Hậu tiệc */
.db-score { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 0 0 10px; }
.db-total { display: grid; justify-items: center; padding: 8px 16px; border-radius: 14px; background: var(--ivory); color: var(--ink); border-top: 4px solid var(--gold); }
.db-total b { font-size: 44px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.db-total span { font-size: 14px; font-weight: 750; color: var(--ink-2); }
.db-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.db-cats li { display: grid; gap: 0; padding: 6px 8px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); }
.db-cats li b { font-size: 22px; font-weight: 900; color: var(--fg); font-variant-numeric: tabular-nums; }
.db-cats li span { font-size: 13px; color: var(--text-2); line-height: 1.25; }
.db-cats li.neg b { color: var(--neg-text); }
.lesson { margin: 0 0 10px !important; padding: 12px 14px; border-radius: 14px; background: var(--navy-750); border: 2px solid var(--gold); font-size: 19px !important; font-weight: 700; color: var(--fg) !important; line-height: 1.4; }
.cf-list, .inc-done, .local-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.cf-list li { padding: 8px 12px; border-radius: 12px; background: var(--ivory); color: var(--ink); border-left: 6px solid #c43c52; font-size: 16px; line-height: 1.4; }
.cf-list li b { color: var(--ink); }
.cf-list li q { font-weight: 700; color: var(--ink); quotes: "“" "”"; }
.inc-done li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); font-size: 16px; color: var(--fg); }
.local-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); font-size: 15px; color: var(--text); }
.local-list li b { color: var(--accent-text-2); font-variant-numeric: tabular-nums; }
.judge-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.judge-in label { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--line-2); font-size: 15px; font-weight: 750; color: var(--fg); }
.judge-in .seg .btn { min-width: 0; flex: 1; }
.judge-in .seg { display: flex; }
.judge-in small { font-size: 13px; font-weight: 600; color: var(--text-2); }
.discuss { margin: 6px 0 10px !important; padding: 14px 16px; border-radius: 14px; background: var(--ivory); color: var(--ink) !important; font-size: 22px !important; font-weight: 800; line-height: 1.35; border-left: 8px solid var(--gold); }

/* ───────── The One Capella */
.chain { place-items: end stretch; padding: 0; background: linear-gradient(180deg, rgba(7, 14, 26, 0) 0%, rgba(7, 14, 26, 0) 34%, rgba(7, 14, 26, .55) 60%, rgba(7, 14, 26, .92) 100%); }
.ch-wrap { width: 100%; max-height: 100dvh; overflow-y: auto; padding: 12px 16px 16px; display: grid; gap: 10px; }
.ch-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 10px 14px; border-radius: 16px; background: rgba(11, 20, 35, .96); border: 1px solid var(--line-2); }
.ch-head h2 { margin: 0; font-size: 26px; color: var(--fg); outline: none; }
.ch-head h2 span { color: var(--accent-text); }
.ch-head p { margin: 0; font-size: 15px; color: var(--text-2); }
.ch-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.ch-card { display: grid; gap: 4px; align-content: start; padding: 8px 9px 9px; border-radius: 14px; background: var(--ivory); color: var(--ink); border-top: 5px solid var(--gold); min-width: 0; }
.ch-card .cn { display: flex; align-items: baseline; gap: 6px; }
.ch-card .cn b { font-size: 22px; font-weight: 900; color: var(--gold-ink); line-height: 1; }
.ch-card .cn span { font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.ch-card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ch-card ol li { font-size: 12px; line-height: 1.3; color: var(--ink-2); border-bottom: 1px dashed var(--paper-line); padding: 1px 0 2px; }
.ch-card ol li i { font-style: normal; font-weight: 850; color: var(--ink); }
.ch-card label { font-size: 12px; font-weight: 850; color: var(--ink); margin-top: 2px; }
.ch-card textarea { width: 100%; min-height: 58px; resize: vertical; border-radius: 10px; border: 2px solid var(--paper-line); background: #fffdf7; color: var(--ink); padding: 6px 8px; font-size: 14px; font-weight: 650; line-height: 1.3; }
.ch-card textarea::placeholder { color: var(--ink-3); }
.ch-card textarea:focus { border-color: var(--gold-ink); outline: none; box-shadow: 0 0 0 3px rgba(110, 79, 18, .25); }
.ch-card .cc { font-size: 12px; font-weight: 750; color: var(--ink-2); text-align: right; }
.ch-card .cc.over { color: #8a1424; }
.ch-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ch-actions .btn { min-height: 52px; font-size: 17px; }

/* ───────── xem lại 24 lựa chọn, trợ giúp, cài đặt, xác nhận */
.rv-w { margin: 0 0 12px; }
.rv-w h3 { margin: 10px 0 6px !important; }
.rv-item { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 6px 10px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); margin-bottom: 6px; color: var(--fg); font-size: 15px; }
.rv-item .ln { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: var(--inv-bg); color: var(--inv-fg); }
.rv-item small { color: var(--text-2); font-size: 13px; }
.help .sheet, .settings .sheet { max-width: 780px; }
.help ul { margin: 0; padding-left: 20px; font-size: 17px; }
.help li { margin: 4px 0; }
.kbd { display: inline-block; min-width: 26px; padding: 0 6px; border-radius: 6px; background: var(--ivory); color: var(--ink); font-weight: 800; font-size: 14px; text-align: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.set-row small { display: block; color: var(--text-2); font-size: 14px; }
.set-row input[type="number"] { width: 110px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--navy-900); color: var(--fg); padding: 0 10px; font-size: 17px; }
.confirm .sheet { max-width: 480px; text-align: center; }
.boot-error { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: var(--navy-900); color: var(--fg); font-size: 18px; text-align: center; }

/* ───────── màn phổ thông 1366×768 và thấp hơn */
@media (max-width: 1680px) { .toolbar .lbl-opt { display: none; } }
@media (max-width: 1440px) { :root { --col-w: 292px; } .sim-note { display: none; } }
@media (max-width: 1280px) { .toolbar .lbl-2 { display: none; } .game-title .t-sub { display: none; } }
@media (max-height: 820px) and (min-width: 761px) {
  :root { --top-h: 48px; --time-h: 50px; --tool-h: 60px; }
  .line { padding: 3px 0; }
  .line .lx { font-size: 14px; }
  .sc-total b, .gc-row b { font-size: 28px; }
  .face svg { width: 40px; height: 40px; }
  .p-head h2 { font-size: 21px; }
  .opt { min-height: 54px; padding: 7px 12px; }
  .opt .ol { font-size: 17px; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  :root { --col-w: 256px; }
  .wordmark { font-size: 15px; }
  .toolbar .lbl { display: none; }
  .wchip { max-width: 180px; }
  .panel { width: min(600px, 58vw); }
}

/* ───────── điện thoại dọc */
@media (max-width: 760px) {
  :root { --top-h: 46px; --time-h: 44px; --tool-h: 58px; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top-h) var(--time-h) minmax(0, 1fr) auto var(--tool-h);
    grid-template-areas: "top" "time" "stage" "strip" "tool";
  }
  .topbar { padding: 0 10px; gap: 8px; }
  .logo-capella { height: 18px; }
  .brand-sep, .sim-note, .game-title { display: none; }
  .kw-pill img { height: 20px; }
  .wordmark { font-size: 13px; }
  .brand, .brand-right { gap: 8px; }
  .timebar { padding: 0 8px; gap: 6px; }
  .wchip { display: none; }
  .prog { gap: 3px; }
  .pdot { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; }
  .plink { display: none; }
  .ppill { padding: 2px 6px; font-size: 11px; border-width: 1.5px; }
  .gtrack { min-width: 0; height: 24px; padding: 0 6px; gap: 4px; border-width: 1.5px; }
  .gtrack .gl { font-size: 11px; }
  .gtrack .gt { font-size: 11px; min-width: 30px; }
  .gtrack .gt .gt-max { display: none; }
  .phase-chip { display: none; }
  .col-left, .col-right { display: none; }
  .mobile-strip { grid-area: strip; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--navy-850); border-top: 1px solid var(--line); font-size: 15px; min-width: 0; }
  .mobile-strip .ms-a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
  .mobile-strip .ms-b { flex: none; font-weight: 850; color: var(--inv-fg); background: var(--inv-bg); border-radius: 8px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
  .mobile-strip .ms-f { flex: none; display: flex; gap: 2px; }
  .mobile-strip .ms-f svg { width: 24px; height: 24px; }
  .toolbar { gap: 6px; padding: 6px 8px; justify-content: space-between; }
  .toolbar .desk-only { display: none !important; }
  .toolbar .mobile-only { display: inline-flex; }
  .toolbar .lbl, .toolbar .sep { display: none; }
  .banners { top: 6px; }
  .banner { font-size: 14px; padding: 6px 10px; }
  .banner .bi { width: 24px; height: 24px; font-size: 13px; }
  .toasts { bottom: 8px; }
  .toast { font-size: 15px; padding: 8px 12px; }
  .tag { font-size: 12px; padding: 1px 7px 1px 3px; }
  .tag .tn { width: 18px; height: 18px; font-size: 11px; }
  .tag.now { font-size: 13px; }
  .itag { font-size: 13px; padding: 3px 8px; }
  /* The One Page dạng tấm trượt dưới */
  .app.show-sheet .col-left { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 80dvh; z-index: 40; border: 1px solid var(--line-2); border-radius: 18px 18px 0 0; box-shadow: var(--shadow); padding: 12px 12px 18px; }
  .app.show-sheet .mobile-close { display: inline-flex !important; align-self: flex-end; }
  .sheet { padding: 16px 14px; border-radius: 16px; }
  .sheet h2 { font-size: 22px; }
  .in-title { font-size: 30px; letter-spacing: .08em; }
  .in-sub { font-size: 18px !important; }
  .in-lede { font-size: 17px !important; }
  .picks.two, .picks.three { grid-template-columns: 1fr; }
  .pick { padding: 9px 12px; }
  .pick .pk-t { font-size: 18px; }
  .wcard { padding: 0 8px calc(var(--tool-h) + 10px); }
  .wc h2 { font-size: 24px; }
  .wc .wc-c { font-size: 18px; }
  .station, .lineup, .debrief { top: 0; bottom: 0; place-items: end stretch; padding: 0; background: linear-gradient(180deg, rgba(7, 14, 26, 0) 0%, rgba(7, 14, 26, 0) 30%, rgba(7, 14, 26, .5) 50%); }
  .panel, .debrief .panel { width: 100%; max-height: 66dvh; border-radius: 16px 16px 0 0; }
  .debrief .panel { max-height: 78dvh; }
  .p-head { padding: 8px 12px 6px; }
  .p-step { font-size: 12px; }
  .p-head h2 { font-size: 18px; }
  .p-who { font-size: 14px; }
  .p-timer { width: 56px; height: 56px; }
  .p-timer b { font-size: 22px; }
  .p-scroll { padding: 8px 12px 4px; }
  .p-more { margin: 0 -12px; }
  .private { padding: 8px 10px 8px 44px; }
  .private::before { left: 10px; top: 10px; width: 24px; height: 24px; }
  .private .pv-t { font-size: 15px; }
  .p-opts { padding: 6px 12px 8px; gap: 6px; }
  .opt { grid-template-columns: 38px 1fr; gap: 2px 10px; padding: 6px 10px; min-height: 48px; border-radius: 12px; }
  .opt .letter { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  .opt .ol { font-size: 15px; }
  .opt .on { font-size: 12px; }
  .p-foot { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .p-foot .hint { font-size: 13px; }
  .p-foot .btn.primary { min-width: 120px; min-height: 48px; font-size: 17px; }
  .lu-line { grid-template-columns: 28px 1fr auto; padding: 5px 8px; }
  .lu-line .ln { width: 26px; height: 26px; font-size: 13px; }
  .lu-line .lb span { font-size: 15px; }
  .db-score { grid-template-columns: 1fr; }
  .db-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .judge-in { grid-template-columns: 1fr; }
  .discuss { font-size: 18px !important; }
  .chain { place-items: end stretch; background: linear-gradient(180deg, rgba(7, 14, 26, 0) 0%, rgba(7, 14, 26, 0) 22%, rgba(7, 14, 26, .9) 42%); }
  .ch-wrap { max-height: 72dvh; padding: 8px 10px 12px; }
  .ch-head h2 { font-size: 20px; }
  .ch-grid { grid-template-columns: 1fr 1fr; }
}

/* điện thoại xoay ngang / màn thấp */
@media (max-height: 520px) and (min-width: 761px) {
  :root { --top-h: 40px; --time-h: 40px; --tool-h: 52px; --col-w: 230px; }
  .col-right { display: none; }
  .app { grid-template-columns: var(--col-w) minmax(0, 1fr); grid-template-areas: "top top" "time time" "left stage" "tool tool"; }
  .scorecard { display: none; }
  .toolbar .lbl, .sim-note, .game-title .t-sub { display: none; }
  .station, .lineup, .debrief { top: 0; bottom: 0; padding: 6px; }
  .panel { width: min(620px, 64vw); }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .wc, .line.fresh { animation: none; }
  .line.now .lx::after { animation: none; }
}
html.reduce-motion .toast, html.reduce-motion .wc, html.reduce-motion .line.fresh { animation: none; }
html.reduce-motion .line.now .lx::after { animation: none; }
/* băng thông báo + toast né bảng bên phải khi bảng mở (desktop); điện thoại ẩn khi bảng mở */
.app.panel-open .banners, .app.panel-open .toasts { left: 12px; transform: none; width: min(520px, 46%); }
@media (max-width: 760px) { .app.panel-open .banners, .app.panel-open .toasts { display: none; } }
@media (max-height: 940px) and (min-width: 761px) { .onesheet .rules { display: none; } .onesheet h2 { margin-bottom: 4px; } }
/* The One Page gọn: tên bộ phận chạy cùng dòng chữ (tiết kiệm 1 dòng mỗi trạm → 8 dòng + điểm tiệc vừa cột 1440×900) */
.line { display: block; position: relative; padding-left: 32px; min-height: 30px; }
.line .ln { position: absolute; left: 0; top: 5px; }
.line .ld { display: inline; margin-right: 6px; font-size: 12px; }
.line .ld .lt { margin-left: 4px; }
.line .lx { display: inline; }
.line.now { padding-left: 36px; }
.line.now .ln { left: 4px; }
.lu-line .lb small { display: block; }
/* Màn The One Capella: bỏ 2 cột HUD để dây domino dùng trọn bề ngang */
@media (min-width: 761px) {
  .app[data-phase="chain"], .app[data-phase="ended"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .app[data-phase="chain"] .col-left, .app[data-phase="chain"] .col-right, .app[data-phase="ended"] .col-left, .app[data-phase="ended"] .col-right { display: none; }
}
.minisheet .line.now { padding-left: 36px; }
@media (max-width: 760px) {
  .intro .in-actions { position: sticky; bottom: -16px; margin: 10px -14px -16px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--fade-0) 0%, var(--navy-850) 30%); }
  .in-note { font-size: 15px !important; }
  .in-brand { gap: 8px; }
}
@media (max-width: 760px) { .dtag { font-size: 11px; padding: 1px 6px; } .p-foot .hint { display: none; } }
/* luật chặn v3: quân «đứng vững» */
.dtag.brace { background: #f0d39a; color: var(--ink); border-color: #b8862e; }
.line.brace .ln { background: var(--gold-ink); color: var(--ivory); box-shadow: 0 0 0 2px #e9c987; }
.line.brace .ld .lt { color: var(--gold-ink); font-weight: 900; }
.brace-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.brace-list li { padding: 8px 12px; border-radius: 12px; background: var(--ivory); color: var(--ink); border-left: 6px solid #b8862e; font-size: 16px; line-height: 1.4; }
/* toast lên trên (dưới băng thông báo) — đáy khung là chỗ của dây domino, không được che */
.toasts { bottom: auto; top: 132px; }
.app.panel-open .toasts { top: 12px; bottom: auto; }
@media (max-width: 760px) { .toasts { top: 92px; bottom: auto; } }
/* màn thấp (1366×768): trong Giờ G / Hậu tiệc mỗi dòng The One Page gọn 1 dòng để Điểm tiệc luôn thấy (bản đầy đủ ở Line-Up & Hậu tiệc) */
/* QA gói D (L-01): ngưỡng nâng 820 → 880 px (1536×864 vẫn bị cắt thẻ Điểm tiệc 19 px) */
@media (max-height: 880px) and (min-width: 761px) {
  .app[data-phase="gday"] .onesheet .line, .app[data-phase="debrief"] .onesheet .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 26px; }
  .app[data-phase="gday"] .onesheet .line .lx, .app[data-phase="debrief"] .onesheet .line .lx { font-size: 13.5px; }
}
/* QA gói D (L-01): màn 881–1000 px cao (1440×900, 1600×900): dòng ONE dài ~4 dòng/trạm làm cột trái cao hơn khung 110–180 px → thẻ «Điểm tiệc» bị cắt ngay trong Giờ G.
   Kẹp mỗi dòng The One Page ≤ 2 dòng chữ (…) trong Giờ G; bản đầy đủ vẫn ở Line-Up, tấm trạm và Hậu tiệc. */
@media (min-height: 881px) and (max-height: 1000px) and (min-width: 761px) {
  .app[data-phase="gday"] .onesheet .line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 0; }
}
/* QA gói D (L-07): cuối Giờ G Tiệc 3 danh sách sự cố có 8 mục (mỗi mục 3–4 dòng) đẩy thẻ «Hai Họ» (4 nét mặt) khuất hẳn khỏi cột phải ở MỌI màn (cuộn thừa 153 px ở 1920×1080, 372 px ở 1440×900).
   Mỗi mục gọn còn 1 dòng [giờ · tên cắt … · QUA/NGÃ] (tên đầy đủ vẫn ở băng trên cảnh và ở Hậu tiệc); màn thấp ≤ 820 px: Hai Họ lên ngay dưới đồng hồ, danh sách sự cố tự cuộn trong khung. */
@media (min-width: 761px) {
  .inc { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 4px 8px; }
  .inc .in { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .inc:not(.preview) .iw { display: none; }
  .inc .chip { grid-column: 3; grid-row: 1; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .col-right .gclock { order: 0; } .col-right .judges { order: 1; } .col-right .incidents { order: 2; flex: 0 1 auto; min-height: 96px; overflow-y: auto; }
}
/* QA gói D (L-03): dải điện thoại «Giờ G 78/90 · 8/8 quân đứng» bị cắt «…» ở 360 px và ở 390 px khi điểm 2 chữ số → chữ 13 px, mặt Hai Họ 20 px */
@media (max-width: 400px) {
  .mobile-strip { font-size: 13px; gap: 6px; }
  .mobile-strip .ms-f svg { width: 20px; height: 20px; }
}
/* Hậu tiệc: bảng đã có đủ điểm + The One Page + Hai Họ → ẩn 2 cột HUD để dây domino bên trái to hơn */
@media (min-width: 761px) {
  .app[data-phase="debrief"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .app[data-phase="debrief"] .col-left, .app[data-phase="debrief"] .col-right { display: none; }
}
@media (max-width: 760px) {
  .ch-head { padding: 8px 10px; }
  .ch-head p { font-size: 13px; }
  .ch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .ch-actions .btn { min-height: 44px; font-size: 14px; padding: 0 8px; white-space: normal; line-height: 1.2; }
}

/* ═════════════════════════ v2 — học từ bản Codex (KWV-296 · 20.10.26) ═════════════════════════ */

/* ── 1) 6 chương kể chuyện: nhãn nhỏ «Chương 01 · Lời hứa» (số in hoa nhỏ + tên serif nghiêng) */
.chap { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1.15; white-space: nowrap; }
.chap-n { font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.chap-t { font: italic 600 15px/1.15 Georgia, "Times New Roman", "Noto Serif", serif; color: var(--fg); }
.tb-chap { flex: none; min-width: 0; }
.tb-chap:empty { display: none; }
.tb-chap .chap { display: grid; gap: 1px; padding: 1px 0 1px 10px; border-left: 3px solid var(--gold); }
.tb-chap .chap-t { font-size: 16px; }
/* nhãn chương + dòng «Tiệc · Trạm» chung 1 hàng (tự xuống dòng khi hẹp) — không thêm chiều cao so với v1 */
.p-kick { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.p-kick .p-step { min-width: 0; }
.wc .chap.in-card { justify-content: center; margin-bottom: 2px; }
.wc .chap.in-card .chap-n { color: var(--gold-ink); }
.wc .chap.in-card .chap-t { color: var(--ink); }
.p-foot .hint .chap.in-foot { margin-right: 4px; vertical-align: baseline; }
.p-foot .hint .chap.in-foot .chap-t { font-size: 14px; }
/* gạch chân vàng dưới các bước của chương đang diễn ra (thanh tiến trình) */
.ppill { position: relative; }
.pdot.inch::after, .ppill.inch::after, .gtrack.inch::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -8px; height: 3px; border-radius: 2px; background: var(--gold); }
/* tagline «Để yêu thương được trọn vẹn.» — serif nghiêng, nhỏ hơn dòng «Một tiệc cưới · …» */
.intro .in-tag { margin: 2px auto 10px; font: italic 500 18px/1.3 Georgia, "Times New Roman", "Noto Serif", serif; color: var(--accent-text-2); letter-spacing: .01em; }
.ch-kick { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 2px; }
.ch-kick .tagline { font: italic 500 16px/1.2 Georgia, "Times New Roman", "Noto Serif", serif; color: var(--accent-text-2); }
.help .chap-i { font-family: Georgia, "Times New Roman", "Noto Serif", serif; }

/* ── 2) «Phiếu lời hứa»: nhãn phụ nhỏ ở dòng Sales của The One Page (giấy ngà — chữ vàng đậm) */
.lp { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 800; font-style: italic; letter-spacing: .02em; text-transform: none; line-height: 1.45; background: #f3e3bd; color: #5c420e; border: 1px solid #d9bf86; vertical-align: 1px; white-space: nowrap; }
.lu-line .lb small .lp { font-size: 11px; }

/* ── 3) Chế độ Lớp: «Hội ý một nhịp — cả bàn cùng quyết định.» dưới nút Xác nhận */
.p-confirm { flex: none; display: grid; justify-items: end; gap: 3px; }
.p-foot.klass { padding-top: 8px; padding-bottom: 7px; }
.huddle { font-size: 13px; line-height: 1.25; font-style: italic; color: var(--text-2); text-align: right; white-space: nowrap; }
.pick .pk-huddle { font-style: italic; }
.p-focus { margin: 0 0 6px !important; font-size: 15px !important; }
.p-focus b { color: var(--accent-text-2); }
.fg { color: var(--fg); }

/* ── 4) Màn chờ lúc nạp (L-06): luôn nền navy; mờ dần 300 ms sau khung 3D đầu tiên; tự ẩn sau 12 s hoặc khi lỗi */
.loading { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 40%, #16264a 0%, #0b1423 58%, #070e1a 100%); color: #f6f0e3; opacity: 1; transition: opacity .3s ease; }
.loading.out { opacity: 0; pointer-events: none; }
.ld-box { display: grid; justify-items: center; gap: 2px; width: 100%; max-width: 440px; text-align: center; }
.ld-logo { height: 34px; width: auto; margin-bottom: 12px; }
.ld-box p { margin: 0; }
.ld-title { font-size: 34px; font-weight: 900; letter-spacing: .14em; line-height: 1.1; color: #f6f0e3; }
.ld-sub { font-size: 18px; font-weight: 750; letter-spacing: .04em; color: #d9b46a; }
.ld-tag { margin: 8px 0 18px !important; font: italic 500 16px/1.3 Georgia, "Times New Roman", "Noto Serif", serif; color: #f0d39a; }
.ld-bar { width: min(300px, 80vw); height: 6px; border-radius: 3px; background: #1f3253; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 8%; border-radius: 3px; background: linear-gradient(90deg, #a98645, #e9c987); animation: ldfill 9s cubic-bezier(.1, .7, .2, 1) forwards; }
.ld-text { margin-top: 10px !important; font-size: 16px; color: #cdd5e4; }
@keyframes ldfill { from { width: 8%; } to { width: 92%; } }
html.reduce-motion .loading { transition: none; }
html.reduce-motion .ld-bar i { animation: none; width: 55%; }
@media (prefers-reduced-motion: reduce) { .loading { transition: none; } .ld-bar i { animation: none; width: 55%; } }
@media (max-width: 760px) { .ld-title { font-size: 26px; letter-spacing: .1em; } .ld-logo { height: 26px; } }

/* ── 6) Nhãn phiên bản «v2 · 20.10.2026» (src/config/version.js) */
.intro .ver { position: absolute; top: 12px; right: 16px; font-size: 12px; font-weight: 750; letter-spacing: .03em; color: var(--text-3); }
.help .ver-line { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.help .ver-line b { color: var(--fg); }
.set-row > .seg, .set-row > .btn { flex: none; }

/* vòng đồng hồ 30 giây (chế độ Lớp) theo token */
.p-timer .tm-track { stroke: var(--timer-track); }
.p-timer .tm-ring { stroke: var(--timer-ring); }

/* ── 5) Theme sáng «Máy chiếu»: các mặt dùng màu literal (nhãn nổi, băng, lớp phủ, cảnh 3D phía sau canvas trong suốt) */
:root[data-theme="light"] .stage { background: radial-gradient(ellipse at 50% 34%, #fffaf0 0%, #f3e8d3 52%, #e2d1b1 100%); }
:root[data-theme="light"] #app[data-mood="dark"] .stage { background: radial-gradient(ellipse at 50% 38%, #343a4e 0%, #1b2032 60%, #0f131e 100%); }
:root[data-theme="light"] .logo-capella { box-sizing: content-box; padding: 3px 8px; border-radius: 8px; background: #0f1a2d; }
:root[data-theme="light"] .wordmark b { color: #b3122f; }
:root[data-theme="light"] .tag { background: rgba(255, 253, 248, .97); color: var(--fg); border-color: #b9a06a; box-shadow: 0 2px 8px rgba(60, 40, 10, .18); }
:root[data-theme="light"] .tag .tn { background: var(--ink); color: var(--ivory); }
:root[data-theme="light"] .tag.now { background: var(--ink); color: var(--ivory); border-color: var(--gold); }
:root[data-theme="light"] .tag.now .tn { background: var(--ivory); color: var(--ink); }
:root[data-theme="light"] .tag.done .tn { background: var(--gold); color: var(--ink); }
:root[data-theme="light"] .tag.dim { opacity: 1; color: var(--text-2); }
:root[data-theme="light"] .dtag { background: rgba(255, 253, 248, .97); color: var(--fg); border-color: #b9a06a; }
:root[data-theme="light"] .dtag.down { background: var(--fail-bg); color: var(--fail-ink); border-color: #c24a5e; }
:root[data-theme="light"] .itag.warning { background: #fff1d9; color: #5a3608; border-color: #d08a1e; }
:root[data-theme="light"] .banner { background: rgba(255, 253, 248, .97); color: var(--fg); box-shadow: 0 6px 18px rgba(60, 40, 10, .22); }
:root[data-theme="light"] .banner b, :root[data-theme="light"] .banner .bi { color: var(--fg); }
:root[data-theme="light"] .banner.warning .bi { color: var(--ink); }
:root[data-theme="light"] .banner.pass .bi { color: var(--pass-ink); }
:root[data-theme="light"] .banner.fail .bi { color: #3a0a14; }
:root[data-theme="light"] .banner.wow .bi { color: #4a1030; }
:root[data-theme="light"] .banner.warning { border-color: #d08a1e; }
:root[data-theme="light"] .banner.pass { border-color: #4f9e78; }
:root[data-theme="light"] .banner.fail { border-color: #c24a5e; }
:root[data-theme="light"] .banner.wow { border-color: #d77aa6; }
:root[data-theme="light"] .pausecard { background: rgba(255, 253, 248, .98); color: var(--fg); }
:root[data-theme="light"] .chip.warn { background: #fff1d9; color: #5a3608; border-color: #d9a24a; }
:root[data-theme="light"] .kbd { border: 1px solid var(--line-2); }
:root[data-theme="light"] .lesson { background: #fff6df; }
:root[data-theme="light"] .intro { background: radial-gradient(ellipse at 50% 30%, rgba(255, 250, 240, .88), rgba(226, 210, 178, .94)); }
:root[data-theme="light"] .wcard { background: linear-gradient(180deg, rgba(60, 40, 10, 0), rgba(60, 40, 10, .2)); }
:root[data-theme="light"] .station, :root[data-theme="light"] .lineup, :root[data-theme="light"] .debrief { background: linear-gradient(90deg, rgba(60, 40, 10, 0) 0%, rgba(60, 40, 10, 0) 30%, rgba(60, 40, 10, .14) 70%); }
:root[data-theme="light"] .chain { background: linear-gradient(180deg, rgba(239, 229, 210, 0) 0%, rgba(239, 229, 210, 0) 34%, rgba(239, 229, 210, .6) 60%, rgba(236, 225, 204, .94) 100%); }
:root[data-theme="light"] .ch-head { background: rgba(255, 253, 248, .97); }
:root[data-theme="light"] .pips i.off { background: #c9a0a8; border-color: #a54a5c; }
@media (max-width: 760px) {
  :root[data-theme="light"] .station, :root[data-theme="light"] .lineup, :root[data-theme="light"] .debrief { background: linear-gradient(180deg, rgba(60, 40, 10, 0) 0%, rgba(60, 40, 10, 0) 30%, rgba(60, 40, 10, .16) 50%); }
  :root[data-theme="light"] .chain { background: linear-gradient(180deg, rgba(236, 225, 204, 0) 0%, rgba(236, 225, 204, 0) 22%, rgba(236, 225, 204, .92) 42%); }
}

/* desktop hẹp 761–1024 px (máy tính bảng dọc 768): chip chương + nút theme thêm ~160 px → bỏ chip tiệc (tên tiệc vẫn ở đầu The One Page
   và các bảng), thu khoảng cách thanh điều khiển — 768 px không còn tràn (v1 vốn tràn ~43 px ở 800 px) */
@media (max-width: 1024px) and (min-width: 761px) {
  .timebar { gap: 10px; }
  .timebar .wchip { display: none; }
  .gtrack { min-width: 90px; }
  .gtrack .gt { min-width: 30px; }
  .gtrack .gt .gt-max { display: none; }   /* như bản điện thoại: «43» thay «43 / 90 giây» (đồng hồ đầy đủ ở cột phải) */
  .tb-chap .chap-t { font-size: 14px; }
  .phase-chip { padding: 5px 10px; font-size: 14px; }
  .toolbar, .toolbar .grp { gap: 6px; }
  .toolbar .sep { display: none; }
}

/* ── mobile 390×844: chương hiện ở dải trên (thanh tiến trình 2 tầng) · hội ý dưới nút Xác nhận ghim đáy */
@media (max-width: 760px) {
  :root { --time-h: 58px; }
  .timebar { flex-wrap: wrap; align-content: center; row-gap: 3px; }
  .tb-chap { order: -1; flex: 1 0 100%; }
  .tb-chap .chap { display: flex; justify-content: center; align-items: baseline; gap: 6px; padding: 0; border-left: 0; }
  .tb-chap .chap-n { font-size: 11px; }
  .tb-chap .chap-t { font-size: 13.5px; }
  .prog { flex: 1 1 100%; }
  .pdot.inch::after, .ppill.inch::after, .gtrack.inch::after { bottom: -5px; height: 2px; }
  .p-foot.klass .p-confirm { width: 100%; justify-items: stretch; }
  .p-foot.klass .huddle { text-align: center; font-size: 12px; white-space: normal; }
  .p-head .chap.in-panel, .ch-kick .chap.in-panel { display: none; }   /* điện thoại: chương đã hiện ở dải trên */
  .intro .ver { top: 8px; right: 10px; font-size: 11px; }
  .intro .in-tag { font-size: 16px; }
  .chap-t { font-size: 14px; }
}

/* ═════════════════════════ v3 — ONE CAPELLA LIVE · phòng chơi nhiều máy (KWV-297 · gói C2) ═════════════════════════
   Luật tương phản giữ nguyên: mọi chữ nằm trên nền tự chứa của component; màu bộ phận (--dc0..7) chỉ tô HÌNH (chấm, sao, đường nối,
   ô chú giải) — chữ luôn dùng --fg/--text-2. 2 bảng màu bộ phận cho 2 theme, đều ≥ 3:1 trên nền thẻ. */
:root {
  --dc0: #ff7a9a; --dc1: #f0c25a; --dc2: #5fd19d; --dc3: #6fa8ff; --dc4: #b58cff; --dc5: #ff9a5c; --dc6: #4fd3e0; --dc7: #e683d8;
  --dash-h: clamp(206px, 29vh, 268px); --dash-hx: clamp(236px, 31vh, 290px);
  --sent-bg: #e6f4ec; --sent-fg: #12372a; --sent-line: #4f9e78;
}
:root[data-theme="light"] {
  --dc0: #c2335a; --dc1: #8a5f00; --dc2: #1f7a52; --dc3: #2463b8; --dc4: #7342c9; --dc5: #b5541b; --dc6: #0f7380; --dc7: #9c3590;
}
.dcf0 { fill: var(--dc0); } .dcf1 { fill: var(--dc1); } .dcf2 { fill: var(--dc2); } .dcf3 { fill: var(--dc3); }
.dcf4 { fill: var(--dc4); } .dcf5 { fill: var(--dc5); } .dcf6 { fill: var(--dc6); } .dcf7 { fill: var(--dc7); }
.dcs0 { stroke: var(--dc0); } .dcs1 { stroke: var(--dc1); } .dcs2 { stroke: var(--dc2); } .dcs3 { stroke: var(--dc3); }
.dcs4 { stroke: var(--dc4); } .dcs5 { stroke: var(--dc5); } .dcs6 { stroke: var(--dc6); } .dcs7 { stroke: var(--dc7); }
.dcb0 { background: var(--dc0); } .dcb1 { background: var(--dc1); } .dcb2 { background: var(--dc2); } .dcb3 { background: var(--dc3); }
.dcb4 { background: var(--dc4); } .dcb5 { background: var(--dc5); } .dcb6 { background: var(--dc6); } .dcb7 { background: var(--dc7); }

/* ── màn mở: 3 thẻ chế độ */
.picks.modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-live .pk-k { color: var(--accent-text); }
@media (max-width: 1100px) and (min-width: 761px) { .picks.modes .pk-s { font-size: 14px; } }

/* ── thanh điều khiển: nút Phòng · chấm trạm «đã gửi, chờ làn đóng» */
.room-btn.warn { border-color: var(--amber); }
.pdot.sent { background: var(--sent-bg); color: var(--sent-fg); border-color: var(--sent-line); }
.pdot.sent::before { content: "✓"; position: absolute; right: -5px; top: -6px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: #1f6b48; color: #fff; }

/* ── sảnh chờ: mã cỡ lớn + QR + 9 ô vai */
.lobby { background: radial-gradient(ellipse at 50% 30%, rgba(27, 44, 76, .94), rgba(7, 14, 26, .97)); }
:root[data-theme="light"] .lobby { background: radial-gradient(ellipse at 50% 30%, rgba(255, 250, 240, .95), rgba(226, 210, 178, .97)); }
.lobby .sheet.lobby-sheet { max-width: 1240px; padding: 18px 24px 16px; }
.lb-head { text-align: center; margin-bottom: 8px; }
.lb-kick { display: inline-block; font-size: 13px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.lb-head h2 { margin: 2px 0 2px; font-size: 28px; }
.lobby .lb-sub { margin: 0 auto 4px; max-width: 860px; font-size: 16px; color: var(--text-2); }
.lb-sub b { color: var(--fg); }
.lb-grid { display: grid; grid-template-columns: minmax(0, clamp(440px, 32vw, 560px)) minmax(0, 1fr); gap: 22px; align-items: start; }
.lb-join { display: grid; justify-items: center; gap: 8px; padding: 12px; border-radius: 16px; background: var(--navy-800); border: 1px solid var(--line-2); }
.lb-code { font-size: clamp(88px, 15vh, 160px); line-height: 1; font-weight: 900; letter-spacing: .1em; color: var(--fg); font-variant-numeric: tabular-nums; padding: 2px 0 0 .1em; }
/* QA D3 (L-v4-02 = L-v3-01 chưa gộp vào v4): mã 4 chữ có chữ rộng (M, W) + link vercel.app dài tràn khỏi khung trái (đo 1440×900: +27 px; 1920×1080: +112 px; «WMWM»: +147…+253 px) → cỡ chữ theo CHIỀU RỘNG khung (chỉ ≥ 961 px: dưới đó lưới 1 cột, giữ nguyên như cũ) */
@media (min-width: 961px) { @supports (width: 1cqw) { .lb-join { container-type: inline-size; } .lb-code { font-size: min(clamp(88px, 15vh, 160px), 22cqw); } } }
.lb-code, .lb-url, .lb-status { max-width: 100%; }
.lb-qr { width: clamp(200px, 34vh, 320px); height: clamp(200px, 34vh, 320px); padding: 10px; border-radius: 14px; background: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.lb-qr svg { width: 100%; height: 100%; display: block; }
.qr-wait { width: 100%; height: 100%; display: grid; place-items: center; color: #2f3c55; font-size: 15px; text-align: center; }
.lb-url { font-size: 15px; font-weight: 700; color: var(--accent-text-2); word-break: break-all; text-align: center; }
:root[data-theme="light"] .lb-url { color: var(--accent-text); }
.lb-status { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: 15px !important; font-weight: 700; color: var(--fg) !important; text-align: center; }
.lb-status i { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex: none; }
.lb-status.ok i { background: #3fbf7f; box-shadow: 0 0 0 4px rgba(63, 191, 127, .25); }
.lb-status.err i { background: #e5534b; }
.lb-note { margin: 0 !important; font-size: 13px !important; color: var(--text-2) !important; text-align: center; max-width: 400px; }
.lb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lb-tile { position: relative; display: grid; gap: 2px; align-content: start; min-height: 96px; padding: 10px 12px; border-radius: 14px; background: var(--navy-850); border: 2px dashed var(--line-2); color: var(--text-2); }
.lb-tile .lb-e { font-size: 24px; line-height: 1; }
.lb-tile .lb-n { font-size: 17px; font-weight: 850; color: var(--fg); }
.lb-tile .lb-d { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tile .lb-x { font-size: 13px; color: var(--text-2); }
.lb-tile.on { border-style: solid; border-color: var(--gold); background: var(--navy-700); box-shadow: 0 0 0 3px rgba(217, 180, 106, .18); }
.lb-tile.on .lb-d { color: var(--fg); font-weight: 750; }
.lb-tile.lost { border-style: solid; border-color: var(--amber); }
.lb-tile .lb-swap { justify-self: start; margin-top: 4px; min-height: 36px; font-size: 13px; padding: 0 10px; }
.lb-aud { margin: 10px 0 4px !important; font-size: 15px !important; color: var(--text-2) !important; }
.lb-aud b, .lb-tip b { color: var(--fg); }
.lb-tip { margin: 0 !important; font-size: 14px !important; color: var(--text-2) !important; }
.lb-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lb-hint { flex: 1; font-size: 14px; color: var(--text-2); }
.lb-foot .btn.primary { min-width: 240px; min-height: 54px; font-size: 19px; }
@media (max-height: 820px) and (min-width: 761px) { .lb-head h2 { font-size: 23px; } .lobby .lb-sub { font-size: 14px; } .lb-tile { min-height: 80px; padding: 8px 10px; } .lb-tile .lb-e { font-size: 20px; } }
@media (max-width: 960px) { .lb-grid { grid-template-columns: 1fr; } .lb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-foot { flex-wrap: wrap; } }

/* ── bảng làn sóng + Line-Up BĐH: bảng phải KHÔNG modal (vùng trống của lớp phủ không chặn chuột vào cảnh) */
.wavepanel, .rankboard { top: calc(var(--top-h) + var(--time-h)); bottom: var(--tool-h); place-items: stretch end; padding: 8px 12px; background: transparent; pointer-events: none; z-index: 45; }
.wavepanel .panel, .rankboard .panel { pointer-events: auto; }
.wv-clock { grid-column: 2; grid-row: 1 / span 3; position: relative; width: 104px; height: 104px; display: grid; place-items: center; align-content: center; }
.wv-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wv-clock .tm-track { stroke: var(--timer-track); } .wv-clock .tm-ring { stroke: var(--timer-ring); transition: stroke-dashoffset .25s linear; }
.wv-clock b { position: relative; font-size: 40px; line-height: 1; font-weight: 900; color: var(--fg); font-variant-numeric: tabular-nums; }
.wv-clock span { position: relative; font-size: 12px; font-weight: 750; color: var(--text-2); }
.wv-clock.low b { color: var(--warn-text); }
.wv-clock.andon .tm-ring { stroke: var(--amber); }
.wv-tiles { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wv-tile { display: grid; grid-template-columns: 40px 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--navy-800); border: 2px solid var(--line-2); color: var(--fg); min-height: 110px; }
.wv-tile .wv-n { grid-row: span 3; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-weight: 900; background: var(--inv-bg); color: var(--inv-fg); }
.wv-tile .wv-name { font-size: 18px; font-weight: 850; color: var(--fg); }
.wv-dev { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-dev.lost { color: var(--warn-text); font-weight: 700; }
.wv-dev.none { font-style: italic; }
.wv-st { font-size: 15px; font-weight: 800; color: var(--warn-text); display: flex; align-items: center; gap: 6px; }
.wv-tile .btn { grid-column: 1 / -1; justify-self: stretch; min-height: 40px; margin-top: 4px; }
.wv-tile.pick { border-color: var(--amber); }
.wv-tile.sent { border-color: var(--sent-line); background: var(--navy-750); }
.wv-tile.sent .wv-st { color: var(--fg); }
.wv-ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1f6b48; color: #fff; font-size: 13px; font-style: normal; }
.wv-dots { width: 22px; height: 6px; background: radial-gradient(circle, var(--warn-text) 2.4px, transparent 2.6px) 0 50% / 8px 6px repeat-x; animation: wvdots 1.2s steps(3) infinite; }
@keyframes wvdots { 0% { width: 6px; } 100% { width: 24px; } }
html.reduce-motion .wv-dots, html.reduce-motion .wv-clock .tm-ring { animation: none; transition: none; }
.wv-rule { margin: 0 0 6px; font-size: 15px; color: var(--text-2); }
.wv-done { margin-top: 2px; }
.p-behalf { grid-column: 1; margin: 4px 0 0; padding: 4px 8px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--fg); background: var(--navy-700); border: 1px dashed var(--line-2); }
.rb-who { margin: 0 0 6px; font-size: 15px; color: var(--text-2); }
.rb-who b { color: var(--fg); }
.rb-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.rb-c { width: 100%; display: grid; grid-template-columns: 46px 1fr; gap: 2px 10px; align-items: center; text-align: left; padding: 7px 10px; min-height: 52px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--navy-800); color: var(--fg); cursor: pointer; }
.rb-c:hover { border-color: var(--hover-line-2); background: var(--navy-750); }
.rb-c .rb-pos { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; font-weight: 900; border: 2px dashed var(--line-2); color: var(--text-2); }
.rb-c.picked { border-color: var(--inv-bg); background: var(--navy-700); }
.rb-c.picked .rb-pos { border-style: solid; background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rb-c .rb-b b { display: block; font-size: 16px; color: var(--fg); }
.rb-c .rb-b small { display: block; font-size: 14px; color: var(--text-2); line-height: 1.3; }
.rb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.rb-act .rb-sent { flex: 1; min-width: 200px; font-size: 14px; color: var(--fg); }
.muted-i { color: var(--text-2); font-style: italic; }
.andon.pending { border-color: var(--amber); }
.andon.pending b { color: var(--fg); }
.lu-line .btn svg { width: 16px; height: 16px; }
.lu-line .btn span { white-space: nowrap; }

/* ── kết quả xếp hạng BĐH (Hậu tiệc) */
.db-live { display: grid; gap: 10px; margin: 0 0 10px; }
.rank-res .rr-head { margin: 0 0 6px; font-size: 16px; color: var(--fg); }
.rank-res .rr-head b { font-size: 20px; }
.rr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rr-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: var(--navy-800); border: 1px solid var(--line); color: var(--fg); }
.rr-list li.picked { border-color: var(--gold); }
.rr-pos { font-weight: 900; font-size: 16px; color: var(--accent-text); text-align: center; }
.rr-b b { display: block; font-size: 15px; } .rr-b small { display: block; font-size: 13px; color: var(--text-2); }
.rr-c { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ── 4 chỉ số + chỉ báo dài hạn */
.metrics, .longterm { color: var(--text); }
.mt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.mt-head h3 { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 850; }
.mt-st { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.mt-list, .lt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 64px; gap: 8px; align-items: center; }
.mt-name { font-size: 14px; font-weight: 750; color: var(--fg); line-height: 1.2; }
.mt-name small { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); }
.mt-bar { position: relative; height: 12px; border-radius: 6px; background: var(--navy-700); border: 1px solid var(--line); overflow: visible; }
.mt-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #a98645, #e9c987); }
.mt-row.hi .mt-bar i, .lt-row.hi .mt-bar i { background: linear-gradient(90deg, #2f8a5e, #6fd3a0); }
.mt-row.lo .mt-bar i, .lt-row.lo .mt-bar i { background: linear-gradient(90deg, #a83a4c, #e57a8a); }
.mt-cum { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--fg); }
.mt-val { font-size: 18px; font-weight: 900; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.05; }
.mt-val small { display: block; font-size: 11px; font-weight: 700; color: var(--text-2); }
.mt-note { margin: 6px 0 0 !important; font-size: 12px !important; font-style: italic; color: var(--text-2) !important; line-height: 1.3; }
.metrics.compact .mt-row { grid-template-columns: 112px 1fr 50px; gap: 6px; }
.metrics.compact .mt-name { font-size: 13px; }
.metrics.compact .mt-val { font-size: 16px; }
.metrics.none .mt-val { color: var(--text-2); }
.debrief .metrics, .debrief .rank-res { padding: 10px 12px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--line-2); }
.debrief .metrics.compact .mt-row { grid-template-columns: 150px 1fr 56px; }
.debrief .metrics.compact .mt-name { font-size: 14px; }
.lt-row { display: grid; grid-template-columns: 132px 1fr 36px; gap: 2px 8px; align-items: center; }
.lt-row .lt-n { font-size: 14px; color: var(--fg); }
.lt-v { font-size: 17px; font-weight: 900; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
.lt-why { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.lt-list { gap: 7px; }
.jr-side .longterm .mt-note { font-size: 11.5px !important; margin-top: 4px !important; }
/* QA D3 (L-v4-04 = L-v3-02 chưa gộp vào v4): «Sau tiệc» — 4 chỉ báo bị cắt ở mọi cỡ màn (1440×900: câu #4 + ghi chú; 1366×768: chỉ thấy 1,5/4 hàng) → hiện đủ 4 hàng; ≤ 880 px cao ẩn câu diễn giải (không đủ chỗ), số + thanh luôn thấy */
.jr-side .longterm .mt-note { display: none; }
.journey .jr-side { padding-bottom: 2px; }
.jr-side .lt-list { gap: 4px; }
.jr-side .lt-why { font-size: 12px; line-height: 1.2; }
.jr-side .mt-head { margin-bottom: 2px; }
@media (max-height: 880px) and (min-width: 761px) {
  .journey .jr-side { padding-top: 2px; }
  .jr-side .lt-why { display: none; }
  .jr-side .lt-list { gap: 2px; }
  .jr-side .lt-row { grid-template-columns: 150px 1fr 34px; gap: 0 8px; }
  .jr-side .lt-row .lt-n { font-size: 13px; line-height: 1.15; }
  .jr-side .lt-v { font-size: 14px; line-height: 1.15; }
  .jr-side .lt-row .mt-bar { height: 8px; }
}
/* QA D3 (L-v4-05 = L-v3-03 chưa gộp vào v4): thẻ «Tạm dừng» ở giữa cảnh bị bảng làn/Line-Up bên phải che nửa chữ (chồng 146 px ở 1440×900, 165 px ở 1366×768) → khi có bảng mở, đưa thẻ về góc dưới trái của cảnh */
@media (min-width: 761px) { .app.panel-open .pausecard { left: 12px; top: auto; bottom: 14px; transform: none; max-width: min(400px, 38%); } }

/* ── dải Hành trình cảm xúc + 4 chỉ số (live · Giờ G + Hậu tiệc) */
.app.dash-on { grid-template-rows: var(--top-h) var(--time-h) minmax(0, 1fr) var(--dash-h) var(--tool-h); grid-template-areas: "top top top" "time time time" "left stage right" "left dash right" "tool tool tool"; }
.app.dash-x { grid-template-rows: var(--top-h) var(--time-h) minmax(0, 1fr) var(--dash-hx) var(--tool-h); }
.livedash { grid-area: dash; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 282px; gap: 8px; padding: 6px 8px; background: var(--navy-900); border-top: 1px solid var(--line); }
.app.dash-x .livedash { grid-template-columns: minmax(0, 1fr); }
.app.dash-x .dash-metrics { display: none; }
.journey, .dash-metrics { min-width: 0; min-height: 0; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
.journey { display: flex; flex-direction: column; padding: 6px 10px 4px; }
.dash-metrics { padding: 8px 10px; overflow: hidden; }
.jr-head { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.jr-head h2 { margin: 0; flex: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 850; }
.jr-cap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg); white-space: nowrap; overflow: hidden; }
.jr-cap .jr-ct { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.jr-cap .jr-cd { flex: none; font-size: 13px; color: var(--text-2); }
.dcf-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.jr-now { flex: none; display: flex; align-items: center; gap: 6px; }
.jr-now svg { width: 36px; height: 36px; }
.jr-now b { font-size: 26px; font-weight: 900; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1; }
.jr-now span { font-size: 13px; font-weight: 750; color: var(--text-2); }
.jr-body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.jr-legend { flex: none; list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.jr-legend li { display: inline-flex; align-items: center; gap: 4px; }
.jr-legend .dcf-dot { width: 9px; height: 9px; }
.jr-chart { position: relative; flex: 1; min-width: 0; min-height: 0; }
.jr-chart svg { position: absolute; inset: 0; }
.jr-side { flex: none; width: min(420px, 38%); overflow-y: auto; padding: 4px 2px 4px 12px; border-left: 1px solid var(--line); scrollbar-width: thin; }
.journey-svg .jgrid { stroke: var(--line); stroke-width: 1; }
.journey-svg .jgrid.rest { stroke-dasharray: 4 4; }
.journey-svg .jsep { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.journey-svg .jnum, .journey-svg .jax { fill: var(--text-2); font: 600 11px/1 var(--font); }
.journey-svg .jarea { fill: var(--accent-text); opacity: .12; }
.journey-svg .jline { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.journey-svg .jnow { stroke: var(--accent-text); stroke-width: 1; stroke-dasharray: 3 3; }
.journey-svg .jhead { fill: var(--accent-text); stroke: var(--navy-850); stroke-width: 2; }
.journey-svg .jlane { stroke-width: 1; opacity: .5; }
.journey-svg .jlane.mine { stroke-width: 2.4; opacity: 1; }
.journey-svg .jlab { fill: var(--text-2); font: 650 10.5px/1 var(--font); }
.journey-svg .jlab.mine { fill: var(--fg); font-weight: 850; }
.journey-svg .jlink { stroke-width: 1.1; opacity: .7; }
.journey-svg .jdot, .journey-svg .jstar { stroke: var(--navy-850); stroke-width: 1.5; }
.journey-svg .jtp.mine .jdot, .journey-svg .jtp.mine .jstar { stroke: var(--fg); stroke-width: 2; }
.journey-svg .jpk { fill: var(--fg); font: 800 11px/1 var(--font); }
.journey-svg.compact .jax { font-size: 10px; }
:root[data-theme="light"] .journey-svg .jarea { opacity: .16; }
/* Hậu tiệc live: bảng Hậu tiệc chừa chỗ cho dải hành trình 100 % rộng phía dưới */
html[data-dash="x"] .debrief { bottom: calc(var(--tool-h) + var(--dash-hx)); }
.col-metrics { display: none; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--text); }
@media (max-height: 820px) and (min-width: 761px) {
  .app.dash-on:not(.dash-x) .col-metrics { display: block; order: 0; }
  .app.dash-on .livedash { grid-template-columns: minmax(0, 1fr); }
  .app.dash-on .dash-metrics { display: none; }
}
@media (max-height: 820px) and (min-width: 761px) {
  :root { --dash-h: clamp(190px, 27vh, 222px); --dash-hx: clamp(184px, 25vh, 204px); }
  .jr-now svg { width: 30px; height: 30px; } .jr-now b { font-size: 22px; }
  html[data-dash="x"] .debrief .db-total b { font-size: 34px; }
  html[data-dash="x"] .debrief .db-cats li { padding: 4px 6px; } html[data-dash="x"] .debrief .db-cats li b { font-size: 18px; }
  html[data-dash="x"] .debrief .p-head { padding-top: 8px; padding-bottom: 6px; }
}
@media (max-width: 1180px) and (min-width: 761px) { .livedash { grid-template-columns: minmax(0, 1fr) 236px; } .metrics.compact .mt-row { grid-template-columns: 92px 1fr 44px; } }
@media (max-width: 760px) {
  :root { --dash-h: 150px; --dash-hx: 170px; }
  .app.dash-on { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) var(--time-h) minmax(0, 1fr) var(--dash-h) auto var(--tool-h); grid-template-areas: "top" "time" "stage" "dash" "strip" "tool"; }
  .livedash { grid-template-columns: minmax(0, 1fr); padding: 4px 6px; }
  .dash-metrics { display: none; }
  .jr-side { display: none; }
  .jr-cap { display: none; }
  .picks.modes { grid-template-columns: 1fr; }
  html[data-dash="x"] .debrief { bottom: 0; }
  .wavepanel, .rankboard { top: 0; bottom: 0; place-items: end stretch; padding: 0; }
  .wavepanel .panel, .rankboard .panel { width: 100%; max-height: 70dvh; border-radius: 16px 16px 0 0; }
  .wv-tiles { grid-template-columns: 1fr 1fr; gap: 6px; }
  .wv-tile { min-height: 0; padding: 6px 8px; grid-template-columns: 30px 1fr; }
  .wv-tile .wv-n { width: 28px; height: 28px; font-size: 15px; }
  .wv-tile .wv-name { font-size: 15px; }
  .wv-clock { width: 64px; height: 64px; } .wv-clock b { font-size: 24px; } .wv-clock span { display: none; }
  .lb-code { font-size: 72px; }
}

/* ── Khép vòng live: cam kết BĐH · 4 chỉ số cộng dồn · ONE Thing từ điện thoại */
.ch-bdh { margin: 4px 0 0 !important; font-size: 15px !important; font-weight: 700; color: var(--fg) !important; }
.ch-metrics { flex: 1 1 360px; max-width: 460px; padding: 8px 10px; border-radius: 12px; background: var(--navy-800); border: 1px solid var(--line-2); }
.ch-card.from-phone { box-shadow: inset 0 0 0 2px var(--gold-ink); }
.ch-card.from-phone label::after { content: " · 📱 từ điện thoại"; font-weight: 700; color: var(--gold-ink); }
.bc-live { font-size: 15px !important; }
/* v3 · soát ảnh 1440×900: The One Page «đã gửi — chờ làn đóng» không giãn chữ · thanh điều khiển live bỏ nhóm Cá nhân/Lớp (đổi chế độ ở Cài đặt) */
.line.sent .lx { letter-spacing: 0; font-style: italic; color: var(--ink-2); font-weight: 650; }
.line.sent .ln { background: #1f6b48; color: #fff; }
.app[data-live="1"] .toolbar [data-k="modegrp"], .app[data-live="1"] .toolbar [data-k="modegrp"] + .sep { display: none !important; }
.wv-dev { white-space: normal; line-height: 1.25; }