/* ===== 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;
}
.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;
    padding: 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;
}
.waiting-center,
.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;
}
.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;
}
.text-ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    font-size: 14px;
    text-align: center;
}
/* ===== USER ACTIVE AREA (Cards + 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 {
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    align-content: start;
}
.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;
}
.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;
}
.rules-content::-webkit-scrollbar,
.arena-map::-webkit-scrollbar,
.user-choose-card-list::-webkit-scrollbar {
    display: none;
}
.map-info img {
    width: 100%;
    border-radius: var(--border-radius-sm);
    text-align: center;
}
.user-ready-button button {
    flex: 0;
}
.arena-guide-image {
    width: 100%;
}
.arena-guide-elements {
    display: flex;
    flex-direction: column;
}
/* ===== MISC UI ===== */
.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;
}
@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);
    }
}
.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);
}
@keyframes runframe {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.user-choose-card-list-center {
    position: relative;
    overflow-y: auto;
}
.user-choose-card-list-center.disabled .slot {
    pointer-events: none;
    opacity: 0.5;
}
.user-choose-card-list-center.disabled::after {
    content: attr(data-status-text);
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #8de3ff, #8ab6ff, #b18cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 8px rgba(150, 180, 255, 0.8),
        0 0 12px rgba(120, 130, 255, 0.7);
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000);
    text-align: center;
    line-height: 1.2;
    width: 100%;
}
.user-choose-card-list-center.disabled .status-subtitle {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    pointer-events: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.status-subtitle img {
    width: 50px;
}
.user-choose-card-list-center.disabled .controls-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 13;
    pointer-events: auto;
    cursor: pointer;
}
@media (max-width: 767px) {
    .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);
    }
}
@media (min-width: 768px) {
    .waiting-center-opponent-info .ready-status {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
}
.arena_center {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: url(/images/arena/battle/lighthouse-sanctuary.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.arena_center::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,1);
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.arena_center.loaded::before {
    animation: fadeOverlay 3s ease-out forwards;
}
@keyframes fadeOverlay {
    0% { opacity: 1; }
    100% { opacity: 0.5; }
}
.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;
    padding: 20px;
    position: relative;
}
.arena_board_slot {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
}
.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 {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    background-image: url('/images/arena/battle/slot.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.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;
}
.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;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}
.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;
}
.slot-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.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;
}
.arena_opponent .card-stats {
    opacity: 0 !important;
}
.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;
    flex-direction: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.score-display.show {
    opacity: 1;
}
.score-display .opp-score {
    color: #4488ff;
    font-weight: bold;
    text-align: center;
}
.score-display .user-score {
    color: #ff4444;
    font-weight: bold;
    text-align: center;
}
.win-gif {
    width: 24px;
}
.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);
}
.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);
}
.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;
    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;
}
.conquered-flash {
    animation: conquered-flash 0.5s ease-in-out;
}
@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);
    }
}
.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));
}
@keyframes elementPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
.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; }
@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);
    }
}
.post-match-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(5px);
    z-index: 998;
    animation: fadeIn 0.6s ease-out;
    background-image: url(/images/arena/battle/arena-choose.gif);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.post-match-stats {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgb(20 20 40 / 80%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    animation: popIn 0.8s ease-out;
    padding: 10px;
}
.match-result {
    position: relative;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 4px;
}
.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; }
.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);
}
.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%;
}
.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;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@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; }
}
.match-result.win {
    position: relative;
}
.match-result.win::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.win::after {
    content: 'THẮNG';
    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;
    animation: winanimate 1.8s ease-in-out infinite;
    z-index: 2;
}
.match-result.lose {
    position: relative;
}
.match-result.lose::before {
    content: 'THUA';
    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::after {
    content: 'THUA';
    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;
    animation: loseanimate 1.8s ease-in-out infinite;
    z-index: 2;
}
.match-result.draw {
    position: relative;
}
.match-result.draw::before {
    content: 'HÒA';
    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.draw::after {
    content: 'HÒA';
    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;
    animation: drawanimate 1.8s ease-in-out infinite;
    z-index: 2;
}
@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 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 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 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); }
}
.rank-neutral { color: #ffd700; }
@media (min-width: 768px) {
    .arena_board {
        align-items: center;
    }
    .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 {
        aspect-ratio: 1/1 !important;
        max-width: 700px;
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 4px;
        padding: 8px;
    }
    .arena_user .slot.selected {
        transform: translateX(-20px);
    }
}