:root {
    --bg-dark: #141210;
    --bg-panel: #262320;
    --bg-slot: #373737;
    --mc-green: #388e3c;
    --mc-gold: #ffd700;
    --mc-ultra: #00f5d4;
    --text-main: #f5f5f5;
    --text-muted: #aaaaaa;
    --season-accent: #59f284;
}

/* АВТОМАТИЧЕСКИЕ И РУЧНЫЕ ТЕМЫ ВРЕМЁН ГОДА */
body.season-winter {
    --season-accent: #80d8ff;
    background-image: radial-gradient(rgba(128, 216, 255, 0.08) 1.5px, transparent 0), linear-gradient(180deg, #101b24 0%, #0b1016 100%);
    background-size: 26px 26px, 100% 100%;
}
body.season-spring {
    --season-accent: #59f284;
    background-image: radial-gradient(rgba(89, 242, 132, 0.06) 1.5px, transparent 0), linear-gradient(180deg, #142218 0%, #0d130f 100%);
    background-size: 24px 24px, 100% 100%;
}
body.season-summer {
    --season-accent: #ffd700;
    background-image: radial-gradient(rgba(255, 215, 0, 0.06) 1.5px, transparent 0), linear-gradient(180deg, #211c11 0%, #120f0a 100%);
    background-size: 24px 24px, 100% 100%;
}
body.season-autumn {
    --season-accent: #ff8500;
    background-image: radial-gradient(rgba(255, 133, 0, 0.07) 1.5px, transparent 0), linear-gradient(180deg, #241610 0%, #120c0a 100%);
    background-size: 24px 24px, 100% 100%;
}

/* ГЛОБАЛЬНЫЕ СОБЫТИЯ: КРОВАВАЯ ЛУНА И СОЛНЕЧНОЕ ЗАТМЕНИЕ */
body.event-blood_moon {
    --season-accent: #ff0055;
    background-image: radial-gradient(rgba(255, 0, 85, 0.1) 1.5px, transparent 0), linear-gradient(180deg, #2b0912 0%, #120408 100%) !important;
}
body.event-solar_eclipse {
    --season-accent: #ffd700;
    background-image: radial-gradient(rgba(255, 215, 0, 0.1) 1.5px, transparent 0), linear-gradient(180deg, #1f112b 0%, #09060d 100%) !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Rubik', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    min-height: 100vh;
    padding-bottom: 110px;
    transition: background 0.4s ease;
}

#seasonParticlesCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}

header, .live-drop-bar, .server-event-bar, .container, .mobile-hotbar, .chat-fab, .chat-drawer, .modal-backdrop {
    position: relative;
    z-index: 10;
}
header { position: sticky; z-index: 50; }
.mobile-hotbar { position: fixed; z-index: 150; }
.chat-fab { position: fixed; z-index: 220; }
.chat-drawer { position: fixed; z-index: 230; }
.modal-backdrop { position: fixed; z-index: 280; }

body.ultra-screen-shake {
    animation: ultraShake 0.75s cubic-bezier(.36,.07,.19,.97) both;
}

body.thunder-flash-shake {
    animation: thunderFlashShake 1.3s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes ultraShake {
    10%, 90% { transform: translate3d(-4px, 2px, 0); }
    20%, 80% { transform: translate3d(6px, -3px, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 4px, 0); }
    40%, 60% { transform: translate3d(8px, -4px, 0); }
}

@keyframes thunderFlashShake {
    0%, 100% { transform: translate3d(0, 0, 0); filter: brightness(1); }
    10% { transform: translate3d(-12px, 6px, 0); filter: brightness(2.6) contrast(1.4); }
    20% { transform: translate3d(12px, -6px, 0); filter: brightness(1.1); }
    35% { transform: translate3d(-14px, -8px, 0); filter: brightness(3.0); }
    50% { transform: translate3d(10px, 8px, 0); filter: brightness(1.2); }
    70% { transform: translate3d(-6px, 4px, 0); filter: brightness(1.8); }
}

.pixel-font {
    font-family: 'Press Start 2P', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', monospace;
    letter-spacing: 0.4px;
}

.mc-coin-svg {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin: 0 2px;
    filter: drop-shadow(1px 1px 0px #000);
    flex-shrink: 0;
}

.balance-box .mc-coin-svg {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
}

.mc-panel {
    background: #2b2927;
    border: 4px solid #000;
    box-shadow: inset 3px 3px 0px #4a4744, inset -3px -3px 0px #181615, 0 8px 24px rgba(0,0,0,0.6);
}

.mc-slot {
    background: #1e1d1c;
    border: 3px solid #121110;
    box-shadow: inset 3px 3px 0px #11100f, inset -2px -2px 0px #3c3a38;
}

.mc-btn {
    font-family: 'Press Start 2P', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', monospace;
    font-size: 9px;
    padding: 9px 11px;
    background: #727272;
    color: #ffffff;
    text-shadow: 2px 2px 0px #242424;
    border: 3px solid #000;
    box-shadow: inset 3px 3px 0px #ababab, inset -3px -3px 0px #424242;
    cursor: pointer;
    transition: transform 0.06s, filter 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-transform: uppercase;
    line-height: 1.3;
}

.mc-btn:hover:not(:disabled) {
    filter: brightness(1.15);
    border-color: #ffffa0;
}

.mc-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: inset 3px 3px 0px #424242, inset -3px -3px 0px #ababab;
}

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

.mc-btn.green  { background: #388e3c; box-shadow: inset 3px 3px 0px #6abf69, inset -3px -3px 0px #1b5e20; }
.mc-btn.gold   { background: #d49a1a; box-shadow: inset 3px 3px 0px #ffd54f, inset -3px -3px 0px #8c5a08; }
.mc-btn.cyan   { background: #008b8b; box-shadow: inset 3px 3px 0px #00f5d4, inset -3px -3px 0px #004d4d; }
.mc-btn.purple { background: #6a1b9a; box-shadow: inset 3px 3px 0px #ab47bc, inset -3px -3px 0px #38006b; }
.mc-btn.red    { background: #b71c1c; box-shadow: inset 3px 3px 0px #f05545, inset -3px -3px 0px #7f0000; }

header {
    background: #1f1b18;
    border-bottom: 4px solid var(--season-accent);
    box-shadow: inset 0 -4px 0 #120f0d;
    padding: 10px 14px;
    top: 0;
}

.header-inner {
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.logo-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--season-accent); text-shadow: 3px 3px 0 #000; }
.online-pill { background: #12100e; border: 2px solid #2e4c34; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 8px; color: #59f284; }
.season-pill { background: #12100e; border: 2px solid var(--season-accent); padding: 5px 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 8px; color: var(--season-accent); }
.online-dot { width: 8px; height: 8px; background: #59f284; border-radius: 50%; box-shadow: 0 0 8px #59f284; animation: pulseDot 1.6s infinite; }

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.65; }
}

.nav-tabs, .user-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.balance-box { background: #12100e; border: 3px solid #3d3730; padding: 6px 9px; display: flex; align-items: center; gap: 5px; color: var(--mc-gold); font-size: 10px; text-shadow: 2px 2px 0 #000; }
.boss-coin-box { background: #1a0f1e; border: 3px solid #9d4edd; padding: 6px 9px; display: flex; align-items: center; gap: 5px; color: #ff85a1; font-size: 10px; text-shadow: 2px 2px 0 #000; }
.user-profile-pill { background: #181614; border: 2px solid #4a4744; padding: 5px 9px; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: border-color 0.15s; }
.user-profile-pill:hover { border-color: #ffd700; }
.mobile-hotbar { display: none; }
.container { max-width: 1520px; margin: 16px auto; padding: 0 14px; }
.tab-section { display: none; }
.tab-section.active { display: block; }

/* БАННЕР ГЛОБАЛЬНОГО СОБЫТИЯ */
.server-event-bar {
    background: linear-gradient(90deg, #3b0819 0%, #1c0d26 50%, #3b0819 100%);
    border-bottom: 3px solid #ff0055;
    padding: 8px 14px;
    text-align: center;
    font-size: 12.5px;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(255, 0, 85, 0.35);
}

/* СТАТИСТИКА ОКУПАЕМОСТИ (ROI) И СНАРЯЖЕНИЕ ГЕРОЯ */
.roi-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.roi-stat-card {
    padding: 12px;
    text-align: center;
}

.rpg-loadout-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr;
    gap: 16px;
    margin-bottom: 18px;
}

.equip-slots-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.equip-slot-card {
    padding: 10px;
    text-align: center;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.equip-slot-card.equipped {
    border-color: #00f5d4;
    background: radial-gradient(circle, #163034 0%, #181615 100%);
    box-shadow: 0 0 14px rgba(0, 245, 212, 0.25);
}

/* МИНИ-ИГРЫ (2x2 СЕТКА: САПЁР, КОЛЕСО ФОРТУНЫ, ПОЛЁТ НА ЭЛИТРАХ, СЛОТЫ 3x3) */
.minigames-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mines-board-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    max-width: 370px;
    margin: 14px auto;
}

.mine-cell {
    aspect-ratio: 1 / 1;
    background: #2b2927;
    border: 3px solid #000;
    box-shadow: inset 3px 3px 0px #4a4744, inset -3px -3px 0px #181615;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.mine-cell:hover:not(.revealed) {
    filter: brightness(1.2);
    border-color: #ffd700;
    transform: scale(1.03);
}

.mine-cell.safe {
    background: radial-gradient(circle, #1b4332 0%, #12261e 100%);
    border-color: #59f284;
    box-shadow: 0 0 12px rgba(89, 242, 132, 0.4);
    cursor: default;
}

.mine-cell.boom {
    background: radial-gradient(circle, #800f2f 0%, #2b0610 100%);
    border-color: #ff0055;
    box-shadow: 0 0 16px rgba(255, 0, 85, 0.65);
    animation: bossHitShake 0.4s ease;
    cursor: default;
}

.fortune-wheel-box {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fortune-wheel-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #000;
    background: conic-gradient(
        #5e98d9 0deg 45deg,
        #9d4edd 45deg 90deg,
        #ffd700 90deg 135deg,
        #59f284 135deg 180deg,
        #4b69ff 180deg 225deg,
        #00f5d4 225deg 270deg,
        #ff85a1 270deg 315deg,
        #ff0055 315deg 360deg
    );
    box-shadow: 0 0 25px rgba(0,0,0,0.85), inset 0 0 18px rgba(0,0,0,0.65);
    will-change: transform;
}

.fortune-wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 26px solid #ffd700;
    filter: drop-shadow(0 3px 6px #000);
    z-index: 10;
}

.fortune-wheel-hub {
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #161412;
    border: 4px solid #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 5;
    box-shadow: 0 0 15px rgba(0,0,0,0.9);
}

/* ПОЛЁТ НА ЭЛИТРАХ (CRASH) */
.crash-display-box {
    position: relative;
    height: 220px;
    background: radial-gradient(circle at bottom left, #1c1436 0%, #0d0b14 75%);
    border: 4px solid #000;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 12px 0;
}

.crash-display-box.flying {
    border-color: #00f5d4;
    box-shadow: inset 0 0 35px rgba(0, 245, 212, 0.25);
}

.crash-display-box.crashed {
    background: radial-gradient(circle, #590d22 0%, #1a060b 80%);
    border-color: #ff0055;
    animation: bossHitShake 0.4s ease;
}

.crash-flyer-icon {
    font-size: 44px;
    margin-bottom: 8px;
    filter: drop-shadow(0 6px 12px rgba(0,245,212,0.5));
    transition: transform 0.2s ease;
}

.crash-display-box.flying .crash-flyer-icon {
    animation: elytraHover 0.6s ease-in-out infinite alternate;
}

@keyframes elytraHover {
    from { transform: translateY(0) rotate(-6deg) scale(1); }
    to   { transform: translateY(-10px) rotate(4deg) scale(1.1); }
}

.crash-mult-big {
    font-size: 28px;
    color: #59f284;
    text-shadow: 3px 3px 0 #000, 0 0 16px rgba(89, 242, 132, 0.6);
}

.crash-display-box.crashed .crash-mult-big {
    color: #ff0055;
    text-shadow: 3px 3px 0 #000, 0 0 16px rgba(255, 0, 85, 0.7);
}

/* НАКОВАЛЬНЯ УДАЧ (СЛОТЫ 3x3 С ДЖЕКПОТОМ) */
.jackpot-banner-box {
    background: linear-gradient(90deg, #2b1136 0%, #3b1c08 50%, #2b1136 100%);
    border: 3px solid #ffd700;
    padding: 10px 14px;
    text-align: center;
    margin-bottom: 12px;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.3);
}

.slots-machine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 330px;
    margin: 12px auto;
    padding: 10px;
    background: #12100e;
    border: 4px solid #000;
}

.slot-reel-cell {
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #262422 0%, #171615 100%);
    border: 3px solid #3a3734;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 32px;
    transition: transform 0.15s, border-color 0.15s;
}

.slot-reel-cell.spinning-cell {
    animation: slotBlurSpin 0.18s linear infinite;
}

@keyframes slotBlurSpin {
    0%   { transform: translateY(-4px) scale(0.95); filter: blur(1px); }
    50%  { transform: translateY(4px) scale(1.03); filter: brightness(1.3); }
    100% { transform: translateY(-4px) scale(0.95); filter: blur(1px); }
}

.slot-reel-cell.win-cell {
    border-color: #ffd700;
    background: radial-gradient(circle, #382e12 0%, #1a1612 100%);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.65);
    transform: scale(1.05);
}

/* ПВП КЕЙС-БАТЛЫ МЕЖДУ ЖИВЫМИ ИГРОКАМИ */
.pvp-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.pvp-room-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.pvp-room-card.open-room {
    border-color: #00f5d4;
}

.pvp-room-card.finished-room {
    opacity: 0.85;
    border-color: #4a4744;
}

/* LIVE DROP */
.live-drop-bar { background: #141210; border-bottom: 4px solid #000; box-shadow: inset 0 -3px 0 #262320, 0 6px 16px rgba(0,0,0,0.6); padding: 7px 12px; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.live-drop-indicator { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 9px; background: #1d1a17; border: 2px solid #38342f; flex-shrink: 0; min-width: 70px; }
.live-drop-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 2px 0; }
.live-drop-track::-webkit-scrollbar { display: none; }
.live-drop-card { width: 145px; height: 72px; flex-shrink: 0; background: linear-gradient(180deg, #252321 0%, #171615 100%); border: 2px solid #33302c; border-bottom-width: 4px; padding: 5px 7px; display: flex; align-items: center; gap: 7px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.15s; }
.live-drop-card:hover { transform: translateY(-2px); }
.live-drop-card.new-drop-anim { animation: liveDropPop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.live-drop-card.ultra-live-card { background: radial-gradient(circle at left, #17383b 0%, #24122d 100%); box-shadow: 0 0 12px rgba(0, 245, 212, 0.35); }
@keyframes liveDropPop { 0% { transform: scale(0.6) translateX(-30px); opacity: 0; } 100% { transform: scale(1) translateX(0); opacity: 1; } }
.live-drop-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.live-drop-item-name { font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-drop-user { font-size: 9.5px; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-drop-source { font-size: 9px; color: #ffd700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ШКАЛА ОПЫТА XP */
.mc-xp-panel { padding: 11px 16px; margin-bottom: 14px; background: #1a1816; border: 3px solid #000; box-shadow: inset 2px 2px 0 #33302c, inset -2px -2px 0 #111; }
.mc-xp-top-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; }
.mc-xp-level-badge { font-size: 12px; color: #80ff20; text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 0 0 10px rgba(128,255,32,0.5); }
.mc-xp-bar-outer { position: relative; width: 100%; height: 16px; background: #111f08; border: 3px solid #000; overflow: hidden; }
.mc-xp-bar-fill { height: 100%; background: linear-gradient(180deg, #b5ff59 0%, #68d800 55%, #3ea300 100%); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 10px #80ff20; }
.mc-xp-segments { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent, transparent calc(10% - 2px), rgba(0, 0, 0, 0.72) calc(10% - 2px), rgba(0, 0, 0, 0.72) 10%); }

/* КЕЙСЫ И РУЛЕТКА */
.promo-strip { padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: linear-gradient(90deg, #1f1b24 0%, #2b2927 100%); border-color: #ab47bc; }
.promo-form-inline { display: flex; gap: 8px; flex: 1; max-width: 460px; }
.promo-form-inline input { flex: 1; background: #121110; border: 3px solid #4a4744; color: #ffd700; padding: 9px 11px; font-size: 13px; font-family: 'Press Start 2P', monospace; text-transform: uppercase; outline: none; user-select: text; }
.cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 16px; margin-top: 14px; }
.case-card { padding: 16px; text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.case-card:hover { transform: translateY(-4px); border-color: var(--mc-gold); }
.case-card.daily-ready { background: linear-gradient(180deg, #1d3022 0%, #2b2927 100%); border-color: #59f284; }
.case-card.free-promo-ready { background: linear-gradient(180deg, #162f36 0%, #2b2927 100%); border-color: #00f5d4; }
.daily-badge { position: absolute; top: 8px; right: 8px; font-size: 8px; padding: 4px 7px; border: 2px solid #000; background: #2acb57; color: #000; font-weight: 800; z-index: 2; }
.daily-badge.cooldown { background: #3a3734; color: #ffd700; }
.daily-badge.promo-free { background: #00f5d4; color: #000; }
.case-card .case-svg-wrap { height: 108px; display: flex; align-items: center; justify-content: center; margin: 6px 0 10px; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.65)); transition: transform 0.2s; }
.case-card:hover .case-svg-wrap { transform: scale(1.08); }
.case-title { font-size: 11.5px; margin-bottom: 6px; color: #fff; text-shadow: 2px 2px 0 #000; line-height: 1.4; }
.case-desc { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; min-height: 32px; }
.case-price-tag { font-size: 10.5px; padding: 9px 6px; background: #161412; border: 2px solid #443f38; color: var(--mc-gold); text-shadow: 2px 2px 0 #000; }

.case-arena { padding: 20px; margin-bottom: 22px; text-align: center; }
.arena-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.arena-toggles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.multi-selector { display: inline-flex; align-items: center; gap: 5px; background: #161412; padding: 4px 6px; border: 2px solid #3a3734; }
.multi-btn { padding: 6px 9px; font-size: 9px; }

.roulette-multi-container { display: flex; flex-direction: column; gap: 10px; margin: 16px auto; max-width: 980px; }
.roulette-wrapper { position: relative; width: 100%; height: 158px; background: #100f0e; border: 4px solid #000; box-shadow: inset 0 0 25px rgba(0,0,0,0.9); overflow: hidden; transition: height 0.2s; }
.roulette-multi-container.compact-multi .roulette-wrapper { height: 122px; }
.roulette-wrapper::before, .roulette-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 5; pointer-events: none; }
.roulette-wrapper::before { left: 0; background: linear-gradient(90deg, #0d0c0b 10%, transparent 100%); }
.roulette-wrapper::after { right: 0; background: linear-gradient(-90deg, #0d0c0b 10%, transparent 100%); }
.roulette-lane-badge { position: absolute; top: 6px; left: 10px; z-index: 12; background: rgba(0, 0, 0, 0.8); border: 1px solid #444; color: #ffd700; font-size: 8px; padding: 3px 6px; pointer-events: none; }
.roulette-needle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); background: #ffd700; box-shadow: 0 0 12px #ffd700; z-index: 10; pointer-events: none; }
.roulette-needle::before, .roulette-needle::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; }
.roulette-needle::before { top: 0; border-top: 12px solid #ffd700; }
.roulette-needle::after { bottom: 0; border-bottom: 12px solid #ffd700; }
.roulette-track { display: flex; align-items: center; height: 100%; gap: 8px; padding: 0 12px; will-change: transform; }
.roulette-item { width: 132px; height: 136px; flex-shrink: 0; background: linear-gradient(180deg, #262523 0%, #181716 100%); border: 2px solid #383532; border-bottom-width: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; position: relative; }
.roulette-multi-container.compact-multi .roulette-item { width: 110px; height: 104px; padding: 5px; }
.roulette-multi-container.compact-multi .roulette-item svg { width: 46px; height: 46px; }
.roulette-item.ultra-slot { background: radial-gradient(circle, #18363a 0%, #1d1128 100%); box-shadow: inset 0 0 15px rgba(0, 245, 212, 0.35); }
.roulette-item .item-title { font-size: 11px; font-weight: 600; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.roulette-multi-container.compact-multi .roulette-item .item-title { font-size: 9.5px; margin-top: 3px; }
.roulette-item .item-price { font-size: 10px; color: var(--mc-gold); margin-top: 2px; }

/* КАРТОЧКИ БЛОКОВ И АНИМАЦИИ ПОДГРУПП УЛЬТРА-РЕДКОГО */
.drops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 11px; margin-top: 12px; }
.block-card { padding: 12px 9px; text-align: center; position: relative; border-bottom: 5px solid #b0c3d9; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; }
.block-card.ultra-card {
    background: linear-gradient(145deg, #14282d 0%, #24132e 50%, #1b1a18 100%);
    border-color: #00f5d4;
    box-shadow: 0 0 14px rgba(0, 245, 212, 0.35);
    animation: ultraBorderPulse 2.5s infinite alternate;
}
@keyframes ultraBorderPulse {
    0% { border-color: #00f5d4; box-shadow: 0 0 12px rgba(0,245,212,0.3); }
    100% { border-color: #ff007f; box-shadow: 0 0 20px rgba(255,0,127,0.45); }
}

.ultra-anim-rare_ultra { animation: animRareUltra 1.8s ease-in-out infinite alternate; }
.ultra-anim-super_rare { animation: animSuperRare 1.4s ease-in-out infinite alternate; }
.ultra-anim-epic       { animation: animEpicUltra 2.2s linear infinite; }
.ultra-anim-mythic     { animation: animMythicUltra 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite alternate; }
.ultra-anim-legendary  { animation: animLegendaryUltra 1.6s ease-in-out infinite alternate; }
.ultra-anim-ultra_legendary { animation: animChaliceThunder 0.9s infinite alternate; }

@keyframes animRareUltra {
    from { transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px #00f5d4); }
    to   { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 0 18px #00f5d4); }
}
@keyframes animSuperRare {
    from { transform: scale(0.96) rotate(-3deg); filter: drop-shadow(0 0 10px #38b6ff); }
    to   { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 24px #00f5d4); }
}
@keyframes animEpicUltra {
    0%   { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 14px #9d4edd); }
    50%  { transform: translateY(-8px) rotate(6deg) scale(1.1); filter: drop-shadow(0 0 28px #ff007f); }
    100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 14px #9d4edd); }
}
@keyframes animMythicUltra {
    0%   { transform: scale(1) skewX(0deg); filter: drop-shadow(0 0 14px #ff0055); }
    100% { transform: scale(1.12) skewX(3deg); filter: drop-shadow(0 0 32px #00f5d4); }
}
@keyframes animLegendaryUltra {
    0%   { transform: scale(1) translateY(0); filter: drop-shadow(0 0 16px #ffd700) brightness(1); }
    100% { transform: scale(1.16) translateY(-10px); filter: drop-shadow(0 0 36px #00f5d4) brightness(1.3); }
}
@keyframes animChaliceThunder {
    0%   { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 20px #ff0055) brightness(1); }
    50%  { transform: scale(1.18) rotate(2deg); filter: drop-shadow(0 0 45px #ffffff) brightness(1.8); }
    100% { transform: scale(1.1) rotate(0deg); filter: drop-shadow(0 0 35px #00f5d4) brightness(1.3); }
}

.chance-badge { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.82); padding: 2px 5px; font-size: 9px; color: #ccc; border: 1px solid #444; z-index: 3; }
.lock-btn-corner { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.8); border: 1px solid #555; padding: 3px 5px; font-size: 11px; cursor: pointer; z-index: 3; border-radius: 2px; }
.lock-btn-corner:hover { border-color: #ffd700; }
.prefix-pill { font-size: 9px; font-weight: 800; padding: 2px 6px; border: 1px solid #000; background: #141210; border-radius: 2px; }

/* СТОЛ ЗАЧАРОВАНИЙ И АПГРЕЙД */
.reforge-panel { padding: 18px; margin-bottom: 18px; background: linear-gradient(135deg, #1f172b 0%, #26221e 100%); border-color: #8847ff; }
.upgrade-arena { display: grid; grid-template-columns: 1fr 290px 1fr; gap: 18px; align-items: center; padding: 20px; margin-bottom: 20px; }
.upgrade-slot-box { min-height: 210px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; position: relative; }
.upgrade-wheel-wrap { position: relative; width: 230px; height: 230px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.upgrade-wheel-ring { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #000; background: conic-gradient(#59f284 0deg calc(var(--chance-deg, 0) * 1deg), #262320 calc(var(--chance-deg, 0) * 1deg) 360deg); box-shadow: 0 0 25px rgba(0,0,0,0.85), inset 0 0 15px rgba(0,0,0,0.7); transition: background 0.25s; }
.upgrade-wheel-rotor { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; will-change: transform; z-index: 6; }
.upgrade-wheel-pointer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 22px solid #ffd700; filter: drop-shadow(0 0 8px #ffd700); }
.upgrade-wheel-center { position: relative; z-index: 4; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #24211e 0%, #12100e 100%); border: 5px solid #000; box-shadow: inset 0 0 18px rgba(0,0,0,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; }
.upgrade-selectors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.upgrade-pick-scroll { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.block-card.selected-upgrade { border: 3px solid #ffd700 !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.45); }

/* ВЕРСТАК КРАФТА */
.craft-arena { padding: 20px; margin-bottom: 20px; text-align: center; }
.craft-workbench-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.craft-slot { width: 110px; height: 126px; padding: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.craft-slot:hover { transform: translateY(-3px); border-color: #ffd700; }
.craft-slot.filled { border-color: #59f284; background: radial-gradient(circle, #252b24 0%, #1a1917 100%); }
.craft-slot.result-slot { width: 130px; height: 140px; border: 3px solid #00f5d4; background: radial-gradient(circle, #183338 0%, #171514 100%); box-shadow: 0 0 20px rgba(0, 245, 212, 0.25); cursor: default; }
.craft-workbench-row.forging .craft-slot.filled { animation: craftForgePulse 0.28s infinite alternate; }
@keyframes craftForgePulse { from { transform: scale(0.95) rotate(-2deg); filter: brightness(1.1); } to { transform: scale(1.05) rotate(2deg); filter: brightness(1.5); box-shadow: 0 0 18px #ffd700; } }
.block-card.selected-craft { border: 3px solid #59f284 !important; box-shadow: 0 0 14px rgba(89, 242, 132, 0.45); }

/* КЕЙС-БАТЛЫ 1 НА 1 */
.battle-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.battle-arena-duel { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 14px; align-items: stretch; margin-top: 16px; }
.battle-side-box { padding: 16px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.battle-vs-circle { align-self: center; width: 68px; height: 68px; border-radius: 50%; background: #161412; border: 4px solid #ffd700; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 0 18px rgba(255,215,0,0.4); }

/* БОССЫ, МИРОВОЙ БОСС И ПИТОМЦЫ */
.boss-stats-banner { padding: 15px 18px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: linear-gradient(90deg, #1b2822 0%, #26172b 100%); border-color: #00f5d4; }
.world-boss-arena { padding: 22px; margin-bottom: 24px; background: radial-gradient(circle at top, #1b2e1b 0%, #1c1124 70%, #141210 100%); border-color: #ff0055; box-shadow: 0 0 30px rgba(255, 0, 85, 0.25); }
.bosses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.boss-card { padding: 18px; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.boss-hp-bar-outer { width: 100%; height: 22px; background: #140a0e; border: 3px solid #000; position: relative; overflow: hidden; box-shadow: inset 0 0 10px #000; }
.boss-hp-bar-fill { height: 100%; background: linear-gradient(90deg, #ff0055, #ff5400); transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 12px #ff0055; }
.boss-hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; text-shadow: 1px 1px 0 #000; z-index: 2; }
.boss-avatar-wrap { height: 140px; display: flex; align-items: center; justify-content: center; position: relative; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.8)); transition: transform 0.12s; }
.boss-avatar-wrap.boss-hit-anim { animation: bossHitShake 0.32s ease; }
@keyframes bossHitShake { 0%, 100% { transform: scale(1); } 25% { transform: scale(0.93) translate(-8px, 4px); filter: brightness(2); } 50% { transform: scale(1.04) translate(8px, -4px); } }
.floating-dmg { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 13px; color: #ffd700; text-shadow: 2px 2px 0 #000; pointer-events: none; animation: floatUpDmg 0.85s ease-out forwards; z-index: 20; white-space: nowrap; }
@keyframes floatUpDmg { 0% { opacity: 1; transform: translate(-50%, 10px) scale(0.8); } 100% { opacity: 0; transform: translate(-50%, -45px) scale(0.95); } }

/* КОЛЛЕКЦИЯ, АЧИВКИ, КВЕСТЫ, ТОП */
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 16px; margin-top: 16px; }
.collection-pedestal { padding: 18px 14px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 9px; }
.collection-pedestal.locked { opacity: 0.55; filter: grayscale(0.85) contrast(1.1); }
.collection-pedestal.unlocked { background: radial-gradient(circle at top, #1b3838 0%, #23162b 65%, #181615 100%); border-color: #00f5d4; box-shadow: 0 0 22px rgba(0, 245, 212, 0.22); }
.ach-progress-bar-wrap { width: 100%; height: 22px; background: #12100e; border: 3px solid #000; position: relative; overflow: hidden; margin-top: 10px; }
.ach-progress-fill { height: 100%; background: linear-gradient(90deg, #2acb57, #59f284); transition: width 0.35s ease; }
.ach-progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; text-shadow: 1px 1px 0 #000; }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
.ach-card { display: flex; gap: 12px; padding: 13px; align-items: center; position: relative; opacity: 0.65; filter: grayscale(0.55); }
.ach-card.unlocked { opacity: 1; filter: none; border-color: #59f284; background: linear-gradient(135deg, #2b2927 0%, #1f2b22 100%); }
.ach-icon-box { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #161514; border: 3px solid #444; }
.ach-card.unlocked .ach-icon-box { border-color: #ffd700; background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, #161514 80%); }
.ach-info { flex: 1; min-width: 0; }
.ach-mini-bar { width: 100%; height: 10px; background: #111; border: 1px solid #3a3a3a; margin-top: 7px; overflow: hidden; }
.ach-mini-fill { height: 100%; background: #ffd700; }
.ach-card.unlocked .ach-mini-fill { background: #59f284; }

.mc-advancement-toast-container { position: fixed; top: 16px; right: 16px; z-index: 320; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 32px); }
.mc-advancement-toast { width: 350px; max-width: 100%; background: #212121; border: 4px solid #000; box-shadow: inset 3px 3px 0px #555, inset -3px -3px 0px #111, 0 10px 25px rgba(0,0,0,0.85); padding: 12px 14px; display: flex; align-items: center; gap: 12px; animation: slideInRight 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
@keyframes slideInRight { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard-table { width: 100%; border-collapse: collapse; margin-top: 12px; min-width: 680px; }
.leaderboard-table th, .leaderboard-table td { padding: 11px 13px; text-align: left; border-bottom: 2px solid #181615; white-space: nowrap; }
.leaderboard-table th { background: #1b1917; color: var(--mc-gold); font-size: 9.5px; text-transform: uppercase; }
.leaderboard-table tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.leaderboard-table tr:hover { background: rgba(255,215,0,0.06); }
.rank-badge { display: inline-block; padding: 5px 8px; font-size: 9px; border: 2px solid #000; background: #444; color: #fff; text-shadow: 1px 1px 0 #000; }
.rank-1 { background: #ffd700; color: #000; text-shadow: none; font-weight: 800; }
.rank-2 { background: #c0c0c0; color: #000; text-shadow: none; font-weight: 800; }
.rank-3 { background: #cd7f32; color: #000; text-shadow: none; font-weight: 800; }
.clickable-user { cursor: pointer; text-decoration: underline dotted rgba(255,215,0,0.5); }
.clickable-user:hover { color: #ffd700; }

.admin-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-bottom: 20px; }
.auth-box { max-width: 460px; margin: 40px auto; padding: 26px; }
.mc-input, .mc-select { width: 100%; padding: 10px 12px; background: #121110; border: 3px solid #4a4744; color: #fff; font-size: 14px; font-family: 'Rubik', sans-serif; margin-top: 5px; margin-bottom: 12px; outline: none; user-select: text; }
.mc-input:focus, .mc-select:focus { border-color: var(--mc-gold); }

.modal-backdrop { inset: 0; background: rgba(0, 0, 0, 0.86); display: none; align-items: center; justify-content: center; padding: 14px; overflow-y: auto; }
.modal-backdrop.show { display: flex; }
.ultra-light-rays {
    position: fixed; width: 750px; height: 750px; border-radius: 50%; animation: spinRays 9s linear infinite; pointer-events: none; display: none;
    background: conic-gradient(from 0deg, transparent 0deg 20deg, rgba(0, 245, 212, 0.28) 20deg 40deg, transparent 40deg 60deg, rgba(255, 0, 127, 0.28) 60deg 80deg, transparent 80deg 100deg, rgba(255, 215, 0, 0.28) 100deg 120deg, transparent 120deg 140deg, rgba(0, 245, 212, 0.28) 140deg 160deg, transparent 160deg 180deg, rgba(255, 0, 127, 0.28) 180deg 200deg, transparent 200deg 220deg, rgba(255, 215, 0, 0.28) 220deg 240deg, transparent 240deg 260deg, rgba(0, 245, 212, 0.28) 260deg 280deg, transparent 280deg 300deg, rgba(255, 0, 127, 0.28) 300deg 320deg, transparent 320deg 340deg, rgba(255, 215, 0, 0.28) 340deg 360deg);
}
@keyframes spinRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.modal-win { max-width: 480px; width: 100%; padding: 22px 18px; text-align: center; position: relative; z-index: 2; animation: popIn 0.28s ease-out; }
.modal-win.multi-win-modal { max-width: 820px; }
.multi-win-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 14px 0 18px; max-height: 55vh; overflow-y: auto; padding: 4px; }
.modal-win.ultra-win-box { background: radial-gradient(circle at center, #1b3b3b 0%, #24112e 70%, #141210 100%); border: 4px solid #00f5d4; box-shadow: 0 0 45px rgba(0, 245, 212, 0.65), inset 0 0 25px rgba(255, 0, 127, 0.35); }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ЧАТ (ОБЩИЙ + КЛАНОВЫЙ) И ЗОЛОТОЙ ДОЖДЬ */
.chat-fab { bottom: 20px; left: 20px; padding: 12px 16px; font-size: 10.5px; box-shadow: 0 8px 24px rgba(0,0,0,0.85); }
.chat-unread-badge { background: #ff0055; color: #fff; padding: 2px 6px; font-size: 9px; border: 2px solid #000; display: none; }
.chat-drawer { bottom: 74px; left: 20px; width: 380px; max-width: calc(100vw - 24px); height: 470px; max-height: 72vh; display: none; flex-direction: column; background: #211f1d; border: 4px solid #000; box-shadow: 0 14px 36px rgba(0,0,0,0.9); }
.chat-drawer.open { display: flex; }
.chat-header { padding: 9px 11px; background: #161412; border-bottom: 3px solid #000; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.chat-coin-rain-bar { background: linear-gradient(90deg, #382c08 0%, #1f3318 100%); border-bottom: 2px solid #ffd700; padding: 7px 10px; display: none; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 7px; background: #181615; }
.chat-msg { padding: 7px 9px; background: #252321; border-left: 3px solid #5e98d9; font-size: 12.5px; line-height: 1.35; word-break: break-word; }
.chat-msg.clan-msg { border-left-color: #59f284; background: #1c261e; }
.chat-msg.system-msg { background: linear-gradient(90deg, rgba(255,215,0,0.16) 0%, rgba(0,245,212,0.1) 100%); border-left: 4px solid #ffd700; color: #ffe66d; font-weight: 600; }
.chat-input-row { padding: 9px; background: #161412; border-top: 3px solid #000; display: flex; gap: 7px; }
.chat-input-row input { flex: 1; background: #0e0d0c; border: 2px solid #444; color: #fff; padding: 8px 10px; font-size: 14px; font-family: 'Rubik', sans-serif; outline: none; user-select: text; }

.toast { position: fixed; bottom: 22px; right: 22px; padding: 12px 16px; background: #1f1d1b; border: 3px solid var(--mc-gold); color: #fff; z-index: 300; display: none; box-shadow: 0 8px 20px rgba(0,0,0,0.85); font-size: 13.5px; max-width: calc(100vw - 32px); }

/* ============================================================================
   100% МОБИЛЬНАЯ ОПТИМИЗАЦИЯ (ВСЕ КНОПКИ И ВКЛАДКИ ДОСТУПНЫ НА ТЕЛЕФОНЕ)
   ============================================================================ */
@media (max-width: 1080px) {
    .rpg-loadout-grid, .minigames-grid, .admin-grid, .upgrade-arena, .upgrade-selectors-grid, .battle-setup-grid, .battle-arena-duel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    body {
        padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
    }

    header {
        padding: 8px 10px;
    }

    .header-inner {
        gap: 6px;
    }

    /* Верхняя полоса вкладок остаётся доступной для быстрой горизонтальной прокрутки пальцем */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        order: 3;
        padding: 4px 0 2px;
        gap: 5px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .mc-btn {
        flex-shrink: 0;
        font-size: 8px;
        padding: 7px 9px;
    }

    .user-bar {
        width: 100%;
        justify-content: space-between;
        order: 2;
        gap: 4px;
    }

    .user-name-label {
        display: none;
    }

    /* Нижний мобильный хотбар в 2 ряда — вмещает абсолютно все 15 разделов без прокрутки */
    .mobile-hotbar {
        bottom: 0;
        left: 0;
        right: 0;
        background: #1a1715;
        border-top: 4px solid #000;
        box-shadow: inset 0 3px 0 #3d3935, 0 -6px 20px rgba(0,0,0,0.9);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 3px;
        padding: 5px 5px calc(5px + env(safe-area-inset-bottom, 0px));
        max-height: 112px;
        overflow-y: auto;
    }

    .hotbar-slot {
        background: #2b2927;
        border: 2px solid #000;
        color: #ccc;
        padding: 4px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        cursor: pointer;
        font-family: 'Press Start 2P', monospace;
        font-size: 5.5px;
        text-align: center;
        min-height: 36px;
    }
    .hotbar-slot .hb-icon {
        font-size: 12px;
        line-height: 1;
    }
    .hotbar-slot.active {
        background: #d49a1a;
        color: #000;
        border-color: #fff;
    }

    .cases-grid, .drops-grid, .multi-win-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .equip-slots-row {
        grid-template-columns: 1fr;
    }

    .achievements-grid, .collection-grid, .bosses-grid, .pvp-rooms-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .arena-toggles {
        width: 100%;
        justify-content: space-between;
    }

    .promo-form-inline {
        width: 100%;
        max-width: 100%;
    }

    .chat-fab {
        bottom: calc(114px + env(safe-area-inset-bottom, 0px));
        left: 10px;
        padding: 10px 13px;
        font-size: 9px;
    }

    .chat-drawer {
        bottom: calc(158px + env(safe-area-inset-bottom, 0px));
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 60vh;
    }

    .toast {
        bottom: calc(118px + env(safe-area-inset-bottom, 0px));
        left: 10px;
        right: 10px;
        text-align: center;
    }
}