/* ── Active battles list — own battle highlight + rejoin button ── */
.battle-item--mine {
    background: linear-gradient(90deg, rgba(220,160,40,0.08), rgba(220,160,40,0));
    border-left: 3px solid #e8d480;
    padding-left: 9px;
}
.btn-rejoin {
    background: linear-gradient(135deg, #d68246, #b06028);
    color: #1a1209;
    border: 1px solid rgba(255,200,140,0.4);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    box-shadow: 0 0 12px rgba(255,140,60,0.18);
}
.btn-rejoin:hover {
    background: linear-gradient(135deg, #e8945a, #c87033);
    box-shadow: 0 0 18px rgba(255,140,60,0.4);
}
.battle-private-badge {
    display: inline-block;
    background: rgba(220,160,40,0.18);
    border: 1px solid rgba(220,160,40,0.4);
    color: #e8d480;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}


/* ════════════════════════════════════════════════════════════
 * ── Global leaderboard screen ("Зал Славы") ──
 * Cinematic 3-tier layout:
 *   1. Hero podium — top 3 with elevated 1st-place plinth
 *   2. Cards strip — places #4..#10 with full tank thumbnails
 *   3. Full table — places #1..#100 + viewer's row at the bottom
 *      if outside top 100
 * Own row everywhere is highlighted + autoscrolled into view.
 * ════════════════════════════════════════════════════════════ */

#globalLeaderboardScreen.glb-screen {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Ambient backdrop baked directly into the screen — no extra absolute
       layers needed (the previous layered approach hid content if the mask
       parser tripped on a particular browser). */
    background:
        radial-gradient(ellipse 70% 60% at 20% 10%, rgba(120,180,60,0.10) 0%, transparent 80%),
        radial-gradient(ellipse 80% 70% at 85% 35%, rgba(220,160,40,0.08) 0%, transparent 80%),
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(60,90,40,0.10) 0%, transparent 80%),
        linear-gradient(180deg, #0a1208 0%, #070b05 50%, #050802 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* Decorative layers (kept as no-op divs in HTML for back-compat with any
   stale cached HTML — invisible if present). */
.glb-bg, .glb-bg-grid { display: none; }

/* ── Header (sticky) ── */
.glb-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 76px;
    display: grid;
    /* 1fr · auto · 1fr → title block lives in the middle column (auto-width)
       with two EQUAL flexible side columns. Title is therefore at the true
       visual centre of the viewport, regardless of how wide the left
       (back btn) or right (stat + refresh) sides happen to be. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 28px;
    gap: 18px;
    background: linear-gradient(180deg, rgba(15,22,10,0.92) 0%, rgba(8,14,6,0.85) 100%);
    border-bottom: 1px solid rgba(120,180,60,0.18);
    flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.glb-back { justify-self: start; }
.glb-meta { justify-self: end; }
.glb-back {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(120,180,60,0.30);
    color: #c8e8a0;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}
.glb-back:hover {
    background: rgba(120,180,60,0.18);
    border-color: rgba(120,180,60,0.55);
    color: #e8f0c8;
    transform: translateX(-2px);
}
.glb-title-wrap {
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.glb-eyebrow {
    font-size: 10px;
    color: #7a9a5a;
    letter-spacing: 4px;
    font-weight: 700;
}
.glb-title {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 28px;
    color: #e8d480;
    letter-spacing: 8px;
    margin: 0;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 22px rgba(232,212,128,0.25);
    background: linear-gradient(180deg, #ffe890 0%, #c89c2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.glb-meta {
    display: flex; align-items: center; gap: 14px;
}
.glb-meta-stat {
    text-align: right;
    line-height: 1;
}
.glb-meta-num {
    display: block;
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 22px;
    color: #e8d480;
    letter-spacing: 1px;
}
.glb-meta-lbl {
    display: block;
    font-size: 9px;
    color: #6a8a4a;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 600;
}
.glb-refresh {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #c8c0a8;
    width: 36px; height: 36px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}
.glb-refresh:hover {
    background: rgba(120,180,60,0.18);
    border-color: rgba(120,180,60,0.45);
    color: #e8f0c8;
    transform: rotate(60deg);
}

/* ── Top-10 showcase cards (same look as menu "ВАШ ТАНК") ── */
.glb-cards-wrap {
    padding: 22px 28px 8px;
}
.glb-cards-title {
    font-size: 10px;
    color: #c8a060;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(232,160,64,0.25);
}
.glb-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    max-width: 1500px;
    margin: 0 auto;
}
@media (max-width: 1200px) { .glb-cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px)  { .glb-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .glb-cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* Cards literally reuse `.battle-showcase` from the main menu — only
   accent colours and per-card canvas sizing are added on top. */
.glb-showcase {
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.glb-showcase:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(232,160,64,0.12), 0 8px 22px rgba(0,0,0,0.5);
    border-color: rgba(232,160,64,0.4);
}
.glb-showcase .glb-showcase-canvas {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6));
}
.glb-showcase .glb-showcase-stats {
    border-top: 0;
}
.glb-card-top3 { border-color: rgba(255,210,74,0.42); }
.glb-card-r1 {
    border-color: rgba(255,210,74,0.7);
    box-shadow: inset 0 1px 0 rgba(255,210,74,0.18), 0 6px 30px rgba(255,210,74,0.18);
}
.glb-card-r2 {
    border-color: rgba(216,216,216,0.6);
    box-shadow: inset 0 1px 0 rgba(216,216,216,0.14), 0 6px 24px rgba(216,216,216,0.12);
}
.glb-card-r3 {
    border-color: rgba(205,138,74,0.6);
    box-shadow: inset 0 1px 0 rgba(205,138,74,0.14), 0 6px 24px rgba(205,138,74,0.14);
}
.glb-card-r1 .showcase-header { color: #ffe890; }
.glb-card-r2 .showcase-header { color: #e0e0e0; }
.glb-card-r3 .showcase-header { color: #e8a878; }
.glb-card-me {
    border-color: #e8d480 !important;
    box-shadow: 0 0 0 2px rgba(232,212,128,0.45), 0 6px 26px rgba(232,212,128,0.30) !important;
}

/* ── Legacy hero/podium blocks (no longer rendered, kept harmless) ── */
.glb-hero-wrap, .glb-podium-wrap { display: none; }

/* (legacy hero/podium styling below — kept for any cached HTML, hidden) */
.glb-hero-wrap-LEGACY {
    flex-shrink: 0;
    padding: 28px 28px 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.20) 100%);
}
.glb-hero {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
}
.glb-hero-card {
    flex: 0 1 240px;
    background: linear-gradient(180deg, rgba(20,30,14,0.85) 0%, rgba(8,12,6,0.95) 100%);
    border: 1px solid rgba(120,180,60,0.18);
    border-top: 3px solid var(--acc, #c8e8a0);
    border-radius: 12px;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.55),
        0 0 32px var(--acc-glow, rgba(120,180,60,0.10)),
        inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.glb-hero-card.hero-1 {
    flex-basis: 280px;
    transform: translateY(-22px);
    --acc-glow: rgba(255,210,74,0.22);
    box-shadow:
        0 14px 40px rgba(0,0,0,0.6),
        0 0 44px rgba(255,210,74,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.glb-hero-card.hero-2 { --acc-glow: rgba(216,216,216,0.16); }
.glb-hero-card.hero-3 { --acc-glow: rgba(205,138,74,0.18); }
.glb-hero-card:hover { transform: translateY(-26px); }
.glb-hero-card.hero-1:hover { transform: translateY(-32px); }
.glb-hero-me {
    box-shadow:
        0 14px 40px rgba(0,0,0,0.6),
        0 0 0 2px var(--acc),
        0 0 50px var(--acc-glow);
}

.glb-hero-medal {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 16px;
    color: var(--acc);
    letter-spacing: 2px;
    text-shadow: 0 0 14px var(--acc);
}
.hero-1 .glb-hero-medal { font-size: 20px; }

.glb-hero-tank {
    width: 100%;
    height: 200px;
    background:
        radial-gradient(ellipse at center, rgba(120,180,60,0.14) 0%, transparent 65%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,0.40) 0%, transparent 55%),
        rgba(0,0,0,0.32);
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 -8px 20px rgba(0,0,0,0.25);
}
.hero-1 .glb-hero-tank { height: 220px; }
.glb-hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.glb-hero-name {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 18px;
    color: #ffe890;
    letter-spacing: 1.5px;
    text-align: center;
    margin-top: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-1 .glb-hero-name { font-size: 22px; }

.glb-hero-tier {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.glb-hero-stats {
    display: flex;
    width: 100%;
    justify-content: space-around;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
    margin-top: 4px;
}
.glb-hero-stat {
    flex: 1;
    text-align: center;
    line-height: 1;
}
.glb-hero-stat-num {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #e8d480;
}
.hero-1 .glb-hero-stat-num { font-size: 22px; }
.glb-hero-kd { color: #88dd66 !important; }
.glb-hero-stat-lbl {
    display: block;
    font-size: 9px;
    color: #6a8a4a;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 600;
}

/* ── Strip for places 4-10 ── */
.glb-podium-wrap {
    flex-shrink: 0;
    padding: 12px 28px 16px;
    overflow-x: auto;
    overflow-y: hidden;
}
.glb-podium-title {
    font-size: 10px;
    color: #7a9a5a;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}
.glb-podium-strip {
    display: flex;
    gap: 10px;
    min-width: max-content;
    justify-content: center;
}
.glb-podium-card {
    flex: 0 0 168px;
    background: linear-gradient(180deg, rgba(15,22,10,0.85) 0%, rgba(6,10,4,0.95) 100%);
    border: 1px solid rgba(120,180,60,0.14);
    border-radius: 8px;
    padding: 8px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.glb-podium-card:hover {
    transform: translateY(-3px);
    border-color: rgba(120,180,60,0.35);
    box-shadow: 0 8px 22px rgba(0,0,0,0.55);
}
.glb-podium-me {
    border-color: #e8d480 !important;
    box-shadow: 0 0 0 1px #e8d480, 0 6px 22px rgba(232,212,128,0.28) !important;
}
.glb-podium-head {
    display: flex; align-items: baseline; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 5px;
}
.glb-podium-rank {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 14px;
    color: #c8e8a0;
    letter-spacing: 1px;
    min-width: 28px;
}
.glb-podium-name {
    font-size: 12px;
    font-weight: 700;
    color: #e0d8c0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.glb-podium-canvas {
    display: block;
    width: 100%;
    height: 120px;
    background:
        radial-gradient(ellipse at center, rgba(120,180,60,0.10) 0%, transparent 65%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,0.35) 0%, transparent 60%),
        rgba(0,0,0,0.28);
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: inset 0 -6px 14px rgba(0,0,0,0.22);
}
.glb-podium-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.glb-podium-tier {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.glb-podium-stats {
    display: flex; justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 10px;
}
.glb-podium-kills { color: #c8c0a8; }
.glb-podium-kd { color: #88dd66; font-weight: 700; }

/* ── Full table ── */
/* No internal scroll — the whole screen scrolls as one document, so the
   user can drag past the cards into the table without two scrollbars. */
.glb-table-wrap {
    padding: 8px 28px 36px;
    flex: 1 0 auto;
    background: transparent;
}
.glb-table-title {
    font-size: 10px;
    color: #7a9a5a;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    padding: 16px 0 10px;
}
.glb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #c8c0a8;
    table-layout: fixed;
    background: rgba(8,12,6,0.50);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
.glb-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, rgba(20,30,14,0.98) 0%, rgba(12,18,8,0.96) 100%);
    color: #8aa970;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
    padding: 12px 10px;
    border-bottom: 2px solid rgba(120,180,60,0.30);
    font-weight: 700;
}
.glb-col-rank    { width: 56px;  text-align: center !important; }
.glb-col-name    { width: 18%; }
.glb-col-userid  { width: 12%; color: #6a8a4a !important; }
.glb-col-tier    { width: 12%; }
.glb-col-kills   { width: 8%;  text-align: right !important; }
.glb-col-deaths  { width: 8%;  text-align: right !important; }
/* Assists column — раньше через .glb-col-num без width, header 'Ассистов'
   налезал на колонку K/D. Дать явную ширину + right-align. */
.glb-col-num     { width: 9%;  text-align: right !important; }
.glb-col-kd      { width: 8%;  text-align: right !important; padding-left: 14px !important; }
.glb-col-matches { width: 8%;  text-align: right !important; }
.glb-col-wins    { width: 8%;  text-align: right !important; }
.glb-col-xp      { width: 9%;  text-align: right !important; }

.glb-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    transition: background 0.12s;
}
.glb-table tbody tr:hover td { background: rgba(120,180,60,0.06); }
.glb-row-rank {
    font-family: 'Black Ops One', Impact, sans-serif;
    color: #c8c0a8;
    font-weight: 400;
    text-align: center;
    font-size: 14px;
}
.glb-row-rank-1 { color: #ffd24a; text-shadow: 0 0 12px rgba(255,210,74,0.4); }
.glb-row-rank-2 { color: #d8d8d8; }
.glb-row-rank-3 { color: #cd8a4a; }
.glb-row-name   { color: #e0d8c0; font-weight: 600; }
.glb-row-uid    { font-family: 'Courier New', monospace; color: #6a8a4a; font-size: 11px; }
.glb-row-tier   { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.glb-row-num    { font-family: 'Courier New', monospace; text-align: right; color: #c8c0a8; }
.glb-row-kd     { font-family: 'Courier New', monospace; text-align: right; color: #88dd66; font-weight: 700; }
.glb-row-xp     { font-family: 'Courier New', monospace; text-align: right; color: #aaaaaa; }

.glb-row-me td {
    background: linear-gradient(90deg, rgba(232,212,128,0.18), rgba(232,212,128,0.04)) !important;
    box-shadow: inset 4px 0 0 #e8d480;
}
.glb-row-me .glb-row-name { color: #ffe890; }
.glb-row-me:hover td {
    background: linear-gradient(90deg, rgba(232,212,128,0.26), rgba(232,212,128,0.08)) !important;
}

.glb-divider td {
    padding: 12px 8px;
    background: rgba(0,0,0,0.4);
    border-top: 1px dashed rgba(255,255,255,0.10);
    border-bottom: 1px dashed rgba(255,255,255,0.10);
    color: #c8a850;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 700;
}

/* Side-panel "Все игроки →" button (kept here for proximity) */
.lb-global-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    background: rgba(120,180,60,0.10);
    border: 1px solid rgba(120,180,60,0.25);
    color: #c8e8a0;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}
.lb-global-btn:hover {
    background: rgba(120,180,60,0.20);
    border-color: rgba(120,180,60,0.55);
    color: #e8f0c8;
    box-shadow: 0 0 14px rgba(120,180,60,0.25), inset 0 0 0 1px rgba(200,232,160,0.15);
    letter-spacing: 1.4px;
}
.lb-kd { color: #88dd66; font-family: 'Courier New', monospace; font-size: 11px; }

/* ──────────────────────────────────────────────────────────
   Menu ↔ Hall-of-Fame transition
   - Plain translate + opacity, no blur/skew (smoother & cheaper).
   - Parents that normally clip are unclamped while transitioning
     so panels can fly fully off-screen.
   - The topbar's rank-display and settings cluster also slide up
     individually so the dive looks like distinct tiles flying out.
   ────────────────────────────────────────────────────────── */
#mainMenu.menu-out,
#mainMenu.menu-in,
#globalLeaderboardScreen.glb-in,
#globalLeaderboardScreen.glb-out { overflow: hidden; }
#mainMenu.menu-out .menu-columns,
#mainMenu.menu-in  .menu-columns { overflow: visible; }

#mainMenu .menu-topbar,
#mainMenu .panel-side,
#mainMenu .panel-battle,
#mainMenu .topbar-left,
#mainMenu .topbar-center,
#mainMenu .topbar-right,
#globalLeaderboardScreen .glb-header,
#globalLeaderboardScreen .glb-table-wrap {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Custom easings — fast launch, soft glide */
:root {
    --ease-out-soft: cubic-bezier(0.22, 0.78, 0.32, 1);
    --ease-in-soft:  cubic-bezier(0.55, 0, 0.78, 0.32);
}

/* ── Menu exit ── */
/* Topbar bar slides up just enough to clear; its children fly off
   well past the viewport so they read as separate tiles ejecting. */
#mainMenu.menu-out .menu-topbar   { animation: slideOutBar    0.40s var(--ease-in-soft) forwards; }
#mainMenu.menu-out .topbar-left   { animation: tileOutUp      0.42s var(--ease-in-soft) forwards; animation-delay: 0.04s; }
#mainMenu.menu-out .topbar-center { animation: tileOutUp      0.42s var(--ease-in-soft) forwards; animation-delay: 0.08s; }
#mainMenu.menu-out .topbar-right  { animation: tileOutUp      0.42s var(--ease-in-soft) forwards; animation-delay: 0.12s; }
#mainMenu.menu-out .panel-side    { animation: slideOutLeft   0.42s var(--ease-in-soft) forwards; }
#mainMenu.menu-out .panel-battle  { animation: slideOutRight  0.42s var(--ease-in-soft) forwards; }

/* ── Menu re-entry ── */
#mainMenu.menu-in .menu-topbar    { animation: slideInBar     0.50s var(--ease-out-soft) both; }
#mainMenu.menu-in .topbar-left    { animation: tileInDown     0.55s var(--ease-out-soft) both; animation-delay: 0.10s; }
#mainMenu.menu-in .topbar-center  { animation: tileInDown     0.55s var(--ease-out-soft) both; animation-delay: 0.16s; }
#mainMenu.menu-in .topbar-right   { animation: tileInDown     0.55s var(--ease-out-soft) both; animation-delay: 0.22s; }
#mainMenu.menu-in .panel-side     { animation: slideInLeft    0.55s var(--ease-out-soft) both; animation-delay: 0.06s; }
#mainMenu.menu-in .panel-battle   { animation: slideInRight   0.55s var(--ease-out-soft) both; animation-delay: 0.06s; }

/* ── Hall-of-Fame entry ── */
#globalLeaderboardScreen.glb-in .glb-header     { animation: slideInDown 0.50s var(--ease-out-soft) both; }
#globalLeaderboardScreen.glb-in .glb-table-wrap { animation: glbTableIn  0.55s var(--ease-out-soft) both; animation-delay: 0.06s; }

/* ── Hall-of-Fame exit ── */
#globalLeaderboardScreen.glb-out .glb-header     { animation: slideOutUp 0.40s var(--ease-in-soft) forwards; }
#globalLeaderboardScreen.glb-out .glb-table-wrap { animation: glbTableOut 0.40s var(--ease-in-soft) forwards; }

@keyframes slideOutUp    { to { transform: translateY(-140%); opacity: 0; } }
@keyframes slideOutLeft  { to { transform: translateX(-140%); opacity: 0; } }
@keyframes slideOutRight { to { transform: translateX( 140%); opacity: 0; } }
@keyframes slideInDown   { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInLeft   { from { transform: translateX(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInRight  { from { transform: translateX( 140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes glbTableIn    { from { transform: translateY( 70vh);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes glbTableOut   { to   { transform: translateY( 70vh);  opacity: 0; } }
/* Topbar — bar slides just over its own height; tiles fly past the
   top edge of the viewport for a clear "ejected from above" feel. */
@keyframes slideInBar    { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOutBar   { to   { transform: translateY(-100%); opacity: 0; } }
@keyframes tileInDown    { from { transform: translateY(-32vh);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tileOutUp     { to   { transform: translateY(-32vh);  opacity: 0; } }

/* ===========================================================
   Top-bar buttons (Missions / Hall-of-Fame) — added 2026-05
   =========================================================== */
.topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(15,22,10,0.65);
    border: 1px solid rgba(120,160,60,0.4);
    border-radius: 10px;
    color: #c8e2a0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.topbar-btn:hover {
    background: rgba(120,160,60,0.18);
    border-color: rgba(170,200,90,0.7);
    color: #e8f5b0;
}
.topbar-btn-icon {
    font-size: 16px;
    line-height: 1;
}
.topbar-btn-label {
    line-height: 1;
}
.topbar-btn-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #c84030, #8a2010);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 6px rgba(200,80,40,0.5);
}
.topbar-btn-hof {
    background: rgba(60,40,15,0.7);
    border-color: rgba(220,160,50,0.5);
    color: #ffd28a;
}
.topbar-btn-hof:hover {
    background: rgba(220,160,50,0.18);
    border-color: rgba(255,210,138,0.85);
    color: #ffe4a8;
}
.topbar-btn-hof .topbar-btn-icon {
    color: #ffd24a;
    text-shadow: 0 0 6px rgba(255,210,74,0.6);
}

/* Missions popup — anchored top-left under the trigger */
.missions-popup {
    position: absolute;
    top: 64px;
    left: 18px;
    z-index: 80;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(28,34,16,0.97), rgba(14,18,8,0.97));
    border: 1px solid rgba(120,160,60,0.5);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6), inset 0 0 12px rgba(0,0,0,0.4);
    animation: popupFadeIn 0.18s ease-out;
}
.missions-popup[hidden] { display: none; }
.missions-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(120,160,60,0.25);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #c8e2a0;
    text-transform: uppercase;
}
@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Friends panel */
.side-friends .side-block-title { color: #88c0e8; }
.friend-search { padding: 8px; background: rgba(0,0,0,0.25); border-radius: 6px; margin-bottom: 8px; }
.friend-search[hidden] { display: none; }
.friend-search-row {
    display: flex; gap: 6px; align-items: center;
}
.friend-search-row input {
    flex: 1;
    padding: 6px 10px;
    background: rgba(15,22,10,0.7);
    border: 1px solid rgba(120,160,60,0.35);
    border-radius: 4px;
    color: #c8e2a0;
    font-size: 12px;
}
.friend-search-row input:focus {
    outline: none;
    border-color: rgba(170,200,90,0.8);
}
.friend-search-close {
    width: 24px; height: 24px;
    background: transparent;
    border: 1px solid rgba(180,120,40,0.35);
    color: #c89a4a;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.friend-search-results {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
}
.friend-search-row-item, .friend-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 5px;
    margin-top: 4px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(120,160,60,0.12);
}
.friend-row .friend-info { display: flex; flex-direction: column; min-width: 0; }
.friend-row .friend-name { font-size: 12px; font-weight: 700; color: #c8e2a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row .friend-uid { font-size: 9px; color: #6a8a4a; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; }
.friend-row .friend-online {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4a4a4a;
    margin-right: 4px;
}
.friend-row.is-online .friend-online {
    background: #5acc5a;
    box-shadow: 0 0 4px rgba(90,204,90,0.6);
}
.friend-row .friend-action {
    background: linear-gradient(135deg, #3a8a5a, #2a6a4a);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.friend-row .friend-action:hover { background: linear-gradient(135deg, #4aaa6a, #3a8a5a); }
.friend-row .friend-action.danger { background: linear-gradient(135deg, #8a3a3a, #6a2a2a); }
.friend-row .friend-action.danger:hover { background: linear-gradient(135deg, #aa4a4a, #8a3a3a); }
.friend-row .friend-action.muted { background: rgba(80,80,80,0.6); border-color: rgba(255,255,255,0.05); }
.friend-row .friend-action.offline {
    background: rgba(60,60,60,0.7);
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.06);
    cursor: default;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* Passive status pill (replaces a button when no action is possible). */
.friend-row .friend-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.45);
    background: rgba(60,60,60,0.55);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: default;
    user-select: none;
    pointer-events: none;
}
.friend-row .friend-status--offline { /* default styling above is the offline look */ }
.friend-row .friend-status--sent {
    background: rgba(70,70,70,0.7);
    color: rgba(255,225,140,0.55);
}
.friend-row .friend-status--inparty {
    background: rgba(50,80,55,0.55);
    color: rgba(180,225,180,0.7);
}

/* Party invite popup — custom in-game UI, replaces window.confirm. */
.party-invite-popup {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 8000;
    animation: partyInviteSlide 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes partyInviteSlide {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.party-invite-card {
    width: 320px;
    background: linear-gradient(160deg, rgba(28,38,32,0.97), rgba(18,24,20,0.97));
    border: 1px solid rgba(120,200,140,0.45);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 24px rgba(80,180,110,0.2);
    overflow: hidden;
    color: #e8efe6;
}
.party-invite-header {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: #b5e3b8;
    background: linear-gradient(90deg, rgba(80,180,110,0.18), rgba(80,180,110,0.05));
    border-bottom: 1px solid rgba(120,200,140,0.25);
}
.party-invite-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.party-invite-callsign {
    font-size: 17px;
    font-weight: bold;
    color: #ffd86a;
}
.party-invite-text {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.party-invite-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
}
.party-invite-actions button {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.party-invite-actions button:hover { filter: brightness(1.15); }
.party-invite-actions button:active { transform: translateY(1px); }
.party-invite-accept {
    background: linear-gradient(135deg, #3a8a5a, #2a6a3a);
    border-color: rgba(120,200,140,0.6);
    color: #fff;
}
.party-invite-decline {
    background: rgba(60,60,60,0.7);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.75);
}
.party-invite-bar {
    height: 3px;
    background: rgba(0,0,0,0.4);
}
.party-invite-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #80c890, #4a8a5a);
}
.friend-row.is-pending {
    background: rgba(220,150,40,0.1);
    border-color: rgba(220,150,40,0.4);
}
.friend-row .friend-action-row { display: flex; gap: 4px; }
.friends-list { max-height: 36vh; overflow-y: auto; padding-right: 4px; }
.friends-list-section {
    font-size: 9px;
    color: #6a8a4a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 8px 4px 4px;
    font-weight: 700;
}
.friends-list-section:first-child { margin-top: 0; }
.friend-emblem {
    width: 28px; height: 34px;
    display: flex; align-items: center; justify-content: center;
}

/* Team panel */
.side-team .side-block-title { color: #d8c898; }
.team-list { max-height: 24vh; overflow-y: auto; padding-right: 4px; }
.team-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 5px;
    margin-top: 4px;
    background: rgba(0,0,0,0.22);
    border-left: 3px solid rgba(180,120,40,0.5);
}
.team-row.is-leader { border-left-color: #ffd24a; background: rgba(220,160,50,0.10); }
.team-row .team-info { display: flex; flex-direction: column; min-width: 0; }
.team-row .team-name {
    font-size: 12px; font-weight: 700; color: #c8e2a0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-row .team-uid { font-size: 9px; color: #6a8a4a; }
.team-row .team-leader-badge { font-size: 10px; color: #ffd24a; font-weight: 800; }
.team-empty {
    padding: 14px 10px;
    text-align: center;
    color: #5a5040;
    font-size: 11px;
    font-style: italic;
}

/* Disabled "leader-only" lock state for the join/create-battle button. */
.btn-locked,
.btn-locked:hover {
    background: linear-gradient(135deg, #444, #2a2a2a) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.45) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    text-shadow: none !important;
    pointer-events: auto;
}

/* ===========================================================
   Duel match-end screen — tournament layout
   =========================================================== */
.me-stats-duel .me-stats-title {
    font-size: 56px;
    letter-spacing: 4px;
    margin-bottom: 4px;
}
.me-stats-duel .me-stats-mode-tag {
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.me-duel-board {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    width: min(900px, 92vw);
    margin: 0 auto 24px;
}
.me-duel-team {
    flex: 1 1 0;
    background: linear-gradient(180deg, rgba(20,22,28,0.75), rgba(8,10,15,0.85));
    border: 1.5px solid var(--c, #888);
    border-radius: 12px;
    padding: 20px 24px 22px;
    box-shadow: inset 0 0 22px rgba(0,0,0,0.6);
    text-align: center;
    transition: transform 0.2s;
}
.me-duel-team.is-victor {
    box-shadow: inset 0 0 22px rgba(0,0,0,0.6),
                0 0 24px var(--c),
                0 0 60px rgba(255,210,138,0.15);
    transform: translateY(-4px);
}
.me-duel-team-head {
    color: var(--c, #fff);
    font: 800 20px 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 4px;
    text-shadow: 0 0 12px var(--c);
    margin-bottom: 6px;
}
.me-duel-team-score {
    color: var(--c, #fff);
    font: 900 78px 'Black Ops One', 'Impact', sans-serif;
    line-height: 1;
    text-shadow: 0 0 22px var(--c), 0 4px 14px rgba(0,0,0,0.85);
    margin: 6px 0 12px;
}
.me-duel-pips {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}
.me-duel-pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
}
.me-duel-pip.on {
    border-color: rgba(255,255,255,0.55);
}
.me-duel-vs {
    align-self: center;
    color: rgba(255,255,255,0.45);
    font: 900 28px 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 4px;
    padding: 0 4px;
}
.me-duel-team-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
}
.me-duel-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    font-size: 14px;
    color: #c8c8a0;
}
.me-duel-player.me-duel-self {
    background: rgba(255,210,138,0.15);
    border: 1px solid rgba(255,210,138,0.5);
    color: #ffd28a;
    font-weight: 700;
}
.me-duel-pname {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-duel-bot {
    font-size: 9px;
    background: rgba(120,120,120,0.4);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    letter-spacing: 1px;
    vertical-align: middle;
}
.me-duel-pkd {
    color: #ffd28a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.me-duel-pkd .muted {
    color: rgba(255,210,138,0.4);
    margin: 0 4px;
}
.me-duel-team-empty {
    color: rgba(255,255,255,0.25);
    font-style: italic;
    padding: 14px;
}

/* ===========================================================
   Duel team-pick lobby
   =========================================================== */
#duelLobby {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(15,15,20,0.95), rgba(0,0,0,0.98));
    z-index: 200;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#duelLobby[hidden], #duelLobby[style*="display:none"], #duelLobby[style*="display: none"] {
    display: none !important;
}
.duel-lobby-wrap {
    text-align: center;
    width: min(900px, 92vw);
}
.duel-lobby-title {
    color: #ffd28a;
    font: 900 56px 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 6px;
    margin: 0 0 8px;
    text-shadow: 0 0 24px rgba(255,210,138,0.5);
}
.duel-lobby-sub {
    color: rgba(255,255,255,0.55);
    font: 700 14px 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 36px;
}
.duel-lobby-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.duel-lobby-team {
    flex: 1 1 0;
    min-height: 240px;
    background: linear-gradient(180deg, rgba(20,22,28,0.85), rgba(8,10,15,0.95));
    border: 2px solid;
    border-radius: 14px;
    padding: 24px 18px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    color: #fff;
    font-family: 'Black Ops One', 'Impact', sans-serif;
}
.duel-lobby-team--red  { border-color: #d65a4a; }
.duel-lobby-team--blue { border-color: #4a9ed6; }
.duel-lobby-team:hover {
    transform: translateY(-4px);
}
.duel-lobby-team--red:hover  { box-shadow: 0 0 32px rgba(214,90,74,0.7); background: linear-gradient(180deg, rgba(80,30,20,0.85), rgba(40,15,10,0.95)); }
.duel-lobby-team--blue:hover { box-shadow: 0 0 32px rgba(74,158,214,0.7); background: linear-gradient(180deg, rgba(20,40,80,0.85), rgba(10,20,40,0.95)); }
.duel-lobby-team.is-mine {
    box-shadow: 0 0 28px currentColor;
}
.duel-lobby-team--red.is-mine { color: #d65a4a; }
.duel-lobby-team--blue.is-mine { color: #4a9ed6; }
.duel-lobby-team.is-full {
    opacity: 0.4;
    cursor: not-allowed;
}
.dlt-name {
    font-size: 28px;
    letter-spacing: 6px;
    margin-bottom: 16px;
    text-shadow: 0 0 16px currentColor;
}
.duel-lobby-team--red  .dlt-name { color: #ff7a6a; }
.duel-lobby-team--blue .dlt-name { color: #6abfff; }
.dlt-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0;
    min-height: 80px;
    color: #c8c8a0;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 1px;
}
.dlt-slot {
    padding: 6px 10px;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}
.dlt-slot.is-empty {
    color: rgba(255,255,255,0.25);
    font-style: italic;
}
.dlt-slot.is-me {
    background: rgba(255,210,138,0.18);
    border-color: rgba(255,210,138,0.6);
    color: #ffd28a;
}
.dlt-action {
    margin-top: 12px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    letter-spacing: 3px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.duel-lobby-vs {
    color: rgba(255,255,255,0.4);
    font: 900 36px 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 4px;
}
.duel-lobby-timer {
    margin-top: 32px;
    color: #ffd28a;
    font: 700 18px 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 3px;
}

/* ════════════════════════════════════════════════════════════════
   ▼ TANKI-STYLE TOPBAR CAPSULES — overrides earlier topbar styles ▼
   Inspired by Tanki Online's brushed-metal capsule row. Each item
   in the topbar is a tight rounded-rect with a top-highlight and a
   subtle inset shadow, on a dark metallic gradient. They sit in a
   single row with no gaps between them — true "capsule strip."
   ════════════════════════════════════════════════════════════════ */
.menu-topbar {
    padding: 10px 18px;
    background: linear-gradient(180deg, #1c2516 0%, #10160b 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 14px rgba(0, 0, 0, 0.55);
    min-height: 56px;
    gap: 12px;
}

/* All capsule-like elements share this base — buttons, crystals, gear */
.topbar-btn,
.settings-gear-btn,
.crystals-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    height: 38px;
    background: linear-gradient(180deg, #46535e 0%, #2a333d 50%, #1f262d 100%);
    border: 1px solid #0a0e12;
    border-top-color: #5a6770;
    border-radius: 6px;
    color: #d8e0e8;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    transition: filter 0.12s, transform 0.06s;
    position: relative;
}
.topbar-btn:hover,
.settings-gear-btn:hover,
.crystals-display:hover {
    filter: brightness(1.18);
}
.topbar-btn:active,
.settings-gear-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        0 0 2px rgba(0, 0, 0, 0.4);
}

/* Settings gear — square capsule, icon-only */
.settings-gear-btn {
    width: 38px;
    padding: 0;
    font-size: 18px;
    color: #d8e0e8;
    transform: none;
}
.settings-gear-btn:hover { transform: none; filter: brightness(1.18); }

/* Hall-of-fame variant — gold tint to stand out */
.topbar-btn-hof {
    background: linear-gradient(180deg, #6e5630 0%, #3e2e18 50%, #2a1e10 100%);
    border-top-color: #826838;
    color: #ffd486;
}
.topbar-btn-hof .topbar-btn-icon { color: #ffd24a; }

/* Missions variant — blue-grey accent */
.topbar-btn-missions {
    background: linear-gradient(180deg, #46535e 0%, #2a333d 50%, #1f262d 100%);
    border-top-color: #5a6770;
}

/* Icons in capsules — cleaner sizing, subtle drop shadow */
.topbar-btn-icon {
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

/* Crystals — gold tint via inner color, share capsule shape */
.crystals-display {
    background: linear-gradient(180deg, #4a3e22 0%, #2e2614 50%, #1f1a0e 100%);
    border-top-color: #5e5028;
    cursor: default;
    padding: 0 16px;
}
.crystals-display:hover { filter: none; }
.crystals-display span {
    color: #ffe48a;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 16px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.crystals-display canvas { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)); }

/* Badge stays the same red dot, just adjust position for new capsule */
.topbar-btn-badge {
    top: -5px;
    right: -5px;
    border-radius: 8px;
}

/* Right-side group — capsules visually connected with a tight gap */
.topbar-right { gap: 6px; }
.topbar-left  { gap: 10px; }

/* Rank pill — match capsule aesthetic, slimmer */
.rank-display {
    height: 38px;
    padding: 0 16px;
    background: linear-gradient(180deg, #1f2a16 0%, #131a0d 100%);
    border: 1px solid #0a0e08;
    border-top-color: #2c3a20;
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.5);
    gap: 12px;
}
.rank-info { min-width: 170px; }
.rank-name {
    font-size: 13px;
    color: #ffe48a;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.rank-bar-track {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Topbar input — capsule-flavored too */
.topbar-left input {
    height: 38px;
    background: linear-gradient(180deg, #11170c 0%, #0b1008 100%);
    border: 1px solid #050805;
    border-top-color: #2c3a20;
    border-radius: 6px;
    color: #e8d480;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 1.5px;
    font-size: 14px;
}
.topbar-left input:focus {
    outline: none;
    border-color: rgba(120, 180, 60, 0.6);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(120, 180, 60, 0.25);
}
.topbar-left label {
    color: #7a9a5a;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* ════════════════════════════════════════════════════════════════
   ▼ TANKI-STYLE TOPBAR REWORK v2 ▼
   Layout: [emblem] [wide XP bar] [crystals] [missions] [HoF] [⚙][↩]
   The XP bar capsule fills almost the entire row (flex:1) — that's
   the visual centerpiece, like in Tanki Online.
   ════════════════════════════════════════════════════════════════ */
.menu-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #1c2516 0%, #10160b 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 14px rgba(0, 0, 0, 0.55);
    min-height: 56px;
}

/* Standalone rank emblem — 44×44 container, эмблема выходит за края */
.topbar-rank-emblem {
    width: 44px;
    height: 44px;
    position: relative;
    overflow: visible;
    background: linear-gradient(180deg, #5a4a22 0%, #1f1810 100%);
    border: 1px solid #0a0e08;
    border-top-color: #6e5a30;
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 150, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}
.topbar-rank-emblem canvas { display: block; }

/* Wide XP-bar capsule — flex:1 so it spans the row.
   Stacks two layers: the fill (absolute, grows left→right by width %)
   and the text overlay (absolute, sits on top, mix-blend ensures it's
   readable on both filled and unfilled portions). */
.topbar-xpbar {
    flex: 1;
    position: relative;
    height: 38px;
    border-radius: 6px;
    border: 1px solid #050805;
    border-top-color: #2c3a20;
    background: linear-gradient(180deg, #0a0f06 0%, #060a04 100%);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    min-width: 240px;
}
/* Track — внутренняя «канавка» внутри рамки топбар-шкалы. Заполнение
   живёт здесь, а не на границе самой капсулы — поэтому видно, что
   полоска ВНУТРИ поля, а не «снаружи». */
.topbar-xpbar-track {
    position: absolute;
    inset: 4px;
    border-radius: 3px;
    /* Прозрачный track — пустая область визуально совпадает с фоном
       самой капсулы. Видим только заполнение, ползущее внутри
       4px-инсета от рамки. */
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}
.topbar-xpbar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(180deg, #95cc4f 0%, #6a9c30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    transition: width 0.4s;
}
.topbar-xpbar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 14px;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    letter-spacing: 1.5px;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}
.topbar-xp-num {
    color: #ffffff;
    font-size: 13px;
    flex-shrink: 0;
}
.topbar-xp-rank {
    /* Плоский золотой текст с чёрной обводкой — раньше был светло-зелёный
       с глубокой 3D-тенью от родительского .topbar-xpbar-text, на жёлтой
       шкале опыта плохо читался. Перебиваем text-shadow на «обводку»
       (8 направлений по 1px) — никакого 3D, только чёткий контур. */
    color: #ffd24a;
    flex-shrink: 0;
    text-shadow:
        -1px -1px 0 #000,  1px -1px 0 #000,
        -1px  1px 0 #000,  1px  1px 0 #000,
        -1px  0   0 #000,  1px  0   0 #000,
         0  -1px 0 #000,   0   1px 0 #000;
    font-weight: 600;
}
.topbar-xp-player {
    color: #ffe48a;
    margin-left: auto;
    font-size: 13px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}

/* Hide legacy elements that may still be in older mainMenu sections */
.menu-topbar > .topbar-left,
.menu-topbar > .topbar-center,
.menu-topbar > .topbar-right { display: none !important; }

/* Callsign capsule — own capsule between emblem and XP bar.
   Click toggles between display <span> and editable <input>. */
.topbar-callsign {
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: linear-gradient(180deg, #1f2a16 0%, #131a0d 100%);
    border: 1px solid #0a0e08;
    border-top-color: #2c3a20;
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.5);
    cursor: text;
    flex-shrink: 0;
    min-width: 140px;
    max-width: 200px;
    transition: filter 0.12s;
}
.topbar-callsign:hover { filter: brightness(1.12); }
.topbar-callsign-text {
    color: #ffe48a;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.topbar-callsign-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffe48a;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    width: 100%;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════════
   ▼ TOPBAR overrides ▼
   Note: the bulk of style.css is still unlayered. In CSS cascade
   rules, UNLAYERED selectors beat ANY @layer (including @layer
   overrides). So these stay with !important for now — they have
   to win against earlier unlayered .menu-topbar / .topbar-rank-emblem
   declarations. The @layer ordering at the top of the file is
   ready for future migration: wrap the EARLIER conflicting rules
   in @layer panels first, then this block can drop !important and
   move into @layer overrides. Native CSS nesting (&) is available.
   ════════════════════════════════════════════════════════════════ */
.menu-topbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 14px 18px !important;
}

.topbar-rank-emblem {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    position: relative !important;
    overflow: visible !important;

    & canvas {
        /* Canvas размером больше container'а — эмблема выходит за края.
           Position:absolute + centered transform позволяет overflow в обе стороны. */
        width: 52px !important;
        height: 60px !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    }

    &:hover canvas {
        filter: drop-shadow(0 0 8px rgba(255, 210, 138, 0.5))
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    }
}

/* ════════════════════════════════════════════════════════════════
   ▼ GLOBAL TOPBAR — единый layout для всех экранов ▼
   Один и тот же вид везде (главное меню, бой, загрузка). Скрывается
   ТОЛЬКО на authScreen (когда игрок ещё не вошёл в аккаунт).
   Раскладка:
     [emblem][callsign][===wide XP bar===] [crystals][missions]   [HoF][⚙][↩]
   • XP-шкала растягивается на всё доступное пространство (flex:1)
   • Кристаллы + Задания — после XP, идут естественно
   • HoF + ⚙ + ↩ — прижаты к правому краю через margin-left:auto
   • Капсулы сохраняют объёмный вид (gradient + inset shadows) —
     стили из ранних блоков .topbar-btn / .crystals-display / etc
     применяются как есть. Сама полоса topbar'а — без подложки,
     капсулы плавают на фоне страницы.
   ════════════════════════════════════════════════════════════════ */
#globalTopbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body.topbar-hidden #globalTopbar { display: none; }

/* Universal spread layout — applied always */
#globalTopbar > .topbar-xpbar {
    flex: 1 1 auto !important;
    min-width: 240px !important;
}
#globalTopbar > .topbar-btn-hof {
    margin-left: auto !important;
}

/* ════════════════════════════════════════════════════════════════
   ▼ Topbar: padding-top вместо top/height shift ▼
   Раньше делал top:66px → screen начинался ниже шапки, и сверху
   просвечивала body-подложка как отдельная серая полоса. Уродливо.
   Теперь screen остаётся top:0 height:100% (фон тянется во всю
   высоту, под шапкой — то же что и под контентом), а сам контент
   панелей сдвигается вниз через padding-top.
   ════════════════════════════════════════════════════════════════ */
:root {
    --topbar-h: 66px;
}

/* Main menu — flex column. padding-top сдвигает .menu-columns вниз. */
body:not(.topbar-hidden) #mainMenu {
    padding-top: var(--topbar-h) !important;
}

/* Garage — содержит свой собственный hangar-topbar. Сдвигаем его
   margin'ом чтобы наш глобальный не перекрывал. */
body:not(.topbar-hidden) #garageScreen .hangar-topbar {
    margin-top: var(--topbar-h);
}

/* В бою (canvas full-screen) — отступы не нужны, шапка плавает
   поверх рендера. */

/* В главном меню подгоняем шапку под стиль панелей: тёмно-зелёный
   фон с тонкой границей, как у .menu-panel. Так шапка читается как
   четвёртая «панель» сверху, а не чужой плавающий блок. */
body:has(#mainMenu.active) #globalTopbar {
    background: linear-gradient(180deg,
        rgba(28, 38, 22, 0.88) 0%,
        rgba(20, 28, 14, 0.92) 100%) !important;
    border-bottom: 1px solid rgba(120, 160, 60, 0.20) !important;
}

/* В бою — никакой подложки у самой шапки (transparent). Полупрозрачными
   становятся ТОЛЬКО капсулы, чтобы они не заслоняли игровую сцену.
   Текст внутри капсул остаётся читаемым (alpha не трогает текст). */
body.in-battle #globalTopbar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body.in-battle #globalTopbar > .topbar-rank-emblem,
body.in-battle #globalTopbar > .topbar-callsign,
body.in-battle #globalTopbar > .topbar-xpbar,
body.in-battle #globalTopbar > .crystals-display,
body.in-battle #globalTopbar > .topbar-btn,
body.in-battle #globalTopbar > .settings-gear-btn {
    opacity: 0.78;
    transition: opacity 0.15s;
}
body.in-battle #globalTopbar > *:hover {
    opacity: 1.0;
}

/* ════════════════════════════════════════════════════════════════
   ▼ Topbar — icon group + battle-mode HoF↔hangar swap ▼
   ════════════════════════════════════════════════════════════════ */
/* Settings + logout сидят в одном flex-кластере с маленьким gap'ом —
   чтобы не выглядели как два отдельных оторванных значка. Кластер
   сам по себе уезжает к правому краю через margin-left: auto на
   .topbar-btn-hof / .topbar-btn-hangar (предыдущий элемент). */
#globalTopbar > .topbar-icon-group {
    display: flex;
    align-items: center;
    gap: 4px;            /* плотно друг к другу */
}

/* Logout-кнопка получает красноватый акцент чтобы отличаться от
   шестерёнки настроек — глазу понятно «выход» vs «настройки». */
#globalTopbar .topbar-logout-btn {
    color: #ff8866 !important;
    font-size: 16px !important;
}
#globalTopbar .topbar-logout-btn:hover {
    color: #ff5544 !important;
}

/* Hangar capsule — синий металлический градиент, ставит акцент на
   "вернуться в гараж" в бою. Скрыта в меню (style=display:none),
   показывается через body.in-battle. */
#globalTopbar > .topbar-btn-hangar {
    background: linear-gradient(180deg, #2c4566 0%, #182838 50%, #0e1822 100%) !important;
    border-top-color: #3a5a7a !important;
    color: #b0d8ff !important;
    margin-left: auto !important;     /* спейсер до icon-group */
}
#globalTopbar > .topbar-btn-hangar .topbar-btn-icon {
    color: #88c8ff;
}

/* В бою — прячем HoF, показываем hangar-кнопку */
body.in-battle #globalTopbar > .topbar-btn-hof { display: none !important; }
body.in-battle #globalTopbar > .topbar-btn-hangar { display: inline-flex !important; }

/* В меню — наоборот: HoF видна, hangar скрыт (default через inline style) */
body:not(.in-battle) #globalTopbar > .topbar-btn-hangar { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   ▼ Topbar capsules — flatten ▼
   Сильно градиентный 3D-вид капсул выделялся на фоне остального
   меню (плоские .menu-panel, .friend-row и т.п.). Уплощаем:
   • Solid фон вместо вертикального градиента (3 stops → 1 цвет
     с лёгкой top-tint для минимального объёма).
   • Убираем inset top-highlight и bottom-shadow.
   • Убираем drop-shadow под капсулой.
   • Текст-shadow ослаблен (читаемость осталась).
   • Border остаётся — даёт визуальную границу без 3D-эффекта.
   ════════════════════════════════════════════════════════════════ */

#globalTopbar > .topbar-btn,
#globalTopbar > .settings-gear-btn,
#globalTopbar > .crystals-display,
#globalTopbar .topbar-icon-group > .settings-gear-btn {
    background: #2a333d !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

#globalTopbar > .topbar-btn-hof {
    background: #3e2e18 !important;
    border-color: rgba(255, 212, 138, 0.20) !important;
    color: #ffd486 !important;
}
#globalTopbar > .topbar-btn-hangar {
    background: #1c2c40 !important;
    border-color: rgba(120, 180, 220, 0.20) !important;
    color: #b0d8ff !important;
}
#globalTopbar > .crystals-display {
    background: #2e2614 !important;
    border-color: rgba(255, 212, 138, 0.20) !important;
}
#globalTopbar > .topbar-callsign {
    background: #1a2410 !important;
    background-image: none !important;
    border: 1px solid rgba(120, 160, 60, 0.18) !important;
    box-shadow: none !important;
}
#globalTopbar > .topbar-xpbar {
    background: #0e1408 !important;
    background-image: none !important;
    border: 1px solid rgba(120, 160, 60, 0.18) !important;
    box-shadow: none !important;
}
/* XP-bar fill — оставим градиентом (визуально отличается от трека) */
#globalTopbar .topbar-xpbar-fill {
    box-shadow: none !important;
}

#globalTopbar .topbar-btn-icon {
    filter: none !important;
}

/* Hover — лёгкое осветление (+12% вместо +18%) */
#globalTopbar > .topbar-btn:hover,
#globalTopbar > .settings-gear-btn:hover,
#globalTopbar .topbar-icon-group > .settings-gear-btn:hover {
    filter: brightness(1.12);
}

/* ════════════════════════════════════════════════════════════════
   ▼ Topbar — emblem + callsign как единое целое ▼
   Раньше эмблема и позывной были отдельными визуальными блоками
   с разным фоном. Делаем их визуально слитной парой:
   • У позывного убираем background+border — он становится 'плашкой'
     прямо рядом с эмблемой, без рамки.
   • Между ними нулевой gap, эмблема как иконка слева от текста.
   ════════════════════════════════════════════════════════════════ */
#globalTopbar > .topbar-rank-emblem + .topbar-callsign {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-left: -4px !important;       /* притянуть вплотную к эмблеме */
    padding-left: 6px !important;
    padding-right: 12px !important;
}