/* Giao diện port từ S1: ô trang bị phẩm chất, thanh luyện 90, tab, lưới hành trang */
@property --itgl{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes itgl{100%{--itgl:360deg}}
.invgrid{box-shadow:0 0 0 1px #797369;background:#252320!important;border:1px solid #000!important}
.it.r1,.idet .pic.r1,.eqk-hd .eqk-pic.r1{border-color:#4a86e8!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 8px #2a5ab0!important}
.it.r2,.idet .pic.r2,.eqk-hd .eqk-pic.r2{border-color:#ff9a3c!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 8px #a85a10!important}
.it.r3,.idet .pic.r3,.eqk-hd .eqk-pic.r3{border-color:#c77bff!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #7a3ab0!important}
.it.r4,.idet .pic.r4,.eqk-hd .eqk-pic.r4{border-color:#fc0!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #b08000,0 0 5px #ffcc0099!important}
.it.r5,.idet .pic.r5,.eqk-hd .eqk-pic.r5{border-color:#9fe8ff!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #4a9ab8,0 0 5px #9fe8ff99!important}
.it.r3,.it.r4,.it.r5,.idet .pic.r3,.idet .pic.r4,.idet .pic.r5{--glc:#ffff00}
.it.r3,.idet .pic.r3{--glc:#f0f}
.it.r5,.idet .pic.r5{--glc:#fff}
.it.r3,.it.r4,.it.r5{position:relative}
.it.r3::before,.it.r4::before,.it.r5::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid color-mix(in srgb,var(--glc) 50%,transparent);pointer-events:none;z-index:2}
.it.r3::after,.it.r4::after,.it.r5::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2.5px;pointer-events:none;z-index:3;background:conic-gradient(from var(--itgl),transparent 0 240deg,color-mix(in srgb,var(--glc) 45%,transparent) 310deg,var(--glc) 352deg,#fff 360deg),conic-gradient(from calc(var(--itgl) + 180deg),transparent 0 240deg,color-mix(in srgb,var(--glc) 45%,transparent) 310deg,var(--glc) 352deg,#fff 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:itgl 2.6s linear infinite;filter:drop-shadow(0 0 2px var(--glc)) drop-shadow(0 0 1px var(--glc))}
@media (prefers-reduced-motion:reduce){.it.r3::after,.it.r4::after,.it.r5::after{animation:none}}
.sk9b{display:block;position:relative;height:5px;background:#1b1d17;border:1px solid #4e4c3c;overflow:hidden}
.sk9b>b{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f8f6a,#7fd0b0);transition:width .3s}
.sk9b.done>b{background:linear-gradient(90deg,#b8901c,#ffd24a)}
.sk9r,.sk9d,.sk9m{display:flex;align-items:center;gap:6px;font-size:11px;color:#7fd0b0}
.sk9r .sk9b,.sk9m .sk9b{flex:0 0 80px}
.sk9d{flex-direction:column;align-items:stretch;gap:3px;margin:6px 0;font-size:12px}.sk9d .sk9b{height:8px}
.sk9m{margin:-2px 0 6px;padding:0 6px}
.sk9c{position:absolute;left:2px;right:2px;bottom:1px;pointer-events:auto}
.sk9c .sk9b{height:4px;border:0;background:#3a3a30;box-shadow:0 0 0 1px #000}
.sk9c em{position:absolute;right:0;bottom:5px;font-style:normal;font-size:9px;line-height:10px;color:#7fd0b0;text-shadow:0 0 2px #000,0 0 2px #000}
.u2k:has(.sk9c)>i{bottom:4px}
.u2k .u2mk{position:absolute;left:0;top:0;width:15px;height:15px;padding:0;border:0;background:none;color:#8d8a74;font-size:12px;line-height:14px;cursor:pointer;text-shadow:0 0 2px #000}
.u2k .u2mk:hover{color:#ffe9a0}.u2k .u2mk.on{color:#ffd24a}
.u2k .u2mk.lk::after{content:"🔒";position:absolute;left:12px;top:0;font-size:8px}
.invgrid.invx{scrollbar-width:none;overflow:hidden auto!important}.invgrid.invx::-webkit-scrollbar{display:none;width:0;height:0}
/* lưới hành trang: giống S1 (ô 33px, cảm ứng 44px, tự xếp cột); máy tính để ô to hơn cho dễ nhìn */
body.u2m .u2bag .invgrid{box-sizing:border-box;grid-template-columns:repeat(auto-fill,33px)!important;width:100%!important}
body.u2m .u2bag .it{width:33px!important;height:33px!important}
@media (pointer:coarse){body.u2m .u2bag .invgrid{grid-template-columns:repeat(auto-fill,44px)!important}body.u2m .u2bag .it{width:44px!important;height:44px!important}}
body.u2s .u2bag .invgrid{grid-template-columns:repeat(10,31px)!important}body.u2s .u2bag .it{width:31px!important;height:31px!important}
body.u20:not(.u2s):not(.u2m)[data-u2t=inv] #panel{width:540px!important}
body.u20:not(.u2s):not(.u2m) .u2bag .invgrid{grid-template-columns:repeat(10,50px)!important;width:max-content!important;max-width:100%}
body.u20:not(.u2s):not(.u2m) .u2bag .it{width:50px!important;height:50px!important}
.u2bag .it img{image-rendering:pixelated}

/* ngựa: Thường/Tốt/Quý không hiệu ứng; Thần trở lên có viền sáng chạy theo màu phẩm chất */
.it.hq3,.idet .pic.hq3{--glc:#c77dff;position:relative;border-color:#c77dff!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #7a3ab0,0 0 5px #c77dff99!important}
.it.hq4,.idet .pic.hq4{--glc:#ff9a3c;position:relative;border-color:#ff9a3c!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #a85a10,0 0 5px #ff9a3c99!important}
.it.hq5,.idet .pic.hq5{--glc:#ff5a5a;position:relative;border-color:#ff5a5a!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #a02020,0 0 5px #ff5a5a99!important}
.it.hq6,.idet .pic.hq6{--glc:#ffd24a;position:relative;border-color:#ffd24a!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #b08000,0 0 5px #ffd24a99!important}
.it.hq3::before,.idet .pic.hq3::before,.it.hq4::before,.idet .pic.hq4::before,.it.hq5::before,.idet .pic.hq5::before,.it.hq6::before,.idet .pic.hq6::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid color-mix(in srgb,var(--glc) 50%,transparent);pointer-events:none;z-index:2}
.it.hq3::after,.idet .pic.hq3::after,.it.hq4::after,.idet .pic.hq4::after,.it.hq5::after,.idet .pic.hq5::after,.it.hq6::after,.idet .pic.hq6::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2.5px;pointer-events:none;z-index:3;background:conic-gradient(from var(--itgl),transparent 0 240deg,color-mix(in srgb,var(--glc) 45%,transparent) 310deg,var(--glc) 352deg,#fff 360deg),conic-gradient(from calc(var(--itgl) + 180deg),transparent 0 240deg,color-mix(in srgb,var(--glc) 45%,transparent) 310deg,var(--glc) 352deg,#fff 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:itgl 2.6s linear infinite;filter:drop-shadow(0 0 2px var(--glc))}
@media (prefers-reduced-motion:reduce){.it.hq3::after,.idet .pic.hq3::after,.it.hq4::after,.idet .pic.hq4::after,.it.hq5::after,.idet .pic.hq5::after,.it.hq6::after,.idet .pic.hq6::after{animation:none}}