:root {
    --p1: #101527;
    --p2: #3b404c;
    --p3: #E94B3C;
    --p4: #a6a8b1;
    --p5: #b7b2c3;

    --bg:    var(--p1);
    --ink:   var(--p2);
    --card:  #2f3442;
    --card2: #4f5562;
    --line:  rgba(166,168,177,0.24);
    --line2: rgba(183,178,195,0.36);
    --red:   var(--p3);
    --red-d: rgba(233,75,60,0.14);
    --red-g: rgba(233,75,60,0.35);
    --laser-red-rgb: 233, 75, 60;
    --blue:  var(--p4);
    --blue-d:rgba(166,168,177,0.1);
    --gold:  var(--p5);
    --text:  #d8d9df;
    --mid:   rgba(215,217,224,0.68);
    --low:   rgba(215,217,224,0.45);
    --chat-font: 'JetBrains Mono', monospace;
    --level-accent: #e94b3c;
    --level-accent-soft: rgba(233,75,60,0.34);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Rajdhani', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: auto;
    background:
        radial-gradient(ellipse at 20% 25%, rgba(233,75,60,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 75%, rgba(185,190,202,0.09) 0%, transparent 50%),
        var(--bg);
    background-size: 170% 170%, 170% 170%, auto;
    animation: menuAmbientDrift 16s ease-in-out infinite alternate;
    color: var(--text);
    padding: 24px 20px;
}

.laser-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.92;
    contain: paint;
    background:
        radial-gradient(180% 120% at 50% 100%, rgba(var(--laser-red-rgb), 0.24), rgba(var(--laser-red-rgb), 0.1) 52%, rgba(10, 14, 26, 0.46) 100%),
        linear-gradient(180deg, rgba(7, 10, 20, 0.08), rgba(7, 10, 20, 0.2) 42%, rgba(7, 10, 20, 0.56) 100%);
    animation: menuEdgeBarsPulse 4s ease-in-out infinite;
}

.laser-field::before,
.laser-field::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.laser-field::before {
    background: linear-gradient(to top, rgba(20, 9, 16, 0.8) 0%, rgba(13, 9, 18, 0.6) 36%, rgba(10, 8, 18, 0.24) 74%, rgba(9, 9, 18, 0.12) 100%);
    z-index: 2;
}

.laser-field::after {
    background:
        linear-gradient(
            to top,
            rgba(var(--laser-red-rgb), 0.02) 0%,
            rgba(var(--laser-red-rgb), 0.035) 42%,
            rgba(var(--laser-red-rgb), 0.12) 58%,
            rgba(var(--laser-red-rgb), 0.22) 100%
        ),
        radial-gradient(120% 90% at 50% 16%, rgba(var(--laser-red-rgb), 0.14), rgba(var(--laser-red-rgb), 0));
    z-index: 1;
    animation: menuLaserGlow 2.8s ease-in-out infinite;
}

.laser-cube {
    position: absolute;
    left: 0;
    bottom: -220px;
    width: 16px;
    border: 2px solid rgba(var(--laser-red-rgb), 0.52);
    border-bottom-color: rgba(var(--laser-red-rgb), 0.72);
    background: linear-gradient(to top, rgba(var(--laser-red-rgb), 0.16), rgba(var(--laser-red-rgb), 0.03));
    box-shadow: 0 0 6px rgba(var(--laser-red-rgb), 0.16);
    z-index: 0;
    animation-name: menuCubeRise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

.laser-cube::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(var(--laser-red-rgb), 0.72), rgba(var(--laser-red-rgb), 0));
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 34%;
    opacity: 0.14;
}

.laser-cube::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(14%, 22%, 30%);
    border-top: 1px solid rgba(var(--laser-red-rgb), 0.34);
    opacity: 0.4;
}

@keyframes menuCubeRise {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0.42;
    }
    48% {
        opacity: 0.64;
    }
    82% {
        opacity: 0.84;
    }
    100% {
        transform: translate3d(0, -122vh, 0);
        opacity: 0.9;
    }
}

@keyframes menuEdgeBarsPulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 0.84; }
}

@keyframes menuLaserGlow {
    0%, 100% { opacity: 0.38; }
    50% { opacity: 0.58; }
}

@keyframes menuAmbientDrift {
    0% { background-position: 0% 0%, 100% 100%, center; }
    100% { background-position: 12% 7%, 86% 90%, center; }
}

.top-dock,
.card {
    position: relative;
    z-index: 1;
}

/* Critical fallback: keep auxiliary panels out of normal flow. */
#socialPanel,
#profilePopover,
#objectivesOverlay,
#profileOverlay,
#settingsOverlay,
#avatarPopupOverlay,
#userActionOverlay,
#incomingChallengeOverlay {
    display: none;
}

#socialPanel {
    position: fixed;
    top: 118px;
    right: 18px;
    z-index: 1250;
}

#socialPanel.visible {
    display: grid;
}

#profilePopover.visible {
    display: block;
}

#objectivesOverlay.visible,
#profileOverlay.visible,
#settingsOverlay.visible,
#avatarPopupOverlay.visible,
#userActionOverlay.visible,
#incomingChallengeOverlay.visible {
    display: flex;
}

.incoming-challenge-overlay {
    position: fixed;
    inset: 0;
    z-index: 1950;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(circle at 50% 24%, rgba(76,170,214,0.18), rgba(8,10,16,0.84) 55%);
    backdrop-filter: blur(6px);
}

.incoming-challenge-modal {
    width: min(92vw, 520px);
    border-radius: 18px;
    border: 1px solid rgba(76,170,214,0.44);
    background: linear-gradient(170deg, rgba(16,21,39,0.96), rgba(20,30,52,0.94));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56);
    padding: 24px;
}

.incoming-challenge-kicker {
    color: #f5c5a2;
    font-size: 13px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 8px;
}

.incoming-challenge-title {
    margin: 0;
    color: #f0f4ff;
    font-size: 30px;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.03em;
}

.incoming-challenge-subtitle {
    margin: 10px 0 0;
    color: rgba(232,238,255,0.78);
    font-size: 16px;
    line-height: 1.35;
}

.incoming-challenge-body {
    margin-top: 14px;
}

.incoming-challenge-countdown-wrap {
    border: 1px solid rgba(233,75,60,0.28);
    border-radius: 14px;
    padding: 18px 16px;
    background: rgba(255,255,255,0.03);
    text-align: center;
}

.incoming-challenge-countdown-label {
    color: rgba(232,238,255,0.72);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}

.incoming-challenge-countdown-value {
    margin-top: 10px;
    color: #ff8f71;
    font-family: 'Rajdhani', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 0.9;
}

.incoming-challenge-actions {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.incoming-challenge-btn {
    height: 52px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.incoming-challenge-btn:hover {
    transform: translateY(-1px);
}

.incoming-challenge-btn.accept {
    color: #d6ffea;
    background: linear-gradient(180deg, rgba(55,168,112,0.34), rgba(30,111,85,0.28));
    border-color: rgba(84,218,155,0.64);
    box-shadow: 0 12px 22px rgba(22,96,68,0.32);
}

.incoming-challenge-btn.decline {
    color: #ffd7d7;
    background: linear-gradient(180deg, rgba(204,82,82,0.26), rgba(120,46,46,0.22));
    border-color: rgba(231,112,112,0.6);
    box-shadow: 0 12px 22px rgba(96,34,34,0.28);
}

.incoming-challenge-btn.dismiss {
    grid-column: 1 / -1;
    color: #f4eef9;
    background: linear-gradient(180deg, rgba(158,163,182,0.22), rgba(110,115,131,0.18));
    border-color: rgba(190,194,207,0.56);
    box-shadow: 0 12px 22px rgba(22,24,32,0.24);
}

#globalChatPanel {
    position: fixed;
    left: 18px;
    top: 118px;
    z-index: 980;
}

.card {
    width: 48%;
    min-width: min(560px, 90vw);
    max-width: min(760px, 96vw);
    height: min(78vh, 760px);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}

/* TOP BAR */
.card-top {
    padding: 28px 24px 22px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(224,68,42,0.04), transparent);
    position: relative;
}
.card-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.card-home-btn {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(166,168,177,0.35);
    background: linear-gradient(180deg, rgba(59,64,76,0.86), rgba(16,21,39,0.95));
    color: var(--mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.2s, background 0.2s;
}
.card-home-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card-home-btn:hover {
    color: var(--text);
    border-color: var(--line2);
    background: linear-gradient(180deg, rgba(79,85,98,0.9), rgba(16,21,39,0.98));
    transform: translateY(-50%) translateX(-1px);
}
.logo-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--red);
}
.logo-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.24em;
    color: var(--low);
    text-transform: uppercase;
    margin-top: 8px;
}

/* PLAYER STRIP */
.player-strip {
    margin: 20px 20px 0;
    background: var(--card2);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.menu-level-stack {
    display: grid;
    gap: 4px;
    width: clamp(150px, 30vw, 300px);
    max-width: 100%;
}
.player-left { display:flex; align-items:center; gap:12px; }
.avatar-stack {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.avatar-level-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        var(--level-accent) 0 var(--menu-level-progress, 0%),
        rgba(72, 10, 12, 0.18) var(--menu-level-progress, 0%) 100%
    );
    box-shadow: 0 0 0 3px rgba(233,75,60,0.75), 0 0 12px rgba(233,75,60,0.55);
    -webkit-mask: radial-gradient(circle at center, transparent 60%, #000 62%);
    mask: radial-gradient(circle at center, transparent 60%, #000 62%);
    pointer-events: none;
    z-index: 2;
}
.avatar-level-ring::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border: 3px solid var(--level-accent-soft);
    box-shadow: 0 0 8px rgba(233,75,60,0.35);
}
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red-d);
    border: 1px solid rgba(224,68,42,0.25);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex; align-items:center; justify-content:center;
    font-size: 16px; font-weight: 700;
    color: var(--red);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.avatar-level-chip {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    min-width: 28px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(224,174,66,0.72);
    background: linear-gradient(180deg, rgba(58,43,18,0.92), rgba(32,24,10,0.9));
    color: #e0ae42;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    z-index: 2;
}
.player-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 280px;
}
.player-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.player-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--red);
}
.player-level-percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(233, 75, 60, 0.55);
    background: linear-gradient(180deg, rgba(68, 17, 20, 0.5), rgba(28, 9, 11, 0.52));
    color: rgba(255, 127, 108, 0.98);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 101, 86, 0.15);
    flex: 0 0 auto;
}
.player-rank {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(199,204,215,0.12);
    border: 1px solid rgba(199,204,215,0.28);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
}
.player-rank-row {
    margin-top: 3px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 220px;
}
.menu-level-row {
    margin-top: 2px;
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 4px;
    align-content: start;
}
.menu-level-progress {
    position: relative;
    flex: 1;
    min-width: 120px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(233, 75, 60, 0.95);
    background: rgba(40, 10, 12, 0.9);
    overflow: visible;
    box-shadow: inset 0 0 0 1px rgba(10, 18, 28, 0.45), 0 0 0 1px rgba(233,75,60,0.18);
}
.menu-level-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--level-accent), rgba(255, 125, 102, 1)) !important;
    box-shadow: 0 0 12px rgba(233,75,60,0.55);
    transition: width 0.35s cubic-bezier(0.22, 0.9, 0.33, 1);
}
.menu-level-xp-text {
    position: absolute;
    top: calc(-1em - 4px);
    right: 0;
    min-width: 92px;
    text-align: right;
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 92, 92, 1);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.player-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
.pstat { text-align: center; }
.pstat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.pstat-lbl {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--low);
    text-transform: uppercase;
    margin-top: 2px;
}
.pstat.streak {
    padding: 2px 8px;
    background: rgba(215,32,69,0.12);
    border-radius: 6px;
    border: 1px solid rgba(215,32,69,0.24);
}
.pstat.streak .pstat-val {
    color: var(--red);
    font-size: 16px;
}
.pstat.streak .pstat-lbl {
    color: rgba(215,32,69,0.8);
}
.rank-progress-section {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.rank-progress-bar {
    height: 6px;
    background: rgba(166,168,177,0.2);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.rank-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--red), rgba(215,32,69,0.6));
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.22, 0.9, 0.33, 1);
    box-shadow: 0 0 8px rgba(215,32,69,0.4);
}
.rank-progress-label { font-size: 11px; color: var(--low); font-weight: 600; }
.session-bonus-section {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(90deg, rgba(79,85,98,0.3), transparent);
    border-bottom: 1px solid var(--line);
}
.session-info { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mid); }
.bonus-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(215,32,69,0.5);
    background: linear-gradient(180deg, rgba(215,32,69,0.18), rgba(215,32,69,0.08));
    color: var(--red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.bonus-btn:hover:not(:disabled) {
    border-color: rgba(215,32,69,0.8);
    background: linear-gradient(180deg, rgba(215,32,69,0.28), rgba(215,32,69,0.15));
    box-shadow: 0 4px 12px rgba(215,32,69,0.2);
}
.bonus-btn:disabled { opacity: 0.5; cursor: not-allowed; color: var(--low); border-color: var(--line); }

/* MODE CARDS */
.modes {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
}

.mode {
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.mode::after { display: none; }
.mode:hover { transform: translateY(-2px); }
.mode:hover::after { display: none; }

.mode.local:hover  { border-color: rgba(89,97,112,0.45); background: rgba(89,97,112,0.16); }
.mode.online:hover { border-color: rgba(185,190,202,0.45);  background: var(--blue-d); }
.mode.ai:hover     { border-color: rgba(233,75,60,0.45);   background: rgba(233,75,60,0.08); }

.mode.locked {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.mode-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items:center; justify-content:center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.mode:hover .mode-icon { transform: scale(1.08); }
.icon-local  { background: rgba(89,97,112,0.16); border:1px solid rgba(89,97,112,0.28); }
.icon-online { background: rgba(185,190,202,0.12);  border:1px solid rgba(185,190,202,0.24); }
.icon-ai     { background: rgba(233,75,60,0.12);  border:1px solid rgba(233,75,60,0.24); }

.mode-body { flex: 1; min-width: 0; padding-right: 20px; }
.mode-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.mode-desc { font-size: 12px; color: var(--mid); line-height: 1.4; margin-bottom: 8px; }
.mode-tags { display:flex; flex-wrap:wrap; gap:4px; }
.tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    color: var(--low);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--line);
}

.mode.locked {
    opacity: 1;
    border-color: rgba(166,168,177,0.45);
    cursor: pointer;
    background: linear-gradient(180deg, rgba(59, 64, 76, 0.75), rgba(48, 52, 65, 0.82));
}
.mode.locked:hover {
    transform: none;
    border-color: rgba(166,168,177,0.45);
    background: linear-gradient(180deg, rgba(59, 64, 76, 0.75), rgba(48, 52, 65, 0.82));
}
.mode.locked::after {
    color: rgba(166,168,177,0.4);
    transform: translateY(-50%) translateX(4px);
}
.mode.locked .mode-icon,
.mode.locked .mode-title,
.mode.locked .mode-desc,
.mode.locked .mode-tags {
    filter: none;
    opacity: 1;
}
.mode.locked .mode-title {
    opacity: 1;
    filter: none;
    color: var(--text);
    font-size: 16px;
    margin-bottom: 0;
}
.mode.locked .mode-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    position: static;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    inset: auto;
    z-index: auto;
}
.mode.locked .mode-body::before {
    display: none;
}
.mode-lock-cta {
    padding: 9px 16px;
    border-radius: 7px;
    border: 1px solid var(--red);
    background: linear-gradient(180deg, rgba(255, 95, 73, 0.95), rgba(233, 75, 60, 0.94));
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    position: relative;
    z-index: 4;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.mode-lock-cta:hover {
    background: linear-gradient(180deg, rgba(255, 95, 73, 0.99), rgba(233, 75, 60, 0.98));
    box-shadow: 0 10px 24px rgba(233, 75, 60, 0.3);
}

.top-dock {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    width: 40%;
    min-width: min(560px, 90vw);
    max-width: min(760px, 96vw);
    border-radius: 24px;
    border: 1px solid rgba(183,178,195,0.28);
    background: linear-gradient(180deg, rgba(16,21,39,0.94), rgba(59,64,76,0.5));
    box-shadow: 0 16px 40px rgba(0,0,0,0.42);
    backdrop-filter: blur(4px);
}

.guest-note {
    position: fixed;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 18%;
    min-width: 220px;
    max-width: 280px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(215,32,69,0.35);
    background: linear-gradient(180deg, rgba(16,21,39,0.94), rgba(59,64,76,0.56));
    color: var(--text);
    box-shadow: 0 12px 30px rgba(0,0,0,0.38);
    display: none;
    z-index: 1150;
}
.guest-note h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--p5);
    margin-bottom: 4px;
}
.guest-note p {
    font-size: 19px;
    color: var(--mid);
    margin-bottom: 10px;
}
.guest-note button {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(215,32,69,0.45);
    background: rgba(215,32,69,0.12);
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.edit-profile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16,21,39,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1450;
    padding: 20px;
}
.edit-profile-overlay.visible { display: flex; animation: objectivesOverlayIn 0.18s ease-out both; }
.edit-profile-modal {
    width: min(520px, 96vw);
    background: linear-gradient(180deg, rgba(16,21,39,0.98), rgba(59,64,76,0.92));
    border: 1px solid rgba(183,178,195,0.36);
    box-shadow: 0 24px 56px rgba(0,0,0,0.52);
    padding: 16px;
}
.edit-profile-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.edit-profile-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--p5); }
.edit-profile-close { width: 34px; height: 34px; border: 1px solid var(--line2); background: transparent; color: var(--text); cursor: pointer; }
.edit-profile-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.edit-profile-field label { display:block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--low); margin-bottom: 4px; }
.edit-profile-field input[type="text"],
.edit-profile-field input[type="file"] {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(166,168,177,0.34);
    background: rgba(59,64,76,0.5);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
}
.edit-profile-warning { font-size: 12px; color: #f7b5c1; min-height: 18px; }
.edit-profile-actions { display: flex; gap: 8px; justify-content: flex-end; }
.edit-profile-save { padding: 9px 12px; border: 1px solid rgba(215,32,69,0.45); background: rgba(215,32,69,0.14); color: var(--red); cursor: pointer; }
.edit-profile-cancel { padding: 9px 12px; border: 1px solid var(--line2); background: transparent; color: var(--text); cursor: pointer; }

/* LOADING */
#loading {
    display: none;
    margin: 0 20px;
    padding: 12px;
    background: var(--blue-d);
    border: 1px solid rgba(185,190,202,0.25);
    text-align: center;
    color: #c7ccd7;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}
.loading-dots::after {
    content: '...';
    animation: dots 1.2s steps(3,end) infinite;
}
@keyframes dots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} }

/* ACTIONS */
.actions {
    padding: 14px 20px 22px;
    display: flex;
    gap: 8px;
}
.action-btn {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card2);
    color: var(--mid);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    min-width: 240px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.action-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); border-color: var(--line2); }
.action-btn.danger:hover { border-color: rgba(233,75,60,0.4); color: var(--red); }

.feature-dock {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.dock-separator {
    width: 1px;
    height: 34px;
    margin: 0 2px;
    background: linear-gradient(180deg, transparent, rgba(183,178,195,0.45), transparent);
}

.dock-btn,
.profile-btn {
    position: relative;
    border: 1px solid rgba(166,168,177,0.36);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
    color: var(--text);
    background: linear-gradient(180deg, rgba(59,64,76,0.86), rgba(16,21,39,0.95));
}

.dock-btn {
    --dock-accent: 183, 178, 195;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    color: #d8d9df;
    flex: 0 0 auto;
    border: none;
}

.dock-btn.missions {
    --dock-accent: 215, 32, 69;
    color: #f48fa3;
    border-color: rgba(215,32,69,0.38);
}

.dock-btn.achievements {
    --dock-accent: 183, 178, 195;
    color: #d8d2e0;
    border-color: rgba(183,178,195,0.42);
}

.dock-btn.history {
    --dock-accent: 166, 168, 177;
    color: #d0d2da;
    border-color: rgba(166,168,177,0.44);
}

.dock-btn.social {
    --dock-accent: 76, 170, 214;
    color: #a6dff7;
    border-color: rgba(76,170,214,0.48);
}

.social-toggle-btn {
    --dock-accent: 215, 32, 69;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #f39caf;
    border-color: rgba(215,32,69,0.58);
    margin-left: 6px;
    flex: 0 0 auto;
}

.dock-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.85;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dock-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(183,178,195,0.52);
    background: var(--p3);
    color: #f4d9df;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(215,32,69,0.35);
}

.dock-btn:hover,
.dock-btn.active {
    transform: translateY(-1px);
    color: #ece0ef;
    border-color: rgba(var(--dock-accent), 0.6);
    background: linear-gradient(180deg, rgba(var(--dock-accent),0.24), rgba(16,21,39,0.95));
    box-shadow: 0 0 0 3px rgba(var(--dock-accent),0.16);
}

.profile-btn {
    height: 64px;
    border-radius: 30px;
    padding: 7px 16px 7px 9px;
    gap: 12px;
    border: 1px solid rgba(166,168,177,0.4);
    background: rgba(44,49,62,0.7);
    color: #dfd9eb;
    margin-left: auto;
    flex: 1 1 auto;
    width: 54%;
    min-width: 280px;
    max-width: 360px;
}

.profile-avatar-shell {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.3);
    background: transparent;
    overflow: visible;
}

.profile-avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        var(--level-accent) 0 var(--dock-level-progress, 0%),
        rgba(72, 10, 12, 0.18) var(--dock-level-progress, 0%) 100%
    );
    box-shadow: 0 0 0 3px rgba(233,75,60,0.75), 0 0 12px rgba(233,75,60,0.55);
    -webkit-mask: radial-gradient(circle at center, transparent 60%, #000 62%);
    mask: radial-gradient(circle at center, transparent 60%, #000 62%);
    pointer-events: none;
    z-index: 0;
}

.profile-avatar-ring::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border: 3px solid var(--level-accent-soft);
    box-shadow: 0 0 8px rgba(233,75,60,0.35);
}

.profile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(201,196,214,0.6);
    background: rgba(59,64,76,0.8);
    color: #f0eaf9;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.profile-avatar-level {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: -10px;
    transform: translateX(-50%);
    min-width: 28px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(224,174,66,0.72);
    background: linear-gradient(180deg, rgba(58,43,18,0.92), rgba(32,24,10,0.9));
    color: #e0ae42;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

.profile-meta {
    display: grid;
    line-height: 1.1;
    gap: 3px;
}

.profile-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a9aaa;
}

.profile-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: #e8e2f4;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #2ec877;
}

.profile-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.profile-status.is-offline {
    color: #8a8d99;
}

.profile-btn:hover,
.profile-btn.active {
    transform: translateY(-1px);
    border-color: rgba(183,178,195,0.78);
    background: linear-gradient(180deg, rgba(76,82,96,0.95), rgba(16,21,39,0.95));
    box-shadow: 0 0 0 3px rgba(183,178,195,0.2);
}

.dock-popover {
    position: fixed;
    top: 82px;
    right: 22px;
    z-index: 1201;
    width: min(300px, 88vw);
    background: rgba(16,21,39,0.97);
    border: 1px solid var(--line2);
    border-radius: 12px;
    box-shadow: 0 22px 50px rgba(0,0,0,0.45);
    padding: 12px;
    display: none;
}

.dock-popover.profile-popover {
    width: min(260px, 88vw);
}

.dock-popover.visible {
    display: block;
}

.dock-popover h4 {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 11px;
}

.dock-popover-list {
    display: grid;
    gap: 8px;
}

.dock-popover-item {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--mid);
    line-height: 1.4;
}

.dock-popover-item strong {
    display: block;
    color: var(--text);
    margin-bottom: 2px;
}

.profile-links {
    display: grid;
    gap: 8px;
}

.profile-link {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    padding: 10px 11px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.profile-link-icon {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;
    flex-shrink: 0;
}

.profile-link.signout {
    color: #f0b0b7;
}

.profile-link:hover {
    border-color: var(--line2);
    background: rgba(183,178,195,0.09);
}

.global-chat-panel {
    position: fixed;
    left: 18px;
    top: 118px;
    width: min(390px, calc(100vw - 28px));
    height: min(86vh, 860px);
    z-index: 980;
    border-radius: 24px;
    border: 1px solid rgba(183,178,195,0.2);
    background: linear-gradient(180deg, rgba(28,30,38,0.96), rgba(21,23,32,0.96));
    box-shadow: 0 28px 72px rgba(0,0,0,0.54);
    backdrop-filter: blur(4px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 14px;
    overflow: visible;
    transition: transform 0.24s cubic-bezier(0.2, 0.88, 0.24, 1), opacity 0.18s;
}

.global-chat-panel.hidden {
    transform: translateX(calc(-100% - 22px));
    opacity: 0;
    pointer-events: none;
}

.global-chat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(183,178,195,0.16);
    padding-bottom: 10px;
}

.global-chat-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: #f1edf8;
    line-height: 1;
}

.global-chat-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
}

.global-chat-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.global-chat-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(183,178,195,0.24);
    background: rgba(255,255,255,0.04);
    color: #d6dbe8;
    font-size: 15px;
    cursor: pointer;
}

.global-chat-side-close {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 92px;
    border-radius: 999px;
    border: 1px solid rgba(76,170,214,0.42);
    background: linear-gradient(180deg, rgba(34,65,105,0.82), rgba(18,32,59,0.88));
    color: #b8e0fa;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(6,11,22,0.45);
}

.global-chat-peek {
    position: fixed;
    left: 6px;
    top: calc(118px + (min(86vh, 860px) / 2));
    transform: translateX(-16px);
    opacity: 0;
    pointer-events: none;
    z-index: 1010;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(76,170,214,0.38);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(21,42,76,0.92), rgba(12,23,45,0.94));
    color: #b9ddf8;
    height: 40px;
    padding: 0 12px 0 10px;
    box-shadow: 0 10px 26px rgba(7,12,25,0.44);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.18s ease;
}

.global-chat-peek.visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.global-chat-peek-arrow {
    font-size: 12px;
    line-height: 1;
    opacity: 0.95;
}

.global-chat-peek-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.global-chat-feed {
    border: 1px solid rgba(166,168,177,0.2);
    border-radius: 14px;
    background: rgba(16,21,39,0.52);
    padding: 10px;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 7px;
    scrollbar-width: thin;
    scrollbar-color: rgba(161,168,184,0.55) rgba(255,255,255,0.04);
}

.global-chat-feed::-webkit-scrollbar {
    width: 7px;
}

.global-chat-feed::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 999px;
}

.global-chat-feed::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(183,178,195,0.55), rgba(120,128,148,0.55));
    border-radius: 999px;
}

.global-chat-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.global-chat-entry.mine {
    align-items: stretch;
}

.global-chat-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
}

.global-chat-meta.mine {
    justify-content: flex-end;
}

.global-chat-name {
    font-size: 11px;
    font-weight: 700;
    color: #cfd6e5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.clickable-user {
    cursor: pointer;
}

.clickable-user:hover {
    opacity: 0.9;
}

.global-chat-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.38);
    background: radial-gradient(circle at 30% 30%, rgba(183,178,195,0.52), rgba(59,64,76,0.9));
    color: #f1ecf8;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.global-chat-block-btn {
    margin-left: auto;
    border: 1px solid rgba(233,75,60,0.42);
    border-radius: 999px;
    background: rgba(233,75,60,0.12);
    color: #efb8b0;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    cursor: pointer;
}

.global-chat-block-btn.unblock {
    border-color: rgba(76,170,214,0.42);
    background: rgba(76,170,214,0.12);
    color: #a9dff6;
}

.global-chat-ignore {
    margin-left: auto;
    border: 1px solid rgba(166,168,177,0.26);
    border-radius: 999px;
    background: rgba(16,21,39,0.52);
    color: #bfc2d0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    cursor: pointer;
}

.global-chat-bubble {
    width: 100%;
    display: flex;
}

.global-chat-bubble.mine {
    justify-content: flex-end;
}

.global-chat-bubble .social-chat-bubble {
    display: inline-block;
    width: auto;
    min-width: clamp(150px, 34%, 220px);
    max-width: min(92%, 420px);
    box-sizing: border-box;
    min-height: 0;
    padding: 6px 9px;
    font-family: var(--chat-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: #f3f6fd;
    white-space: pre-line;
    word-break: break-word;
}

.global-chat-bubble .social-chat-bubble.mine {
    border-color: rgba(233,75,60,0.42);
    background: rgba(233,75,60,0.16);
}

.global-chat-empty {
    min-height: 140px;
    display: grid;
    place-items: center;
    color: var(--low);
    font-size: 14px;
    text-align: center;
    padding: 12px;
}

.global-chat-compose {
    position: relative;
    display: grid;
    gap: 9px;
}

.global-chat-input-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.global-chat-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(166,168,177,0.34);
    background: rgba(16,21,39,0.62);
    color: var(--text);
    padding: 0 12px;
    font-family: var(--chat-font);
    font-size: 15px;
}

.mention-autocomplete-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
}

.mention-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: rgba(63, 68, 76, 0.95);
    border: 1px solid rgba(166,168,177,0.34);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 14px;
    transition: background 0.12s ease;
}

.mention-item:hover {
    background: rgba(233,75,60,0.2);
}

.mention-item-type {
    font-size: 11px;
    color: var(--mid);
    font-weight: 500;
}

.challenge-toast-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.challenge-toast-body {
    font-size: 12px;
    color: rgba(246, 238, 243, 0.82);
    line-height: 1.35;
}

.global-chat-send {
    flex: 0 0 46px;
    width: 46px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(76,170,214,0.58);
    background: linear-gradient(180deg, rgba(76,170,214,0.2), rgba(26,74,112,0.24));
    color: #c5ecff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.global-chat-send:hover {
    transform: translateY(-1px);
    border-color: rgba(130,217,255,0.8);
    box-shadow: 0 10px 24px rgba(10,38,58,0.34);
}

#globalChatSendBtn {
    border-color: rgba(233,75,60,0.58) !important;
    background: linear-gradient(180deg, rgba(233,75,60,0.2), rgba(137,44,52,0.24)) !important;
    color: #ffe7eb !important;
}

#globalChatSendBtn:hover {
    border-color: rgba(250,130,130,0.72) !important;
    box-shadow: 0 10px 22px rgba(85,18,24,0.3) !important;
}

.chat-compose-emoji-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(86,174,219,0.46);
    background: linear-gradient(180deg, rgba(20,49,82,0.72), rgba(14,31,58,0.78));
    color: #bfe9ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(7,17,36,0.32);
    transition: transform 0.14s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.chat-compose-emoji-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(142,219,255,0.78);
    box-shadow: 0 10px 24px rgba(12,29,56,0.38);
}

.chat-compose-emoji-glyph {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.chat-compose-emoji-icon-outline {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#globalChatEmojiBtn {
    background: linear-gradient(180deg, rgba(233,75,60,0.2), rgba(137,44,52,0.24));
    border-color: rgba(233,75,60,0.58);
    color: #ffe7eb;
    box-shadow: 0 8px 20px rgba(85,18,24,0.28);
}

#globalChatEmojiBtn:hover {
    border-color: rgba(250,130,130,0.72);
    box-shadow: 0 10px 22px rgba(85,18,24,0.3);
}

.chat-compose-emoji-picker {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(286px, calc(100vw - 38px));
    max-height: 196px;
    overflow-y: auto;
    border: 1px solid rgba(162,183,209,0.3);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17,27,46,0.98), rgba(12,20,36,0.98));
    box-shadow: 0 18px 42px rgba(5,12,24,0.5);
    padding: 8px;
    display: none !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    z-index: 1600;
    scrollbar-width: thin;
}

.chat-compose-emoji-picker.is-open {
    display: grid !important;
}

.chat-compose-emoji-item {
    border: 1px solid rgba(180,191,210,0.24);
    border-radius: 9px;
    background: rgba(255,255,255,0.03);
    color: #f2f7ff;
    font-size: 18px;
    line-height: 1;
    padding: 7px 0;
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
}

.chat-compose-emoji-item:hover {
    border-color: rgba(126,208,249,0.56);
    background: rgba(69,146,195,0.16);
    transform: translateY(-1px);
}

#globalChatEmojiPicker {
    right: 0;
}

.global-chat-status {
    min-height: 16px;
    font-size: 14px;
    color: #d7aab0;
}

.social-panel {
    position: fixed;
    top: 118px;
    right: 18px;
    width: min(390px, calc(100vw - 28px));
    height: min(86vh, 860px);
    max-height: calc(100dvh - 132px);
    z-index: 1250;
    border-radius: 24px;
    border: 1px solid rgba(183,178,195,0.2);
    background: linear-gradient(180deg, rgba(28,30,38,0.96), rgba(21,23,32,0.96));
    box-shadow: 0 28px 72px rgba(0,0,0,0.54);
    backdrop-filter: blur(4px);
    padding: 14px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    transform: translateX(108%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.18, 0.92, 0.26, 1), opacity 0.2s;
}

.social-panel.visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.social-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(183,178,195,0.14);
    padding-bottom: 10px;
}

.social-panel-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-panel-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.48);
    background: radial-gradient(circle at 30% 30%, rgba(183,178,195,0.52), rgba(59,64,76,0.9));
    color: #f2edf8;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.social-panel-user-meta {
    display: grid;
    line-height: 1.05;
}

.social-panel-user-meta strong {
    font-size: 20px;
    color: #f2edf8;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.02em;
}

.social-panel-user-meta span {
    font-size: 12px;
    color: var(--mid);
}

.social-panel-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line2);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    cursor: pointer;
    font-size: 15px;
}

.social-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: 1px solid rgba(183,178,195,0.16);
    border-radius: 14px;
    padding: 6px;
    background: rgba(16,21,39,0.58);
}

.social-tab {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mid);
    cursor: pointer;
    padding: 8px 10px;
    font-size: 13px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    position: relative;
}

.social-tab.active {
    color: #f2edf8;
    background: rgba(255,255,255,0.05);
    border-color: rgba(183,178,195,0.16);
}

.social-tab.active::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -7px;
    height: 3px;
    border-radius: 4px;
    background: #d72045;
}

.social-view {
    display: none;
    min-height: 0;
}

.social-view.active {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    min-height: 0;
}

.social-search-wrap input {
    width: 100%;
    border: 1px solid rgba(183,178,195,0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    padding: 9px 11px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    outline: none;
}

.social-search-wrap input:focus {
    border-color: rgba(76,170,214,0.62);
    box-shadow: 0 0 0 3px rgba(76,170,214,0.14);
}

.social-friends-feedback {
    min-height: 18px;
    margin-top: -2px;
    margin-bottom: 2px;
    font-size: 12px;
    color: #9dcbe3;
}

.social-friends-feedback.is-error {
    color: #e7a3ac;
}

.social-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    align-content: start;
    gap: 8px;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(161,168,184,0.55) rgba(255,255,255,0.04);
}

.social-list::-webkit-scrollbar,
.social-direct-chat-log::-webkit-scrollbar {
    width: 7px;
}

.social-list::-webkit-scrollbar-track,
.social-direct-chat-log::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 999px;
}

.social-list::-webkit-scrollbar-thumb,
.social-direct-chat-log::-webkit-scrollbar-thumb {
    background: #0F182F;
    border-radius: 999px;
}

.social-empty {
    border: 1px dashed rgba(183,178,195,0.2);
    border-radius: 10px;
    padding: 14px;
    color: var(--mid);
    text-align: center;
    font-size: 13px;
}

.social-chat-preview {
    color: #e8edf8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.social-direct-chat {
    position: fixed;
    right: 420px;
    bottom: 22px;
    width: min(340px, calc(100vw - 32px));
    height: min(520px, calc(100vh - 70px));
    z-index: 1400;
    border: 1px solid rgba(183,178,195,0.2);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(24,28,39,0.98), rgba(17,21,34,0.98));
    box-shadow: 0 20px 48px rgba(0,0,0,0.45);
    padding: 11px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.97);
    filter: blur(6px);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s, filter 0.35s ease;
}

.social-direct-chat.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    filter: blur(0px);
}

.social-direct-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(183,178,195,0.16);
    padding-bottom: 9px;
}

.social-direct-chat-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.social-direct-chat-meta {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.social-direct-chat-meta strong {
    color: #f1edf8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.social-direct-chat-meta span {
    color: rgba(233, 238, 248, 0.72);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.social-chat-back-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(183,178,195,0.28);
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    color: #d9dbe4;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.social-chat-back-btn:hover {
    background: rgba(76,170,214,0.12);
    border-color: rgba(76,170,214,0.42);
    color: #a8dcf5;
}

.social-chat-back-btn svg {
    width: 18px;
    height: 18px;
}

.social-direct-chat-log {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 7px;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(161,168,184,0.55) rgba(255,255,255,0.04);
}

/* ── Skeleton loading ─────────────────────────────────────── */

@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skeleton-block {
    background: linear-gradient(
        90deg,
        #181e32 25%,
        #252d48 50%,
        #181e32 75%
    );
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Social friends / messages skeleton */
.social-skeleton {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 0;
}

.social-skeleton-search {
    height: 34px;
    width: 68%;
    border-radius: 9px;
    margin-bottom: 6px;
}

.social-skeleton-card {
    height: 68px;
    border-radius: 10px;
    width: 100%;
}

/* Profile skeleton */
.profile-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
}

.profile-skeleton-banner {
    height: 88px;
    border-radius: 10px;
    width: 100%;
}

.profile-skeleton-user {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: -28px;
    padding: 0 4px;
}

.profile-skeleton-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding-bottom: 4px;
}

.profile-skeleton-line-wide  { height: 16px; width: 62%; border-radius: 6px; }
.profile-skeleton-line-mid   { height: 12px; width: 48%; border-radius: 5px; }
.profile-skeleton-line-short { height: 12px; width: 38%; border-radius: 5px; }

.profile-skeleton-label {
    height: 14px;
    width: 36%;
    border-radius: 5px;
    margin-top: 4px;
}

.profile-skeleton-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-skeleton-card-lg {
    height: 140px;
    border-radius: 10px;
}

/* ── End skeleton ──────────────────────────────────────────── */

.social-direct-chat-empty {
    border: 1px dashed rgba(183,178,195,0.2);
    border-radius: 10px;
    color: #9aa2b2;
    text-align: center;
    padding: 16px;
    font-size: 14px;
}

@keyframes menu-spin {
    to { transform: rotate(360deg); }
}

.direct-chat-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(16, 21, 39, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.direct-chat-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(183,178,195,0.15);
    border-top-color: #E94B3C;
    border-radius: 50%;
    animation: menu-spin 0.75s linear infinite;
}

.direct-chat-loading-label {
    color: rgba(215,217,224,0.55);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.social-chat-bubble {
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(183,178,195,0.18);
    background: rgba(255,255,255,0.04);
    color: #eef1f8;
    font-family: var(--chat-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    justify-self: start;
}

.social-chat-bubble.mine {
    justify-self: end;
    border-color: rgba(76,170,214,0.45);
    background: rgba(76,170,214,0.18);
}

.social-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    justify-self: start;
    max-width: 100%;
}

.social-chat-row.mine {
    justify-self: end;
    flex-direction: row-reverse;
}

.social-chat-msg-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.34);
    background: radial-gradient(circle at 30% 30%, rgba(183,178,195,0.5), rgba(59,64,76,0.9));
    color: #f1ecf8;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.social-chat-row .social-chat-bubble {
    max-width: min(86%, 248px);
}

.social-chat-time {
    display: block;
    margin-top: 4px;
    color: #a3acbc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.challenge-bubble {
    border-color: rgba(230, 124, 72, 0.35);
    background: rgba(230, 124, 72, 0.08);
}

.challenge-bubble-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffcd9d;
    margin-bottom: 6px;
}

.challenge-bubble-text {
    font-size: 14px;
    line-height: 1.38;
    color: #f0f4ff;
}

.challenge-bubble-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.challenge-bubble-btn {
    border-radius: 8px;
    border: 1px solid rgba(183,178,195,0.3);
    background: rgba(255,255,255,0.06);
    color: #eef2ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 10px;
    cursor: pointer;
}

.challenge-bubble-btn.accept {
    border-color: rgba(70, 181, 124, 0.48);
    color: #baf4d8;
    background: rgba(54, 168, 112, 0.18);
}

.challenge-bubble-btn.decline {
    border-color: rgba(220, 101, 101, 0.46);
    color: #ffd1d1;
    background: rgba(209, 70, 70, 0.14);
}

.challenge-bubble-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.social-direct-chat-blocked {
    padding: 16px;
    background: rgba(233,75,60,0.1);
    border-top: 1px solid rgba(233,75,60,0.24);
    text-align: center;
}

.social-direct-chat-blocked-title {
    color: #f2b3ac;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.social-direct-chat-blocked-text {
    color: #d8a8a0;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.social-direct-chat-unblock-btn {
    padding: 8px 14px;
    border: 1px solid rgba(233,75,60,0.44);
    background: rgba(233,75,60,0.14);
    color: #f2b3ac;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.social-direct-chat-unblock-btn:hover {
    background: rgba(233,75,60,0.22);
}

.social-direct-chat-blocked-info-title {
    color: #d8a8a0;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 8px;
}

.social-direct-chat-blocked-info-text {
    color: #b88a82;
    font-size: 11px;
    line-height: 1.5;
    font-style: italic;
}

.social-direct-chat-compose {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.social-direct-chat-input {
    min-width: 0;
    border: 1px solid rgba(183,178,195,0.22);
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    padding: 9px 10px;
    font-size: 13px;
    outline: none;
    font-family: var(--chat-font);
}

.social-direct-chat-send {
    width: 46px;
    height: 40px;
    border: 1px solid rgba(76,170,214,0.58);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(76,170,214,0.2), rgba(26,74,112,0.24));
    color: #c5ecff;
    font-size: 18px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.social-direct-chat-send:hover {
    transform: translateY(-1px);
    border-color: rgba(130,217,255,0.8);
    box-shadow: 0 10px 24px rgba(10,38,58,0.34);
}

.chat-send-arrow {
    display: inline-block;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    transform: translateX(1px);
}

#socialDirectChatEmojiPicker {
    right: 0;
    width: min(272px, calc(100vw - 30px));
}

.social-friend-item {
    position: relative;
    border: 1px solid rgba(183,178,195,0.16);
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.social-friend-item:nth-child(even) {
    background: #0E172D;
    border-color: rgba(183,178,195,0.22);
}

.social-friend-item:hover {
    border-color: rgba(76,170,214,0.42);
    background: rgba(76,170,214,0.08);
}

.social-friends-section-label {
    margin: 2px 2px 0;
    color: #aeb4c3;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}
.social-friend-user {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.social-friend-avatar-wrap {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.social-friend-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.44);
    background: radial-gradient(circle at 32% 30%, rgba(183,178,195,0.5), rgba(59,64,76,0.9));
    color: #f4effa;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid rgba(18,22,35,0.95);
    background: #6f7484;
}

.social-presence-dot.online {
    background: #1fc983;
}

.social-friend-meta {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.social-friend-meta strong {
    color: #f1ecf8;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.social-friend-meta span {
    color: var(--low);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.social-friend-subline {
    color: #9ea5b5;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', monospace;
}

.social-friend-actions {
    display: flex;
    gap: 6px;
}

.social-message-row {
    width: 100%;
    border: 1px solid rgba(183,178,195,0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.social-message-row:hover {
    border-color: rgba(76,170,214,0.42);
    background: rgba(76,170,214,0.08);
}

.social-message-user {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.social-message-meta {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.social-message-name {
    color: #f1ecf8;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.social-message-status {
    color: var(--low);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.social-friend-btn {
    border: 1px solid rgba(183,178,195,0.22);
    border-radius: 7px;
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 8px;
    cursor: pointer;
}

.social-friend-btn.is-challenged {
    border-color: rgba(108,191,255,0.72);
    background: linear-gradient(180deg, rgba(70,144,206,0.22), rgba(36,84,136,0.28));
    color: #d8f0ff;
    box-shadow: 0 10px 20px rgba(20,56,88,0.24);
}

.social-friend-btn.unfriend {
    border-color: rgba(233,75,60,0.45);
    color: #f1b2ab;
    background: rgba(233,75,60,0.1);
}

.user-action-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,10,16,0.56);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1900;
    padding: 18px;
}

.user-action-overlay.visible {
    display: flex;
}

.user-action-modal {
    width: min(580px, calc(100vw - 30px));
    border-radius: 16px;
    border: 1px solid rgba(183,178,195,0.24);
    background: linear-gradient(180deg, rgba(24,28,39,0.98), rgba(17,21,34,0.98));
    box-shadow: 0 18px 44px rgba(0,0,0,0.52);
    padding: 18px;
    display: grid;
    gap: 14px;
    max-height: 85vh;
    overflow-y: auto;
}

.user-action-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(183,178,195,0.16);
    padding-bottom: 8px;
}

.user-action-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.user-action-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(183,178,195,0.46);
    background: radial-gradient(circle at 30% 30%, rgba(183,178,195,0.52), rgba(59,64,76,0.9));
    color: #eef2f8;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.user-action-title {
    color: #f2edf8;
    font-size: 28px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.user-action-subtitle {
    color: #a6afbf;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', monospace;
}

.user-action-close {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(183,178,195,0.24);
    background: rgba(255,255,255,0.04);
    color: #d8dce7;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.user-action-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 0;
}

.user-action-stat {
    border: 1px solid rgba(183,178,195,0.18);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    text-align: center;
}

.user-action-stat-label {
    color: #aab1bf;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.user-action-stat-value {
    color: #eef2f8;
    font-size: 18px;
    font-weight: 700;
    margin-top: 6px;
}

.user-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 8px 0;
}

.user-action-btn {
    border: 1px solid rgba(183,178,195,0.24);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #e5e9f1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
    flex: 1;
    min-width: 120px;
}

.user-action-btn.warn {
    border-color: rgba(233,75,60,0.44);
    color: #f2b3ac;
    background: rgba(233,75,60,0.12);
}

.user-action-status {
    min-height: 16px;
    color: #a9b6c6;
    font-size: 12px;
}

.global-chat-peek:hover {
    border-color: rgba(126,199,242,0.52);
    color: #d2ecff;
}

.social-friend-hover-portal {
    position: fixed;
    width: 220px;
    border: 1px solid rgba(183,178,195,0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(27,31,44,0.97), rgba(18,22,35,0.97));
    box-shadow: 0 16px 34px rgba(0,0,0,0.45);
    padding: 9px;
    display: none;
    pointer-events: none;
    z-index: 1600;
}

.social-friend-hover-portal.visible {
    display: grid;
    gap: 3px;
}

.social-friend-hover-title {
    color: #f1edf8;
    font-size: 13px;
    font-weight: 700;
}

.social-friend-hover-meta {
    color: #aab1bf;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 1180px) {
    .social-direct-chat {
        right: 18px;
        bottom: 18px;
        width: min(340px, calc(100vw - 24px));
        height: min(500px, calc(100vh - 44px));
    }

    .global-chat-panel {
        display: none;
    }

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }

    .laser-field,
    .laser-field::after,
    .laser-cube {
        animation: none;
    }
}
}

.requests-composer {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.requests-input-stack {
    position: relative;
    flex: 1;
    min-width: 0;
}

.requests-composer input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    padding: 8px 9px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    outline: none;
}

.requests-composer input:focus {
    border-color: rgba(76,170,214,0.7);
    box-shadow: 0 0 0 3px rgba(76,170,214,0.16);
}

.requests-send-btn {
    border: 1px solid rgba(76,170,214,0.42);
    border-radius: 8px;
    background: rgba(76,170,214,0.14);
    color: #a6dff7;
    padding: 8px 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.requests-send-btn:hover {
    background: rgba(76,170,214,0.22);
    border-color: rgba(76,170,214,0.62);
}

.requests-feedback {
    min-height: 18px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--mid);
}

.friend-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(183,178,195,0.24);
    background: linear-gradient(180deg, rgba(16,21,39,0.98), rgba(26,30,44,0.98));
    box-shadow: 0 16px 34px rgba(0,0,0,0.45);
    max-height: 220px;
    overflow-y: auto;
}

.friend-search-results.visible {
    display: grid;
}

.friend-search-item {
    border: 1px solid rgba(183,178,195,0.2);
    border-radius: 9px;
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    cursor: pointer;
    color: #f2edf8;
    text-align: left;
    width: 100%;
    font: inherit;
}

.friend-search-item:hover,
.friend-search-item.active {
    border-color: rgba(76,170,214,0.52);
    background: rgba(76,170,214,0.12);
}

.friend-search-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.44);
    background: radial-gradient(circle at 32% 30%, rgba(183,178,195,0.5), rgba(59,64,76,0.9));
    color: #f4effa;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.friend-search-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.friend-search-name {
    color: #f0ebf8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-search-meta {
    color: #b8becc;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.friend-search-empty {
    border: 1px dashed rgba(183,178,195,0.2);
    border-radius: 8px;
    color: #a7adbc;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.friend-requests-list {
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 2px;
}

.friend-request-item {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 8px;
    padding: 8px 10px;
    display: grid;
    gap: 7px;
}

.friend-request-user {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.friend-request-user .friend-search-avatar {
    width: 32px;
    height: 32px;
}

.friend-request-user-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.friend-request-rank {
    color: #b8becc;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.friend-request-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.friend-request-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.friend-request-time {
    color: var(--low);
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
}

.unread-message {
    font-weight: 600;
    color: #e8e2f4;
}

.social-unread-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d64545;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.social-message-row.unread {
    border-color: rgba(214,69,69,0.3);
    background: rgba(214,69,69,0.08);
}

.friend-request-actions {
    display: flex;
    gap: 8px;
}

.friend-request-btn {
    flex: 1;
    border: 1px solid var(--line2);
    border-radius: 7px;
    background: rgba(183,178,195,0.1);
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 8px;
    cursor: pointer;
}

.friend-request-btn.accept {
    border-color: rgba(76,170,214,0.54);
    color: #a6dff7;
    background: rgba(76,170,214,0.12);
}

.friend-request-btn.accept:hover {
    border-color: rgba(76,170,214,0.72);
    background: rgba(76,170,214,0.2);
}

.friend-request-btn.decline {
    border-color: rgba(215,32,69,0.48);
    color: #f6a8b7;
    background: rgba(215,32,69,0.1);
}

.friend-request-btn.decline:hover {
    border-color: rgba(215,32,69,0.66);
    background: rgba(215,32,69,0.18);
}

.friend-requests-empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    color: var(--mid);
    text-align: center;
}

.friend-requests-list {
    display: grid;
    align-content: start;
    gap: 12px;
    height: 100%;
    min-height: 0;
    max-height: none;
    align-self: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

.request-section {
    display: grid;
    gap: 10px;
}

.request-section-items {
    display: grid;
    align-content: start;
    gap: 10px;
}

.request-section:last-child {
    margin-bottom: 0;
}

.request-section-title {
    color: #a6dff7;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    padding: 4px 0 2px 0;
    border-bottom: 1px solid rgba(76,170,214,0.2);
}

.friend-suggestion-item {
    border-color: rgba(76,170,214,0.25);
    background: rgba(76,170,214,0.08);
}

/* OBJECTIVES POPUP (LoL-inspired) */
.objectives-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(16,21,39,0.68);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.objectives-overlay.visible {
    display: flex;
    animation: objectivesOverlayIn 0.18s ease-out both;
}

.objectives-overlay.visible .objectives-modal {
    animation: objectivesModalIn 0.28s cubic-bezier(0.22, 0.9, 0.33, 1) both;
}

.objectives-overlay.visible .objective-row {
    animation: objectiveRowIn 0.25s ease both;
    animation-delay: var(--row-delay, 0ms);
}

.objectives-modal {
    width: min(940px, 96vw);
    min-height: min(420px, 60vh);
    max-height: calc(100dvh - 44px);
    background: linear-gradient(180deg, rgba(16,21,39,0.98), rgba(59,64,76,0.9));
    border: 1px solid rgba(183,178,195,0.4);
    box-shadow: 0 36px 90px rgba(0,0,0,0.58);
    display: grid;
    grid-template-columns: 180px 1fr;
    overflow: hidden;
    position: relative;
}

.objectives-sidebar {
    border-right: 1px solid rgba(185,190,202,0.2);
    background: linear-gradient(180deg, rgba(16,21,39,0.97), rgba(59,64,76,0.45));
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.objectives-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--p5);
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.objective-tab {
    width: 100%;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--mid);
    text-align: left;
    padding: 7px 9px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s;
}

.objective-tab:hover {
    color: var(--text);
    border-color: rgba(183,178,195,0.35);
    background: rgba(183,178,195,0.08);
}

.objective-tab.active {
    color: #ece6f7;
    border-left-color: rgba(183,178,195,0.95);
    background: linear-gradient(90deg, rgba(183,178,195,0.2), transparent);
}

.objectives-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.objectives-head {
    border-bottom: 1px solid rgba(185,190,202,0.2);
    background:
        linear-gradient(180deg, rgba(166,168,177,0.12), rgba(166,168,177,0.02)),
        radial-gradient(circle at 20% 20%, rgba(215,32,69,0.2), transparent 50%);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.objectives-head h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    letter-spacing: 0.02em;
    color: #ebe8f2;
}

.objectives-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--mid);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 3px;
}

.objectives-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(166,168,177,0.38);
    background: rgba(16,21,39,0.74);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.objectives-close:hover {
    border-color: rgba(215,32,69,0.62);
    color: #f6b3c2;
    background: rgba(215,32,69,0.2);
}

.objectives-list {
    padding: 10px;
    overflow: auto;
    display: grid;
    gap: 8px;
    align-content: start;
}

.objective-row {
    display: grid;
    grid-template-columns: 60px 1fr 78px;
    gap: 9px;
    align-items: center;
    background: linear-gradient(90deg, rgba(16,21,39,0.96), rgba(59,64,76,0.82));
    border: 1px solid rgba(166,168,177,0.24);
    padding: 9px;
    min-height: 68px;
    opacity: 0;
    transform: translateY(8px);
}

.row-progress {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(16,21,39,0.95);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd8ea;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(166,168,177,0.24);
}

.row-progress::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--row-accent, rgba(183,178,195,0.9));
    border-right-color: var(--row-accent, rgba(183,178,195,0.9));
    transform: rotate(var(--row-angle, 140deg));
    transition: transform 0.3s;
}

.row-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 2px;
}

.row-body {
    font-size: 15px;
    color: #e2dde9;
    line-height: 1.2;
}

.row-meta {
    font-family: 'JetBrains Mono', monospace;
    margin-top: 3px;
    font-size: 9px;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.row-reward {
    justify-self: end;
    width: 70px;
    height: 44px;
    border: 1px solid rgba(166,168,177,0.42);
    background: linear-gradient(180deg, rgba(79,85,98,0.9), rgba(59,64,76,0.88));
    color: #e8e2f2;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 0.9;
}

.row-reward small {
    display: block;
    font-size: 8px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-top: 2px;
    color: #c7c2d1;
}

.row-theme-missions { --row-accent: rgba(215,32,69,0.92); }
.row-theme-achievements { --row-accent: rgba(183,178,195,0.92); }
.row-theme-history { --row-accent: rgba(166,168,177,0.92); }

/* PROFILE MODAL */
.profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1350;
    background: rgba(16,21,39,0.68);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.profile-overlay.visible {
    display: flex;
    animation: objectivesOverlayIn 0.18s ease-out both;
}

.profile-overlay.visible .profile-modal {
    animation: objectivesModalIn 0.24s cubic-bezier(0.22, 0.9, 0.33, 1) both;
}

.profile-modal {
    width: min(980px, 96vw);
    height: min(860px, calc(100dvh - 38px));
    min-height: 0;
    max-height: calc(100dvh - 38px);
    background: linear-gradient(180deg, rgba(16,21,39,0.98), rgba(59,64,76,0.9));
    border: 1px solid rgba(183,178,195,0.4);
    box-shadow: 0 36px 90px rgba(0,0,0,0.58);
    display: grid;
    grid-template-columns: 220px 1fr;
    overflow: hidden;
    position: relative;
}

.profile-sidebar {
    border-right: 1px solid rgba(166,168,177,0.2);
    background: linear-gradient(180deg, rgba(16,21,39,0.97), rgba(59,64,76,0.45));
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--p5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.profile-tab {
    width: 100%;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--mid);
    text-align: left;
    padding: 8px 9px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-tab:hover {
    color: var(--text);
    border-color: rgba(183,178,195,0.35);
    background: rgba(183,178,195,0.08);
}

.profile-tab.active {
    color: #ece6f7;
    border-left-color: rgba(183,178,195,0.95);
    background: linear-gradient(90deg, rgba(183,178,195,0.2), transparent);
}

.profile-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background:
        radial-gradient(circle at 75% 15%, rgba(183,178,195,0.11), transparent 40%),
        radial-gradient(circle at 25% 65%, rgba(215,32,69,0.1), transparent 45%);
}

.profile-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(16,21,39,0.14), transparent 45%, rgba(183,178,195,0.05));
    z-index: 0;
}

.profile-head {
    border-bottom: 1px solid rgba(166,168,177,0.2);
    background:
        linear-gradient(180deg, rgba(166,168,177,0.12), rgba(166,168,177,0.02)),
        radial-gradient(circle at 20% 20%, rgba(215,32,69,0.2), transparent 50%);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-head h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    letter-spacing: 0.02em;
    color: #ebe8f2;
}

.profile-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--mid);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 3px;
}

.profile-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(166,168,177,0.38);
    background: rgba(16,21,39,0.74);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.profile-close:hover {
    border-color: rgba(215,32,69,0.62);
    color: #f6b3c2;
    background: rgba(215,32,69,0.2);
}

.profile-content {
    padding: 14px;
    overflow: auto;
    display: grid;
    gap: 12px;
    align-content: start;
    position: relative;
    z-index: 1;
}

.profile-overview-card {
    border: 1px solid rgba(166,168,177,0.24);
    background: linear-gradient(90deg, rgba(16,21,39,0.96), rgba(59,64,76,0.82));
    border-radius: 10px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.profile-overview-card::before {
    content: '';
    position: absolute;
    inset: -20% 50% auto -25%;
    height: 180px;
    background: radial-gradient(circle, rgba(215,32,69,0.22), transparent 65%);
    pointer-events: none;
}

.profile-overview-card::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.24);
    box-shadow: inset 0 0 0 16px rgba(183,178,195,0.05);
    pointer-events: none;
}

.profile-banner {
    border: 1px solid rgba(183,178,195,0.24);
    border-radius: 10px;
    background:
        linear-gradient(100deg, rgba(16,21,39,0.86) 10%, rgba(59,64,76,0.66) 65%),
        radial-gradient(circle at 70% 20%, rgba(183,178,195,0.18), transparent 40%);
    padding: 10px;
    margin-bottom: 10px;
}

.profile-rank-logo-slot {
    margin-top: 4px;
    border: 1px solid rgba(166,168,177,0.22);
    border-radius: 12px;
    background: linear-gradient(130deg, rgba(16,21,39,0.62), rgba(59,64,76,0.34));
    min-height: 188px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 12px;
}

.profile-rank-emblem-wrap {
    width: min(170px, 100%);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34));
}

.profile-rank-emblem-svg {
    width: 100%;
    height: auto;
    display: block;
}

.profile-rank-logo-caption {
    margin-top: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ece8f6;
    text-align: center;
    line-height: 1;
}

.profile-rank-logo-sub {
    margin-top: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    text-align: center;
}

.profile-banner-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    letter-spacing: 0.03em;
    color: #f0ecf7;
    line-height: 1;
}

.profile-banner-sub {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
}

.profile-badge-row {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.profile-badge {
    border: 1px solid rgba(166,168,177,0.28);
    background: rgba(16,21,39,0.48);
    color: #d9d4e6;
    border-radius: 999px;
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.profile-creative-layout {
    display: grid;
    grid-template-columns: minmax(230px, 252px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.profile-totem-card {
    position: relative;
    border: 1px solid rgba(183,178,195,0.28);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 25%, rgba(215,32,69,0.24), transparent 48%),
        linear-gradient(180deg, rgba(16,21,39,0.95), rgba(31,39,57,0.92));
    padding: 12px;
    overflow: hidden;
}

.profile-totem-card::after {
    content: '';
    position: absolute;
    right: -22px;
    top: 112px;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(183,178,195,0.28);
    height: calc(100vh - 126px);
    box-shadow: inset 0 0 0 10px rgba(183,178,195,0.07);
    opacity: 0.65;
}

.profile-emblem {
    width: 118px;
    height: 118px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(183,178,195,0.42);
    background:
        radial-gradient(circle at 30% 30%, rgba(183,178,195,0.58), rgba(59,64,76,0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 42px;
    color: #f2edf8;
    text-transform: uppercase;
    box-shadow: 0 12px 26px rgba(0,0,0,0.35), 0 0 0 6px rgba(183,178,195,0.1);
}

.profile-emblem-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.profile-totem-name {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 26px;
    font-weight: 700;
    color: #f1edf8;
    letter-spacing: 0.01em;
}

.profile-totem-name-text {
    line-height: 1;
}

.profile-name-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-totem-name-input {
    display: none;
    width: 150px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(166,168,177,0.36);
    background: rgba(16,21,39,0.72);
    color: var(--text);
    padding: 0 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.profile-totem-name-input:focus {
    outline: none;
    border-color: rgba(183,178,195,0.78);
    box-shadow: 0 0 0 3px rgba(183,178,195,0.18);
}

.profile-totem-name.is-editing .profile-totem-name-text {
    display: none;
}

.profile-totem-name.is-editing .profile-totem-name-input {
    display: inline-block;
}

.profile-totem-name.is-editing #profileTotemNameEditBtn {
    display: none;
}

.profile-totem-name:not(.is-editing) #profileTotemNameAcceptBtn,
.profile-totem-name:not(.is-editing) #profileTotemNameCancelBtn {
    display: none;
}

.profile-totem-rank {
    margin-top: 4px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cdc7db;
}

.profile-mini-metrics {
    margin-top: 12px;
    display: grid;
    gap: 7px;
}

.profile-mini-metric {
    border: 1px solid rgba(166,168,177,0.22);
    border-radius: 9px;
    background: rgba(16,21,39,0.45);
    padding: 8px;
}

.profile-mini-metric strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    color: #ece6f7;
    display: block;
    line-height: 1;
}

.profile-mini-metric span {
    margin-top: 4px;
    display: block;
    font-size: 10px;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.profile-right-stack {
    display: grid;
    gap: 10px;
}

.profile-showcase {
    border: 1px solid rgba(183,178,195,0.26);
    border-radius: 12px;
    overflow: hidden;
    background:
        linear-gradient(112deg, rgba(15,20,35,0.96) 20%, rgba(77,84,99,0.8) 100%),
        radial-gradient(circle at 70% 20%, rgba(233,75,60,0.3), transparent 44%);
    min-height: 166px;
    padding: 18px;
    display: grid;
    align-content: end;
    box-shadow: 0 16px 34px rgba(0,0,0,0.24);
}

.profile-showcase-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    line-height: 1;
    color: #f3eef9;
    letter-spacing: 0.03em;
}

.profile-showcase-sub {
    margin-top: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cec8da;
}

.profile-edit-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-inline-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(183,178,195,0.42);
    background: linear-gradient(180deg, rgba(59,64,76,0.9), rgba(16,21,39,0.96));
    color: #e7e2f2;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.profile-inline-icon-btn:hover {
    border-color: rgba(183,178,195,0.62);
    color: #ece6f7;
    background: linear-gradient(180deg, rgba(183,178,195,0.22), rgba(16,21,39,0.94));
    box-shadow: 0 0 0 3px rgba(183,178,195,0.14);
}

.profile-inline-icon-btn.name-pen {
    border-color: rgba(161,118,210,0.66);
    color: #d9bef9;
    background: linear-gradient(180deg, rgba(125,80,170,0.34), rgba(34,26,52,0.9));
}

.profile-inline-icon-btn.name-pen:hover {
    border-color: rgba(185,139,236,0.95);
    color: #f0dbff;
    background: linear-gradient(180deg, rgba(154,95,220,0.44), rgba(44,30,66,0.92));
    box-shadow: 0 0 0 3px rgba(161,118,210,0.2);
}

.profile-inline-icon-btn.avatar-pen {
    border-color: rgba(86,144,232,0.68);
    color: #bddaff;
    background: linear-gradient(180deg, rgba(56,108,189,0.38), rgba(18,30,52,0.9));
}

.profile-inline-icon-btn.avatar-pen:hover {
    border-color: rgba(108,170,255,0.96);
    color: #e2f0ff;
    background: linear-gradient(180deg, rgba(75,130,214,0.5), rgba(20,36,62,0.95));
    box-shadow: 0 0 0 3px rgba(86,144,232,0.22);
}

.profile-inline-icon-btn.name-accept-btn {
    border-color: rgba(62,181,116,0.65);
    color: #c9f5db;
    background: linear-gradient(180deg, rgba(43,143,90,0.36), rgba(20,42,31,0.9));
}

.profile-inline-icon-btn.name-accept-btn:hover {
    border-color: rgba(88,214,142,0.92);
    color: #e4ffef;
    background: linear-gradient(180deg, rgba(53,172,107,0.5), rgba(24,52,37,0.92));
    box-shadow: 0 0 0 3px rgba(62,181,116,0.2);
}

.profile-inline-icon-btn.name-cancel-btn {
    border-color: rgba(215,88,105,0.66);
    color: #ffd6dd;
    background: linear-gradient(180deg, rgba(165,51,66,0.38), rgba(52,18,26,0.9));
}

.profile-inline-icon-btn.name-cancel-btn:hover {
    border-color: rgba(236,112,131,0.95);
    color: #ffe8ec;
    background: linear-gradient(180deg, rgba(188,63,82,0.5), rgba(64,20,32,0.94));
    box-shadow: 0 0 0 3px rgba(215,88,105,0.2);
}

.profile-inline-editor {
    margin-top: 10px;
    display: none;
    align-items: center;
    gap: 8px;
}

.profile-inline-editor.is-open {
    display: flex;
}

.profile-inline-editor input {
    flex: 1;
    min-width: 0;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(166,168,177,0.36);
    background: rgba(16,21,39,0.68);
    color: var(--text);
    padding: 0 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
}

.profile-inline-editor input:focus {
    outline: none;
    border-color: rgba(215,32,69,0.6);
    box-shadow: 0 0 0 3px rgba(215,32,69,0.15);
}

.profile-inline-save {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(215,32,69,0.55);
    background: linear-gradient(180deg, rgba(215,32,69,0.24), rgba(165,16,46,0.24));
    color: #ffd4de;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-inline-save:hover {
    border-color: rgba(215,32,69,0.8);
    background: linear-gradient(180deg, rgba(215,32,69,0.38), rgba(165,16,46,0.36));
}

.profile-inline-note {
    margin-top: 7px;
    min-height: 15px;
    font-size: 11px;
    color: #bbb5c8;
    text-align: center;
}

.profile-avatar-edit-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.profile-avatar-picker {
    margin-top: 12px;
    display: none;
    gap: 9px;
    align-items: stretch;
}

.profile-avatar-picker.is-open {
    display: grid;
}

.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

.profile-avatar-choice {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.45);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.profile-avatar-choice:hover {
    transform: translateY(-1px) scale(1.04);
    border-color: rgba(215,32,69,0.78);
    box-shadow: 0 0 0 3px rgba(215,32,69,0.15);
}

.profile-avatar-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(166,168,177,0.45);
    background: rgba(16,21,39,0.62);
    color: #dbd5e7;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.profile-avatar-upload:hover {
    border-color: rgba(183,178,195,0.7);
    background: rgba(183,178,195,0.14);
}

.profile-avatar-upload input {
    display: none;
}

.avatar-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1460;
    background: rgba(16,21,39,0.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.avatar-popup-overlay.visible {
    display: flex;
    animation: objectivesOverlayIn 0.18s ease-out both;
}

.avatar-popup-modal {
    width: min(760px, 96vw);
    background: linear-gradient(180deg, rgba(14,20,37,0.98), rgba(39,45,62,0.94));
    border: 1px solid rgba(183,178,195,0.34);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.58);
    padding: 16px;
}

.avatar-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.avatar-popup-head h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    color: var(--p5);
    line-height: 1;
}

.avatar-popup-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line2);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.avatar-popup-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 12px 0 14px;
}

.avatar-popup-subheader {
    margin-top: -8px;
    margin-bottom: 10px;
    color: rgba(196,198,210,0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.profile-avatar-choice {
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    width: 100%;
}

.profile-avatar-choice-visual {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid rgba(221,221,224,0.5);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.28);
}

.profile-avatar-choice-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: rgba(215,217,224,0.56);
    text-transform: uppercase;
    transition: color 0.18s ease;
    text-align: center;
    min-height: 14px;
    font-weight: 700;
}

.profile-avatar-choice-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.06em;
    color: rgba(215,217,224,0.4);
    text-align: center;
    font-style: italic;
    min-height: 12px;
    transition: color 0.18s ease;
}

.profile-avatar-choice:hover .profile-avatar-choice-visual {
    transform: scale(1.08);
    border-color: rgba(194,24,54,0.95);
    box-shadow: 0 0 12px rgba(194,24,54,0.5), 0 10px 20px rgba(0,0,0,0.38);
}

.profile-avatar-choice:hover .profile-avatar-choice-name,
.profile-avatar-choice.is-selected .profile-avatar-choice-name,
.profile-avatar-choice:hover .profile-avatar-choice-sub,
.profile-avatar-choice.is-selected .profile-avatar-choice-sub {
    color: #c21836;
}

.profile-avatar-choice.is-selected .profile-avatar-choice-visual {
    transform: scale(1.08);
    border-color: rgba(194,24,54,0.95);
    box-shadow: 0 0 16px rgba(194,24,54,0.58), 0 10px 22px rgba(0,0,0,0.42);
}

.avatar-popup-chosen {
    margin-top: 8px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(194,24,54,0.25);
    background: rgba(194,24,54,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-popup-chosen-preview {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 1px solid rgba(166,168,177,0.35);
    background: #1c1e26 center/cover no-repeat;
    flex-shrink: 0;
}

.avatar-popup-chosen-info {
    min-width: 0;
    flex: 1;
}

.avatar-popup-chosen-title {
    color: #c21836;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
}

.avatar-popup-chosen-desc {
    margin-top: 4px;
    color: rgba(196,198,210,0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.08em;
    line-height: 1.5;
}

.avatar-popup-confirm {
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    border: 0;
    background: #c21836;
    color: #dddde0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.avatar-popup-confirm:hover {
    background: #e03a3a;
}

.avatar-popup-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-stat-grid {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.profile-stat-grid--lowered {
    margin-top: 14px;
}

.profile-stat {
    border: 1px solid rgba(166,168,177,0.24);
    border-radius: 10px;
    background: linear-gradient(140deg, rgba(16,21,39,0.65), rgba(59,64,76,0.36));
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.profile-stat::before {
    content: '';
    position: absolute;
    inset: -20px auto auto -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215,32,69,0.16), transparent 65%);
    pointer-events: none;
}

.profile-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 21px;
    color: #ece8f6;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.profile-stat-label {
    margin-top: 5px;
    font-size: 10px;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    position: relative;
    z-index: 1;
}

.profile-history-shell {
    border: 1px dashed rgba(166,168,177,0.35);
    border-radius: 12px;
    padding: 14px;
    background: linear-gradient(120deg, rgba(16,21,39,0.58), rgba(59,64,76,0.28));
    display: grid;
    gap: 10px;
}

.profile-history-row {
    border: 1px solid rgba(166,168,177,0.2);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    background: rgba(16,21,39,0.42);
    color: #ddd7e9;
}

.profile-history-row strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
    color: #efeaf8;
}

.profile-history-row span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mid);
}

.profile-history-tag {
    align-self: center;
    border: 1px solid rgba(183,178,195,0.34);
    border-radius: 999px;
    padding: 5px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #d7d2e4;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.placement-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.placement-group {
    border: 1px solid rgba(166,168,177,0.24);
    border-radius: 12px;
    background: linear-gradient(130deg, rgba(16,21,39,0.9), rgba(59,64,76,0.74));
    overflow: hidden;
}

.placement-group h5 {
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ece6f7;
    border-bottom: 1px solid rgba(166,168,177,0.24);
    background: linear-gradient(90deg, rgba(183,178,195,0.2), transparent);
}

.placement-row {
    display: grid;
    grid-template-columns: 28px 1fr 88px;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    border-top: 1px solid rgba(166,168,177,0.14);
    font-size: 13px;
    color: #f1f4fb;
    font-weight: 600;
}

.placement-row:first-child {
    border-top: none;
}

.placement-row.current-user {
    background: linear-gradient(90deg, rgba(233,75,60,0.34), rgba(183,178,195,0.12));
}

.placement-rank {
    font-family: 'JetBrains Mono', monospace;
    color: #edf1fa;
    font-size: 11px;
}

.placement-elo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #f4f7fd;
    text-align: right;
    font-weight: 700;
}

.placement-tier-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    padding: 0 2px;
}

.placement-tier-tab {
    padding: 6px 10px;
    border: 1px solid rgba(166,168,177,0.3);
    border-radius: 6px;
    background: rgba(59,64,76,0.4);
    color: #b8b4c8;
    font-size: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.placement-tier-tab:hover {
    background: rgba(59,64,76,0.7);
    border-color: rgba(166,168,177,0.5);
    color: #e8e3f0;
}

.placement-tier-tab.active {
    background: linear-gradient(90deg, rgba(215,32,69,0.4), rgba(183,178,195,0.2));
    border-color: #d72045;
    color: #ff6b9d;
}

.profile-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.profile-highlight-card {
    border: 1px solid rgba(166,168,177,0.24);
    border-radius: 11px;
    background: linear-gradient(130deg, rgba(16,21,39,0.65), rgba(59,64,76,0.33));
    padding: 12px;
    min-height: 96px;
    position: relative;
    overflow: hidden;
}

.profile-highlight-card::before {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.25);
    box-shadow: inset 0 0 0 12px rgba(183,178,195,0.06);
}

.profile-highlight-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 34px;
    line-height: 1;
    color: #f0ebf8;
}

.profile-highlight-label {
    margin-top: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mid);
}

.profile-hero {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 10px;
    align-items: center;
}

.profile-hero-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(183,178,195,0.6);
    background: radial-gradient(circle at 30% 30%, rgba(183,178,195,0.55), rgba(59,64,76,0.9));
    color: #f2edf8;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.profile-hero-name {
    font-size: 22px;
    font-weight: 700;
    color: #ece8f6;
    line-height: 1;
}

.profile-hero-meta {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mid);
}

.profile-rank-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ece6f7;
    border: 1px solid rgba(183,178,195,0.44);
    background: rgba(183,178,195,0.14);
    border-radius: 999px;
    padding: 6px 10px;
}

.profile-stat-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.profile-stat {
    border: 1px solid rgba(166,168,177,0.24);
    border-radius: 8px;
    background: rgba(16,21,39,0.48);
    padding: 9px;
}

.profile-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    color: #ece8f6;
    line-height: 1;
}

.profile-stat-label {
    margin-top: 4px;
    font-size: 10px;
    color: var(--mid);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-empty {
    border: 1px dashed rgba(166,168,177,0.35);
    border-radius: 10px;
    padding: 22px;
    text-align: center;
    color: var(--mid);
    font-size: 14px;
    background: rgba(16,21,39,0.38);
}

.placement-container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.placement-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

.placement-head-row {
    display: grid;
    grid-template-columns: 52px 1fr 88px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(166,168,177,0.24);
    background: rgba(10, 13, 24, 0.68);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #edf1fb;
}

.placement-scroll-body {
    max-height: 394px;
    overflow-y: auto;
    overflow-x: hidden;
}

.placement-scroll-body::-webkit-scrollbar {
    width: 6px;
}

.placement-scroll-body::-webkit-scrollbar-track {
    background: rgba(166,168,177,0.08);
    border-radius: 4px;
}

.placement-scroll-body::-webkit-scrollbar-thumb {
    background: rgba(215,32,69,0.44);
    border-radius: 4px;
}

.placement-scroll-body::-webkit-scrollbar-thumb:hover {
    background: rgba(215,32,69,0.62);
}

.placement-emblem-panel {
    --tier-core: #df9a47;
    --tier-glow: rgba(223, 154, 71, 0.26);
    --combo-piece-anim: placementComboPieceBronze;
    --combo-flash-anim: placementComboFlashBronze;
    --combo-ring-anim: placementComboRingBronze;
    --combo-reveal-anim: placementEmblemRevealBronze;
    --combo-float-anim: placementEmblemFloatBronze;
    --combo-piece-duration: 1120ms;
    --combo-flash-duration: 460ms;
    --combo-ring-duration: 560ms;
    --combo-reveal-duration: 540ms;
    --combo-flash-delay: 640ms;
    --combo-ring-delay: 620ms;
    --combo-reveal-delay: 650ms;
    border: 1px solid rgba(166,168,177,0.22);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(24, 27, 43, 0.84), rgba(12, 14, 24, 0.85));
    min-height: 482px;
    display: grid;
    place-items: center;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.placement-emblem-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 36%, var(--tier-glow), transparent 58%);
    pointer-events: none;
}

.placement-emblem-panel.tier-bronze {
    --tier-core: #df9a47;
    --tier-glow: rgba(223, 154, 71, 0.24);
}

.placement-emblem-panel.tier-silver {
    --tier-core: #b6c6de;
    --tier-glow: rgba(182, 198, 222, 0.24);
    --combo-piece-anim: placementComboPieceSilver;
    --combo-flash-anim: placementComboFlashSilver;
    --combo-ring-anim: placementComboRingSilver;
    --combo-reveal-anim: placementEmblemRevealSilver;
    --combo-float-anim: placementEmblemFloatSilver;
    --combo-piece-duration: 1280ms;
    --combo-reveal-delay: 700ms;
}

.placement-emblem-panel.tier-gold {
    --tier-core: #f5c55a;
    --tier-glow: rgba(245, 197, 90, 0.24);
    --combo-piece-anim: placementComboPieceGold;
    --combo-flash-anim: placementComboFlashGold;
    --combo-ring-anim: placementComboRingGold;
    --combo-reveal-anim: placementEmblemRevealGold;
    --combo-float-anim: placementEmblemFloatGold;
    --combo-piece-duration: 1060ms;
    --combo-flash-delay: 580ms;
    --combo-ring-delay: 560ms;
    --combo-reveal-delay: 610ms;
}

.placement-emblem-panel.tier-platinum {
    --tier-core: #5ed8cf;
    --tier-glow: rgba(94, 216, 207, 0.24);
    --combo-piece-anim: placementComboPiecePlatinum;
    --combo-flash-anim: placementComboFlashPlatinum;
    --combo-ring-anim: placementComboRingPlatinum;
    --combo-reveal-anim: placementEmblemRevealPlatinum;
    --combo-float-anim: placementEmblemFloatPlatinum;
    --combo-piece-duration: 1220ms;
    --combo-flash-duration: 520ms;
    --combo-ring-duration: 620ms;
    --combo-reveal-delay: 680ms;
}

.placement-emblem-panel.tier-diamond {
    --tier-core: #63c5ff;
    --tier-glow: rgba(99, 197, 255, 0.24);
    --combo-piece-anim: placementComboPieceDiamond;
    --combo-flash-anim: placementComboFlashDiamond;
    --combo-ring-anim: placementComboRingDiamond;
    --combo-reveal-anim: placementEmblemRevealDiamond;
    --combo-float-anim: placementEmblemFloatDiamond;
    --combo-piece-duration: 980ms;
    --combo-flash-duration: 420ms;
    --combo-ring-duration: 500ms;
    --combo-flash-delay: 560ms;
    --combo-ring-delay: 540ms;
    --combo-reveal-delay: 600ms;
}

.placement-emblem-panel.tier-grand-master {
    --tier-core: #ff5f80;
    --tier-glow: rgba(255, 95, 128, 0.24);
    --combo-piece-anim: placementComboPieceGrandMaster;
    --combo-flash-anim: placementComboFlashGrandMaster;
    --combo-ring-anim: placementComboRingGrandMaster;
    --combo-reveal-anim: placementEmblemRevealGrandMaster;
    --combo-float-anim: placementEmblemFloatGrandMaster;
    --combo-piece-duration: 1340ms;
    --combo-flash-duration: 560ms;
    --combo-ring-duration: 660ms;
    --combo-flash-delay: 720ms;
    --combo-ring-delay: 700ms;
    --combo-reveal-delay: 760ms;
}

.placement-emblem-combo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.placement-combo-piece {
    --sx: 0px;
    --sy: 0px;
    --rot: 0deg;
    --delay: 0ms;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--tier-core) 74%, #ffffff 26%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tier-core) 56%, transparent), transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--tier-core) 38%, transparent);
    opacity: 0;
    transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--rot)) scale(0.88);
    animation: var(--combo-piece-anim) var(--combo-piece-duration) cubic-bezier(0.19, 0.92, 0.22, 1) var(--delay) both;
}

.placement-emblem-panel.tier-silver .placement-combo-piece {
    width: 32px;
    height: 14px;
    border-radius: 3px;
}

.placement-emblem-panel.tier-gold .placement-combo-piece {
    width: 30px;
    height: 18px;
}

.placement-emblem-panel.tier-platinum .placement-combo-piece {
    width: 34px;
    height: 12px;
    border-radius: 2px;
}

.placement-emblem-panel.tier-diamond .placement-combo-piece {
    width: 28px;
    height: 10px;
    border-radius: 2px;
}

.placement-emblem-panel.tier-grand-master .placement-combo-piece {
    width: 40px;
    height: 16px;
}

.placement-combo-piece.piece-1 { --sx: -118px; --sy: -132px; --rot: -42deg; --delay: 0ms; }
.placement-combo-piece.piece-2 { --sx: 122px; --sy: -124px; --rot: 36deg; --delay: 60ms; }
.placement-combo-piece.piece-3 { --sx: -146px; --sy: -6px; --rot: -20deg; --delay: 110ms; }
.placement-combo-piece.piece-4 { --sx: 150px; --sy: 2px; --rot: 20deg; --delay: 170ms; }
.placement-combo-piece.piece-5 { --sx: -106px; --sy: 132px; --rot: -30deg; --delay: 210ms; }
.placement-combo-piece.piece-6 { --sx: 114px; --sy: 134px; --rot: 30deg; --delay: 260ms; }
.placement-combo-piece.piece-7 { --sx: 0px; --sy: -166px; --rot: 0deg; --delay: 320ms; }
.placement-combo-piece.piece-8 { --sx: 0px; --sy: 170px; --rot: 0deg; --delay: 380ms; }

@media (max-height: 1100px) {
    body {
        align-items: center;
        overflow-y: auto;
        padding: 24px 20px;
    }

    .card {
        height: min(78vh, 760px);
        max-height: min(78vh, 760px);
        display: flex;
        flex-direction: column;
    }

    .modes {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .top-dock {
        top: 10px;
    }

    #socialPanel,
    .social-panel,
    #globalChatPanel,
    .global-chat-panel {
        top: 88px;
        height: calc(100dvh - 104px);
        max-height: calc(100dvh - 104px);
    }

    .profile-overlay,
    .objectives-overlay {
        align-items: center;
        overflow-y: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .profile-modal,
    .objectives-modal {
        min-height: 0;
        height: auto;
        max-height: calc(100dvh - 24px);
    }

    .profile-content {
        padding: 12px;
        gap: 10px;
    }

    .profile-rank-logo-slot {
        min-height: 172px;
    }

    .profile-showcase {
        min-height: 148px;
        padding: 16px;
    }

    .profile-rank-logo-caption {
        font-size: 36px;
    }

    .profile-head h3 {
        font-size: 28px;
    }
}

@media (max-width: 1480px) {
    .profile-modal {
        width: min(940px, 96vw);
    }

    .profile-sidebar {
        padding: 12px 9px;
    }

    .profile-tab {
        font-size: 15px;
        padding: 7px 8px;
    }

    .profile-creative-layout {
        grid-template-columns: minmax(214px, 232px) minmax(0, 1fr);
    }

    .profile-rank-logo-caption {
        font-size: 34px;
    }

    .profile-showcase-title {
        font-size: 34px;
    }
}

@media (max-height: 950px) {
    .profile-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .profile-modal {
        height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .profile-head {
        padding: 10px 12px;
    }

    .profile-content {
        padding: 10px;
        gap: 9px;
    }

    .profile-creative-layout {
        grid-template-columns: minmax(202px, 220px) minmax(0, 1fr);
        gap: 9px;
    }

    .profile-rank-logo-slot {
        min-height: 160px;
    }

    .profile-showcase {
        min-height: 136px;
        padding: 14px;
    }

    .profile-showcase-title {
        font-size: 30px;
    }
}

.placement-combo-flash,
.placement-combo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.placement-combo-flash {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    background: radial-gradient(circle, color-mix(in srgb, var(--tier-core) 68%, #fff 32%) 0%, color-mix(in srgb, var(--tier-core) 32%, transparent) 34%, transparent 72%);
    animation: var(--combo-flash-anim) var(--combo-flash-duration) ease-out var(--combo-flash-delay) both;
    filter: blur(0.4px);
}

.placement-combo-ring {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--tier-core) 84%, #ffffff 16%);
    transform: translate(-50%, -50%) scale(0.5);
    animation: var(--combo-ring-anim) var(--combo-ring-duration) cubic-bezier(0.16, 0.86, 0.24, 1) var(--combo-ring-delay) both;
}

.placement-emblem-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    animation: var(--combo-reveal-anim) var(--combo-reveal-duration) cubic-bezier(0.2, 0.94, 0.23, 1) var(--combo-reveal-delay) both;
}

.placement-emblem-svg {
    width: 220px;
    height: 260px;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    animation: var(--combo-float-anim) 2.8s ease-in-out 1.2s infinite alternate;
}

.placement-emblem-rank {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #ece6f7;
    line-height: 1;
}

.placement-emblem-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a8a3ba;
}

.placement-group {
    border: 1px solid rgba(166,168,177,0.24);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(16,21,39,0.9), rgba(59,64,76,0.74));
    overflow: hidden;
    width: 100%;
}

.placement-group h5 {
    padding: 12px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ece6f7;
    border-bottom: 1px solid rgba(166,168,177,0.24);
    background: rgba(183,178,195,0.12);
    font-weight: 600;
}

.placement-row {
    display: grid;
    grid-template-columns: 52px 1fr 96px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid rgba(166,168,177,0.14);
    font-size: 14px;
    color: #e8e3f0;
}

.placement-row:first-child {
    border-top: none;
}

.placement-rank {
    font-family: 'JetBrains Mono', monospace;
    color: #c9c4d6;
    font-size: 10px;
}

.placement-elo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #d6d1e2;
    text-align: right;
}

.placement-tier-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    padding: 0 2px;
}

.placement-tier-tab {
    padding: 7px 12px;
    border: 1px solid rgba(166,168,177,0.3);
    border-radius: 6px;
    background: rgba(59,64,76,0.4);
    color: #b8b4c8;
    font-size: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.placement-tier-tab:hover {
    background: rgba(59,64,76,0.7);
    border-color: rgba(166,168,177,0.5);
    color: #e8e3f0;
}

.placement-tier-tab.active {
    background: linear-gradient(90deg, rgba(215,32,69,0.4), rgba(183,178,195,0.2));
    border-color: #d72045;
    color: #ff6b9d;
}

@keyframes placementComboPieceBronze {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--rot)) scale(0.9);
    }
    22% {
        opacity: 0.92;
    }
    75% {
        opacity: 0.88;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.34);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.08);
    }
}

@keyframes placementComboPieceSilver {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(150deg) scale(0.8);
    }
    28% {
        opacity: 0.95;
        transform: translate(calc(-50% + 24px), calc(-50% - 20px)) rotate(220deg) scale(0.8);
    }
    76% {
        opacity: 0.84;
        transform: translate(-50%, -50%) rotate(420deg) scale(0.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(540deg) scale(0.1);
    }
}

@keyframes placementComboPieceGold {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy) - 120px)) rotate(var(--rot)) scale(0.64);
    }
    34% {
        opacity: 0.96;
        transform: translate(calc(-50% + 12px), calc(-50% - 34px)) rotate(18deg) scale(0.95);
    }
    72% {
        opacity: 0.86;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.26);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.06);
    }
}

@keyframes placementComboPiecePlatinum {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--rot)) skewX(14deg) scale(0.74);
    }
    30% {
        opacity: 0.95;
        transform: translate(calc(-50% - 20px), calc(-50% + 16px)) rotate(-18deg) skewX(-10deg) scale(1);
    }
    70% {
        opacity: 0.8;
        transform: translate(-50%, -50%) rotate(0deg) skewX(0deg) scale(0.34);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.08);
    }
}

@keyframes placementComboPieceDiamond {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(calc(var(--rot) * 1.8)) scale(0.7);
    }
    24% {
        opacity: 0.98;
        transform: translate(calc(-50% + 20px), calc(-50% - 18px)) rotate(170deg) scale(0.9);
    }
    48% {
        opacity: 0.34;
        transform: translate(calc(-50% + 18px), calc(-50% - 16px)) rotate(300deg) scale(0.5);
    }
    74% {
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(356deg) scale(0.34);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg) scale(0.08);
    }
}

@keyframes placementComboPieceGrandMaster {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(280deg) scale(1.08);
    }
    26% {
        opacity: 0.98;
        transform: translate(calc(-50% - 30px), calc(-50% + 28px)) rotate(200deg) scale(1.18);
    }
    60% {
        opacity: 0.96;
        transform: translate(calc(-50% - 4px), calc(-50% + 4px)) rotate(350deg) scale(0.42);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg) scale(0.08);
    }
}

@keyframes placementComboFlashBronze {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.24);
    }
    42% {
        opacity: 0.82;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes placementComboFlashSilver {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
    }
    50% {
        opacity: 0.68;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.14);
    }
}

@keyframes placementComboFlashGold {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.22);
        filter: saturate(1.1);
    }
    46% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
        filter: saturate(1.25);
    }
}

@keyframes placementComboFlashPlatinum {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.16);
    }
    38% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes placementComboFlashDiamond {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.14);
    }
    30% {
        opacity: 0.98;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

@keyframes placementComboFlashGrandMaster {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.12);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.34);
    }
}

@keyframes placementComboRingBronze {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    36% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(7.2);
    }
}

@keyframes placementComboRingSilver {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45);
    }
    35% {
        opacity: 0.82;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(6.2);
    }
}

@keyframes placementComboRingGold {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    38% {
        opacity: 0.92;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8.2);
    }
}

@keyframes placementComboRingPlatinum {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    34% {
        opacity: 0.74;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(6.7);
    }
}

@keyframes placementComboRingDiamond {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35);
    }
    32% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8.8);
    }
}

@keyframes placementComboRingGrandMaster {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.32);
    }
    34% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(9.4);
    }
}

@keyframes placementEmblemRevealBronze {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.86);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes placementEmblemRevealSilver {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.82) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes placementEmblemRevealGold {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.8);
        filter: saturate(1.2);
    }
    56% {
        transform: translateY(-4px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes placementEmblemRevealPlatinum {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.84) skewY(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) skewY(0deg);
    }
}

@keyframes placementEmblemRevealDiamond {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(0.78) rotate(-4deg);
    }
    66% {
        transform: translateY(-2px) scale(1.04) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes placementEmblemRevealGrandMaster {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.74);
    }
    62% {
        transform: translateY(-6px) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes placementEmblemFloatBronze {
    0% {
        transform: translateY(0px);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    }
    100% {
        transform: translateY(-5px);
        filter: drop-shadow(0 13px 24px color-mix(in srgb, var(--tier-core) 32%, #000000 68%));
    }
}

@keyframes placementEmblemFloatSilver {
    0% {
        transform: translateY(0px) rotate(-0.4deg);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    }
    100% {
        transform: translateY(-4px) rotate(0.4deg);
        filter: drop-shadow(0 13px 24px color-mix(in srgb, var(--tier-core) 34%, #000000 66%));
    }
}

@keyframes placementEmblemFloatGold {
    0% {
        transform: translateY(0px);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    }
    50% {
        transform: translateY(-7px);
    }
    100% {
        transform: translateY(-3px);
        filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--tier-core) 36%, #000000 64%));
    }
}

@keyframes placementEmblemFloatPlatinum {
    0% {
        transform: translateY(0px) rotate(0deg);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    }
    100% {
        transform: translateY(-5px) rotate(0.8deg);
        filter: drop-shadow(0 13px 24px color-mix(in srgb, var(--tier-core) 30%, #000000 70%));
    }
}

@keyframes placementEmblemFloatDiamond {
    0% {
        transform: translateY(0px);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    }
    100% {
        transform: translateY(-6px);
        filter: drop-shadow(0 15px 26px color-mix(in srgb, var(--tier-core) 38%, #000000 62%));
    }
}

@keyframes placementEmblemFloatGrandMaster {
    0% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
    }
    100% {
        transform: translateY(-8px) scale(1.01);
        filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--tier-core) 42%, #000000 58%));
    }
}

/* SETTINGS MODAL */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(16,21,39,0.68);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.settings-overlay.visible {
    display: flex;
    animation: objectivesOverlayIn 0.18s ease-out both;
}

.settings-overlay.visible .settings-modal {
    animation: objectivesModalIn 0.24s cubic-bezier(0.22, 0.9, 0.33, 1) both;
}

.settings-modal {
    width: min(460px, 96vw);
    background: linear-gradient(180deg, rgba(16,21,39,0.98), rgba(59,64,76,0.9));
    border: 1px solid rgba(183,178,195,0.42);
    box-shadow: 0 34px 84px rgba(0,0,0,0.52);
    border-radius: 14px;
    overflow: hidden;
}

.settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(166,168,177,0.24);
    background:
        linear-gradient(180deg, rgba(166,168,177,0.12), rgba(166,168,177,0.02)),
        radial-gradient(circle at 15% 20%, rgba(215,32,69,0.2), transparent 50%);
}

.settings-head h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    letter-spacing: 0.02em;
    color: #ece8f6;
}

.settings-sub {
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
}

.settings-close {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(166,168,177,0.38);
    border-radius: 8px;
    background: rgba(16,21,39,0.74);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
}

.settings-close:hover {
    border-color: rgba(215,32,69,0.62);
    color: #f6b3c2;
    background: rgba(215,32,69,0.2);
}

.settings-body {
    padding: 12px;
    display: grid;
    gap: 9px;
}

.settings-row {
    border: 1px solid rgba(166,168,177,0.24);
    background: linear-gradient(90deg, rgba(16,21,39,0.96), rgba(59,64,76,0.82));
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.settings-title {
    font-size: 15px;
    color: var(--text);
    font-weight: 600;
    line-height: 1.1;
}

.settings-note {
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid);
}

.settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(166,168,177,0.34);
    background: rgba(59,64,76,0.86);
    color: #ddd8ea;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.settings-toggle.is-on {
    border-color: rgba(215,32,69,0.56);
    background: rgba(215,32,69,0.2);
    color: #f6c6d1;
}

.settings-volume {
    display: grid;
    gap: 6px;
}

.settings-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-volume input[type='range'] {
    width: 100%;
    accent-color: #d72045;
    cursor: pointer;
}

.settings-volume-value {
    min-width: 44px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #ece8f6;
}

@keyframes objectivesOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes objectivesModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes objectiveRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
    .top-dock {
        top: 10px;
        right: 12px;
        gap: 6px;
        padding: 6px 8px;
    }

    .feature-dock {
        gap: 6px;
    }

    .dock-btn,
    .profile-btn {
        height: 40px;
    }

    .dock-btn {
        width: 36px;
        border-radius: 10px;
    }

    .dock-icon {
        width: 17px;
        height: 17px;
    }

    .dock-badge {
        min-width: 15px;
        height: 15px;
        font-size: 9px;
        top: -4px;
        right: -4px;
    }

    .profile-meta {
        display: none;
    }

    .profile-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .profile-avatar-shell {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .dock-popover {
        top: 64px;
        right: 12px;
    }

    .objectives-overlay,
    .settings-overlay,
    .profile-overlay {
        padding: 10px;
    }

    .profile-modal,
    .objectives-modal {
        width: 100%;
        min-height: 0;
        height: auto;
        max-height: calc(100dvh - 20px);
        grid-template-columns: 1fr;
    }

    .profile-sidebar,
    .objectives-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(185,190,202,0.2);
        padding: 12px;
        gap: 8px;
    }

    .profile-head h3,
    .settings-head h3,
    .objectives-head h3 {
        font-size: 24px;
    }

    .profile-stat-grid,
    .profile-highlights-grid,
    .settings-row,
    .placement-board,
    .placement-container {
        grid-template-columns: 1fr;
    }

    .profile-creative-layout {
        grid-template-columns: 1fr;
    }

    .profile-edit-inline-row,
    .settings-toggle {
        align-items: flex-start;
        justify-self: start;
    }

    .profile-showcase {
        min-height: 144px;
        padding: 16px;
    }

    .profile-showcase-title {
        font-size: 26px;
    }

    .profile-inline-editor {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-inline-save {
        width: 100%;
    }

    .profile-emblem {
        width: 94px;
        height: 94px;
        font-size: 32px;
    }

    .placement-emblem-panel {
        min-height: 300px;
    }

    .placement-emblem-svg {
        width: 170px;
        height: 196px;
    }

    .profile-rank-pill {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .objectives-title {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .objective-tab {
        font-size: 14px;
        padding: 8px 8px;
    }

    .objectives-head {
        padding: 12px;
    }

    .objectives-list {
        padding: 10px;
    }

    .objective-row {
        grid-template-columns: 56px 1fr;
        gap: 8px;
        min-height: 72px;
    }

    .row-title {
        font-size: 14px;
    }

    .row-body {
        font-size: 13px;
    }

    .row-reward {
        grid-column: 2;
        justify-self: start;
        width: 68px;
        height: 40px;
        font-size: 14px;
    }
}

/* Presentation clarity overrides for big-screen demos */
:root {
    --text: #eef2fa;
    --mid: rgba(228, 234, 245, 0.84);
    --low: rgba(214, 221, 235, 0.68);
    --line: rgba(191, 199, 214, 0.34);
    --line2: rgba(214, 221, 235, 0.5);
    --chat-font: 'JetBrains Mono', monospace;
}

body {
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse at 20% 25%, rgba(233, 75, 60, 0.08) 0%, transparent 46%),
        radial-gradient(ellipse at 80% 75%, rgba(185, 190, 202, 0.06) 0%, transparent 42%),
        var(--bg);
}

.laser-field {
    opacity: 0.58;
}

main {
    width: min(94vw, clamp(700px, 38vw, 1100px));
}

.card {
    width: 100%;
    min-width: 0;
    max-width: none;
    background: linear-gradient(180deg, rgba(68, 74, 92, 0.97), rgba(47, 53, 70, 0.99));
    border-color: rgba(210, 217, 230, 0.35);
    border-radius: 22px;
    box-shadow: 0 36px 88px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: translateY(20px);
}

.card-top {
    min-height: 136px;
    padding: 22px 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.logo-name {
    font-size: clamp(32px, 2.05vw, 40px);
    letter-spacing: 0.1em;
}

.logo-sub {
    font-size: clamp(11px, 0.72vw, 14px);
    line-height: 1.22;
    margin: 4px auto 0;
    color: rgba(236, 241, 250, 0.9);
    letter-spacing: 0.12em;
    text-wrap: balance;
    max-width: none;
}

.player-strip,
.modes,
.rank-progress-section,
.session-bonus-section,
.actions,
#loading {
    margin-left: 26px;
    margin-right: 26px;
}

.player-strip,
.modes,
.rank-progress-section,
.session-bonus-section,
.actions {
    padding-left: 22px;
    padding-right: 22px;
}

.modes {
    padding-top: 14px;
    padding-bottom: 14px;
}

.player-strip {
    background: linear-gradient(180deg, rgba(130, 139, 157, 0.42), rgba(92, 100, 119, 0.42));
    border-color: rgba(220, 227, 240, 0.4);
}

.mode {
    background: linear-gradient(180deg, rgba(125, 134, 152, 0.44), rgba(88, 96, 113, 0.44));
    border-color: rgba(214, 221, 235, 0.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    width: 100%;
}

.mode-title,
.player-name {
    color: #f2f5fc;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.player-name,
.mode-title {
    font-size: clamp(17px, 1.04vw, 20px);
}

.mode-desc,
.rank-progress-label,
.session-info,
.requests-feedback {
    font-size: clamp(12px, 0.76vw, 14px);
    line-height: 1.45;
}

.tag,
.pstat-lbl,
.player-rank,
.global-chat-sub,
.social-chat-time {
    font-size: clamp(9px, 0.58vw, 11px);
}

.pstat-val {
    font-size: clamp(15px, 0.95vw, 19px);
    color: #f3f6fd;
}

.mode {
    padding: 12px 14px;
    gap: 12px;
}

.mode-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.objectives-modal {
    width: min(980px, 95vw);
    min-height: min(620px, 88vh);
    grid-template-columns: 185px 1fr;
    border-color: rgba(214, 221, 235, 0.44);
    box-shadow: 0 40px 96px rgba(0,0,0,0.6);
}

.objectives-sidebar {
    padding: 14px 10px;
    gap: 8px;
}

.objectives-title {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

.objective-tab {
    font-size: 16px;
    padding: 8px 10px;
    letter-spacing: 0.01em;
}

.objectives-head {
    padding: 12px 16px;
}

.objectives-head h3 {
    font-size: 54px;
    line-height: 1;
}

.objectives-sub {
    font-size: 13px;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.objectives-close {
    width: 40px;
    height: 40px;
    font-size: 24px;
}

.objectives-list {
    padding: 14px;
    gap: 10px;
}

.objective-row {
    grid-template-columns: 62px 1fr 82px;
    min-height: 74px;
    padding: 9px;
}

.row-progress {
    width: 48px;
    height: 48px;
    font-size: 11px;
}

.row-title {
    font-size: 17px;
    margin-bottom: 2px;
}

.row-body {
    font-size: 14px;
    line-height: 1.2;
}

.row-meta {
    margin-top: 4px;
    font-size: 10px;
}

.row-reward {
    width: 74px;
    height: 46px;
    font-size: 17px;
}

.row-reward small {
    font-size: 8px;
    margin-top: 2px;
}

.settings-modal {
    width: min(640px, 94vw);
    border-radius: 16px;
}

.settings-head {
    padding: 16px 18px;
}

.settings-head h3 {
    font-size: 42px;
    line-height: 1;
}

.settings-sub {
    font-size: 12px;
    margin-top: 4px;
}

.settings-close {
    width: 36px;
    height: 36px;
    font-size: 20px;
}

.settings-body {
    padding: 16px;
    gap: 12px;
}

.settings-row {
    padding: 12px 14px;
    grid-template-columns: 1fr auto;
}

.settings-title {
    font-size: 20px;
}

.settings-note {
    font-size: 11px;
    margin-top: 4px;
}

.settings-toggle {
    min-width: 82px;
    padding: 8px 12px;
    font-size: 12px;
}

.settings-volume-value {
    font-size: 13px;
    min-width: 52px;
}

.global-chat-title {
    font-size: 32px;
}

.global-chat-sub {
    font-size: 13px;
}

.global-chat-name {
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
}

.global-chat-bubble .social-chat-bubble {
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    line-height: 1.5;
    padding: 9px 12px;
}

.global-chat-input {
    font-size: 15px;
    font-family: var(--chat-font);
}

.global-chat-send {
    width: 46px;
    min-width: 46px;
    font-size: 18px;
}

.social-panel-user-meta strong {
    font-size: 26px;
}

.social-panel-user-meta span {
    font-size: 14px;
}

.social-tab {
    font-size: 16px;
}

.social-search-wrap input {
    font-size: 16px;
}

.social-message-name {
    font-size: 17px;
    font-family: 'JetBrains Mono', monospace;
}

.social-message-status {
    font-size: 12px;
    color: #cfd6e6;
    font-family: 'JetBrains Mono', monospace;
}

.social-chat-preview {
    font-size: 15px;
    color: #e8edf8;
    font-family: 'JetBrains Mono', monospace;
    white-space: normal;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.social-direct-chat-meta strong {
    font-size: 20px;
    font-family: 'JetBrains Mono', monospace;
}

.social-direct-chat-meta span {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
}

.social-chat-bubble {
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    line-height: 1.5;
}

.social-chat-time {
    font-size: 11px;
}

.social-direct-chat-input {
    font-size: 15px;
    font-family: var(--chat-font);
}

.social-direct-chat-send {
    font-size: 13px;
}

.chat-compose-emoji-btn {
    width: 40px;
    height: 40px;
}

.chat-compose-emoji-glyph {
    font-size: 19px;
}

.chat-compose-emoji-icon-outline {
    width: 20px;
    height: 20px;
}

@media (min-width: 1280px) {
    body {
        padding: 30px;
    }

    .global-chat-panel,
    .social-panel {
        width: min(410px, 30vw);
    }

    .global-chat-panel,
    .social-panel,
    .social-direct-chat {
        top: 106px;
    }

    .social-direct-chat {
        top: auto;
        right: calc(min(410px, 30vw) + 28px);
        bottom: 24px;
        height: min(56vh, 520px);
    }
}

@media (max-width: 1180px) {
    main {
        width: 86%;
        min-width: 0;
    }

    .logo-name {
        font-size: 44px;
    }

    .logo-sub {
        font-size: 18px;
        max-width: none;
    }

    .mode-title,
    .player-name {
        font-size: 20px;
    }

    .mode-desc,
    .session-info,
    .rank-progress-label {
        font-size: 15px;
    }

    .top-dock {
        width: 88%;
        min-width: 0;
    }

    .profile-btn {
        width: 56%;
        min-width: 0;
        max-width: 34%;
        height: 60px;
    }

    .profile-name {
        font-size: 18px;
        max-width: 190px;
    }

    .objectives-modal {
        width: min(940px, 96vw);
        min-height: min(600px, 88vh);
        grid-template-columns: 175px 1fr;
    }

    .objectives-head h3 {
        font-size: 44px;
    }

    .objective-tab {
        font-size: 15px;
    }

    .row-title {
        font-size: 16px;
    }

    .row-body {
        font-size: 14px;
    }

    .global-chat-title {
        font-size: 30px;
    }

    .social-panel-user-meta strong {
        font-size: 24px;
    }

    .social-direct-chat-meta strong {
        font-size: 18px;
    }

    .social-direct-chat {
        right: calc(min(390px, calc(100vw - 28px)) + 20px);
    }
}

@media (max-width: 980px) {
    .social-direct-chat {
        right: 18px;
    }
}

@media (max-width: 760px) {
    main {
        width: 94%;
        min-width: 0;
    }

    .card {
        border-radius: 14px;
    }

    .logo-name {
        font-size: 40px;
    }

    .logo-sub {
        font-size: 16px;
    }

    .player-strip {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .player-meta {
        min-width: 180px;
    }

    .player-rank-row {
        min-width: 180px;
    }

    .player-stats {
        width: 100%;
        justify-content: space-between;
    }

    .mode {
        padding: 14px;
    }

    .top-dock {
        width: 96%;
        right: 2%;
        top: 10px;
        padding: 1%;
        gap: 1%;
    }

    .dock-btn {
        width: 42px;
        height: 42px;
    }

    .profile-btn {
        width: 60%;
        min-width: 0;
        max-width: 52%;
        height: 48px;
    }

    .profile-name {
        font-size: 15px;
        max-width: 110px;
    }

    .player-name,
    .mode-title {
        font-size: 18px;
    }

    .mode-desc {
        font-size: 14px;
    }

    .profile-label {
        font-size: 9px;
    }

    .profile-status {
        font-size: 10px;
    }

    .global-chat-title {
        font-size: 27px;
    }

    .global-chat-input,
    .social-search-wrap input,
    .social-direct-chat-input,
    .social-tab,
    .chat-compose-emoji-btn,
    .global-chat-send,
    .social-direct-chat-send {
        font-size: 16px;
    }

    .chat-send-arrow {
        font-size: 17px;
    }

    .chat-compose-emoji-picker {
        width: min(248px, calc(100vw - 20px));
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .global-chat-bubble .social-chat-bubble,
    .social-chat-bubble,
    .social-chat-preview,
    .social-message-name,
    .social-message-status,
    .social-direct-chat-meta strong,
    .social-direct-chat-meta span {
        font-family: 'JetBrains Mono', monospace;
    }
}


/* ── Responsive: 1920×1080 / 15.6" ── */
@media (max-width: 1920px) and (max-height: 1100px) {
    body { padding: 20px; }
}

@media (max-width: 1920px) and (max-height: 940px) {
    body {
        padding-top: 88px;
        padding-bottom: 14px;
    }

    .card {
        max-height: calc(100dvh - 104px);
        transform: translateY(8px);
    }

    .card-top {
        min-height: 112px;
        padding: 16px 22px 14px;
    }

    .logo-name {
        font-size: 34px;
    }

    .logo-sub {
        font-size: 13px;
        letter-spacing: 0.1em;
    }

    .player-strip,
    .modes,
    .rank-progress-section,
    .session-bonus-section,
    .actions,
    #loading {
        margin-left: 18px;
        margin-right: 18px;
    }

    .player-strip,
    .modes,
    .rank-progress-section,
    .session-bonus-section,
    .actions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .player-strip {
        margin-top: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .player-name,
    .mode-title {
        font-size: 16px;
    }

    .mode-desc,
    .session-info,
    .rank-progress-label {
        font-size: 12px;
    }

    .mode {
        padding: 10px 12px;
        gap: 10px;
    }

    .mode-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .actions {
        padding-top: 10px;
        padding-bottom: 14px;
    }
}

@media (max-width: 1600px) {
    main {
        width: min(90vw, clamp(600px, 42vw, 920px));
        min-width: min(520px, 88vw);
    }
    .mode-list { gap: 10px; }
    .mode-item { padding: 16px 20px; }
}

@media (max-width: 1400px) {
    main {
        width: min(92vw, clamp(560px, 46vw, 860px));
        min-width: min(480px, 90vw);
    }
    .top-dock   { width: 88%; min-width: 0; }
    .profile-btn { min-width: 0; }
    .profile-name { font-size: 17px; max-width: 170px; }
    .mode-title { font-size: 18px; }
    .mode-desc  { font-size: 13px; }
    .objectives-modal {
        width: min(860px, 94vw);
        grid-template-columns: 160px 1fr;
    }
    .social-panel,
    .global-chat-panel {
        width: min(360px, 28vw);
    }
}

@media (min-width: 2000px) {
    main {
        width: min(90vw, clamp(840px, 40vw, 1240px));
    }

    .card {
        min-height: calc(100dvh - 40px);
        transform: translateY(10px);
    }

    .card-top {
        min-height: 180px;
        padding: 30px 34px 26px;
    }

    .player-strip {
        margin-top: 28px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .modes {
        gap: 18px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mode {
        padding: 18px 20px;
    }

    .actions {
        padding-bottom: 34px;
    }
}

/* ── Mobile phones ≤ 480px ── */
@media (max-width: 480px) {
    body {
        padding: 68px 8px 12px;
        align-items: flex-start;
    }

    main {
        width: 100%;
        min-width: 0;
    }

    .card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-radius: 12px;
        height: auto;
        min-height: calc(100dvh - 88px);
        overflow-y: auto;
    }

    .top-dock {
        width: calc(100% - 16px);
        left: 8px;
        right: 8px;
        top: 8px;
        min-width: 0;
        border-radius: 16px;
        padding: 8px 10px;
        gap: 6px;
    }

    .card-top {
        padding: 16px 14px 12px;
    }

    .logo-name {
        font-size: 28px;
        letter-spacing: 0.08em;
    }

    .logo-sub {
        font-size: 11px;
        letter-spacing: 0.14em;
        margin-top: 4px;
    }

    .player-strip {
        margin: 12px 12px 0;
        padding: 10px 12px;
        gap: 8px;
    }

    .modes {
        padding: 10px 12px;
        gap: 10px;
    }

    .mode {
        padding: 12px;
        gap: 10px;
        border-radius: 10px;
    }

    .mode-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .mode-title {
        font-size: 14px;
    }

    .mode-desc {
        font-size: 12px;
    }

    .actions {
        padding: 10px 12px 16px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .action-btn {
        min-width: 0;
        flex: 1 1 calc(50% - 6px);
        font-size: 11px;
        padding: 10px 6px;
    }

    .guest-note {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: 12px;
        transform: none;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .rank-progress-section,
    .session-bonus-section {
        margin-left: 12px;
        margin-right: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .profile-btn {
        max-width: none;
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .profile-meta {
        display: none;
    }

    .social-panel,
    .global-chat-panel {
        width: 100vw;
        right: 0;
        left: 0;
        border-radius: 16px 16px 0 0;
        bottom: 0;
        top: auto;
        max-height: 85dvh;
    }

    .objectives-overlay,
    .settings-overlay,
    .profile-overlay {
        padding: 8px;
    }

    .profile-modal,
    .objectives-modal {
        width: 100%;
        min-height: 0;
        height: 100%;
        max-height: calc(100dvh - 16px);
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .dock-popover {
        right: 8px;
        top: 60px;
        width: calc(100vw - 16px);
    }
}

/* ── Very small phones ≤ 360px ── */
@media (max-width: 360px) {
    .logo-name {
        font-size: 24px;
    }

    .logo-sub {
        font-size: 10px;
    }

    .mode-title {
        font-size: 13px;
    }

    .action-btn {
        font-size: 10px;
        padding: 9px 4px;
    }
}

/* Global responsive baseline */
html {
    font-size: clamp(14px, 0.26vw + 12.9px, 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Global chat-style typography override */
:root {
    --global-chat-font: 'JetBrains Mono', monospace;
}

html,
body,
body * {
    font-family: var(--global-chat-font) !important;
}

/* ── MOBILE ADAPTIVE MENU ── [data-platform="native"] only ──────────────── */

.mob-bottom-nav { display: none; }

/* Hide desktop-only chrome on native */
[data-platform="native"] .top-dock             { display: none !important; }
[data-platform="native"] .global-chat-peek     { display: none !important; }
[data-platform="native"] #globalChatPanel      { display: none !important; }
[data-platform="native"] .guest-note           { display: none !important; }

/* Body: full-height scroll, account for bottom nav */
[data-platform="native"] body {
    padding: 12px 0 calc(68px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    justify-content: center;
    background: #060816;
    animation: menuAmbientDrift 16s ease-in-out infinite alternate;
}

/* ─── PLAY TAB: main card ─────────────────────────────────────────── */
[data-platform="native"] main {
    width: 100%;
    padding: 0 16px;
    display: flex !important;
    justify-content: center;
}
[data-platform="native"] .card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 480px !important;
    height: auto !important;
    background: rgba(16,20,44,0.88) !important;
    border: 1px solid rgba(233,75,60,0.2) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 32px 80px rgba(0,0,0,0.65) !important;
}

/* Logo header — matches landing KHET 2.0 style */
[data-platform="native"] .card-top {
    padding: 6% 6% 5% !important;
}
[data-platform="native"] .card-home-btn { display: none !important; }
[data-platform="native"] .logo-name {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #E8EAF0 !important;
    line-height: 1 !important;
}
[data-platform="native"] .logo-sub {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    color: rgba(215,217,224,0.5) !important;
    margin-top: 6px !important;
}

/* Player strip — compact */
[data-platform="native"] .player-strip {
    margin: 12px 16px 0 !important;
    padding: 12px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(166,168,177,0.14) !important;
}
[data-platform="native"] .player-meta { min-width: 0; }
[data-platform="native"] .player-rank-row { min-width: 0; flex-wrap: wrap; }

/* Mode cards — touch-friendly, same clean style */
[data-platform="native"] .modes {
    padding: 10px 4px 16px !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* ── Big CaveBoy-style slab buttons ── */
[data-platform="native"] .mode {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    min-height: 64px !important;
    position: relative !important;
    overflow: hidden !important;
    border-width: 1px !important;
    border-style: solid !important;
    transition: transform 0.13s, box-shadow 0.13s !important;
    cursor: pointer !important;
}
[data-platform="native"] .mode:active {
    transform: scale(0.97) !important;
}

/* hide the letter icons */
[data-platform="native"] .mode-icon {
    display: none !important;
}

/* body fills full width, centered */
[data-platform="native"] .mode-body {
    flex: 1 !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    padding-right: 44px !important; /* space for lock icon */
}

[data-platform="native"] .mode-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
}
[data-platform="native"] .mode-desc {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    opacity: 0.6 !important;
}
[data-platform="native"] .mode-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 5px !important;
}

/* LOCAL — silver/grey slab */
[data-platform="native"] .mode.local {
    background: linear-gradient(145deg, rgba(72,78,94,0.55), rgba(45,50,64,0.7)) !important;
    border-color: rgba(120,128,148,0.35) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
[data-platform="native"] .mode.local .mode-title { color: #C8CCd8 !important; }

/* ONLINE — red glowing slab */
[data-platform="native"] .mode.online:not(.locked) {
    background: linear-gradient(145deg, rgba(200,55,42,0.72), rgba(150,35,25,0.82)) !important;
    border-color: rgba(233,75,60,0.55) !important;
    box-shadow: 0 4px 20px rgba(233,75,60,0.28), inset 0 1px 0 rgba(255,180,170,0.12) !important;
}
[data-platform="native"] .mode.online:not(.locked) .mode-title { color: #fff !important; }
[data-platform="native"] .mode.online:not(.locked) .mode-desc  { color: rgba(255,220,215,0.75) !important; opacity: 1 !important; }
[data-platform="native"] .mode.online:not(.locked) .tag { border-color: rgba(255,255,255,0.2) !important; color: rgba(255,220,215,0.8) !important; }

/* ONLINE locked — muted dark slab, column layout with big lock */
[data-platform="native"] .mode.online.locked {
    background: linear-gradient(145deg, rgba(38,42,56,0.8), rgba(28,32,46,0.88)) !important;
    border-color: rgba(100,108,128,0.3) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 20px 18px !important;
    gap: 10px !important;
    min-height: 120px !important;
}
[data-platform="native"] .mode.online.locked .mode-body {
    padding: 0 !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
}
[data-platform="native"] .mode.online.locked .mode-title { color: rgba(185,190,210,0.55) !important; }
[data-platform="native"] .mode.online.locked .mode-desc  { opacity: 0.35 !important; display: none !important; }
[data-platform="native"] .mode.online.locked .mode-tags  { opacity: 0.35 !important; display: none !important; }
[data-platform="native"] .mode.online.locked .mode-lock-icon { display: flex !important; }
[data-platform="native"] #onlineModeCard.mode.locked::before { display: none !important; }

/* AI — warm red/crimson slab */
[data-platform="native"] .mode.ai {
    background: linear-gradient(145deg, rgba(160,38,28,0.55), rgba(100,22,16,0.68)) !important;
    border-color: rgba(233,75,60,0.4) !important;
    box-shadow: 0 4px 16px rgba(180,40,30,0.2), inset 0 1px 0 rgba(255,160,140,0.08) !important;
}
[data-platform="native"] .mode.ai .mode-title { color: #F0A090 !important; }

[data-platform="native"] .mode-lock-cta { display: none !important; }

/* ─── SHARED SECTION WRAPPER ──────────────────────────────────────── */
/* All inline-tab sections get card-style wrapper */
[data-platform="native"] #socialPanel,
[data-platform="native"] #objectivesOverlay,
[data-platform="native"] #profileOverlay {
    padding: 0 16px 16px !important;
}

/* ─── SHARED SECTION HEADER (login-logo style) ────────────────────── */
[data-platform="native"] .social-panel-head,
[data-platform="native"] .objectives-head,
[data-platform="native"] .profile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 22px 0 18px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(233,75,60,0.2) !important;
    background: none !important;
    position: relative !important;
}
[data-platform="native"] .social-panel-head::before,
[data-platform="native"] .objectives-head::before,
[data-platform="native"] .profile-head::before {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #E94B3C 40%, transparent);
}

/* Section title text */
[data-platform="native"] #socialPanelUsername,
[data-platform="native"] #objectivesPopupTitle,
[data-platform="native"] #profilePopupTitle {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #E8EAF0 !important;
}

/* Section subtitle */
[data-platform="native"] #objectivesPopupSub,
[data-platform="native"] #profilePopupSub {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    color: rgba(215,217,224,0.45) !important;
    text-transform: uppercase !important;
}

/* ─── SOCIAL TAB PILLS (login tab-row style) ──────────────────────── */
[data-platform="native"] .social-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    background: rgba(19,26,48,0.9) !important;
    border: 1px solid rgba(233,75,60,0.15) !important;
    border-radius: 14px !important;
    padding: 5px !important;
    gap: 5px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
    margin-bottom: 16px !important;
}
[data-platform="native"] .social-tab {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 10px 6px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(215,217,224,0.5) !important;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.18s;
    cursor: pointer;
}
[data-platform="native"] .social-tab.active {
    background: linear-gradient(180deg, rgba(255,95,73,0.95), rgba(233,75,60,0.94)) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(233,75,60,0.28) !important;
}

/* Social search input */
[data-platform="native"] .social-search-wrap input,
[data-platform="native"] #friendRequestUsernameInput {
    background: rgba(12,20,42,0.92) !important;
    border: 1px solid rgba(166,168,177,0.28) !important;
    border-radius: 12px !important;
    color: #d8d9df !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    width: 100%;
}
[data-platform="native"] .requests-send-btn {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: #E94B3C !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 10px 18px !important;
    cursor: pointer;
}

/* ─── MISSIONS/OBJECTIVES TAB PILLS ──────────────────────────────── */
[data-platform="native"] .objectives-sidebar {
    background: rgba(19,26,48,0.9) !important;
    border: 1px solid rgba(233,75,60,0.15) !important;
    border-radius: 14px !important;
    padding: 5px !important;
    gap: 5px !important;
    border-bottom: none !important;
    margin-bottom: 16px !important;
}
[data-platform="native"] .objective-tab {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(215,217,224,0.5) !important;
    flex: 1;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: all 0.18s;
}
[data-platform="native"] .objective-tab.active {
    background: linear-gradient(180deg, rgba(255,95,73,0.95), rgba(233,75,60,0.94)) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(233,75,60,0.28) !important;
}

/* ─── PROFILE TAB PILLS ───────────────────────────────────────────── */
[data-platform="native"] .profile-sidebar {
    background: rgba(19,26,48,0.9) !important;
    border: 1px solid rgba(233,75,60,0.15) !important;
    border-radius: 14px !important;
    padding: 5px !important;
    gap: 5px !important;
    border-bottom: none !important;
    margin-bottom: 16px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
[data-platform="native"] .profile-tab {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(215,217,224,0.5) !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: all 0.18s;
}
[data-platform="native"] .profile-tab.active {
    background: linear-gradient(180deg, rgba(255,95,73,0.95), rgba(233,75,60,0.94)) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(233,75,60,0.28) !important;
}

/* Bottom nav red top accent line */
[data-platform="native"] .mob-bottom-nav {
    border-top: 1px solid rgba(233,75,60,0.2) !important;
    background: rgba(8,10,20,0.97) !important;
}

/* Bottom nav bar */
[data-platform="native"] .mob-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10, 12, 22, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(166, 168, 177, 0.18);
    z-index: 300;
    align-items: center;
    justify-content: space-around;
}

@media (min-width: 901px), (pointer: fine) {
    .mob-bottom-nav {
        display: none !important;
    }
}

[data-platform="native"] .mob-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(215, 217, 224, 0.42);
    background: none;
    border: none;
    cursor: pointer;
    min-height: 48px;
    padding: 4px 2px;
    position: relative;
    transition: color 0.18s;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}

[data-platform="native"] .mob-nav-btn.active {
    color: var(--red, #E94B3C);
}

[data-platform="native"] .mob-nav-btn.guest-locked,
[data-platform="native"] .mob-nav-btn.guest-locked.active {
    color: rgba(136, 141, 156, 0.95) !important;
    opacity: 0.52;
    background: rgba(3, 5, 14, 0.55);
    cursor: pointer;
}

[data-platform="native"] .mob-nav-btn.guest-locked .mob-nav-icon {
    transform: none !important;
}

[data-platform="native"] .mob-nav-btn.guest-locked::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 9px;
    width: 10px;
    height: 7px;
    border: 1.6px solid rgba(197, 202, 219, 0.95);
    border-radius: 2px;
    background: rgba(17, 22, 40, 0.95);
}

[data-platform="native"] .mob-nav-btn.guest-locked::after {
    content: '';
    position: absolute;
    top: -2px;
    right: 11px;
    width: 6px;
    height: 5px;
    border: 1.6px solid rgba(197, 202, 219, 0.95);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

[data-platform="native"] .mob-nav-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s;
    display: block;
}

[data-platform="native"] .mob-nav-btn.active .mob-nav-icon {
    transform: scale(1.18);
}

[data-platform="native"] .mob-nav-badge {
    position: absolute;
    top: 3px;
    right: calc(50% - 18px);
    background: var(--red, #E94B3C);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

[data-platform="native"] .mob-nav-badge[data-count="0"],
[data-platform="native"] .mob-nav-badge:empty {
    display: none;
}

/* ── IN-PAGE TAB CONTENT SWITCHING ──────────────────────────────────────── */

/* Default: hide main and all panels that become tab pages */
[data-platform="native"] main                { display: none !important; }
[data-platform="native"] #socialPanel        { display: none !important; }
[data-platform="native"] #objectivesOverlay  { display: none !important; }
[data-platform="native"] #profileOverlay     { display: none !important; }

/* Show the right section based on active tab */
[data-platform="native"] body[data-mob-tab="play"]     main               { display: flex !important; }
[data-platform="native"] body[data-mob-tab="social"]   #socialPanel       { display: flex !important; }
[data-platform="native"] body[data-mob-tab="missions"] #objectivesOverlay { display: flex !important; }
[data-platform="native"] body[data-mob-tab="profile"]  #profileOverlay    { display: flex !important; }

/* Placement tab hidden inside Profile sidebar — it lives in the Ranks tab instead */
[data-platform="native"] #profileTabPlacement          { display: none !important; }

/* ── Social panel: remove fixed positioning, become full-page ── */
[data-platform="native"] #socialPanel {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 68px) !important;
    max-height: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden !important;
}

[data-platform="native"] #socialDirectChatView {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    z-index: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: none !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
}

[data-platform="native"] #socialDirectChatView.visible {
    display: flex !important;
    flex: 1 !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

[data-platform="native"] .social-direct-chat-head {
    padding: 18px 16px 12px !important;
    border-bottom: 1px solid rgba(233, 75, 60, 0.2) !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .social-direct-chat-log {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 16px !important;
    min-height: 0 !important;
}

[data-platform="native"] .social-direct-chat-compose {
    padding: 12px 16px 16px !important;
    border-top: 1px solid rgba(166, 168, 177, 0.18) !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .mob-bottom-nav {
    z-index: 300 !important;
    position: fixed !important;
}

/* Hide avatar/user info in social header; show static "Social" title */
[data-platform="native"] .social-panel-user { display: none !important; }
[data-platform="native"] .social-panel-head .social-panel-close { display: none !important; }

/* Mobile "Social" heading shown only on native */
.mob-social-title { display: none; }
[data-platform="native"] .mob-social-title {
    display: block !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #E8EAF0 !important;
}

/* Social views fill remaining panel height; list scrolls inside */
[data-platform="native"] .social-view { padding-bottom: 0 !important; }
[data-platform="native"] #socialFriendsView,
[data-platform="native"] #socialRequestsView {
    padding-bottom: 0 !important;
}
[data-platform="native"] .social-view.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}
[data-platform="native"] .social-list {
    flex: 1 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* When direct-chat is open, hide the rest of the social panel so nothing shows behind */
[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) .social-panel-head,
[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) .social-tabs,
[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) #socialFriendsView,
[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) #socialMessagesView,
[data-platform="native"] #socialPanel:has(#socialDirectChatView.visible) #socialRequestsView {
    display: none !important;
}

/* ── Objectives overlay: remove fixed backdrop, become full-page ── */
[data-platform="native"] #objectivesOverlay {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
    flex-direction: column !important;
    min-height: calc(100vh - 68px);
}

[data-platform="native"] .objectives-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 16px !important;
    gap: 12px !important;
    overflow: visible !important;
}

[data-platform="native"] .objectives-sidebar {
    flex-direction: row !important;
    gap: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(166,168,177,0.18) !important;
    padding-bottom: 12px !important;
    padding-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

[data-platform="native"] .objectives-title { display: none !important; }
[data-platform="native"] #closeObjectives  { display: none !important; }

/* ── Profile overlay: same treatment ── */
[data-platform="native"] #profileOverlay {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: calc(100vh - 68px);
}

[data-platform="native"] .profile-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 16px !important;
    gap: 12px !important;
    overflow: visible !important;
}

[data-platform="native"] .profile-sidebar {
    flex-direction: row !important;
    gap: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(166,168,177,0.18) !important;
    padding-bottom: 12px !important;
    padding-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

[data-platform="native"] .profile-title           { display: none !important; }
[data-platform="native"] #closeProfileOverviewBtn { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   FIX 1 — Ranks / Profile overlay: ensure it's always scrollable + visible
   Height = profile-head height + nav bar height + full page height (JS syncs
   via --profile-overlay-min-h; fallback covers initial paint before JS runs)
   ───────────────────────────────────────────────────────────────────────── */
[data-platform="native"] body[data-mob-tab="profile"] #profileOverlay {
    display: flex !important;
    min-height: var(--profile-overlay-min-h, calc(100dvh + 60px + env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 2 — Missions / Objectives list items — compact mobile layout
   ───────────────────────────────────────────────────────────────────────── */
[data-platform="native"] .objectives-list {
    padding: 6px 0 !important;
    gap: 6px !important;
}

[data-platform="native"] .objective-row {
    grid-template-columns: 44px 1fr 60px !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    transform: none !important;
}

[data-platform="native"] .row-progress {
    width: 36px !important;
    height: 36px !important;
    font-size: 9px !important;
}

[data-platform="native"] .row-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 1px !important;
}

[data-platform="native"] .row-body {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: rgba(215,217,224,0.65) !important;
}

[data-platform="native"] .row-meta {
    font-size: 8px !important;
    margin-top: 2px !important;
}

[data-platform="native"] .row-reward {
    width: 52px !important;
    height: 36px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}

[data-platform="native"] .row-reward .reward-label {
    font-size: 7px !important;
}

/* Match history section header */
[data-platform="native"] .objectives-main h3 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

[data-platform="native"] .objectives-sub {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    color: rgba(215,217,224,0.45) !important;
    text-transform: uppercase !important;
}

/* Bonus / daily claim row */
[data-platform="native"] #objectivesBonus {
    border-radius: 10px !important;
    margin: 0 0 8px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 3 — Avatar picker popup — fit the screen on native
   ───────────────────────────────────────────────────────────────────────── */
[data-platform="native"] .avatar-popup-overlay {
    padding: 8px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}

[data-platform="native"] .avatar-popup-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    padding: 12px !important;
    max-height: none !important;
}

[data-platform="native"] .avatar-popup-head h3 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: #E8EAF0 !important;
    text-transform: uppercase !important;
}

[data-platform="native"] .avatar-popup-subheader {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 8px !important;
}

[data-platform="native"] .avatar-popup-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 8px 0 10px !important;
}

[data-platform="native"] .profile-avatar-choice-visual {
    width: 100% !important;
    aspect-ratio: 1 !important;
    height: auto !important;
}

[data-platform="native"] .avatar-popup-chosen {
    padding: 10px !important;
    border-radius: 10px !important;
    gap: 10px !important;
}

[data-platform="native"] .avatar-popup-chosen-preview {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .avatar-popup-chosen-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

[data-platform="native"] .avatar-popup-chosen-desc {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
}

[data-platform="native"] .avatar-popup-confirm {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIOT-STYLE MOBILE UI REDESIGN  (all scoped to [data-platform="native"])
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SOCIAL SCREEN ────────────────────────────────────────────────────────── */

[data-platform="native"] body[data-mob-tab="social"] .mob-section,
[data-platform="native"] body[data-mob-tab="social"] .social-panel {
    background: #080a10 !important;
}

/* Title */
[data-platform="native"] .mob-social-title {
    font-size: 32px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #E8EAF0 !important;
}

/* Hide the old panel header avatar/meta, keep only title area */
[data-platform="native"] .social-panel-head {
    background: #080a10 !important;
    border-bottom: none !important;
    padding: 14px 16px 8px !important;
}

/* ── TABS (underline style, no pill background) ────────────────────────────── */
[data-platform="native"] .social-tabs {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 16px !important;
    gap: 24px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

[data-platform="native"] .social-tab {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 8px 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: rgba(215,217,224,0.55) !important;
    text-transform: uppercase !important;
    flex: unset !important;
    min-width: 0 !important;
    position: relative !important;
    bottom: -1px !important;
}

[data-platform="native"] .social-tab.active {
    color: #E8EAF0 !important;
    border-bottom: 2px solid #E94B3C !important;
    background: transparent !important;
}

/* ── SEARCH BAR ──────────────────────────────────────────────────────────── */
[data-platform="native"] .social-search-wrap {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 22px !important;
    margin: 10px 16px !important;
    padding: 0 14px 0 38px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

[data-platform="native"] .social-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: rgba(215,217,224,0.4) !important;
    pointer-events: none !important;
    display: block !important;
}

[data-platform="native"] .social-search-wrap input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #E8EAF0 !important;
    font-size: 14px !important;
    padding: 9px 0 !important;
    width: 100% !important;
}

[data-platform="native"] .social-search-wrap input::placeholder {
    color: rgba(215,217,224,0.35) !important;
}

/* ── FRIEND SECTION LABELS ───────────────────────────────────────────────── */
[data-platform="native"] .social-friends-section-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #E8EAF0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 16px 4px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

[data-platform="native"] .social-friends-section-label .section-count {
    color: rgba(215,217,224,0.45) !important;
    font-weight: 400 !important;
}

/* ── FRIEND ITEMS (flat rows) ────────────────────────────────────────────── */
[data-platform="native"] .social-friend-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

[data-platform="native"] .social-friend-item:nth-child(even) {
    background: transparent !important;
}

[data-platform="native"] .social-friend-item:active {
    background: rgba(255,255,255,0.05) !important;
}

[data-platform="native"] .social-friend-avatar,
[data-platform="native"] .social-friend-item .friend-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .friend-name,
[data-platform="native"] .social-friend-item .friend-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #E8EAF0 !important;
}

[data-platform="native"] .friend-status,
[data-platform="native"] .social-friend-item .friend-status {
    font-size: 12px !important;
    color: rgba(215,217,224,0.5) !important;
}

/* ── DIRECT CHAT SCREEN ──────────────────────────────────────────────────── */

[data-platform="native"] .social-direct-chat-view {
    background: #080a10 !important;
}

[data-platform="native"] .social-direct-chat-head {
    background: #0d1117 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

[data-platform="native"] .social-chat-back-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #E8EAF0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .social-chat-back-btn:active {
    background: rgba(255,255,255,0.08) !important;
}

[data-platform="native"] .social-direct-chat-head .chat-head-user {
    flex: 1 !important;
    min-width: 0 !important;
}

[data-platform="native"] .social-chat-more-btn {
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(215,217,224,0.7) !important;
    font-size: 22px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.05em !important;
}

[data-platform="native"] .social-chat-more-btn:active {
    background: rgba(255,255,255,0.08) !important;
}

[data-platform="native"] .social-direct-chat-log {
    background: #080a10 !important;
}

[data-platform="native"] .social-direct-chat-compose {
    background: #0d1117 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    padding: 10px 14px !important;
}

[data-platform="native"] .social-direct-chat-compose input,
[data-platform="native"] .social-direct-chat-compose textarea {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    color: #E8EAF0 !important;
    font-size: 14px !important;
    padding: 9px 16px !important;
}

[data-platform="native"] .social-direct-chat-compose input::placeholder,
[data-platform="native"] .social-direct-chat-compose textarea::placeholder {
    color: rgba(215,217,224,0.35) !important;
}

/* ── PROFILE SCREEN ──────────────────────────────────────────────────────── */

[data-platform="native"] #profileOverlay {
    background: #080a10 !important;
}

[data-platform="native"] .profile-head,
[data-platform="native"] .profile-overview-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px 10px !important;
    background: #080a10 !important;
    border-bottom: none !important;
}

/* Gear/settings button in profile header */
[data-platform="native"] #mobProfileSettingsBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: rgba(215,217,224,0.7) !important;
    cursor: pointer !important;
}

[data-platform="native"] #mobProfileSettingsBtn:active {
    background: rgba(255,255,255,0.08) !important;
}

/* Hide the old close/x button text label on mobile */
[data-platform="native"] #closeProfileOverviewBtn {
    font-size: 0 !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    display: none !important;
}

/* Profile banner area */
[data-platform="native"] .profile-overview-card::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 120px !important;
    background: linear-gradient(135deg, #1a0a2e 0%, #0d1a3a 40%, #0a1628 70%, #101820 100%) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .profile-overview-card {
    background: #080a10 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Larger avatar on profile */
[data-platform="native"] .profile-overview-avatar,
[data-platform="native"] .profile-avatar-img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 3px solid #080a10 !important;
}

/* ── SETTINGS SCREEN ─────────────────────────────────────────────────────── */

[data-platform="native"] .settings-modal,
[data-platform="native"] #settingsModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    background: #080a10 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

/* Settings header → back arrow style */
[data-platform="native"] .settings-head,
[data-platform="native"] .settings-modal > header {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: #080a10 !important;
    gap: 10px !important;
}

[data-platform="native"] .settings-close,
[data-platform="native"] #closeSettingsBtn {
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #E8EAF0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    border-radius: 50% !important;
}

/* Inject back arrow into close btn via pseudo-element */
[data-platform="native"] .settings-close::before,
[data-platform="native"] #closeSettingsBtn::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8EAF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

[data-platform="native"] .settings-head-title,
[data-platform="native"] .settings-modal .settings-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #E8EAF0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Flat settings rows */
[data-platform="native"] .settings-row {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
    border-radius: 0 !important;
    gap: 14px !important;
    cursor: pointer !important;
}

[data-platform="native"] .settings-row:active {
    background: rgba(255,255,255,0.04) !important;
}

/* Red icon on left side of each row */
[data-platform="native"] .settings-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(233,75,60,0.15) !important;
    color: #E94B3C !important;
    flex-shrink: 0 !important;
}

[data-platform="native"] .settings-icon svg {
    width: 18px !important;
    height: 18px !important;
}

[data-platform="native"] .settings-row-label {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #E8EAF0 !important;
}

/* Chevron visible */
[data-platform="native"] .settings-chevron {
    display: flex !important;
    color: rgba(215,217,224,0.35) !important;
}

/* Hide volume row on native (covered by system volume) */
[data-platform="native"] #settingsVolumeRow {
    display: none !important;
}

/* Sign out row danger color */
[data-platform="native"] #settingsSignOutRow .settings-row-label {
    color: #E94B3C !important;
}

[data-platform="native"] #settingsSignOutRow .settings-icon {
    background: rgba(233,75,60,0.1) !important;
    color: #E94B3C !important;
}

/* ── TOGGLES (Riot checkmark style) ─────────────────────────────────────── */

[data-platform="native"] .settings-toggle {
    width: 46px !important;
    height: 28px !important;
    border-radius: 14px !important;
    border: none !important;
    font-size: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
}

[data-platform="native"] .settings-toggle[aria-pressed="false"],
[data-platform="native"] .settings-toggle:not([aria-pressed="true"]) {
    background: rgba(255,255,255,0.12) !important;
}

[data-platform="native"] .settings-toggle[aria-pressed="true"] {
    background: #E94B3C !important;
}

/* Knob */
[data-platform="native"] .settings-toggle::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: left 0.2s ease !important;
}

[data-platform="native"] .settings-toggle[aria-pressed="false"]::after,
[data-platform="native"] .settings-toggle:not([aria-pressed="true"])::after {
    left: 3px !important;
}

[data-platform="native"] .settings-toggle[aria-pressed="true"]::after {
    left: calc(100% - 25px) !important;
}

/* ── SOCIAL SEARCH WRAP — web hidden, native only ────────────────────────── */
html:not([data-platform="native"]) .social-search-wrap {
    display: none !important;
}
html:not([data-platform="native"]) .social-search-icon {
    display: none !important;
}

/* ── SETTINGS ICONS — proper size on desktop (PC) ───────────────────────── */
html:not([data-platform="native"]) .settings-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    color: var(--text, #dddcc5) !important;
    background: transparent !important;
    border-radius: 0 !important;
}
html:not([data-platform="native"]) .settings-icon svg {
    width: 18px !important;
    height: 18px !important;
}
/* Fix the grid to accommodate icon + content + toggle in a single row */
html:not([data-platform="native"]) .settings-row {
    grid-template-columns: auto 1fr auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   END RIOT-STYLE REDESIGN
   ───────────────────────────────────────────────────────────────────────── */