/* Minesweeper Ranks CSS */

/* Base Rank Text Style */
.rank-style {
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

/* Generic Coloring for Related Elements */
.level-username.rank-style,
.level-number.rank-style,
.leaderboard-lvl.rank-style,
.leaderboard-name.rank-style {
    color: var(--rank-color, #ccc);
    text-shadow: var(--rank-shadow, none);
}

/* Specific Overrides for Level Header Context */
.level-username.rank-style,
.level-number.rank-style,
.leaderboard-name.rank-style {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    animation: inherit;
    width: auto;
    display: inline-block;
}

/* Force Level Number Font Size and Alignment */
.level-number.rank-style {
    font-size: 13px !important;
    text-align: right;
}
.level-username.rank-style {
    text-align: left;
}

/* Leaderboard Fixes */
.leaderboard-lvl {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    color: var(--rank-color) !important;
}
.leaderboard-lvl.rank-style {
    display: inline;
    width: auto;
    text-align: inherit;
}
/* Ensure name gets effects too */
.leaderboard-name.rank-style {
    font-weight: bold;
}

/* XP Bar Fill Styling */
.xp-bar-fill {
    background: var(--rank-color, #00e5ff);
    box-shadow: 0 0 10px var(--rank-color, #00e5ff);
    transition: width 0.5s ease-out, background 0.3s;
}

/* Modal Isolation */
/* Prevent rank effects from affecting modal layout or scrolling */
.level-modal-body .rank-style {
    /* Ensure transforms don't cause scrollbars or layout shifts */
    transform-origin: center;
    backface-visibility: hidden;
    display: inline-block;
    width: 100%;
    /* Create stacking context and prevent layout triggers */
    transform: translateZ(0);
    will-change: transform, opacity, filter;
}
/* Ensure row height is stable */
.level-table tr {
    height: 30px;
}

/* --- TIER 0: THE VOID --- */
.tier-0 { --rank-color: #888; --rank-shadow: 0 0 2px rgba(0,0,0,0.5); opacity: 0.7; }
.rank-0 { opacity: 0.5; }

/* --- TIER I: THE CASUALTIES --- */
.tier-1 { font-weight: 500; }
.rank-1 { --rank-color: #dcb; --rank-shadow: 1px 1px 0 #543; opacity: 0.8; }
.rank-2 { --rank-color: #cdf; filter: blur(1px); animation: rank-blur 3s infinite; }
.rank-3 { --rank-color: #865; font-weight: 900; letter-spacing: -1px; }
.rank-4 { --rank-color: #d62; animation: rank-shake 4s infinite; }
.rank-5 { --rank-color: #333; --rank-shadow: 0 -2px 4px #aaa; }
.rank-6 { --rank-color: #ca8; } .rank-6:hover { animation: rank-vibrate 0.2s infinite; }
.rank-7 { --rank-color: #fd0; animation: rank-flicker 0.2s infinite; }
.rank-8 { --rank-color: #0ff; --rank-shadow: 0 0 1px #fff; letter-spacing: 1px; }
.rank-9 { --rank-color: #e5b07e; font-weight: bold; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect width="1" height="1" fill="%23000" opacity="0.4"/></svg>'); -webkit-background-clip: text; color: transparent !important; text-shadow: 0 0 1px rgba(229, 176, 126, 0.5); }
.rank-10 { --rank-color: #a33; text-decoration: line-through; text-decoration-color: #500; }

/* --- TIER II: THE OBSERVERS --- */
.tier-2 { --rank-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.rank-11 { --rank-color: #564; animation: rank-scan 3s infinite linear; }
.rank-12 { --rank-color: #789; text-decoration: underline; text-decoration-color: #567; text-decoration-thickness: 3px; } /* Replaced border */
.rank-13 { --rank-color: #ffe; --rank-shadow: 0 0 2px #000; animation: rank-ink 4s infinite; }
.rank-14 { --rank-color: #40e; }
.rank-15 { --rank-color: #ee0; animation: rank-wave 2s infinite ease-in-out; display: inline-block; transform-origin: left; }
.rank-16 { --rank-color: #48a; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%); background-size: 200% 100%; -webkit-background-clip: text; color: transparent !important; animation: rank-shine 3s infinite; }
.rank-17 { --rank-color: #999; --rank-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.rank-18 { --rank-color: #2a2; animation: rank-flip 5s infinite; }
.rank-19 { --rank-color: #0f0; --rank-shadow: 0 0 4px #0f0; }
.rank-20 { --rank-color: #8cf; transform: scale(1.05); transition: transform 0.2s; } .rank-20:hover { transform: scale(1.2); }

/* --- TIER III: THE DEDUCTIVE --- */
.tier-3 { font-family: 'Consolas', 'Courier New', monospace; }
.rank-21 { --rank-color: #fff; font-family: 'Comic Sans MS', cursive; opacity: 0.9; }
.rank-22 { --rank-color: #db9; letter-spacing: -1px; }
.rank-23 { --rank-color: #f22; }
.rank-24 { --rank-color: #da4; animation: rank-pulse-size 0.5s infinite; }
.rank-25 { --rank-color: #48f; background-image: linear-gradient(#002 1px, transparent 1px), linear-gradient(90deg, #002 1px, transparent 1px); background-size: 4px 4px; -webkit-background-clip: text; color: rgba(60,120,255,0.8) !important; }
.rank-26 { --rank-color: #aaa; font-family: 'Courier', monospace; letter-spacing: 2px; }
.rank-27 { --rank-color: #777; text-decoration: underline dashed #fff; }
.rank-28 { --rank-color: #0f0; --rank-shadow: 0 0 2px #050; }
.rank-29 { --rank-color: #ccc; --rank-shadow: 0 2px 2px #fff; animation: rank-melt 4s infinite; }
.rank-30 { --rank-color: #fff; animation: rank-wipe 5s infinite; }

/* --- TIER IV: THE OPERATORS --- */
.tier-4 { font-weight: bold; letter-spacing: 1px; }
.rank-31 { --rank-color: #004; --rank-shadow: 0 0 5px #00f; animation: rank-ping 2s infinite; }
.rank-32 { --rank-color: #b00; --rank-shadow: 0 0 5px #f00, 0 0 1px #500; } /* Replaced border */
.rank-33 { --rank-color: #8f8; opacity: 0.6; animation: rank-float 3s infinite ease-in-out; }
.rank-34 { --rank-color: #f00; --rank-shadow: 0 0 2px #fff; }
.rank-35 { --rank-color: #d84; } .rank-35::after { content: '*'; color: #ff0; animation: rank-spark 0.5s infinite; }
.rank-36 { --rank-color: #ccc; background: linear-gradient(to bottom, #ccc 45%, transparent 45%, transparent 55%, #ccc 55%); -webkit-background-clip: text; color: transparent !important; text-shadow: none; } /* Removed bg-color */
.rank-37 { --rank-color: #222; --rank-shadow: 0 0 1px #fff; font-weight: 900; }
.rank-38 { --rank-color: #08f; font-weight: 100; font-family: sans-serif; }
.rank-39 { --rank-color: #f8a; animation: rank-erase 4s infinite; }
.rank-40 { --rank-color: #fc0; background: linear-gradient(45deg, #cc9900 0%, #ffeb3b 50%, #cc9900 100%); -webkit-background-clip: text; color: transparent !important; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }

/* --- TIER V: THE SAVANTS --- */
.tier-5 { --rank-shadow: 0 0 5px currentColor; }
.rank-41 { --rank-color: #0f0; font-family: monospace; text-shadow: 0 0 3px #0f0; }
.rank-42 { --rank-color: #a0f; --rank-shadow: 2px 0 0 #0af, -2px 0 0 #f0a; }
.rank-43 { --rank-color: #f60; animation: rank-slam 3s infinite; }
.rank-44 { --rank-color: #0ff; text-decoration: underline wavy #0ff; }
.rank-45 { --rank-color: #f0a; animation: rank-neuron 0.5s infinite alternate; }
.rank-46 { --rank-color: #0aa; text-transform: uppercase; letter-spacing: 2px; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
.rank-47 { --rank-color: #fff; animation: rank-invert 4s infinite steps(1); }
.rank-48 { --rank-color: #000; --rank-shadow: 0 0 5px #fff; }
.rank-49 { --rank-color: #4f4; text-shadow: 0 0 5px #4f4, 0 0 10px #afa; animation: rank-pulse-glow 1s infinite; } /* Replaced border-radius/border */
.rank-50 { --rank-color: #08f; --rank-shadow: 0 0 5px #fff, 0 0 10px #08f; }

/* --- TIER VI: THE ABSTRACT --- */
.tier-6 { font-style: italic; }
.rank-51 { --rank-color: #d44; animation: rank-font-shift 5s infinite; }
.rank-52 { --rank-color: #889; animation: rank-distort 6s infinite; }
.rank-53 { --rank-color: #db4; } .rank-53::before { content: '🔓'; font-style: normal; font-size: 0.8em; margin-right: 2px; }
.rank-54 { --rank-color: #888; background: linear-gradient(90deg, #fff 50%, #444 50%); -webkit-background-clip: text; color: transparent !important; }
.rank-55 { --rank-color: #468; opacity: 0.8; }
.rank-56 { --rank-color: #a5f; opacity: 0.5; animation: rank-phase 4s infinite; }
.rank-57 { --rank-color: #048; --rank-shadow: 0 0 5px #08f; animation: rank-ripple 3s infinite; }
.rank-58 { --rank-color: #f0f; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; color: transparent !important; animation: rank-rainbow 5s infinite linear; }
.rank-59 { --rank-color: #d80; animation: rank-heartbeat 1.5s infinite; }
.rank-60 { --rank-color: #4a4; --rank-shadow: 0 0 5px gold; }

/* --- TIER VII: THE ARCHITECTS --- */
.tier-7 { font-weight: 800; --rank-shadow: 1px 1px 0 #000; }
.rank-61 { --rank-color: #a0a; letter-spacing: 1px; }
.rank-62 { --rank-color: #000; --rank-shadow: 0 5px 5px rgba(0,0,0,1); }
.rank-63 { --rank-color: #48f; text-decoration: underline dashed #48f; font-family: monospace; } /* Replaced border-bottom */
.rank-64 { --rank-color: #f40; --rank-shadow: 0 0 5px #ff0; animation: rank-heat 2s infinite alternate; }
.rank-65 { --rank-color: #eef; --rank-shadow: 2px 2px 4px rgba(255,255,255,0.8); }
.rank-66 { --rank-color: #889; text-decoration: underline double #556; } /* Replaced border */
.rank-67 { --rank-color: #d02; position: relative; }
.rank-68 { --rank-color: #80c; }
.rank-69 { --rank-color: #0f4; animation: rank-unscramble 2s ease-out; }
.rank-70 { --rank-color: #fff; font-family: monospace; letter-spacing: 2px; } /* Replaced border */

/* --- TIER VIII: THE ORACLES --- */
.tier-8 { --rank-shadow: 0 0 8px currentColor; }
.rank-71 { --rank-color: #fff; --rank-shadow: 0 0 15px #fff; }
.rank-72 { --rank-color: #eee; opacity: 0.15; }
.rank-73 { --rank-color: #8cf; --rank-shadow: 0 0 5px #fff; animation: rank-freeze 10s infinite; }
.rank-74 { --rank-color: #db4; text-decoration: underline solid #db4; } /* Replaced border */
.rank-75 { --rank-color: #028; --rank-shadow: none; color: #aaf; font-family: monospace; }
.rank-76 { --rank-color: #d00; } .rank-76::before { content: '👁️'; margin-right: 2px; filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-50deg) saturate(600%); }
.rank-77 { --rank-color: #0f0; font-family: monospace; animation: rank-matrix-rain 1s infinite; }
.rank-78 { --rank-color: #f0f; animation: rank-glitch 0.5s infinite steps(3); }
.rank-79 { --rank-color: #0f0; font-family: monospace; text-shadow: 0 0 5px #0f0; } /* Replaced background-color */
.rank-80 { --rank-color: #b0f; --rank-shadow: 0 0 10px #f0f; }

/* --- TIER IX: THE FORCES --- */
.tier-9 { font-weight: 900; letter-spacing: 1px; }
.rank-81 { --rank-color: #000; --rank-shadow: 0 0 10px #fff; }
.rank-82 { --rank-color: #fff; --rank-shadow: 0 0 20px #fff; animation: rank-pulse-intense 1s infinite; }
.rank-83 { --rank-color: #0ff; --rank-shadow: 0 0 10px #008; }
.rank-84 { --rank-color: #cb9; font-family: serif; font-style: italic; }
.rank-85 { --rank-color: #888; animation: rank-size-random 3s infinite; }
.rank-86 { --rank-color: #f00; background: repeating-linear-gradient(45deg, #000, #000 5px, #f0f 5px, #f0f 10px); -webkit-background-clip: text; color: transparent !important; }
.rank-87 { --rank-color: #fff; text-shadow: 0 0 5px #000; background: none; } /* Replaced background-color */
.rank-88 { --rank-color: #a8f; filter: blur(0.5px); animation: rank-dream 5s infinite; }
.rank-89 { --rank-color: #222; --rank-shadow: none; color: #222; background: none; } /* Replaced background */
.rank-90 { --rank-color: #f00; background: linear-gradient(to right, #00f, #0f0, #ff0, #f00); -webkit-background-clip: text; color: transparent !important; }

/* --- TIER X: THE ABSOLUTES --- */
.tier-10 { font-size: 1.1em; font-weight: 900; text-transform: uppercase; animation: rank-god 3s infinite alternate; }
.rank-91 { --rank-color: #fd0; --rank-shadow: 0 0 10px #fd0, 0 0 20px #fff; }
.rank-92 { --rank-color: #fff; animation: rank-shake 0.2s infinite; --rank-shadow: 0 0 10px #f00; }
.rank-93 { --rank-color: #f00; --rank-shadow: 0 4px 4px #000; }
.rank-94 { --rank-color: #cef; --rank-shadow: 0 0 10px #fff; filter: url('#cloud-filter'); /* Simplify to blur/shadow */ text-shadow: 0 0 10px #fff; }
.rank-95 { --rank-color: #48f; transform: skewX(-15deg); }
.rank-96 { --rank-color: #eef; animation: rank-sparkle 2s infinite; }
.rank-97 { --rank-color: #af4; --rank-shadow: 0 0 5px #fff; }
.rank-98 { --rank-color: #222; --rank-shadow: 0 0 10px #000; opacity: 0.8; }
.rank-99 { --rank-color: #f0f; background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; color: transparent !important; animation: rank-rainbow 0.5s infinite linear; font-size: 1.2em; }

/* --- LEVEL 100: THE ETERNAL --- */
.rank-100 {
    --rank-color: #fff;
    --rank-shadow: 0 0 10px #fd0, 0 0 20px #fd0, 0 0 30px #fff;
    color: #fff;
    text-shadow: 0 0 10px #fd0, 0 0 20px #fd0, 0 0 30px #fff;
    animation: rank-pulse-intense 2s infinite;
    font-size: 1.2em;
    letter-spacing: 2px;
}
.rank-100::before {
    content: none;
}

/* Base Color Application for variables */
.rank-style {
    color: var(--rank-color);
    text-shadow: var(--rank-shadow);
}

/* Animations */
@keyframes rank-blur { 0%,100%{filter:blur(1px)} 50%{filter:blur(2px)} }
@keyframes rank-shake { 0%{transform:translate(0,0)} 25%{transform:translate(1px,1px)} 50%{transform:translate(-1px,-1px)} 75%{transform:translate(1px,-1px)} 100%{transform:translate(0,0)} }
@keyframes rank-vibrate { 0%{transform:translate(0,0)} 25%{transform:translate(0.5px,0)} 75%{transform:translate(-0.5px,0)} 100%{transform:translate(0,0)} }
@keyframes rank-flicker { 0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1} }
@keyframes rank-scan { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
@keyframes rank-ink { 0%{text-shadow:0 0 2px #000} 50%{text-shadow:0 0 4px #000} 100%{text-shadow:0 0 2px #000} }
@keyframes rank-wave { 0%{transform:skewX(0deg)} 25%{transform:skewX(5deg)} 75%{transform:skewX(-5deg)} 100%{transform:skewX(0deg)} }
@keyframes rank-shine { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes rank-flip { 0%{transform:rotateX(0deg)} 20%{transform:rotateX(360deg)} 100%{transform:rotateX(360deg)} }
@keyframes rank-pulse-size { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }
@keyframes rank-melt { 0%{filter:contrast(1)} 50%{filter:contrast(1.2) blur(0.5px)} 100%{filter:contrast(1)} }
@keyframes rank-wipe { 0%{opacity:1} 45%{opacity:1} 50%{opacity:0} 55%{opacity:1} 100%{opacity:1} }
@keyframes rank-ping { 0%{text-shadow:0 0 0 #00f} 100%{text-shadow:0 0 10px transparent} }
@keyframes rank-float { 0%{transform:translateY(0)} 50%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
@keyframes rank-spark { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
@keyframes rank-erase { 0%{opacity:1} 20%{opacity:0.2} 40%{opacity:1} 100%{opacity:1} }
@keyframes rank-slam { 0%{transform:scale(2);opacity:0} 10%{transform:scale(1);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes rank-neuron { 0%{text-shadow:0 0 2px #f0a} 100%{text-shadow:0 0 8px #f0a} }
@keyframes rank-invert { 0%{filter:invert(0)} 50%{filter:invert(1)} 100%{filter:invert(0)} }
@keyframes rank-pulse-glow { 0%{text-shadow:0 0 2px #4f4} 100%{text-shadow:0 0 8px #4f4} }
@keyframes rank-font-shift { 0%{font-family:serif} 33%{font-family:sans-serif} 66%{font-family:monospace} 100%{font-family:serif} }
@keyframes rank-distort { 0%{transform:skew(0deg)} 25%{transform:skew(5deg)} 75%{transform:skew(-5deg)} 100%{transform:skew(0deg)} }
@keyframes rank-phase { 0%{opacity:0.2} 50%{opacity:0.8} 100%{opacity:0.2} }
@keyframes rank-ripple { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes rank-rainbow { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes rank-heartbeat { 0%{transform:scale(1)} 10%{transform:scale(1.1)} 20%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes rank-heat { 0%{color:#f40;text-shadow:0 0 5px #ff0} 100%{color:#ff8;text-shadow:0 0 10px #f80} }
@keyframes rank-unscramble { 0%{letter-spacing:5px;opacity:0} 100%{letter-spacing:normal;opacity:1} }
@keyframes rank-freeze { 0%{color:#8cf} 50%{color:#fff} 100%{color:#8cf} }
@keyframes rank-matrix-rain { 0%{color:#0f0} 50%{color:#cfc} 100%{color:#0f0} }
@keyframes rank-glitch { 0%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(-2px,-2px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(2px,-2px)} 100%{transform:translate(0)} }
@keyframes rank-pulse-intense { 0%{opacity:0.8;transform:scale(0.98)} 100%{opacity:1;transform:scale(1.02)} }
@keyframes rank-size-random { 0%{font-size:1em} 50%{font-size:1.1em} 100%{font-size:0.9em} }
@keyframes rank-dream { 0%{filter:blur(0.5px)} 50%{filter:blur(1px)} 100%{filter:blur(0.5px)} }
@keyframes rank-god { 0%{text-shadow:0 0 10px #fff} 100%{text-shadow:0 0 30px #fff, 0 0 50px #ff0} }
@keyframes rank-sparkle { 0%,100%{opacity:1} 50%{opacity:0.5; text-shadow: 0 0 10px #fff; } }

/* Leaderboard Tooltip (Standard) */
#lb-tooltip {
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.9);
    border: 1px solid #666;
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    color: #fff;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}
#lb-tooltip .lb-rank-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
    display: block;
}
#lb-tooltip .lb-rank-tier {
    font-size: 10px;
    color: #aaa;
    font-style: italic;
}

/* New Level Info Modal */
.level-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.level-modal-overlay.visible {
    display: flex;
}
.level-modal-content {
    background: #2b2b2b;
    border: 1px solid #555;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    animation: modal-pop 0.3s ease-out;
}
@keyframes modal-pop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.level-modal-header {
    padding: 10px 15px;
    border-bottom: 1px solid #444;
    background: #333;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.level-modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
}
.level-modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
}
.level-modal-close:hover { color: #fff; }
.level-modal-body {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden; /* Fix for issue 3: window should only be scrollable */
    flex-grow: 1;
}
/* Scrollbar for modal */
.level-modal-body::-webkit-scrollbar { width: 8px; }
.level-modal-body::-webkit-scrollbar-track { background: #222; }
.level-modal-body::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

/* Keep existing table styles but adapt if needed */
.level-table-container { width: 100%; }
.level-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.level-table th { background: #222; position: sticky; top: 0; padding: 8px; border-bottom: 1px solid #444; color: #ccc; z-index: 10; text-align: left; }
.level-table td { padding: 6px 8px; border-bottom: 1px solid #333; }
.level-table tr:hover { background: rgba(255,255,255,0.05); }
.level-table .lvl-col { width: 40px; text-align: center; color: #888; }
.level-table .xp-col { text-align: right; color: #aaa; font-family: monospace; }

/* Hide old tooltip if it still exists in DOM logic */
#level-tooltip { display: none !important; }

/* Infinity symbol for Level 100 */
.xp-infinity {
    font-size: 14px;
    color: #ffd700;
    margin-right: 4px;
    vertical-align: middle;
}

/* New Rank Notification */
.rank-up-msg {
    margin-top: 10px;
    color: #ffd700;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 10px #ff0;
    animation: rank-pulse-intense 1s infinite alternate;
}

/* Crown Icon Styling - Isolated */
.rank-crown {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px; /* increased spacing */
    font-style: normal;
    text-shadow: none !important;
    animation: none !important;
    color: gold !important;
    filter: none !important;
    white-space: nowrap;
    opacity: 1 !important;
    font-size: 14px;
    line-height: 1;
}

/* Wrapper for text to allow isolated crown positioning */
.rank-text-wrapper {
    position: relative;
    display: inline-block;
    text-shadow: inherit;
    color: inherit;
}

/* Unlocks Selector */
#unlocks-select {
    width: 100%;
    background: #222;
    color: #ccc;
    border: 1px solid #444;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
#unlocks-select:hover {
    border-color: #666;
}