:root {
  --bg: #0b0d12;
  /* Trong hơn hẳn trước (0.78 -> 0.4): mọi panel giờ chỉ là 1 LỚP MỎNG nổi trên camera full màn hình,
     không còn là khối nền đặc chiếm chỗ riêng nữa. */
  --panel: rgba(16, 18, 24, 0.4);
  --panel-solid: #171a22;
  --border: rgba(255, 255, 255, 0.08);
  --fg: #eef0f4;
  --fg-soft: #a7adbb;
  --fg-dim: #6b7180;
  --brand: #5db8ff;
  --good: #3ddc84;
  --bad: #ff5d6c;

  --c-thumb: #ffffff;
  --c-index: #37c6ff;
  --c-middle: #a86bff;
  --c-ring: #ffb648;
  --c-pinky: #ff5d8f;

  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, "Segoe UI", Roboto, "Be Vietnam Pro", Arial, sans-serif;
  overflow: hidden;
}

#app {
  height: 100%;
  position: relative;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* .main-row chỉ còn là wrapper trong suốt — .stage (camera) giờ tự phủ kín toàn màn hình (position:fixed),
   không chia cột với bảng mã nữa, nên không cần display:flex ở đây. */
.main-row {
  display: contents;
}

/* ---------- Khung camera: PHỦ KÍN TOÀN MÀN HÌNH, mọi thứ khác là lớp nổi bên trên ---------- */
.stage {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  z-index: 0;
}

#stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* video nguồn: không display:none (iOS có thể dừng decode), chỉ đưa ra ngoài tầm nhìn */
.sr-video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

.hud {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.hud .card, .hud.card { pointer-events: auto; }

.hud-top {
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.status-card {
  padding: 12px 18px;
  min-width: 220px;
}
.status-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-card__title h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 700;
}
.dot-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-dim);
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.2s, box-shadow 0.2s;
}
.dot-badge.live {
  background: var(--good);
  box-shadow: 0 0 10px 1px var(--good);
}
.status-card__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-soft);
}
.status-card__sub.good { color: var(--good); }
.status-card__sub.bad { color: var(--bad); }

.fps-card {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fg-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.fps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
}
#fps-value { color: var(--fg); font-weight: 700; }

.hud-legend {
  top: 92px;
  left: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 260px;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  transition: opacity 0.15s;
}
.legend-row.inactive { opacity: 0.4; }
.legend-dot {
  width: 11px;
  height: 11px;
  min-width: 11px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0 var(--c);
  transition: box-shadow 0.15s;
}
.legend-row.active .legend-dot {
  box-shadow: 0 0 10px 3px var(--c);
}
/* Ngón đang được "ngắm" nhưng chưa chốt: nhấp nháy nhẹ, khác hẳn trạng thái đã nhận (.active sáng đứng). */
.legend-row.arming .legend-dot {
  animation: arming-pulse 0.45s ease-in-out infinite alternate;
}
@keyframes arming-pulse {
  from { box-shadow: 0 0 0 0 var(--c); opacity: 0.4; }
  to { box-shadow: 0 0 7px 2px var(--c); opacity: 1; }
}
.legend-name { min-width: 92px; font-weight: 600; }
.legend-mean { color: var(--fg-soft); }

/* Bảng mã: LUÔN là lớp nổi (position:fixed) đè lên góc phải camera — không còn chiếm hẳn 1 cột layout
   riêng như trước, nhờ vậy camera full màn hình ở mọi kích thước màn hình. */
.sidebar-chart {
  position: fixed;
  top: 92px;
  right: 16px;
  width: 300px;
  max-height: calc(100vh - 110px);
  padding: 14px 16px;
  overflow-y: auto;
  z-index: 6;
}
.sidebar-chart[hidden] { display: none; }
/* Bảng mã đè lên camera nên cho trong hơn mức chung của .card: nền nhạt hơn và blur nhẹ hơn hẳn, để người
   dùng vừa tra bảng mã vừa thấy tay mình phía sau. Chữ bù lại bằng bóng đổ. */
.sidebar-chart {
  background: rgba(16, 18, 24, 0.22);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.sidebar-chart .chart-cell,
.sidebar-chart .chart-card__head h2,
.sidebar-chart .chart-section-label {
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.85);
}

.hud-settings {
  top: 92px;
  right: 16px;
  width: 300px;
  max-height: calc(100vh - 110px);
  padding: 14px 16px;
  overflow-y: auto;
}
.hud-settings[hidden] { display: none; }

.chart-card__head, .settings-card .chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.chart-card__head h2 {
  font-size: 14px;
  margin: 0;
  color: var(--fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 10px;
  font-size: 12.5px;
}
.chart-cell {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--fg-soft);
  transition: background 0.15s, color 0.15s;
}
.chart-cell .ch { font-weight: 700; color: var(--fg); min-width: 14px; }
.chart-cell .code { font-family: "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 1px; }
.chart-cell.match {
  background: rgba(93, 184, 255, 0.18);
  color: var(--brand);
}
.chart-cell.match .ch { color: var(--brand); }
.chart-section-label {
  grid-column: 1 / -1;
  color: var(--fg-dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-soft);
  margin-bottom: 14px;
}
.field-tip {
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.4;
}
.field-tip--block {
  margin: -8px 0 14px;
}
.field--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.field select {
  background: #0f1218;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
}
.field input[type="range"] { width: 100%; }
.field input[type="checkbox"] { width: 18px; height: 18px; }

.btn {
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fg);
}
.btn--danger { background: rgba(255, 93, 108, 0.16); color: #ff8a93; width: 100%; }
.btn--danger:hover { background: rgba(255, 93, 108, 0.28); }
.btn--ghost { background: rgba(255, 255, 255, 0.07); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.13); }

.icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--fg-soft);
  border-radius: 10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--fg); }
.icon-btn.active { color: var(--brand); border-color: var(--brand); }

/* Nút nổi (Floating Action Button) cho cài đặt/bảng mã/âm thanh — đè lên camera. Đặt bên TRÁI, ngay dưới
   bảng chú giải: bên phải giờ bị bảng mã/cài đặt chiếm gần hết chiều cao (cũng là lớp nổi), còn đáy màn
   hình thì panel chữ/tin nhắn chiếm trọn bề ngang — chỉ còn khoảng trống bên trái là luôn rảnh. */
.hud-actions {
  top: 310px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--fg);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}
.fab:hover { background: rgba(255, 255, 255, 0.12); }
.fab.active { color: var(--brand); border-color: var(--brand); }

/* ---------- Panel dưới: chữ đang gõ + tin nhắn — LỚP NỔI ở đáy màn hình, không còn chiếm chỗ riêng
   khiến camera bị co lại như trước. ---------- */
.panel-bottom {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 14px 18px 16px;
  z-index: 6;
  max-height: 40vh;
  overflow-y: auto;
}
.panel-bottom__row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.panel-label {
  font-size: 10.5px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.current-letter { flex: 1; min-width: 0; }
.current-letter__body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
}
.seq-display {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.seq-placeholder {
  color: var(--fg-dim);
  font-size: 14px;
}
.sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 900;
  background: var(--brand);
  border-radius: 999px;
  animation: pop 0.18s ease-out;
}
.sym.dot { width: 14px; height: 14px; }
.sym.dash { width: 34px; height: 14px; border-radius: 7px; }
@keyframes pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.seq-preview {
  font-size: 30px;
  font-weight: 800;
  min-width: 34px;
  text-align: center;
  color: var(--brand);
  text-shadow: 0 0 18px rgba(93, 184, 255, 0.5);
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.message-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.message-row .panel-label { flex-basis: 100%; margin-bottom: 4px; }
.message-text {
  flex: 1;
  min-width: 160px;
  font-size: 18px;
  line-height: 1.5;
  word-break: break-word;
  min-height: 26px;
}
.message-text:empty::before {
  content: "Tin nhắn sẽ hiện ở đây…";
  color: var(--fg-dim);
}
.message-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--fg-soft);
  flex-shrink: 0;
}

/* ---------- Hiệu ứng kết thúc bản tin (chụm cả 5 ngón ×2) ---------- */
.finale-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 10, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  pointer-events: none;
}
.finale-overlay[hidden] { display: none; }
.finale-text {
  font-size: clamp(26px, 6vw, 60px);
  font-weight: 800;
  color: #fff;
  text-align: center;
  max-width: 88vw;
  word-break: break-word;
  text-shadow: 0 0 36px rgba(93, 184, 255, 0.55);
  letter-spacing: 0.01em;
}
.finale-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  will-change: transform, opacity;
}

.toast {
  position: fixed;
  /* Trước đặt ở đáy màn hình — giờ panel chữ/tin nhắn cũng nổi ở đáy nên dễ đè lên nhau, chuyển lên
     gần đỉnh (dưới hàng trạng thái/FPS, giữa 2 bên) để không đụng gì cả. */
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 440px);
  text-align: center;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- Cảnh báo trình duyệt tích hợp (Zalo/Messenger/...) ---------- */
.inapp-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #3a2a0a;
  border-bottom: 1px solid #6b4e14;
  color: #ffe6b3;
  font-size: 13px;
  line-height: 1.5;
}
.inapp-banner[hidden] { display: none; }
.inapp-banner__text { flex: 1; min-width: 220px; }
.inapp-banner__text strong { color: #ffd166; }
.inapp-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.inapp-banner .btn--ghost {
  background: rgba(255, 214, 102, 0.16);
  color: #ffd166;
}
.inapp-banner .btn--ghost:hover { background: rgba(255, 214, 102, 0.26); }
.inapp-banner .icon-btn { color: #ffe6b3; border-color: rgba(255, 214, 102, 0.3); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .hud-top { flex-direction: column; align-items: stretch; }
  .status-card { min-width: 0; }
  /* Chú giải ngón: GIỮ DỌC (không chuyển hàng ngang) và thu nhỏ lại để chỉ choán 1 góc, nhường phần lớn
     khung hình còn lại cho camera thay vì kéo dài hết chiều ngang như trước. */
  .hud-legend {
    max-width: 172px;
    padding: 9px 11px;
    gap: 6px;
  }
  .legend-row { font-size: 11px; gap: 7px; }
  .legend-name { min-width: 0; }
  .legend-mean { font-size: 10px; }
  .legend-dot { width: 9px; min-width: 9px; height: 9px; }
  .legend-card .legend-name,
  .legend-card .legend-mean {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  }

  /* Màn hẹp: bảng mã/cài đặt tràn hết bề ngang thay vì cố định 300px */
  .sidebar-chart, .hud-settings {
    left: 16px;
    right: 16px;
    width: auto;
    top: 140px;
  }
  /* Bảng mã trên điện thoại chiếm gần hết màn hình khi mở. Thứ che mất bàn tay ở đây KHÔNG phải màu nền
     (alpha đã gần như trong suốt) mà là backdrop-filter: blur làm nhoè hết hình phía sau. Nên muốn thấy
     tay thì phải hạ BLUR, không phải hạ alpha. Giữ blur rất nhẹ để chữ không bị nền camera làm rối, phần
     còn lại dựa vào bóng đổ đậm bên dưới. */
  .sidebar-chart {
    background: rgba(10, 12, 16, 0.04);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-color: rgba(255, 255, 255, 0.12);
  }
  /* Nền gần như trong suốt nên chữ cần bóng đổ đậm hơn hẳn để không bị lẫn vào camera phía sau */
  .sidebar-chart .chart-cell,
  .sidebar-chart .chart-card__head h2,
  .sidebar-chart .chart-section-label {
    text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.9);
  }
  .sidebar-chart .chart-cell.match {
    background: rgba(93, 184, 255, 0.35);
  }
  .fab { width: 40px; height: 40px; font-size: 17px; }
  .seq-preview { font-size: 24px; }
}