/* Vòng Starlake: bản đồ nhân vật trên trang bảng xếp hạng. Mọi selector nằm trong .stv-vong để không vỡ theme.
   Font và màu lấy từ theme (--font-body, --font-display, --accent...), có giá trị dự phòng. */
.stv-vong {
  --sv-ink: var(--ink, #0b0e11); --sv-paper: var(--paper, #f2f1ed); --sv-accent: var(--accent, #ff4d12); --sv-accent-ink: var(--accent-ink, #c2410c);
  --sv-lake: var(--lake, #0e6e73); --sv-muted: var(--muted, #6b5e51); --sv-line: rgba(11, 14, 17, .14); --sv-card: #fff;
  --c-chay: #2ecc71; --c-dung: #3b9cff; --c-ngoi: #f5a623; --c-ngu: #8a8f98;
  margin: 0 0 28px; font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); font-size: 16px; line-height: 1.5; color: var(--sv-ink);
}
.stv-vong *, .stv-vong *::before, .stv-vong *::after { box-sizing: border-box; }
.stv-vong button, .stv-vong input { margin: 0; text-transform: none; letter-spacing: normal; }
.stv-vong h2 { font-family: var(--font-body, system-ui, sans-serif); text-transform: none; letter-spacing: normal; }
/* Thanh trạng thái kiểu "0 working · 6 idle" */
.stv-vong .status { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; background: var(--sv-ink); color: #f5f3ee; border-radius: 12px;
  padding: 9px 12px; font-size: .8rem; font-weight: 600; }
.stv-vong .status .sv-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .25); }
.stv-vong .status .sep { opacity: .35; }
.stv-vong .status b { color: #ffb08a; font-weight: 700; }
/* Khung bản đồ */
.stv-vong .ban { position: relative; margin: 10px 0 4px; height: 70vh; min-height: 420px; max-height: 760px; border-radius: 18px; overflow: hidden;
  background: #eff2e8; box-shadow: inset 0 0 0 1px var(--sv-line); touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: grab; }
.stv-vong .ban.keo { cursor: grabbing; }
.stv-vong #sv-cv { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.stv-vong #sv-cvd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.stv-vong #sv-lop { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; --H: 30px; --ik: 1; }
/* Nhân vật */
.stv-vong .nguoi { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.stv-vong .nguoi[hidden] { display: none; }
.stv-vong .nguoi .in { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); transform-origin: 50% 100%; pointer-events: auto; cursor: pointer;
  display: block; width: calc(var(--H) * var(--wr, .5)); height: calc(var(--H) * var(--r, 1)); }
.stv-vong .nguoi .bong { position: absolute; left: 50%; bottom: -3px; width: calc(var(--H) * .62); height: calc(var(--H) * .14); margin-left: calc(var(--H) * -.31);
  border-radius: 50%; background: rgba(0, 0, 0, .2); pointer-events: none; }
.stv-vong .nguoi .fig { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); transform-origin: 50% 100%; display: block; }
.stv-vong .nguoi .lat { display: block; position: relative; transform: scaleX(var(--lat, 1)); transform-origin: 50% 100%; }
.stv-vong .nguoi .lat .dau { transform: scaleX(var(--lat, 1)); }
/* lật lại đầu tròn để chữ cái / ảnh không bị ngược */
.stv-vong .nguoi .hinh { display: block; height: calc(var(--H) * var(--r, 1)); width: auto; max-width: none; }
/* hình không có chibi: đầu tròn (ảnh / chữ cái) + thân */
.stv-vong .nguoi .dau { display: flex; align-items: center; justify-content: center; width: calc(var(--H) * .46); height: calc(var(--H) * .46); border-radius: 50%;
  border: 2px solid #fff; background: var(--c, #888); color: #fff; font: 700 calc(var(--H) * .24)/1 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25); position: relative; z-index: 1; margin: 0 auto; }
.stv-vong .nguoi .dau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stv-vong .nguoi .than { display: block; width: calc(var(--H) * .3); height: calc(var(--H) * .27); margin: calc(var(--H) * -.05) auto 0; border-radius: 46% 46% 16% 16%; background: var(--c2, #555); box-shadow: inset 0 calc(var(--H) * -.05) 0 rgba(0, 0, 0, .12); }
.stv-vong .nguoi .chan { display: block; width: calc(var(--H) * .2); height: calc(var(--H) * .09); margin: 0 auto; background:
  linear-gradient(90deg, #3a3f4a 0 42%, transparent 42% 58%, #3a3f4a 58% 100%); border-radius: 0 0 3px 3px; }
/* Nhãn */
.stv-vong .nguoi .the { position: absolute; left: 0; bottom: calc(var(--H) * var(--r, 1) + 6px); transform: translate(calc(-50% + var(--lx, 0px)), var(--ly, 0px));
  white-space: nowrap; background: rgba(11, 14, 17, .88); color: #fff; font-size: 10.5px; line-height: 1.25; font-weight: 700; padding: 3px 7px 3px 6px;
  border-radius: 7px; display: none; pointer-events: none; z-index: 5; }
.stv-vong .nguoi .the::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--sc, #8a8f98); }
.stv-vong .nguoi .the small { font-weight: 600; opacity: .75; margin-left: 4px; }
.stv-vong .nguoi .the .vuong { font-size: 13px; line-height: 1; margin-right: 3px; }
.stv-vong .nguoi.tn .the { display: block; }
.stv-vong .far .nguoi .the { font-size: 9.5px; padding: 2px 5px 2px 4px; }
.stv-vong .far .nguoi .the::before { margin-right: 3px; width: 5px; height: 5px; }
.stv-vong .nguoi.chon .the { background: var(--sv-accent); }
.stv-vong .nguoi.chon .the::before { background: #fff; }
.stv-vong .nguoi.st-chay { --sc: var(--c-chay); }
.stv-vong .nguoi.st-dung { --sc: var(--c-dung); }
.stv-vong .nguoi.st-ngoi { --sc: var(--c-ngoi); }
.stv-vong .nguoi.st-ngu { --sc: var(--c-ngu); }
/* Dáng */
@keyframes sv-nhun { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); } 50% { transform: translateX(-50%) translateY(-5px) rotate(2deg); } }
@keyframes sv-lac { 0%, 100% { transform: translateX(-50%) rotate(-1.6deg); } 50% { transform: translateX(-50%) rotate(1.6deg); } }
@keyframes sv-lach { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg) scaleY(.95); } 50% { transform: translateX(-50%) translateY(-3px) rotate(6deg) scaleY(1.02); } }
@keyframes sv-buoc { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); } 50% { transform: translateX(-50%) translateY(-2.5px) rotate(1.5deg); } }
@keyframes sv-gio { 0% { transform: translateX(6px); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateX(-9px); opacity: 0; } }
@keyframes sv-bui { 0% { transform: scale(.4); opacity: .7; } 100% { transform: translate(-7px, -3px) scale(1.5); opacity: 0; } }
@keyframes sv-veo { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-8px, -14px) scale(1.15); opacity: 0; } }
@keyframes sv-noi { 0% { transform: translate(-50%, 6px) scale(.7); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1); opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(-50%, -4px) scale(1); opacity: 0; } }
@keyframes sv-tho { 0%, 100% { transform: translateX(-50%) scaleY(1); } 50% { transform: translateX(-50%) scaleY(.975); } }
@keyframes sv-vay { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
@keyframes sv-zzz { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(-3px); opacity: 1; } }
.stv-vong .st-chay .fig { animation: sv-nhun var(--bd, .42s) ease-in-out infinite; }
.stv-vong .st-chay.lach .fig { animation: sv-lach var(--bd, .85s) ease-in-out infinite; }
.stv-vong .st-dung .fig { animation: sv-buoc .8s ease-in-out infinite; }
.stv-vong .nguoi.di { will-change: transform; }
.stv-vong .st-ngoi .fig, .stv-vong .st-ngu .fig { animation: sv-tho 3s ease-in-out infinite; }
.stv-vong .st-ngu .fig { animation: none; }
/* biến đổi CSS cho người không có đủ ảnh dáng */
.stv-vong .st-ngoi.khong-chibi .fig { animation: none; }
.stv-vong .st-ngoi.khong-chibi .than { height: calc(var(--H) * .18); width: calc(var(--H) * .34); border-radius: 40% 40% 28% 28%; }
.stv-vong .st-ngoi.khong-chibi .chan { display: none; }
.stv-vong .st-ngu.khong-chibi .fig { transform: translateX(-6%) rotate(-90deg); animation: none; transform-origin: 50% 100%; }
.stv-vong .st-ngu .zz { display: none; position: absolute; left: 100%; top: calc(var(--H) * var(--r, 1) * .04); margin-left: -2px; font: 700 calc(var(--H) * .24)/1 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); color: #5b6bff;
  text-shadow: 0 1px 0 #fff, 0 0 3px #fff, 0 0 3px #fff; animation: sv-zzz 3.2s ease-in-out infinite; pointer-events: none; z-index: 3; }
.stv-vong .st-ngu.hd-l .zz { left: auto; right: 100%; margin: 0 -2px 0 0; }
.stv-vong .st-ngu.zon .zz { display: block; }
.stv-vong .dia-danh { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; z-index: 300; }
.stv-vong .dia-danh[hidden] { display: none; }
.stv-vong .dia-danh span { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font: 700 11px/1.3 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); color: #2f6d2b;
  -webkit-text-stroke: 3px rgba(255, 255, 255, .9); paint-order: stroke fill; }
.stv-vong .dia-danh.nuoc span { color: #1d6f8c; }
.stv-vong .vong-the { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; z-index: 400; }
.stv-vong .vong-the[hidden] { display: none; }
.stv-vong .vong-the span { position: absolute; left: 0; top: 0; transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))); white-space: nowrap; font: 700 11.5px/1.25 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #0e6e73; background: rgba(255, 255, 255, .88); padding: 3px 8px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.stv-vong .st-ngu.hd-l .in, .stv-vong .st-ngu.hd-r .in { height: calc(var(--H) * var(--r, 1)); }
.stv-vong .nguoi .chai { position: absolute; right: calc(var(--H) * -.12); bottom: calc(var(--H) * .06); width: calc(var(--H) * .1); height: calc(var(--H) * .24); border-radius: 3px;
  background: linear-gradient(#ff7a45 0 18%, #6ec6ff 18%); border: 1px solid #fff; display: none; z-index: 2; }
.stv-vong .st-ngoi.khong-chibi .chai { display: block; }
.stv-vong .nguoi .vay { position: absolute; right: calc(var(--H) * -.06); top: calc(var(--H) * .06); font-size: calc(var(--H) * .26); line-height: 1; display: none; transform-origin: 50% 90%; animation: sv-vay .9s ease-in-out infinite; z-index: 2; }
.stv-vong .st-dung.khong-chibi .vay { display: block; }
.stv-vong .nguoi .ring { position: absolute; left: 50%; bottom: -4px; width: calc(var(--H) * 1.1); height: calc(var(--H) * .45); margin-left: calc(var(--H) * -.55); border-radius: 50%;
  border: 3px solid var(--sv-accent); display: none; pointer-events: none; }
@keyframes sv-xung { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.stv-vong .nguoi.nhay .ring, .stv-vong .nguoi.chon .ring { display: block; animation: sv-xung 1s ease-out infinite; }
.stv-vong .nguoi.chon .ring { animation: none; opacity: .9; }
.stv-vong .nguoi.nhay .the { display: block; }
.stv-vong .nguoi.chon .the, .stv-vong .nguoi.chon { z-index: 99999 !important; }
.stv-vong .nguoi.nhay { z-index: 99999 !important; }
.stv-vong .nguoi .hom { position: absolute; right: calc(var(--H) * -.02); top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c-chay); border: 2px solid #fff; z-index: 4; display: none; }
.stv-vong .nguoi.st-chay .hom { display: block; }
/* Thu nhỏ: người thường chỉ còn chấm */
.stv-vong .far .nguoi:not(.uu) .in { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.stv-vong .far .nguoi:not(.uu) .in > *, .stv-vong .far .nguoi:not(.uu) .hom { display: none !important; }
.stv-vong .far .nguoi.uu.st-ngu { --r: .8; }
/* vệt gió + bụi (top 3), vương miện, bong bóng chữ, vèo */
.stv-vong .nguoi .gio { position: absolute; right: 88%; bottom: calc(var(--H) * var(--r, 1) * .12); width: calc(var(--H) * .5); height: calc(var(--H) * .36); display: none; pointer-events: none; }
.stv-vong .nguoi.gio-on .gio { display: block; }
.stv-vong .nguoi .gio i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0)); box-shadow: 0 0 2px rgba(60,60,60,.25); animation: sv-gio .5s linear infinite; }
.stv-vong .nguoi .gio i:nth-child(1) { top: 10%; width: 100%; }
.stv-vong .nguoi .gio i:nth-child(2) { top: 42%; width: 78%; animation-delay: -.17s; }
.stv-vong .nguoi .gio i:nth-child(3) { top: 74%; width: 90%; animation-delay: -.33s; }
.stv-vong .nguoi .gio b { position: absolute; right: 8%; bottom: -2px; width: calc(var(--H) * .16); height: calc(var(--H) * .16); border-radius: 50%; background: rgba(190, 170, 140, .75); animation: sv-bui .6s ease-out infinite; }
.stv-vong .nguoi .mu { position: absolute; left: 50%; bottom: calc(var(--H) * var(--r, 1) * .93); transform: translateX(-50%) rotate(-8deg); font-size: calc(var(--H) * .3); line-height: 1; pointer-events: none; z-index: 4; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.stv-vong .nguoi .noi { position: absolute; left: 0; bottom: calc(var(--H) * var(--r, 1) + 6px); display: none; white-space: nowrap; background: #fff; color: #1d2530; font: 700 11px/1.25 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  padding: 4px 9px; border-radius: 11px; box-shadow: 0 2px 7px rgba(0, 0, 0, .28); pointer-events: none; z-index: 7; transform: translateX(-50%); }
.stv-vong .nguoi .noi::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.stv-vong .nguoi.noi-on .noi { display: block; animation: sv-noi 2.6s ease-out forwards; }
.stv-vong .nguoi .veo { position: absolute; left: calc(var(--H) * -.55); bottom: calc(var(--H) * var(--r, 1) * .55); display: none; font: italic 800 12px/1 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); color: #ff5c18;
  -webkit-text-stroke: 3px rgba(255, 255, 255, .95); paint-order: stroke fill; pointer-events: none; z-index: 6; }
.stv-vong .nguoi.veo-on .veo { display: block; animation: sv-veo .9s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {.stv-vong .nguoi *, .stv-vong .nguoi { animation: none !important; } }
.stv-vong .dung-anim .nguoi * { animation-play-state: paused; }
/* Cổng STARLAKE (trang trí) */
.stv-vong .cong { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.stv-vong .cong .kh { position: absolute; left: 0; bottom: 0; width: calc(var(--H) * 2.1); height: calc(var(--H) * 1.15); margin-left: calc(var(--H) * -1.05); transform-origin: 50% 100%; transform: skewY(var(--sk, 30deg)); }
.stv-vong .cong .cot { position: absolute; bottom: 0; width: calc(var(--H) * .07); height: 100%; background: #222; border-radius: 2px; }
.stv-vong .cong .cot.a { left: 3%; }
.stv-vong .cong .cot.b { right: 3%; }
.stv-vong .cong .bang { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: var(--sv-accent); border-radius: 4px; color: #fff; text-align: center;
  font: 400 calc(var(--H) * .26)/1.5 var(--font-display, 'Anton', 'Arial Narrow', sans-serif); letter-spacing: .06em; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); overflow: hidden; white-space: nowrap; }
.stv-vong .cong .bang small { display: block; font: 700 calc(var(--H) * .12)/1 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); margin-top: calc(var(--H) * -.07); opacity: .92; letter-spacing: .08em; }
/* Công cụ trên bản đồ */
.stv-vong .tool { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; z-index: 20; }
.stv-vong .tim { position: relative; flex: 1 1 auto; min-width: 0; pointer-events: auto; }
.stv-vong .tim input { width: 100%; height: 40px; border: 0; border-radius: 12px; padding: 0 12px 0 36px; font: 600 15px var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); outline: none; color: var(--sv-ink); -webkit-user-select: text; user-select: text; }
.stv-vong .tim input:focus { box-shadow: 0 0 0 2px var(--sv-accent), 0 2px 10px rgba(0, 0, 0, .18); }
.stv-vong .tim svg { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; color: var(--sv-muted); pointer-events: none; }
.stv-vong .gy { position: absolute; left: 0; right: 0; top: 44px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); overflow: hidden; display: none; }
.stv-vong .gy.mo { display: block; }
.stv-vong .gy button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 9px 12px; font: 600 14px var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); text-align: left; color: var(--sv-ink); cursor: pointer; border-bottom: 1px solid var(--sv-line); }
.stv-vong .gy button:last-child { border-bottom: 0; }
.stv-vong .gy button small { color: var(--sv-muted); font-weight: 600; white-space: nowrap; }
.stv-vong .gy .khong { padding: 10px 12px; font-size: 13.5px; color: var(--sv-muted); }
.stv-vong .nut-hang { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.stv-vong .nut-hang button, .stv-vong .chip { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  font: 700 22px/1 var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif); color: var(--sv-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.stv-vong .nut-hang button:active, .stv-vong .chip:active { background: #ffe6da; }
.stv-vong .chip { width: auto; height: 36px; padding: 0 10px; font-size: 12.5px; gap: 5px; border-radius: 11px; font-weight: 700; }
.stv-vong .duoi { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 20; flex-wrap: wrap; }
.stv-vong .dn { font-size: 11px; color: #3d4a38; background: rgba(255, 255, 255, .78); padding: 2px 6px; border-radius: 6px; position: absolute; right: 6px; bottom: 50px; z-index: 21; }
.stv-vong .dn a { color: #1d5d8c; }
.stv-vong .cu-the { position: absolute; left: 8px; right: 8px; bottom: 72px; z-index: 30; background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.stv-vong .cu-the[hidden] { display: none; }
.stv-vong .cu-the .ha { width: 56px; height: 56px; object-fit: contain; }
.stv-vong .cu-the .ha.tron { border-radius: 50%; object-fit: cover; background: #ddd; }
.stv-vong .cu-the h2 { margin: 0; font-size: .95rem; line-height: 1.25; }
.stv-vong .cu-the p { margin: 1px 0 0; color: var(--sv-muted); font-size: .8rem; line-height: 1.35; }
.stv-vong .cu-the .tt { display: inline-block; font-weight: 700; font-size: .72rem; padding: 1px 8px; border-radius: 99px; color: #fff; background: var(--sc, #888); vertical-align: 1px; }
.stv-vong .cu-the a { color: var(--sv-lake); font-weight: 700; }
.stv-vong .cu-the .dong { align-self: start; border: 0; background: #eee; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.stv-vong .chu-thich { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: .76rem; color: var(--sv-muted); margin: 6px 4px 0; }
.stv-vong .chu-thich i { font-style: normal; }
.stv-vong .ghi { margin: 8px 4px 0; font-size: .82rem; line-height: 1.5; color: var(--sv-muted); }
.stv-vong [hidden] { display: none !important; }
/* Điện thoại: khung thấp hơn để còn chỗ chạm ngoài bản đồ mà cuộn trang */
@media (pointer: coarse) { .stv-vong .ban { height: 58vh; min-height: 360px; } }