/* ============================================================
   PVP
   ============================================================ */

.pvp-screen {
    position: relative;

    min-height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        max(70px,env(safe-area-inset-top))
        20px
        max(30px,env(safe-area-inset-bottom));

    background-image:
        url("../assets/images/backgrounds/room-bg.webp");

    background-size: cover;
    background-position: center;
}

.pvp-container {
    position: relative;

    z-index: 2;

    width: min(92%,520px);

    text-align: center;
}

.pvp-title {
    color: #fbbf24;

    font-size:
        clamp(45px,11vw,70px);

    font-weight: 900;

    letter-spacing: 6px;
}

.pvp-subtitle {
    margin-bottom: 45px;

    color: #94a3b8;

    font-size: 10px;

    letter-spacing: 5px;
}


/* ============================================================
   BACK
   ============================================================ */

.back-button {
    position: absolute;

    z-index: 5;

    top:
        max(15px,env(safe-area-inset-top));

    left: 18px;

    width: 48px;
    height: 48px;

   display: flex;              /*## Căn icon bằng Flexbox */
    align-items: center;        /*## Căn giữa dọc */
    justify-content: center;    /*## Căn giữa ngang */

    border:
        1px solid #475569;

    border-radius: 12px;
    padding: 0;                 /*## Xóa padding mặc định của button */

    background:
        rgba(15,23,42,0.9);

    color: white;
    line-height: 1;             /*## Hạn chế glyph bị lệch */

    font-size: 22px;

    cursor: pointer;
}


/* ============================================================
   CREATE / JOIN
   ============================================================ */

.create-room-button,
.join-room-button {
    width: 100%;
    height: 62px;

    border-radius: 13px;

    font-weight: 900;

    letter-spacing: 2px;

    cursor: pointer;
}

.create-room-button {
    border: none;

    background:
        linear-gradient(
            135deg,
            #fbbf24,
            #f97316
        );

    color: #111827;
}

.join-room-button {
    margin-top: 12px;

    border:
        1px solid #475569;

    background: #1f2937;

    color: white;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.or-divider {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin: 28px 0;

    color: #64748b;

    font-size: 9px;
}

.or-divider span {
    height: 1px;

    background: #334155;
}


/* ============================================================
   ROOM CODE
   ============================================================ */

.room-code-label,
.waiting-label {
    margin-bottom: 7px;

    color: #64748b;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;
}

.room-code-input {
    width: 100%;
    height: 65px;

    border:
        2px solid #334155;

    border-radius: 13px;

    outline: none;

    background:
        rgba(17,24,39,0.95);

    color: #fbbf24;

    text-align: center;

    text-transform: uppercase;

    font-size: 27px;

    font-weight: 900;

    letter-spacing: 10px;
}

.room-code-input:focus {
    border-color: #f59e0b;
}


/* ============================================================
   WAITING ROOM
   ============================================================ */

.waiting-room {
    padding: 28px 20px;

    border:
        1px solid #334155;

    border-radius: 18px;

    background:
        rgba(15,23,42,0.92);
}

.current-room-code {
    color: #fbbf24;

    font-size:
        clamp(40px,12vw,62px);

    font-weight: 900;

    letter-spacing: 12px;
}

.room-code-help {
    color: #64748b;

    font-size: 8px;

    letter-spacing: 2px;
}


/* ============================================================
   PLAYERS
   ============================================================ */

.players-area {
    display: grid;

    grid-template-columns:
        1fr 60px 1fr;

    align-items: center;

    margin-top: 38px;
}

.player-avatar {
    width: 75px;
    height: 75px;

    margin:
        0 auto 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        2px solid #f59e0b;

    border-radius: 50%;

    background: #1f2937;

    font-size: 36px;
}

.player-avatar.waiting {
    border-color: #475569;

    color: #64748b;
}

.room-player-name {
    font-size: 13px;

    font-weight: 900;
}

.player-status {
    margin-top: 6px;

    color: #64748b;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}

.player-status.ready {
    color: #22c55e;
}

.room-vs {
    color: #ef4444;

    font-size: 24px;

    font-weight: 900;

    font-style: italic;
}

.waiting-message {
    margin-top: 35px;

    color: #94a3b8;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    animation:
        waitingPulse
        1s infinite;
}

@keyframes waitingPulse {

    50% {
        opacity: 0.35;
    }
}


/* ============================================================
   LEAVE
   ============================================================ */

.leave-room-button {
    width: 100%;
    height: 48px;

    margin-top: 25px;

    border:
        1px solid #7f1d1d;

    border-radius: 11px;

    background:
        rgba(127,29,29,0.15);

    color: #f87171;

    font-weight: 900;

    cursor: pointer;
}

/* =============================================================
   PVP BATTLE PLAYERS
   ============================================================= */

.pvp-battle-players {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    margin-bottom: 30px;
}


.pvp-battle-player {
    width: 150px;

    padding: 14px;

    border: 2px solid #3d4a5c;
    border-radius: 12px;

    text-align: center;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.pvp-battle-player-name {
    font-weight: 800;
    letter-spacing: 1px;
}


.pvp-player-state {
    margin-top: 7px;

    font-size: 12px;

    opacity: 0.8;
}


.pvp-player-score {
    margin-top: 10px;

    font-size: 13px;
}


.pvp-player-score span {
    font-size: 20px;
    font-weight: 900;

    margin-left: 5px;
}


/*
    Đã chọn nhưng chưa reveal
*/

.pvp-battle-player.locked {
    border-color: #ffc107;
}


/*
    Trả lời đúng
*/

.pvp-battle-player.correct {
    border-color: #2ecc71;

    background:
        rgba(46, 204, 113, 0.12);
}


/*
    Trả lời sai
*/

.pvp-battle-player.wrong {
    border-color: #ff4757;

    background:
        rgba(255, 71, 87, 0.12);
}


/*
    Khóa answer
*/

.answer-button.locked {
    pointer-events: none;

    opacity: 0.55;
}


.answer-button.selected {
    border-color: #ffc107;

    opacity: 1;
}


.answer-button.correct-answer {
    border-color: #2ecc71;

    background:
        rgba(46, 204, 113, 0.18);

    opacity: 1;
}


.answer-button.wrong-answer {
    border-color: #ff4757;

    background:
        rgba(255, 71, 87, 0.18);

    opacity: 1;
}

/* =============================================================
   PVP ANSWER STATE
   ============================================================= */

#pvpAnswers .answer-button {
    position: relative;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease,
        opacity 0.2s ease;
}


/* vừa bấm - chưa biết đúng sai */

#pvpAnswers .answer-button.selected {
    border: 2px solid #f5b942;

    background:
        rgba(245, 185, 66, 0.18);

    transform:
        scale(1.02);

    opacity: 1;
}


/* khóa sau khi chọn */

#pvpAnswers .answer-button.locked {
    pointer-events: none;
}


/* các đáp án không chọn */

#pvpAnswers .answer-button.locked:not(.selected) {
    opacity: 0.45;
}


/* đáp án đúng sau reveal */

#pvpAnswers .answer-button.correct-answer {
    border: 2px solid #35d07f;

    background:
        rgba(53, 208, 127, 0.22);

    opacity: 1;
}


/* đáp án mình chọn sai */

#pvpAnswers .answer-button.wrong-answer {
    border: 2px solid #ff5263;

    background:
        rgba(255, 82, 99, 0.22);

    opacity: 1;
}

/* =============================================================
   PVP ANSWER STATE
   ============================================================= */

/* trạng thái bình thường */
#pvpAnswers .answer-button {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.15s ease;

    border: 2px solid transparent;
}


/* =============================================================
   ĐÃ CHỌN - CHƯA REVEAL
   ============================================================= */

/* câu mình vừa chọn -> vàng */
#pvpAnswers .answer-button.selected {
    background-color: rgba(255, 193, 7, 0.22);

    border-color: #ffc107;

    transform: scale(1.02);

    opacity: 1;
}


/* khóa toàn bộ sau khi chọn */
#pvpAnswers .answer-button.locked {
    pointer-events: none;
    cursor: default;
}


/* câu không chọn -> mờ */
#pvpAnswers .answer-button.locked:not(.selected) {
    opacity: 0.35;
}


/* =============================================================
   REVEAL
   ============================================================= */

/* đáp án đúng -> xanh */
#pvpAnswers .answer-button.correct-answer {
    background-color: #20b968;

    border-color: #56e596;

    opacity: 1;

    color: #ffffff;
}


/* đáp án mình chọn sai -> đỏ */
#pvpAnswers .answer-button.wrong-answer {
    background-color: #d9364f;

    border-color: #ff6478;

    opacity: 1;

    color: #ffffff;
}


/*
    Khi reveal:
    selected cũ không được giữ màu vàng
*/
#pvpAnswers .answer-button.selected.correct-answer {
    background-color: #20b968;
    border-color: #56e596;
}


#pvpAnswers .answer-button.selected.wrong-answer {
    background-color: #d9364f;
    border-color: #ff6478;
}

/* =============================================================
   PVP GAME BACKGROUND
   ============================================================= */

#pvpScreen.battle-mode {
    background-image:
        linear-gradient(
            rgba(3, 7, 18, 0.72),
            rgba(3, 7, 18, 0.88)
        ),
        url("../assets/images/backgrounds/pvp-battle-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =============================================================
   PVP RESULT BACKGROUND
   ============================================================= */

#pvpScreen.result-mode {
    background-image:
        linear-gradient(
            rgba(3, 7, 18, 0.55),
            rgba(3, 7, 18, 0.88)
        ),
        url("../assets/images/backgrounds/pvp-result-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =============================================================
   PVP RESULT
   ============================================================= */

.pvp-result-panel {
    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    padding: 30px 20px;

    text-align: center;
}


/* BATTLE FINISHED */

.pvp-result-title {
    margin-bottom: 30px;

    color: #fbbf24;

    font-size: clamp(28px, 8vw, 46px);
    font-weight: 900;

    letter-spacing: 3px;

    text-shadow:
        0 0 10px rgba(251, 191, 36, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.8);
}


/* SCORE AREA */

.pvp-result-score {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 18px;
}


/* PLAYER CARD */

.pvp-result-score > div:not(.room-vs) {
    padding: 20px 10px;

    border:
        2px solid rgba(148, 163, 184, 0.35);

    border-radius: 16px;

    background:
        rgba(15, 23, 42, 0.78);

    backdrop-filter:
        blur(5px);
}


/* PLAYER NAME */

.pvp-result-score span {
    display: block;

    margin-bottom: 8px;

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* SCORE */

.pvp-result-score strong {
    display: block;

    color: white;

    font-size:
        clamp(32px, 9vw, 52px);

    font-weight: 900;

    line-height: 1;
}


/* VS */

.pvp-result-score .room-vs {
    color: #ef4444;

    font-size: 30px;
    font-weight: 900;

    font-style: italic;

    text-shadow:
        0 0 12px
        rgba(239, 68, 68, 0.55);
}


/* WIN / DRAW */

.pvp-result-message {
    margin-top: 30px;

    padding: 13px 20px;

    color: #fbbf24;

    font-size:
        clamp(22px, 6vw, 34px);

    font-weight: 900;

    letter-spacing: 3px;

    text-shadow:
        0 0 15px
        rgba(251, 191, 36, 0.65);
}

/* WINNER */

.pvp-result-score > div.winner {
    border-color: #fbbf24;

    background:
        rgba(251, 191, 36, 0.13);

    transform:
        scale(1.06);

    box-shadow:
        0 0 25px
        rgba(251, 191, 36, 0.28);
}


.pvp-result-score > div.winner strong {
    color: #fbbf24;

    text-shadow:
        0 0 15px
        rgba(251, 191, 36, 0.55);
}

.pvp-level {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;
    height: 30px;

    margin-bottom: 8px;
    padding: 0 16px;

    border: 1px solid #fbbf24;
    border-radius: 20px;

    background: rgba(251, 191, 36, 0.12);

    color: #fbbf24;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;

    box-shadow:
        0 0 12px
        rgba(251, 191, 36, 0.15);
}

.pvp-rematch-area {
    margin-top: 20px;
    text-align: center;
}

.pvp-rematch-button {
    min-width: 180px;
    padding: 12px 24px;

    border: none;
    border-radius: 10px;

    font-weight: 800;
    cursor: pointer;
}

.pvp-rematch-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.pvp-rematch-status {
    margin-top: 10px;
    min-height: 20px;

    font-size: 13px;
    opacity: 0.8;
}

.pvp-timer {
    width: 100%;
}

.pvp-timer-track {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
}

#pvpTimerBar {
    width: 100%;
    height: 100%;
    background: currentColor;
    transition: width 0.1s linear;
}