/* ===== BIẾN & RESET CƠ BẢN ===== */
:root {
    /* Các biến đã dùng trong code gốc, giữ nguyên để không phá giao diện */
}

/* ===== WAITING ROOM LAYOUT ===== */
#waiting-room {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url(/images/giftcode/giftcode.jpg) center / cover no-repeat;
    color: #fff;
    z-index: 3;
}

.waiting-info-mobile,
.waiting-info-desktop {
    width: 100%;
    z-index: 1;
}

.waiting-center {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.waiting-center-opponent,
.waiting-center-user {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.waiting-center-opponent-info,
.waiting-center-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.user-active {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 100%;
    flex: 1;
    min-height: 0;
    gap: 5px;
    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;
}

.header-room {
    display: flex;
    justify-content: space-between;
    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%;
}

.guest-notification {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(10px);
    height: 100%;
    width: 100%;
    z-index: 2;
}

.text-ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    font-size: 14px;
    text-align: center;
    color: #fff;
}

/* ===== VS CENTER ===== */
.vs-center {
    position: relative;
}

.vs-center .thunder {
    height: 100%;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.vs-center .vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    object-fit: contain;
}

.vs-center-opponent,
.vs-center-user {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.vs-center-opponent img,
.vs-center-user img {
    width: 90px;
    padding: 10px;
}

.vs-center-user-frame {
    position: relative;
}

.vs-center-user-avatar {
    position: absolute;
    border-radius: 50%;
    background: var(--swal2-backdrop);
    width: 60px !important;
    padding: 0px !important;
    z-index: -1;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.arena-vs .thunder,
.waiting-center-thunder .thunder {
    height: 100%;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.arena-vs .vs,
.waiting-center-thunder .vs {
    position: absolute;
    z-index: 2;
    width: 70%;
    object-fit: contain;
}

/* ===== USER CHOOSE CARD & READY ===== */
.user-choose-ready,
.user-choose-card-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    justify-content: start;
    position: relative;
}

.user-choose-card-list {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-content: start;
}

.user-choose-card-list::-webkit-scrollbar,
.user-choose-card-list-center::-webkit-scrollbar,
.arena-map::-webkit-scrollbar,
.rules-content::-webkit-scrollbar {
    display: none;
}

.user-choose-card-list .slot,
.user-choose-ready .slot {
    aspect-ratio: 3/4;
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    z-index: 2;
}

.user-choose-card-list .slot.empty::before,
.user-choose-ready .slot.empty::before {
    content: '';
    width: 60%;
    height: 80%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.user-choose-card-list img.slot-card,
.user-choose-ready img.slot-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.user-choose-card-list .slot img {
    image-rendering: pixelated;
    will-change: transform;
}

.user-ready-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    font-size: 12px;
    min-height: 0;
    position: relative;
}

.user-ready-button button {
    flex: 0;
}

.map-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.arena-map {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.arena-guide-image {
    width: 100%;
    grid-column: span 2;
    border-radius: var(--border-radius-sm);
}

.arena-guide-elements {
    display: flex;
    flex-direction: column;
    grid-column: span 3;
}

/* ===== ARENA LAYOUT ===== */
.arena_center {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: url(/images/giftcode/giftcode.jpg) center / cover no-repeat fixed;
    position: relative;
    overflow: hidden;
    z-index: 3;
}

.arena_center::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,1);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.arena_center.loaded::before {
    animation: fadeOverlay 3s ease-out forwards;
}

.arena_opponent,
.arena_user {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    position: relative;
    overflow: visible;
}

.arena_opponent {
    direction: rtl;
}

.arena_board{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around;position:relative}

.arena_board_slot{display:flex!important;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;box-sizing:border-box;height:100%}

/* ===== SLOT & CARD COMMON ===== */
.slot {
    aspect-ratio: 3 / 4;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    width: 100%;
    height: auto;
}

.slot:hover,
.arena_opponent .slot:hover,
.arena_board_slot .slot:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: none;
    z-index: 1;
}

.arena_board_slot .slot {
    aspect-ratio: 3 / 4;
    background-image: url(/images/arena/battle/slot.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
.arena_board_slot .slot{aspect-ratio:3/4;background-image:url('/images/arena/battle/slot.webp');background-size:cover;background-position:center;background-repeat:no-repeat;box-sizing:border-box}
.arena_board_slot .slot:not(.empty) {
    background: url('/images/arena/battle/slot.webp') center/cover no-repeat !important;
}

.arena_board_slot .slot.placed {
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%), url('/images/arena/battle/slot.webp') center/cover no-repeat !important;
}

.arena_board_slot .slot-card {
    width: 85%;
    height: 85%;
    margin: auto;
    display: block;
    border-radius: 5px;
}

.arena_board_slot .slot .card-stats {
    transform: scale(0.85);
    transform-origin: center;
    z-index: 3;
}

.slot:not(.empty) {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: border-color 0.3s ease;
}

.arena_opponent .slot.empty,
.arena_user .slot.empty {
    border: none;
    background: transparent;
}

.slot.placed {
    border: 2px solid transparent !important;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
}

.slot.placed.opponent-placed .slot-card {
    border: 3px solid #4488ff !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    filter: drop-shadow(0 0 5px #4488ff);
}

.slot.placed.user-placed .slot-card {
    border: 3px solid #ff4444 !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    filter: drop-shadow(0 0 5px #ff4444);
}

.slot-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* ===== CARD STATS ===== */
.card-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-stats span {
    position: absolute;
    text-shadow: 3px 2px 2px #000;
    font-size: x-large;
    font-weight: 700;
    font-family: 'Font Awesome 5 Free';
    color: #fff;
}

.card-stats span::after {
    content: attr(data-val);
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    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 .atk,
.card-stats .spd {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.card-stats .atk { right: 0; }
.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) 0px 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) 0px 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) 0px 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) 0px 5px 15px;
}

.arena_opponent .card-stats {
    opacity: 0 !important;
}
.card-stats span[data-val="A"],
.card-stats span[data-val="S"],
.card-stats span[data-val="SS"] {
    font-size: 14px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 8px #ff4500, 0 0 12px #ff4500;
    letter-spacing: 1px;
}
/* ===== MISC UI & EFFECTS ===== */
.room-name-display {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.user-ready-time {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    z-index: 1;
    display: none;
}

#countdown-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    transition: transform 0.1s ease, text-shadow 0.1s ease;
    z-index: 2;
}

#countdown-display.countdown-flash {
    animation: countdown-flash 0.5s ease-in-out;
}
.arena_center,.arena_user,.arena_opponent{display:none!important}
.arena_center.show,.arena_user.show,.arena_opponent.show{display:flex!important}
.glowing-gold {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.glowing-gold::before {
    content: '';
    height: 50%;
    width: 100%;
    position: absolute;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(192, 192, 192, 0.8) 110deg, transparent 220deg);
    animation: runframe 2s linear infinite;
}

.button-text {
    position: relative;
    z-index: 1;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(145deg, #fff7d1, #f4cf74, #c9a345);
    border: 1px solid #b48b32;
    color: #4a2e00;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 4px rgba(255, 255, 255, 0.4);
}

.user-choose-card-list-center {
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: url("/images/video/card-flip/fantasy_card_back.webp") center/100% auto no-repeat,
                url("/images/arena/battle/arena-choose.gif") center/100% auto no-repeat,
                rgba(0,0,0,0.7);
    background-blend-mode: overlay;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.loading-text {
    animation: blink 1.5s ease-in-out infinite;
}

.card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 80px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #000;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.arena_user .slot.selected {
    z-index: 15;
    transition: transform 0.3s ease;
}

.board-click-gif {
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    z-index: 5;
    pointer-events: none;
}

.board-click-gif img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.placing-card {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

.placing-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.opponent-place {
    transform: rotate(180deg);
}

.turn-timer,
.score-display {
    position: absolute;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 24px;
    z-index: 30;
    pointer-events: none;
    animation: pulse 1s infinite;
}

.turn-timer {
    top: 10px;
    right: 10px;
}

.score-display {
    top: 5px;
    font-size: 40px;
    font-family: Arial, sans-serif;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.score-display.show {
    opacity: 1;
}

.score-display .opp-score {
    color: #4488ff;
}

.score-display .user-score {
    color: #ff4444;
}

.win-gif {
    width: 24px;
}

.conquered-flash {
    animation: conquered-flash 0.5s ease-in-out;
}

.terrain-element {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 20px;
    z-index: 10;
    pointer-events: none;
    animation: elementPulse 2s infinite;
}

.terrain-element img {
    width: 30px;
    filter: drop-shadow(0 0 20px var(--dark));
}

.poison-bg,
.heart-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 18;
    pointer-events: none;
    animation: elementFlash 0.8s ease-out forwards;
}

.poison-minus,
.heart-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    animation: elementFlash 0.8s ease-out forwards;
    z-index: 20;
    pointer-events: none;
}

.poison-minus { color: #ff0000; }
.heart-plus { color: #fd7e14; }

.waiting-indicator {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50px;
    white-space: nowrap;
    z-index: 10;
}

.opponent-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.text-waiting {
    padding: 5px;
    font-size: 12px;
    animation: blink 1.5s ease-in-out infinite;
}

/* ===== POST MATCH ===== */
.post-match-overlay{position:absolute;inset:0;backdrop-filter:blur(5px);z-index:998;animation:fadeIn 0.6s ease-out;background-image:linear-gradient(rgba(20,20,40,0.8),rgba(20,20,40,0.8)),url(/images/arena/battle/arena-choose.gif),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));background-size:100% auto;background-repeat:no-repeat;background-position:center}
.post-match-stats{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;animation:popIn 0.8s ease-out;padding:10px}

.match-result {
    position: relative;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 4px;
    width: 100%;
}

.new-score-display {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 48px;
    font-weight: bold;
}

.new-score-display .opp-score { color: #4488ff; }
.new-score-display .user-score { color: #ff4444; }

.rank-update {
    width: 100%;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.rank-up { color: #00ff00; }
.rank-down { color: #ff6600; }
.rank-neutral { color: #ffd700; }

.rewards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.reward-item {
    width: 60px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}

.reward-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    border: 3px double #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}
.arena_battle_info{z-index:1}
.arena_battle_score{opacity: 0;visibility: hidden;transition: opacity 0.8s;display:flex;align-items:center;justify-content:center;gap:10px;font-size:40px;font-weight:bold;background:rgba(0,0,0,0.6);border-radius:12px;backdrop-filter:blur(4px);margin:10px;flex-shrink:0;z-index:20;pointer-events: none}
.arena_battle_score .battle-opp-score{color:#4488ff;/* xanh dương - đối thủ */}
.arena_battle_score .battle-user-score{color:#ff4444;/* đỏ - người chơi */}
.arena_battle_score .win-gif{width:30px;height:30px}
.arena_battle_dialogues{opacity:0;visibility:hidden;transition:opacity 0.8s ease}
.decide-turn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;background:rgba(0,0,0,0.8);color:white;padding:20px 40px;border-radius:12px;font-size:20px;font-weight:bold;text-shadow:2px 2px 4px #000;pointer-events:none;opacity:0;animation:fadeInOut 3s ease-in-out forwards}
.turn-guide{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);z-index:30;background:rgba(0,0,0,0.7);color:#ffd700;padding:15px 30px;border-radius:10px;font-size:18px;font-weight:bold;text-shadow:2px 2px 4px #000;pointer-events:none;max-width:80%;text-align:center}
.first-turn-highlight{filter: drop-shadow(0 0 10px var(--swal2-validation-message-background));transition:box-shadow 0.5s}
.cards-exp { width: 100%; }

.card-previews {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.card-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.card-preview img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px double var(--swal2-footer-border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px var(--swal2-footer-border-color);
}

.next-level {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
    flex-shrink: 0;
    gap: 2px;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #cccccc5c;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f8f9fa, var(--orange));
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.exp-on-card {
    font-size: 12px;
    color: #ffc107;
}

.level-display {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 2;
    background: rgba(0,0,0,0.5);
    padding: 1px 4px;
    border-radius: 3px;
}

.card-preview.level-flash {
    animation: levelFlash 0.5s ease-in-out;
}

.match-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.btn-close-postmatch {
    background: url(/images/arena/battle/vs-button.webp) center center / 100% no-repeat;
    padding: 20px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px #000;
    color: var(--swal2-footer-border-color);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    text-align: center;
    filter: drop-shadow(0 0 20px var(--blue));
    cursor: pointer;
}

.match-buttons button:active {
    transform: translateY(1px);
}

.reward-sponsors-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    color: #fff;
}

.sponsors-info {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    padding: 5px;
    width: 100%;
}

.sponsors-logo {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 15px var(--orange);
    background: var(--white);
}

.sponsors-logo img {
    width: 100%;
}

/* ===== MATCH RESULT TEXT EFFECTS ===== */
.match-result.win::before,
.match-result.lose::before,
.match-result.draw::before {
    content: 'THẮNG';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    -webkit-text-stroke: 1px #a8a8a8;
    text-stroke: 1px #a8a8a8;
    z-index: 1;
}

.match-result.lose::before { content: 'THUA'; }
.match-result.draw::before { content: 'HÒA'; }

.match-result.win::after,
.match-result.lose::after,
.match-result.draw::after {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: inherit;
    font-weight: bold;
    letter-spacing: 4px;
    background: linear-gradient(45deg, var(--orange), var(--orange), var(--yellow));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 2;
}

.match-result.win::after { content: 'THẮNG'; animation: winanimate 1.8s ease-in-out infinite; }
.match-result.lose::after { content: 'THUA'; animation: loseanimate 1.8s ease-in-out infinite; }
.match-result.draw::after { content: 'HÒA'; animation: drawanimate 1.8s ease-in-out infinite; }

.match-result.draw { filter: drop-shadow(0 0 20px var(--light)); }

/* ===== ANIMATIONS ===== */
@keyframes countdown-flash {
    0%, 100% { transform: translate(-50%, -50%) scale(1); text-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50% { transform: translate(-50%, -50%) scale(1.2); text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

@keyframes runframe {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeOverlay {
    0% { opacity: 1; }
    100% { opacity: 0.5; }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

@keyframes conquered-flash {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); transform: scale(1); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); transform: scale(1.05); }
}

@keyframes elementPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes elementFlash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) translateY(-30px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes popIn {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    80% { transform: translate(-50%, -50%) scale(1.05); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes winanimate {
    0%, 100% { clip-path: polygon(0% 20%, 16% 19%, 33% 25%, 54% 35%, 70% 36%, 84% 34%, 100% 27%, 100% 100%, 0% 100%); }
    50% { clip-path: polygon(0% 35%, 15% 40%, 34% 41%, 51% 37%, 67% 25%, 84% 20%, 100% 21%, 100% 100%, 0% 100%); }
}

@keyframes loseanimate {
    0%, 100% { clip-path: polygon(0% 70%, 16% 69%, 33% 75%, 54% 85%, 70% 86%, 84% 84%, 100% 77%, 100% 100%, 0% 100%); }
    50% { clip-path: polygon(0% 85%, 15% 90%, 34% 91%, 51% 87%, 67% 75%, 84% 70%, 100% 71%, 100% 100%, 0% 100%); }
}

@keyframes drawanimate {
    0%, 100% { clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); }
    50% { clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); }
}

@keyframes levelFlash {
    0%, 100% { box-shadow: 0 0 5px #ffd700; transform: scale(1); }
    50% { box-shadow: 0 0 20px #ffd700, 0 0 30px #ff4500; transform: scale(1.05); }
}

/* ===== MEDIA QUERIES ===== */
@media (max-width: 767px) {
    .waiting-info-mobile {
        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;
    }

    .waiting-info-desktop { display: none; }

    .user-choose-card-list {
        grid-template-columns: repeat(3, 1fr);
        height: 100%;
        justify-content: start;
    }

    .user-choose-card-list .slot {
        align-self: start;
        justify-self: center;
    }

    .arena_user .slot.selected {
        transform: translateY(-20px);
    }
    .arena_center {
        background: url(/images/arena/battle/lighthouse-sanctuary.webp) center / 100% 100% no-repeat;
    }
    .arena_battle_info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    .score_dialogues {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 8px;
        gap: 5px;
    }
    .arena_battle_score {
        font-size: 50px;
        gap: 5px;
        margin: 0;
        flex: 1;
    }
    .arena_battle_dialogues .vs-center-opponent img {
        width: 70px;
        padding: 0;
    }
    .text-ellipsis {
        max-width: 64px;
    }
    .dialogue-texts {
        position: absolute;
        top: 20px;
        left: 190px;
        background: var(--swal2-footer-border-color);
        color: #000000;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        text-shadow: 1px 1px 3px var(--swal2-validation-message-background);
        white-space: normal;
        word-wrap: break-word;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        padding: 5px;
        min-height: 20px;
        z-index: 20;
    }
    .dialogue-texts:empty {
        display: none;
    }
    .dialogue-texts:not(:empty)::after {
        opacity: 1;
    }
        .dialogue-texts::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-bottom: 15px solid transparent;
        border-top: 15px solid transparent;
        border-right: 10px solid var(--swal2-footer-border-color);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .post-match-stats{width:100%}
}

@media (min-width: 768px) {
    .waiting-center-opponent-info .ready-status {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .waiting-info-mobile { display: none; }

    .arena_board {
        align-items: center;
        background: url(/images/arena/battle/lighthouse-sanctuary.webp) center / 100% 100% no-repeat;
        opacity: 0;
        transition: opacity 800ms ease-out;
    }

    .arena_center {
        flex-direction: row;
        align-items: stretch;
    }

    .arena_opponent,
    .arena_user {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 4px;
        padding: 8px 4px;
        height: 100%;
        direction: ltr;
        box-sizing: border-box;
    }

    .arena_board_slot {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }

    .arena_user .slot.selected {
        transform: translateX(-20px);
    }
    .arena_battle_info {
        display: flex;
        flex-direction: column;
    }
    .arena_battle_info .score_dialogues{
        flex: 1;
    }
    .arena_battle_info .arena_opponent {
        flex: 2;
    }
    .score_dialogues {
        display: flex;
        flex-direction: column;
    }
    .arena_battle_dialogues {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: none;
    }
    .score_dialogues .arena_battle_dialogues {
        flex: 1;
    }
    .vs-center-opponent img, .vs-center-user img {
        width: 60px;
        padding: 0;
    }
    .dialogue-texts {
        position: absolute;
        top: 0;
        background: var(--swal2-footer-border-color);
        color: #000000;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        text-shadow: 1px 1px 3px var(--swal2-validation-message-background);
        white-space: normal;
        word-wrap: break-word;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        padding: 5px;
        min-height: 20px;
    }
    .dialogue-texts:empty {
        display: none;
    }
        .dialogue-texts:not(:empty)::after {
        opacity: 1;
    }
        .dialogue-texts::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--swal2-footer-border-color);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

@media (min-width: 1024px) {
    .arena-guide {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        padding: 5px;
        width: 100%;
    }
    .arena_battle_score {
        gap: 5px;
        font-size: 50px;
        margin: 0;
    }
    .arena_battle_dialogues .vs-center-opponent img {
        width: 70px;
    }
        .text-ellipsis {
        max-width: 70px;
    }
}
@media (min-width: 1280px) {
    .arena_battle_score {
        gap: 5px;
        font-size: 60px;
        margin: 0;
    }
    .arena_battle_dialogues .vs-center-user-avatar {
        width: 90px !important;
    }
    .arena_battle_dialogues .vs-center-opponent img {
        width: 100px;
    }
        .text-ellipsis {
        max-width: 100px;
    }
}