/* skills.css (B6, V2) — thanh kỹ năng desktop, cụm nút cảm ứng, sách Võ học, thanh niệm, buff, số nổi.
   Chỉ dùng token §2.1 (web/css/tokens.css). Mọi kích thước HUD bằng rem (nhân --ui-scale). Hoạt ảnh chỉ transform/opacity.
   Cảm ứng: không backdrop-filter/bóng lớn (U7 #9). */

/* ───────────── icon dùng chung ───────────── */
.sk-ic { position: absolute; inset: 0; background-repeat: no-repeat; border-radius: inherit; }
.sk-ic.sk-noicon { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--ink-3), var(--ink-1));
  color: var(--gold); font: 700 var(--fs-lg)/1 var(--font-title); text-shadow: var(--shadow-text); }

/* ───────────── thanh kỹ năng desktop (zone actionbar 840×100 @bc) ───────────── */
.sk-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center;
  pointer-events: none; font-family: var(--font); }
.sk-row { display: flex; gap: 1rem; align-items: flex-end; pointer-events: auto; }
.sk-group { display: flex; gap: .25rem; }
/* [V4 ux] nút trang ▲ số ▼ — mỗi nút ≥ 24×24 px (WCAG 2.5.8; trước 22×13 — UX-21), cột trên mặt --sf-hud */
.sk-pager { position: absolute; left: -2.1rem; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: max(24px, 1.75rem); padding: 2px 0; border-radius: var(--r-s); background: var(--sf-hud); pointer-events: auto; }
.sk-pg-btn { width: max(24px, 1.75rem); height: max(24px, 1.5rem); padding: 0; border: 1px solid var(--ln-1); border-radius: var(--r-s);
  background: var(--sf-raised); color: var(--tx-2); font-size: var(--fs-2xs); line-height: 1; cursor: pointer; }
.sk-pg-btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
@media (hover: hover) { .sk-pg-btn:hover { color: var(--ac); border-color: var(--ac-lo); } }
.sk-pg-num { color: var(--ac); font: 700 var(--fs-sm)/1.2 var(--font); font-variant-numeric: tabular-nums; padding: 1px 0; }
.sk-row { position: relative; }

.sk-slot { position: relative; width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--ln-1); border-radius: var(--r-s);
  background: var(--sf-hud); box-shadow: var(--elev-1); cursor: pointer; overflow: hidden;
  contain: layout paint style; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) var(--ease); }
/* ô CHƯA GẮN: không vẽ khung đứt/số phím (UX-21) — chỉ hiện khung khi đang kéo-thả kỹ năng (html.sk-dragging) */
.sk-slot.is-empty { background: transparent; border-color: transparent; box-shadow: none; }
.sk-slot.is-empty .sk-key { visibility: hidden; }
html.sk-dragging .sk-slot.is-empty { background: var(--sf-scene); border: 1px dashed var(--ln-field); }
html.sk-dragging .sk-slot.is-empty .sk-key { visibility: visible; }
.sk-slot.is-press, .sk-slot:active { transform: scale(.94); }
.sk-slot.is-over { outline: 2px solid var(--gold); outline-offset: 1px; }
.sk-cd { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: conic-gradient(transparent calc((1 - var(--cd, 0)) * 360deg), var(--cd-veil) 0); }
.sk-slot.is-gcd .sk-cd, .sk-tslot.is-gcd .sk-cd { opacity: .7; }
.sk-cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  color: #fff; font: 700 var(--fs-lg)/1 var(--font); text-shadow: var(--shadow-text); }
.sk-key { position: absolute; left: 2px; top: 1px; color: var(--text); font: 700 var(--fs-2xs)/1 var(--font);
  text-shadow: var(--shadow-text); pointer-events: none; }
.sk-num { position: absolute; right: 2px; bottom: 1px; color: var(--gold); font: 700 var(--fs-2xs)/1 var(--font); text-shadow: var(--shadow-text);
  pointer-events: none; }
.is-off .sk-ic { filter: grayscale(1) brightness(.6); }
/* trạng thái phủ: desktop trên ô vuông, cảm ứng trên mặt tròn (.sk-face) — không phủ vùng chạm vuông */
.sk-slot.is-far::after, .sk-cbtn.is-far .sk-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 2; background: rgba(255, 60, 40, .38); box-shadow: inset 0 0 0 2px var(--err); }
.is-item .sk-ic { opacity: .45; }
/* đánh tự động: viền vàng TĨNH (trước: nhấp nháy vô hạn — 1 style recalc/khung suốt trận, UX-10) */
.sk-slot.is-auto::before, .sk-cbtn.is-auto .sk-face::before { content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 2px var(--ac), inset 0 0 12px rgba(224, 184, 98, .85); }
.is-pending .sk-cdt::after { content: ''; position: absolute; width: 60%; height: 60%; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85); border-top-color: transparent; animation: sk-spin .8s linear infinite; }
@keyframes sk-pulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* lỗi gần thanh / cụm (dự phòng khi chưa nối notice B5) */
.sk-err { position: absolute; left: 50%; bottom: calc(100% + 3.25rem); transform: translateX(-50%); white-space: nowrap;
  padding: .25rem .75rem; border-radius: var(--r-m); background: var(--sf-hud); border-left: 3px solid var(--st-danger);
  color: var(--tx-1); font: 600 var(--fs-md)/1.3 var(--font); opacity: 0; pointer-events: none; }
.sk-err:empty { display: none; }
.sk-err.on { animation: sk-err 2s ease forwards; }
html.reduce-motion .sk-err.on { animation: none !important; opacity: 1; }   /* [V4 ux vòng 2 R2-3] giảm chuyển động: hiện tĩnh (JS tắt sau 2 s) */
.sk-err.sk-err-zone { position: static; transform: none; text-align: center; white-space: normal; }
@keyframes sk-err { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ───────────── cụm nút cảm ứng (zone cluster, toạ độ từ layout.geom().cluster) ───────────── */
.sk-cluster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; font-family: var(--font); }
.sk-cbtn { position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: none; pointer-events: auto;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; contain: layout style; }
.sk-cbtn[hidden] { display: none; }
.sk-face { position: absolute; left: 50%; top: 50%; width: var(--face, 52px); height: var(--face, 52px); border-radius: 50%;
  transform: translate(-50%, -50%); transition: transform 90ms var(--ease); overflow: hidden;
  border: 2px solid rgba(224, 184, 98, .55); background: radial-gradient(circle at 50% 35%, rgba(39, 48, 58, .92), rgba(12, 15, 19, .9));
  display: flex; align-items: center; justify-content: center; color: var(--text); }
.sk-cbtn.is-press .sk-face { transform: translate(-50%, -50%) scale(.94); }
.sk-lbl { position: relative; z-index: 3; font: 700 var(--fs-sm)/1 var(--font); text-shadow: var(--shadow-text); letter-spacing: .02em; }
.sk-atk .sk-face { border: 3px solid var(--gold); background: radial-gradient(circle at 50% 30%, #b4472f, #5d1a10 70%, #2a0c08); }
.sk-atk .sk-lbl { font: 700 var(--fs-lg)/1 var(--font-title); color: #fff3d6; }
.sk-atk.is-auto .sk-face { box-shadow: 0 0 0 3px rgba(224, 184, 98, .55); }
.sk-tslot .sk-face { border-color: rgba(95, 184, 162, .7); }
.sk-tslot.is-empty .sk-face { border-style: dashed; background: rgba(12, 15, 19, .45); }
.sk-tslot.is-empty .sk-ic.sk-noicon { background: none; color: var(--text-dim); font-size: var(--fs-xl); }
.sk-tslot .sk-cdt { font-size: var(--fs-lg); }
.sk-page .sk-face { border-width: 1px; border-color: var(--panel-line); background: rgba(12, 15, 19, .78); }
.sk-page .sk-lbl { color: var(--gold); font-size: var(--fs-md); }
.sk-util .sk-face { border-width: 1px; border-color: rgba(236, 230, 214, .45); background: rgba(12, 15, 19, .7); }
.sk-cancel .sk-face { border-color: var(--cinnabar); }
.sk-cancel .sk-lbl { color: var(--err); font-size: var(--fs-lg); }
.sk-err-touch { left: 0; top: 0; bottom: auto; transform: none; font-size: var(--fs-md); translate: -50% 0; }

/* ───────────── thanh niệm (zone castbar) ───────────── */
.sk-castbar { position: absolute; inset: 0; pointer-events: none; font-family: var(--font); }
.sk-castbar[hidden] { display: none; }
/* nhãn TRÊN thanh (tên chiêu trái, giây phải) trên dải --sf-scene, chữ trắng (UX-06 — trước: chữ trần trên cảnh) */
.sk-cb-label { position: absolute; left: 0; right: 0; bottom: calc(100% + 2px); display: flex; justify-content: space-between; gap: .5rem;
  padding: 0 .375rem; border-radius: var(--r-xs); background: var(--sf-scene);
  color: var(--tx-1); font: var(--fs-sm)/1.3 var(--font); white-space: nowrap; }
.sk-cb-name { color: var(--tx-1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sk-cb-time { font-variant-numeric: tabular-nums; }
.sk-cb-track { position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, .7); border-radius: var(--r-pill); overflow: hidden;
  background: rgba(12, 15, 19, .75); box-shadow: 0 0 0 1px var(--panel-line); }
.sk-cb-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(180deg, #c4f5cf, var(--cast) 55%, #4ea765); will-change: transform; }
.sk-castbar.is-chan .sk-cb-fill { background: linear-gradient(180deg, #cfe3ff, var(--mp)); }
.sk-castbar.is-break .sk-cb-fill { background: var(--st-danger-fill); transform: scaleX(1) !important; }
.sk-castbar.is-break .sk-cb-time { color: var(--tx-1); font-weight: 700; }
.sk-castbar.is-break .sk-cb-label { background: var(--st-danger-fill); }
.sk-castbar.is-done { opacity: .85; }
html:not([data-ui="desktop"]) .sk-castbar .sk-cb-label { position: absolute; top: 0; bottom: auto; height: 16px; font-size: var(--fs-sm); }
html:not([data-ui="desktop"]) .sk-castbar .sk-cb-track { top: auto; bottom: 0; height: 6px; }

/* ───────────── buff (zone buffs / tbuff) ───────────── */
.sk-buffs { display: flex; flex-wrap: wrap; gap: 3px; pointer-events: auto; }
.sk-buff { position: relative; width: 1.5rem; height: 1.5rem; margin-bottom: .75rem; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); contain: layout paint style; }
.sk-buff[hidden] { display: none; }
.sk-buff .sk-ic.sk-noicon { font-size: var(--fs-xs); }
.sk-buff-n { position: absolute; right: 0; bottom: 0; padding: 0 2px; border-radius: 2px; background: rgba(0, 0, 0, .72); color: #fff;
  font: 700 var(--fs-2xs)/1.1 var(--font); font-variant-numeric: tabular-nums; }
.sk-buff-n:empty { display: none; }
/* giờ buff dưới icon: dải --sf-scene + chữ trắng (nằm trên cảnh) */
.sk-buff-t { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; padding: 0 2px; border-radius: 2px;
  background: var(--sf-scene); text-align: center; color: var(--tx-1); font: var(--fs-2xs)/1.15 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-buff-t:empty { display: none; }
html:not([data-ui="desktop"]) .sk-buff { width: 18px; height: 18px; margin-bottom: 0; }
html:not([data-ui="desktop"]) .sk-buff-t { display: none; }

/* ───────────── tooltip, bóng kéo, xác nhận ───────────── */
/* tooltip = kiểu kit (§4.12): mặt đặc, tiêu đề --fs-lg vàng, dòng --fs-sm --tx-2 */
.sk-tip { position: fixed; left: 0; top: 0; z-index: var(--z-loading); max-width: min(20rem, 92vw); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ln-1);
  border-radius: var(--r-s); background: var(--sf-panel); color: var(--tx-1); font: var(--fs-sm)/1.4 var(--font);
  box-shadow: var(--elev-2); pointer-events: none; }
.sk-tip[hidden] { display: none; }
.sk-tip-t { display: block; color: var(--ac); font: 600 var(--fs-lg)/1.3 var(--font); margin-bottom: 2px; }
.sk-tip-l { color: var(--tx-2); }
.sk-ghost { position: fixed; left: 0; top: 0; z-index: 70; width: 48px; height: 48px; border-radius: 6px; pointer-events: none;
  background-repeat: no-repeat; opacity: .9; box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0, 0, 0, .5); }
.sk-ghost.sk-noicon { display: flex; align-items: center; justify-content: center; background: var(--ink-3); color: var(--gold); font-weight: 700; }
/* hộp xác nhận dự phòng (khi chưa nối msgbox) — cùng kiểu kit.confirm (§4.9) */
.sk-confirm { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  background: var(--sf-backdrop); pointer-events: auto; }
.sk-confirm-card { width: min(26.25rem, 92vw); padding: var(--sp-4); border: 1px solid var(--ln-1); border-radius: var(--r-l);
  background: var(--sf-panel); color: var(--tx-1); font: var(--fs-md)/1.45 var(--font); box-shadow: var(--elev-3); }
.sk-confirm-t { color: var(--ac); font: 600 var(--fs-xl)/1.25 var(--font-title); margin-bottom: .5rem; }
.sk-confirm-row { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.sk-confirm-row .sk-btn { min-height: var(--k-h-lg); min-width: 6rem; }

/* ───────────── sách Võ học (zone sheet) ───────────── */
/* cửa sổ Võ học: mặt ĐẶC (bảng tên 3D không xuyên chữ — UX-24), kiểu Window §4.6 */
.sk-book { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  border: 1px solid var(--ln-1); border-radius: var(--r-m); background: var(--sf-panel); color: var(--tx-1);
  font: var(--fs-md)/1.4 var(--font); box-shadow: var(--elev-2); }
.sk-book[hidden] { display: none; }
.sk-book-head { display: flex; align-items: center; gap: .75rem; min-height: max(36px, 2.5rem); padding: .25rem .5rem .25rem 1rem; border-bottom: 1px solid var(--ln-2); }
.sk-book-title { margin: 0; color: var(--ac); font: 600 var(--fs-xl)/1.25 var(--font-title); }
.sk-book-hint { flex: 1; color: var(--tx-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-x { display: grid; place-items: center; width: var(--k-close); height: var(--k-close); flex: none; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--tx-2);
  font-size: var(--fs-lg); cursor: pointer; touch-action: manipulation; }
.sk-x:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
@media (hover: hover) { .sk-x:hover { color: var(--tx-1); background: var(--sf-hover); } }
.sk-book-body { flex: 1; display: flex; min-height: 0; }
.sk-book-left { flex: 1; display: flex; min-width: 0; min-height: 0; }
/* [V5 ui] tâm pháp = cột DỌC (mục lục) thay hàng tab ngang bị khung cắt (ảnh user 8: "Giang Hồ Khinh Cô…"): tên đủ, xuống dòng khi dài,
   số chiêu đã học, chấm xanh = tâm pháp đang vận; bấm ⇒ cuộn tới mục; mục đang xem sáng theo vị trí cuộn */
.sk-rail { position: relative; flex: none; width: 15rem; display: flex; flex-direction: column; gap: 2px; padding: .5rem .5rem .75rem; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ln-1) transparent; border-right: 1px solid var(--ln-2);
  background: rgba(0, 0, 0, .16); }
.sk-rail-cap { margin: .625rem .375rem .25rem; color: var(--ac-2); font: 700 var(--fs-xs)/1.25 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.sk-rail-cap:first-child { margin-top: .125rem; }
.sk-kf { position: relative; flex: none; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; gap: .5rem;
  min-height: max(36px, 2.5rem); padding: .25rem .5rem .25rem .375rem; border: 0; border-radius: var(--r-s); background: none;
  color: var(--tx-2); text-align: left; font: 600 var(--fs-md)/1.25 var(--font); cursor: pointer; touch-action: manipulation; }
.sk-kf-ic { position: relative; inset: auto; width: 1.75rem; height: 1.75rem; border-radius: var(--r-xs); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }
.sk-kf-ic.sk-noicon { background: var(--sf-raised); }
.sk-kf-n { min-width: 0; overflow-wrap: anywhere; }
.sk-kf-c { color: var(--tx-3); font: 600 var(--fs-xs)/1 var(--font); font-variant-numeric: tabular-nums; }
.sk-kf-c.on { color: var(--ac-2); }
.sk-kf.on { background: var(--sf-selected); color: var(--ac); box-shadow: inset 3px 0 0 var(--ac); }
.sk-kf.is-mount .sk-kf-ic::after { content: ""; position: absolute; right: -3px; top: -3px; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--st-ok); box-shadow: 0 0 0 2px var(--sf-panel); }
@media (hover: hover) { .sk-kf:hover { background: var(--sf-hover); color: var(--tx-1); } .sk-kf.on:hover { background: var(--sf-selected); color: var(--ac); } }
.sk-kf:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
/* danh sách: MỌI tâm pháp, mỗi tâm pháp 1 mục (tiêu đề dính + chiêu) — như NewSkillPanel 2018 (Handle_Kungfu theo hàng) */
.sk-list { position: relative; flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 .75rem .75rem; }
.sk-grp-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 -.25rem .375rem;
  padding: .5rem .25rem .375rem; background: var(--sf-panel); border-bottom: 1px solid var(--ln-2); }
.sk-grp-t { margin: 0; color: var(--ac); font: 600 var(--fs-lg)/1.3 var(--font-title); }
.sk-grp-mount { padding: 0 .4375rem; border-radius: var(--r-pill); background: rgba(90, 210, 90, .16); color: var(--st-ok); font: 600 var(--fs-xs)/1.5 var(--font); }
.sk-grp-c { margin-left: auto; color: var(--tx-3); font: var(--fs-xs)/1.25 var(--font); font-variant-numeric: tabular-nums; }
.sk-grp + .sk-grp { margin-top: .5rem; }
.sk-grp-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; align-content: start; }
.sk-item { position: relative; display: flex; gap: .625rem; align-items: flex-start; padding: .375rem; border: 1px solid transparent;
  border-radius: var(--r-s); background: var(--sf-raised); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (hover: hover) { .sk-item:hover { border-color: var(--ln-ac); } }
.sk-item.is-picked { border-color: var(--ac); background: var(--sf-selected); }
.sk-item-ic { position: relative; inset: auto; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-s);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); cursor: grab; }
.sk-item.no-assign .sk-item-ic { cursor: default; }
.sk-item.is-off .sk-item-ic { filter: grayscale(1) brightness(.6); }
.sk-item-txt { min-width: 0; }
.sk-item-name { color: var(--tx-1); font-weight: 700; font-size: var(--fs-md); }
.sk-item.is-off .sk-item-name { color: var(--tx-3); }
.sk-item-meta { color: var(--ac-2); font-size: var(--fs-sm); }
.sk-item-desc { color: var(--tx-2); font-size: var(--fs-sm); margin-top: 2px; }
.sk-state { grid-column: 1 / -1; padding: 1.5rem .5rem; text-align: center; color: var(--tx-2); }
.sk-state-err { color: var(--st-danger); display: flex; flex-direction: column; align-items: center; gap: .75rem; }

/* cảm ứng: sheet TOÀN MÀN 2 cột (trái danh sách, phải bản sao cụm) */
.sk-book-touch { position: fixed; inset: 0; z-index: var(--z-sheet); border-radius: 0; border: 0; box-shadow: none;
  padding: 0 var(--sr) 0 var(--sl); background: var(--sf-panel); }
.sk-book-touch .sk-grp-items { grid-template-columns: 1fr; }
.sk-book-touch .sk-list { padding: 0 .5rem .5rem; }
.sk-book-touch .sk-rail { width: 10.5rem; padding: .375rem .25rem .5rem; }
.sk-book-touch .sk-kf { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; gap: .375rem; padding: .25rem .5rem; font-size: var(--fs-sm); }
.sk-book-touch .sk-kf-ic { display: none; }
.sk-book-touch .sk-kf.is-mount .sk-kf-n::after { content: " •"; color: var(--st-ok); }
.sk-book-touch .sk-item { min-height: 3.6rem; align-items: center; }
.sk-book-touch .sk-item-ic { width: 3.25rem; height: 3.25rem; }
.sk-rep { flex: none; width: min(44%, 22rem); display: flex; flex-direction: column; gap: .5rem; padding: .5rem 0 .5rem .75rem;
  border-left: 1px solid var(--panel-line); }
.sk-rep-pages { display: flex; gap: .25rem; }
.sk-rep-pg { flex: 1; min-height: 2.75rem; border: 1px solid var(--panel-line); border-radius: var(--r-s); background: var(--ink-1);
  color: var(--text-dim); font: 700 var(--fs-sm)/1 var(--font); touch-action: manipulation; }
.sk-rep-pg.on { color: var(--gold); border-color: var(--gold-deep); background: var(--ink-3); }
.sk-rep-stage { position: relative; flex: 1; min-height: 0; max-height: 100%; aspect-ratio: 1; align-self: center; width: auto; max-width: 100%; }
.sk-rep-atk, .sk-rep-slot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.sk-rep-atk { width: 27%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 30%, #b4472f, #5d1a10 70%); color: #fff3d6; font: 700 var(--fs-md)/1 var(--font-title); opacity: .75; }
.sk-rep-slot { width: 21%; min-width: 44px; aspect-ratio: 1; padding: 0; border: 2px solid rgba(95, 184, 162, .7);
  background: rgba(12, 15, 19, .8); touch-action: manipulation; overflow: visible; }
.sk-rep-slot .sk-ic { border-radius: 50%; overflow: hidden; }
.sk-rep-slot.is-empty { border-style: dashed; }
.sk-rep-slot.is-empty .sk-ic.sk-noicon { background: none; color: var(--text-dim); font-size: var(--fs-xl); }
.sk-rep-slot.is-target { border-color: var(--gold); }
.sk-rep-slot.is-picked, .sk-rep-slot.is-over { outline: 3px solid var(--gold); outline-offset: 2px; }
.sk-rep-x { position: absolute; right: -10px; top: -10px; z-index: 4; width: 28px; height: 28px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--st-danger-fill); color: #fff; font: 700 var(--fs-sm)/1 var(--font);
  box-shadow: 0 0 0 2px var(--ink-0); }
.sk-rep-x::before { content: ''; position: absolute; inset: -10px; }      /* vùng chạm 48 px (ô kế bên che 1–2 px) */
.sk-rep-slot.is-empty .sk-rep-x { display: none; }
.sk-rep-foot { display: flex; justify-content: center; }

/* ───────────── số nổi chiến đấu ───────────── */
/* số trên đầu: chip mặt --sf-hud (.86) ⇒ chữ màu đọc được cả trên trời sáng (UX-06 "số trên đầu") */
.ct-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--z-hud); contain: strict; }
.ct { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; white-space: nowrap; padding: 0 .25rem; border-radius: var(--r-xs);
  background: var(--sf-hud); color: #fff; font: 700 var(--fs-xl)/1.15 var(--font); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000; }
.ct.ct-crit { color: #ffb23a; font-size: var(--fs-2xl); }
.ct.ct-in { color: var(--st-danger); }
.ct.ct-heal { color: #6fe36f; }
.ct.ct-miss { color: var(--tx-2); font-size: var(--fs-lg); }
/* [W2fix] cảm ứng: mục tâm pháp/nút sách võ học cao ≥ 44 px */
html:not([data-ui="desktop"]) :is(.sk-x, .sk-rep-pg, .sk-btn) { min-height: 44px; }
html:not([data-ui="desktop"]) .sk-x { min-width: 44px; }
.sk-cancel .sk-stop-ic { width: 60%; height: 60%; color: var(--st-danger); stroke-width: 2.2; }