/* Google Fonts грузятся через <link rel="preload"> в index.html — здесь fallback на system-ui */

:root {
    --bg-deep: #050b10;
    --bg-panel: #0b1020;
    --bg-panel-2: #111a33;

    --neon-cyan: #00e5ff;
    --neon-blue: #1e90ff;
    --neon-green: #39ff14;
    --neon-violet: #b26bff;
    --neon-pink: #ff2d95;
    --neon-orange: #ff6b4a;
    --neon-amber: #ffb347;

    --text: #e6f7ff;
    --text-muted: #7a8aa8;

    --border-glow: rgba(0, 229, 255, 0.35);
    --border-soft: rgba(122, 138, 168, 0.25);

    --glow-cyan: 0 0 12px rgba(0, 229, 255, 0.55), 0 0 32px rgba(0, 229, 255, 0.22);
    --glow-green: 0 0 12px rgba(57, 255, 20, 0.55), 0 0 32px rgba(57, 255, 20, 0.2);
    --glow-pink: 0 0 12px rgba(255, 45, 149, 0.55), 0 0 32px rgba(255, 45, 149, 0.22);
    --glow-violet: 0 0 12px rgba(178, 107, 255, 0.55), 0 0 32px rgba(178, 107, 255, 0.22);

    --font-display: "Orbitron", sans-serif;
    --font-body: "Rajdhani", system-ui, sans-serif;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg-deep);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 0;
}

.scene { position: fixed; inset: 0; z-index: 1; }
.scene[hidden] { display: none !important; }

/* ==================== MENU ==================== */
#sceneMenu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 24px 24px max(24px, 8vw);
}

#sceneMenu { isolation: isolate; overflow: hidden; }
#menuFx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}
.menu-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5,6,10,0.78) 0%, rgba(5,6,10,0.45) 50%, rgba(5,6,10,0.25) 100%),
        radial-gradient(ellipse at center, transparent 0%, rgba(5,6,10,0.55) 90%);
}
.menu-box { position: relative; z-index: 10; }
.menu-hero { display: none; } /* legacy */

.brand-wrap { position: relative; display: inline-block; width: 100%; }
.brand.glitch { position: relative; display: inline-block; }
.brand-underline {
    width: 100%; height: 2px; margin: 4px 0 14px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan) 25%, var(--neon-pink) 75%, transparent);
    background-size: 220% 100%;
    animation: bgSweep 3.2s linear infinite;
    border-radius: 1px;
    box-shadow: 0 0 12px rgba(0,229,255,0.6);
}
@keyframes bgSweep {
    from { background-position: 0% 0; }
    to   { background-position: 220% 0; }
}

/* glitch заголовок */
.brand.glitch {
    position: relative;
    color: transparent;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 24px rgba(0,229,255,0.4);
    animation: titleFloat 5s ease-in-out infinite;
}
.brand.glitch::before,
.brand.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    pointer-events: none;
}
.brand.glitch::before {
    color: var(--neon-pink);
    -webkit-text-fill-color: var(--neon-pink);
    background: none;
    animation: glitchA 4s infinite linear;
    clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%);
    opacity: 0.55;
    mix-blend-mode: screen;
}
.brand.glitch::after {
    color: var(--neon-cyan);
    -webkit-text-fill-color: var(--neon-cyan);
    background: none;
    animation: glitchB 4s infinite linear;
    clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
    opacity: 0.55;
    mix-blend-mode: screen;
}
@keyframes glitchA {
    0%, 80%, 100% { transform: translate(0); }
    82%  { transform: translate(-3px, 1px); }
    84%  { transform: translate(2px, -2px); }
    86%  { transform: translate(-1px, 0); }
    88%  { transform: translate(0, 1px); }
    90%  { transform: translate(2px, 0); }
}
@keyframes glitchB {
    0%, 80%, 100% { transform: translate(0); }
    82%  { transform: translate(2px, -1px); }
    84%  { transform: translate(-2px, 1px); }
    86%  { transform: translate(1px, 0); }
    88%  { transform: translate(0, -1px); }
    90%  { transform: translate(-2px, 0); }
}
@keyframes titleFloat {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50%      { transform: translateY(-4px); filter: brightness(1.15); }
}

.brand-author {
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -10px;
    margin-bottom: 22px;
    opacity: 0.7;
}

/* Sweep glow на главной кнопке */
.btn-primary.shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary.shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shineSweep 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shineSweep {
    0%, 30%   { transform: translateX(-100%); }
    70%, 100% { transform: translateX(100%); }
}

@media (max-width: 880px) {
    #sceneMenu { justify-content: center; padding: 18px; align-items: center; }
    .menu-bg-vignette {
        background:
            linear-gradient(180deg, rgba(5,6,10,0.65) 0%, rgba(5,6,10,0.4) 40%, rgba(5,6,10,0.92) 100%);
    }
    .menu-box {
        width: 100%;
        max-width: 380px;
        padding: 26px 22px 22px;
    }
    .brand { font-size: 38px; margin-bottom: 0; }
    .brand-sub { font-size: 11px; margin-bottom: 14px; }
    .brand-quote { font-size: 13px; margin-bottom: 6px; line-height: 1.55; }
    .brand-author { font-size: 10px; margin-bottom: 18px; }
    #menuName { padding: 12px 14px; font-size: 15px; margin-bottom: 10px; }
    .btn-primary, .btn-ghost { padding: 13px 14px; font-size: 13px; margin-bottom: 8px; }
    .menu-foot { font-size: 9px; margin-top: 14px; letter-spacing: 1.4px; }
}

.menu-box {
    width: 100%;
    max-width: 440px;
    padding: 44px 36px 32px;
    background: linear-gradient(180deg, rgba(17,26,51,0.78), rgba(11,16,32,0.78));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
}

.menu-box::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--neon-cyan), transparent 45%, var(--neon-pink));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    opacity: 0.65;
}

.brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 44px;
    letter-spacing: 4px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(0, 229, 255, 0.3);
    margin-bottom: 6px;
}

.brand-sub {
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.brand-quote {
    color: var(--neon-amber);
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 24px;
    opacity: 0.92;
}

#menuName {
    width: 100%;
    padding: 14px 16px;
    background: rgba(5,6,10,0.7);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    margin-bottom: 14px;
    transition: border-color .15s, box-shadow .15s;
}
#menuName:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(0,229,255,0.2); }

.btn-primary, .btn-ghost, .btn-danger {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .1s, box-shadow .2s, background .15s;
    margin-bottom: 10px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 229, 255, 0.25);
    user-select: none;
}

/* ВАЖНО: интерактивные элементы (слоты/карточки/dynamic data-*) — touch-action: manipulation чтобы
   click гарантированно срабатывал на мобильной без 300мс задержки и без ghost-блоков */
.inv-slot, .hangar-card, .swap-row, .au-row, .au-sellrow, .pg-opt, .ent-opt,
[data-buy], [data-sell], [data-buy-ship], [data-unit], [data-craft], [data-disasm],
[data-dismiss], [data-claim], [data-status], [data-unstatus], [data-daily],
[data-inv], [data-equip], [data-drop], [data-reset], [data-consume],
[data-start], [data-raid], [data-skill], [data-ach] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 229, 255, 0.2);
    user-select: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    color: #021018;
    box-shadow: var(--glow-cyan);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 18px var(--neon-cyan), 0 0 40px var(--neon-pink); }

.btn-ghost {
    background: transparent;
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
}
.btn-ghost:hover { background: rgba(0, 229, 255, 0.1); box-shadow: var(--glow-cyan); }

.btn-danger {
    background: transparent;
    color: var(--neon-pink);
    border: 1px solid var(--neon-pink);
}
.btn-danger:hover { background: rgba(255, 45, 149, 0.12); box-shadow: var(--glow-pink); }

.menu-foot {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 16px;
}

/* ==================== OVERWORLD ==================== */
#sceneOverworld {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at 20% 15%, rgba(178, 107, 255, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 85%, rgba(0, 229, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 60%, rgba(255, 45, 149, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #050b10 0%, #0a0e22 100%);
}

.ow-hud {
    display: flex;
    gap: 12px;
    padding: 14px;
    align-items: stretch;
    flex-wrap: wrap;
    z-index: 3;
}

.hud-panel {
    background: linear-gradient(180deg, rgba(17,26,51,0.82), rgba(11,16,32,0.82));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}

.hud-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 340px;
    flex: 1;
    max-width: 520px;
}

.hud-portrait {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    flex-shrink: 0;
}

.hud-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.hud-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.4px;
    color: var(--neon-cyan);
    text-shadow: 0 0 6px rgba(0,229,255,0.4);
}

.hud-bar-row { display: flex; align-items: center; gap: 8px; }
.hud-bar-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
    width: 24px;
}
.hud-bar {
    flex: 1;
    height: 8px;
    background: rgba(5,6,10,0.8);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.hud-bar-fill { height: 100%; transition: width .3s ease; position: relative; }
.hud-bar-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(200%); } }

.hud-bar-fill.hp { width: 100%; background: linear-gradient(90deg, #ff2d95, #ff7a4f); box-shadow: 0 0 6px #ff2d95; }
.hud-bar-fill.xp { width: 0%; background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan)); box-shadow: 0 0 6px var(--neon-green); }

.hud-bar-val {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--text-muted);
    min-width: 64px;
    text-align: right;
}

.hud-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}
.hud-side .hud-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.hud-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1.3px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.hud-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px rgba(0,229,255,0.45);
}

.hud-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}
.hud-actions .btn-ghost, .hud-actions .btn-danger {
    margin: 0;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.ow-wrap { flex: 1; position: relative; overflow: hidden; }

#owMap { width: 100%; height: 100%; display: block; }

.ow-tooltip {
    position: absolute;
    padding: 8px 10px;
    background: rgba(11,16,32,0.92);
    border: 1px solid var(--neon-cyan);
    border-radius: var(--radius-sm);
    box-shadow: var(--glow-cyan);
    font-size: 12px;
    color: var(--text);
    pointer-events: none;
    z-index: 4;
    transform: translate(-50%, -110%);
    white-space: nowrap;
}
.ow-tooltip strong {
    color: var(--neon-cyan);
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
}
.ow-tooltip .tt-sub { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* SVG node styling */
.map-link { stroke: rgba(122, 138, 168, 0.35); stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.map-link.reach { stroke: var(--neon-cyan); stroke-dasharray: none; }

.map-node circle.bg {
    transition: r .2s, stroke-width .2s;
    cursor: pointer;
}
.map-node.reach circle.bg { cursor: pointer; }
.map-node.blocked circle.bg { cursor: not-allowed; opacity: 0.45; }
.map-node:hover circle.bg { filter: brightness(1.25); }

.map-node .label {
    fill: var(--text);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-anchor: middle;
    pointer-events: none;
    text-shadow: 0 0 4px #000;
}

.map-hero circle { fill: var(--neon-cyan); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 8px var(--neon-cyan)); }
.map-hero .ping {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 2;
    animation: heroPing 1.6s ease-out infinite;
}
@keyframes heroPing {
    0% { r: 18; opacity: 0.9; }
    100% { r: 42; opacity: 0; }
}

/* ==================== COMBAT ==================== */
#sceneCombat {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 45, 149, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(178, 107, 255, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #08030f 0%, #120626 100%);
}

.cb-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(5,6,10,0.5);
    border-bottom: 1px solid var(--border-glow);
}

.cb-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cb-turn-queue {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cb-turn-card {
    padding: 4px 10px;
    background: rgba(11,16,32,0.8);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.cb-turn-card.hero { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cb-turn-card.enemy { border-color: var(--neon-pink); color: var(--neon-pink); }
.cb-turn-card.active {
    transform: scale(1.15);
    box-shadow: var(--glow-cyan);
    background: rgba(0,229,255,0.15);
}
.cb-turn-card.enemy.active { box-shadow: var(--glow-pink); background: rgba(255,45,149,0.15); }

.cb-field {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    padding: 28px 32px;
    align-items: center;
    justify-items: center;
    min-height: 0;
}

@media (max-width: 720px) {
    .cb-field { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
    .cb-vs { display: none; }
}

.cb-side {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cb-vs {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 4px;
    color: var(--neon-amber);
    text-shadow: 0 0 14px var(--neon-amber);
    animation: vsPulse 1.8s ease-in-out infinite;
}
@keyframes vsPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

.unit-card {
    width: 100%;
    background: linear-gradient(180deg, rgba(17,26,51,0.88), rgba(11,16,32,0.88));
    border: 1.5px solid var(--neon-cyan);
    border-radius: var(--radius-lg);
    padding: 14px 14px 16px;
    box-shadow: var(--glow-cyan);
    position: relative;
    transition: transform .2s, box-shadow .2s;
}
.unit-card.enemy { border-color: var(--neon-pink); box-shadow: var(--glow-pink); }
.unit-card.acting {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 24px var(--neon-cyan), 0 0 60px var(--neon-cyan);
}
.unit-card.enemy.acting { box-shadow: 0 0 24px var(--neon-pink), 0 0 60px var(--neon-pink); }
.unit-card.dead { opacity: 0.35; filter: grayscale(0.8); }
.unit-card.hit { animation: unitHit 0.45s ease; }
@keyframes unitHit {
    0% { transform: translateX(0); }
    25% { transform: translateX(-12px); filter: brightness(1.6); }
    50% { transform: translateX(8px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

.unit-portrait-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #05070c;
    margin-bottom: 12px;
}
.unit-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.unit-portrait-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(5,6,10,0.85) 100%);
    pointer-events: none;
}

.unit-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: var(--neon-cyan);
    text-shadow: 0 0 6px rgba(0,229,255,0.5);
    text-align: center;
    margin-bottom: 4px;
}
.enemy .unit-name { color: var(--neon-pink); text-shadow: 0 0 6px rgba(255,45,149,0.5); }

.unit-sub {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

.unit-hp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.unit-hp-bar {
    flex: 1;
    height: 10px;
    background: rgba(5,6,10,0.85);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    overflow: hidden;
}
.unit-hp-fill { height: 100%; background: linear-gradient(90deg, #ff2d95, #ff7a4f); transition: width .4s ease; box-shadow: 0 0 6px rgba(255,45,149,0.6); }
.unit-hp-text { font-family: var(--font-display); font-size: 11px; color: var(--text); min-width: 70px; text-align: right; }

.unit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.unit-stat {
    padding: 6px 4px;
    background: rgba(5,6,10,0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    text-align: center;
}
.unit-stat-label {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.unit-stat-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-top: 2px;
}
.unit-stat-val.buff { color: var(--neon-green); text-shadow: 0 0 4px var(--neon-green); }

.cb-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 18px;
    background: rgba(5,6,10,0.5);
    border-top: 1px solid var(--border-glow);
}

.cb-btn {
    padding: 14px 10px;
    background: rgba(11,16,32,0.85);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
}
.cb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cb-btn.cb-attack { border-color: var(--neon-pink); color: var(--neon-pink); }
.cb-btn.cb-attack:hover:not(:disabled) { background: rgba(255,45,149,0.15); box-shadow: var(--glow-pink); }
.cb-btn.cb-defend { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cb-btn.cb-defend:hover:not(:disabled) { background: rgba(0,229,255,0.15); box-shadow: var(--glow-cyan); }
.cb-btn.cb-skill { border-color: var(--neon-violet); color: var(--neon-violet); }
.cb-btn.cb-skill:hover:not(:disabled) { background: rgba(178,107,255,0.15); box-shadow: var(--glow-violet); }
.cb-btn.cb-flee { border-color: var(--text-muted); color: var(--text-muted); }
.cb-btn.cb-flee:hover:not(:disabled) { background: rgba(122,138,168,0.1); }

.cb-log {
    height: 100px;
    overflow-y: auto;
    padding: 10px 18px;
    background: rgba(5,6,10,0.5);
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    display: flex;
    flex-direction: column-reverse;
}
.cb-log-entry {
    padding: 4px 8px;
    border-left: 2px solid var(--neon-cyan);
    margin-bottom: 3px;
    animation: logIn 0.3s ease;
}
.cb-log-entry.enemy { border-color: var(--neon-pink); }
.cb-log-entry.sys { border-color: var(--neon-amber); color: var(--neon-amber); }
@keyframes logIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

/* floating damage numbers */
.dmg-pop {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    color: var(--neon-pink);
    text-shadow: 0 0 12px var(--neon-pink), 0 2px 2px #000;
    pointer-events: none;
    animation: dmgPop 1s ease-out forwards;
}
.dmg-pop.heal { color: var(--neon-green); text-shadow: 0 0 12px var(--neon-green), 0 2px 2px #000; }
@keyframes dmgPop {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
    30% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(0.9); }
}

/* ==================== MODAL ==================== */
.modal {
    position: fixed; inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal[hidden] { display: none; }
.modal-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(0, 229, 255, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, rgba(2, 4, 10, 0.78) 0%, rgba(2, 4, 10, 0.92) 100%),
        url("../assets/bg_atmosphere.jpg") center / cover no-repeat;
    backdrop-filter: blur(8px);
}
.modal-box {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(17,26,51,0.95), rgba(11,16,32,0.95));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.08);
    animation: modalIn 0.25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.modal-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bonus-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    padding: 6px 16px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    background: linear-gradient(90deg, rgba(255, 225, 74, 0.3), rgba(255, 107, 74, 0.3));
    border: 1px solid var(--neon-amber);
    border-radius: 20px;
    color: var(--neon-amber);
    text-shadow: 0 0 8px var(--neon-amber);
    box-shadow: 0 0 18px rgba(255, 225, 74, 0.4);
    animation: bonusPulse 2s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}
/* На мобилке HUD занимает верх — убираем баннер вниз чтобы не перекрывал HP/XP */
@media (max-width: 720px) {
    .bonus-banner {
        top: auto;
        bottom: 80px;
        font-size: 10px;
        padding: 4px 12px;
    }
}
@keyframes bonusPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 225, 74, 0.4); }
    50% { box-shadow: 0 0 26px rgba(255, 225, 74, 0.7); }
}

.modal-close {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    font-size: 24px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 45, 149, 0.3);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}
.modal-close:hover { border-color: var(--neon-pink); color: var(--neon-pink); }
.modal-close:active { background: rgba(255, 45, 149, 0.2); border-color: var(--neon-pink); }
.modal-body { padding: 20px; overflow-y: auto; }

/* inventory grid */
.inv-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
}
@media (max-width: 560px) { .inv-layout { grid-template-columns: 1fr; } }

.inv-portrait {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    object-fit: cover;
    aspect-ratio: 3/4;
}
.inv-right { display: flex; flex-direction: column; gap: 12px; }

.eq-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.eq-slot {
    background: rgba(5,6,10,0.55);
    border: 1.5px dashed var(--border-soft);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.eq-slot.filled { border-style: solid; }
.eq-slot.filled.common { border-color: var(--text-muted); }
.eq-slot.filled.rare { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,229,255,0.25); }
.eq-slot.filled.epic { border-color: var(--neon-violet); box-shadow: 0 0 10px rgba(178,107,255,0.3); }
.eq-slot.filled.legendary { border-color: var(--neon-green); box-shadow: var(--glow-green); }
.eq-slot:hover { transform: translateY(-2px); }

.eq-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.eq-img {
    width: 52px; height: 52px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(5,6,10,0.8);
}
.eq-ph { font-size: 24px; color: var(--text-muted); opacity: 0.5; margin-top: 8px; }
.eq-name { font-size: 11px; color: var(--text); line-height: 1.15; }

.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.inv-slot {
    position: relative;
    aspect-ratio: 1;
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.inv-slot:hover { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,229,255,0.3); transform: translateY(-2px); }
.inv-slot.empty { opacity: 0.25; cursor: default; pointer-events: none; }
.inv-drop-btn {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px; padding: 0;
    background: rgba(5,8,18,0.85);
    border: 1px solid var(--neon-pink);
    border-radius: 50%;
    color: var(--neon-pink);
    font: 700 14px/1 var(--font-display);
    cursor: pointer;
    opacity: 0.85;
    transition: all .15s ease;
    z-index: 2;
}
.inv-drop-btn:hover { opacity: 1; background: var(--neon-pink); color: #000; box-shadow: 0 0 8px var(--neon-pink); }
.inv-slot.rare { border-color: rgba(0,229,255,0.6); }
.inv-slot.epic { border-color: rgba(178,107,255,0.7); }
.inv-slot.legendary { border-color: rgba(57,255,20,0.7); box-shadow: 0 0 10px rgba(57,255,20,0.3); }
.inv-img { width: 60%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.inv-emoji { font-size: 26px; }
.inv-name { font-size: 10px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.inv-slot.rare .inv-name { color: var(--neon-cyan); }
.inv-slot.epic .inv-name { color: var(--neon-violet); }
.inv-slot.legendary .inv-name { color: var(--neon-green); }

/* quest list */
.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest-card {
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: rgba(5,6,10,0.5);
}
.quest-card.done { border-color: var(--neon-green); opacity: 0.7; }
.quest-title {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.quest-desc { font-size: 13px; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.quest-prog { font-family: var(--font-display); font-size: 11px; color: var(--neon-green); }
.quest-reward { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* result modal */
.result-box { text-align: center; padding: 10px; }
.result-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.result-title.win { background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan)); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(57,255,20,0.4); }
.result-title.lose { color: var(--neon-pink); text-shadow: 0 0 14px var(--neon-pink); }
.result-rewards { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.result-reward {
    padding: 10px 14px;
    background: rgba(0,229,255,0.1);
    border-left: 2px solid var(--neon-cyan);
    text-align: left;
    border-radius: 4px;
    font-size: 13px;
}
.result-reward.loot { background: rgba(57,255,20,0.1); border-color: var(--neon-green); }

/* ==================== WORLD (cosmos + planet surface) ==================== */
#sceneWorld {
    display: block;
    background: #05070d;
    overflow: hidden;
}
#worldCanvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    cursor: crosshair;
}

.world-hud {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; gap: 12px; align-items: stretch;
    flex-wrap: wrap; z-index: 5;
    pointer-events: none;
}
.world-hud > * { pointer-events: auto; }

.whud-panel {
    background: linear-gradient(180deg, rgba(11,16,32,0.85), rgba(5,6,10,0.85));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.whud-hero {
    display: flex; gap: 12px; align-items: center;
    min-width: 320px; max-width: 480px; flex: 1;
}
.whud-portrait {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    flex-shrink: 0;
}
.whud-info { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.whud-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.whud-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px; letter-spacing: 1.3px;
    color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,229,255,0.4);
    display: flex; flex-direction: column; gap: 2px;
}
.whud-status {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 1px;
    color: var(--neon-amber);
    text-shadow: 0 0 6px rgba(255,179,71,0.7);
    font-weight: 600;
}
.whud-level {
    font-family: var(--font-display); font-size: 11px;
    letter-spacing: 1.2px; color: var(--neon-amber);
}
.whud-bar-row { display: flex; align-items: center; gap: 6px; }
.whud-bar-label {
    font-family: var(--font-display); font-size: 9px;
    letter-spacing: 1px; color: var(--text-muted);
    width: 20px;
}
.whud-bar {
    flex: 1; height: 7px;
    background: rgba(5,6,10,0.8);
    border: 1px solid var(--border-soft);
    border-radius: 4px; overflow: hidden;
}
.whud-bar-fill { height: 100%; transition: width .3s; }
.whud-bar-fill.hp { background: linear-gradient(90deg, #ff2d95, #ff7a4f); box-shadow: 0 0 6px #ff2d95; }
.whud-bar-fill.xp { background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan)); box-shadow: 0 0 6px var(--neon-green); }
.whud-bar-val {
    font-family: var(--font-display); font-size: 10px;
    color: var(--text-muted); min-width: 60px; text-align: right;
}

.whud-loc {
    min-width: 220px; display: flex; flex-direction: column;
    justify-content: center; gap: 8px;
}
.whud-breadcrumb {
    font-family: var(--font-display); font-size: 13px;
    letter-spacing: 1.5px; color: var(--text);
    text-transform: uppercase;
}
.whud-stats-row { display: flex; gap: 12px; }
.whud-stats-row > div { display: flex; flex-direction: column; align-items: flex-start; }
.whud-stats-row .whud-label {
    font-family: var(--font-display); font-size: 9px;
    letter-spacing: 1.2px; color: var(--text-muted);
    text-transform: uppercase;
}
.whud-stats-row b {
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px; color: var(--neon-cyan);
    text-shadow: 0 0 4px rgba(0,229,255,0.4);
}
.whud-ton {
    cursor: pointer;
    padding: 0 6px; border-left: 1px solid rgba(255,225,74,0.25);
    transition: background .15s;
    touch-action: manipulation;
}
.whud-ton:hover, .whud-ton:active { background: rgba(255,225,74,0.08); }
.whud-ton .whud-label { color: #ffe14a; }
.whud-ton b { color: #ffe14a; text-shadow: 0 0 6px rgba(255,225,74,0.45); }
.whud-ton.connected .whud-label::after { content: ""; }

/* ===== Встроенная строка QUANTA + TON + Осколки (под HP/XP) ===== */
.whud-money-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px; padding-left: 0;
}
.whud-money-inline {
    display: flex; gap: 10px; align-items: center;
    font-family: var(--font-display);
}
.whud-m-cell {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 2px 8px; border-radius: 4px;
    background: rgba(0,229,255,0.06);
    border: 1px solid rgba(0,229,255,0.2);
}
.whud-m-label { font-size: 8px; letter-spacing: 1.2px; color: var(--text-muted); text-transform: uppercase; }
.whud-m-cell b {
    font-size: 13px; font-weight: 700; color: var(--neon-cyan);
    text-shadow: 0 0 4px rgba(0,229,255,0.4);
}
.whud-m-ton { cursor: pointer; border-color: rgba(255,225,74,0.3); background: rgba(255,225,74,0.06); }
.whud-m-ton .whud-m-label { color: #ffe14a; }
.whud-m-ton b { color: #ffe14a; text-shadow: 0 0 5px rgba(255,225,74,0.5); }
.whud-m-ton.connected .whud-m-label::after { content: ""; }

/* ===== Осколки Ионы — компактный ряд, справа в money-row ===== */
.shard-hud {
    display: flex; gap: 3px;
    align-items: center;
    margin-left: auto;  /* прижат вправо в flex-контейнере money-row */
}
.shard-hud.full::before {
    content: "◆ НОСИТЕЛЬ"; order: -1; margin-right: 6px;
    font-family: var(--font-display); font-size: 8px; letter-spacing: 1.5px;
    color: var(--neon-amber); text-shadow: 0 0 6px rgba(255,225,74,0.55);
    white-space: nowrap;
}
.shard-cell {
    width: 18px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px;
    background: rgba(5,6,10,0.4);
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,0.25);
    transition: all 0.25s ease;
    position: relative;
    cursor: help;
    flex-shrink: 0;
}
.shard-cell.got {
    color: #fff;
    border-color: var(--sc-color, #00e5ff);
    background: linear-gradient(180deg, rgba(5,6,10,0.2), color-mix(in srgb, var(--sc-color, #00e5ff) 18%, transparent));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--sc-color, #00e5ff) 35%, transparent),
        0 0 10px color-mix(in srgb, var(--sc-color, #00e5ff) 55%, transparent);
    text-shadow: 0 0 5px var(--sc-color, #00e5ff);
}
.shard-cell.got.has-action { cursor: pointer; }
.shard-cell.got.has-action::after {
    content: ""; position: absolute; top: -2px; right: -2px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sc-color, #00e5ff);
    box-shadow: 0 0 6px var(--sc-color, #00e5ff);
    animation: actionDot 1.6s ease-in-out infinite;
}
@keyframes actionDot { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.shard-cell.got.has-action:hover { transform: scale(1.15); }
.shard-cell.flash { animation: shardFlash 0.8s ease-out; }
@keyframes shardFlash {
    0%   { transform: scale(1);   filter: brightness(1); }
    25%  { transform: scale(1.5); filter: brightness(2.2); }
    60%  { transform: scale(1.15); filter: brightness(1.4); }
    100% { transform: scale(1);   filter: brightness(1); }
}
/* mobile: компактный ряд — QUANTA/TON + осколки в ОДНОЙ строке */
@media (max-width: 780px) {
    .whud-money-row { gap: 6px; flex-wrap: nowrap; align-items: center; }
    .whud-money-inline { gap: 4px; flex: 0 0 auto; }
    .whud-m-cell { padding: 1px 5px; gap: 3px; }
    .whud-m-cell b { font-size: 10px; }
    .whud-m-label { font-size: 7px; letter-spacing: 0.8px; }
    .shard-hud { gap: 2px; flex: 0 1 auto; }
    .shard-cell { width: 13px; height: 14px; font-size: 7px; border-radius: 2px; }
    .shard-hud.full::before { display: none; }
}

/* Mobile-only компактная плашка QUANTA + TON под HUD */
.mobile-money-bar {
    display: none;  /* на десктопе скрыта */
    position: absolute;
    top: 96px; left: 8px;  /* ниже плашки HP/XP+shard-hud, чтобы не налезало */
    gap: 6px;
    padding: 5px 8px;
    background: rgba(5,6,10,0.85);
    border: 1px solid rgba(0,229,255,0.3);
    border-radius: 8px;
    z-index: 5;
    font-family: var(--font-display);
}
.mmb-cell {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0 6px;
}
.mmb-label {
    font-size: 8px; letter-spacing: 1.2px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.mmb-cell b {
    font-size: 13px; color: var(--neon-cyan);
    text-shadow: 0 0 4px rgba(0,229,255,0.4);
}
.mmb-ton {
    border-left: 1px solid rgba(255,225,74,0.3);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255,225,74,0.2);
}
.mmb-ton .mmb-label { color: #ffe14a; }
.mmb-ton b { color: #ffe14a; text-shadow: 0 0 6px rgba(255,225,74,0.45); }
.mmb-ton.connected .mmb-label::after { content: ""; }
@media (max-width: 720px) {
    .mobile-money-bar { display: flex; }
}

.whud-portrait-btn {
    padding: 0; border: 0; background: transparent; cursor: pointer;
    flex-shrink: 0;
}
.whud-portrait-btn:hover .whud-portrait,
.whud-portrait-btn:active .whud-portrait {
    filter: brightness(1.2);
    box-shadow: var(--glow-cyan), 0 0 24px rgba(0,229,255,0.8);
}

.whud-icons {
    display: flex; gap: 8px; margin-left: auto;
    align-items: center; flex-wrap: nowrap;
    align-self: flex-start;  /* прижать к верхнему краю HUD, как плашка слева */
    margin-top: 10px;        /* лёгкий отступ чтобы круги совпадали с именем персонажа */
}
.whud-icon.whud-toggle { display: none !important; }  /* на десктопе полностью скрыта */
/* Badge — красная точка с числом (опционально) в правом верхнем углу */
.whud-icon { position: relative; }
.whud-icon.has-badge::after {
    content: attr(data-badge);
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px; padding: 0 5px;
    background: var(--neon-pink, #ff2d95); color: #fff;
    border: 1.5px solid var(--bg, #0a0814);
    border-radius: 10px;
    font-family: var(--font-display, sans-serif); font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 6px rgba(255,45,149,0.6);
    animation: whudBadgePulse 2s ease-in-out infinite;
    z-index: 2;
    line-height: 1;
}
@keyframes whudBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.whud-icon.has-badge[data-badge=""]::after,
.whud-icon.has-badge:not([data-badge])::after { content: ""; min-width: 10px; height: 10px; padding: 0; }
.whud-icon {
    width: 52px; height: 52px;
    background: rgba(11,16,32,0.85);
    border: 1.5px solid var(--neon-cyan);
    border-radius: 50%;
    color: var(--neon-cyan);
    font-size: 18px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
}
.whud-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px var(--neon-cyan)); }
.whud-icon:hover img { filter: drop-shadow(0 0 10px var(--neon-cyan)) brightness(1.3); }
.whud-ic-fb { font-size: 22px; line-height: 1; }
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.whud-icon:hover, .whud-icon:active {
    background: rgba(0,229,255,0.15);
    box-shadow: var(--glow-cyan);
    transform: translateY(-1px);
}

/* Gender pick */
.gender-pick {
    display: flex; gap: 10px;
    margin-bottom: 14px;
}
.gender-card {
    flex: 1;
    background: rgba(5,6,10,0.7);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 8px 4px 6px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 11px; letter-spacing: 1.5px;
    cursor: pointer;
    transition: all .15s;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.gender-card img {
    width: 100%; max-width: 80px; aspect-ratio: 1;
    object-fit: cover; object-position: top center;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: rgba(5,6,10,0.5);
    transition: all .15s;
}
.gender-card:hover { border-color: var(--neon-cyan); color: var(--text); }
.gender-card.selected {
    border-color: var(--neon-cyan); color: var(--neon-cyan);
    box-shadow: var(--glow-cyan);
}
.gender-card.selected img { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0,229,255,0.5); }

.menu-online {
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.4px;
    margin-top: 10px;
    text-align: center;
    text-transform: uppercase;
}
.menu-online .online-num {
    color: var(--neon-green);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

/* Daily + Achievements */
.daily-card {
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
}
.daily-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.daily-desc { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.8px; color: var(--text); }
.daily-prog-val { font-family: var(--font-display); font-size: 11px; color: var(--neon-amber); }
.daily-bar { height: 5px; background: rgba(11,16,32,0.9); border-radius: 3px; overflow: hidden; }
.daily-bar-fill { height: 100%; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green)); transition: width .3s; }
.daily-badge.done { display: inline-block; padding: 4px 10px; font-family: var(--font-display); font-size: 10px; color: var(--text-muted); background: rgba(5,6,10,0.5); border: 1px solid var(--border-soft); border-radius: 4px; letter-spacing: 1px; }

.ach-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ach-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    transition: all .15s;
}
.ach-card.got { border-color: var(--neon-green); box-shadow: 0 0 8px rgba(57,255,20,0.25); }
.ach-card.locked { opacity: 0.5; }
.ach-icon { font-size: 22px; width: 36px; text-align: center; }
.ach-name { font-family: var(--font-display); font-size: 12px; color: var(--text); letter-spacing: 0.6px; }
.ach-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ach-status { font-family: var(--font-display); font-size: 18px; color: var(--neon-green); }
.ach-card.is-status {
    border-color: var(--neon-amber);
    box-shadow: 0 0 14px rgba(255,179,71,0.4);
    background: rgba(255,179,71,0.08);
}
.ach-card .btn-primary.small, .ach-card .btn-ghost.small {
    font-size: 10px; padding: 4px 8px;
}

/* Leaderboard rows */
.lb-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 12px;
}
.lb-row.me { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0,229,255,0.3); }
.lb-rank { width: 32px; color: var(--neon-amber); font-weight: 700; text-align: center; }
.lb-name { flex: 1; color: var(--text); letter-spacing: 0.5px; }
.lb-stats { display: flex; gap: 10px; color: var(--text-muted); font-size: 11px; }
.lb-stats span { white-space: nowrap; }

/* Mobile layout — компактный HUD, иконки в ряд сверху, минимапа ниже */
@media (max-width: 720px) {
    .world-hud {
        top: 8px; left: 8px; right: 8px;
        gap: 6px; padding: 0;
        flex-wrap: nowrap; align-items: flex-start;
    }
    .whud-loc { display: none; }
    .whud-hero {
        min-width: 0; max-width: none; flex: 1 1 auto;
        gap: 6px; padding: 5px 62px 5px 8px; /* правый padding 62px — чтобы кнопка ≡ не перекрывала HP-бар */
    }
    .whud-portrait-btn { align-self: center; }
    .whud-portrait { width: 34px; height: 34px; border-width: 1.5px; }
    .whud-bar-val { min-width: 38px; font-size: 8px; }
    .whud-bar { height: 5px; }
    .whud-bar-label { font-size: 8px; width: 14px; }
    .whud-name { font-size: 11px; letter-spacing: 1px; }
    .whud-level { font-size: 9px; }
    .whud-info { gap: 2px; }
    .whud-row { margin-bottom: 0; }
    .whud-icons {
        position: absolute;  /* выводим кнопку ≡ из flex-ряда в правый угол */
        top: 10px; right: 10px;
        flex-direction: row;
        gap: 5px;
        flex: 0 0 auto;
        z-index: 10;
    }
    .whud-icon { width: 44px; height: 44px; font-size: 13px; padding: 4px; }
    .whud-ic-fb { font-size: 18px; }
    .world-hint { display: none; }
    /* свернуть HUD в дропдаун по ≡ */
    .whud-icon.whud-toggle { display: flex !important; }
    .whud-icons:not(.open) > .whud-icon:not(.whud-toggle) { display: none; }
    .whud-icons.open {
        position: absolute;
        right: 8px; top: 62px;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        background: rgba(11,16,32,0.95);
        border: 1.5px solid var(--neon-cyan);
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,229,255,0.35);
        z-index: 12;
    }
    .whud-icons.open .whud-toggle { border-color: var(--neon-pink); color: var(--neon-pink); }
}

.world-prompt {
    position: absolute; bottom: 72px; left: 50%;
    transform: translateX(-50%);
    padding: 14px 26px;
    background: rgba(11,16,32,0.92);
    border: 1px solid var(--neon-cyan);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-cyan);
    font-family: var(--font-display);
    font-size: 13px; letter-spacing: 1.5px;
    color: var(--text); z-index: 6;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    animation: promptIn .2s ease, promptPulse 1.6s ease-in-out infinite;
    transition: transform .1s, box-shadow .1s;
}
.world-prompt:active { transform: translateX(-50%) scale(0.96); }
@keyframes promptPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,229,255,0.45); }
    50%      { box-shadow: 0 0 24px rgba(0,229,255,0.85); }
}
@media (max-width: 720px) {
    .world-prompt { bottom: 180px; padding: 18px 28px; font-size: 14px; }
}
.world-prompt b { color: var(--neon-cyan); text-shadow: 0 0 6px var(--neon-cyan); }
.world-prompt .prompt-lock { color: var(--neon-orange); }
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

.world-hint {
    position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 10px; letter-spacing: 1.4px;
    color: var(--text-muted); text-transform: uppercase;
    z-index: 5; pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

/* Skill tree */
.sk-list { display: flex; flex-direction: column; gap: 10px; }
.sk-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: rgba(5,6,10,0.6);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-md);
}
.sk-icon { font-size: 28px; width: 36px; text-align: center; }
.sk-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 1px; color: var(--text); }
.sk-desc { font-size: 11px; color: var(--text-muted); margin: 4px 0; }
.sk-bar { display: flex; gap: 3px; margin-top: 4px; }
.sk-pip { width: 20px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 2px; transition: all .2s; }
.sk-max { font-family: var(--font-display); font-size: 11px; color: var(--neon-green); letter-spacing: 1px; }
.sk-locked { font-size: 10px; color: var(--text-muted); opacity: 0.6; }

/* Leaderboard — online section + zone tags */
.lb-section-title {
    font-family: var(--font-display);
    font-size: 11px; letter-spacing: 2px;
    color: var(--neon-cyan);
    margin-bottom: 8px;
}
.lb-online-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; max-height: 30vh; overflow-y: auto; }
.lb-online-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: rgba(57,255,20,0.08);
    border: 1px solid rgba(57,255,20,0.25);
    border-radius: var(--radius-sm);
}
.lb-online-row.me { border-color: var(--neon-cyan); background: rgba(0,229,255,0.1); }
.lb-online-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
    animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.2); }
}
.lb-online-name { flex: 1; font-family: var(--font-display); font-size: 12px; color: var(--text); letter-spacing: 1px; }
.lb-online-loc  { font-size: 11px; color: var(--neon-amber); }
.lb-zone { font-size: 10px; color: var(--neon-green); letter-spacing: 1px; }
.lb-offline { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; opacity: 0.6; }
.lb-recent-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: rgba(255,179,71,0.06);
    border: 1px solid rgba(255,179,71,0.2);
    border-radius: var(--radius-sm);
}
.lb-recent-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--neon-amber);
    opacity: 0.7;
}
.lb-recent-ago { font-size: 10px; color: var(--neon-amber); opacity: 0.8; letter-spacing: 1px; }

/* Zone chat */
.zone-chat { position: fixed; left: 16px; bottom: 16px; z-index: 55; }
.zone-chat-toggle {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(11,16,32,0.9); border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan); font-size: 18px; cursor: pointer;
    box-shadow: 0 0 8px rgba(0,229,255,0.5);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 229, 255, 0.3);
    user-select: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}
.zone-chat-toggle:hover { background: var(--neon-cyan); color: #000; }
.zone-chat-toggle.unread {
    background: var(--neon-pink);
    color: #fff;
    border-color: var(--neon-pink);
    box-shadow: 0 0 14px rgba(255,45,149,0.6);
    animation: chatPulse 1.6s ease-in-out infinite;
}
@keyframes chatPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.zone-chat-toggle.open {
    background: rgba(255, 45, 149, 0.15);
    border-color: var(--neon-pink);
    color: var(--neon-pink);
    font-size: 26px;
    box-shadow: 0 0 10px rgba(255, 45, 149, 0.6);
}
.zone-chat-box {
    position: absolute; left: 0; bottom: 54px;
    width: 320px; max-width: calc(100vw - 32px);
    background: rgba(11,16,32,0.95);
    border: 1.5px solid var(--neon-cyan);
    border-radius: var(--radius-md);
    box-shadow: 0 0 18px rgba(0,229,255,0.35);
    display: flex; flex-direction: column;
}
/* КРИТИЧНО: display:flex выше перекрывает user-agent [hidden]{display:none}.
   Принудительно прячем когда hidden атрибут стоит. */
.zone-chat-box[hidden] { display: none !important; }
.zone-chat[hidden] { display: none !important; }
.zone-chat-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-display); font-size: 12px; letter-spacing: 1.5px; color: var(--neon-cyan); }
.zone-chat-close {
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); font-size: 22px; cursor: pointer;
    width: 36px; height: 36px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 45, 149, 0.3);
    user-select: none;
}
.zone-chat-close:active { background: rgba(255, 45, 149, 0.25); color: var(--neon-pink); border-color: var(--neon-pink); }
.zone-chat-msgs { max-height: 240px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column-reverse; gap: 4px; font-size: 12px; }
.zone-chat-msg { color: var(--text); line-height: 1.4; }
.zone-chat-msg b { color: var(--neon-amber); }
.zone-chat-form { display: flex; border-top: 1px solid var(--border-soft); }
.zone-chat-form input { flex: 1; padding: 8px 12px; background: transparent; border: none; color: var(--text); font-size: 13px; outline: none; }
.zone-chat-form button { padding: 8px 14px; background: var(--neon-cyan); color: #000; border: none; cursor: pointer; font-weight: 700; font-size: 14px; }
@media (max-width: 720px) {
    .zone-chat { left: 10px; bottom: 10px; }
    .zone-chat-toggle { width: 40px; height: 40px; font-size: 16px; }
    .zone-chat-box { width: calc(100vw - 20px); }
}

/* PvP exit button — снизу по центру, чтобы не перекрывать хинт сверху */
.pvp-exit-btn {
    position: fixed;
    left: 50%; bottom: 18px; top: auto; transform: translateX(-50%);
    padding: 10px 22px;
    background: rgba(11,16,32,0.9);
    border: 2px solid var(--neon-pink);
    color: var(--neon-pink);
    font-family: var(--font-display); font-size: 12px; letter-spacing: 1.5px;
    border-radius: 24px;
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 0 10px rgba(255,45,149,0.5);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 45, 149, 0.3);
}
.pvp-exit-btn:hover, .pvp-exit-btn:active { background: var(--neon-pink); color: #000; }

/* PvP fire button — ТОЛЬКО на мобильной И только когда JS убрал hidden атрибут */
.pvp-fire-btn { display: none !important; }
.pvp-fire-btn[hidden] { display: none !important; }
@media (max-width: 720px) {
    /* На мобилке показываем ТОЛЬКО если JS снял hidden (т.е. реально в PvP) */
    .pvp-fire-btn:not([hidden]) {
        display: block !important;
        position: fixed;
        right: 16px; bottom: 150px;
        width: 72px; height: 72px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,45,149,0.6), rgba(11,16,32,0.9) 70%);
        border: 3px solid var(--neon-pink);
        color: #fff;
        font-size: 32px;
        cursor: pointer;
        z-index: 60;
        box-shadow: 0 0 20px var(--neon-pink), inset 0 0 20px rgba(255,45,149,0.4);
        animation: firePulse 1.5s ease-in-out infinite;
        -webkit-user-select: none; user-select: none;
        touch-action: manipulation;
    }
    .pvp-fire-btn:active { transform: scale(0.92); box-shadow: 0 0 40px var(--neon-pink); }
}
@keyframes firePulse {
    0%, 100% { box-shadow: 0 0 20px var(--neon-pink), inset 0 0 20px rgba(255,45,149,0.4); }
    50%      { box-shadow: 0 0 35px var(--neon-pink), inset 0 0 30px rgba(255,45,149,0.6); }
}

/* PvP arena list */
.pvp-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.pvp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.pvp-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid var(--neon-cyan); flex: 0 0 34px;
    box-shadow: 0 0 8px currentColor;
}
.pvp-name { font-family: var(--font-display); font-size: 13px; color: var(--text); letter-spacing: 1px; }
.pvp-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* boss intro overlay — letterbox fade-in */
.cb-boss-intro {
    position: absolute; inset: 0;
    z-index: 55;
    display: flex; flex-direction: column;
    pointer-events: none;
    animation: bossIntroFade 3.2s ease-out forwards;
}
.cb-boss-bar {
    flex: 1;
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.85) 100%);
    animation: bossBarSlide 0.6s ease-out;
}
.cb-boss-bar-bot { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.85) 100%); }
.cb-boss-body {
    background: rgba(5,6,10,0.7);
    backdrop-filter: blur(6px);
    padding: 30px 10px;
    text-align: center;
    border-top: 2px solid var(--neon-pink);
    border-bottom: 2px solid var(--neon-pink);
    box-shadow: 0 0 40px rgba(255,45,149,0.4);
    animation: bossBodySlide 0.5s ease-out;
}
.cb-boss-sub {
    font-family: var(--font-display);
    font-size: 13px; letter-spacing: 4px;
    color: var(--neon-pink);
    text-shadow: 0 0 8px var(--neon-pink);
}
.cb-boss-name {
    font-family: var(--font-display);
    font-size: 42px; font-weight: 800; letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 18px var(--neon-pink), 0 0 40px var(--neon-violet);
    margin: 6px 0;
}
@keyframes bossBarSlide {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
@keyframes bossBodySlide {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes bossIntroFade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 720px) {
    .cb-boss-name { font-size: 28px; }
}

/* consumable slot в combat HUD — bottom-right */
.cb-consumable {
    position: absolute;
    right: 20px; bottom: 60px;
    width: 68px; height: 68px;
    padding: 0;
    background: rgba(5,6,10,0.85);
    border: 2px solid var(--neon-cyan);
    border-radius: 12px;
    box-shadow: var(--glow-cyan);
    cursor: pointer;
    z-index: 50;
    font-family: var(--font-display);
    display: flex; align-items: center; justify-content: center;
}
.cb-consumable .cb-cons-inner {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.cb-consumable .cb-cons-icon {
    font-size: 28px; color: var(--text);
    line-height: 1;
}
.cb-consumable .cb-cons-cd {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,6,10,0.65);
    color: var(--neon-amber);
    font-size: 18px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.15s;
}
.cb-consumable.cooldown .cb-cons-cd { opacity: 1; }
.cb-consumable .cb-cons-key {
    position: absolute; bottom: -6px; right: -6px;
    background: var(--neon-cyan); color: #000;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px;
    letter-spacing: 1px;
}
@media (max-width: 720px) {
    .cb-consumable { right: 12px; bottom: 180px; width: 58px; height: 58px; }
}

/* foot-combat action buttons (Dash / Heavy / Grenade) — колонка слева от cb-consumable */
.cb-foot-actions {
    position: absolute;
    right: 100px; bottom: 60px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 45;
    pointer-events: auto;
}
.cb-foot-actions[hidden] { display: none; }
.cb-fa-btn {
    position: relative;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(5,6,10,0.78);
    border: 2px solid rgba(0,229,255,0.55);
    color: #e6f7ff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    padding: 0;
    cursor: pointer;
    transition: transform .08s, box-shadow .12s;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cb-fa-btn:active { transform: scale(0.92); }
.cb-fa-dash { border-color: #00e5ff; box-shadow: 0 0 14px rgba(0,229,255,0.45); }
.cb-fa-heavy { border-color: #b26bff; box-shadow: 0 0 14px rgba(178,107,255,0.45); }
.cb-fa-grenade { border-color: #ffe14a; box-shadow: 0 0 14px rgba(255,225,74,0.45); }
.cb-fa-btn.ready { filter: brightness(1.15); }
.cb-fa-btn.cd { opacity: 0.5; }
.cb-fa-ico { font-size: 20px; line-height: 1; }
.cb-fa-label { font-family: var(--font-display); font-size: 7px; letter-spacing: 1px; margin-top: 1px; }
.cb-fa-cd, .cb-fa-cnt {
    position: absolute; top: -3px; right: -3px;
    background: #ffe14a; color: #000;
    font-family: var(--font-display); font-size: 9px; font-weight: 900;
    padding: 1px 4px; border-radius: 5px;
    min-width: 14px; text-align: center;
    line-height: 1.1;
}
.cb-fa-cd:empty { display: none; }
.cb-fa-ring {
    position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ffe14a;
    opacity: 0;
    pointer-events: none;
}
.cb-fa-btn.charging .cb-fa-ring { opacity: 1; animation: faSpin 0.6s linear infinite; }
@keyframes faSpin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
    .cb-foot-actions { right: 82px; bottom: 180px; }
    .cb-fa-btn { width: 50px; height: 50px; }
}

/* ==================== COMBAT (realtime arena) ==================== */
#sceneCombat {
    display: block;
    overflow: hidden;
    background: #04020a;
}
#cbCanvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    cursor: crosshair;
}

.cb-hud-top {
    position: absolute; top: 12px; left: 12px; right: 12px;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; z-index: 5; pointer-events: none;
    flex-wrap: wrap;
}
.cb-hud-top > * { pointer-events: auto; }

.cb-hud-left {
    min-width: 340px; max-width: 520px; flex: 1;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(11,16,32,0.85), rgba(5,6,10,0.85));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    display: flex; flex-direction: column; gap: 8px;
}
.cb-hud-left .cb-title {
    font-family: var(--font-display);
    font-size: 14px; letter-spacing: 1.6px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-transform: uppercase;
}
.cb-hud-bars { display: flex; flex-direction: column; gap: 5px; }
.cb-bar-row { display: flex; align-items: center; gap: 8px; }
.cb-bar-label {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 1px; color: var(--text-muted);
    width: 24px;
}
.cb-bar {
    flex: 1; height: 8px;
    background: rgba(5,6,10,0.8);
    border: 1px solid var(--border-soft);
    border-radius: 4px; overflow: hidden;
}
.cb-bar-fill { height: 100%; transition: width .2s; }
.cb-bar-fill.hp { background: linear-gradient(90deg, #ff2d95, #ff7a4f); box-shadow: 0 0 6px #ff2d95; }
.cb-bar-fill.xp { background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan)); box-shadow: 0 0 6px var(--neon-green); }
.cb-bar-val {
    font-family: var(--font-display); font-size: 10px;
    color: var(--text-muted); min-width: 70px; text-align: right;
}

.cb-hud-right {
    min-width: 180px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(11,16,32,0.85), rgba(5,6,10,0.85));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    display: flex; flex-direction: column; gap: 6px;
}
.cb-stat { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cb-stat span {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 1.2px; color: var(--text-muted);
    text-transform: uppercase;
}
.cb-stat b {
    font-family: var(--font-display); font-weight: 700;
    font-size: 12px; color: var(--neon-cyan);
    text-shadow: 0 0 4px rgba(0,229,255,0.4);
}
.cb-flee-btn {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(255,45,149,0.1);
    border: 1px solid var(--neon-pink);
    border-radius: var(--radius-sm);
    color: var(--neon-pink);
    font-family: var(--font-display);
    font-size: 10px; letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
}
.cb-flee-btn:hover { background: rgba(255,45,149,0.2); }

.cb-hint {
    position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 10px; letter-spacing: 1.3px;
    color: var(--text-muted); text-transform: uppercase;
    z-index: 5; pointer-events: none;
    text-align: center;
    background: rgba(5,6,10,0.7);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}

/* OLD grid/sidebar combat styles below are kept but superseded by realtime layout */
.cb-round {
    padding: 4px 10px;
    background: rgba(255,179,71,0.15);
    border: 1px solid var(--neon-amber);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 10px; letter-spacing: 1.4px;
    color: var(--neon-amber);
    margin-right: 8px;
}
.cb-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 14px; padding: 14px;
    min-height: 0;
}
.cb-battlefield {
    position: relative;
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 0;
}
#cbCanvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    cursor: pointer;
}
.cb-sidebar {
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}
.cb-current {
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(17,26,51,0.8), rgba(11,16,32,0.8));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
}
.cur-head { margin-bottom: 10px; }
.cur-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 15px; letter-spacing: 1.4px;
    color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,229,255,0.4);
}
.cur-sub {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 1.2px; color: var(--text-muted);
    text-transform: uppercase; margin-top: 2px;
}
.cur-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cur-stats > div {
    padding: 6px 4px;
    background: rgba(5,6,10,0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    text-align: center;
    display: flex; flex-direction: column;
}
.cur-stats span {
    font-family: var(--font-display); font-size: 9px;
    letter-spacing: 1px; color: var(--text-muted);
    text-transform: uppercase;
}
.cur-stats b {
    font-family: var(--font-display); font-weight: 700;
    font-size: 13px; color: var(--text); margin-top: 2px;
}

#cbActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 0;
    background: transparent;
    border-top: none;
}
.cb-btn.cb-wait { border-color: var(--neon-amber); color: var(--neon-amber); }
.cb-btn.cb-wait:hover:not(:disabled) { background: rgba(255,179,71,0.15); box-shadow: 0 0 12px rgba(255,179,71,0.4); }

#cbLog {
    flex: 1; min-height: 80px; max-height: 240px;
    overflow-y: auto;
    padding: 8px 12px;
    background: rgba(5,6,10,0.6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    font-size: 12px;
    display: flex; flex-direction: column-reverse;
}

@media (max-width: 900px) {
    .cb-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .cb-sidebar { max-height: 40vh; }
}

/* ==================== INVENTORY — paper doll ==================== */
.doll-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
}
@media (max-width: 640px) { .doll-layout { grid-template-columns: 1fr; } }

.doll-left { display: flex; flex-direction: column; gap: 12px; }
.doll-figure {
    position: relative;
    padding: 10px;
    background: rgba(5,6,10,0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}
.doll-body {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: contain;
    background: rgba(5,6,10,0.65);
    border-radius: var(--radius-sm);
    border: 1px solid var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    display: block;
    margin-bottom: 10px;
}
.doll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.doll-slot {
    background: rgba(5,6,10,0.65);
    border: 1.5px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    min-height: 86px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    transition: all .15s;
}
.doll-slot.filled { border-style: solid; }
.doll-slot.filled.rare { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0,229,255,0.25); }
.doll-slot.filled.epic { border-color: var(--neon-violet); box-shadow: 0 0 8px rgba(178,107,255,0.3); }
.doll-slot.filled.legendary { border-color: var(--neon-green); box-shadow: var(--glow-green); }
.doll-slot:hover { transform: translateY(-2px); }
.doll-slot-label {
    font-family: var(--font-display); font-size: 9px;
    letter-spacing: 1.2px; color: var(--text-muted);
    text-transform: uppercase;
}
.doll-img {
    width: 42px; height: 42px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(5,6,10,0.8);
}
.doll-emoji { font-size: 28px; }
.doll-ph { font-size: 18px; color: var(--text-muted); opacity: 0.5; }
.doll-slot-name { font-size: 10px; color: var(--text); line-height: 1.15; }
.doll-stats {
    padding: 10px 12px;
    background: rgba(5,6,10,0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 12px; line-height: 1.55;
}
.doll-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inv-hint {
    padding: 8px 10px;
    background: rgba(0,229,255,0.06);
    border-left: 2px solid var(--neon-cyan);
    font-size: 11px; color: var(--text-muted);
    border-radius: 2px;
    margin: 8px 0;
}
.inv-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(0,229,255,0.18);
    padding-bottom: 6px;
}
.inv-tab {
    background: rgba(11,16,32,0.6); border: 1px solid rgba(0,229,255,0.25);
    color: var(--text-muted); padding: 6px 10px; border-radius: 6px 6px 0 0;
    font-family: var(--font-display); font-size: 11px; letter-spacing: 1px;
    cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
}
.inv-tab:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.inv-tab.active { background: rgba(0,229,255,0.15); color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,229,255,0.3); }
.inv-tab-count {
    display: inline-block; min-width: 18px; padding: 1px 5px;
    background: rgba(0,229,255,0.2); color: var(--neon-cyan);
    border-radius: 8px; font-size: 9px; font-weight: 700;
}
.inv-tab.active .inv-tab-count { background: rgba(0,229,255,0.4); color: #fff; }
.inv-price {
    font-family: var(--font-display);
    font-size: 10px; color: var(--neon-green);
    margin-top: 2px;
}

/* ==================== ARMY / BARRACKS ==================== */
.army-list, .barracks-list {
    display: flex; flex-direction: column; gap: 10px;
}
.army-card, .barracks-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px; align-items: center;
    padding: 10px 12px;
    background: rgba(5,6,10,0.5);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: transform .15s;
}
.army-card:hover, .barracks-card:hover { transform: translateX(2px); }
.army-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-family: var(--font-display);
    font-weight: 700;
}
.army-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.army-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px; letter-spacing: 1px; color: var(--text);
}
.army-desc {
    font-size: 12px; color: var(--text-muted);
    line-height: 1.35;
}
.army-stats {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 0.8px; color: var(--neon-cyan);
    text-transform: uppercase;
}
.barracks-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.barracks-price {
    font-family: var(--font-display); font-size: 12px;
    color: var(--neon-green); letter-spacing: 1px;
}
.btn-primary.small, .btn-ghost.small {
    padding: 6px 12px; font-size: 10px; margin: 0;
    letter-spacing: 1px; width: auto; min-width: 90px;
}

/* ==================== TOAST ==================== */
#appToast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translate(-50%, 8px);
    padding: 10px 18px;
    background: rgba(11,16,32,0.95);
    border: 1px solid var(--neon-cyan);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-cyan);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 12px; letter-spacing: 1.2px;
    z-index: 100;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
    max-width: 88vw;
    text-align: center;
}
#appToast.show { opacity: 1; transform: translate(-50%, 0); }

/* menu name input: красная тряска при отказе */
.input-error {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 12px rgba(255,45,149,0.6) !important;
    animation: shakeErr 0.35s ease-in-out;
}
@keyframes shakeErr {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ==================== IONA SOUFFLEUR ==================== */
.iona-souffleur {
    position: fixed;
    left: 18px;
    bottom: 96px;
    z-index: 40;        /* ниже модалки (50) — чтобы не перехватывать тапы на крестике */
    width: 340px;
    max-width: calc(100vw - 36px);
    padding: 12px 40px 12px 14px;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, rgba(11,16,32,0.96), rgba(11,26,40,0.96));
    border: 1.5px solid var(--neon-cyan);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-cyan);
    color: var(--text);
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .32s ease, transform .32s ease;
    pointer-events: auto;
}
.iona-souffleur.show { opacity: 1; transform: translateX(0); animation: isPulse 2.4s ease-in-out infinite; }
@keyframes isPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,229,255,0.45), 0 0 24px rgba(0,229,255,0.18); }
    50%      { box-shadow: 0 0 20px rgba(0,229,255,0.8), 0 0 42px rgba(0,229,255,0.35); }
}
.iona-souffleur .is-portrait {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover; object-position: top center;
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0,229,255,0.6);
    flex: 0 0 52px;
    animation: ionaFloat 3.4s ease-in-out infinite;
}
@keyframes ionaFloat {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50%      { transform: translateY(-3px) scale(1.02); filter: brightness(1.1); }
}
.iona-souffleur .is-body { flex: 1; min-width: 0; }
.iona-souffleur .is-name {
    font-family: var(--font-display);
    font-size: 11px; letter-spacing: 2px;
    color: var(--neon-cyan);
    text-shadow: 0 0 6px rgba(0,229,255,0.6);
    margin-bottom: 3px;
}
.iona-souffleur .is-text {
    font-size: 13px; line-height: 1.4;
    color: var(--text);
}
.iona-souffleur .is-close {
    position: absolute; top: 2px; right: 4px;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 229, 255, 0.25);
    user-select: none;
    display: flex; align-items: center; justify-content: center;
}
.iona-souffleur .is-close:hover { color: var(--neon-cyan); background: rgba(0,229,255,0.1); }
@media (max-width: 720px) {
    .iona-souffleur {
        left: 10px; right: 10px; bottom: auto;
        top: 112px;
        width: auto; max-width: none;
        padding: 10px 36px 10px 10px;
    }
    .iona-souffleur .is-portrait { width: 42px; height: 42px; flex-basis: 42px; }
    .iona-souffleur .is-text { font-size: 12px; }
}

/* ==================== HANGAR ==================== */
.hangar-list {
    display: flex; flex-direction: column; gap: 12px;
}
.hangar-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 14px; align-items: center;
    padding: 10px 12px;
    background: rgba(5,6,10,0.5);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: transform .15s;
}
.hangar-card:hover { transform: translateY(-1px); }
.hangar-card.active {
    background: rgba(0,229,255,0.08);
    box-shadow: inset 0 0 18px rgba(0,229,255,0.15);
}
.hangar-canvas {
    width: 140px; height: 100px;
    background: #05070d;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}
.hangar-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hangar-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 15px; letter-spacing: 1px;
}
.hangar-rarity {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase;
    margin-left: 6px;
}
.hangar-desc { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.hangar-stats {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 0.8px; color: var(--neon-cyan);
    text-transform: uppercase;
}
.hangar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 120px; }
.hangar-price {
    font-family: var(--font-display); font-size: 12px;
    color: var(--neon-green); letter-spacing: 1px;
}
.hangar-badge {
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 1.3px;
    padding: 6px 10px;
    background: rgba(0,229,255,0.15);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    border-radius: var(--radius-sm);
}