:root{--backdrop-blur:blur(3px);--backdrop-filter:blur(3px);--shadow-base:0 4px 15px rgba(0,0,0,0.2);--border-radius-sm:5px;--border-radius-md:8px;--border-radius-lg:12px;--transition-base:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);--backdrop-bg:rgba(255,255,255,0.05);--text-shadow:2px 2px 4px #000;--orange:#ff6b00}
a:hover{color:#fff;text-decoration: none;}
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable="true"]{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
body{touch-action:manipulation}
.gap-1{gap:10px}
.h-vh-100{height:100dvh;overflow-x:hidden;box-sizing:border-box;scrollbar-width:none}
#index-section,.backpack-item,.backpack-list,.backpack-info,.shop-list,.shop-list .view,.view.active,.card-view{scrollbar-width:none;-ms-overflow-style:none}
#index-section::-webkit-scrollbar,.backpack-item::-webkit-scrollbar,.backpack-list::-webkit-scrollbar,.backpack-info::-webkit-scrollbar,.shop-list::-webkit-scrollbar,.shop-list .view::-webkit-scrollbar;.view.active::-webkit-scrollbar{display:none}
#index-section{display:flex;flex-direction:column;justify-content:space-between}
.header-wrapper{flex:1;overflow-y:auto}
.backpack-item{background:url(/images/giftcode/giftcode.jpg) center/cover no-repeat fixed;color:#fff;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.backpack-container{display:grid;grid-template-columns:1fr 3fr 2fr;gap:5px;padding:5px;width:100%;overflow:hidden;flex:1}
.backpack-list,.backpack-info,.shop-list{overflow:hidden;height:100%;padding: 10px;}
.backpack-list-item{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:5px;width:100%}
.item-thumb{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1 / 1;cursor:pointer}
.quantity-badge,.quantity-treasure{position:absolute;top:0;right:0;background:#ff6b00b3;border-radius:0 5px;width:auto;font-size:10px;padding:2px;display: flex;align-items: center;}
.quantity-treasure img{width:14px!important;height:14px!important}
.item-thumb img,.backpack-info img,.backpack-info-mobile img,.backpack-pet-info-index img,.backpack-pet-info-index img{width:100%;height:100%;object-fit:cover;border-radius:5px;background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter);outline:1px solid rgba(255,255,255,0.8)}
.backpack-pet img,.backpack-radar img,.backpack-info img,.backpack-info-mobile img{width:60px;height:60px}
.backpack-info,.backpack-info-mobile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px;min-width:100%;box-sizing:border-box}
.backpack-info span,.backpack-info-mobile span{text-align:justify;font-size:14px}
.backpack-info-user{color:#fff;background:var(--orange);border:1px solid var(--orange);border-radius:5px;padding:3px 10px;cursor:pointer}
.backpack-info-user.active{background:var(--swal2-confirm-button-background-color);border-color:var(--swal2-confirm-button-background-color)}
.backpack-info-user.exchange-btn{background:var(--orange);border-color:var(--orange)}
.backpack-info-user.insufficient{background:gray;border-color:gray;cursor:not-allowed}
.backpack-info-user.status{display:flex;align-items:center;gap:10px;background:var(--green);border:1px solid var(--green);padding:5px}
.backpack-info-user.status img{width:30px;height:30px}
.backpack-menu,.backpack-list,.backpack-info{background:var(--swal2-backdrop);box-shadow:var(--shadow-backdrop);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-filter);border-bottom:1px solid var(--swal2-backdrop);outline:1px solid var(--swal2-backdrop);box-sizing:border-box;width:100%}
.backpack-menu{display:flex;flex-direction:column;gap:10px}
.menu-btn{cursor:pointer}
.menu-btn.active{color:var(--orange);font-weight:700;border-left:2px solid var(--orange);margin-left:5px;padding:5px}
.menu-btn.shops{display:flex;align-items:center;gap:5px}
.menu-btn .shops-coins{display:flex;flex-direction:column}
.menu-btn.shops img{width:30px}
#coin-count{color:var(--orange);font-size:12px}
.view{display:none}
.view.active{display:block;overflow-y: auto;height: 100%;}
.backpack-pet-radar{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;width:100%}
.backpack-pet,.backpack-radar{border-radius:5px;background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8)}
.backpack-pet span,.backpack-radar span{font-size:12px;color:#fff}
.backpack-pet-info,.backpack-radar-info{display:flex;flex-direction:column;gap:5px;font-size:12px;cursor:pointer;position:relative}
.backpack-pet-info-index,.backpack-radar-info-index{display:flex;gap:10px;width:100%}
.backpack-pet-info-stats {
    display: flex;
    flex-direction: column;
}
.backpack-pet-info-hunger,.backpack-radar-info-battery{position:relative}
.hunger-progress-container,.battery-progress-container{position:relative;overflow:hidden;width:100%}
.progress{position:relative;border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.2);width:100%}
.progress-bar{position:absolute;left:0;top:0;height:100%;transition:width .3s ease;font-size:12px;line-height:20px;text-align:center;border-radius:10px;background:linear-gradient(90deg, #ffd700, #ff4500);}
.hunger-icon,.battery-icon{position:absolute;top:50%;transform:translateY(-50%);width:20px!important;height:20px!important;border-radius:50%!important;pointer-events:none;background:rgba(255,255,255,0.6);box-shadow:var(--shadow-base),inset 0 0 10px rgba(255,255,255,0.5);z-index:2}
.detail-info-btn{position:relative;width:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.detail-info-btn i{position:absolute;top:0;right:0}
.pet-stats{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%}
.pet-stats-info{display:grid;grid-template-columns:1fr;gap:5px;width:100%;border-top:1px solid #ccc;margin-top: 5px;}
.pet-star{display:flex;align-items: center;font-size:10px;gap:2px}
.pet-level{width:60%}
.pet-stats-info-progress-bar{display:grid;grid-template-columns:6fr 5fr 2fr 1fr;align-items:center;gap:5px;width:100%;font-size:12px}
.pet-stats-info-progress-bar .progress{height:10px}
.hamburger-controls{display:flex;align-items:center;justify-content:center;gap:5px}
.hamburger-controls button{width:30px;height:30px}
.qty-input{width:50%;height:30px;text-align:center}
.shop-name{max-width:100%;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center}
.pet-index{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%}
.pet-match{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:5px;font-size:12px}
.view-match-history,.battle-match{display:flex;align-items:center;gap:5px;border:1px solid #ccc;border-radius:5px;cursor:pointer;padding:5px;color:#fff}
.view-match-history img{width:20px;height:20px}
.pet-match-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:5px}
.match-circle{position:relative;text-align:center}
.circle-svg{width:100%;height:auto}
.match-circle small{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:10px;background:var(--swal2-deny-button-background-color);padding:0 8px;border-radius:5px}
.shop-menu{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width: 100%;}
.shop-menu .menu-btn span{font-weight:normal;font-size:10px;text-transform:none}
.shop-menu .menu-btn{border-radius:5px;color:var(--swal2-footer-border-color);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 3px;cursor:pointer;background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8)}
.shop-menu .menu-btn.active{border:1px solid var(--orange);color:var(--orange);margin-left:0}
.shop-list .view{display:grid!important;grid-template-columns:repeat(4,1fr);grid-auto-rows:max-content;gap:10px;height:100%;overflow-y:auto;align-content:start}
.shop-list .view:not(.active){display:none!important}
.shops-view-items img{width:100%;border-bottom:1px solid #ccc;background:var(--swal2-backdrop);border-radius:5px 5px 0 0}
.shops-view-items{border-radius:5px;background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8)}
.shops-view-items .btn-action, .card-owned{display:block;width:100%;padding:5px;text-align:center;font-size:12px;border-radius:0 0 5px;color:#fff;cursor:pointer}
.shops-view-items .btn-action.owned, .card-owned{filter:drop-shadow(0 0 5px var(--orange));color:#fff;cursor:not-allowed}
.shops-view-items .btn-action.buy, .card-buy{background-image:linear-gradient(to right,#fd7e14a6,#ff001857)}
.shops-view-items .btn-action.mission,.shops-view-items .btn-action.gift,.shops-view-items .btn-action.lucky, .card-unlock{background-image:linear-gradient(to right,#0f0c29,#302b63,#24243e)}
.item-name{font-size: 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    padding: 0 5px;}
.card-view {
    grid-template-columns: repeat(1, 1fr) !important;
}
.card-detail {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}
.card-stats-img {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    border-radius: var(--border-radius-sm);
    background: var(--backdrop-bg);
    box-shadow: var(--shadow-base), inset 0 0 10px rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    outline: 1px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.slot-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.card-stats {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-stats-img .card-stats {
    top: 0;
}
.card-stats span {
    text-shadow: 3px 2px 2px #000;
    font-weight: 700;
    font-family: 'Font Awesome 5 Free';
}
.card-stats span::after {
    content: attr(data-val);
}
.card-stats .hp::after, .card-stats .atk::after, .card-stats .def::after, .card-stats .spd::after {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--swal2-backdrop);
    outline: 1px solid var(--swal2-backdrop);
}
.card-stats-img .card-stats .hp::after, .card-stats-img .card-stats .atk::after, .card-stats-img .card-stats .def::after, .card-stats-img .card-stats .spd::after {
    width: 30px;
    height: 30px;
}
.card-stats .atk {
    right: 0;
}

.card-stats .atk, .card-stats .spd {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.card-stats .def {
    position: absolute;
    bottom: 0;
}
.card-stats .spd {
    left: 0;
}
.card-stats .hp::after {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/arena/stats/hp.gif);
    box-shadow: var(--orange) 0 5px 15px;
}
.card-stats .atk::after {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/arena/stats/atk.gif);
    box-shadow: var(--danger) 0 5px 15px;
}
.card-stats .def::after {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/arena/stats/def.gif);
    box-shadow: var(--indigo) 0 5px 15px;
}
.card-stats .spd::after {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/arena/stats/spd.gif);
    box-shadow: var(--success) 0 5px 15px;
}
.card-locked-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    text-shadow: 1px 1px 3px #000;
}
.card-view .item-name {
    max-width: 100%;
    font-weight: 700;
    padding: 0;
}
.card-stats-canvas {
    width: 100% !important;          /* chiếm hết chiều rộng của .card-detail */
    aspect-ratio: 1 / 1;
}
.shops-view-items.card-item {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-between;
    /* min-height: 280px; */
    box-sizing: border-box;
}
.card-owned-info{width:100%;font-size:12px;display:flex;justify-content:space-between}
.card-buy, .card-unlock {
    width: 100%;
    border-radius: 0 0 5px 0;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}
.price-owned{font-size:12px;display:flex;justify-content:space-between;padding:0 5px}
.card-stats span[data-val="A"],
.card-stats span[data-val="S"],
.card-stats span[data-val="SS"] {
    font-size: 24px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 8px #ff4500, 0 0 12px #ff4500;
    letter-spacing: 1px;
}
.relationships-face-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    font-size: 12px;
    animation: orbit 12s linear infinite;
    animation-delay: var(--delay, 0s);
    transform-origin: center center;
}
.relationships-face-item img {
    border-radius: 50%;
    width: 50px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--backdrop-bg);
    box-shadow: var(--shadow-base), inset 0 0 10px rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--backdrop-filter);
    -webkit-backdrop-filter: var(--backdrop-filter);
    outline: 1px solid rgba(255, 255, 255, 0.8);
    padding: 5px;
    transition: transform 0.4s;
}
.relationships-face {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    perspective: 1000px;
}

.relationships-face-item:hover img {
    transform: scale(1.15) rotate(10deg);
}

/* Đường nối với hiệu ứng chảy ánh sáng */
.relationships-face-item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    width: 30px;
    height: 10px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    background-size: 200% 100%;
    animation: flow 3s linear infinite;
    transform: translateY(-50%);
}
.up-stat {
    width: 60% !important;
    height: 100% !important;
    background: none !important;
    border: 0;
    outline: 0 !important;
    box-shadow: none !important;
}
.upgraded-star {
    font-size: 1.3em !important;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    animation: glow 2s ease-in-out infinite alternate;
    transform: scale(1.2);
    display: inline-block;
}
.items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
    padding: 10px;
}

/* Điều chỉnh số cột theo mốc sao */
[data-star="6"] .items-grid {
    grid-template-columns: repeat(4, 1fr);
}

[data-star="9"] .items-grid {
    grid-template-columns: repeat(5, 1fr);
}
.item-upgrade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.item-upgrade img {
    width: 50px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--backdrop-bg);
    box-shadow: var(--shadow-base), inset 0 0 10px rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--backdrop-filter);
    -webkit-backdrop-filter: var(--backdrop-filter);
    outline: 1px solid rgba(255, 255, 255, 0.8);
}
.item-upgrade-qt {
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    max-width: 60px;
    font-size: 14px;
}
.item-upgrade span {
    font-size: 12px;
    max-width: 100px;
}
.radar-canvas-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
}
#radarSweepCanvas{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.radar-info {
        display: flex;
    gap: 10px;
    width: 100%;
}
.radar-scan {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.radar-bg {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
}
.radar-scan img{
    border: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    height: auto;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.radar-canvas{
position: absolute;
    top: 50%;
    left: 50%;
    width: 57%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, #043b0b30, #021e04);
    border: 2px solid rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}
@keyframes glow {
    from { text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); }
    to   { text-shadow: 0 0 15px rgba(255, 215, 0, 1); }
}
/* Hiệu ứng xoay nhẹ như sao */
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(0) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(0) rotate(-360deg); }
}

/* Hiệu ứng dòng chảy trên đường nối */
@keyframes flow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.modal-dialog{height:100%!important}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding: 5px;gap: 5px;}
.modal-body{padding:0;overflow:hidden!important;position:relative}
.swal2-styled:focus,.swal2-popup .swal2-styled:focus,.swal2-container button.swal2-styled:focus{outline:none!important;box-shadow:none!important;border:none!important}
.swal2-popup,.modal-content{border-radius:var(--border-radius-sm)!important;background:radial-gradient(circle at center,#7800ffa3,#000)!important;backdrop-filter:var(--backdrop-blur)!important;border:1px solid rgba(255,255,255,0.6)!important;color:#e5d7ff!important}
.swal2-styled.swal2-confirm,.swal2-styled.swal2-cancel{background:url(/images/arena/battle/vs-button.webp) center / 100% 100% no-repeat!important;padding:10px 24px!important;font-weight:900!important;text-transform:uppercase!important;text-shadow:var(--text-shadow)!important;color:var(--orange)!important;filter:drop-shadow(0 0 12px #ff6b0066)!important}
.swal2-styled.swal2-cancel{filter:grayscale(0.7) drop-shadow(0 0 8px #666)!important}
.swal2-backdrop-show{background:rgba(0,0,0,0.82)!important}
.swal2-icon.swal2-error,.swal2-icon.swal2-warning{display:none!important}
@media (max-width:767px){.backpack-container{grid-template-columns: 1fr 4fr;}.backpack-menu{gap:5px;font-size:12px}.menu-btn{border-radius:5px;color:var(--swal2-footer-border-color);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 3px;cursor:pointer;background:var(--backdrop-bg);box-shadow:var(--shadow-base),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8)}.menu-btn.active{border:1px solid var(--orange);color:var(--orange);margin-left: 0;}.backpack-info{display:none}.pet-stats-info-progress-bar .progress,.progress{border:1px solid #ccc}div:where(.swal2-container){z-index:1062!important}.match-circle small{font-size:14px;padding:0 5px;bottom:-5px;color:#fff}.circle-svg{width:60px;height:60px}.menu-btn .shops-coins{align-items:center}.menu-btn.shops img{width:20px}}
@media (min-width:768px){.item-name{max-width:100px}.backpack-pet-info-index img,.backpack-radar-info-index img{width:100px;height:100px}.backpack-pet-info-stats span{font-size:16px}}
@media (min-width:1024px) and (max-width:1279px){.pet-stats-info-progress-bar{grid-template-columns:8fr 4fr 2fr 1fr;gap:2px}.pet-match{display:flex;align-items:center}}
@media (min-width:1280px){.backpack-list-item{grid;grid-template-columns:repeat(10,1fr)}}