/* ============================================================
   Tàng Thư Các — KHUNG HỆ THỐNG cho đoạn 【…】 (system-blocks.css)
   Màu theo var(--accent) -> tự đổi theo MÙA + sáng/tối.
   Tất cả phần tử là <span> hiển thị block để hợp lệ trong <p class="para">.
   ============================================================ */

.para__txt--sys { display: block; }
.prose .para:has(.para__txt--sys) { text-indent: 0; }

/* chữ thường (câu dẫn không phải tiêu đề / phần sau khung) trong cùng đoạn */
.ttc-sys__pre, .ttc-sys__post { display: block; }
.ttc-sys__pre { margin-bottom: 12px; }
.ttc-sys__post { margin-top: 12px; }

/* khối khung */
.ttc-sys {
  display: block;
  margin: 6px auto 18px;
  --accent: #6fb1dd; /* xanh lam nhạt cố định cho khung hệ thống (không theo mùa) */
  --sys-bd: var(--accent);
  --sys-panel: color-mix(in oklab, var(--accent) 9%, var(--surface));
  --sys-head: color-mix(in oklab, var(--accent) 16%, var(--surface));
  --sys-glow: color-mix(in oklab, var(--accent) 48%, transparent);
  --sys-soft: color-mix(in oklab, var(--accent) 30%, transparent);
  --ttc-notch: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  filter: drop-shadow(0 0 5px var(--sys-glow));
}
.ttc-sys--err {
  --accent: #ec3b56; /* lỗi luôn đỏ, không theo mùa */
}

/* ===== Livestream: chấm LIVE nhấp nháy + vệt sáng quét ở header ===== */
.ttc-sys--live .ttc-sys__head { overflow: hidden; }
.ttc-sys--live .ttc-sys__live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: ttcsys-blink 1.2s steps(1) infinite;
}
.ttc-sys--live .ttc-sys__head::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 32%; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 42%, transparent), transparent);
  animation: ttcsys-sheen 3.8s ease-in-out infinite;
}
.ttc-sys--live .ttc-sys__body { text-align: left; }
@keyframes ttcsys-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ttcsys-sheen { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(360%); } }

/* ===== Livestream gộp nhiều bình luận: viewport + track tự trôi lên ===== */
.ttc-sys__stream {
  display: block; position: relative; max-height: 15.2em; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.ttc-sys__track { display: block; animation: ttcsys-stream var(--ttc-stream-dur, 16s) linear infinite; }
.ttc-sys--live-multi:hover .ttc-sys__track { animation-play-state: paused; }
.ttc-sys__cmt { display: block; padding: 5px 0; line-height: 1.55; }
.ttc-sys__cmt + .ttc-sys__cmt { border-top: 1px dashed color-mix(in oklab, var(--accent) 18%, transparent); }
@keyframes ttcsys-stream { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* bình luận livestream trôi từ dưới lên (mỗi bình luận = 1 khung) */
.ttc-sys--live { animation: ttcsys-rise .55s cubic-bezier(.22,.8,.3,1) both; }
@keyframes ttcsys-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
/* khi có JS: chờ cuộn tới mới trôi lên (không chạy đồng loạt lúc tải) */
.ttc-jsrise .ttc-sys--live { animation: none; opacity: 0; transform: translateY(26px); }
.ttc-jsrise .ttc-sys--live.is-in { animation: ttcsys-rise .55s cubic-bezier(.22,.8,.3,1) both; opacity: 1; }

/* khung viền phát sáng + nền (2 lớp clip-path) */
.ttc-sys__frame {
  position: relative;
  display: block;
  clip-path: var(--ttc-notch);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 55%, #000), var(--accent), color-mix(in oklab, var(--accent) 55%, #000));
  padding: 1.5px;
}
.ttc-sys__frame::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: var(--ttc-notch);
  background: var(--sys-panel);
  z-index: 0;
}

/* header */
.ttc-sys__head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, var(--sys-head), transparent 78%);
  border-bottom: 1px solid var(--sys-soft);
}
.ttc-sys__tick { color: var(--accent); font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 12px; font-weight: 800; line-height: 1; }
.ttc-sys__title {
  flex: 1; min-width: 0; text-align: center;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: color-mix(in oklab, var(--accent) 72%, var(--text));
  line-height: 1.5; overflow-wrap: anywhere; word-break: break-word;
}
.ttc-sys__tag { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.ttc-sys__ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); display: inline-grid; place-items: center; }
.ttc-sys__ico svg { width: 20px; height: 20px; display: block; }
.ttc-sys__spin { animation: ttcsys-spin 1.4s linear infinite; transform-origin: 50% 50%; }
@keyframes ttcsys-spin { to { transform: rotate(360deg); } }

/* body */
.ttc-sys__body {
  position: relative; z-index: 1;
  display: block;
  padding: 13px 16px;
  text-align: center; text-indent: 0;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: .94em; line-height: 1.72;
  color: color-mix(in oklab, var(--accent) 30%, var(--text));
}
.ttc-sys--err .ttc-sys__body { color: color-mix(in oklab, #ec3b56 38%, var(--text)); }

/* progress bar */
.ttc-sys__bar {
  position: relative; z-index: 1;
  display: block; height: 11px; margin: 0 16px 14px; padding: 2px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}
.ttc-sys__barfill {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 13px);
  box-shadow: 0 0 9px var(--sys-glow);
  animation: ttcsys-pulse 1.7s ease-in-out infinite;
}
@keyframes ttcsys-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }

/* lưới hologram mờ trong panel (tinh tế) */
.ttc-sys__frame::after {
  content: '';
  position: absolute; inset: 1.5px;
  clip-path: var(--ttc-notch);
  pointer-events: none; opacity: .5; z-index: 0;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 8%, transparent) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, transparent) 1px, transparent 1px) 0 0/24px 24px;
  -webkit-mask: radial-gradient(120% 80% at 75% 0%, #000, transparent 78%);
  mask: radial-gradient(120% 80% at 75% 0%, #000, transparent 78%);
}

@media (max-width: 560px) {
  .ttc-sys__head { padding: 8px 12px; gap: 6px; }
  .ttc-sys__title { font-size: 12px; letter-spacing: .01em; }
  .ttc-sys__body { padding: 12px 13px; }
  .ttc-sys__bar { margin: 0 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ttc-sys__spin, .ttc-sys__barfill { animation: none; }
  .ttc-sys--live, .ttc-sys--live .ttc-sys__live, .ttc-sys--live .ttc-sys__head::after { animation: none; }
  .ttc-sys__track { animation: none; }
  .ttc-sys__stream { max-height: none; }
  .ttc-sys__cmt[data-dup] { display: none; }
}

/* Desktop: khung hệ thống rộng ~2/3 cột đọc, căn giữa */
@media (min-width: 760px) {
  .ttc-sys { max-width: 66%; }
}

/* ============================================================
   BẢNG ĐIỂM — HUD Delta (.ttc-score)
   --sc: màu nhấn khung (NPC = cyan, Người chơi = vàng). Nền dùng token theme.
   ============================================================ */
.ttc-score { display: block; margin: 10px auto 20px; max-width: 460px; --sc: #2bd6ff; --sc2: #1c6a86;
  --sc-notch: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sc) 40%, transparent)); }
.ttc-score--npc    { --sc: #6ba0b6; --sc2: #3f7488; }
.ttc-score--player { --sc: #c9ad6d; --sc2: #8f7338; }

.ttc-score__frame { position: relative; display: block; clip-path: var(--sc-notch);
  background: linear-gradient(135deg, var(--sc2), var(--sc), var(--sc2)); padding: 1.4px; }
.ttc-score__frame::before { content: ''; position: absolute; inset: 1.4px; clip-path: var(--sc-notch);
  background: var(--surface); z-index: 0; }

.ttc-score__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-bottom: 1px solid color-mix(in oklab, var(--sc) 26%, transparent);
  background: linear-gradient(90deg, color-mix(in oklab, var(--sc) 14%, transparent), transparent 75%); }
.ttc-score__ico { flex: 0 0 auto; width: 14px; height: 14px; color: var(--sc); display: inline-grid; place-items: center; }
.ttc-score__ico svg { width: 13px; height: 13px; display: block; }
.ttc-score__sys { font-family: 'Orbitron', system-ui, sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: color-mix(in oklab, var(--sc) 72%, var(--text));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ttc-score__main { position: relative; z-index: 1; display: block; padding: 13px 15px 14px; }
.ttc-score__row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ttc-score__pill { flex: 0 0 auto; font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; padding: 2.5px 7px; border-radius: 6px; white-space: nowrap;
  color: #08141a; background: var(--sc); }
.ttc-score--player .ttc-score__pill { color: #2a2008; background: linear-gradient(95deg,#caa44a,#f6e09a,#caa44a); background-size: 200% 100%; animation: ttcsc-shine 4s linear infinite; }
.ttc-score__name { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttc-score__delta { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Orbitron', system-ui, sans-serif; font-size: 17px; font-weight: 800; color: #5f9e78; }
.ttc-score__delta.is-down { color: #c47082; }
.ttc-score__full { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; color: #fff; padding: 2px 7px; border-radius: 6px;
  background: linear-gradient(95deg,#c089a0,#d3aab9,#c089a0); background-size: 200% 100%; animation: ttcsc-shine 3s linear infinite; }

.ttc-score__bar { position: relative; display: block; height: 21px; border-radius: 99px; overflow: hidden;
  background: color-mix(in oklab, var(--text) 12%, transparent); }
.ttc-score__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  box-shadow: 0 0 8px var(--sc-glow, transparent); }
.ttc-score__lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* đầy 100 + còn cộng thêm → cả thanh phát sáng dịu */
.ttc-score--max .ttc-score__bar { box-shadow: 0 0 16px var(--sc-glow); animation: ttcsc-over 1.7s ease-in-out infinite; }
.ttc-score--max .ttc-score__fill { background-size: 200% 100% !important; animation: ttcsc-shine 2.2s linear infinite; }

@keyframes ttcsc-shine { to { background-position: 200% 0; } }
@keyframes ttcsc-over { 0%,100% { box-shadow: 0 0 13px var(--sc-glow); } 50% { box-shadow: 0 0 22px var(--sc-glow); } }

@media (max-width: 560px) {
  .ttc-score__sys { font-size: 9px; }
  .ttc-score__name { font-size: 14px; }
  .ttc-score__main { padding: 12px 13px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ttc-score__pill, .ttc-score__full, .ttc-score--max .ttc-score__bar, .ttc-score--max .ttc-score__fill { animation: none; }
}