/* v37.css — Combat UX · Build System · Farm · Profile · World Boss */
/* skill name popup above the hero */
.sk-name{position:fixed;z-index:60;transform:translate(-50%,0);pointer-events:none;font-family:var(--cv-font-display);font-weight:800;font-size:clamp(15px,2.4vw,20px);letter-spacing:2px;color:#fff;white-space:nowrap;
  text-shadow:0 0 10px var(--c),0 0 22px var(--c),0 2px 3px #000;animation:skName .95s ease-out both}
.sk-name.ult{font-size:clamp(20px,3.4vw,30px);color:#FFE7A0;text-shadow:0 0 14px var(--c),0 0 34px var(--c),0 0 4px #fff,0 2px 4px #000;animation-duration:1.15s}
@keyframes skName{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}18%{opacity:1;transform:translate(-50%,0) scale(1.06)}30%{transform:translate(-50%,-4px) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px) scale(1)}}
/* wave announcement (center, never over the upgrade panel) */
#waveAnn{position:fixed;left:50%;top:36%;z-index:55;transform:translate(-50%,-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;opacity:0}
#waveAnn.show{animation:waveAnn .95s ease-out both}
#waveAnn small{font-size:12px;letter-spacing:4px;color:var(--cv-muted);text-transform:uppercase}
#waveAnn b{font-family:var(--cv-font-display);font-size:clamp(30px,6vw,48px);font-weight:800;color:#FFE7A0;letter-spacing:4px;text-shadow:0 0 18px rgba(184,108,255,.9),0 3px 4px #000}
#waveAnn span{margin-top:2px;padding:2px 14px;border-radius:999px;background:var(--cv-crimson);color:#fff;font-weight:800;letter-spacing:3px}
#waveAnn.boss b{color:#ff9db0;text-shadow:0 0 22px rgba(216,58,88,.95),0 3px 4px #000}
@keyframes waveAnn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(.96)}}
/* combat tools: x2 / damage toggle / selective auto */
.tool.spd.on{border-color:var(--cv-lightgold);box-shadow:var(--cv-glow-gold)}.tool.spd.on span{color:#FFE7A0}
.tool.locked{opacity:.65}.tool.off{opacity:.6}.tool span.t-num{font-size:18px;font-weight:800}
.autobtn.sel{border-color:var(--cv-lightgold);color:#FFE7A0}
.sk{position:relative}.sk-tick{position:absolute;top:-4px;left:-4px;width:20px;height:20px;border-radius:6px;border:2px solid rgba(255,255,255,.55);background:rgba(12,6,26,.85);cursor:pointer;z-index:3}
.sk-tick.on{background:var(--cv-gold);border-color:#FFE7A0}.sk-tick.on::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font:800 13px/1 var(--cv-font-ui);color:#2a1400}
/* priority ticks on the 6 in-run upgrades */
.qu{position:relative}.qpri{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid rgba(255,255,255,.45);display:inline-grid;place-items:center;font:800 11px/1 var(--cv-font-num);color:#2a1400;margin-right:4px;cursor:pointer}
.qpri.on{background:var(--cv-gold);border-color:#FFE7A0}
#qPriHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 6px}#qPriHead .cap{font-size:11.5px}
/* Bồi Dưỡng rows */
.bd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.bd-head .note{margin:0}
.upg37{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;margin:5px 0;border-radius:var(--cv-radius-sm);background:var(--cv-bg-glass);border:1px solid var(--cv-line);flex-wrap:wrap}
.upg37 .u-main{min-width:150px;flex:1}.upg37 .u-main small{display:block;color:var(--cv-muted)}.upg37 i{font-style:normal}
.upg37 .u-act{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.u-cost{min-width:78px;text-align:right;font-family:var(--cv-font-num);font-weight:700;color:#FFE7A0}
.upg37 .btn.sm{min-width:44px;min-height:36px;padding:0 8px}
.badge{display:inline-block;padding:0 6px;border-radius:999px;background:var(--cv-crimson);color:#fff;font-size:10.5px;margin-left:4px}
.refund-box{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--cv-radius-sm);background:var(--cv-bg-glass);border:1px solid var(--cv-line-gold);text-align:left}
/* skills grouped by slot */
.slot-row{margin:8px 0;padding:8px;border-radius:var(--cv-radius-md);background:rgba(10,5,22,.45);border:1px solid var(--cv-line)}
.sr-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}.sr-h b{letter-spacing:2px;color:#FFE7A0;font-size:13px}
.sr-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.sk37{position:relative;flex:none;width:96px;min-height:104px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;border:1px solid var(--cv-line);background:var(--cv-bg-glass);color:#fff;font:inherit;cursor:pointer;scroll-snap-align:start;text-align:center}
.sk37 img.skicon,.sk37 .ic{width:40px;height:40px}.sk37 b{font-size:11.5px;line-height:1.2}.sk37 small{font-size:10px;color:var(--cv-muted)}
.sk37.eq{border-color:var(--cv-lightgold);box-shadow:0 0 0 1px var(--cv-lightgold),var(--cv-glow-gold);background:linear-gradient(170deg,rgba(217,164,65,.22),rgba(12,6,26,.7))}
.sk37.sel{outline:2px solid var(--el)}.sk37.locked{opacity:.55}.sk37.fog{opacity:.45;cursor:default}
.sk37-on{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font:800 8.5px var(--cv-font-ui);letter-spacing:1px;padding:1px 6px;border-radius:999px;background:var(--cv-gold);color:#2a1400;font-style:normal;white-space:nowrap}
.sk37-det{display:flex;gap:10px;margin-top:8px;padding:10px;border-radius:var(--cv-radius-sm);border:1px solid var(--el);background:rgba(12,6,26,.7)}.sk37-det .row{flex-wrap:wrap;gap:6px}
/* Tu Luyện nav sticky (+ horizontal scroll on mobile) */
#panel .panel-body>.tabs{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(26,12,50,.98),rgba(26,12,50,.92));padding:6px 0;margin-top:-6px;backdrop-filter:blur(6px)}
@media (max-width:640px){#panel[data-p="tuluyen"] .panel-body>.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#panel[data-p="tuluyen"] .panel-body>.tabs button{flex:none}}
/* pity + prep extras */
.pity37{font-size:12.5px;color:var(--cv-muted)}.pity37.on{color:#FFE7A0}
.p-more37{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
/* farm */
.farm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.farm-card{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--cv-radius-md);background:var(--cv-bg-glass);border:1px solid var(--cv-line-gold)}
.farm-card.locked{opacity:.6;border-color:var(--cv-line)}.fc-h{display:flex;gap:10px;align-items:center}.fc-h h4{margin:0}.farm-card p{margin:0;font-size:13px}
.vein-el{display:flex;flex-wrap:wrap;gap:4px}.vein-el .chip{cursor:pointer;font-size:11.5px}.vein-el .chip.on{border-color:var(--cv-lightgold);box-shadow:var(--cv-glow-gold)}
/* player profile */
.pc-link,.pcard .pc-av,.chat-h,.pod,.lb-row{cursor:pointer}.pc-link:hover{text-decoration:underline}
.prof37{display:grid;grid-template-columns:150px 1fr;gap:14px;text-align:left}.prof37 .pf-art{display:flex;align-items:flex-end;justify-content:center;min-height:180px;border-radius:var(--cv-radius-md);background:var(--cv-bg-art)}
.prof37 .pf-art img{max-height:220px;max-width:100%;object-fit:contain}.pf-kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:8px 0;font-size:13px}
@media (max-width:560px){.prof37{grid-template-columns:1fr}.prof37 .pf-art{min-height:140px}.pf-kv{grid-template-columns:1fr}}
/* world boss panel */
.wb-card{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:12px;border-radius:var(--cv-radius-lg);background:linear-gradient(160deg,rgba(216,58,88,.18),rgba(12,6,26,.8));border:1px solid rgba(216,58,88,.45)}
.wb-card.idle{display:block}.wb-art{display:flex;align-items:center;justify-content:center;min-height:180px;border-radius:var(--cv-radius-md);background:radial-gradient(circle,rgba(216,58,88,.35),transparent 70%)}.wb-art img{max-width:100%;max-height:220px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(216,58,88,.8))}
.wb-hp{position:relative;height:20px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);overflow:hidden;margin:6px 0}.wb-hp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8e1330,#D83A58,#ff8aa0);transition:width .4s}
.wb-hp span{position:relative;display:block;text-align:center;font:700 11.5px/20px var(--cv-font-num);color:#fff;text-shadow:0 1px 2px #000}.wb-hp.big{height:24px}.wb-hp.big span{line-height:24px;font-size:13px}
.wb-cd{font-size:13px}.wb-cd b{font-family:var(--cv-font-num);font-size:18px;color:#FFE7A0}.wb-me{font-size:13px;margin:4px 0}
.tag.red{color:#ff9db0;border-color:rgba(216,58,88,.5)}.tag.gold{color:#FFE7A0}.tag.jade{color:var(--cv-jade)}
.wb-top{display:flex;flex-direction:column;gap:3px}.wb-tr{display:grid;grid-template-columns:28px 1fr auto auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(10,5,22,.5);cursor:pointer;font-size:13px}
.wb-tr small{color:var(--cv-muted)}.wb-tr.me{border:1px solid var(--cv-lightgold)}.wb-tr:nth-child(1) .t-num:first-child{color:#FFE7A0}.wb-rw{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid var(--cv-line-soft);font-size:13px}
@media (max-width:640px){.wb-card{grid-template-columns:1fr}.wb-art{min-height:130px}.wb-art img{max-height:150px}}
/* world boss arena */
#wbArena{position:fixed;inset:0;z-index:150;background:radial-gradient(circle at 50% 30%,#3a1020,#0b0616 70%);overflow:hidden;touch-action:manipulation}
#waCv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wa-top{position:absolute;top:calc(8px + var(--sat));left:50%;transform:translateX(-50%);width:min(560px,94vw);z-index:3;text-align:center}
.wa-name{font-family:var(--cv-font-display);font-weight:800;font-size:clamp(16px,3vw,22px);color:#ff9db0;text-shadow:0 0 14px rgba(216,58,88,.9)}.wa-sub{font-size:12px}
.wa-boss{position:absolute;left:50%;top:14%;transform:translateX(-50%);height:40%;display:flex;align-items:flex-end;z-index:1}.wa-boss img{max-height:100%;max-width:80vw;object-fit:contain;filter:drop-shadow(0 0 26px rgba(216,58,88,.85));animation:float 3s ease-in-out infinite}
.wa-boss[data-phase="2"] img{filter:drop-shadow(0 0 30px rgba(184,108,255,.95))}.wa-boss[data-phase="3"] img{filter:drop-shadow(0 0 30px rgba(255,122,53,.95))}
.wa-boss.enrage img{filter:drop-shadow(0 0 36px #D83A58) saturate(1.5) brightness(1.1);animation:float 1.1s ease-in-out infinite}
.wa-hero{position:absolute;left:50%;bottom:calc(120px + var(--sab));transform:translateX(-50%);height:24%;z-index:1}.wa-hero img{height:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(184,108,255,.8))}
.wa-side{position:absolute;right:calc(8px + var(--sar));top:calc(90px + var(--sat));width:min(240px,42vw);z-index:3;display:flex;flex-direction:column;gap:6px;font-size:12px}.wa-side .wb-tr{grid-template-columns:22px 1fr auto;font-size:11.5px;padding:4px 6px}.wa-side .wb-tr small{display:none}
.wa-me{padding:6px 8px;border-radius:8px;background:rgba(12,6,26,.75);border:1px solid var(--cv-line-gold)}
.wa-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px calc(8px + var(--sar)) calc(12px + var(--sab)) calc(8px + var(--sal))}
.wa-skills{display:flex;gap:8px}.wa-skills .sk{width:58px;height:58px}.wa-skills .sk.t-ultimate{width:68px;height:68px}
.wa-hpme{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(98px + var(--sab));width:min(260px,60vw);height:8px;border-radius:999px;background:rgba(0,0,0,.6);z-index:3;overflow:hidden}.wa-hpme i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2e8b57,#5BE0C6)}
@media (max-width:640px){.wa-side{top:auto;bottom:calc(150px + var(--sab));right:6px;width:46vw;max-height:28vh;overflow:auto}.wa-hero{height:18%;bottom:calc(130px + var(--sab))}}

/* priority ticks on the pinned upgrade dock */
.qd{position:relative}.qd.dis{opacity:.55;filter:grayscale(.35);cursor:default}
.qd .qpri{position:absolute;top:3px;left:3px;margin:0;width:18px;height:18px;background:rgba(12,6,26,.85);z-index:2}
.qd .qpri.on{background:var(--cv-gold)}
#qdPri{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;font-size:11.5px;margin:0 0 4px;pointer-events:auto}
.qd-auto{border:1px solid var(--cv-line);background:rgba(12,6,26,.8);color:#fff;border-radius:999px;padding:3px 10px;font:700 11px var(--cv-font-ui);cursor:pointer}.qd-auto.on{border-color:var(--cv-jade);color:var(--cv-jade)}