.lb-name {
    flex: 1;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-score {
    font-family: var(--number-font, 'Orbitron');
    font-weight: 700;
    color: var(--neon-blue);
    margin-left: 15px;
}

.rank-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
}

.rank-tab {
    flex: 1;
    padding: 10px 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: #888;
    cursor: pointer;
    border-radius: 4px;
    font-family: var(--number-font, 'Orbitron');
    font-size: 11px;
    font-weight: 700;
    transition: 0.2s;
    text-transform: uppercase;
}

.rank-tab.active {
    background: rgba(0, 243, 255, 0.1);
    color: var(--neon-blue);
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.flag {
    font-size: 18px;
}

.loc-badge {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: #aaa;
    font-family: var(--main-font, 'Pretendard');
}

/* Incorrect Answer Note (Review Modal) - Styles moved to ModalUI.js and index.html for precision */
#review-list {
    width: 100%;
}

.review-item {
    width: 100%;
}


.r#ingame-sidebar>.sb-stat:last-child {
    border-bottom: none;
}

/* [Critical Fix] Ensure Overlays are Hidden by Default but allow JS to toggle */
#countdown-overlay {
    display: none;
    z-index: 9999;
}

#game-background {
    display: none;
    /* Managed by JS, start hidden */
    z-index: 0;
}

/* Ensure Video Background is Visible (Legacy) */
#bg-video {
    display: none;
}

/* [Restored Animations] */
@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -30%) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -80%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(1);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.shake {
    animation: shake 0.3s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.level-up-flash .sb-label,
.level-up-flash .sb-value {
    animation: textFlash 0.5s ease-in-out;
}

@keyframes textFlash {
    0% {
        color: var(--neon-gold);
        text-shadow: 0 0 20px var(--neon-gold);
        transform: scale(1.5);
    }

    100% {
        color: #fff;
        transform: scale(1);
    }
}

.review-q {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.5;
    word-break: keep-all;
}

.review-a {
    font-size: 15px;
    font-weight: 900;
    color: #00f3ff;
    /* Bright Cyan */
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.review-exp {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    word-break: keep-all;
}

/* Multiplayer Lobby */
.lobby-card {
    transition: transform 0.2s, background 0.2s;
    cursor: pointer;
}

.lobby-card:active {
    transform: scale(0.98);
}

.lobby-card:hover {
    filter: brightness(1.2);
}

/* Checkbox Customization */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--neon-blue);
    cursor: pointer;
}

/* Lobby Compact Overrides */
#multiplayer-lobby-view .lobby-card {
    padding: 10px !important;
    margin-bottom: 0 !important;
}

#multiplayer-lobby-view h2 {
    font-size: 20px !important;
}

/* =========================================
   [NEW] VS SCREEN ANIMATIONS & STYLES (BOT MATCH)
   ========================================= */
#duel-matching-view {
    z-index: 2000;
    background: #2c1a12 !important;
    overflow: hidden !important;
    align-items: center;
    justify-content: center;
}

/* 1. ??쎈€??? ??뺣쑁 獄쏄퀗瑗???€?筌왖€ (duel.js?癒?퐣 ??쇱젟?? */
#duel-matching-view .vs-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    /* No blur, no zoom, original state maintained */
}

@keyframes vsBgWrapperAmbient {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes vsBgOverlayAmbient {
    0% {
        opacity: 0.65;
    }
    50% {
        opacity: 0.35;
    }
    100% {
        opacity: 0.65;
    }
}

#duel-matching-view .vs-bg-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    animation: vsBgWrapperAmbient 14s ease-in-out infinite;
}

#duel-matching-view .vs-bg-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 2;
    pointer-events: none;
    animation: vsBgOverlayAmbient 8s ease-in-out infinite;
}

#duel-matching-view .vs-bg.eff3-matching {
    transform: scale(1.5) !important;
    /* 극단적 확대 */
    filter: blur(8px) brightness(0.5) !important;
    transition: none !important;
}

#duel-matching-view .vs-bg.eff3-reveal {
    transform: scale(1) !important;
    filter: blur(0px) brightness(1) !important;
    /* ?λ뜄而??얜즲 ?袁⑷퍕 ??쥓已?-> ??륁㉦??筌ｌ뮇荑??(Cubic Bezier) */
    transition: transform 1.5s cubic-bezier(0.075, 0.82, 0.165, 1),
        filter 1s ease-out !important;
}

/* ?癒?궚 域밸챶?嚥?癰귣똻?졿묾??袁る퉸 ??살쒔??됱뵠 ??????梨??*/
#duel-matching-view .mirage-overlay {
    display: none;
}

/* 鍮꾨꽕??洹몃씪?곗씠??*/
#duel-matching-view .vs-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
    pointer-events: none;
}

/* 화이트 플래시 */
#duel-matching-view .screen-flash,
#rank-matching-view .screen-flash {
    position: absolute;
    inset: 0;
    background: white;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
}

#duel-matching-view .screen-flash.active,
#rank-matching-view .screen-flash.active {
    animation: whiteFlash 0.4s ease-out forwards;
}

@keyframes whiteFlash {
    0% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}

/* ?뚰떚??而⑦뀒?대꼫 */
#duel-matching-view .particle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 18;
    pointer-events: none;
}

@keyframes particleFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* 餓λ쵐釉?VS 嚥≪뮄??*/
#duel-matching-view .vs-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 4rem;
    font-weight: 900;
    font-style: italic;
    font-family: var(--title-font, 'Black Han Sans');
    /* [Fix] background-clip:text ??由?- ?怨좊뱜 ??? ??梨??닌덉퍢?癒?퐣 S ?怨쀫? ???袁⑷맒 ?닌듼€???얜챷??
       ?癒?궚 域밸챶??遺용섧????밴퉳 #dca450??筌욊낯??fill嚥????????袁⑹읈??筌?쑴?숋쭪?*/
    color: #dca450;
    -webkit-text-fill-color: #dca450;
    -webkit-text-stroke: 1.5px rgba(120, 70, 0, 0.6);
    text-shadow: 0 0 30px rgba(220, 164, 80, 0.8), 4px 4px 0px rgba(60, 30, 10, 0.8);
    z-index: 5;
    opacity: 0;
    animation: popInVs 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.3) 0.6s forwards;
}


/* ???쟿??곷선 ?뚢뫂???€瑗???살쒔??깆뵠??(100% ?類?) */
#duel-matching-view .avatar-container-divine {
    width: 100px !important;
    height: 100px !important;
    border-width: 4px !important;
}

#duel-matching-view .avatar-container-divine::after {
    inset: -4px !important;
    border-width: 4px !important;
}

/* ???쟿??곷선 ?뚢뫂???€瑗?*/
#duel-matching-view .player-box {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
    opacity: 0;
}

/* ?醫?: ?ル슣瑜???롫뼊 ??餓λ쵐釉?獄쎻뫚堉?*/
#duel-matching-view .user-box {
    bottom: calc(15% + 60px);
    left: 5%;
    transform: translateY(50%);
    animation: slideInUser 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}

/* ?怨?獄? ?怨쀫? ?怨룸뼊 ??餓λ쵐釉?獄쎻뫚堉?*/
#duel-matching-view .bot-box {
    top: calc(15% + 60px);
    right: 5%;
    transform: translateY(-50%);
    flex-direction: row-reverse;
    animation: slideInBot 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}

/* ??곌퐬??域밸챶竊?獄쏅벡??*/
#duel-matching-view .info-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    min-width: 0;
}

#duel-matching-view .user-box .info-group {
    align-items: flex-start;
}

#duel-matching-view .bot-box .info-group {
    align-items: flex-end;
}

/* ??곌퐬??& ?怨쀫선 ??용뮞???????*/
#duel-matching-view .nickname {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 1.5px;
    white-space: nowrap;
    max-width: 45vw;
    line-height: 1.1;
}

#duel-matching-view .tier-label {
    font-size: 18px;
    /* ?怨좊뱜????ｍ뜞 ?類? */
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 4px;
}

#duel-matching-view .user-box .nickname {
    color: #fff;
    text-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-blue);
}

#duel-matching-view .user-box .tier-label {
    color: #fff;
    -webkit-text-stroke: 0.8px rgba(0, 180, 220, 0.9);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.9), 0 0 25px rgba(0, 200, 255, 0.4);
}

#duel-matching-view .bot-box .nickname {
    color: #fff;
    text-shadow: 0 0 15px var(--neon-red), 0 0 30px var(--neon-red);
    text-align: right;
}

#duel-matching-view .bot-box .tier-label {
    color: #fff;
    -webkit-text-stroke: 0.8px rgba(255, 50, 50, 0.9);
    text-shadow: 0 0 10px rgba(255, 60, 60, 0.9), 0 0 25px rgba(255, 0, 50, 0.4);
    text-align: right;
}

/* ?붾㈃??媛€瑜대뒗 ?ㅽ뙆???댄럺????媛뺥솕 */
#duel-matching-view .slash-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #fff 20%, #dca450 50%, #fff 80%, transparent 100%);
    transform: translate(-50%, -50%) rotate(-20deg) scaleX(0);
    box-shadow: 0 0 40px #dca450, 0 0 80px rgba(255, 215, 0, 0.8), 0 0 120px rgba(255, 200, 0, 0.4);
    animation: slash 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    z-index: 15;
    opacity: 0;
}

/* Animations */
@keyframes slowZoomIn {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

@keyframes flicker {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }
}

/* Animations - OUT (Triggers via JS classes) */
.user-box.anim-out {
    animation: slideOutUser 0.6s cubic-bezier(0.5, 0, 0.25, 1) forwards !important;
}

.bot-box.anim-out {
    animation: slideOutBot 0.6s cubic-bezier(0.5, 0, 0.25, 1) forwards !important;
}

.vs-center-logo.anim-out {
    animation: popOutVs 0.5s cubic-bezier(0.5, 0, 0.25, 1) forwards !important;
}

.slash-line.anim-out {
    display: none;
}

/* Round Info Entrance Animation */
.round-anim-in {
    animation: popInRound 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes popInRound {
    0% {
        transform: scale(3);
        opacity: 0;
        filter: blur(20px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes slideOutUser {
    0% {
        left: 5%;
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        left: -150%;
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes slideOutBot {
    0% {
        right: 5%;
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        right: -150%;
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes popOutVs {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

@keyframes clearBackground {
    0% {
        filter: blur(8px) brightness(0.7);
    }

    100% {
        filter: blur(0px) brightness(1);
    }
}

@keyframes fadeOverlay {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slideInUser {
    0% {
        left: -150%;
        opacity: 0;
        filter: blur(5px);
    }

    100% {
        left: 5%;
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes slideInBot {
    0% {
        right: -150%;
        opacity: 0;
        filter: blur(5px);
    }

    100% {
        right: 5%;
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes popInVs {
    0% {
        transform: translate(-50%, -50%) scale(0.2) rotate(-10deg);
        opacity: 0;
    }

    30% {
        transform: translate(-50%, -50%) scale(1.6) rotate(3deg);
        opacity: 1;
        filter: brightness(3) drop-shadow(0 0 40px #fff);
    }

    60% {
        transform: translate(-50%, -50%) scale(0.95) rotate(-1deg);
        filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 220, 120, 0.8));
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
        opacity: 1;
        filter: brightness(1.8) drop-shadow(0 0 25px rgba(255, 220, 120, 0.8));
    }
}

/* VS ?꾩뒪 (?깆옣 ??諛섎났) */
@keyframes vsPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1.1);
        text-shadow: 0 0 40px rgba(220, 164, 80, 0.9), 4px 4px 0px rgba(60, 30, 10, 0.8);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        text-shadow: 0 0 60px rgba(220, 164, 80, 1), 0 0 100px rgba(255, 200, 0, 0.5), 4px 4px 0px rgba(60, 30, 10, 0.8);
    }
}

#duel-matching-view .vs-center-logo.vs-pulse {
    animation: vsPulse 1.5s ease-in-out infinite;
}

@keyframes slash {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg) scaleX(0);
        opacity: 1;
    }

    20% {
        transform: translate(-50%, -50%) rotate(-20deg) scaleX(1);
        opacity: 1;
        height: 8px;
        box-shadow: 0 0 60px #fff, 0 0 120px #dca450, 0 0 200px rgba(255, 200, 0, 0.6);
    }

    50% {
        opacity: 0.8;
        height: 4px;
    }

    100% {
        transform: translate(-50%, -50%) rotate(-20deg) scaleX(1);
        opacity: 0;
        height: 1px;
    }
}

/* Compact Layout Tweaks */
#duel-question {
    font-size: clamp(1.05rem, 4.5vw, 1.45rem) !important;
    margin-bottom: 5px !important;
    /* Reduce gap */
    min-height: 80px !important;
}

#duel-buzzer-container {
    bottom: 5px !important;
    /* Move buzzer to very bottom */
}

/* Win Indicators */
.win-dots {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

.win-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.win-dot.active {
    background: var(--neon-gold);
    box-shadow: 0 0 8px var(--neon-gold);
    border-color: #fff;
}

/* Score Marble — 영롱한 보석 스타일 */
.score-marble {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, #b8a080 40%, #8a7055 100%);
    border: 1px solid rgba(90, 65, 40, 0.6);
    box-shadow:
        inset 1px 1px 2px rgba(255, 240, 200, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-marble.active,
.ingame-oval-panel .score-marble.active {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 35%),
        radial-gradient(circle at 50% 50%, #ffee55 0%, #e6a800 35%, #aa6600 70%, #553300 100%) !important;
    border-color: rgba(255, 200, 50, 0.8) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        inset -1px -1px 3px rgba(80, 40, 0, 0.5),
        0 0 6px rgba(255, 200, 0, 0.7),
        0 0 12px rgba(255, 180, 0, 0.3) !important;
    animation: gemPulse 2s ease-in-out infinite !important;
}

#duel-bot-marbles .score-marble.active {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 35%),
        radial-gradient(circle at 50% 50%, #ff6666 0%, #dd2222 35%, #aa0000 70%, #550000 100%) !important;
    border-color: rgba(255, 80, 80, 0.8) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 200, 200, 0.9),
        inset -1px -1px 3px rgba(80, 0, 0, 0.5),
        0 0 6px rgba(255, 50, 50, 0.7),
        0 0 12px rgba(255, 0, 0, 0.3) !important;
    animation: gemPulseRed 2s ease-in-out infinite !important;
}

#duel-player-marbles .score-marble.active {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 35%),
        radial-gradient(circle at 50% 50%, #66aaff 0%, #2266dd 35%, #0044aa 70%, #001155 100%) !important;
    border-color: rgba(80, 140, 255, 0.8) !important;
    box-shadow:
        inset 1px 1px 2px rgba(200, 220, 255, 0.9),
        inset -1px -1px 3px rgba(0, 0, 80, 0.5),
        0 0 6px rgba(50, 120, 255, 0.7),
        0 0 12px rgba(0, 85, 255, 0.3) !important;
    animation: gemPulseBlue 2s ease-in-out infinite !important;
}

@keyframes gemPulse {
    0%, 100% { box-shadow: inset 1px 1px 2px rgba(255,255,255,0.9), inset -1px -1px 3px rgba(80,40,0,0.5), 0 0 6px rgba(255,200,0,0.7), 0 0 12px rgba(255,180,0,0.3); }
    50% { box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset -1px -1px 3px rgba(80,40,0,0.5), 0 0 8px rgba(255,210,0,0.9), 0 0 16px rgba(255,180,0,0.5); }
}
@keyframes gemPulseRed {
    0%, 100% { box-shadow: inset 1px 1px 2px rgba(255,200,200,0.9), inset -1px -1px 3px rgba(80,0,0,0.5), 0 0 6px rgba(255,50,50,0.7), 0 0 12px rgba(255,0,0,0.3); }
    50% { box-shadow: inset 1px 1px 2px rgba(255,200,200,1), inset -1px -1px 3px rgba(80,0,0,0.5), 0 0 8px rgba(255,60,60,0.9), 0 0 16px rgba(255,0,0,0.5); }
}
@keyframes gemPulseBlue {
    0%, 100% { box-shadow: inset 1px 1px 2px rgba(200,220,255,0.9), inset -1px -1px 3px rgba(0,0,80,0.5), 0 0 6px rgba(50,120,255,0.7), 0 0 12px rgba(0,85,255,0.3); }
    50% { box-shadow: inset 1px 1px 2px rgba(200,220,255,1), inset -1px -1px 3px rgba(0,0,80,0.5), 0 0 8px rgba(60,130,255,0.9), 0 0 16px rgba(0,85,255,0.5); }
}

@keyframes neonBlink {

    0%,
    49.9% {
        opacity: 1;
        filter: none;
    }

    50%,
    100% {
        opacity: 0.5;
        filter: none;
    }
}


/* Move buzzer to very bottom */

#duel-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-bottom: 0 !important;
    /* Prevent Buzzer Overlap */
}

.option-card {
    padding: 10px 15px !important;
    /* Slightly smaller options */
}

#multiplayer-lobby-view p {
    font-size: 13px !important;
    color: #ddd !important;
    font-family: var(--main-font, 'Pretendard') !important;
    font-weight: 400 !important;
    margin-bottom: 8px !important;
}

#multiplayer-lobby-view .btn {
    min-height: 40px !important;
    padding: 8px !important;
}

/* Fix Header Readability */
#multiplayer-lobby-view h2 {
    font-family: var(--main-font, 'Pretendard', sans-serif) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    font-size: 22px !important;
}

/* EMERGENCY COMPACTING FOR MOBILE */
#multiplayer-lobby-view {
    padding-top: 5px !important;
    align-items: flex-start !important;
}

#multiplayer-lobby-view .lobby-card p {
    display: none !important;
}

#multiplayer-lobby-view .lobby-card {
    padding: 8px !important;
    margin-bottom: 5px !important;
}

#multiplayer-lobby-view h2 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
}

#lobby-tier-display {
    margin-top: 0px !important;
    margin-bottom: 5px !important;
}

#lobby-tier-display span {
    font-size: 14px !important;
}

#multiplayer-lobby-view>div>div:nth-child(2) {
    /* Stats Panel */
    padding: 5px !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
}

#multiplayer-lobby-view .btn {
    margin-top: 0 !important;
    min-height: 36px !important;
    font-size: 13px !important;
}


/* =========================================
   CYBERPUNK DUEL ARENA STYLES
   ========================================= */

/* Animations */
@keyframes glitch {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(-2px, -2px)
    }

    60% {
        transform: translate(2px, 2px)
    }

    80% {
        transform: translate(2px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes flash-crit {
    0% {
        background: rgba(255, 0, 0, 0);
    }

    50% {
        background: rgba(255, 0, 0, 0.3);
    }

    100% {
        background: rgba(255, 0, 0, 0);
    }
}

@keyframes flash-crit {
    0% {
        background: rgba(255, 0, 0, 0);
    }

    50% {
        background: rgba(255, 0, 0, 0.3);
    }

    100% {
        background: rgba(255, 0, 0, 0);
    }
}

/* =========================================
   [NEW] IN-GAME GLASSMORPHISM UI & HEART SYSTEM
   ========================================= */

/* Heart SVG Variables */
:root {
    --heart-gold: rgba(180, 138, 77, 0.4);
    --heart-red: #ef4444;
    --heart-dark: #450a0a;
}

/* Base Heart Bar Container */
.heart-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    gap: 4px;
    padding: 2px;
    align-items: center;
    /* [Alignment Fix] Ensure it doesn't take full width if not needed */
    display: inline-flex;
    /* [Multi-line Fix] Force wrap at 5 hearts (16px*5 + 4px*4 + 4px padding = 100px) */
    max-width: 100px;
}

/* Individual Heart Unit */
.heart-unit {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease;
}

/* Dynamic resize when class '.hearts-small' is added to container (for 6+ hearts) */
/* Scaling removed - fixed at 24px as requested */
.heart-bar.hearts-small {
    gap: 4px;
}

.heart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 1. Glass Bottle Frame (Always visible, deeply indented for parchment visibility) */
.heart-bottle-frame {
    fill: rgba(78, 52, 46, 0.15);
    /* Deep brown shadow fill */
    stroke: #4e342e;
    /* Dark thick brown stroke */
    stroke-width: 1.5;
    /* Thicker for visibility */
    transition: all 0.3s ease;
}

/* 2. Inner Liquid (Filled state) */
.heart-liquid {
    fill: url(#heartGemGradient);
    stroke: var(--heart-dark);
    stroke-width: 1.2;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center bottom;
    opacity: 0;
    transform: scale(0.5);
    /* Hide when empty */
}

/* 3. Glass Glare */
.heart-glass-glare {
    fill: none;
    stroke: white;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.2;
}

/* --- State Animations --- */

/* Full State */
.heart-unit.full .heart-liquid {
    opacity: 1;
    transform: scale(1);
}

/* Beating Effect (Living health) */
.heart-unit.full.beating .heart-svg {
    animation: heart-pulse 1.4s infinite ease-in-out;
}

/* Shatter Effect (Taking damage) */
.heart-unit.shatter .heart-liquid {
    animation: liquid-disappear 0.5s ease-out forwards;
}

.heart-unit.shatter .heart-svg {
    animation: bottle-shake 0.5s ease-out;
}

@keyframes heart-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
        filter: brightness(1.1);
    }

    30% {
        transform: scale(1.03);
    }

    45% {
        transform: scale(1.1);
    }
}

/* =========================================
   [NEW] DIVINE IN-GAME HEADER SYSTEM (7:3 Split)
   ========================================= */

.ingame-header-container {
    width: calc(100% - 20px);
    margin: 10px auto 0 auto;
    z-index: 100;
    position: relative;
    pointer-events: none;
}

.ingame-header-layout {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    /* Sync with Lobby inline style */
}

/* Left Section (75%) */
.ingame-header-left {
    flex: 7.5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    /* Allow shrinking */
}

/* Row 1: Oval Panel */
.ingame-oval-panel {
    display: flex;
    align-items: center;
    border-radius: 9999px !important;
    border: 2.5px solid #dca450 !important;
    background-color: #d4cda7 !important;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png"), radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%) !important;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.7),
        inset 0 4px 8px rgba(255, 255, 255, 0.8),
        inset 0 -5px 10px rgba(112, 65, 20, 0.7) !important;
    pointer-events: auto;
    padding-left: 0 !important;
    /* SNUG FIT: Remove left padding for enlarged avatar */
    height: 54px;
    /* Slightly taller for a more prominent avatar */
    gap: 10px;
}

.ingame-oval-panel .avatar-container-divine {
    width: 52px !important;
    height: 52px !important;
    border: 2.5px solid #dca450 !important;
    margin-left: -1px;
    margin-top: 0px;
    flex-shrink: 0;
    overflow: hidden !important;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.5),
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -4px 8px rgba(112, 65, 20, 0.35);
    z-index: 2;
}

.ingame-oval-panel .avatar-container-divine::after {
    content: '';
    position: absolute;
    inset: -2.5px;
    border-radius: 9999px;
    border: 2.5px solid #dca450;
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -4px 8px rgba(112, 65, 20, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 5;
}

.ingame-profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.1;
    margin-right: 4px;
}

.ingame-lv-text {
    font-size: 10px;
    font-weight: 800;
    color: #795548;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ingame-nick-text {
    font-size: 15px;
    font-weight: 900;
    color: #4e342e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    /* [Fix] Allow bottom of letters to remain visible */
    padding-bottom: 2px;
    /* [Fix] Prevent clipping */
}

.ingame-oval-panel .heart-bar {
    display: flex;
    flex-wrap: nowrap;              /* [Fix] 1~5개는 한 줄 유지(줄바꿈 금지) */
    align-items: center;
    align-content: center;
    justify-content: flex-end;      /* 우측정렬 */
    gap: 3px;
    width: auto;                    /* 내용폭(5개 큰 하트) */
    flex-shrink: 0;
    /* [Fix] 타원 우측 끝(직사각형 시작점, padding-right 20px 앞)으로 밀착 = 우측정렬, 반응형 */
    margin-left: auto;
}

/* [Fix] 1~5개 = 큰 하트 (한 줄) */
.ingame-oval-panel .heart-unit {
    width: 24px;
    height: 24px;
}

/* [Fix] 6~10개(.hearts-small) = 작은 하트 두 줄. 블록 자체는 우측정렬(margin-left:auto 상속),
   내부는 좌측팩+폭 고정으로 5개 뒤 줄바꿈 → 6번째가 1번째 바로 밑 */
/* (16px*5) + (2px*4) + padding(4px) = 92px → 94px 안전 */
.ingame-oval-panel .heart-bar.hearts-small {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 94px;
    gap: 2px;
}
.ingame-oval-panel .heart-bar.hearts-small .heart-unit {
    width: 16px;
    height: 16px;
}


@keyframes bottle-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-10deg);
    }

    75% {
        transform: translateX(5px) rotate(10deg);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes liquid-disappear {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(2);
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.glass-btn {
    background: rgba(15, 15, 25, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.05);
    transform-origin: center;
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.glass-btn:active {
    transform: scale(0.96) translateY(2px);
    background: rgba(35, 35, 45, 0.9);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.3);
}


/* Correct Output */
.option-btn.correct {
    background: rgba(10, 150, 50, 0.7) !important;
    border-color: rgba(50, 255, 100, 0.8) !important;
    box-shadow: 0 0 25px rgba(50, 255, 100, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.2) !important;
    animation: jellyBounce 0.4s ease forwards;
}

/* Wrong Output */
.option-btn.wrong {
    background: rgba(150, 10, 20, 0.7) !important;
    border-color: rgba(255, 50, 50, 0.8) !important;
    box-shadow: 0 0 25px rgba(255, 50, 50, 0.5) !important;
    transform: scale(0.95);
    opacity: 0.6;
}

@keyframes jellyBounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.03);
    }

    50% {
        transform: scale(0.98);
    }

    70% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

/* Layout Components */
.cyber-panel {
    background: rgba(10, 20, 30, 0.85);
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

.duel-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}



.question-holo {
    border-top: 1px solid rgba(0, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 255, 255, 0.5);
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 255, 255, 0.05) 100%);
    padding: 20px;
    text-shadow: 0 0 5px var(--neon-cyan);
}

/* 3D Buzzer */
#duel-buzzer-btn {
    background: radial-gradient(circle at 30% 30%, #ff5e5e, #c00);
    border: 4px solid #800;
    border-bottom-width: 8px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 5px 10px rgba(255, 255, 255, 0.3);
    transition: transform 0.1s, border-width 0.1s, margin-top 0.1s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#duel-buzzer-btn:active {
    transform: translateY(4px);
    border-bottom-width: 4px;
    margin-top: 4px;
    background: radial-gradient(circle at 30% 30%, #e00, #900);
}

#duel-game-view {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Flex Child Containment Fix */
.duel-header>div,
.vs-container>div {
    min-width: 0;
    /* Critical: Allows flex items to shrink below content size */
}

/* Header Right Column (Info + Music) */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    width: 220px;
    min-width: 220px;
    /* [Fix] Fixed width to prevent layout shift */
}

.header-right-top {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.header-right-bottom {
    width: 100%;
}


/* =========================================
   WIREFRAME-FIRST LAYOUT (mianlayout.png)
   ========================================= */

.wf-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.wf-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.wf-info-group {
    display: flex;
    flex: 1;
    gap: 5px;
    align-items: center;
}

/* Buzzer Light Styles */




.justify-around {
    justify-content: space-around;
}

.full-width {
    width: 100%;
}

.wf-box {
    border: 2px solid #ff0000;
    color: #ff0000;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    background: rgba(255, 0, 0, 0.05);
    overflow: hidden;
    text-align: center;
}

.wf-box.circular {
    border-radius: 50%;
    flex-shrink: 0;
}

.wf-box::after {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    background: #ff0000;
    color: #fff;
    font-size: 9px;
    padding: 1px 3px;
    pointer-events: none;
    line-height: 1;
    z-index: 10;
}

.btn-menu {
    cursor: pointer;
    transition: background 0.2s;
    font-size: 18px;
    font-family: var(--title-font, 'Black Han Sans', sans-serif);
    color: #ff0000;
    background: transparent;
}

.btn-menu:active {
    background: rgba(255, 0, 0, 0.2);
}

#menu-view {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Removed padding to maximize screen width usage */
    gap: 15px;
    height: calc(var(--vh, 1vh) * 100) !important;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
}

#menu-view.active {
    display: flex !important;
}

/* --- FIXED LAYOUT CSS (Clean Repair) --- */

.phone-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    /* Removed padding to maximize screen width usage */
    box-sizing: border-box;
    overflow: hidden;
}

/* Common Box Style */
.layout-box {
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    position: relative;
    cursor: pointer;
}

.layout-circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

/* --- SPLIT HEADER LAYOUT (3:7 Ratio) --- */
.header-area {
    display: flex;
    width: 100%;
    height: 80px;
    /* Base height */
    gap: 10px;
    flex-direction: row !important;
    /* Force row */
}

.header-left {
    flex: 3;
    /* 30% width */
    height: 100%;
    width: auto !important;
}

.header-right {
    flex: 7;
    /* 70% width */
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    width: auto !important;
}

.header-right-top {
    flex: 1;
    display: flex;
    gap: 5px;
    width: 100%;
}

.header-right-bottom {
    height: 35px;
    /* Music player height */
    width: 100%;
}

.info-row {
    flex: 1;
    display: flex;
    gap: 4px;
    height: 100%;
}

.info-item {
    flex: 1;
    height: 100%;
    padding: 0 4px;
    font-size: 11px;
}

.settings-btn {
    width: 45px;
    height: 100%;
    border-radius: 8px;
}

/* =========================================
   PROFILE MODAL REFACTOR (Dark Glass / Wide)
   ========================================= */

/* Modal Content Override for Profile */
#profile-modal .modal-content {
    position: relative;
    /* Ensure X is relative to this */
    width: 90% !important;
    max-width: 600px;
    /* Prevent it from being too wide on desktop */
    min-width: 320px;
    height: auto;
    max-height: 90vh;
    background: rgba(10, 12, 16, 0.9) !important;
    /* Dark Glass */
    border: 1px solid var(--neon-gold);
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.1);
    padding: 20px;
    overflow-y: auto;
    gap: 15px;
}

#profile-header {
    display: flex;
    justify-content: center;
    /* Title centered */
    align-items: center;
    font-family: var(--number-font, 'Orbitron');
    font-size: 20px;
    color: var(--neon-gold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    /* For title alignment */
    background: transparent !important;
    /* Remove any red/pink legacy */
}

/* Close Button Absolute Positioning */
#profile-header span:last-child {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    /* Vertically center in header, OR use top:0 for absolute corner */
    font-size: 24px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    padding: 10px;
    /* Increase hit area */
}

#profile-header span:last-child:hover {
    color: #fff;
}

/* User Card - Horizontal Layout */
/* User Card - Horizontal Layout (Clean Dark) */
#profile-user-card {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Force overrides */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 12px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #222;
    border: 2px solid var(--neon-gold);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.profile-edit-btn {
    position: absolute;
    bottom: -5px;
    right: -5px;
    z-index: 10;
    background: #333;
    border: 1px solid #555;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-nickname {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.profile-tier {
    font-family: var(--number-font, 'Orbitron');
    color: var(--neon-cyan);
    font-size: 14px;
}

.profile-xp-container {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    margin-top: 5px;
    overflow: hidden;
    border: 1px solid rgba(220, 164, 80, 0.3);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.profile-xp-fill {
    height: 100%;
    background: linear-gradient(180deg, #ffe066 0%, #ffd700 40%, #dca450 70%, #b48a4d 100%);
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.5);
    border-radius: 10px;
}

.profile-xp-text {
    font-size: 10px;
    color: #888;
    text-align: right;
    margin-top: 2px;
}

.profile-extra {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    font-size: 12px;
    color: #aaa;
    min-width: 60px;
}

#profile-location {
    background: #333;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
}

/* Stats Section Headers */
.profile-section-header {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
    border-left: 3px solid var(--neon-gold);
    padding-left: 8px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Stats Grid - 3 Columns */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.p-stat-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- Vertical Profile Layout (Compact & No Scroll) --- */

.profile-scroll-container {
    flex: 1;
    overflow-y: auto;
    /* Allow scroll only if screen is tiny, but design for fit */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Reduced from 15px */
    padding-bottom: 10px;
}

.profile-section-header {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--neon-gold);
    padding: 4px 10px;
    /* Reduced */
    font-size: 13px;
    /* Reduced */
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    margin-top: 5px;
    /* Reduced */
}

.profile-dual-column {
    display: flex;
    gap: 8px;
    /* Reduced */
}

.mode-col {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px;
    /* Reduced */
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Reduced */
}

.mode-title {
    font-size: 11px;
    /* Reduced */
    color: #888;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.p-stat-label {
    font-size: 10px;
    color: #aaa;
    margin-bottom: 4px;
}

.p-stat-value {
    font-family: var(--number-font, 'Orbitron');
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}

/* Blank Area */
.profile-blank-area {
    width: 100%;
    min-height: 80px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #444;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.2);
}

/* --- Profile Visual Summary --- */
.profile-visual-container {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.profile-visual-container:hover {
    background: rgba(255, 255, 255, 0.05);
}

.radar-chart-area {
    flex: 1;
    position: relative;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radar-svg {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 5px var(--neon-cyan));
}

/* [Restored] Original Sidebar Styles + Blur Fix */
.sidebar {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5px !important;
    /* Reverted padding */
    gap: 0 !important;
    align-items: center;
    text-align: center;
    order: -1;
    margin-bottom: 0px !important;
    z-index: 9999 !important;
    /* Keep high Z-index to avoid overlay overlap */
    position: relative;
    /* Clarity fixes kept */
    filter: none !important;
    backdrop-filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.sb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.sb-label {
    /* Restored Original Look */
    font-size: 9px !important;
    color: #888 !important;
    /* Back to original grey */
    margin-bottom: 0 !important;
    font-family: var(--number-font, 'Orbitron', sans-serif) !important;
    /* Back to Orbitron */
    letter-spacing: 1px;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    /* Keep shadow off for clarity */
    transform: none !important;
}

.sb-value {
    /* Restored Original Look */
    font-size: 16px !important;
    font-weight: 900;
    font-family: var(--number-font, 'Orbitron', sans-serif) !important;
    /* Back to Orbitron */
    color: #fff;
    /* [Fixed] Removed !important to allow inline specific colors */
    transition: transform 0.2s;
    /* Re-enable transition if desired, or keep off for max sharpness. User said 'original style', usually implies animation too. */
    text-shadow: none !important;
    /* Keep shadow off for clarity */
    opacity: 1 !important;
    transform: none !important;
}

.radar-label-box {
    /* Optional: simplified labels if needed, or draw them in SVG */
    display: none;
}

.signature-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sig-stat-row {
    display: flex;
    flex-direction: column;
}

.sig-label {
    font-size: 10px;
    color: #888;
    margin-bottom: 2px;
}

.sig-val {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    font-family: var(--number-font, 'Orbitron');
}

.click-hint {
    font-size: 10px;
    color: var(--neon-gold);
}

/* --- LOGIN PANEL INPUT STYLES --- */
.nick-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-blue);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-family: var(--number-font, 'Orbitron', 'Noto Sans KR', sans-serif);
    font-size: 18px;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.nick-input:focus {
    border-color: var(--neon-gold);
    box-shadow: 0 0 10px var(--neon-gold);
    background: rgba(255, 255, 255, 0.1);
}

.nick-input::placeholder {
    color: #666;
}



/* --- Detail Overlay --- */
#profile-detail-overlay {
    position: absolute;
    top: 60px;
    /* Below header */
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: #0a0c10;
    /* Solid cover */
    z-index: 10;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

#profile-detail-overlay.hidden {
    display: none;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Game Over Result Stats */
.game-over-stats {
    width: 100%;
    margin-bottom: 20px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 5px;
    border-radius: 8px;
    font-size: 14px;
    color: #ccc;
}

.result-row span:last-child {
    color: #fff;
    font-weight: 700;
}

/* Add rank colors */
.rank-world {
    color: var(--neon-gold) !important;
}

.rank-country {
    color: var(--neon-blue) !important;
}

.rank-local {
    color: var(--neon-green) !important;
}

/* XP Bar in Game Over */
.result-xp-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-xp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #aaa;
}

.result-xp-badge {
    background: var(--neon-gold);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 11px;
}

.result-xp-track {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(220, 164, 80, 0.3);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.result-xp-fill {
    height: 100%;
    background: linear-gradient(180deg, #ffe066 0%, #ffd700 40%, #dca450 70%, #b48a4d 100%);
    width: 0%;
    transition: width 1s linear;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.5);
    border-radius: 10px;
}

.result-xp-text {
    text-align: right;
    font-size: 11px;
    color: #fff;
    font-family: var(--number-font, 'Orbitron');
}

/* Level Up Animation */
@keyframes levelUpFlash {
    0% {
        background-color: var(--neon-gold);
        box-shadow: 0 0 20px var(--neon-gold);
    }

    100% {
        background-color: var(--neon-blue);
        box-shadow: 0 0 10px var(--neon-blue);
    }
}

.level-up-flash {
    animation: levelUpFlash 0.5s ease-out;
}

.detail-header {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.detail-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #888;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

.detail-tab.active {
    background: var(--neon-gold);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.detail-close {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    border-radius: 8px;
    cursor: pointer;
}

.detail-content {
    display: none;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

.detail-content.active {
    display: flex;
}

.mode-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
}

.mode-head {
    font-size: 14px;
    font-weight: bold;
    color: var(--neon-blue);
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.stat-row span:last-child {
    font-family: var(--number-font, 'Orbitron');
    color: #fff;
}

/* Dual Column Stats */
.profile-dual-column {
    display: flex;
    gap: 10px;
    width: 100%;
}

.mode-col {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-title {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2px;
    letter-spacing: 1px;
}

/* Compact Grid for columns */
.profile-stats-grid.compact {
    grid-template-columns: 1fr 1fr;
    /* 2 cols instead of 3 */
    gap: 5px;
}

.profile-stats-grid.compact .p-stat-box {
    padding: 5px;
}

.profile-stats-grid.compact .p-stat-value {
    font-size: 14px;
}



.footer-item {
    width: 65px;
    font-size: 10px;
    text-align: center;
    padding: 5px;
    word-break: keep-all;
    line-height: 1.2;
}

/* Ensure Profile Modal still works if invoked */
#profile-modal .modal-content {
    background: #fff;
    color: #000;
    padding: 0;
    overflow: hidden;
    max-width: 400px;
    width: 90%;
    /* Ensure responsiveness */
    border: none;
    border-radius: 12px;
    max-height: 85dvh;
    /* [Hotfix] Limit height to viewport */
    display: flex;
    /* Enable flex for children to scroll */
    flex-direction: column;
}

@keyframes duelTimerPulse {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.2);
        opacity: 0.75;
    }
}

/* ==================================================
   SLIDE IN ANIMATIONS FOR INTRO
   ================================================== */
@keyframes slideInTopHeader {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1 !important;
    }
}

@keyframes slideInBottomFooter {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1 !important;
    }
}

@keyframes slideInLeftBtn {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1 !important;
    }
}

@keyframes slideInRightBtn {
    0% {
        transform: translateX(30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1 !important;
    }
}

.ani-slide-in-top {
    animation: slideInTopHeader 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ani-slide-in-bottom {
    animation: slideInBottomFooter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ani-slide-in-left {
    animation: slideInLeftBtn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ani-slide-in-right {
    animation: slideInRightBtn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* =========================================
   [NEW] 반응형 모바일 뷰포트 압축 미디어 쿼리 (하단 잘림 방지)
   ========================================= */

/* 1. 세로 해상도가 760px 이하인 일반 모바일 디바이스 */
@media (max-height: 760px) {
    .lobby-header-divine {
        padding: 1rem 1rem 0.25rem 1rem !important;
    }
    .stat-carousel-container {
        height: 12rem !important;
    }
    .stat-carousel-track {
        width: 12rem !important;
        height: 12rem !important;
    }
    .stat-card {
        width: 12rem !important;
        height: 12rem !important;
    }
    .stat-card-label {
        top: 2.4rem !important;
    }
    .stat-card-value {
        font-size: 2.6rem !important;
        top: 4.2rem !important;
        margin: 0 !important;
    }
    .menu-buttons-container {
        gap: 10px !important;
        margin-bottom: auto !important;
        top: -30px !important;
    }
    .divine-footer-dock {
        padding: 10px 0 15px 0 !important;
    }
}

/* 2. 세로 해상도가 680px 이하인 소형 모바일 디바이스 (SE 등) 및 브라우저 UI 축소 환경 */
@media (max-height: 680px) {
    .lobby-header-divine {
        padding: 0.75rem 0.75rem 0.25rem 0.75rem !important;
    }
    /* 헤더 툴바 축소 */
    .profile-group-divine {
        zoom: 0.9 !important;
    }
    .header-right-col-divine {
        zoom: 0.9 !important;
    }
    .stat-carousel-container {
        height: 10.5rem !important;
        margin-top: -1vh !important;
    }
    .stat-carousel-track {
        width: 10.5rem !important;
        height: 10.5rem !important;
    }
    .stat-card {
        width: 10.5rem !important;
        height: 10.5rem !important;
    }
    .stat-card-label {
        font-size: 0.8rem !important;
        top: 1.8rem !important;
    }
    .stat-card-value {
        font-size: 2.2rem !important;
        top: 3.5rem !important;
        margin: 0 !important;
    }
    .menu-buttons-container {
        gap: 8px !important;
        top: -15px !important;
    }
    .divine-menu-btn {
        height: 44px !important;
    }
    /* 버튼 내부 레이아웃 컴팩트화 */
    .divine-menu-btn > div:first-child {
        flex: 0 0 44px !important;
        height: 100% !important;
    }
    .divine-menu-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    .divine-footer-dock {
        padding: 5px 0 10px 0 !important;
    }
    .dock-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
}