/* ==========================================================
   ВОЙНА БАЗ — Полностью обновлённое тёмное оформление
   ========================================================== */

:root {
    --primary: #ffb648;
    --accent:  #4dd07a;
    --bg:      #0b0e14;
    --bg2:     #141a22;
    --card:    #141a22;
    --card-bd: #232c37;
    --text:    #d8dee4;
    --muted:   #8a96a3;
    --topbar1: #161c24;
    --topbar2: #0f141a;
    --link:    #ffb648;
    --link-h:  #ffc870;
    --danger:  #d83a3a;
    --success: #4dd07a;
    --warn:    #ffb648;
    --rcard:   12px;
    --rbtn:    8px;
    --maxw:    1180px;
    --font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, sans-serif;
    --shadow1: 0 4px 16px rgba(0,0,0,0.35);
    --shadow2: 0 12px 40px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
    margin: 0; padding: 0;
    background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%) fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.has-bg-image::before {
    content:""; position: fixed; inset:0; z-index:-1;
    background-size: cover; background-position: center;
    opacity: var(--bg-image-opacity, 0.15);
}

a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-h); text-decoration: none; }

::selection { background: var(--primary); color: #1a1206; }

/* ==========================================================
   НОВЫЙ МАКЕТ: ВЕРХНЯЯ ПАНЕЛЬ + БОКОВОЕ МЕНЮ + КОНТЕНТ
   ========================================================== */

:root {
    --topbar-h:    58px;
    --side-w:      240px;
    --side-w-mini: 64px;
}

.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 200; height: var(--topbar-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px;
    background: linear-gradient(180deg, var(--topbar1) 0%, var(--topbar2) 100%);
    border-bottom: 1px solid var(--card-bd);
    box-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.topbar .brand { flex: 0 0 auto; }
.topbar .brand a {
    display: inline-flex; align-items: center; gap: 10px;
    color: #fff; font-weight: 800; font-size: 18px; letter-spacing: 1px;
    text-transform: uppercase; text-decoration: none;
    text-shadow: 0 0 18px rgba(255,182,72,.35);
}
.topbar .brand a img { max-height: 32px; max-width: 32px; border-radius: 6px; }
.topbar .brand a::before {
    content:"⚔"; color: var(--primary); font-size: 20px;
    filter: drop-shadow(0 0 8px var(--primary));
}
.topbar .brand a:has(img)::before { display: none; }

.sidebar-toggle {
    flex: 0 0 auto;
    background: rgba(255,255,255,.04); border: 1px solid var(--card-bd);
    color: #fff; width: 38px; height: 38px; border-radius: 8px;
    cursor: pointer; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.sidebar-toggle:hover { background: rgba(255,182,72,.18); transform: scale(1.05); }

.topbar-right {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    min-width: 0;
}
.topbar-right .balance {
    background: linear-gradient(180deg, #1d2630, #161e26);
    padding: 6px 12px; border-radius: 8px;
    color: var(--success); font-weight: 700; border: 1px solid #2a3744;
    font-size: 13px; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.topbar-right .online-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(77,208,122,.12); border: 1px solid rgba(77,208,122,.4);
    color: var(--success); padding: 4px 10px; border-radius: 999px; font-size: 12px;
    white-space: nowrap;
}
.topbar-right .online-pill .dot {
    width: 8px; height: 8px; background: var(--success); border-radius: 50%;
    box-shadow: 0 0 10px var(--success);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .55; transform: scale(.85); }
}
.topbar-right .user-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--card-bd);
    color: #fff; text-decoration: none; transition: all .15s ease;
}
.topbar-right .user-link:hover {
    background: rgba(255,182,72,.12); border-color: var(--primary);
    color: #fff; text-decoration: none;
}
.topbar-right .user-name {
    color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.topbar-right .msg-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(216,58,58,.18); border: 1px solid rgba(216,58,58,.45);
    color: #ffc8c8; padding: 4px 10px; border-radius: 999px; font-size: 12px;
    text-decoration: none; white-space: nowrap;
}
.topbar-right .msg-pill:hover { background: rgba(216,58,58,.28); color: #fff; }
.topbar-right .logout {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #ff8a8a; border: 1px solid rgba(216,58,58,.35);
    background: rgba(216,58,58,.06); font-size: 16px;
    text-decoration: none; transition: all .15s ease;
}
.topbar-right .logout:hover { background: rgba(216,58,58,.22); color:#fff; }
.topbar-right .auth-btn {
    padding: 8px 14px; border-radius: 8px; color: #fff;
    border: 1px solid var(--card-bd); background: rgba(255,255,255,.04);
    font-size: 13px; text-decoration: none; transition: all .15s;
}
.topbar-right .auth-btn:hover { background: rgba(255,255,255,.1); }
.topbar-right .auth-btn.primary {
    background: linear-gradient(180deg, var(--primary), #f09f30);
    color: #1a1206; font-weight: 700; border-color: var(--primary);
}

/* === БОКОВОЕ МЕНЮ === */
.sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
    width: var(--side-w); z-index: 150;
    background: linear-gradient(180deg, var(--topbar1) 0%, var(--bg) 100%);
    border-right: 1px solid var(--card-bd);
    overflow-y: auto; overflow-x: hidden;
    transition: width .25s ease, transform .25s ease;
    box-shadow: 4px 0 22px rgba(0,0,0,.35);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--card-bd);
    position: sticky; top: 0;
    background: linear-gradient(180deg, var(--topbar1) 90%, transparent);
    z-index: 5;
}
.side-title {
    color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: 1.4px; font-weight: 700;
}
.side-collapse {
    background: transparent; border: 1px solid var(--card-bd);
    color: var(--text); width: 30px; height: 30px; border-radius: 6px;
    cursor: pointer; font-size: 14px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.side-collapse:hover { background: rgba(255,182,72,.15); color: var(--primary); border-color: var(--primary); }

.sidenav { padding: 10px 8px 24px; }
.sidenav .group {
    color: var(--muted); font-size: 10px;
    text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700;
    padding: 14px 12px 6px;
}
.sidenav .group:first-child { padding-top: 4px; }
.sidenav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin: 2px 0; border-radius: 8px;
    color: #cbd3dc; font-size: 14px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: all .12s ease;
    position: relative;
}
.sidenav a .ico {
    font-size: 17px; min-width: 22px; text-align: center;
    flex-shrink: 0;
}
.sidenav a .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidenav a:hover {
    background: rgba(255,255,255,.06); color: #fff; text-decoration: none;
    transform: translateX(2px);
}
.sidenav a.active {
    background: linear-gradient(90deg, rgba(255,182,72,.95), rgba(255,182,72,.7));
    color: #1a1206; font-weight: 700;
    box-shadow: 0 4px 14px rgba(255,182,72,.35);
}
.sidenav a.active::before {
    content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 4px;
    background: var(--primary); border-radius: 2px;
    box-shadow: 0 0 10px var(--primary);
}

/* === Свернутый сайдбар (только иконки) === */
body.sidebar-mini .sidebar { width: var(--side-w-mini); }
body.sidebar-mini .sidebar .label,
body.sidebar-mini .sidebar .group span,
body.sidebar-mini .side-title { display: none; }
body.sidebar-mini .sidebar .group { padding: 8px 0 4px; text-align: center; }
body.sidebar-mini .sidebar .group::before {
    content: "•••"; color: var(--muted); font-size: 12px; letter-spacing: 2px;
}
body.sidebar-mini .sidenav a { justify-content: center; padding: 12px 10px; }
body.sidebar-mini .sidenav a .ico { font-size: 19px; }
body.sidebar-mini .side-head { justify-content: center; }
body.sidebar-mini .side-collapse { transform: rotate(180deg); }

.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 140; opacity: 0; pointer-events: none;
    transition: opacity .25s ease; backdrop-filter: blur(2px);
}
body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

/* === КОНТЕНТНАЯ ОБЛАСТЬ === */
.content {
    margin-left: var(--side-w);
    margin-top: var(--topbar-h);
    padding: 24px 28px 80px;
    min-height: calc(100vh - var(--topbar-h));
    transition: margin-left .25s ease;
    max-width: calc(100vw - var(--side-w));
}
body.sidebar-mini .content {
    margin-left: var(--side-w-mini);
    max-width: calc(100vw - var(--side-w-mini));
}
.content > h1:first-child,
.content > h2:first-child,
.content > .flash:first-child { margin-top: 0; }

/* Внутренняя обертка для ширины (опционально) */
.content > * { max-width: var(--maxw); }
.content > .full { max-width: none; }

@media (max-width: 900px) {
    .topbar { padding: 0 12px; }
    .topbar .brand a { font-size: 15px; letter-spacing: .5px; }
    .topbar-right .balance,
    .topbar-right .user-name { display: none; }
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        box-shadow: 8px 0 30px rgba(0,0,0,.6);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .content {
        margin-left: 0; max-width: 100vw;
        padding: 18px 14px 80px;
    }
    body.sidebar-mini .content { margin-left: 0; max-width: 100vw; }
    body.sidebar-mini .sidebar .label,
    body.sidebar-mini .sidebar .group span { display: inline; }
    body.sidebar-mini .sidenav a { justify-content: flex-start; }
}

/* === Аватары и плашки в верхней панели === */
.badge {
    display: inline-block; background: var(--danger); color: #fff;
    font-size: 11px; padding: 1px 7px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(216,58,58,.5);
}

.badge {
    display: inline-block; background: var(--danger); color: #fff;
    font-size: 11px; padding: 1px 7px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(216,58,58,.5);
}

/* === Аватары === */
.nav-avatar, .avatar-sm {
    width: 28px; height: 28px; border-radius: 50%;
    vertical-align: middle; object-fit: cover;
    border: 2px solid var(--primary);
    box-shadow: 0 0 8px rgba(255,182,72,.35);
}
.avatar-md { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--primary); box-shadow: 0 0 14px rgba(255,182,72,.4); }
.avatar-lg { width: 96px; height: 96px; border-radius: 12px; object-fit: cover;
    border: 3px solid var(--primary); box-shadow: 0 0 24px rgba(255,182,72,.45); }
.avatar-placeholder {
    display: inline-flex; align-items:center; justify-content:center;
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #2a3441, #1c232c);
    border: 2px solid var(--card-bd); color: var(--muted); font-weight: 700;
}
.avatar-placeholder.md { width: 56px; height: 56px; font-size: 22px; }
.avatar-placeholder.lg { width: 96px; height: 96px; border-radius: 12px; font-size: 38px; }

.online-marker {
    display: inline-block; width: 9px; height: 9px;
    background: var(--success); border-radius: 50%; margin-left: 4px;
    box-shadow: 0 0 8px var(--success);
}
.offline-marker {
    display: inline-block; width: 9px; height: 9px;
    background: #555; border-radius: 50%; margin-left: 4px;
}

/* === VIP === */
.vip-badge {
    display: inline-block;
    background: linear-gradient(135deg,#ffb648 0%,#ff8a00 100%);
    color:#1a1206; padding: 2px 9px; border-radius: 10px;
    font-size: 11px; font-weight: 800; margin-left: 6px;
    box-shadow: 0 0 12px rgba(255,138,0,.5);
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.crown-1 { color:#ffd700; text-shadow: 0 0 10px #ffd700; }
.crown-2 { color:#c0c0c0; text-shadow: 0 0 10px #c0c0c0; }
.crown-3 { color:#cd7f32; text-shadow: 0 0 10px #cd7f32; }

/* ============== CONTAINER (legacy + page width) ============== */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0; }

h1, h2, h3, h4 { color: #fff; margin-top: 0; line-height: 1.25; }
h1 { font-size: 30px; letter-spacing: .3px; margin-bottom: 18px; }
h1::after {
    content:""; display:block; width:60px; height:3px;
    background: linear-gradient(90deg, var(--primary), transparent);
    border-radius: 3px; margin-top: 8px;
}
h2 { font-size: 22px; border-bottom: 1px solid var(--card-bd);
     padding-bottom: 8px; margin-top: 32px; display:flex; align-items:center; gap:8px; }
h2 .ico { color: var(--primary); }
h3 { font-size: 17px; color: #f0f0f0; margin: 18px 0 10px; }

/* ============== CARDS ============== */
.card {
    background: linear-gradient(180deg, var(--card) 0%, rgba(20,26,34,0.85) 100%);
    border: 1px solid var(--card-bd);
    border-radius: var(--rcard);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow1);
    backdrop-filter: blur(8px);
    transition: transform .15s ease, box-shadow .15s ease;
}
body.glass .card {
    background: rgba(20,26,34,0.6);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.06);
}
.card:hover { box-shadow: var(--shadow2); }

.card-title { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card-title .ico { font-size: 22px; }
.muted { color: var(--muted); font-size: 13px; }

/* ============== BUTTONS ============== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--rbtn);
    background: linear-gradient(180deg, var(--primary), #f09f30);
    color: #1a1206; border: none; font-weight: 700; font-family: inherit;
    cursor: pointer; font-size: 14px; text-decoration: none;
    box-shadow: 0 4px 14px rgba(255,182,72,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,182,72,.45); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-danger { background: linear-gradient(180deg, var(--danger), #b22929); color: #fff;
    box-shadow: 0 4px 14px rgba(216,58,58,.3); }
.btn-success { background: linear-gradient(180deg, var(--success), #38a35d); color: #0a1f12;
    box-shadow: 0 4px 14px rgba(77,208,122,.3); }
.btn-ghost {
    background: rgba(255,255,255,.04); color: var(--text);
    border: 1px solid var(--card-bd); box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-block { width: 100%; }

/* ============== FLASH ============== */
.flash {
    padding: 12px 16px; border-radius: 10px; margin-bottom: 14px;
    border-left: 4px solid #888;
    background: rgba(20,26,34,.7);
    backdrop-filter: blur(6px);
    animation: slideIn .2s ease;
}
@keyframes slideIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }
.flash-info    { background: linear-gradient(90deg, rgba(74,144,226,.18), rgba(20,26,34,.5)); border-color: #4a90e2; color: #cfe1f7; }
.flash-success { background: linear-gradient(90deg, rgba(77,208,122,.18), rgba(20,26,34,.5)); border-color: var(--success); color: #cef3d7; }
.flash-error   { background: linear-gradient(90deg, rgba(216,58,58,.2), rgba(20,26,34,.5));   border-color: var(--danger);  color: #fbcfcf; }
.flash-warn    { background: linear-gradient(90deg, rgba(255,182,72,.18), rgba(20,26,34,.5)); border-color: var(--warn);    color: #ffe4b5; }

/* ============== TABLES ============== */
.table-wrap { overflow-x: auto; border-radius: var(--rcard);
    background: rgba(20,26,34,.5); border: 1px solid var(--card-bd); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left;
    border-bottom: 1px solid rgba(35,44,55,.7); font-size: 14px; }
th { background: linear-gradient(180deg, #1a2230 0%, #131a23 100%);
     color: #fff; font-weight: 600; text-transform: uppercase;
     font-size: 12px; letter-spacing: .8px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,182,72,.04); }
td.center, th.center { text-align: center; }

/* ============== INPUTS ============== */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], input[type=search], input[type=color], input[type=file],
textarea, select {
    width: 100%; padding: 10px 14px; background: #0d1218;
    color: #fff; border: 1px solid var(--card-bd); border-radius: 8px;
    font-size: 14px; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input[type=color] { padding: 4px; height: 38px; cursor: pointer; }
input[type=file] { padding: 8px; }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,182,72,.18);
}
label { display: block; margin: 12px 0 6px; color: #cbd3dc; font-size: 14px; }
label.inline { display: inline-flex; align-items:center; gap:6px; margin-right: 12px; }

.form-grid { display: grid; gap: 12px; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
}

/* ============== STATS ============== */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 22px; }
.stat {
    background: linear-gradient(160deg, var(--card), rgba(20,26,34,.8));
    border: 1px solid var(--card-bd); border-radius: var(--rcard);
    padding: 16px 18px; box-shadow: var(--shadow1);
    position: relative; overflow: hidden;
}
.stat::before {
    content:""; position: absolute; top:0; right:0; width:80px; height:80px;
    background: radial-gradient(circle, rgba(255,182,72,.15), transparent 70%);
    pointer-events: none;
}
.stat .label { color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.stat .value { color: #fff; font-size: 28px; font-weight: 800; margin-top: 6px;
    text-shadow: 0 0 18px rgba(255,182,72,.15); }
.stat .delta { font-size: 12px; color: var(--success); margin-top: 4px; }

/* ============== WEAPONS / ITEMS ============== */
.weapon-list { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.weapon-card {
    background: linear-gradient(160deg, var(--card), rgba(20,26,34,.85));
    border: 1px solid var(--card-bd); border-radius: var(--rcard);
    min-height: 280px;
    box-shadow: var(--shadow1); transition: transform .15s ease, border-color .15s;
    position: relative; overflow: hidden;
}
.weapon-card.has-bg,
.weapon-card.no-bg {
    background: #0a0d12;
}
/* Реальный <img> поверх карточки — самый надёжный способ показать картинку. */
.weapon-bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    transition: transform .35s ease, filter .35s ease;
    pointer-events: none;
}
/* Декоративный фон для карточек без картинки — больше не выглядит «просто чёрным». */
.weapon-bg-placeholder {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%),
        linear-gradient(135deg, var(--c1, #2a3550) 0%, var(--c2, #4a2c5e) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,.55);
    text-shadow: 0 2px 6px rgba(0,0,0,.55);
    pointer-events: none;
}
.weapon-bg-placeholder .weapon-bg-emoji { font-size: 72px; line-height: 1; opacity: .65; }
.weapon-bg-placeholder .weapon-bg-name {
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
    font-weight: 800; opacity: .85;
}
/* Лёгкое затемнение снизу — чтобы текст карточки читался поверх любой картинки. */
.weapon-card.has-bg::after,
.weapon-card.no-bg::after {
    content:""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(8,11,16,0)   0%,
        rgba(8,11,16,0)   35%,
        rgba(8,11,16,.55) 78%,
        rgba(8,11,16,.92) 100%);
    z-index: 1;
    pointer-events: none;
}
.weapon-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.weapon-card:hover .weapon-bg-img { transform: scale(1.06); filter: brightness(1.05); }
.weapon-card-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
    height: 100%; min-height: 280px;
    justify-content: flex-end;
}
.weapon-card .name { font-weight: 800; color: #fff; font-size: 17px;
    text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.weapon-card .muted { color: #d6dde6; font-size: 13px;
    text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.weapon-card .stats { color: #fff; font-size: 13px; display: flex; gap: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.weapon-card .stats span { display: inline-flex; align-items: center; gap: 4px; }
.weapon-card .price { color: var(--success); font-weight: 800; font-size: 17px;
    text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.weapon-card .qty { color: var(--primary); font-size: 12px;
    background: rgba(255,182,72,.18); padding: 2px 8px;
    border-radius: 10px; align-self: flex-start;
    border: 1px solid rgba(255,182,72,.4); backdrop-filter: blur(2px); }
.weapon-card form { margin: 0; display: flex; gap: 6px; align-items: center; }
.weapon-card form input[type=number] { width: 70px; padding: 7px 10px;
    background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* Compact image used in tables */
.weapon-img { width: 48px; height: 48px; border-radius: 8px;
    object-fit: cover; border: 1px solid var(--card-bd); }

/* ============== ATTACK RESULT ============== */
.attack-result { font-size: 17px; padding: 22px; border-radius: var(--rcard);
    margin: 18px 0; box-shadow: var(--shadow1); }
.attack-win  { background: linear-gradient(135deg, rgba(77,208,122,.2), rgba(20,26,34,.8));
    color: #cef3d7; border: 2px solid var(--success); }
.attack-lose { background: linear-gradient(135deg, rgba(216,58,58,.2), rgba(20,26,34,.8));
    color: #fbcfcf; border: 2px solid var(--danger); }
.attack-result h2 { border: none; padding: 0; margin: 0 0 8px; color: inherit; }

.battle-stage {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
    align-items: center; margin: 22px 0;
}
.battle-side { text-align: center; padding: 18px; border-radius: var(--rcard);
    background: rgba(20,26,34,.6); border: 1px solid var(--card-bd); }
.battle-vs { font-size: 36px; font-weight: 800; color: var(--primary);
    text-shadow: 0 0 24px rgba(255,182,72,.5); animation: vsBeat 1.2s infinite; }
@keyframes vsBeat { 0%,100% { transform: scale(1);} 50% { transform: scale(1.1);} }
@media (max-width: 720px) {
    .battle-stage { grid-template-columns: 1fr; }
    .battle-vs { font-size: 28px; }
}

/* ============== MESSAGES ============== */
.message { background: var(--card); border-left: 4px solid var(--card-bd);
    padding: 14px 16px; border-radius: 8px; margin-bottom: 10px; box-shadow: var(--shadow1); }
.message.unread { border-left-color: var(--primary); background: linear-gradient(90deg, rgba(255,182,72,.06), var(--card)); }
.message .meta { color: var(--muted); font-size: 12px; }
.message .subject { font-weight: 700; color: #fff; margin: 4px 0; font-size: 15px; }
.message .body { white-space: pre-wrap; color: #cbd3dc; font-size: 14px; line-height: 1.55; }

/* ============== FOOTER ============== */
.footer { text-align: center; padding: 28px;
    color: var(--muted); font-size: 12px;
    border-top: 1px solid var(--card-bd); margin-top: 60px;
    background: linear-gradient(180deg, rgba(15,20,26,0), var(--bg2));
}
.footer a { color: var(--muted); }

/* ============== ADMIN PANEL ============== */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: flex-start; max-width: none !important; }
.admin-nav {
    background: linear-gradient(180deg, var(--card), rgba(20,26,34,.85));
    border: 1px solid var(--card-bd); border-radius: var(--rcard);
    padding: 14px; position: sticky; top: calc(var(--topbar-h) + 14px);
    max-height: calc(100vh - var(--topbar-h) - 28px); overflow-y: auto;
    box-shadow: var(--shadow1);
}
.admin-nav .group {
    color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700;
    padding: 14px 10px 6px;
    border-top: 1px dashed var(--card-bd); margin-top: 8px;
}
.admin-nav .group:first-child { margin-top: 0; padding-top: 4px; border-top: none; }
.admin-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px; color: #cbd3dc;
    margin: 2px 0; transition: all .12s ease; font-size: 14px;
    text-decoration: none;
}
.admin-nav a .ico { font-size: 16px; min-width: 22px; text-align: center; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; transform: translateX(2px); }
.admin-nav a.active {
    background: linear-gradient(90deg, rgba(255,182,72,.95), rgba(255,182,72,.7));
    color: #1a1206; font-weight: 700;
    box-shadow: 0 4px 14px rgba(255,182,72,.35);
}
.admin-shell > section { min-width: 0; max-width: none; }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-nav { position: static; max-height: none; }
}

/* ============== HACK MODAL ============== */
#orelhack-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: none; align-items: center; justify-content: center; z-index: 9999;
    backdrop-filter: blur(8px);
}
#orelhack-modal .box {
    background: linear-gradient(160deg, #161c24, #0b0e14);
    border: 1px solid var(--primary); border-radius: var(--rcard);
    padding: 28px; min-width: 340px;
    box-shadow: 0 0 40px rgba(255,182,72,.4);
}
#orelhack-modal h3 { margin: 0 0 12px; color: var(--primary); font-size: 18px; }

/* ============== CHAT ============== */
.chat-box { max-height: 420px; overflow-y: auto;
    background: rgba(13,17,22,.7); border: 1px solid var(--card-bd);
    border-radius: 10px; padding: 12px; }
.chat-msg { padding: 6px 4px; border-bottom: 1px solid rgba(35,44,55,.5); font-size: 14px; }
.chat-msg .who { color: var(--primary); font-weight: 700; }
.chat-msg.system { color: var(--muted); font-style: italic; }
.chat-msg .ts { color: #5a6775; font-size: 11px; margin-left: 6px; }

/* ============== MUSIC PLAYER (side-slide) ============== */
#music-player {
    position: fixed; right: 0; bottom: 80px;
    width: 320px; max-width: calc(100vw - 16px);
    background: linear-gradient(160deg, rgba(22,28,36,.97), rgba(11,14,20,.97));
    border: 1px solid var(--primary);
    border-right: none;
    border-radius: 16px 0 0 16px;
    box-shadow: -8px 8px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,182,72,.18);
    backdrop-filter: blur(20px) saturate(150%);
    color: var(--text); z-index: 9000;
    overflow: visible;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* collapsed: slide off right edge, only tab stays visible */
#music-player.collapsed { transform: translateX(calc(100% - 32px)); }
#music-player { will-change: transform; }
/* floating tab visible when collapsed */
#music-player .mp-tab {
    position: absolute; left: -32px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 80px;
    background: linear-gradient(180deg, rgba(255,182,72,.95), rgba(200,120,10,.95));
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--primary); border-right: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; writing-mode: vertical-rl; font-size: 18px;
    box-shadow: -4px 0 18px rgba(255,182,72,.35);
    user-select: none; transition: background .15s;
}
#music-player .mp-tab:hover { background: linear-gradient(180deg, #ffd060, #e09020); }
#music-player:not(.collapsed) .mp-tab { background: rgba(255,182,72,.18); box-shadow: none; }
#music-player .mp-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,182,72,.18), rgba(255,182,72,.04));
    border-bottom: 1px solid rgba(255,182,72,.2);
    cursor: pointer;
}
#music-player .mp-bar .title { font-weight: 700; color: var(--primary); display:flex;align-items:center;gap:8px; }
#music-player .mp-bar .toggle { background: transparent; border:none; color: var(--text);
    font-size: 18px; cursor: pointer; padding: 0 4px; }
#music-player .mp-body { padding: 14px; }
#music-player .mp-now {
    display: flex; gap: 12px; align-items: center; margin-bottom: 10px;
}
#music-player .mp-cover {
    width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
    background: linear-gradient(135deg, #2a3441, #1c232c);
    border: 1px solid var(--card-bd);
    display: inline-flex; align-items:center; justify-content:center;
    font-size: 28px; color: var(--primary); flex-shrink: 0;
}
#music-player .mp-info { flex: 1; min-width: 0; }
#music-player .mp-info .t { color: #fff; font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
#music-player .mp-info .a { color: var(--muted); font-size: 12px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
#music-player .mp-controls {
    display: flex; gap: 8px; justify-content: center; align-items: center; margin: 8px 0;
}
#music-player .mp-controls button {
    background: rgba(255,255,255,.08); border: 1px solid var(--card-bd);
    color: #fff; width: 38px; height: 38px; border-radius: 50%;
    cursor: pointer; font-size: 14px; display:inline-flex;
    align-items:center; justify-content:center;
    transition: all .15s ease;
}
#music-player .mp-controls button:hover { background: rgba(255,182,72,.18); border-color: var(--primary); }
#music-player .mp-controls .play {
    width: 50px; height: 50px; font-size: 18px;
    background: linear-gradient(180deg, var(--primary), #f09f30); color: #1a1206;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(255,182,72,.35);
}
#music-player .mp-progress {
    width: 100%; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px;
    margin: 6px 0 4px; cursor: pointer; overflow: hidden;
}
#music-player .mp-progress .bar { height:100%; background: var(--primary); width:0%; transition: width .2s linear; }
#music-player .mp-time { display:flex; justify-content: space-between;
    color: var(--muted); font-size: 11px; margin-bottom: 6px; }
#music-player .mp-vol { display:flex; gap:8px; align-items:center; margin-top: 4px; }
#music-player .mp-vol input[type=range] { flex:1; padding:0; height: 4px; }
#music-player .mp-list {
    margin-top: 12px; max-height: 180px; overflow-y: auto;
    border-top: 1px dashed var(--card-bd); padding-top: 8px;
}
#music-player .mp-list .item {
    display: flex; align-items:center; gap: 8px; padding: 6px 8px;
    border-radius: 6px; cursor: pointer; font-size: 13px;
    transition: background .12s;
}
#music-player .mp-list .item:hover { background: rgba(255,255,255,.06); }
#music-player .mp-list .item.playing { background: rgba(255,182,72,.15); color: var(--primary); }
#music-player .mp-list .item .ix { color: var(--muted); font-size: 11px; min-width: 20px; }
#music-player .mp-empty { color: var(--muted); padding: 14px; text-align: center; font-size: 13px; }

/* ============== LEADERBOARD ============== */
.leaderboard-podium {
    display: grid; grid-template-columns: 1fr 1.15fr 1fr;
    gap: 14px; align-items: end; margin: 18px 0 28px;
}
.podium-card {
    background: linear-gradient(180deg, var(--card), rgba(20,26,34,.7));
    border: 2px solid var(--card-bd); border-radius: var(--rcard);
    padding: 18px 14px; text-align: center; position: relative;
    box-shadow: var(--shadow1);
}
.podium-card.first  { border-color: #ffd700; box-shadow: 0 12px 36px rgba(255,215,0,.25); }
.podium-card.second { border-color: #c0c0c0; }
.podium-card.third  { border-color: #cd7f32; }
.podium-card .rank { font-size: 32px; margin-bottom: 8px; }
.podium-card .name { font-weight: 700; color: #fff; margin-bottom: 4px; font-size: 16px; }
.podium-card .val { color: var(--success); font-weight: 700; }
.podium-card .reward { color: var(--primary); font-size: 12px; margin-top: 6px;
    background: rgba(255,182,72,.1); padding: 4px 8px; border-radius: 8px; display: inline-block; }
.podium-card.first { transform: translateY(-12px); }
@media (max-width: 720px) {
    .leaderboard-podium { grid-template-columns: 1fr; }
    .podium-card.first { transform: none; }
}
.rank-row td:first-child { font-weight: 700; color: var(--primary); width: 56px; text-align: center; }

/* ============== UTIL ============== */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.right { justify-content: flex-end; }
.spacer { flex: 1; }
.hide { display: none !important; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.tag {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    background: rgba(255,255,255,.06); border: 1px solid var(--card-bd);
    font-size: 11px; color: var(--muted);
}
.tag.success { background: rgba(77,208,122,.15); border-color: rgba(77,208,122,.4); color: var(--success); }
.tag.danger  { background: rgba(216,58,58,.15);  border-color: rgba(216,58,58,.4);  color: #ff8d8d; }
.tag.warn    { background: rgba(255,182,72,.15); border-color: rgba(255,182,72,.4); color: var(--warn); }

hr.sep { border: none; border-top: 1px dashed var(--card-bd); margin: 18px 0; }

/* ============== MOBILE TWEAKS ============== */
@media (max-width: 980px) {
    h1 { font-size: 24px; }
    h2 { font-size: 19px; }
    #music-player { width: calc(100vw - 48px); }
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============== PODIUM (новый) ============== */
.podium {
    display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px;
    align-items: end; max-width: 700px; margin: 18px auto 28px;
}
.podium-place { text-align: center; padding: 14px 8px 0;
    background: linear-gradient(180deg, var(--card), rgba(255,255,255,.02));
    border: 1px solid var(--card-border); border-radius: var(--rcard);
    position: relative; }
.podium-1 { border-color: rgba(255,215,0,.55); box-shadow: 0 14px 38px rgba(255,215,0,.18); }
.podium-2 { border-color: rgba(192,192,192,.45); }
.podium-3 { border-color: rgba(205,127,50,.5); }
.podium-medal { font-size: 32px; line-height: 1; margin-bottom: 6px; }
.podium-place .avatar-xl,
.podium-place .avatar-fallback.avatar-xl { width: 72px; height: 72px; font-size: 30px; }
.podium-place .avatar-lg,
.podium-place .avatar-fallback.avatar-lg { width: 56px; height: 56px; font-size: 24px; }
.podium-name { font-weight: 800; color: #fff; margin-top: 6px; }
.podium-money { color: var(--success); font-weight: 700; margin-top: 4px; }
.podium-bar { height: 8px; margin-top: 14px;
    border-radius: 0 0 var(--rcard) var(--rcard); }
.bar-1 { background: linear-gradient(90deg,#ffd86b,#ff9c2a); }
.bar-2 { background: linear-gradient(90deg,#d4d4d4,#9a9a9a); }
.bar-3 { background: linear-gradient(90deg,#e0a268,#a06420); }
.podium-1 { transform: translateY(-10px); }
@media (max-width: 720px) { .podium { grid-template-columns: 1fr; } .podium-1 { transform: none; } }

.reward-badge { display: inline-block; margin-top: 6px; padding: 2px 8px;
    background: rgba(255,182,72,.18); border: 1px solid rgba(255,182,72,.45);
    color: var(--primary); border-radius: 999px; font-size: 12px; font-weight: 700; }
.reward-badge.gold { background: rgba(255,215,0,.18); border-color: rgba(255,215,0,.6); color: #ffd86b; }
.reward-mini { color: var(--primary); font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: 6px; }

/* Leaderboard 2-col */
.leaderboard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .leaderboard-cols { grid-template-columns: 1fr; } }
.lb-card { padding: 8px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; transition: background .15s; }
.lb-row + .lb-row { border-top: 1px solid var(--card-border); }
.lb-row:hover { background: rgba(255,255,255,.03); }
.lb-place { width: 36px; font-weight: 800; color: var(--muted); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { color: #fff; font-weight: 700; }
.lb-stats { font-size: 12px; }
.lb-money { color: var(--success); font-weight: 700; }
.lb-row.place-1 .lb-place,
.lb-row.attacker-1 .lb-place { color: #ffd86b; }
.lb-row.place-2 .lb-place,
.lb-row.attacker-2 .lb-place { color: #d4d4d4; }
.lb-row.place-3 .lb-place,
.lb-row.attacker-3 .lb-place { color: #cd7f32; }

tr.highlight-me { background: rgba(255,182,72,.10); }
.tag.accent { background: rgba(255,182,72,.18); border-color: rgba(255,182,72,.45); color: var(--primary); }

/* ============== TARGET GRID (атаки) ============== */
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 720px) { .stat-cards { grid-template-columns: repeat(2,1fr); } }
.stat-card { background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--rcard); padding: 12px 14px; }
.stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.stat-value { color: #fff; font-weight: 800; font-size: 22px; margin-top: 4px; }

.target-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 12px; }
.target-card { position: relative; background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--rcard); padding: 12px; display: flex; flex-direction: column; gap: 10px;
    transition: transform .12s, border-color .15s; }
.target-card:hover { transform: translateY(-2px); border-color: rgba(255,182,72,.5); }
.target-card.target-enemy { border-color: rgba(216,58,58,.55);
    box-shadow: 0 8px 20px rgba(216,58,58,.18); }
.war-flag { position: absolute; top: -10px; right: 10px;
    background: var(--danger); color: #fff; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.target-head { display: flex; gap: 10px; align-items: center; }
.target-name { color: #fff; font-weight: 700; }
.target-stats { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }

/* ============== WAR BANNER ============== */
.war-banner { padding: 14px;
    background: linear-gradient(135deg, rgba(216,58,58,.12), rgba(255,182,72,.08));
    border: 1px solid rgba(216,58,58,.4); border-radius: var(--rcard);
    margin: 14px 0; }
.war-title { font-size: 18px; color: #fff; font-weight: 800; margin-bottom: 6px; }
.war-score { font-size: 32px; font-weight: 800; text-align: center; margin: 6px 0;
    color: #fff; letter-spacing: 2px; }
.score-me  { color: var(--success); }
.score-opp { color: var(--danger); }
.score-vs  { color: var(--muted); margin: 0 6px; }

/* btn-warn */
.btn-warn { background: linear-gradient(180deg, #ffb648, #ff9624); color: #1a1208;
    border: 1px solid rgba(0,0,0,.25); }
.btn-warn:hover { filter: brightness(1.05); }

/* glass utility */
.glass { background: rgba(255,255,255,.04); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.08); }

/* CMS pages */
.cms-page img { max-width: 100%; height: auto; border-radius: 8px; }
.cms-page h2, .cms-page h3 { color: #fff; }
.cms-page a { color: var(--link); }

/* avatar sizes */
.avatar-sm, .avatar-fallback.avatar-sm { width: 26px; height: 26px; font-size: 13px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.avatar-xl, .avatar-fallback.avatar-xl { width: 80px; height: 80px; font-size: 32px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

/* form-grid-5 */
.form-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 720px) { .form-grid-5 { grid-template-columns: repeat(2, 1fr); } }

/* inline online/offline pill */
.pill { display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600;
    border-radius: 999px; border: 1px solid; vertical-align: middle; margin-left: 4px; }
.pill-on  { background: rgba(77,208,122,.14); border-color: rgba(77,208,122,.45); color: var(--success); }
.pill-off { background: rgba(138,150,163,.10); border-color: rgba(138,150,163,.35); color: var(--muted); }

/* === КАЗИНО — слот-машина с анимацией === */
.casino-machine { max-width: 560px; margin: 18px auto; padding: 22px; text-align: center;
    background: linear-gradient(180deg, #1a2230, #0f1620);
    border: 2px solid var(--primary); box-shadow: 0 0 28px rgba(255,182,72,.25), inset 0 0 16px rgba(0,0,0,.4); }
.casino-screen { display: flex; gap: 10px; justify-content: center;
    padding: 14px; margin: 0 auto 14px; border-radius: 12px;
    background: #050810; border: 2px inset #2a3744;
    box-shadow: inset 0 6px 18px rgba(0,0,0,.7); }
.casino-reel { position: relative; width: 96px; height: 110px; overflow: hidden;
    background: linear-gradient(180deg, #0d141d 0%, #1a2330 50%, #0d141d 100%);
    border: 1px solid #2a3744; border-radius: 8px;
    box-shadow: inset 0 0 12px rgba(0,0,0,.85),
                inset 0 24px 18px -18px rgba(255,255,255,.06),
                inset 0 -24px 18px -18px rgba(0,0,0,.6); }
.casino-reel::before, .casino-reel::after {
    content: ""; position: absolute; left: 0; right: 0; height: 26px; pointer-events: none; z-index: 2;
}
.casino-reel::before { top: 0;    background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.casino-reel::after  { bottom: 0; background: linear-gradient(0deg,   rgba(0,0,0,.85), rgba(0,0,0,0)); }
.casino-strip { will-change: transform; }
.casino-sym { height: 110px; display: flex; align-items: center; justify-content: center;
    font-size: 64px; line-height: 1; user-select: none;
    text-shadow: 0 0 12px rgba(255,182,72,.35); }
.casino-form { display: flex; gap: 10px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.casino-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.casino-form input { width: 130px; padding: 8px 10px; font-size: 16px; text-align: center; }
.casino-spin-btn {
    background: linear-gradient(180deg, var(--primary), #d8881d);
    color: #1a1206; font-weight: 800; padding: 10px 22px; font-size: 15px;
    border: 1px solid #b86f10; box-shadow: 0 0 14px rgba(255,182,72,.45);
}
.casino-spin-btn:hover { filter: brightness(1.1); }
.casino-spin-btn:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.casino-result { margin: 14px auto 0; min-height: 24px; font-size: 16px; font-weight: 600; }
.casino-win  { color: var(--accent); text-shadow: 0 0 12px rgba(77,208,122,.55); animation: casinoWinFlash 1.2s ease 2; }
.casino-lose { color: #e0664b; }
@keyframes casinoWinFlash {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.06); }
}

/* =============== Перезарядка атаки (живой счётчик) =============== */
.cooldown-card {
    position: relative; overflow: hidden;
    transition: background .3s, box-shadow .3s;
}
.cooldown-card.active {
    background: linear-gradient(180deg, rgba(216,58,58,.10) 0%, rgba(20,26,34,.85) 100%);
    box-shadow: 0 0 0 1px rgba(216,58,58,.35), 0 0 18px rgba(216,58,58,.18);
}
.cooldown-card.active .cooldown-value { color: #ff8e6a; text-shadow: 0 0 10px rgba(255,142,106,.5); }
.cooldown-card.ready .cooldown-value  { color: var(--accent); text-shadow: 0 0 10px rgba(77,208,122,.55); }
.cooldown-bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: rgba(255,255,255,.05);
}
.cooldown-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 1s linear;
    box-shadow: 0 0 8px rgba(255,182,72,.5);
}
.btn-disabled, .btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* =============== Лотерея — форма покупки билетов =============== */
.lottery-buy-form {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    margin: 8px 0;
}
.lottery-buy-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.lottery-buy-form .muted { align-self: center; padding-bottom: 6px; }

/* =============== Казино — улучшенный дизайн =============== */
.casino-machine {
    position: relative;
    background:
        radial-gradient(ellipse at top, rgba(255,182,72,.12), transparent 60%),
        linear-gradient(180deg, #1c1106 0%, #0c0a08 100%);
    border: 3px solid #6a4310;
    border-radius: 24px;
    padding: 28px 30px 26px;
    box-shadow:
        0 0 0 2px #2a1a08 inset,
        0 0 30px rgba(255,182,72,.15),
        0 18px 40px rgba(0,0,0,.6);
    max-width: 560px;
    margin: 18px auto;
}
.casino-machine::before, .casino-machine::after {
    content:""; position:absolute; top: 14px; bottom: 14px; width: 8px;
    border-radius: 6px;
    background: repeating-linear-gradient(180deg,
        #ffb648 0 6px, #5a3608 6px 12px);
    box-shadow: 0 0 14px rgba(255,182,72,.45);
    animation: casinoLed 1.2s linear infinite;
}
.casino-machine::before { left: 8px;  }
.casino-machine::after  { right: 8px; animation-direction: reverse; }
@keyframes casinoLed {
    0%   { background-position: 0 0; }
    100% { background-position: 0 24px; }
}
.casino-machine h2 {
    text-align: center; border: none; margin: 0 0 14px;
    font-size: 26px; letter-spacing: 2px;
    color: #ffd07a; text-shadow: 0 0 18px rgba(255,182,72,.6), 0 2px 0 #2a1a08;
}
.casino-window {
    background: linear-gradient(180deg, #03060a, #0a0e15);
    border: 3px inset #3a2a14;
    border-radius: 14px;
    padding: 14px;
    box-shadow:
        inset 0 8px 22px rgba(0,0,0,.85),
        0 0 16px rgba(255,182,72,.15);
}
.casino-reels {
    display: flex; gap: 10px; justify-content: center; padding: 6px;
    background: #050810; border: 2px inset #2a3744;
    border-radius: 8px;
    box-shadow: inset 0 6px 18px rgba(0,0,0,.7);
}
.casino-reel {
    border-radius: 10px;
    box-shadow: inset 0 0 14px rgba(0,0,0,.9),
                inset 0 28px 22px -22px rgba(255,255,255,.08),
                inset 0 -28px 22px -22px rgba(0,0,0,.7),
                0 0 0 1px rgba(255,182,72,.2);
}
.casino-form {
    margin-top: 16px;
    background: rgba(0,0,0,.35);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(255,182,72,.2);
}
.casino-form input {
    background: #0a0e15;
    border: 1px solid #3a2a14;
    color: #ffd07a;
    border-radius: 6px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
.casino-spin-btn {
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(180deg, #ffd07a 0%, #ff8a00 60%, #c66200 100%);
    border: 1px solid #8a4a08;
    box-shadow:
        0 0 14px rgba(255,182,72,.55),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -2px 4px rgba(0,0,0,.3);
    transition: transform .08s ease;
}
.casino-spin-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.casino-spin-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.casino-result {
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(0,0,0,.3);
    text-align: center;
}
.casino-win  { background: linear-gradient(90deg, transparent, rgba(77,208,122,.18), transparent); }
.casino-lose { background: linear-gradient(90deg, transparent, rgba(216,58,58,.15), transparent); }

/* =============== Мобильная версия (≤ 720px) =============== */
@media (max-width: 720px) {
    :root { --maxw: 100%; }
    body { font-size: 15px; }
    h1 { font-size: 22px; margin-bottom: 12px; }
    h2 { font-size: 18px; margin-top: 22px; }
    h3 { font-size: 15px; }

    .topbar { padding: 0 8px; gap: 8px; }
    .topbar .brand a { font-size: 14px; }
    .topbar .brand a span { display: none; }
    .topbar-right { gap: 4px; }
    .topbar-right .balance,
    .topbar-right .user-name,
    .topbar-right .online-pill { display: none; }
    .topbar-right .user-link { padding: 2px; }
    .topbar-right .auth-btn { padding: 6px 10px; font-size: 12px; }
    .sidebar-toggle { display: inline-flex; }

    .content { padding: 14px 10px 80px; max-width: 100vw !important; overflow-x: hidden; }
    .card { padding: 14px; border-radius: 12px; }

    /* Все основные сетки в один столбец */
    .form-grid, .form-grid-2, .form-grid-3, .form-grid-4, .form-grid-5,
    .grid-stats, .stat-cards, .target-grid, .weapon-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .stat, .stat-card { padding: 12px; }
    .stat .value, .stat-value { font-size: 22px; }
    .weapon-card { min-height: 240px; }
    .weapon-card-inner { min-height: 240px; }

    /* Таблицы — горизонтальный скролл, чтобы не ломать вёрстку */
    .table-wrap, .content table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
    .table-wrap table, .content table { min-width: 540px; font-size: 13px; }
    .table-wrap th, .table-wrap table td,
    .content table th, .content table td { padding: 8px 6px; }
    .content > * { max-width: 100%; }
    .content img, .content video, .content iframe { max-width: 100%; height: auto; }

    /* Кнопки во весь ряд для удобства тапа */
    .btn { padding: 10px 14px; font-size: 14px; }
    .btn-block, form > .btn:only-child { width: 100%; }

    /* Казино адаптивно */
    .casino-machine { padding: 18px 18px 18px; max-width: 100%; }
    .casino-machine::before, .casino-machine::after { width: 5px; left: 6px; }
    .casino-machine::after { right: 6px; left: auto; }
    .casino-machine h2 { font-size: 20px; letter-spacing: 1px; }
    .casino-reel { width: 72px; height: 88px; }
    .casino-sym { height: 88px; font-size: 46px; }
    .casino-form { padding: 10px; }
    .casino-form input { width: 100%; }
    .casino-form label { width: 100%; }

    /* Лотерея */
    .lottery-buy-form { flex-direction: column; align-items: stretch; }
    .lottery-buy-form input[type=number] { width: 100% !important; }
    .lottery-buy-form .btn { width: 100%; }

    /* CMS-страницы */
    .cms-page { font-size: 15px; word-wrap: break-word; }

    /* Боковая панель (off-canvas) с накладкой */
    .sidebar {
        transform: translateX(-100%);
        width: 78vw; max-width: 300px;
        z-index: 1000;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content:""; position: fixed; inset: 0; background: rgba(0,0,0,.55);
        z-index: 900;
    }

    /* Музыкальный плеер — на мобилке чуть уже */
    #music-player { width: calc(100vw - 40px); }
}

/* Совсем маленькие экраны (≤ 420px) */
@media (max-width: 420px) {
    h1 { font-size: 20px; }
    .casino-reel { width: 60px; height: 76px; }
    .casino-sym { height: 76px; font-size: 38px; }
    .casino-machine { padding: 14px 14px 16px; border-width: 2px; }
    .casino-machine h2 { font-size: 17px; }
    .stat-value { font-size: 20px; }
}

/* ==========================================================
   БОЕВАЯ АРЕНА — АНИМИРОВАННЫЙ БОЙ
   ========================================================== */

.battle-arena {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 10px 40px;
    overflow: hidden;
}
.battle-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255,182,72,.06), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(216,58,58,.04), transparent 50%);
    pointer-events: none;
}
.battle-particles {
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; width: 100%; height: 100%;
}
.battle-title {
    position: relative; z-index: 1;
    text-align: center; font-size: 28px; margin-bottom: 32px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255,182,72,.4);
}

/* Бойцы */
.battle-fighters {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 32px;
}
.fighter {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 12px; opacity: 0; transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.fighter-enter-left, .fighter-enter-right {
    opacity: 1 !important; transform: translateY(0) !important;
}
.fighter-left  { align-items: flex-start; }
.fighter-right { align-items: flex-end; }
.fighter-name {
    font-size: 18px; font-weight: 700;
    color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.3);
    word-break: break-all; max-width: 180px;
}
.fighter-role {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    color: var(--muted); text-transform: uppercase;
}
.fighter-avatar {
    position: relative;
    width: 100px; height: 100px; border-radius: 50%;
    border: 3px solid var(--card-bd);
    overflow: hidden; background: var(--card);
    box-shadow: 0 0 0 4px rgba(255,182,72,.1);
    transition: box-shadow .4s ease;
}
.fighter-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.fighter-letter {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 40px; font-weight: 800; color: #fff;
}
.fighter-glow {
    position: absolute; inset: 0; border-radius: 50%;
    pointer-events: none;
}
.fighter-glow-atk {
    box-shadow: inset 0 0 20px rgba(255,182,72,.25);
    animation: glowAtk 2s ease-in-out infinite;
}
.fighter-glow-def {
    box-shadow: inset 0 0 20px rgba(77,208,122,.2);
    animation: glowDef 2.3s ease-in-out infinite;
}
@keyframes glowAtk {
    0%,100% { box-shadow: inset 0 0 20px rgba(255,182,72,.2), 0 0 20px rgba(255,182,72,.1); }
    50%      { box-shadow: inset 0 0 35px rgba(255,182,72,.5), 0 0 40px rgba(255,182,72,.3); }
}
@keyframes glowDef {
    0%,100% { box-shadow: inset 0 0 20px rgba(77,208,122,.2), 0 0 20px rgba(77,208,122,.1); }
    50%      { box-shadow: inset 0 0 35px rgba(77,208,122,.4), 0 0 40px rgba(77,208,122,.25); }
}

/* Полосы силы */
.fighter-power {
    width: 100%; background: var(--card); border-radius: var(--rcard);
    border: 1px solid var(--card-bd); padding: 10px 14px;
}
.fp-label { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 1px; }
.fp-value { font-size: 26px; font-weight: 800; color: #fff; margin: 2px 0 6px; }
.fp-bar-wrap {
    height: 8px; background: rgba(255,255,255,.06);
    border-radius: 4px; overflow: hidden;
}
.fp-bar {
    height: 100%; width: 0; border-radius: 4px;
    transition: width 1s cubic-bezier(.4,0,.2,1);
}
.fp-bar-animate { width: var(--target-w) !important; }
.fp-bar-atk {
    background: linear-gradient(90deg, #d83a3a, #ff6060);
    box-shadow: 0 0 10px rgba(216,58,58,.6);
}
.fp-bar-def {
    background: linear-gradient(90deg, #1e7a4a, #4dd07a);
    box-shadow: 0 0 10px rgba(77,208,122,.5);
}

/* Зона столкновения */
.clash-zone {
    flex: 0 0 80px; display: flex; align-items: center; justify-content: center;
    position: relative; height: 100px;
}
.clash-ring {
    position: absolute; border-radius: 50%; border: 2px solid transparent;
    opacity: 0; transform: scale(0);
}
.ring1 { width: 80px; height: 80px; }
.ring2 { width: 120px; height: 120px; }
.clash-active .ring1 {
    border-color: rgba(255,182,72,.8);
    animation: clashRing 1s ease-out forwards;
}
.clash-active .ring2 {
    border-color: rgba(255,182,72,.4);
    animation: clashRing 1s ease-out .15s forwards;
}
@keyframes clashRing {
    0%   { opacity: 1; transform: scale(0); }
    100% { opacity: 0; transform: scale(2.5); }
}
.clash-icon {
    font-size: 48px; opacity: 0; transform: scale(0);
    transition: opacity .3s, transform .3s;
    text-shadow: 0 0 20px rgba(255,182,72,.8);
    z-index: 1;
}
.clash-active .clash-icon {
    opacity: 1; transform: scale(1.4);
    animation: clashPop .6s ease-out forwards;
}
@keyframes clashPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.6); opacity: 1; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* Состояния бойцов после удара */
.fighter-defeated .fighter-avatar {
    filter: grayscale(.8) brightness(.6);
    transform: rotate(-15deg) scale(.9);
    box-shadow: 0 0 0 4px rgba(216,58,58,.4);
}
.fighter-victorious .fighter-avatar {
    box-shadow: 0 0 0 5px rgba(77,208,122,.7), 0 0 30px rgba(77,208,122,.4);
}
.fighter-charge {
    animation: chargeShake .3s ease-in-out;
}
@keyframes chargeShake {
    0%,100% { transform: translateX(0) translateY(0); }
    25%      { transform: translateX(12px) translateY(-3px); }
    75%      { transform: translateX(-6px) translateY(2px); }
}
.fighter-survived .fighter-avatar {
    box-shadow: 0 0 0 4px rgba(255,182,72,.6), 0 0 20px rgba(255,182,72,.3);
}

/* Результат боя */
.battle-result {
    position: relative; z-index: 2;
    max-width: 500px; margin: 0 auto;
    text-align: center;
}
.result-reveal {
    animation: resultReveal .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes resultReveal {
    0%   { opacity: 0; transform: scale(.7) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.result-win, .result-lose {
    padding: 28px 24px 20px;
    border-radius: var(--rcard);
    margin-bottom: 16px;
}
.result-win {
    background: linear-gradient(135deg, rgba(77,208,122,.15), rgba(77,208,122,.05));
    border: 2px solid rgba(77,208,122,.5);
    box-shadow: 0 0 30px rgba(77,208,122,.15), inset 0 0 20px rgba(77,208,122,.05);
}
.result-lose {
    background: linear-gradient(135deg, rgba(216,58,58,.15), rgba(216,58,58,.05));
    border: 2px solid rgba(216,58,58,.4);
    box-shadow: 0 0 30px rgba(216,58,58,.12), inset 0 0 20px rgba(216,58,58,.05);
}
.result-icon { font-size: 56px; margin-bottom: 8px; display: block;
    animation: iconBounce 1s cubic-bezier(.34,1.56,.64,1) .3s both; }
@keyframes iconBounce {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.result-title {
    font-size: 32px; font-weight: 900; letter-spacing: 3px;
    text-transform: uppercase; margin-bottom: 10px;
}
.result-win  .result-title { color: var(--accent); text-shadow: 0 0 20px rgba(77,208,122,.7); }
.result-lose .result-title { color: #d83a3a; text-shadow: 0 0 20px rgba(216,58,58,.6); }
.result-desc { color: var(--muted); font-size: 15px; line-height: 1.6; }
.result-loot {
    font-size: 18px; font-weight: 800; color: var(--primary);
    text-shadow: 0 0 12px rgba(255,182,72,.6);
}
.result-balance {
    margin: 14px 0 18px; color: var(--muted); font-size: 15px;
}
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Attack-result старый стиль (запасной) */
.attack-result {
    padding: 18px 22px; border-radius: var(--rcard); margin: 12px 0;
    border: 1px solid var(--card-bd);
}
.attack-win  { background: rgba(77,208,122,.1); border-color: rgba(77,208,122,.4); }
.attack-lose { background: rgba(216,58,58,.1);  border-color: rgba(216,58,58,.4); }

/* ==========================================================
   КРАФТ — ОВЕРЛЕЙ УСПЕХА
   ========================================================== */
.craft-success-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    animation: craftFadeIn .3s ease;
}
@keyframes craftFadeIn { from { opacity:0; } to { opacity:1; } }
.craft-overlay-hide { animation: craftFadeOut .5s ease forwards !important; }
@keyframes craftFadeOut { to { opacity:0; pointer-events:none; } }
#craftCanvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.craft-success-box {
    position: relative; z-index: 2;
    text-align: center; padding: 40px 48px;
    background: linear-gradient(135deg, #1a1e2a, #11141e);
    border-radius: 24px; border: 2px solid rgba(155,100,255,.5);
    box-shadow:
        0 0 60px rgba(155,100,255,.2),
        0 0 120px rgba(255,182,72,.1),
        inset 0 0 30px rgba(155,100,255,.06);
    opacity: 0; transform: scale(.6);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    max-width: 380px; width: 90%;
}
.craft-box-appear { opacity: 1 !important; transform: scale(1) !important; }
.craft-success-icon {
    font-size: 64px; margin-bottom: 12px; display: block;
    animation: craftIconSpin 1.2s cubic-bezier(.34,1.56,.64,1) .2s both;
}
@keyframes craftIconSpin {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0);       opacity: 1; }
}
.craft-success-title {
    font-size: 28px; font-weight: 900; color: #9f6fff;
    text-shadow: 0 0 20px rgba(155,100,255,.7);
    letter-spacing: 2px; margin-bottom: 12px;
}
.craft-success-item {
    font-size: 20px; font-weight: 700; color: #fff;
    margin-bottom: 20px;
}
.craft-qty {
    font-size: 16px; color: var(--primary); margin-left: 6px;
}

/* ==========================================================
   МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ
   ========================================================== */
.mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
    background: linear-gradient(0deg, var(--topbar1), var(--topbar2));
    border-top: 1px solid var(--card-bd);
    height: 60px;
    padding: 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
.mobile-nav-items {
    display: flex; height: 100%;
    align-items: stretch; justify-content: space-around;
}
.mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; gap: 2px; padding: 6px 4px;
    color: var(--muted); text-decoration: none;
    font-size: 10px; font-weight: 600; letter-spacing: .5px;
    transition: color .15s ease;
    border: none; background: none; cursor: pointer;
    min-width: 0;
}
.mobile-nav-item:hover, .mobile-nav-item.active {
    color: var(--primary);
}
.mobile-nav-icon { font-size: 20px; line-height: 1; }
.mobile-nav-label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    .mobile-bottom-nav { display: block; }
    .content { padding-bottom: 76px !important; }
}

/* ==========================================================
   УЛУЧШЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================== */
@media (max-width: 900px) {
    /* Бойцы — компактнее */
    .battle-fighters { flex-direction: column; align-items: center; }
    .fighter { align-items: center !important; }
    .fighter-avatar { width: 80px; height: 80px; }
    .fighter-letter { font-size: 32px; }
    .clash-zone { height: 60px; transform: rotate(90deg); }
    .battle-title { font-size: 22px; }
    .result-title { font-size: 24px; }
    .result-icon { font-size: 44px; }
    .craft-success-box { padding: 28px 24px; }
    .craft-success-title { font-size: 22px; }
    .craft-success-icon { font-size: 52px; }
}

/* ==========================================================
   AJAX НАВИГАЦИЯ — ИНДИКАТОР ЗАГРУЗКИ
   ========================================================== */
.page-loading-bar {
    position: fixed; top: 0; left: 0; z-index: 9999;
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 10px var(--primary);
    transition: width .3s ease;
    pointer-events: none;
}
.page-loading-bar.loading {
    width: 70%;
    transition: width 1.5s ease;
}
.page-loading-bar.done {
    width: 100%;
    transition: width .2s ease;
    opacity: 0;
    transition: width .2s ease, opacity .4s ease .2s;
}

/* ==========================================================
   CMS СТРАНИЦЫ — НОВЫЙ СТИЛЬ
   ========================================================== */
.cms-page-hero {
    background: linear-gradient(135deg, var(--card), rgba(255,182,72,.05));
    border: 1px solid var(--card-bd); border-radius: var(--rcard);
    padding: 32px; margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.cms-page-hero::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
.cms-page-hero h1 {
    margin: 0 0 8px; font-size: 30px;
    text-shadow: 0 0 20px rgba(255,182,72,.2);
}
.cms-page-hero .cms-meta {
    font-size: 13px; color: var(--muted);
}
.cms-page-body {
    background: var(--card); border: 1px solid var(--card-bd);
    border-radius: var(--rcard); padding: 28px 32px;
    line-height: 1.8; font-size: 15px;
}
.cms-page-body h2 { font-size: 20px; color: var(--primary); margin-top: 24px; }
.cms-page-body h3 { font-size: 17px; color: var(--accent); margin-top: 20px; }
.cms-page-body a  { color: var(--link); border-bottom: 1px solid rgba(255,182,72,.3); }
.cms-page-body a:hover { color: var(--link-h); border-color: var(--link-h); }
.cms-page-body blockquote {
    border-left: 3px solid var(--primary); margin: 16px 0;
    padding: 10px 18px; background: rgba(255,182,72,.05);
    border-radius: 0 8px 8px 0; color: var(--muted);
}
.cms-page-body ul, .cms-page-body ol {
    padding-left: 24px; margin: 10px 0;
}
.cms-page-body li { margin: 5px 0; }
.cms-page-body code {
    background: rgba(255,255,255,.06); padding: 2px 6px;
    border-radius: 4px; font-size: 13px; font-family: monospace;
}
.cms-page-body pre {
    background: #090c12; border: 1px solid var(--card-bd);
    border-radius: 8px; padding: 16px; overflow-x: auto;
}
.cms-page-body img { max-width: 100%; border-radius: 8px; }

/* ============== DM PILL (topbar) ============== */
.dm-pill { background: rgba(77,208,122,.18); border-color: rgba(77,208,122,.4); color: var(--accent); }

/* ============== NAV BADGE ============== */
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 800;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; margin-left: 4px; vertical-align: middle;
    line-height: 1;
}

/* ============== PERSONAL MESSAGES (DM) ============== */
.dm-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: calc(100vh - 200px);
    min-height: 400px;
    max-height: 780px;
    background: var(--card);
    border: 1px solid var(--card-bd);
    border-radius: var(--rcard);
    overflow: hidden;
}

/* --- Sidebar --- */
.dm-sidebar {
    border-right: 1px solid var(--card-bd);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(14,18,26,.8), rgba(10,13,20,.9));
}
.dm-new-chat { padding: 14px 12px 8px; }
.dm-new-label {
    display: block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); margin-bottom: 8px;
}
.dm-friends-list { display: flex; flex-direction: column; gap: 2px; }
.dm-friend-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 8px;
    color: var(--text); text-decoration: none;
    transition: background .12s;
}
.dm-friend-item:hover { background: rgba(255,255,255,.06); }
.dm-friend-item.dm-friend-active { background: rgba(255,182,72,.14); color: var(--primary); }
.dm-friend-name { font-size: 13px; font-weight: 600; }

.dm-convos { padding: 4px 0 8px; }
.dm-convos-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); padding: 10px 14px 6px;
    border-top: 1px dashed var(--card-bd);
    margin-top: 6px;
}
.dm-convo {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; text-decoration: none; color: var(--text);
    transition: background .12s; cursor: pointer;
}
.dm-convo:hover { background: rgba(255,255,255,.05); }
.dm-convo.dm-convo-active { background: rgba(255,182,72,.12); }
.dm-convo-info { flex: 1; min-width: 0; }
.dm-convo-name { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 4px; }
.dm-convo-preview { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #1a1206;
    font-size: 10px; font-weight: 800; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; line-height: 1; flex-shrink: 0;
}
.dm-no-friends { margin: 12px; }

/* --- Avatars --- */
.dm-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--card-bd);
}
.dm-avatar-letter {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), #c87620);
    color: #1a1206; font-weight: 800; font-size: 15px;
    border: none;
}

/* --- Main chat area --- */
.dm-main {
    display: flex; flex-direction: column; overflow: hidden;
}
.dm-chat-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid var(--card-bd);
    background: linear-gradient(180deg, rgba(255,182,72,.07), rgba(0,0,0,0));
    flex-shrink: 0;
}
.dm-chat-title { font-weight: 800; color: #fff; font-size: 16px; }

/* --- Message thread --- */
.dm-messages {
    flex: 1; overflow-y: auto; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.dm-date-sep {
    text-align: center; color: var(--muted); font-size: 11px;
    margin: 10px 0 4px;
    position: relative;
}
.dm-date-sep::before, .dm-date-sep::after {
    content: ''; position: absolute; top: 50%;
    width: calc(50% - 36px); height: 1px;
    background: var(--card-bd);
}
.dm-date-sep::before { left: 0; }
.dm-date-sep::after  { right: 0; }

.dm-msg {
    display: flex; flex-direction: column;
    max-width: 72%; margin-bottom: 4px;
}
.dm-msg-me   { align-self: flex-end; align-items: flex-end; }
.dm-msg-them { align-self: flex-start; align-items: flex-start; }

.dm-msg-bubble {
    padding: 9px 13px; border-radius: 16px;
    font-size: 14px; line-height: 1.5;
    word-break: break-word; white-space: pre-wrap;
}
.dm-msg-me .dm-msg-bubble {
    background: linear-gradient(135deg, var(--primary), #c87620);
    color: #1a1206; border-radius: 16px 16px 4px 16px;
}
.dm-msg-them .dm-msg-bubble {
    background: rgba(255,255,255,.08);
    color: var(--text); border-radius: 16px 16px 16px 4px;
    border: 1px solid var(--card-bd);
}
.dm-msg-time { font-size: 10px; color: var(--muted); margin-top: 2px; }

.dm-empty-thread {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--muted); gap: 10px;
}
.dm-empty-icon { font-size: 48px; opacity: .5; }

/* --- Send form --- */
.dm-send-form {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 14px 12px; border-top: 1px solid var(--card-bd);
    flex-shrink: 0;
    background: linear-gradient(0deg, rgba(14,18,26,.9), rgba(14,18,26,.5));
}
.dm-input {
    flex: 1; background: rgba(255,255,255,.07); border: 1px solid var(--card-bd);
    border-radius: 12px; padding: 8px 12px;
    color: var(--text); font-size: 14px; resize: none;
    min-height: 38px; max-height: 120px; overflow-y: auto;
    transition: border-color .15s, background .15s;
    font-family: inherit; line-height: 1.4;
}
.dm-input:focus {
    outline: none; border-color: var(--primary);
    background: rgba(255,255,255,.10);
}
.dm-send-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(180deg, var(--primary), #c87620);
    border: none; color: #1a1206; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: filter .15s;
}
.dm-send-btn:hover { filter: brightness(1.12); }

/* --- No chat selected --- */
.dm-no-chat {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--muted); gap: 10px; padding: 32px;
}
.dm-no-chat-icon { font-size: 64px; opacity: .3; }
.dm-no-chat-text { text-align: center; font-size: 16px; color: var(--muted); }

/* Mobile DM layout */
@media (max-width: 720px) {
    .dm-layout {
        grid-template-columns: 1fr;
        height: auto; max-height: none;
    }
    .dm-sidebar {
        border-right: none; border-bottom: 1px solid var(--card-bd);
        max-height: 220px;
    }
    .dm-main { min-height: 420px; }
    .dm-messages { max-height: 340px; }
}