.header-base {
    background: var(--neon-red);
    color: #fff;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--title-font, 'Black Han Sans', sans-serif);
}

#profile-user-card {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    position: relative;
}

.profile-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    overflow: hidden;
}

.profile-info {
    flex: 1;
}

.profile-nickname {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 5px;
}

.profile-tier {
    font-family: var(--number-font, 'Orbitron');
    font-size: 14px;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 15px;
    background: #fff;
}

.p-stat-box {
    background: #eee;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-stat-label {
    font-size: 11px;
    color: #666;
    margin-bottom: 5px;
}

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




/* [PATCH] Profile Header Layout Fix (2026-02-05) */
#profile-header {
    width: 100% !important;
    position: relative !important;
    justify-content: center !important;
}

#profile-header span:last-child {
    position: absolute !important;
    right: 0px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* --- CURRENCY SYSTEM (DIAMOND) --- */
.currency-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--neon-cyan);
    font-weight: bold;
    margin-left: 8px;
    font-family: var(--number-font, 'Orbitron', sans-serif);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
}

.currency-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 2px var(--neon-cyan));
}


/* [Layout Fix] Vertical Centering for Main Menu */
.footer-row {
    width: 100%;
    margin-top: auto;
    /* Pushes to bottom */
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-bottom: 25px;
    /* Balanced */
    z-index: 10;
}

.menu-buttons-container {
    width: 95%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 10px 0;
}

.game-title-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    /* Pushes down from header */
    margin-bottom: 20px;
    flex-shrink: 1;
    /* Allow shrinking */
}

/* [Image Fix] Constrain logo height */
.game-title-box img {
    max-height: 25vh;
    /* Prevent logo from dominating vertical space */
    width: auto;
    object-fit: contain;
}

.menu-btn-box {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--neon-red);
    color: #fff;
    padding: 15px 0;
    /* [Restored] Standard padding */
    font-family: var(--title-font, 'Black Han Sans');
    font-size: 18px;
    /* [Restored] Original Size */
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
}

.menu-btn-box:active {
    transform: scale(0.98);
    background: var(--neon-red);
}

/* Footer Items (Circles) */
.footer-item {
    font-size: 12px;
    /* [Restored] */
    color: #ccc;
    border: 1px solid var(--neon-red);
    width: 60px;
    /* [Restored] */
    height: 60px;
    /* [Restored] */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    overflow: hidden;
}

.profile-info {
    flex: 1;
}

.profile-nickname {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 5px;
}

.profile-tier {
    font-family: var(--number-font, 'Orbitron');
    font-size: 14px;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 15px;
    background: #fff;
}

.p-stat-box {
    background: #eee;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-stat-label {
    font-size: 11px;
    color: #666;
    margin-bottom: 5px;
}

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




/* [PATCH] Profile Header Layout Fix (2026-02-05) */
#profile-header {
    width: 100% !important;
    position: relative !important;
    justify-content: center !important;
}

#profile-header span:last-child {
    position: absolute !important;
    right: 0px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* --- CURRENCY SYSTEM (DIAMOND) --- */
.currency-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--neon-cyan);
    font-weight: bold;
    margin-left: 8px;
    font-family: var(--number-font, 'Orbitron', sans-serif);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
}

.currency-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 2px var(--neon-cyan));
}


/* [Layout Fix] Vertical Centering for Main Menu */
.footer-row {
    width: 100%;
    margin-top: auto;
    /* Pushes to bottom */
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-bottom: 25px;
    /* Balanced */
    z-index: 10;
}

.menu-buttons-container {
    width: 95%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 10px 0;
}

.game-title-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    /* Pushes down from header */
    margin-bottom: 20px;
    flex-shrink: 1;
    /* Allow shrinking */
}

/* [Image Fix] Constrain logo height */
.game-title-box img {
    max-height: 25vh;
    /* Prevent logo from dominating vertical space */
    width: auto;
    object-fit: contain;
}

.menu-btn-box {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--neon-red);
    color: #fff;
    padding: 15px 0;
    /* [Restored] Standard padding */
    font-family: var(--title-font, 'Black Han Sans');
    font-size: 18px;
    /* [Restored] Original Size */
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
}

.menu-btn-box:active {
    transform: scale(0.98);
    background: var(--neon-red);
}

/* Footer Items (Circles) */
.footer-item {
    font-size: 12px;
    /* [Restored] */
    color: #ccc;
    border: 1px solid var(--neon-red);
    width: 60px;
    /* [Restored] */
    height: 60px;
    /* [Restored] */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    word-break: keep-all;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 0, 85, 0.3);
}

/* --- SETTINGS SLIDER (RANGE) --- */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    height: 8px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--neon-cyan);
    margin-top: -6px;
    /* center thumb */
    box-shadow: 0 0 5px var(--neon-cyan);
    border: 2px solid #fff;
    cursor: pointer;
}

input[type=range]:focus::-webkit-slider-thumb {
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}

/* --- PREMIUM SETTINGS GEAR (CSS Only) --- */
/* The Container Button */
.premium-gear-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    /* [Critical Fix] Ensure it stays above loading screen/invisible overlays */
    z-index: 10002 !important;
    pointer-events: auto !important;
}

.premium-gear-btn:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan);
}

.premium-gear-btn:active {
    transform: scale(0.95);
}

/* The Gear Body */
.gear-icon-body {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #444, #888, #444, #888, #444);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: gear-spin 8s linear infinite;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
}

.premium-gear-btn:hover .gear-icon-body {
    animation-duration: 2s;
    /* Spin faster on hover of container */
    filter: brightness(1.2);
}

/* Gear Teeth */
.gear-tooth {
    position: absolute;
    width: 6px;
    height: 34px;
    /* Extends beyond body */
    background: linear-gradient(to bottom, #ccc, #555, #ccc);
    top: 50%;
    left: 50%;
    transform-origin: center;
    margin-top: -17px;
    margin-left: -3px;
    border-radius: 2px;
    z-index: 0;
}

/* Create 6 teeth by rotating instances */
.gear-tooth:nth-child(1) {
    transform: rotate(0deg);
}

.gear-tooth:nth-child(2) {
    transform: rotate(45deg);
}

.gear-tooth:nth-child(3) {
    transform: rotate(90deg);
}

.gear-tooth:nth-child(4) {
    transform: rotate(135deg);
}

/* Gear Inner Core */
.gear-core {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #222 30%, #555 100%);
    border-radius: 50%;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    /* Cyan Glow Center */
}

/* Animation */
@keyframes gear-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* [Critical Fix] Force Transparent Backgrounds for Game View */
#game-view,
#game-body,
.main-area {
    background: transparent !important;
}

/* Ensure text is readable against video */
.main-area {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* Re-assert Option Card Styles to prevent override */
.option-card {
    background: rgba(0, 0, 0, 0.6) !important;
    /* Darker glass for better contrast */
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Fix for potential Light Mode leak */
body {
    background-color: #050508 !important;
    /* Fallback dark color */
    color: #fff !important;
}

/* [Restored] Modal Overlay Logic */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    background: rgba(30, 30, 40, 0.95);
    z-index: 20000;
    display: none;
    /* JS toggles flex */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: rgba(20, 20, 30, 0.95);
    border: 2px solid var(--neon-blue);
    border-radius: 15px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--neon-blue);
    margin-bottom: 10px;
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444 !important;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--neon-green) !important;
}

input:checked+.slider:before {
    transform: translateX(14px);
}

.shake {
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {

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

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

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

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

/* Red Flash Class */
/* Red Flash Class */
.damage-flash {
    opacity: 0.6 !important;
    animation: shake 0.3s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@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);
    }
}

/* [Scroll Fix] Allow main content to scroll */
#menu-view,
#game-view,
.view {
    overflow: hidden !important;
    /* overflow-y: auto !important; */
    /* overflow-x: hidden; */
    /* -webkit-overflow-scrolling: touch; */
}

/* [Install Button Visibility] Ensure it's not hidden by overflow */
#install-btn {
    z-index: 9999;
}

/* =========================================
   CATEGORY ANALYSIS MODAL Styles
   ========================================= */
/* [Fix] Widen the modal for Analysis View Only */
#analysis-modal .modal-content {
    max-width: none !important;
    /* Remove any max-width limit */
    width: 98% !important;
    /* Nearly full width */
    padding: 10px 5px !important;
    /* Reduce padding slightly */
    box-sizing: border-box !important;
}

.analysis-header-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--neon-blue);
    font-weight: bold;
    color: var(--neon-blue);
    margin-bottom: 10px;
    display: none;
    /* Hide header as we move to card style */
}

/* =========================================
   PWA INSTALL ENFORCER Styles
   ========================================= */
#install-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(5, 5, 8, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(30, 30, 40, 0.95);
}

.install-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: fadeIn 0.5s ease;
}

.install-logo {
    font-size: 60px;
    filter: drop-shadow(0 0 15px var(--neon-gold));
    animation: float 3s ease-in-out infinite;
}

#install-prompt-overlay p {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#force-install-btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    width: auto;
    min-width: 200px;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    border: none;
    color: white;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 243, 255, 0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

#force-install-btn:active {
    transform: scale(0.95);
}

#analysis-list-container {
    max-height: 400px;
    /* Increased height */
    overflow-y: auto;
    padding-right: 5px;
    width: 100%;
    /* Explicit width */
}

.analysis-row {
    display: flex;
    flex-direction: column;
    /* Stacked */
    margin-bottom: 15px;
    /* More spacing */
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100% !important;
    /* FORCE FULL WIDTH */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.an-row-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
    align-items: center;
    box-sizing: border-box;
    /* Ensure padding is included */
}

.an-cat-name {
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    /* Removed text-overflow utils to show full text */
    word-break: break-all;
    flex: 1;
    /* Allow to grow */
}

.an-cat-acc {
    font-size: 16px;
    font-weight: bold;
    min-width: 60px;
    /* Wider for percentage */
    text-align: right;
}

.an-bar-container {
    width: 100% !important;
    /* FORCE FULL WIDTH */
    height: 18px;
    /* Thicker bar (was 14px) */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    /* Include padding/border */
}

.an-bar-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 1s ease-out;
    position: relative;
}

/* Shine effect on bar */
.an-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg);
}

/* [New] Bottom Sheet Styles */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    background: rgba(30, 30, 40, 0.95);
    z-index: 10001;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Anchor to bottom */
    overflow: hidden;
    /* Prevent scrollbar from translated sheet */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bottom-sheet-overlay.active {
    display: flex;
    opacity: 1;
}

.bottom-sheet {
    background: rgba(20, 20, 30, 0.95);
    width: 100%;
    max-width: 600px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 20px 20px 30px 20px;
    /* Reduced bottom padding */
    border-top: 1px solid var(--neon-blue);
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.8);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: hidden;
    /* Disable scrollbar */
    max-height: 85vh;
}

/* Animation State */
.bottom-sheet.active,
.bottom-sheet-overlay.active .bottom-sheet {
    transform: translateY(0) !important;
}

.sheet-close-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    border-radius: 12px;
    font-family: var(--number-font, 'Orbitron');
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 20px;
    /* Safe margin */
    cursor: pointer;
}

/* Common Sheet Header */
.sheet-header {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 10px;
    position: relative;
    font-family: var(--title-font, 'Black Han Sans');
}

/* Handle Bar */
.sheet-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 15px auto;
    /* Removed negative margin */
}

/* Countdown Overlay Animation */
#duel-countdown {
    animation: countdownPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

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

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

/* Duel Set Score Dots */
.set-dot {
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.set-dot.active-player {
    background: var(--neon-cyan) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 8px var(--neon-cyan);
}

.set-dot.active-bot {
    background: var(--neon-red) !important;
    border-color: var(--neon-red) !important;
    box-shadow: 0 0 8px var(--neon-red);
}

/* Floating Score Animation */
.floating-score {
    position: absolute;
    font-family: var(--number-font, 'Orbitron');
    font-weight: 900;
    font-size: 28px;
    z-index: 9999;
    pointer-events: none;
    /* 3D Stroke + Drop Shadow Effect */
    text-shadow:
        1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
        /* White Stroke */
        0px 3px 0 rgba(0, 0, 0, 0.8),
        /* 3D Depth */
        0px 6px 8px rgba(0, 0, 0, 0.5);
    /* Drop Shadow */
    animation: floatScorePop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes floatScorePop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        /* [Fix] Anchor exactly to vertical center */
    }

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

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

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

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

/* [ADDED] Profile Button Fixed Size */
/* [ADDED] Profile Button Fixed Size */
.header-left {
    width: 70px !important;
    height: 70px !important;
    padding: 0 !important;
    flex-shrink: 0;
    overflow: visible !important;
    border-radius: 50%;
    aspect-ratio: 1/1;
    z-index: 1001;
    /* Keep High Z-index */
    background: rgba(0, 0, 0, 0.3);
    /* Restore subtle background */
    position: relative;
    /* Restore relative positioning */
}

/* Force Header to be on top */
.header-area {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
    pointer-events: none;
    /* Let clicks pass through if covering */
}

/* [ADDED] Tech-Magic Profile Border */
.profile-border-tech {
    position: relative;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
    /* Base Glow */
    border: 1px solid rgba(0, 243, 255, 0.3);
}

.profile-border-tech::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px dashed var(--neon-gold);
    animation: spinSlow 10s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}

.profile-border-tech::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border-top: 2px solid var(--neon-blue);
    border-bottom: 2px solid var(--neon-blue);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    animation: spinReverse 6s linear infinite;
    opacity: 0.8;
    pointer-events: none;
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* [Fix] Restore interactivity to header right */
.header-right {
    pointer-events: auto !important;
}

/* [Fix] Force pointer-events on Settings Button */
.premium-gear-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* [Fix] Force Z-Index on Settings Button to break out of blocked container */
.premium-gear-btn {
    z-index: 10002 !important;
    position: relative !important;
}

/* =========================================
   STITCH "DIVINE" LOBBY UI (PURE CSS)
========================================= */

/* [GLOBAL PARCHMENT FONT OVERRIDE] */
/* Forces all text within the new parchment theme to use the chosen font (Jua) */
.parchment-theme-active,
.username-text-divine,
.title-text-divine,
.currency-val-divine,
.floor-label-divine,
.floor-number-divine,
.floor-title-divine,
.stamina-bar-container-divine .music-marquee-text,
.currency-pill-divine #stamina-timer-val,
.divine-menu-btn span {
    font-family: var(--main-font, 'Jua', sans-serif) !important;
}

/* --- 1. Profile Area --- */
.lobby-header-divine {
    position: relative;
    z-index: 10;
    padding: 1.5rem 1rem 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    /* gap removed from here, managed inside top-row */
    width: 100%;
    box-sizing: border-box;
}

.header-top-row-divine {
    display: flex;
    align-items: stretch;
    /* Stretch so both columns are same height */
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.header-right-col-divine {
    /* Right column holds Stamina/Settings on top, Music on bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 5;
    /* 50% ratio */
    /* take remaining space */
}

/* Profile Group */
.profile-group-divine {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    flex: 5;
    /* 50% ratio */
    /* Translucent glass */
    background: rgba(30, 30, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.25rem 1rem 0.25rem 0.25rem;
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.profile-group-divine:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.avatar-container-divine {
    position: relative;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    border: 3.5px solid #dca450;
    background-color: transparent;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 4px 8px rgba(255, 255, 255, 0.6),
        inset 0 -5px 10px rgba(112, 65, 20, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

.avatar-container-divine::after {
    content: '';
    position: absolute;
    inset: -3.5px;
    /* Cover the border */
    border-radius: 9999px;
    border: 3.5px solid #dca450;
    box-shadow:
        inset 0 4px 8px rgba(255, 255, 255, 0.6),
        inset 0 -5px 10px rgba(112, 65, 20, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 5;
}

.avatar-container-divine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px;
}

.level-badge-divine {
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    background-color: var(--neon-gold);
    color: #121320;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid white;
    z-index: 2;
    white-space: nowrap;
}

/* Override innerHTML span from ui.js for level-badge */
.level-badge-divine span {
    color: #121320 !important;
    font-size: 11px !important;
}

.user-info-col-divine {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.username-text-divine {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.025em;
    font-family: var(--main-font, 'Inter', sans-serif);
}

.title-text-divine {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Currencies & Settings */
.currency-group-divine {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.currency-pill-divine {
    background: rgba(255, 255, 255, 0.1);
    background: rgba(30, 30, 40, 0.95);
    border-radius: 9999px;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.currency-val-divine {
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.currency-add-divine {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.currency-add-divine:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* --- Notification Bell (Header Layout) --- */
.icon-btn-notif {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    border-radius: 50%;
}

.icon-btn-notif:active {
    transform: scale(0.92);
}

.notif-bg-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 50% !important;
    /* Forced perfect circle */
    border: 1px solid #b48a4d;
    background-color: #d4cda7;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png"), radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(139, 94, 60, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 3D Emboss Effect specifically for Footer Dock Buttons (Location & Install) */
.dock-btn .notif-bg-frame {
    border: 2.5px solid #dca450;
    /* Thicker, richer gold border */
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.7),
        /* Stronger drop shadow for popping out */
        inset 0 4px 8px rgba(255, 255, 255, 0.8),
        /* Top inner highlight for 3D bevel */
        inset 0 -5px 10px rgba(112, 65, 20, 0.7);
    /* Bottom inner shadow for 3D depth */
}

.dock-btn:active .notif-bg-frame {
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.6),
        inset 0 4px 12px rgba(90, 50, 15, 0.8);
    /* Pressed-in state */
}

/* =========================================
   [UNIVERSAL 3D PARCHMENT THEME OVERRIDES]
   Applies the exact same parchment background, golden border, and 3D shadows
   to all main screen buttons, regardless of their shape (pill, rectangle, circle).
   ========================================= */
.profile-group-divine,
.currency-pill-divine,
.stamina-bar-container-divine,
.divine-menu-btn,
.footer-icon-frame,
.gear-bg-frame,
.notif-bg-frame,
#profile-user-card {
    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;
    overflow: hidden;
    /* Does not force border-radius, allows elements to keep their original shapes */
}

/* [Mobile Optical Center Fix] 
   모바일의 작은 화면에서는 하단 그림자(-5px)가 차지하는 비율이 커져 글자가 위로 쏠려보임 
   착시를 교정하기 위해 모바일에서만 내용물을 물리적으로 살짝 아래로 내립니다. 
   transform 오버라이드를 피하기 위해 position: relative 사용 */
@media (max-width: 768px) {

    .currency-pill-divine>* {
        position: relative !important;
        top: 2px !important;
    }

    /* 6/6 숫자가 번개 아이콘 대비 상하 균형이 안맞아 보이는 폰트 특성 보정 */
    #stamina-count-val {
        position: relative !important;
        top: 1px !important;
        /* 부모 div가 이미 2px 내려간 상태에서 1px 추가로 더 내림 */
    }
}

/* Active / Pressed-in State for all elements */
.profile-group-divine:active,
.currency-pill-divine:active,
.stamina-bar-container-divine:active,
.divine-menu-btn:active,
.dock-btn:active .footer-icon-frame,
.icon-btn-gear:active .gear-bg-frame,
.icon-btn-notif:active .notif-bg-frame {
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.6),
        inset 0 4px 12px rgba(90, 50, 15, 0.8) !important;
}

/* =========================================
   [PARCHMENT LIGHT THEME INK TEXT & SVG FIXES]
   Overrides white neon text and SVGs to a dark brown ink color 
   so they contrast well against the light parchment. Adds a 3D inset effect.
   ========================================= */

/* Target Texts */
.profile-group-divine .username-text-divine,
.profile-group-divine .title-text-divine,
.profile-group-divine .level-badge-divine,
.currency-pill-divine #stamina-count-val,
.currency-pill-divine #stamina-timer-val,
.stamina-bar-container-divine .music-marquee-text,
.divine-menu-btn span {
    color: #4e342e !important;
    /* Deep Brown Ink */
    /* Light shadow below, dark shadow top for a deep pressed-in letterpress effect */
    text-shadow: 0 1.2px 1px rgba(255, 255, 255, 0.9), 0 -1.2px 1.5px rgba(0, 0, 0, 0.45) !important;
    filter: none !important;
    /* Remove external neon glow */
}

/* Specific fix for Level Badge inside Profile */
.profile-group-divine .level-badge-divine {
    background: #4e342e !important;
    color: #f5f1e0 !important;
    text-shadow: none !important;
    border: 1px solid #3e2723 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Specific fix for Stamina Timer */
.currency-pill-divine #stamina-timer-val {
    color: #5d4037 !important;
    /* Slightly lighter brown */
}

/* Target SVG Lines (Strokes) & Fills */
.divine-menu-btn svg,
.footer-icon-frame svg,
.bell-svg-icon,
.gear-svg-icon,
.currency-pill-divine .neon-lightning-icon {
    color: #4e342e !important;
    stroke: #4e342e !important;
    fill: none;
    background: transparent !important;
    filter: none !important;
}

.currency-pill-divine .neon-lightning-icon .lightning-path {
    stroke-width: 2.5px;
    stroke: #4e342e !important;
    stroke-linejoin: round;
    fill: rgba(220, 164, 80, 0.8) !important;
}

/* Ensure inner SVG parts also don't use white fill */
.bell-svg-icon circle[fill="currentColor"],
.gear-svg-icon circle[fill="currentColor"],
.bell-svg-icon path[fill="currentColor"],
.gear-svg-icon path[fill="currentColor"] {
    fill: #4e342e !important;
}

/* Override Neon glows for Music Buttons */
.stamina-bar-container-divine .neon-music-btn {
    -webkit-tap-highlight-color: transparent;
}

.stamina-bar-container-divine .neon-music-btn span {
    color: #4e342e !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0px !important;
}

.stamina-bar-container-divine .neon-music-btn:hover {
    color: #3e2723 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 1) !important;
    background: rgba(218, 165, 32, 0.2) !important;
    /* Soft golden amber rounded color */
    transform: scale(1.1);
}

.stamina-bar-container-divine .neon-music-btn:active {
    background: rgba(218, 165, 32, 0.4) !important;
    /* Stronger golden amber on tap */
    transform: scale(0.95) !important;
}

/* Footer Icon center defaults (Shop & Rank) */
.footer-icon-center {
    color: #4e342e !important;
    filter: none !important;
}

.dock-btn:hover .footer-icon-center {
    color: #3e2723 !important;
    filter: drop-shadow(0 1px 1px #fff) !important;
}

.dock-btn:active .footer-icon-center {
    color: #1a1a1a !important;
}

.icon-btn-notif:hover .notif-bg-frame {
    background-color: #fff4d6;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.notif-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #ff4d4d, #991b1b);
    border: 1.5px solid #fff;
    border-radius: 50%;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    animation: badge-pulse 1.5s infinite;
}

@keyframes badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.notif-symbol-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bell-svg-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: stroke 0.3s ease;
}

.icon-btn-notif:hover .bell-svg-icon {
    stroke: #8b5e3c;
}

.is-ringing .bell-svg-icon {
    animation: bell-swing 0.6s ease-in-out;
    transform-origin: top center;
}

@keyframes bell-swing {
    0% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(20deg);
    }

    40% {
        transform: rotate(-15deg);
    }

    60% {
        transform: rotate(10deg);
    }

    80% {
        transform: rotate(-5deg);
    }

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

.shadow-bottom-notif {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    border-bottom-left-radius: 50%;
    /* Ensuring it matches perfectly */
    border-bottom-right-radius: 50%;
    /* Ensuring it matches perfectly */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

/* =========================================
   [SETTINGS GEAR: PARCHMENT THEME]
   ========================================= */
.icon-btn-gear {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    margin-left: 8px;
    border-radius: 50%;
}

.icon-btn-gear:active {
    transform: scale(0.92);
}

.gear-bg-frame {
    position: absolute;
    inset: 0;
    border-radius: 50% !important;
    /* Forced perfect circle */
    border: 1px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 0 8px rgba(139, 94, 60, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

.icon-btn-gear:hover .gear-bg-frame {
    background-color: #fff4d6;
    border-color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.gear-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.gear-symbol-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.gear-svg-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    transition: stroke 0.3s ease;
    animation: gear-idle 12s linear infinite;
}

.icon-btn-gear:hover .gear-svg-icon {
    stroke: #8b5e3c;
    animation-duration: 4s;
}

.is-spinning .gear-svg-icon {
    animation: gear-spin-active 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gear-idle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gear-spin-active {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        stroke: #fbbf24;
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.gear-shadow-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    border-bottom-left-radius: 50%;
    /* Match shape */
    border-bottom-right-radius: 50%;
    /* Match shape */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
    pointer-events: none;
}

.gear-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 8px 8px;
    opacity: 0.12;
    pointer-events: none;
}

/* Stamina/Energy Bar */
.stamina-bar-container-divine {
    background: rgba(255, 255, 255, 0.08);
    background: rgba(30, 30, 40, 0.95);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Matched profile border opacity */
    cursor: pointer;
    margin-top: 0;
    /* Removed margin as flex gap handles it */
    min-height: 2.22rem;
    /* Give it some height to match currency pill */
}

.stamina-icon-divine {
    color: var(--neon-cyan);
    font-size: 1.25rem;
    text-shadow: 0 0 10px var(--neon-cyan);
    filter: drop-shadow(0 0 5px var(--neon-cyan));
}

.stamina-flex-divine {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stamina-text-row-divine {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 800;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.stamina-track-divine {
    height: 0.4rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
}

.stamina-fill-divine {
    height: 100%;
    background: linear-gradient(to right, #60a5fa, #ffffff);
    width: 100%;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
    transition: width 0.3s ease;
}

/* --- 2. Centerpiece Tower Area --- */
.center-main-area-divine {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Removed padding to allow 95%+ spread */
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 2vh;
}

.center-title-container-divine {
    text-align: center;
    margin-bottom: 2.5rem;
}

.center-title-divine {
    color: white;
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    font-family: var(--title-font, 'Black Han Sans', sans-serif);
    margin: 0;
    line-height: 1.1;
    color: #e5cc8a;
    /* Changed to a solid gold/bronze color as requested */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.center-subtitle-divine {
    color: var(--neon-gold);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.floor-indicator-wrapper-divine {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.floor-rings-divine {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    /* Balanced scale for both mobile and desktop views */
    transform-origin: center center;
    margin-bottom: 0px;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }

    50% {
        transform: scale(1.08);
        opacity: 0.5;
        border-color: var(--neon-gold);
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.8), inset 0 0 15px rgba(212, 175, 55, 0.5);
    }

    100% {
        transform: scale(0.9);
        opacity: 0.9;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }
}

/* Pseudo-element rings attached to every stat card */
.stat-card::before {
    content: '';
    position: absolute;
    top: -2.5rem;
    left: -2.5rem;
    right: -2.5rem;
    bottom: -2.5rem;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 9999px;
    pointer-events: none;
    z-index: -1;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -1.2rem;
    left: -1.2rem;
    right: -1.2rem;
    bottom: -1.2rem;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 9999px;
    animation: pulse-ring 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.floor-circle-divine {
    width: 14rem;
    height: 14rem;
    background: rgba(10, 10, 15, 0.35);
    /* added subtle dark tint */
    background: rgba(30, 30, 40, 0.95);
    /* increased blur */
    border-radius: 9999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid #dca450;
    /* stronger gold border */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        /* strong outer shadow for popup effect */
        inset 0 0 30px rgba(255, 255, 255, 0.1),
        /* inner frosted glow */
        0 0 20px rgba(220, 164, 80, 0.4);
    /* outer gold glow */
    position: relative;
    overflow: hidden;
}

.floor-circle-gradient-divine {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(212, 175, 55, 0.25), transparent);
    pointer-events: none;
}

.floor-label-divine {
    color: var(--neon-gold);
    font-size: 0.9rem;
    /* slightly larger */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.2rem;
    z-index: 1;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(212, 175, 55, 0.8);
}

.floor-number-divine {
    color: #fff;
    font-size: 5.5rem;
    /* slightly larger */
    font-weight: 900;
    line-height: 1;
    z-index: 1;
    font-family: var(--number-font, 'Orbitron', monospace);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.6);
}

.floor-title-divine {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    margin-top: 0.5rem;
    z-index: 1;
    letter-spacing: 0.2em;
}

/* --- 3. Menu Buttons --- */
.divine-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    height: 65px;
    background: rgba(18, 19, 32, 0.3);
    /* Lowered opacity to 30% for much higher transparency */
    background: rgba(30, 30, 40, 0.95);
    border: 2px solid #e5cc8a;
    /* Soft golden color requested */
    border-radius: 16px;
    /* Smooth rounded rectangle */
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: var(--main-font, 'Inter', 'Noto Sans KR', sans-serif);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Good grounding shadow */
}

.divine-menu-btn:hover {
    background: rgba(40, 42, 54, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(229, 204, 138, 0.2);
}

/* --- 4. Footer Dock --- */
.divine-footer-dock {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    padding: 15px 0 20px 0;
    margin-top: auto;
    background: transparent;
    border-top: none;
}

.dock-btn {
    background: transparent;
    border: none;
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 50%;
}

.dock-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* [NEXUS Q] ??  ? */
.neon-lightning-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
}

.stamina-modal-lightning {
    width: 60px;
    height: 60px;
    overflow: visible;
    background: transparent;
    border: none;
    filter: none;
}

.lightning-path {
    fill: #FFD700;
    stroke: #FFF;
    stroke-width: 0.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.stamina-modal-lightning .lightning-path {
    fill: #FFD700;
    stroke: #4e342e;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 25px rgba(255, 215, 0, 0.6));
    animation: lightning-electricity 1.5s infinite alternate ease-in-out;
}

@keyframes lightning-electricity {
    0% {
        opacity: 0.8;
        stroke-width: 1.3;
        filter: brightness(1) drop-shadow(0 0 8px #FFD700);
    }

    100% {
        opacity: 1;
        stroke-width: 1.8;
        filter: brightness(1.3) drop-shadow(0 0 20px #FFD700);
    }
}


/* --- 4. Music Bar Neon Iteration --- */
.neon-music-icon-divine {
    font-size: 1.4rem !important;
    color: var(--neon-purple);
    margin-right: 0.2rem;
    filter: drop-shadow(0 0 5px var(--neon-purple)) drop-shadow(0 0 10px rgba(188, 19, 254, 0.6));
    animation: music-pulse 2s infinite ease-in-out;
    user-select: none;
}

@keyframes music-pulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px var(--neon-purple)) drop-shadow(0 0 10px rgba(188, 19, 254, 0.6));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px var(--neon-purple)) drop-shadow(0 0 15px rgba(188, 19, 254, 0.9));
    }
}

.neon-music-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    /* Adjusted for material icon inside */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.neon-music-btn:hover {
    color: #e5cc8a;
    /* Golden amber */
    background: rgba(218, 165, 32, 0.1);
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}

.neon-music-btn span {
    font-size: 20px !important;
}

/* CD Spinning Animation */
.cd-spin {
    display: inline-block;
    animation: cd-rotate 4s linear infinite;
    /* Increase size slightly for the CD */
    font-size: 1.6rem !important;
}

@keyframes cd-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Pure CSS Vinyl/CD Icon */
.vinyl-record-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 0.5rem;
    position: relative;
    box-shadow: 0 0 8px var(--neon-purple);
    /* Outer black rim and silver/grooved body */
    background: radial-gradient(circle at center,
            #111 0%, #111 40%,
            /* Inner dark ring */
            #2a2a35 42%, #1a1a24 55%, #333 70%, #111 100%
            /* Grooves */
        );
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* The colorful inner label and center spindle hole */
.vinyl-record-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--neon-cyan);
    /* Cool neon label */
    border-radius: 50%;
    border: 2px solid #111;
    /* The center hole */
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* The light reflection / CD Shine */
.vinyl-record-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: conic-gradient(from 45deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 15%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0.4) 65%,
            rgba(255, 255, 255, 0) 80%);
    pointer-events: none;
    z-index: 3;
}

/* Micro-Scale LP Record (Tailored for 30px-40px icons) */
.jinion-lp-wrapper {
    width: 30px;
    /* Reduced to fit the music bar perfectly */
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.2rem;
    cursor: pointer;
}

/* We remove the big scale box and just make the disk the exact size */
.jinion-lp-scale-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.lp-shadow {
    position: absolute;
    inset: -2px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    filter: blur(4px);
    /* Tighter blur for smaller size */
}

.lp-disk {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Scaled down border */
    border: 3px solid #18181b;
    /* Simplified radial gradient for micro view (fewer bands look better small) */
    background: radial-gradient(circle, #111 30%, #2a2a2a 40%, #111 50%, #1a1a1a 70%, #000 100%);
    animation: rotate_lp 4s linear infinite;
}

@keyframes rotate_lp {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.cd-spin-lp {
    animation: rotate_lp 4s linear infinite;
}

.lp-shine {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    /* Stronger shine to be visible at small scale */
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.3), transparent, rgba(255, 255, 255, 0.3), transparent, rgba(255, 255, 255, 0.3), transparent);
}

.lp-label {
    position: absolute;
    width: 12px;
    /* Micro label size */
    height: 12px;
    background-color: #fbbf24;
    border-radius: 50%;
    border: 1px solid #18181b;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Text is hidden at micro scale because it becomes illegible sub-pixel noise */
.lp-label-text {
    display: none;
}

.lp-pin {
    position: absolute;
    width: 2px;
    /* Micro pin hole */
    height: 2px;
    background-color: #18181b;
    border-radius: 50%;
    z-index: 20;
}

/* --- Music Marquee --- */
.music-marquee-wrapper {
    flex: none;
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.music-marquee-text {
    display: inline-block;
    color: var(--neon-purple);
    font-size: 11px;
    font-weight: 800;
    padding-left: 100%;
    line-height: 1;
    position: relative;
    top: -2.5px;
    animation: music-marquee 7s linear infinite;
}

@keyframes music-marquee {
    0% {
        transform: translateX(0);
    }

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

/* Footer Shiny Icons */
.footer-icon-frame {
    position: relative;
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
    flex: 0 0 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 200, 50, 0.4);
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.9), rgba(15, 15, 20, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(255, 200, 50, 0.1);
    transition: all 0.3s ease;
}

.dock-btn:active .footer-icon-frame {
    background: linear-gradient(145deg, rgba(40, 40, 50, 0.95), rgba(20, 20, 30, 0.95));
    border-color: rgba(255, 200, 50, 0.8);
    box-shadow: 0 0 20px rgba(255, 200, 50, 0.5), inset 0 0 15px rgba(255, 200, 50, 0.3);
    transform: scale(0.95);
}

.footer-icon-bg {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
}

.footer-icon-gloss {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent, rgba(254, 243, 199, 0.1), rgba(255, 255, 255, 0.3));
    pointer-events: none;
}

.footer-icon-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
    pointer-events: none;
}

.footer-icon-center {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD700;
    filter: drop-shadow(0 0 4px rgba(255, 200, 50, 0.6));
    transition: color 0.3s ease, filter 0.3s ease;
}

.dock-btn:hover .footer-icon-center {
    color: #FFF;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.dock-btn:active .footer-icon-center {
    color: #FFAA00;
}

.footer-icon-wave {
    position: absolute;
    inset: 0;
    background-color: rgba(245, 158, 11, 0.4);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

@keyframes ring-ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }

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

.dock-btn:active .footer-icon-wave {
    animation: ring-ping 0.5s ease-out;
}

/* =========================================
   [LOCATION REGISTRATION MODAL: GOLDEN AMBER]
   ========================================= */

/* 筌뤴뫀????苡????(獄쏄퀗??遺??筌ｌ꼶?? */
.loc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    background: rgba(30, 30, 40, 0.95);
    display: none;
    /* Default hidden */
    justify-content: center;
    align-items: flex-end !important;
    padding: 0 !important;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    /* [Fix] 투명 상태에서 클릭 차단 방지 */
    transition: opacity 0.3s ease;
}

.loc-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    /* [Fix] 활성화 시에만 클릭 허용 */
}

/* ── Modal z-index Hierarchy ── */
/* Layer 0: Base modals (mode-select, pause, etc.) = 1000 (default above) */
/* Layer 1: Confirm dialogs spawned FROM pause modals */
#survival-restart-confirm-modal,
#survival-quit-confirm-modal,
#quit-confirm-modal,
#practice-restart-confirm-modal,
#rank-surrender-confirm-modal,
#stamina-modal {
    z-index: 10000 !important;
}

/* survival-pause-modal: uses default z-index 1000 from .loc-modal-overlay */

/* Level Up Modal: backdrop(49998) → 축하효과(50010~50013) → 모달(50020) */
#levelup-modal {
    z-index: 50020 !important;
}

/* 筌롫뗄??筌뤴뫀???袁⑥쟿??- ????醫딆쒔 ??? */
.loc-modal-frame {
    position: relative;
    width: 88%;
    max-width: 380px;
    min-height: 480px;
    max-height: 90vh;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.71) 0%, rgba(15, 15, 20, 0.73) 100%);
    border-radius: 28px;
    border: 1.5px solid rgba(251, 191, 36, 0.4);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        inset 0 0 20px rgba(251, 191, 36, 0.05),
        0 0 15px rgba(251, 191, 36, 0.2);
    padding: 32px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.loc-modal-overlay.active .loc-modal-frame {
    transform: translateY(0);
}

/* ?怨룸뼊 ?關???紐꾩삢 */
.loc-header-ornament {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

/* ?臾볥돗筌왖€ 筌욌뜃?獄쏄퀗?(沃섎챷??苡????? */
.loc-parchment-texture {
    position: absolute;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png");
    opacity: 0.03;
    pointer-events: none;
}

/* ?????怨몃열 */
.loc-modal-title-container {
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}

.loc-modal-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(to bottom, #fff4d6 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.loc-modal-title-underline {
    margin: 8px auto 0;
    width: 40px;
    height: 2px;
    background: #fbbf24;
    border-radius: 1px;
    opacity: 0.6;
}

/* 筌뤴뫀????由?甕곌쑵??(????醫딆쒔 ????? */
.loc-modal-close-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 1.5px;
    /* Glyphs like ??often sit slightly above the true center */
    background: rgba(180, 138, 77, 0.1);
    border: 1.5px solid #b48a4d;
    border-radius: 50%;
    color: #b48a4d;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.loc-modal-close-btn:hover {
    background: #b48a4d;
    color: #fff;
    box-shadow: 0 0 12px rgba(180, 138, 77, 0.6);
    transform: translateY(-50%) rotate(90deg) scale(1.1);
}

.loc-modal-close-btn:active {
    transform: translateY(-50%) scale(0.9);
}

/* ???筌?獄쏄퀣???怨몃열 */
.loc-modal-content {
    flex: 1;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    /* Semi-transparent scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(78, 52, 46, 0.3) transparent;
    padding-bottom: 8px;
}

/* Custom semi-transparent scrollbar for Chrome/Safari */
.loc-modal-content::-webkit-scrollbar {
    width: 6px;
}

.loc-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.loc-modal-content::-webkit-scrollbar-thumb {
    background: rgba(78, 52, 46, 0.3);
    border-radius: 10px;
}

.loc-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(78, 52, 46, 0.5);
}


/* ?醫듼봺 ?臾??????*/
.loc-glossy-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}


/* =========================================
   [SATELLITE ICON: LOCATION MODAL]
   ========================================= */
/* ?袁⑹뵠??甕곌쑵????????*/
.loc-icon-btn {
    position: relative;
    width: 60px;
    height: 60px;
    user-select: none;
    transition: transform 0.1s ease;
    flex-shrink: 0;
    margin-right: 15px;
}

/* ?臾볥돗筌왖€ 筌욌뜃??袁⑥쟿??(?遺우쁽???袁⑹뵠???????) */
.loc-bg-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.7),
        inset 0 0 15px rgba(139, 94, 60, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

.mode-card:hover .loc-bg-frame {
    background-color: #fff4d6;
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

/* ?醫듼봺 ?臾?筌띾뜃?*/
.loc-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

/* ?????醫륁깈 獄쎻뫗???醫딅빍筌롫뗄???(Pulse) */
.loc-signal-pulse {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 8px;
    border-bottom: 2px solid #d97706;
    border-radius: 50%;
    opacity: 0;
    animation: loc-wifi-pulse 2s infinite;
    z-index: 6;
}

@keyframes loc-wifi-pulse {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(2.5);
        opacity: 0;
    }
}

/* ?袁⑹뵠???????怨몃열 */
.loc-symbol-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.loc-symbol-svg {
    width: 36px;
    height: 36px;
    fill: #2d2d2d;
    stroke: #2d2d2d;
    transition: fill 0.3s ease, stroke 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.mode-card:hover .loc-symbol-svg {
    fill: #8b5e3c;
    stroke: #8b5e3c;
    transform: translateY(-2px);
}

/* --- ??苑??癰궰€?????? ?????袁⑹뵠??--- */
.name-edit-btn {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    margin-left: 2px;
}

.name-edit-btn:active {
    transform: scale(0.9);
}

.name-edit-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

.name-edit-btn:hover .name-edit-bg {
    background-color: #fff4d6;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.name-edit-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.name-edit-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.name-edit-svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 2.2;
    transition: stroke 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.name-edit-btn:hover .name-edit-svg {
    stroke: #8b5e3c;
    transform: rotate(-10deg);
}

.name-edit-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

/* --- ?袁⑥쨮?????癰궰€?????? 燁????袁⑹뵠??--- */
.profile-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    z-index: 20;
}

.profile-edit-btn:active {
    transform: scale(0.9);
}

.profile-edit-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

.profile-edit-btn:hover .profile-edit-bg {
    background-color: #fff4d6;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.profile-edit-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.profile-edit-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.profile-edit-svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 2.2;
    transition: stroke 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.profile-edit-btn:hover .profile-edit-svg {
    stroke: #8b5e3c;
    transform: scale(1.05);
}

/* 燁????酉€??醫딅빍筌롫뗄???(?????? */
.profile-edit-btn.is-clicked .profile-edit-svg {
    animation: camera-flash 0.4s ease-in-out;
}

@keyframes camera-flash {
    0% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    }

    50% {
        transform: scale(1.1);
        filter: brightness(2.5) drop-shadow(0 0 8px #fbbf24);
    }

    100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    }
}

.profile-edit-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

/* --- ?臾볥돗筌왖€ 獄쏄퀗?筌뤴뫀???袁⑥쟿??--- */
:root {
    --p-base: #d4cda7;
    --p-light: #f5f1e0;
    --p-ink: #8b5e3c;
    --p-gold: #b48a4d;
}

.parchment-frame {
    position: relative;
    width: 100%;
    border-radius: 12px;

    /* 1. 疫꿸퀡???臾볥돗筌왖€ 筌욌뜃??域밸챶??怨쀬뵠??*/
    background-color: var(--p-base);
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, var(--p-light) 0%, var(--p-base) 100%);

    /* 2. ?????????????猿?域밸챶???*/
    border: 1px solid var(--p-gold);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 0 10px rgba(139, 94, 60, 0.2);

    overflow: hidden;
    transition: transform 0.2s ease;
    padding: 15px;
    box-sizing: border-box;
}

/* 3. ??? 沃섎챷?野꺿뫗????? */
.parchment-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--p-ink) 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.15;
    pointer-events: none;
}

/* 4. ?怨룸뼊 ?醫듼봺 ?臾????????猿?域밸챶????????*/
.overlay-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ?醫듼봺 ?臾?*/
.overlay-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.25) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.15) 100%);
    z-index: 5;
}

/* ????域밸챶??怨쀬뵠??筌뤿굞?*/
.overlay-effects::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
}

/* --- 筌왖€?????? (? ?? --- */
.book-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -3px;
    user-select: none;
}

.book-badge-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    overflow: hidden;
}

.book-badge-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.1;
    pointer-events: none;
}

.book-badge-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

.book-badge-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.book-badge-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.book-badge-svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 1.8;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* --- 燁삳똾??⑥쥓???袁?(筌띾맧?域밸챶??? ?? --- */
.analysis-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -3px;
    user-select: none;
}

.analysis-badge-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    overflow: hidden;
}

.analysis-badge-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.1;
    pointer-events: none;
}

.analysis-badge-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

.analysis-badge-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.analysis-badge-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.analysis-badge-svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* --- ??而???(?????源????? ?? --- */
.survival-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -3px;
    user-select: none;
}

.survival-badge-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    overflow: hidden;
}

.survival-badge-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.1;
    pointer-events: none;
}

.survival-badge-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

.survival-badge-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.survival-badge-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.survival-badge-svg {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.survival-heart-main {
    stroke: #450a0a;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* --- ?醫딅굶??????(??) ?? --- */
.arena-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -3px;
    user-select: none;
}

.arena-badge-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    overflow: hidden;
}

.arena-badge-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.1;
    pointer-events: none;
}

.arena-badge-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

.arena-badge-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.arena-badge-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.arena-badge-svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    transform: rotate(-45deg);
}

/* --- ????? ????(獄쎻뫚?? ?? --- */
.guardian-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -3px;
    user-select: none;
}

.guardian-badge-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, #f5f1e0 0%, #d4cba7 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 5px rgba(139, 94, 60, 0.3);
    overflow: hidden;
}

.guardian-badge-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.1;
    pointer-events: none;
}

.guardian-badge-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

.guardian-badge-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
}

.guardian-badge-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.guardian-badge-svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #2d2d2d;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* --- 3D ????????袁⑹뵠?????????--- */
.rank-unit {
    position: relative;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.monolith {
    position: relative;
    width: 130px;
    height: 180px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    transform: rotateY(-35deg) rotateX(15deg);
}

.monolith .face {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
}

/* ????????????*/
.monolith .face-pages {
    right: -85px;
    top: 4px;
    width: 100px;
    height: 172px;
    background: #111;
    transform: rotateY(90deg);
    transform-origin: left;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.monolith .face-top {
    top: -48px;
    left: 10px;
    width: 130px;
    height: 100px;
    background: #222;
    transform: rotateX(90deg);
    transform-origin: bottom;
}

/* --- ?怨쀫선??諭€??????類ㅼ벥 --- */
.tier-IRON {
    --base: #1a1c1e;
    --mid: #3a3f44;
    --shine: #71797e;
    --num: #000;
    --glow: rgba(255, 255, 255, 0.05);
}

.tier-BRONZE {
    --base: #3d1a0a;
    --mid: #8d4a1e;
    --shine: #d98c5f;
    --num: #2d1205;
    --glow: rgba(217, 140, 95, 0.1);
}

.tier-SILVER {
    --base: #2c2c2c;
    --mid: #888;
    --shine: #fff;
    --num: #1a1a1a;
    --glow: rgba(255, 255, 255, 0.15);
}

.tier-GOLD {
    --base: #5e3b00;
    --mid: #d4af37;
    --shine: #fff9c4;
    --num: #4a2d00;
    --glow: rgba(255, 215, 0, 0.3);
}

.tier-GOLD .face-front {
    background: linear-gradient(135deg, #fff9c4 0%, #d4af37 30%, #8a6d3b 60%, #4a2d00 100%);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.2);
}

.tier-PLATINUM {
    --base: #333d47;
    --mid: #a3b1c6;
    --shine: #ffffff;
    --num: #0f172a;
    --glow: rgba(255, 255, 255, 0.4);
}

.tier-PLATINUM .face-front {
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 40%, #94a3b8 70%, #475569 100%);
}

.tier-PLATINUM .face-front::after {
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%);
    animation: shine-sweep 2s infinite linear;
}

.tier-DIAMOND .monolith {
    transform: rotateY(-30deg) rotateX(10deg);
}

.tier-DIAMOND .face-front {
    background: rgba(255, 255, 255, 0.15);
    background: rgba(30, 30, 40, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2), 0 0 40px rgba(0, 210, 255, 0.3);
}

.tier-DIAMOND .face-pages,
.tier-DIAMOND .face-top {
    background: rgba(255, 255, 255, 0.1);
    background: rgba(30, 30, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tier-DIAMOND .numeral {
    color: #fff;
    text-shadow: 0 0 20px #00d2ff, 0 0 40px #fff;
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.5));
}

.tier-GOD .face-front {
    background: #000;
    border: 2px solid #a855f7;
    box-shadow: inset 0 0 25px #a855f7, 0 0 40px rgba(168, 85, 247, 0.6);
}

.tier-GOD .numeral {
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 40px #7c3aed;
    animation: neon-flicker 3s infinite;
}

.tier-GOD .face-pages,
.tier-GOD .face-top {
    background: #050505;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.tier-GOD .bolt {
    background: #a855f7;
    box-shadow: 0 0 10px #a855f7;
}

/* --- ?袁ⓦ늺 ???????????--- */
.monolith .face-front {
    inset: 0;
    background: linear-gradient(135deg, var(--shine) 0%, var(--mid) 40%, var(--base) 100%);
    border-radius: 4px;
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 15px 15px 35px rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 獄쏆꼷沅쀦꽴??醫딅빍筌롫뗄???*/
.monolith .face-front::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.2) 50%, transparent 55%);
    transform: rotate(-20deg);
    pointer-events: none;
    animation: shine-sweep 5s infinite linear;
}

@keyframes shine-sweep {
    0% {
        transform: translateX(-40%) rotate(-20deg);
    }

    20% {
        transform: translateX(40%) rotate(-20deg);
    }

    100% {
        transform: translateX(40%) rotate(-20deg);
    }
}

@keyframes neon-flicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.7;
    }
}

/* 嚥≪뮆??*/
.monolith .numeral {
    font-size: 55px;
    font-weight: 900;
    color: var(--num);
    letter-spacing: 6px;
    z-index: 105;
    text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.1), 2px 2px 5px rgba(0, 0, 0, 1);
    filter: contrast(1.5);
    user-select: none;
}

/* 癰귥눛??*/
.monolith .bolt {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 35%, var(--shine), #000);
    border-radius: 50%;
    box-shadow: 2px 2px 5px #000;
    z-index: 102;
}

.monolith .b-tl {
    top: 18px;
    left: 18px;
}

.monolith .b-tr {
    top: 18px;
    right: 18px;
}

.monolith .b-bl {
    bottom: 18px;
    left: 18px;
}

.monolith .b-br {
    bottom: 18px;
    right: 18px;
}

/* 獄쏅뗀???袁㏉굝 */
.rank-unit .shadow {
    position: absolute;
    bottom: 15px;
    width: 200px;
    height: 50px;
    background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
    filter: blur(30px);
    border-radius: 50%;
    transform: rotateX(85deg);
    z-index: 0;
}

/* =========================================
   [UI FINAL POLISH: HEADER RESIZE & ALIGN]
   ========================================= */
.icon-btn-notif,
.icon-btn-gear {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
}

.bell-svg-icon,
.gear-svg-icon {
    width: 18px !important;
    height: 18px !important;
}


/* =========================================
   3D STAT CAROUSEL (Replaces Max Floor)
   ========================================= */
.stat-carousel-container {
    perspective: 1000px;
    width: 100%;
    height: 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative;
    /* [Perf] touch-action: none → passive:true touchmove 가능, 브라우저 스크롤 최적화 */
    touch-action: none;
    margin-top: -2vh;
}

.stat-carousel-track {
    will-change: transform;
    transform: translateZ(0);
    position: relative;
    width: 14rem;
    height: 14rem;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Base style for each card, inheriting from the original floor-circle-divine */
.stat-card {
    will-change: transform;
    transform: translateZ(0);
    position: absolute;
    width: 14rem;
    height: 14rem;
    /* User requested fully transparent background */
    background: transparent;
    background: rgba(30, 30, 40, 0.4);
    /* 0.95 -> 0.4: Changed to make it less dark and more transparent */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(220, 164, 80, 0.8);
    /* Slightly more transparent gold */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        /* Much softer outer drop shadow */
        inset 0 0 40px rgba(255, 255, 255, 0.2),
        /* Stronger clean white inner glow */
        0 0 20px rgba(220, 164, 80, 0.2);
    /* overflow: hidden; Removed so pseudo-element rings can bleed out */
    /* 3D Transform defaults */
    /* [최적화] transform 제거: JS Lerp가 이미 부드럽게 처리하므로 CSS transition과 충돌 방지 */
    transition: opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    opacity: 0.6;
    /* Slightly more visible inactive state */
    /* Remove brightness/grayscale muddiness, just rely on opacity and natural blur */
    /* [Perf] filter: drop-shadow → box-shadow로 통합 (합성 비용 제거) */
    pointer-events: none;
    /* Inactive cards don't block clicks */
    container-type: inline-size;
    /* Enable container queries for dynamic font sizing */
}

/* Gradient shine for all cards */
.stat-card-gradient {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(212, 175, 55, 0.25), transparent);
    border-radius: 7rem 7rem 0 0;
    /* Ensures background gradient stays within the circle */
    pointer-events: none;
}

/* Solar Flare passing across the Gold Border */
.stat-card-border-flare {
    position: absolute;
    /* Expand by 3px on all sides to cover the parent's 3px border exactly */
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    /* Light sweep gradient - highly pronounced glow */
    background: linear-gradient(105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.4) 45%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.4) 55%,
            transparent 70%);
    background-size: 200% 200%;
    background-position: 200% 0;
    /* Start far right */
    animation: gold-shine-sweep 4s infinite linear;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: screen;
    /* The magic! Mask everything EXCEPT the outer 4 pixels to only show the sweep on the border */
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), black calc(100% - 3px));
    mask: radial-gradient(closest-side, transparent calc(100% - 4px), black calc(100% - 3px));
}

@keyframes gold-shine-sweep {
    0% {
        background-position: 200% 0;
    }

    30% {
        background-position: -100% 0;
    }

    /* Speed of sweep: takes 30% of keyframe */
    100% {
        background-position: -100% 0;
    }

    /* Wait for the remaining 70% before sweeping again */
}

/* ACTIVE State when a card is in front */
.stat-card.active {
    opacity: 1;
    filter: brightness(1) grayscale(0%);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.8),
        inset 0 0 40px rgba(255, 255, 255, 0.2),
        0 0 35px rgba(255, 215, 0, 0.7);
    border-color: var(--neon-gold);
    pointer-events: auto;
    /* Active card can be clicked/dragged */
}

/* Content inside the card */
.stat-card-label {
    /* Absolute positioning ensures all labels sit at the exact same vertical position */
    position: absolute;
    top: 3.0rem;
    width: 100%;
    /* Enhanced Gold Text Styling */
    background: linear-gradient(to bottom, #fff7c0 0%, #feca45 50%, #d89614 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--title-font, 'Black Han Sans', sans-serif);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    z-index: 1;
    /* Removed -webkit-text-stroke as it breaks anti-aliasing with background-clip: text */
    /* [Perf] 4× drop-shadow 아웃라인 → text-stroke로 대체 (6→2개 shadow) */
    -webkit-text-stroke: 1.5px #4e342e;
    paint-order: stroke fill;
    filter:
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(220, 164, 80, 0.6));
    text-align: center;
}

.stat-card-value {
    /* Enhanced Glassy White Typography - More Saturated Ice Blue */
    background: linear-gradient(135deg, #ffffff 0%, #bce0fb 50%, #7dc5f8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Dynamically scales text so 6 digits (999,999) fit perfectly inside the 14rem container */
    font-size: min(4.4rem, 20cqi);
    position: absolute;
    top: 5.2rem;
    left: 0;
    right: 0;
    width: 100%;
    white-space: nowrap;
    padding: 0 10px;
    font-weight: 900;
    line-height: 1.1;
    z-index: 1;
    font-family: var(--number-font, 'Pretendard', sans-serif);
    /* [Perf] 4× drop-shadow 아웃라인 → text-stroke로 대체 (6→2개 shadow) */
    -webkit-text-stroke: 1.5px #4e342e;
    paint-order: stroke fill;
    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    text-align: center;
    margin: 0;
}

/* Extracted text style for countdowns */
.text-tier-style {
    color: #fff;
    font-family: var(--number-font, 'Pretendard', sans-serif);
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    text-shadow:
        1px 1px 0 #4e342e, -1px -1px 0 #4e342e,
        1px -1px 0 #4e342e, -1px 1px 0 #4e342e,
        0 3px 6px rgba(0, 0, 0, 0.6);
}

/* Specific Font Size Overrides per User Request */
#carousel-max-floor {
    font-size: 5.5rem;
    /* Bigger for max floor */
}

/* The tier icon fallback text (if image fails) or if text is injected */
#carousel-tier-icon,
#carousel-global-rank {
    font-size: 3.2rem;
    /* Smaller for tier and global rank */
    white-space: pre-wrap;
    /* Allow wrapping if text is too long for these smaller sizes */
    line-height: 1.2;
}

#carousel-local-rank {
    font-size: 2.8rem;
    /* Even smaller for local rank to fit long city names nicely on two lines */
    white-space: pre-wrap;
    line-height: 1.2;
}

#carousel-top-subject {
    font-size: 3.8rem;
    /* Slightly smaller for subject to fit nicely */
}

#carousel-win-streak {
    font-size: 3.8rem;
    /* Keep these balanced */
}

/* highest score (#carousel-high-score) retains the min(4.4rem, 20cqi) dynamic sizing */

/* Badge Icons for Tiers/Categories */
.stat-badge-icon {
    width: 50px;
    height: 50px;
    margin-top: 2.5rem;
    /* Pulled downward symmetrically */
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    z-index: 1;
}

/* Keep rings attached only to the active container, not duplicated per card to save DOM performance */
/* We will move the rings outside the cards, floating behind the active spot */
.carousel-ring-wrapper {
    position: absolute;
    width: 14rem;
    height: 14rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

/* Profile Avatar 3D Border Upgrade */
.profile-avatar-wrapper {
    position: relative;
    z-index: 10;
}

.profile-avatar-wrapper::after {
    content: '';
    position: absolute;
    inset: -1px;
    /* Overlaps nicely */
    border-radius: 50%;
    /* 3D Golden amber border */
    border: 3px solid #dca450;

    /* Complex 3D Box Shadow for Premium Feel */
    /* 1. Inner white highlight top 
       2. Inner black shadow bottom
       3. Outer gold glow
       4. Outer black drop shadow */
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.7),
        0 4px 10px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(220, 164, 80, 0.5);
    pointer-events: none;
    /* Let clicks pass to the avatar or edit button underneath */
    z-index: 5;
    background: transparent;
}

/* Custom Parchment Slider Styles */
input[type=range].parchment-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    /* Set height to match thumb + padding to avoid clipping */
    background: transparent;
    outline: none;
    margin: 5px 0;
    cursor: pointer;
    vertical-align: middle;
}

/* Webkit Track */
input[type=range].parchment-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    /* Fixed track height */
    cursor: pointer;
    background: #e2d7b5;
    /* Much lighter parchment tone */
    border-radius: 4px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        /* Debossed effect */
        0 1px 1px rgba(255, 255, 255, 0.6);
    /* Highlight for "???" feel */
    border: none;
}

/* Webkit Thumb */
input[type=range].parchment-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    /* Smaller thumb */
    width: 20px;
    border-radius: 50%;
    background-color: #d4cda7;
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at 35% 35%, #f5f1e0 0%, #d4cb97 100%);
    border: 1.5px solid #b48a4d;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.6),
        inset 0 0 6px rgba(139, 94, 60, 0.3),
        inset 0 2px 2px rgba(255, 255, 255, 0.5);
    /* Glassy shine */
    cursor: pointer;
    /* Precise centering calculation: (thumb_height - track_height) / 2 = (28 - 8) / 2 = 10 */
    margin-top: -6px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type=range].parchment-slider:active::-webkit-slider-thumb {
    transform: scale(0.95);
}

/* Firefox Track */
input[type=range].parchment-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #e2d7b5;
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Firefox Thumb */
input[type=range].parchment-slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #d4cda7;
    border: 1.5px solid #b48a4d;
    background-image: radial-gradient(circle at 35% 35%, #f5f1e0 0%, #d4cb97 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* BGM Dynamic Icon Styles (from bgm癰귥눖??html) */
.icon-wrapper-bgm {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.neon-music-dynamic {
    font-size: 24px !important;
    color: #b48a4d;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
    transition: color 0.3s, filter 0.3s, transform 0.2s;
    user-select: none;
    cursor: pointer;
}


.spinning-music {
    animation: music-spin-ani linear infinite;
}

@keyframes music-spin-ani {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.muted-bgm .neon-music-dynamic {
    color: rgba(78, 52, 46, 0.4) !important;
    filter: none !important;
}

/* Haptic/Vibration Icon Styles */
@keyframes vibrate-ani {
    0% {
        transform: translate(0);
    }

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

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

    60% {
        transform: translate(1px, 1px);
    }

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

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

.vibrate-active .neon-haptic-body {
    animation: vibrate-ani 0.15s linear infinite;
}

.haptic-waves {
    transition: opacity 0.3s ease;
}

.haptics-on .haptic-waves {
    opacity: 0.8 !important;
}

.haptics-off .haptic-waves {
    opacity: 0.1 !important;
}

.haptics-off .neon-haptic-icon {
    color: rgba(78, 52, 46, 0.4) !important;
    filter: none !important;
}

.neon-haptic-icon {
    color: #b48a4d;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
    transition: all 0.3s ease;
}

.neon-haptic-body {
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

/* Screen Shake Icon Styles */
@keyframes screen-shake-ani {
    0% {
        transform: translate(0.5px, 0.5px) rotate(0deg);
    }

    10% {
        transform: translate(-0.5px, -1px) rotate(-0.5deg);
    }

    20% {
        transform: translate(-1.5px, 0px) rotate(0.5deg);
    }

    30% {
        transform: translate(1.5px, 1px) rotate(0deg);
    }

    40% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }

    50% {
        transform: translate(-0.5px, 1px) rotate(-0.5deg);
    }

    60% {
        transform: translate(-1.5px, 0.5px) rotate(0deg);
    }

    70% {
        transform: translate(1.5px, 0.5px) rotate(-0.5deg);
    }

    80% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }

    90% {
        transform: translate(0.5px, 1px) rotate(0deg);
    }

    100% {
        transform: translate(0.5px, -1px) rotate(-0.5deg);
    }
}

.shake-active .neon-haptic-body {
    animation: screen-shake-ani 0.2s linear infinite;
}

.shake-lines {
    transition: opacity 0.3s ease;
}

.shake-on .shake-lines {
    opacity: 0.8 !important;
}

.shake-off .shake-lines {
    opacity: 0.1 !important;
}

.shake-off .neon-haptic-icon {
    color: rgba(78, 52, 46, 0.4) !important;
    filter: none !important;
}

/* ==== Settings Icon Animations ==== */
.neon-music-dynamic {
    color: #b48a4d;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.neon-sfx-dynamic {
    width: 28px;
    height: 28px;
    color: #b48a4d;
    filter: drop-shadow(0 0 3px rgba(180, 138, 77, 0.5));
}

.icon-wrapper-bgm.muted-bgm .neon-music-dynamic,
.icon-wrapper-bgm.muted-bgm .neon-sfx-dynamic {
    color: #5d4037;
    /* Darker brown for visibility */
    filter: grayscale(0.5) opacity(0.8);
    /* Less faded */
}

.icon-wrapper-bgm.muted-bgm .neon-music-dynamic:hover,
.icon-wrapper-bgm.muted-bgm .neon-sfx-dynamic:hover {
    color: #5d4037 !important;
    filter: grayscale(0.5) opacity(0.8) !important;
    cursor: pointer;
}


.sfx-wave-1,
.sfx-wave-2 {
    transition: opacity 0.2s ease;
}

/* Dancing Music Note Animation */
@keyframes music-dance {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(var(--bounce, 0)) rotate(var(--angle, 0deg)) scale(1.05);
    }

    50% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    75% {
        transform: translateY(var(--bounce, 0)) rotate(calc(-1 * var(--angle, 0deg))) scale(1.05);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

.music-note-animate {
    display: inline-block;
    transform-origin: bottom center;
}

.music-note-animate.active {
    animation: music-dance var(--duration, 1s) infinite ease-in-out;
}

/* [NEW] Bottom Sheet Animation for Relax Config Modal */
@keyframes slideUpBounce {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    60% {
        transform: translateY(-3%);
        opacity: 1;
    }

    80% {
        transform: translateY(1%);
        opacity: 1;
    }

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

/* [NEW] 10???????苑?Rest Area) ?紐껋삏筌왖€??????*/
.ui-blur-hide {
    filter: blur(0px) brightness(0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.8s ease-in-out;
}

/* [Fix] ?踰????異????紐??opacity)?嫄대뱶由? ?????釉붾윭 ???????*/
.ui-blur-active {
    filter: blur(0px) brightness(0.5);
    pointer-events: none;
    transition: all 0.8s ease-in-out;
}

/* [Fix] transition must live on the BASE element (not just the class) so it persists when class is removed */
#game-background,
#game-background-next {
    transform: scale(1.0);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        filter 1.2s ease-in-out,
        opacity 1.2s ease-in-out;
}

.bg-zoom-transition {
    transform: scale(1.15);
    filter: blur(0px) brightness(0.6);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1),
        filter 1s ease-in-out;
}

/* =========================================
   [MODAL OVERLAY] - Leaderboard & General Popups
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    background: rgba(30, 30, 40, 0.95);
    z-index: 20000;
    display: none;
    /* JS sets display:flex to show */
    justify-content: center;
    align-items: center;
}

/* =========================================
   [RETRO TERMINAL FONT - STATUS MESSAGES]
   ========================================= */
#duel-msg-text,
#duel-turn-indicator,
#game-msg-text,
.stacked-msg {
    font-family: 'DOSGothic', monospace !important;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000 !important;
    letter-spacing: 1px;
    font-weight: bold;
}

/* =========================================
   [DUEL BUZZER VISUAL FEEDBACK]
   Red/Blue Flash and Pulse for identifying turn owners
   ========================================= */

/* Player (Blue) */
/* Player (Blue) */
@keyframes buzzerFlashBlue {
    0% {
        box-shadow: inset 0 0 0 0 rgba(0, 229, 255, 0);
        background: rgba(0, 229, 255, 0);
    }

    15% {
        box-shadow: inset 0 0 30px 10px rgba(0, 229, 255, 0.4);
        background: rgba(0, 229, 255, 0.25);
    }

    100% {
        box-shadow: inset 0 0 15px 5px rgba(0, 229, 255, 0.15);
        background: rgba(0, 229, 255, 0.1);
    }
}

@keyframes buzzerPulseBlue {
    0% {
        box-shadow: none;
        background: rgba(0, 229, 255, 0);
    }

    25% {
        box-shadow: inset 0 0 22px 7px rgba(0, 229, 255, 0.28);
        background: rgba(0, 229, 255, 0.18);
    }

    50% {
        box-shadow: inset 0 0 48px 20px rgba(0, 229, 255, 0.65);
        background: rgba(0, 229, 255, 0.48);
    }

    75% {
        box-shadow: inset 0 0 22px 7px rgba(0, 229, 255, 0.28);
        background: rgba(0, 229, 255, 0.18);
    }

    100% {
        box-shadow: none;
        background: rgba(0, 229, 255, 0);
    }
}

.buzzer-flash-blue {
    animation: buzzerFlashBlue 0.3s ease-out forwards !important;
}

.buzzer-active-blue {
    animation: buzzerPulseBlue 1.6s linear infinite !important;
}

/* Bot/Opponent (Red) */
@keyframes buzzerFlashRed {
    0% {
        box-shadow: inset 0 0 0 0 rgba(255, 0, 85, 0);
        background: rgba(255, 0, 85, 0);
    }

    15% {
        box-shadow: inset 0 0 30px 10px rgba(255, 0, 85, 0.4);
        background: rgba(255, 0, 85, 0.25);
    }

    100% {
        box-shadow: inset 0 0 15px 5px rgba(255, 0, 85, 0.15);
        background: rgba(255, 0, 85, 0.1);
    }
}

@keyframes buzzerPulseRed {
    0% {
        box-shadow: none;
        background: rgba(255, 0, 85, 0);
    }

    25% {
        box-shadow: inset 0 0 22px 7px rgba(255, 0, 85, 0.28);
        background: rgba(255, 0, 85, 0.18);
    }

    50% {
        box-shadow: inset 0 0 48px 20px rgba(255, 0, 85, 0.65);
        background: rgba(255, 0, 85, 0.48);
    }

    75% {
        box-shadow: inset 0 0 22px 7px rgba(255, 0, 85, 0.28);
        background: rgba(255, 0, 85, 0.18);
    }

    100% {
        box-shadow: none;
        background: rgba(255, 0, 85, 0);
    }
}

.buzzer-flash-red {
    animation: buzzerFlashRed 0.3s ease-out forwards !important;
}

.buzzer-active-red {
    animation: buzzerPulseRed 1.6s linear infinite !important;
}


/* =========================================
   [NEW] 3D STAT CAROUSEL PERFORMANCE OPTIMIZATIONS
   ========================================= */
.stat-carousel-track {
    will-change: transform;
    transform: translateZ(0);
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.stat-card {
    will-change: transform;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Dynamic Degradation: Remove heavy filters when user is actively dragging */
.stat-carousel-container.is-dragging .stat-card {
    will-change: transform;
    transform: translateZ(0);
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* [최적화] 자동회전/드래그 중 gold-shine-sweep 일시정지 (GPU 부하 경감) */
.stat-carousel-container.is-rotating .stat-card-border-flare {
    animation-play-state: paused;
}

.stat-carousel-container.is-dragging .stat-card * {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: rgba(30, 30, 40, 0.95);
}

@keyframes dark-pulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

/* [NEW] HEADER EXP BAR (Parchment Styled) */
.exp-parchment-container {
    width: 100%;
    height: 22px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
    background: #463420;
}

.exp-parchment-container.parchment-theme-active {
    background: url('../assets/imgs/tileable_wood.webp') repeat !important;
    background-size: 80px 80px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 3px 6px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(220, 164, 80, 0.4) !important;
}

.exp-parchment-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 55%;
    background: linear-gradient(90deg, rgba(220, 164, 80, 0.4), rgba(220, 164, 80, 0.8));
    border-right: 2px solid rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 8px rgba(220, 164, 80, 0.6);
    z-index: 1;
    transition: width 0.5s ease-out;
}

.exp-parchment-text {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size: 10.5px;
    font-weight: 900;
    color: #4e342e;
    /* dark brown to match parchment */
    text-shadow: 0 1px 1.5px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
}



/* =================================================================
   LEVEL UP OVERHAUL ANIMATIONS
   ================================================================= */

/* ========== Level Up Celebration Effects ========== */
.lvlup-screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4), transparent 70%);
    z-index: 50010;
    pointer-events: none;
    opacity: 0;
}

.lvlup-screen-flash.active {
    animation: lvlupFlashPulse 0.4s ease-out forwards;
}

@keyframes lvlupFlashPulse {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.lvlup-shockwave {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 200px;
    height: 200px;
    border: 3px solid rgba(220, 164, 80, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 50011;
    opacity: 0;
}

.lvlup-shockwave.active {
    animation: lvlupShockwave 0.8s ease-out forwards;
}

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

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

.lvlup-light-rays {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 50010;
    pointer-events: none;
    opacity: 0;
}

.lvlup-light-rays.show {
    animation: lvlupRaysAppear 0.5s ease-out forwards;
}

.lvlup-light-rays.fadeout {
    animation: lvlupRaysFade 0.8s ease-in forwards;
}

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

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

@keyframes lvlupRaysFade {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5)
    }
}

.lvlup-light-rays-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: lvlupRaysRotate 25s linear infinite;
}

@keyframes lvlupRaysRotate {
    0% {
        transform: rotate(0deg) scale(0.95);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    100% {
        transform: rotate(360deg) scale(0.95);
    }
}

.lvlup-light-rays .ray {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 3px;
    height: 200px;
    background: linear-gradient(to top, rgba(220, 164, 80, 0.6), transparent);
    transform-origin: bottom center;
    border-radius: 2px;
}

#lvlup-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50012;
    pointer-events: none;
}

.lvlup-badge-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 50013;
    text-align: center;
    pointer-events: none;
}

.lvlup-badge-container.show {
    animation: lvlupBadgeSlam 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.lvlup-badge-container.fadeout {
    animation: lvlupBadgeFade 0.6s ease-in forwards;
}

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

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

    60% {
        transform: translate(-50%, -50%) scale(1.05);
    }

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

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

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

.lvlup-badge {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 215, 0, 0.3) 0%, rgba(180, 138, 77, 0.15) 40%, transparent 70%);
    border: 3px solid #dca450;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 0 40px rgba(220, 164, 80, 0.4), 0 0 80px rgba(220, 164, 80, 0.15), inset 0 0 30px rgba(220, 164, 80, 0.1);
}

.lvlup-badge::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(220, 164, 80, 0.3);
    border-radius: 50%;
    animation: lvlupRingPulse 1.5s ease-in-out infinite;
}

@keyframes lvlupRingPulse {

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

    50% {
        transform: scale(1.08);
        opacity: 1
    }
}

.lvlup-badge-label {
    font-size: 12px;
    color: #dca450;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.lvlup-badge-number {
    font-family: var(--number-font, 'Orbitron');
    font-size: 52px;
    font-weight: 900;
    background: linear-gradient(180deg, #fff4d6 0%, #fbbf24 50%, #b48a4d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(220, 164, 80, 0.6));
    line-height: 1;
}

.lvlup-badge-title {
    font-size: 14px;
    color: #fff;
    font-weight: 800;
    margin-top: 6px;
    text-shadow: 0 0 10px rgba(220, 164, 80, 0.5);
}

@keyframes lvlupScreenShake {

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

    10% {
        transform: translateX(-4px) translateY(2px);
    }

    30% {
        transform: translateX(3px) translateY(-2px);
    }

    50% {
        transform: translateX(-2px) translateY(1px);
    }

    70% {
        transform: translateX(2px);
    }
}


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

    15% {
        background: rgba(255, 230, 100, 0.7);
    }

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

@keyframes lvl-slam {
    0% {
        transform: scale(3.5);
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }

    40% {
        transform: scale(0.9);
        opacity: 1;
        text-shadow: 0 0 20px #ffb300;
    }

    60% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 2px 5px rgba(255, 179, 0, 0.6);
    }
}

@keyframes lvl-shake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }

    20% {
        transform: translate(-3px, 2px) rotate(-1deg);
    }

    40% {
        transform: translate(3px, -2px) rotate(1deg);
    }

    60% {
        transform: translate(-2px, -2px) rotate(-0.5deg);
    }

    80% {
        transform: translate(2px, 2px) rotate(0.5deg);
    }
}

@keyframes lvl-slide-up {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

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

/* Modifiers for the Level Up Modal */
.lvl-overlay-active {
    animation: lvl-flash 0.8s ease-out forwards;
}

.lvl-slam-active {
    animation: lvl-slam 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.lvl-shake-active {
    animation: lvl-shake 0.4s ease-in-out;
}

.lvl-reward-item {
    opacity: 0;
    /* Hidden initially */
    transform: translateY(30px);
}

.lvl-reward-item.show {
    animation: lvl-slide-up 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- Level Up Modal v2: 양피지 내부 --- */
.lvl-parchment {
    background: linear-gradient(180deg, #f5e6c8 0%, #ede0c4 50%, #e8d8b8 100%);
    border-radius: 16px;
    padding: 16px 14px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.lvl-parchment::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png");
    opacity: 0.08;
    pointer-events: none;
}

.lvl-level-box {
    background: rgba(60, 40, 20, 0.85);
    border: 1px solid rgba(180, 138, 77, 0.5);
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    margin-bottom: 15px;
}

.lvl-level-sub {
    font-size: 14px;
    font-weight: 700;
    color: #d4b078;
    margin-bottom: 5px;
}

.lvl-level-num {
    font-family: var(--number-font, 'Orbitron');
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #ffb300;
    white-space: nowrap;
}

.lvl-reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(180, 138, 77, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(30px);
}

.lvl-reward-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lvl-reward-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lvl-reward-icon svg {
    width: 100%;
    height: 100%;
}

.lvl-reward-text {
    font-size: 12px;
    color: #3e2c1a;
    font-weight: bold;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lvl-reward-sub {
    font-size: 10px;
    color: #8a7560;
    font-weight: 600;
}

.lvl-dismiss-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 12px;
    background: linear-gradient(45deg, var(--neon-gold, #ffd700), #ffaa00);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    min-height: 50px;
}

/* ==============================
   자판기 골렘 & 배낭 모달 시스템 (Vending Golem & Backpack)
   ============================== */

/* -- 자판기 골렘 레이어 -- */
/* ==============================
           레이어 1: 오버레이
           ============================== */
:root {
    --p-base: #d4cda7;
    --p-light: #f5f1e0;
    --p-ink: #8b5e3c;
    --p-gold: #b48a4d;
    --p-dark: #4e342e;
}

#item-shop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

#item-shop-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ==============================
           레이어 2: 외부 프레임 (다크 + 금테)
           loc-modal-frame 패턴
           ============================== */
#item-shop-frame {
    position: relative;
    width: 88%;
    max-width: 380px;
    max-height: 90vh;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.71) 0%, rgba(15, 15, 20, 0.73) 100%);
    border-radius: 28px;
    border: 1.5px solid rgba(251, 191, 36, 0.4);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        inset 0 0 20px rgba(251, 191, 36, 0.05),
        0 0 15px rgba(251, 191, 36, 0.2);
    padding: 28px 20px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(28px) scale(0.97);
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}

#item-shop-overlay.active #item-shop-frame {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 상단 금색 장식 라인 */
.header-ornament {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

/* 미세한 양피지 텍스처 (다크 위에 살짝) */
.frame-parchment-texture {
    position: absolute;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png");
    opacity: 0.03;
    pointer-events: none;
}

/* 유리 광택 */
.frame-glossy {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* ==============================
           헤더 (다크 영역 위)
           ============================== */
.shop-header {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 32px;
    /* 닫기 버튼과 겹치지 않도록 여백 확보 */
}


.shop-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 0;
    /* flex 자식의 영역 침범을 막음 */
    transform: translateY(-4px);
    /* 이미지가 내려간 만큼 텍스트 위치 균형 조정 */
}

.shop-title {
    margin: 0;
    font-size: 1.3rem;
    /* 반응형에 유리하도록 약간 축소 */
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(to bottom, #fff4d6 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    white-space: nowrap;
}

.shop-title-underline {
    margin: 6px 0 0 0;
    width: 40px;
    height: 2px;
    background: #fbbf24;
    border-radius: 1px;
    opacity: 0.6;
}

.shop-subtitle {
    font-size: 11px;
    color: rgba(251, 191, 36, 0.35);
    margin-top: 6px;
    word-break: keep-all;
    line-height: 1.2;
}

/* 닫기 버튼 */
.shop-close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 1.5px;
    background: rgba(180, 138, 77, 0.1);
    border: 1.5px solid #b48a4d;
    border-radius: 50%;
    color: #b48a4d;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.shop-close-btn:hover {
    background: #b48a4d;
    color: #fff;
    box-shadow: 0 0 12px rgba(180, 138, 77, 0.6);
    transform: rotate(90deg) scale(1.1);
}

/* ==============================
           레이어 3: 양피지 내부 프레임
           parchment-frame 패턴
           ============================== */
.golem-parchment-inner {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 12px;
    background-color: var(--p-base);
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, var(--p-light) 0%, var(--p-base) 100%);
    border: 1px solid var(--p-gold);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 0 10px rgba(139, 94, 60, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* 도트 그리드 오버레이 */
.golem-parchment-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--p-ink) 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.15;
    pointer-events: none;
}

/* 유리+그림자 */
.golem-parchment-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 양피지 내부의 콘텐츠 (z-index로 오버레이 위에) */
.parchment-content {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ==============================
           보유 재화 바 (양피지 위)
           ============================== */
.shop-currency-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(78, 52, 46, 0.08);
    border: 1px solid rgba(139, 94, 60, 0.25);
    border-radius: 10px;
}

.currency-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--p-dark);
}

.currency-item .icon {
    font-size: 16px;
}

/* 구분선 라벨 */
.shop-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--p-ink);
    letter-spacing: 2px;
    padding: 0 0 8px;
    text-align: center;
    opacity: 0.6;
}

/* ==============================
           아이템 목록 (스크롤)
           ============================== */
.shop-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(78, 52, 46, 0.3) transparent;
    padding-bottom: 4px;
}

.shop-items-list::-webkit-scrollbar {
    width: 6px;
}

.shop-items-list::-webkit-scrollbar-track {
    background: transparent;
}

.shop-items-list::-webkit-scrollbar-thumb {
    background: rgba(78, 52, 46, 0.3);
    border-radius: 10px;
}

/* ==============================
           아이템 카드 (양피지 위의 카드)
           ============================== */
.shop-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(78, 52, 46, 0.06);
    border: 1px solid rgba(139, 94, 60, 0.2);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s;
    cursor: pointer;
}

.shop-item-card:hover {
    background: rgba(78, 52, 46, 0.12);
    border-color: var(--p-gold);
}

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

.shop-item-card.sold-out {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* 아이콘 (양피지 원형 뱃지 — loc-bg-frame) */
.item-icon-wrap {
    width: 44px;
    height: 44px;
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--p-gold);
    background-color: var(--p-base);
    background-image:
        url("https://www.transparenttextures.com/patterns/old-map.png"),
        radial-gradient(circle at center, var(--p-light) 0%, var(--p-base) 100%);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 0 6px rgba(139, 94, 60, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}

.item-icon-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    border-radius: 50%;
}

/* 아이템 정보 */
.item-info {
    flex: 1;
    min-width: 0;
}

.item-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--p-dark);
    margin-bottom: 2px;
}

.item-desc {
    font-size: 11px;
    color: var(--p-ink);
    opacity: 0.65;
    line-height: 1.4;
}

.item-stock {
    font-size: 10px;
    color: var(--p-ink);
    opacity: 0.45;
    margin-top: 1px;
}

.item-owned {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: var(--p-dark);
    background: rgba(78, 52, 46, 0.1);
    border: 1px solid rgba(139, 94, 60, 0.25);
    border-radius: 6px;
    padding: 2px 8px;
    margin-top: 3px;
}

.item-owned.has-stock {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.08);
    border-color: rgba(46, 125, 50, 0.25);
}

/* 구매 영역 */
.item-buy-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.item-price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 900;
    color: var(--p-dark);
}

.item-buy-btn {
    background: linear-gradient(135deg, #6b5020, #8a6a30);
    border: 1px solid var(--p-gold);
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #fff4d6;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.item-buy-btn:hover {
    background: linear-gradient(135deg, #7d6028, #a07838);
    transform: scale(1.04);
}

.item-buy-btn:active {
    transform: scale(0.97);
}

.item-buy-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* 다이아 구매 버튼 (황금색) */
.diamond-purchase-btn {
    padding: 4px 12px;
    font-size: 12px;
    background: linear-gradient(180deg, #e8b830, #c99a20);
    border: 1px solid #f0cc50;
    color: #3a2800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.diamond-purchase-btn:hover {
    background: linear-gradient(180deg, #f0c838, #d4a828);
    box-shadow: 0 3px 10px rgba(232, 184, 48, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 다이아 보유량 칩 (pill) */
.diamond-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2a2215, #3d3020);
    border: 1px solid rgba(180, 138, 77, 0.4);
    border-radius: 20px;
    padding: 5px 14px 5px 6px;
    min-width: 100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.diamond-pill img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(251, 191, 36, 0.4));
}

.diamond-pill span {
    font-size: 15px;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* ==============================
           다이아몬드 상점 모달
           ============================== */
#diamond-shop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#diamond-shop-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#diamond-shop-frame {
    position: relative;
    width: 88%;
    max-width: 360px;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.71), rgba(15, 15, 20, 0.73));
    border-radius: 28px;
    border: 1.5px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(251, 191, 36, 0.05), 0 0 15px rgba(251, 191, 36, 0.2);
    padding: 28px 20px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#diamond-shop-overlay.active #diamond-shop-frame {
    transform: translateY(0);
}

.ds-ornament {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

.ds-texture {
    position: absolute;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png");
    opacity: 0.03;
    pointer-events: none;
}

.ds-header {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(to bottom, #fff4d6, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.ds-title-line {
    margin: 8px auto 0;
    width: 80px;
    height: 2px;
    background: #fbbf24;
    border-radius: 1px;
    opacity: 0.8;
}

.ds-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 1.5px;
    background: rgba(180, 138, 77, 0.1);
    border: 1.5px solid #b48a4d;
    border-radius: 50%;
    color: #b48a4d;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ds-close:hover {
    background: #b48a4d;
    color: #fff;
    box-shadow: 0 0 12px rgba(180, 138, 77, 0.6);
    transform: rotate(90deg) scale(1.1);
}

.ds-parchment {
    position: relative;
    border-radius: 12px;
    background-color: var(--p-base, #d4cda7);
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png"), radial-gradient(circle at center, #f5f1e0, #d4cda7);
    border: 1px solid #b48a4d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(139, 94, 60, 0.2);
    overflow: hidden;
    padding: 16px;
}

.ds-parchment::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#8b5e3c 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.15;
    pointer-events: none;
}

.ds-parchment::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.ds-content {
    position: relative;
    z-index: 2;
    max-height: 74vh;      /* [Fix] 압축 후엔 대부분 한 화면에 들어오고, 아주 작은 화면만 스크롤 */
    overflow-y: auto;
    overflow-x: hidden;
}

.ds-product {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(78, 52, 46, 0.06);
    border: 1px solid rgba(139, 94, 60, 0.2);
    border-radius: 12px;
    padding: 9px 12px;   /* [Fix] 상품 6개+광고가 한 화면에 들어오도록 위아래 여백 축소 */
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.ds-product:hover {
    background: rgba(78, 52, 46, 0.12);
    border-color: #b48a4d;
}

.ds-product:active {
    transform: scale(0.98);
}

.ds-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid #b48a4d;
    background-color: #d4cda7;
    background-image: url("https://www.transparenttextures.com/patterns/old-map.png"), radial-gradient(circle at center, #f5f1e0, #d4cda7);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-info {
    flex: 1;
    min-width: 0;
}

.ds-name {
    font-size: 14px;
    font-weight: 800;
    color: #4e342e;
    margin-bottom: 2px;
    white-space: nowrap; /* [Fix] 다이아 개수가 길어도 '개'가 둘째줄로 넘어가지 않게 */
}

.ds-bonus {
    font-size: 11px;
    font-weight: 700;
    color: #d4763f;
}

.ds-price-btn {
    background: linear-gradient(135deg, #6b5020, #8a6a30);
    border: 1px solid #b48a4d;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 800;
    color: #fff4d6;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ds-price-btn:hover {
    background: linear-gradient(135deg, #7d6028, #a07838);
    transform: scale(1.04);
}

.ds-price-btn:active {
    transform: scale(0.97);
}

.ds-divider {
    height: 1px;
    margin: 12px 0;
    background: linear-gradient(90deg, transparent, rgba(139, 94, 60, 0.3), transparent);
}

.ds-ad-section {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(78, 52, 46, 0.04);
    border: 1px dashed rgba(139, 94, 60, 0.25);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ds-ad-section:hover {
    background: rgba(78, 52, 46, 0.1);
    border-color: rgba(139, 94, 60, 0.4);
}

.ds-ad-section:active {
    transform: scale(0.98);
}

.ds-ad-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1a1a1f;
    border: 1.5px solid rgba(100, 170, 240, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(60, 124, 192, 0.2);
}

.ds-ad-info {
    flex: 1;
}

.ds-ad-name {
    font-size: 13px;
    font-weight: 700;
    color: #4e342e;
}

/* ==============================
           토스트
           ============================== */
#shop-toast {
    position: fixed;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15, 12, 8, 0.97);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #fbbf24;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    text-align: center;
    z-index: 100001;
    white-space: nowrap;
}

#shop-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 전역 토스트 - shop-toast와 동일 스타일로 통일 */
#_global-toast {
    position: fixed;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15, 12, 8, 0.97);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #fbbf24;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    text-align: center;
    z-index: 100001;
    white-space: nowrap;
    max-width: 90vw;
    word-break: keep-all;
}

#_global-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}





/* Hint explanation slide-up animation */
/* Hint explanation slide-up animation */
@keyframes hintSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RANK 1 CELEBRATION STYLES
   ============================================ */
.rank1-badge-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 50002;
    pointer-events: none;
    text-align: center;
}

.rank1-badge-container.show {
    animation: rank1Slam 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

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

    60% {
        transform: translate(-50%, -50%) scale(1.05);
    }

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

.rank1-badge-container.fadeout {
    animation: rank1FadeOut 0.6s ease-in forwards;
}

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

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

.rank1-badge {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: radial-gradient(circle at 35% 35%, rgba(255, 215, 0, 0.3) 0%, rgba(180, 138, 77, 0.15) 40%, transparent 70%);
    border: 3px solid #dca450;
    box-shadow: 0 0 40px rgba(220, 164, 80, 0.4), 0 0 80px rgba(220, 164, 80, 0.15), inset 0 0 30px rgba(220, 164, 80, 0.1);
}

.rank1-badge::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(220, 164, 80, 0.3);
    border-radius: 50%;
    animation: rank1RingPulse 1.5s ease-in-out infinite;
}

@keyframes rank1RingPulse {

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

    50% {
        transform: scale(1.08);
        opacity: 1
    }
}

.rank1-top-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #dca450;
    position: relative;
    z-index: 2;
    margin-bottom: 2px;
}

.rank1-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 52px;
    font-weight: 900;
    background: linear-gradient(180deg, #fff4d6 0%, #fbbf24 50%, #b48a4d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(220, 164, 80, 0.6));
    line-height: 1;
    position: relative;
    z-index: 2;
}

.rank1-accent-line {
    width: 60px;
    height: 2px;
    border-radius: 1px;
    margin: 5px 0 4px;
    position: relative;
    z-index: 2;
    opacity: 0.8;
}

.rank1-accent-line.local {
    background: #4fc3f7;
    box-shadow: 0 0 8px #4fc3f7;
}

.rank1-accent-line.national {
    background: #ff6b6b;
    box-shadow: 0 0 8px #ff6b6b;
}

.rank1-scope {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    position: relative;
    z-index: 2;
}

.rank1-scope.local {
    color: #4fc3f7;
}

.rank1-scope.national {
    color: #ff6b6b;
}

.rank1-label {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 2;
    margin-top: 2px;
    text-shadow: 0 0 10px rgba(220, 164, 80, 0.5);
}

/* 충격파 */
.rank1-shockwave {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 200px;
    height: 200px;
    border: 3px solid rgba(220, 164, 80, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 50001;
    opacity: 0;
}

.rank1-shockwave.active {
    animation: rank1Shock 0.8s ease-out forwards;
}

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

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

/* 화면 플래시 */
.rank1-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4), transparent 70%);
    pointer-events: none;
    z-index: 49999;
    opacity: 0;
}

.rank1-flash.active {
    animation: rank1Flash 0.4s ease-out forwards;
}

.rank1-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    pointer-events: none;
    z-index: 49998;
    opacity: 0;
    transition: opacity 0.3s;
}

.rank1-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

@keyframes rank1Flash {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/* 빛줄기 */
.rank1-rays {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0;
}

.rank1-rays.show {
    animation: rank1RaysIn 0.5s ease-out forwards;
}

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

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

.rank1-rays.fadeout {
    animation: rank1RaysOut 0.8s ease-in forwards;
}

@keyframes rank1RaysOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5)
    }
}

.rank1-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 200px;
    background: linear-gradient(to top, rgba(220, 164, 80, 0.6), transparent);
    transform-origin: bottom center;
    border-radius: 2px;
}

@keyframes rank1ScreenShake {

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

    10% {
        transform: translateX(-4px) translateY(2px)
    }

    30% {
        transform: translateX(3px) translateY(-2px)
    }

    50% {
        transform: translateX(-2px) translateY(1px)
    }

    70% {
        transform: translateX(2px)
    }
}

/* 터치 오버레이 */
.rank1-touch-overlay {
    position: fixed;
    inset: 0;
    z-index: 55000;
    display: none;
    cursor: pointer;
}

.rank1-touch-overlay.active {
    display: block;
}

.rank1-tap-hint {
    position: fixed;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50004;
    pointer-events: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
}

.rank1-tap-hint.show {
    animation: rank1TapPulse 1.5s ease-in-out infinite;
}

@keyframes rank1TapPulse {

    0%,
    100% {
        opacity: 0.4
    }

    50% {
        opacity: 1
    }
}

#rank1-confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 50001;
    pointer-events: none;
}

/* ===== 랭크전 티어 상승 푸른색 테마 적용 ===== */
#levelup-modal {
    z-index: 100020 !important;
}

#levelup-modal.blue-theme .loc-modal-frame {
    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), inset 0 0 20px rgba(0, 229, 255, 0.08), 0 0 25px rgba(0, 229, 255, 0.3) !important;
}

#levelup-modal.blue-theme .loc-modal-title {
    background: linear-gradient(180deg, #ffffff 0%, #00e5ff 50%, #0066ff 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0, 229, 255, 0.8)) !important;
    font-family: 'Noto Serif KR', serif !important;
    font-size: 2.2rem !important;
    letter-spacing: 4px !important;
    font-weight: 900 !important;
}

#levelup-modal.blue-theme .loc-modal-title-underline {
    background: linear-gradient(90deg, transparent, #00d2ff, transparent) !important;
}

#levelup-modal.blue-theme .lvl-dismiss-btn {
    background: linear-gradient(135deg, #00d2ff, #0066ff) !important;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.4) !important;
    color: #ffffff !important;
}

/* ========== [인라인] Level Up Celebration Effects z-index overrides ========== */
.rank1-backdrop { z-index: 100010 !important; }
.lvlup-screen-flash { z-index: 100011 !important; }
.lvlup-shockwave { z-index: 100012 !important; }
.lvlup-light-rays { display: none !important; }
#lvlup-confetti-canvas { z-index: 100014 !important; }
.lvlup-badge-container { z-index: 100015 !important; }
#levelup-modal { z-index: 100020 !important; }

/* ========== Rank1 Celebration z-index (레벨업 모달 위에 표시) ========== */
#rank1-rays { display: none !important; }
.rank1-badge-container { z-index: 100025 !important; }
#rank1-flash { z-index: 100021 !important; }
#rank1-shockwave { z-index: 100022 !important; }
#rank1-confetti-canvas { z-index: 100024 !important; }
#rank1-reward-modal { z-index: 100030 !important; }

/* RP 바 끝부분 광원 하이라이트 효과 */
.rp-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 8px;
    background: rgba(255, 255, 255, 0.7);
    filter: blur(2px);
    box-shadow: 0 0 8px #ffffff;
    border-radius: 4px;
}

/* 양피지 프레임 (본 게임에서 사용하는 것과 동일, 단 랭크 카드 전용 특수 광택 효과) */
.parchment-frame.rank-card-frame::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
    pointer-events: none; z-index: 1;
}

/* 랭크업 시 카드 자체 글로우 효과 */
@keyframes rank-card-flash {
    0% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(139,94,60,0.2);
        border-color: rgba(180, 138, 77, 0.28);
    }
    15% {
        box-shadow: 0 0 25px rgba(0, 210, 255, 0.8), inset 0 0 20px rgba(0, 210, 255, 0.4);
        border-color: #00d2ff;
    }
    100% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(139,94,60,0.2);
        border-color: rgba(180, 138, 77, 0.28);
    }
}
.rank-card-glow-active {
    animation: rank-card-flash 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* 랭크업 시 카드 흔들림 효과 */
@keyframes rank-card-shake {
    0% { transform: translateY(0) scale(1); }
    10% { transform: translateY(-6px) scale(1.02); }
    20% { transform: translateY(3px) scale(0.99); }
    35% { transform: translateY(-2px) scale(1.005); }
    50% { transform: translateY(1px) scale(0.998); }
    100% { transform: translateY(0) scale(1); }
}
.rank-card-shake-active {
    animation: rank-card-shake 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

/* 랭크업 에너지 폭발 배경 아우라 */
@keyframes rank-burst-glow {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
    15% { opacity: 0.9; filter: blur(4px); }
    60% { opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; filter: blur(20px); }
}
.rank-burst-glow-effect {
    position: absolute;
    top: 50%; left: 50%;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(0, 210, 255, 0.7) 40%, rgba(0, 102, 255, 0.25) 70%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -50%);
    animation: rank-burst-glow 0.85s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

/* 별모양 반짝이 파티클 */
.rank-sparkle-particle.star {
    background: none !important;
    box-shadow: none !important;
}
.rank-sparkle-particle.star::before {
    content: '★';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-size: 12px;
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffaa00;
}

/* 랭크업 시 아이콘 팝 애니메이션 */
@keyframes rank-icon-bounce {
    0% { transform: scale(1); }
    20% { transform: scale(1.4) rotate(-8deg); filter: brightness(1.5) drop-shadow(0 0 15px rgba(0,210,255,1)); }
    50% { transform: scale(0.9) rotate(4deg); }
    75% { transform: scale(1.1) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.rank-icon-pop-active {
    display: inline-block !important;
    animation: rank-icon-bounce 0.8s cubic-bezier(0.25, 1.25, 0.5, 1.25) forwards !important;
}

/* 랭크 아이콘 뒤쪽 방사형 아우라 */
@keyframes rank-aura-fade {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    20% { opacity: 0.9; filter: blur(5px); }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; filter: blur(15px); }
}
.rank-aura-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.8) 0%, rgba(0, 102, 255, 0.3) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    animation: rank-aura-fade 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* 스파클 파티클 효과 */
.rank-sparkle-particle {
    position: absolute;
    pointer-events: none;
    z-index: 99;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00d2ff, 0 0 15px #00d2ff;
    animation: rank-sparkle-fly 0.7s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}
@keyframes rank-sparkle-fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* 랭크업 충격파 에너지 링 */
@keyframes rank-ring-expand {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 6px; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; border-width: 1px; }
}
.rank-ring-effect {
    position: absolute;
    top: 50%; left: 50%;
    width: 50px; height: 50px;
    border: 4px solid #00d2ff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    transform: translate(-50%, -50%);
    animation: rank-ring-expand 0.75s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
    box-shadow: 0 0 12px #00d2ff, inset 0 0 12px #00d2ff;
}

/* 카드 대각선 스위프 샤인 효과 */
@keyframes rank-shine-sweep {
    0% { transform: translateX(-150%) skewX(-25deg); opacity: 0; }
    20% { opacity: 0.75; }
    80% { opacity: 0.75; }
    100% { transform: translateX(150%) skewX(-25deg); opacity: 0; }
}
.rank-shine-active {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-25deg);
    animation: rank-shine-sweep 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    z-index: 5;
    pointer-events: none;
}

/* 티어 텍스트 범프 애니메이션 */
@keyframes tier-text-bump {
    0% { transform: scale(1); }
    20% { transform: scale(1.22); color: #00d2ff !important; text-shadow: 0 0 12px rgba(0, 210, 255, 0.85); }
    100% { transform: scale(1); }
}
.tier-text-bump-active {
    display: inline-block;
    animation: tier-text-bump 0.65s cubic-bezier(0.25, 1.25, 0.5, 1.25) forwards;
}

/* 로마자 3D 플립 애니메이션 */
@keyframes numeral-flip {
    0% { transform: rotateX(90deg) scale(0.4); opacity: 0; color: #ffffff; text-shadow: 0 0 10px #00d2ff; }
    45% { transform: rotateX(-20deg) scale(1.3); opacity: 0.95; color: #00d2ff; text-shadow: 0 0 20px #00d2ff, 0 0 35px #00d2ff; }
    100% { transform: rotateX(0deg) scale(1); opacity: 1; color: #4e342e; text-shadow: -1px -1px 2px rgba(255,255,255,0.1), 2px 2px 5px rgba(0,0,0,1); }
}
.numeral-flip-active {
    animation: numeral-flip 0.7s cubic-bezier(0.25, 1.35, 0.5, 1.35) forwards;
}

/* 크로스 모양 반짝이 파티클 */
.rank-sparkle-particle.cross {
    background: none !important;
    box-shadow: none !important;
}
.rank-sparkle-particle.cross::before, .rank-sparkle-particle.cross::after {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 0 5px #00d2ff, 0 0 10px #00d2ff;
    border-radius: 2px;
}
.rank-sparkle-particle.cross::before {
    top: 0; left: 35%; width: 30%; height: 100%;
}
.rank-sparkle-particle.cross::after {
    top: 35%; left: 0; width: 100%; height: 30%;
}

/* ============================================================
   랭크전 결과창 (duel-result-view) 전용 스타일
   testfile/rank_result_test.html 완성본 이식
   ============================================================ */

/* 결과창 전환 숨김 상태 */
.result-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 랭크전 보상 테이블 */
.rank-reward-row {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 8px 5px; box-sizing: border-box; border-bottom: 1px solid rgba(180,138,77,0.2);
}
.rank-reward-row:last-child { border-bottom: none; }
.rank-reward-label { font-size: 15px; color: #5d4037; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rank-reward-val { font-size: 17px; font-weight: 900; color: #4e342e; display: flex; align-items: center; gap: 5px; }

/* 다이아몬드 아이콘 */
.dia-icon { height: 18px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); vertical-align: middle; }
.dia-icon-lg { height: 22px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); vertical-align: middle; }

/* 랭크 변동 뱃지 */
.rank-change-badge {
    font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 900;
    padding: 2px 6px; border-radius: 4px; margin-left: 4px;
}
.rank-change-badge.plus { background: rgba(0, 150, 255, 0.15); color: #0077ff; }
.rank-change-badge.minus { background: rgba(255, 0, 85, 0.15); color: #ff0055; }

/* 액션 버튼 */
.btn-action {
    width: 100%; padding: 14px; font-size: 15px; font-weight: 900; text-align: center;
    border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s ease;
    font-family: 'Pretendard', sans-serif; letter-spacing: 0.5px;
}
.btn-action-next {
    background: linear-gradient(135deg, #00d2ff, #0066ff); color: #fff;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35);
}
.btn-action-next:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-action-next:active { transform: translateY(0); }

.btn-action-lobby {
    background: linear-gradient(135deg, #8b5e34, #5d4037); color: #fff;
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
    border: 1px solid rgba(139, 94, 60, 0.4);
}
.btn-action-lobby:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-action-lobby:active { transform: translateY(0); }