.achievement-date-label {
    color: #888;
    font-family: var(--font-numeric);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.achievement-date-value {
    color: var(--gold-light);
    font-family: var(--font-numeric);
    font-size: 14px;
    font-weight: 600;
}

.achievement-detail-close {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    transition: all 0.2s ease;
}

.achievement-detail-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.achievement-detail-date {
    align-items: center;
    background: rgba(139, 115, 53, 0.1);
    border: 1px solid rgba(139, 115, 53, 0.2);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 20px;
}

.achievement-detail-description {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ddd;
    font-family: var(--font-numeric);
    font-size: 16px;
    line-height: 1.6;
    padding: 16px;
    text-align: center;
}

.achievement-detail-header {
    align-items: center;
    background: rgba(139, 115, 53, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    padding: 20px 24px;
}

.achievement-detail-icon-large {
    animation: achievementIconPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    font-size: 80px;
    line-height: 1;
    will-change: transform, opacity;
}

.achievement-detail-modal {
    animation: achievementModalAppear 0.3s ease-out;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 50%, rgba(10, 9, 8, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 115, 53, 0.2);
    max-height: 90vh;
    max-width: 500px;
    padding: 0;
    width: 90%;
}

.achievement-detail-overlay {
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

.achievement-detail-title {
    color: #e8e8e8;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.achievement-icon {
    font-size: 24px;
}

.achievement-item {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: all 0.2s ease;
}

.achievement-item.more {
    background: rgba(139, 115, 53, 0.2);
    border: 1px solid rgba(139, 115, 53, 0.3);
    color: var(--gold-light);
    font-size: 14px;
    font-weight: 600;
}

.achievements-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
    padding: 16px;
}

.action-btn {
    align-items: center;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.9) 0%, rgba(10, 9, 8, 0.95) 100% );
    border: 2px solid var(--smoke);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: var(--bone);
    cursor: pointer;
    display: flex;
    flex: 1;
    font-family: var(--font-numeric);
    font-size: 0.875rem;
    font-weight: normal;
    gap: 8px;
    justify-content: center;
    letter-spacing: 0.02em;
    min-height: 36px;
    min-width: calc(50% - 5px);
    padding: 2px;
    text-shadow: 0 1px 2px var(--shadow-void);
    transition: all 0.3s ease;
}

.action-btn.additional-attack {
    background: linear-gradient(180deg, rgba(140, 100, 40, 0.35) 0%, rgba(100, 70, 25, 0.25) 100%);
    border-color: rgba(180, 140, 80, 0.7);
    box-shadow: 0 0 8px rgba(140, 100, 40, 0.3), inset 0 1px 0 rgba(255, 200, 100, 0.1);
}

.action-btn.attack {
    background: linear-gradient(180deg, rgba(140, 40, 40, 0.35) 0%, rgba(100, 25, 25, 0.25) 100%);
    border-color: rgba(180, 80, 80, 0.7);
    box-shadow: 0 0 8px rgba(140, 40, 40, 0.3), inset 0 1px 0 rgba(255, 100, 100, 0.1);
}

.action-btn.back {
    background: linear-gradient(180deg, rgba(74, 70, 66, 0.2) 0%, rgba(74, 70, 66, 0.1) 100%);
    border-color: var(--smoke);
}

.action-btn.belt-item {
    background: linear-gradient(145deg, rgba(92, 74, 31, 0.3) 0%, rgba(26, 24, 22, 0.9) 100%);
    border-color: var(--gold-dark);
}

.action-btn.buy {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100% );
    border: 2px solid var(--gold-light);
    color: var(--bg-void);
    text-shadow: none;
}

.action-btn.delete {
    background: linear-gradient(180deg, rgba(107, 26, 26, 0.4) 0%, rgba(74, 14, 14, 0.6) 100% );
    border: 2px solid var(--blood);
    color: var(--blood-glow);
    flex: 0 0 auto;
    min-width: auto;
    padding: 14px 22px;
}

.action-btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.action-btn.end-turn {
    background: linear-gradient(180deg, rgba(160, 135, 65, 0.35) 0%, rgba(120, 100, 45, 0.25) 100%);
    border-color: rgba(200, 170, 90, 0.7);
    box-shadow: 0 0 8px rgba(160, 135, 65, 0.3), inset 0 1px 0 rgba(255, 220, 120, 0.1);
}

.action-btn.end-turn.highlight {
    animation: end-turn-pulse 2s infinite;
    background: linear-gradient(180deg, rgba(180, 155, 75, 0.5) 0%, rgba(140, 120, 55, 0.35) 100%);
    will-change: transform, opacity;
    border-color: rgba(230, 200, 110, 0.9);
}

.action-btn.equip {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.4) 0%, rgba(92, 74, 31, 0.6) 100% );
    border: 2px solid var(--gold);
    color: var(--gold-pale);
}

.action-btn.escape {
    background: linear-gradient(180deg, rgba(160, 135, 65, 0.35) 0%, rgba(120, 100, 45, 0.25) 100%);
    border-color: rgba(200, 170, 90, 0.7);
    box-shadow: 0 0 8px rgba(160, 135, 65, 0.3), inset 0 1px 0 rgba(255, 220, 120, 0.1);
}

.action-btn.mark-sell {
    background: linear-gradient(180deg, rgba(107, 101, 96, 0.3) 0%, rgba(107, 101, 96, 0.15) 100%);
    border: 1px solid rgba(107, 101, 96, 0.5);
    color: var(--ash);
    flex: 0 0 auto;
    min-width: auto;
    padding: 14px 16px;
}

.action-btn.mark-sell.marked {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.4) 0%, rgba(139, 115, 53, 0.2) 100%);
    border: 1px solid var(--gold);
    color: var(--gold-light);
}

.action-btn.return {
    background: linear-gradient(180deg, rgba(90, 110, 130, 0.2) 0%, rgba(90, 110, 130, 0.1) 100%);
    border-color: rgba(90, 110, 130, 0.5);
}

.action-btn.sell {
    background: linear-gradient(180deg, rgba(100, 115, 130, 0.35) 0%, rgba(70, 80, 95, 0.55) 100% );
    border: 2px solid rgba(120, 135, 150, 0.5);
    color: #c0d0e0;
}

.action-btn.skill {
    background: linear-gradient(180deg, rgba(130, 90, 140, 0.35) 0%, rgba(90, 60, 100, 0.25) 100%);
    border-color: rgba(160, 120, 180, 0.7);
    box-shadow: 0 0 8px rgba(130, 90, 140, 0.3), inset 0 1px 0 rgba(200, 150, 255, 0.1);
}

.action-btn.truce {
    background: linear-gradient(180deg, rgba(70, 140, 100, 0.35) 0%, rgba(50, 100, 70, 0.25) 100%);
    border-color: rgba(100, 180, 130, 0.7);
    box-shadow: 0 0 8px rgba(70, 140, 100, 0.3), inset 0 1px 0 rgba(120, 255, 180, 0.1);
}

.action-btn.unequip {
    background: linear-gradient(180deg, rgba(168, 146, 74, 0.3) 0%, rgba(107, 91, 47, 0.5) 100% );
    border: 2px solid rgba(168, 146, 74, 0.5);
    color: var(--gold-pale);
}

.action-btn.use {
    background: linear-gradient(180deg, rgba(107, 74, 107, 0.4) 0%, rgba(74, 50, 74, 0.6) 100% );
    border: 2px solid rgba(140, 100, 140, 0.6);
    color: #d4a8d4;
}

.action-cost {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 4px;
}

.action-error {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
    font-size: 13px;
    padding: 10px 14px;
    text-align: center;
}

.action-icon {
    flex-shrink: 0;
    font-size: 16px;
    text-align: center;
    width: 20px;
}

.action-label {
    flex: 1;
    font-weight: 500;
}

.actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions-grid {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(10, 9, 8, 0.6) 100% );
    border-top: 1px solid var(--border-accent);
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    max-height: 140px;
    overflow-y: auto;
    padding: 5px;
}

.actions-grid.collapsed {
    display: none;
}

.actions-header {
    color: var(--text-primary);
    display: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.actions-header.mobile-only {
    align-items: center;
    background: rgba(139, 115, 53, 0.15);
    border-bottom: 1px solid rgba(139, 115, 53, 0.3);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 4px 6px;
}

.actions-icon {
    font-size: 14px;
}

.actions-title {
    align-items: center;
    color: var(--gold-light);
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 4px;
}

.actions-toggle {
    color: var(--gold-light);
    font-size: 10px;
    transition: transform 0.3s;
}

.attack-btn {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
}

.auth-button {
    align-items: center;
    background: linear-gradient(180deg, var(--blood-light) 0%, var(--blood-dark) 100%);
    border: 2px solid var(--blood);
    box-shadow: 0 4px 20px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--bone);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-numeric);
    font-size: 0.95rem;
    font-weight: normal;
    gap: 0.75rem;
    letter-spacing: 0.02em;
    padding: 1.1rem 2.5rem;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.auth-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.auth-waiting {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

.avatar-placeholder {
    align-items: center;
    background: linear-gradient(135deg, var(--blood-dark) 0%, var(--blood) 50%, var(--blood-dark) 100% );
    color: var(--bone);
    display: flex;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    justify-content: center;
    text-shadow: 0 2px 4px var(--shadow-void);
}

.avatar-wrapper {
    cursor: pointer;
    position: relative;
}

.back-btn {
    background: rgba(100, 149, 237, 0.2);
    border-color: #6495ED;
}

.background-music-player {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 8px;
    isolation: isolate;
    pointer-events: auto !important;
    position: fixed;
    right: 10px;
    top: calc(60px + var(--tg-safe-area-top, 0px));
    z-index: 2000 !important;
}

.bar-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bar-icon {
    font-size: 12px;
}

.bar-label {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 9px;
    justify-content: space-between;
}

.bar-value {
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bars-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: 100%;
    height: 100%;
}

.belt-cooldown {
    background: rgba(245, 158, 11, 0.85);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 3px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    left: 50%;
    opacity: 1;
    padding: 2px 4px;
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
}

.belt-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.belt-header {
    align-items: center;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.3);
    color: var(--gold);
    display: flex;
    font-size: 10px;
    font-weight: 600;
    gap: 8px;
    justify-content: space-between;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.belt-item-count {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    bottom: 2px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    height: 22px;
    margin-bottom: 0px;
    margin-top: 0px;
    opacity: 0.85;
    position: absolute;
    right: 2px;
}

.belt-item-img {
    border-radius: 4px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.belt-item-slot {
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--gold-dark);
    border-radius: 6px;
    display: flex;
    height: 48px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
    width: 48px;
}

.belt-item-slot.on-cooldown {
    filter: grayscale(0.5);
    opacity: 0.5;
}

.belt-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.belt-panel {
    background: linear-gradient(145deg, rgba(26, 24, 22, 0.95) 0%, rgba(40, 36, 32, 0.95) 100%);
    border: 1px solid var(--gold-dark);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-width: 140px;
    padding: 10px;
}

.boss-danger-badge {
    background: linear-gradient(135deg, rgba(180, 50, 50, 0.8) 0%, rgba(120, 30, 30, 0.8) 100%);
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 3px;
    color: #ffcccc;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    text-transform: uppercase;
}

.boss-header {
    align-items: center;
    display: flex;
    gap: 8px;
}

.boss-hp-bar {
    background: linear-gradient(180deg, rgba(30, 10, 15, 0.9) 0%, rgba(20, 5, 10, 0.9) 100%);
    border: 1px solid rgba(100, 40, 40, 0.6);
    border-radius: 4px;
    height: 16px;
    overflow: hidden;
    position: relative;
}

.boss-hp-container {
    position: relative;
}

.boss-hp-current {
    color: #ffcccc;
}

.boss-hp-fill {
    background: linear-gradient(180deg, 
        #cc3333 0%, 
        #aa2222 50%, 
        #881111 100%
    );
    border-radius: 3px;
    height: 100%;
    position: relative;
    transition: width 0.4s ease;
}

.boss-hp-glow {
    animation: boss-hp-shimmer 3s ease-in-out infinite;
    will-change: transform, opacity;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 100, 100, 0.1) 50%, 
        transparent 100%
    );
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.boss-hp-max {
    color: rgba(255, 255, 255, 0.7);
}

.boss-hp-panel {
    background: linear-gradient(135deg, rgba(40, 20, 30, 0.95) 0%, rgba(25, 12, 20, 0.9) 100%);
    border: 2px solid rgba(180, 50, 50, 0.5);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(180, 50, 50, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
}

.boss-hp-panel.boss-death {
    animation: boss-death-pulse 2s ease-in-out infinite;
    will-change: transform, opacity;
    background: linear-gradient(135deg, rgba(20, 5, 10, 0.98) 0%, rgba(10, 0, 5, 0.95) 100%);
    border-color: rgba(50, 50, 50, 0.9);
    box-shadow: 0 0 30px rgba(100, 0, 0, 0.6), 0 0 60px rgba(50, 0, 0, 0.3);
}

.boss-hp-panel.boss-global {
    background: linear-gradient(135deg, rgba(50, 20, 60, 0.95) 0%, rgba(30, 10, 40, 0.9) 100%);
    border-color: rgba(150, 50, 200, 0.7);
    box-shadow: 0 0 25px rgba(150, 50, 200, 0.5);
}

.boss-hp-panel.boss-local {
    border-color: rgba(180, 120, 50, 0.6);
    box-shadow: 0 0 15px rgba(180, 120, 50, 0.3);
}

.boss-hp-panel.boss-master {
    border-color: rgba(180, 50, 50, 0.6);
    box-shadow: 0 0 20px rgba(180, 50, 50, 0.4);
}

.boss-hp-separator {
    color: rgba(255, 255, 255, 0.5);
}

.boss-hp-text {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    gap: 4px;
    left: 50%;
    position: absolute;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

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

.boss-level {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 500;
}

.boss-name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 8px;
}

.boss-name-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.boss-portrait {
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 100, 100, 0.4);
    border-radius: 8px;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    overflow: hidden;
    width: 32px;
}

.boss-portrait-icon {
    color: #ff6666;
}

.boss-portrait-img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.boss-status {
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    font-size: 9px;
    font-weight: 600;
    gap: 4px;
    padding: 2px 5px;
}

.boss-status-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.boss-status.disarm {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff8888;
}

.boss-status.root {
    background: rgba(100, 200, 100, 0.2);
    border-color: rgba(100, 200, 100, 0.4);
    color: #88dd88;
}

.boss-status.silence {
    background: rgba(100, 150, 255, 0.2);
    border-color: rgba(100, 150, 255, 0.4);
    color: #8cb4ff;
}

.boss-status.stun {
    background: rgba(255, 200, 50, 0.2);
    border-color: rgba(255, 200, 50, 0.4);
    color: #ffd633;
}

.btn-cooldown {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 3px;
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: 3;
}

.btn-cost {
    color: var(--gold-light);
    display: none;
    font-family: var(--font-numeric);
    font-size: 7px;
    font-weight: 600;
}

.fight-actions-panel .action-btn .btn-cost {
    display: block;
    position: relative;
    z-index: 2;
    font-size: 9px;
    margin-top: -2px;
    padding: 0 4px 2px 4px;
}

.btn-icon {
    font-size: 12px;
}

.btn-icon-wrapper {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    position: relative;
    width: 20px;
}

.fight-actions-panel .action-btn .btn-icon-wrapper {
    position: relative;
    z-index: 1;
}

.fight-actions-panel .action-btn .btn-icon-wrapper:has(.btn-skill-img) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.btn-item-count {
    background: rgba(0, 0, 0, 0.85);
    border-radius: 3px;
    bottom: 2px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 3px;
    position: absolute;
    right: 2px;
    z-index: 3;
}

.btn-label {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.fight-actions-panel .action-btn .btn-label {
    position: relative;
    z-index: 2;
    margin-top: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
    padding: 4px 4px 2px 4px;
    border-radius: 0 0 4px 4px;
    font-size: 11px;
    line-height: 1.1;
    width: 100%;
}

.fight-actions-panel .action-btn .btn-icon {
    position: relative;
    z-index: 2;
}

.btn-primary {
    background: linear-gradient(180deg, var(--blood-light) 0%, var(--blood-dark) 100%);
    border: 2px solid var(--blood);
    box-shadow: 0 4px 15px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--bone);
    font-family: var(--font-numeric);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.btn-secondary {
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
    font-family: var(--font-numeric);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.btn-skill-img {
    border-radius: 6px;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.fight-actions-panel .action-btn .btn-skill-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    border-radius: 0;
}

.btn-spinner {
    animation: spin 0.8s linear infinite;
    will-change: transform;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    height: 18px;
    width: 18px;
}

.buff-duration {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 2px;
    bottom: -2px;
    color: #fff;
    font-size: 7px;
    line-height: 1;
    padding: 0 2px;
    position: absolute;
    right: -2px;
}

.buff-icon {
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: help;
    display: flex;
    font-size: 11px;
    height: 16px;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
    width: 16px;
}

.buff-icon-small {
    display: inline-block;
    font-size: 10px;
}

.buff-icon.buff-negative {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
}

.buff-icon.buff-positive {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
}

.buff-icon.negative {
    border-color: rgba(244, 67, 54, 0.6);
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.4);
}

.buff-icon.positive {
    border-color: var(--gold);
    box-shadow: 0 0 8px var(--shadow-gold);
}

.buff-more {
    color: rgba(255, 255, 255, 0.6);
    font-size: 8px;
    padding: 0 3px;
}

.buffs-row-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 4px;
}

.character-sheet {
    text-align: center;
}

.character-sheet-image {
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    height: auto;
    margin-bottom: 24px;
    max-width: 100%;
}

.character-sheet-text {
    color: var(--text-secondary);
    font-size: 16px;
    font-style: italic;
    line-height: 1.8;
}

.chat-close {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    height: 30px;
    justify-content: center;
    transition: all 0.2s ease;
    width: 30px;
}

.chat-header {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
}

.chat-modal {
    animation: slideUp 0.25s ease;
    backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.4), rgba(18, 17, 15, 0.4)) !important;
    border: 2px solid var(--gold-dark);
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 40px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    max-width: 600px;
    overflow: hidden;
    position: relative;
    width: 90%;
}

.chat-modal-content {
    background: transparent;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}

.chat-modal-header {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    cursor: move;
    display: flex;
    height: 12px;
    min-height: 12px;
    padding: 0;
}

.chat-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: none;
    background: transparent !important;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.chat-preview-bubble {
    backdrop-filter: blur(12px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    bottom: calc(180px + var(--safe-area-bottom));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 6px;
    max-width: calc(100vw - 12px);
    padding: 10px 14px;
    position: fixed;
    right: 6px;
    z-index: 100;
}

.chat-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.content-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-height: calc(100vh - 320px);
    overflow-x: hidden;
    overflow-y: auto;
}

.content-close-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 28px;
    justify-content: center;
    transition: all 0.2s ease;
    width: 28px;
}

.content-header {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    user-select: none;
}

.content-image {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: center;
    max-height: 300px;
    overflow: hidden;
}

.content-modal {
    backdrop-filter: blur(20px);
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 20px 80px var(--shadow-void), 0 0 60px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100vh;
    max-width: 100vw;
    min-height: auto;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.content-modal-close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 100;
}

.content-modal-content {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 24px;
}

.content-modal-overlay {
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}

/* Resurrection Offer Modal - поверх экрана смерти */
.resurrection-offer-modal-overlay {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.85);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

.resurrection-offer-modal {
    backdrop-filter: blur(20px);
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: 0 20px 80px var(--shadow-void), 0 0 60px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 90vh;
    max-width: 600px;
    min-height: auto;
    min-width: 400px;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    width: 100%;
    animation: slideUp 0.4s ease-out;
}

.resurrection-offer-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.3) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold);
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    position: relative;
}

.resurrection-offer-icon {
    color: var(--gold);
    display: flex;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(139, 115, 53, 0.6));
}

.resurrection-offer-title {
    color: var(--text-primary);
    font-family: 'OpirusOpik', 'Georgia', serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.resurrection-offer-modal-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 24px;
}

.resurrection-offer-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-height: calc(90vh - 200px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.content-modal.has-media {
    max-width: 1100px;
}

.content-title {
    color: var(--text-primary);
    flex: 1;
    font-size: 13px;
    font-weight: 600;
}

.content-toggle-icon {
    color: var(--text-muted);
    font-size: 10px;
}

.context-menu {
    animation: contextMenuSlideIn 0.2s ease-out;
    background: linear-gradient(180deg, rgba(13, 15, 20, 0.98) 0%, rgba(21, 24, 32, 0.98) 100%);
    border: 1px solid rgba(139, 115, 53, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 115, 53, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    max-width: 85vw;
    min-width: 180px;
    overflow: hidden;
    position: fixed;
    z-index: 9999;
}

.context-menu-action {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 12px;
    gap: 10px;
    padding: 8px 10px;
    text-align: left;
    transition: all 0.2s;
    width: 100%;
}

.context-menu-action.disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.context-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
    padding: 8px;
}

.context-menu-close {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 24px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
    width: 24px;
}

.context-menu-header {
    align-items: center;
    background: rgba(139, 115, 53, 0.1);
    border-bottom: 1px solid rgba(139, 115, 53, 0.2);
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
}

.context-menu-overlay {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9998;
}

.context-menu-title {
    color: var(--text-primary);
    flex: 1;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cooldown-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.cooldown-text {
    color: #ff6b6b;
    font-family: var(--font-numeric);
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 107, 107, 0.8);
}

.coords-text {
    color: var(--text-secondary);
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.crafting-exp-reward {
    align-items: center;
    display: flex;
    gap: 8px;
}

.crafting-info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crafting-item-card {
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    padding: 10px;
    transition: all 0.2s;
}

.crafting-item-card.insufficient {
    background: rgba(244, 67, 54, 0.05);
    border-color: rgba(244, 67, 54, 0.4);
}

.crafting-item-chance {
    color: var(--text-muted);
    font-size: 12px;
    opacity: 0.8;
}

.crafting-item-count {
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 600;
}

.crafting-item-count.insufficient {
    color: #f44336;
}

.crafting-item-count.sufficient {
    color: var(--gold-light);
}

.crafting-item-details {
    align-items: center;
    display: flex;
    gap: 8px;
}

.crafting-item-image {
    flex-shrink: 0;
}

.crafting-item-img {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid;
    height: 48px;
    object-fit: contain;
    padding: 4px;
    width: 48px;
}

.crafting-item-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.crafting-item-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.crafting-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crafting-modal {
    animation: slideUp 0.25s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0 !important;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 50px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    left: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
}

.crafting-modal-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
}

.crafting-modal-content {
    align-items: stretch;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 16px;
    pointer-events: auto;
}

.crafting-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold-dark);
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    position: relative;
}

.crafting-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2500;
}

.crafting-modal-overlay.draggable-mode {
    backdrop-filter: none;
    background: transparent;
    padding: 0;
    pointer-events: none;
}

.crafting-progress-bar {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gold-dark);
    height: 28px;
    overflow: hidden;
    position: relative;
}

.crafting-progress-fill {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-pale));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 12px var(--shadow-gold);
    height: 100%;
    transition: width 0.1s linear;
}

.crafting-progress-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.crafting-progress-label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.crafting-progress-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gold-dark);
    padding: 12px;
}

.crafting-progress-text {
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 700;
    left: 50%;
    position: absolute;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.crafting-progress-time {
    color: var(--accent-gold);
    font-size: 14px;
    font-weight: 700;
}

.crafting-recipe-header {
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.crafting-recipe-level {
    background: rgba(139, 115, 53, 0.2);
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
}

.crafting-recipe-name {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
}

.crafting-recipe-title {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.crafting-recipe-type {
    align-items: center;
    display: flex;
    gap: 8px;
}

.crafting-reward-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crafting-reward-header {
    margin-bottom: 8px;
}

.crafting-reward-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
}

.crafting-reward-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.crafting-section-header {
    margin-bottom: 8px;
}

.crafting-section-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.crafting-type-icon {
    font-size: 16px;
}

.crafting-type-name {
    color: var(--text-secondary);
    font-size: 14px;
}

.creature-card.compact {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s;
}

.creature-card.compact.ally {
    border-left: 2px solid #4CAF50;
}

.creature-card.compact.ally.main-player {
    background: rgba(139, 115, 53, 0.1);
    border: 1px solid var(--gold);
}

.creature-card.compact.ally.summon {
    background: rgba(100, 149, 237, 0.1);
    border-left: 2px solid #6495ED;
}

.creature-card.compact.enemy {
    border-left: 2px solid #ff6b6b;
}

.creature-card.compact.enemy.selected {
    background: rgba(255, 107, 107, 0.15);
    border-color: #ff6b6b;
    box-shadow: 0 0 6px rgba(255, 107, 107, 0.3);
}

.creature-header-compact {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.creature-name-compact {
    color: #ddd;
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creature-token {
    align-items: center;
    border: 2px solid transparent;
    border-radius: 3px;
    bottom: 0;
    box-sizing: border-box;
    contain: layout style paint;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    isolation: isolate;
    justify-content: flex-start;
    left: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 2px;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.2s;
    width: 100%;
    will-change: transform, opacity;
    z-index: 2;
}

.creature-token.ally {
    background: rgba(139, 115, 53, 0.2);
    border-color: var(--gold);
}

.creature-token.enemy {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
}

.creature-token.invalid-target-creature {
    cursor: not-allowed;
    opacity: 0.5;
}

.creature-token.player {
    background: rgba(139, 115, 53, 0.25);
    border-color: var(--gold);
}

.creature-token.selected {
    box-shadow: 0 0 8px currentColor, inset 0 0 8px currentColor;
    transform: scale(1.05);
}

.creature-token.summon {
    background: rgba(100, 149, 237, 0.2);
    border-color: #6495ED;
}

.creature-token.valid-target-creature {
    cursor: crosshair;
}

.creatures-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 5px;
}

.current-turn-indicator {
    animation: bounce 1s infinite;
    bottom: auto;
    color: var(--gold);
    font-size: 10px;
    left: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    will-change: transform;
}

.enemies-panel {
    order: 1;
}

.error-icon {
    font-size: 48px;
}

.error-message {
    background: rgba(229, 57, 53, 0.1);
    border-left: 3px solid var(--accent-red);
    border-radius: 6px;
    color: var(--accent-red);
    font-size: 14px;
    margin-top: 8px;
    padding: 8px 12px;
    text-align: center;
}

.fight-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fight-actions {
    backdrop-filter: blur(12px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0;
    gap: 6px;
    margin-bottom: calc(8px + var(--safe-area-bottom));
    margin-top: 12px;
    opacity: 1 !important;
    padding: 8px;
    position: relative;
    visibility: visible !important;
    z-index: 10;
}

.fight-actions-panel {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, var(--bg-void) 100%);
    border-top: 1px solid var(--border-accent);
    flex-shrink: 0;
    grid-area: actions;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    margin-top: 8px;
    padding-bottom: 8px;
    position: relative;
}

.fight-boss-status-panel {
    background: linear-gradient(180deg, rgba(30, 15, 25, 0.9) 0%, rgba(20, 10, 15, 0.8) 100%);
    border-bottom: 1px solid rgba(255, 100, 100, 0.2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-area: boss;
    padding: 4px;
}

.fight-btn {
    align-items: center;
    background: rgba(139, 115, 53, 0.12);
    border: 1px solid rgba(139, 115, 53, 0.35);
    color: var(--gold-light);
    cursor: pointer;
    display: inline-flex;
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    gap: 4px;
    justify-content: center;
    min-width: calc(50% - 3px);
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fight-btn.attack {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.35);
    color: var(--accent-red);
}

.fight-btn.escape {
    background: rgba(255, 183, 77, 0.12);
    border-color: rgba(255, 183, 77, 0.35);
    color: var(--accent-gold);
}

.fight-btn.skill {
    background: rgba(186, 104, 200, 0.12);
    border-color: rgba(186, 104, 200, 0.35);
    color: var(--accent-purple);
}

.fight-btn.skip {
    background: rgba(100, 181, 246, 0.12);
    border-color: rgba(100, 181, 246, 0.35);
    color: #64B5F6;
}

.fight-center-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: auto;
    justify-content: flex-start;
    max-height: 100%;
    min-height: min(80vw, 350px);
    min-width: 0;
    order: 2;
    overflow: hidden;
}

.fight-error {
    align-items: center;
    color: #ff6b6b;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 12px;
    height: 100%;
    justify-content: center;
}

.fight-grid {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(139, 115, 53, 0.1);
    box-sizing: border-box;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    height: min(100cqw, 100cqh);
    min-height: 0;
    min-width: 0;
    padding: 5px;
    width: min(100cqw, 100cqh);
}

.fight-grid-wrapper {
    align-items: center;
    container-type: size;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.fight-grid.target-selection-mode {
    border-color: var(--gold);
    box-shadow: inset 0 0 15px var(--shadow-gold);
}

.fight-log-mobile {
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(139, 115, 53, 0.2);
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    grid-area: log;
}

.fight-log-panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: 6px;
    display: flex;
    flex: 1;
    flex-direction: column;
    max-height: 200px;
    min-height: 150px;
    overflow: hidden;
}

.fight-log-sidebar {
    align-self: stretch;
    background: rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: width 0.3s ease;
}

.fight-log-sidebar.collapsed {
    width: 36px;
}

.fight-log-sidebar.expanded {
    width: 280px;
}

.fight-main-area {
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 0;
    grid-area: main;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.fight-map-container {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 8px;
    position: relative;
    width: 100%;
}

.fight-map-wrapper {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 2px;
}

.fight-mode {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
    padding-bottom: 0;
    padding-top: calc(12px + var(--safe-area-top));
    position: relative;
    width: 100%;
}

.fight-object {
    align-items: center;
    background: rgba(139, 69, 19, 0.3);
    border: 1px solid rgba(139, 69, 19, 0.5);
    border-radius: 3px;
    bottom: 2px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: calc(100% - 4px);
    justify-content: center;
    left: 2px;
    padding: 2px;
    pointer-events: none;
    position: absolute;
    width: calc(100% - 4px);
    z-index: 1;
}

.fight-object.solid {
    background: rgba(139, 69, 19, 0.4);
    border-color: rgba(139, 69, 19, 0.7);
    border-width: 2px;
}

.fight-panel-content {
    display: grid;
    flex: 1;
    gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(200px, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

.fight-panel-v2 {
    background: radial-gradient(ellipse at 50% 0%, rgba(74, 14, 14, 0.4) 0%, transparent 40%), radial-gradient(ellipse at 20% 100%, rgba(92, 74, 31, 0.15) 0%, transparent 35%), radial-gradient(ellipse at 80% 100%, rgba(92, 74, 31, 0.1) 0%, transparent 35%), linear-gradient(180deg, var(--bg-void) 0%, var(--bg-dark) 50%, var(--bg-void) 100%);
    box-sizing: border-box;
    display: grid;
    flex-direction: column;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    grid-template-areas: "initiative status"
            "initiative boss"
            "initiative main"
            "initiative log"
            "actions actions";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    height: auto;
    min-height: 100vh;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-top: 0;
    position: relative;
    width: 100%;
}

.fight-panel-wrapper {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    margin-bottom: 12px;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 10px;
}

.fight-right-panel {
    order: 3;
}

.fight-skills-panel {
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    max-height: 100px;
    min-height: 100px;
    overflow-y: auto;
    padding: 8px;
}

.fight-status-bar {
    align-items: center;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.95) 0%, rgba(10, 9, 8, 0.9) 100% );
    border-bottom: 2px solid var(--blood);
    box-shadow: 0 4px 20px var(--shadow-void);
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 4px;
    grid-area: status;
    justify-content: space-between;
    min-height: 24px;
    padding: 2px 8px;
    padding-right: 170px;
    position: relative;
    z-index: 10;
}

.fight-status-info {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
}

.fight-status-info.status-boss {
    background: linear-gradient(90deg, rgba(217, 74, 74, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-color: rgba(217, 74, 74, 0.4);
}

.fight-status-info.status-event {
    background: linear-gradient(90deg, rgba(180, 74, 217, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-color: rgba(180, 74, 217, 0.4);
}

.fight-status-info.status-timer {
    background: linear-gradient(90deg, rgba(217, 160, 74, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-color: rgba(217, 160, 74, 0.4);
}

.fight-status-info.status-wave {
    background: linear-gradient(90deg, rgba(74, 144, 217, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-color: rgba(74, 144, 217, 0.4);
}

.form-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    padding: 12px 0px;
    transition: all 0.2s;
    width: 100%;
}

.game-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    background: var(--bg-void);
    bottom: 0;
    contain: layout style paint;
    height: 100dvh;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    touch-action: pan-x pan-y;
    user-select: none;
    width: 100%;
}

.game-container.fight-active {
    background: linear-gradient(180deg, #0d0f14 0%, #151820 100%);
}

/* Заполнение safe-area сверху для Telegram - скрывает черную полоску */
.game-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--tg-safe-area-top, 0px);
    background: var(--bg-void);
    z-index: 0;
    pointer-events: none;
}

.game-content-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.game-icon {
    color: currentColor;
    display: inline-block;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    vertical-align: middle;
}

.game-icon-lg {
    height: 24px;
    width: 24px;
}

.game-icon-md {
    height: 18px;
    width: 18px;
}

.game-icon-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
    will-change: transform, opacity, filter;
}

.game-icon-sm {
    height: 14px;
    width: 14px;
}

.game-icon-xl {
    height: 32px;
    width: 32px;
}

.gold-amount {
    color: var(--accent-gold);
    font-family: var(--font-numeric);
    font-size: 16px;
    font-weight: 600;
}

.gold-icon {
    font-size: 18px;
}

.gold-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    color: var(--accent-gold);
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    max-width: 100px;
    padding: 8px 10px;
}

.gold-max {
    color: var(--text-secondary);
    font-size: 12px;
}

.grid-cell {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    border-radius: 4px;
    contain: layout style paint;
    cursor: pointer;
    display: flex;
    gap: 1px;
    isolation: isolate;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
}

.grid-cell.has-object {
    background: rgba(139, 69, 19, 0.2);
}

.grid-cell.in-range {
    background: rgba(100, 100, 100, 0.1);
    border-color: #555;
}

.grid-cell.movable {
    animation: movement-pulse 2s infinite;
    background: rgba(139, 115, 53, 0.15);
    border-color: var(--gold);
    cursor: pointer;
    will-change: transform;
}

.grid-cell.occupied {
    background: rgba(0, 0, 0, 0.5);
}

.grid-cell.out-of-range {
    background: rgba(50, 50, 50, 0.3);
    border-color: #222;
    cursor: not-allowed;
    opacity: 0.6;
}

.grid-cell.valid-target {
    animation: target-pulse 1.5s infinite;
    background: rgba(139, 115, 53, 0.15);
    border-color: var(--gold);
    will-change: transform;
    cursor: crosshair;
}

.hp-bar {
    background: linear-gradient(90deg, #ff6b6b, #ff8787);
    height: 100%;
    min-width: 2px;
    transition: width 0.3s ease;
}

.hp-bar-small {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 2px;
    height: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    position: relative;
}

.hp-text-small {
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    left: 50%;
    position: absolute;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    top: 50%;
    transform: translate(-50%, -50%);
}

.hud-avatar {
    left: 8px;
    top: calc(8px + var(--safe-area-top));
}

.hud-avatar-inline {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}

.hud-avatar-belt-container {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
    pointer-events: auto;
}

/* Когда пояса нет - аватар и бары в одну строку */
.hud-avatar-belt-container:not(:has(.hud-belt-items)) {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.hud-avatar-belt-container:not(:has(.hud-belt-items)) .hud-bottom-bars {
    width: auto;
    flex: 1;
    min-width: 200px;
}

.hud-top-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.hud-avatar-belt-container .hud-avatar-inline {
    align-self: flex-start;
    flex-shrink: 0;
}

.hud-avatar-belt-container .hud-avatar-inline .avatar-img,
.hud-avatar-belt-container .hud-avatar-inline .avatar-placeholder {
    height: 70px;
    width: 70px;
}


.hud-avatar-belt-container .hud-belt-items {
    bottom: auto !important;
    pointer-events: auto;
    right: auto !important;
    position: relative !important;
    flex: 1;
    min-width: 0;
    align-self: flex-start;
}

.hud-avatar-belt-container .hud-belt-items .belt-panel {
    width: 100%;
    height: 100%;
}

.hud-avatar-belt-container .hud-bottom-bars {
    align-items: flex-start;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    left: auto;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    position: relative;
    transform: none;
    width: 100%;
    height: 100%;
    align-self: flex-start;
}

.hud-avatar-belt-container .hud-bottom-bars .bars-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    height: 100%;
    align-items: flex-start;
}

.hud-avatar-belt-container .hud-bottom-bars .bar-container {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.hud-avatar-belt-container .hud-bottom-bars .progress-bar {
    display: block;
    width: 100%;
    height: 20px;
    min-height: 20px;
    max-width: 100%;
    position: relative;
}

.hud-avatar-belt-container .hud-bottom-bars .progress-fill {
    display: block;
    visibility: visible;
    opacity: 1;
    height: 100%;
}

.hud-avatar-belt-container .hud-bottom-bars .progress-value {
    font-size: 11px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    white-space: nowrap;
}

.hud-belt-items {
    bottom: 70px !important;
    pointer-events: auto;
    right: 8px !important;
}

.hud-bottom-bars {
    align-items: center;
    bottom: calc(12px + var(--safe-area-bottom));
    contain: layout style paint;
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 100%;
    left: 50%;
    max-width: 500px;
    min-width: 300px;
    padding: 8px 12px;
    position: fixed;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1000;
}

.hud-bottom-container {
    align-items: flex-start;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    left: 0;
    padding: 0 12px;
    pointer-events: none;
    position: fixed;
    right: 0;
    z-index: 1000;
}

.hud-chat {
    animation: slideIn 0.25s ease;
    backdrop-filter: blur(16px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    bottom: calc(220px + var(--tg-safe-area-bottom, var(--safe-area-bottom, 0px)));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    height: 420px;
    left: 12px;
    overflow: hidden;
    position: fixed;
    right: 12px;
    top: calc(80px + var(--tg-safe-area-top, var(--safe-area-top, 0px)));
    width: 360px;
    z-index: 300;
}

.hud-content-panel {
    backdrop-filter: blur(16px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    border-radius: 0 !important;
    bottom: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    height: 100% !important;
    left: 6px !important;
    max-height: 100vh !important;
    max-width: calc(100vw - 12px);
    overflow: hidden;
    position: fixed;
    right: 6px !important;
    top: 0 !important;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    width: 100% !important;
    z-index: 200;
}

.hud-content-panel.collapsed {
    border-radius: 16px !important;
    bottom: calc(190px + var(--safe-area-bottom)) !important;
    height: auto !important;
    left: 12px !important;
    max-height: 40px !important;
    right: 12px !important;
    top: auto !important;
    transform: translate(-50%, -50%);
    width: auto !important;
}

.hud-content-panel.has-media {
    max-width: 900px;
}

.hud-movement {
    bottom: calc(12px + var(--safe-area-bottom));
    left: 6px;
    position: fixed;
    z-index: 1000;
}

.hud-notification {
    backdrop-filter: blur(16px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    contain: layout style paint;
    left: 12px;
    max-width: calc(100% - 24px);
    min-width: auto;
    padding: 14px 18px;
    pointer-events: auto;
    position: fixed;
    right: 12px;
    top: calc(70px + var(--safe-area-top));
    transform: none;
    transition: all 0.3s ease;
    z-index: 1500;
}

.hud-notification.hide {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
}

.hud-notification.show {
    animation: slideDownNotification 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.hud-quick-actions {
    align-items: center;
    contain: layout style paint;
    display: flex; /* По умолчанию видно (для ПК) */
    flex-wrap: nowrap;
    gap: 4px;
    position: fixed;
    right: 12px !important;
    top: calc(10px + var(--safe-area-top, 0px)) !important;
    z-index: 100;
}

.hud-top-bar {
    align-items: center;
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.95) 0%, rgba(18, 17, 15, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 4px 24px var(--shadow-void), 0 0 30px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    left: 50% !important;
    max-width: calc(100vw - 200px) !important;
    min-width: 0;
    overflow: hidden;
    padding: 10px 14px;
    position: fixed;
    top: calc(10px + var(--safe-area-top));
    transform: translateX(-50%) !important;
    white-space: nowrap;
    z-index: 100;
}

.indicator-icon {
    animation: pulse-icon 1s infinite;
    will-change: transform, opacity;
    font-size: 18px;
}

.indicator-text {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 500;
}

.initiative-bar {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    flex-shrink: 0;
    grid-area: initiative;
    max-height: 100%;
    max-width: 200px;
    min-width: 150px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
    width: 180px;
}

.initiative-portrait {
    align-items: flex-start;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 6px;
    max-width: 100%;
    min-height: 54px;
    min-width: 0;
    padding: 4px 6px;
    position: relative;
    transition: all 0.2s;
    width: 100%;
}

.initiative-portrait.current-turn {
    background: rgba(139, 115, 53, 0.2);
    border: 1px solid var(--gold);
    box-shadow: 0 0 12px var(--shadow-gold);
    padding-left: 12px;
}

.initiative-portrait.dead {
    filter: grayscale(0.8);
    opacity: 0.4;
}

.initiative-portrait.not-in-queue {
    border: 1px dashed rgba(255, 255, 255, 0.2);
    opacity: 0.6;
}

.initiative-portrait.selected {
    background: rgba(139, 115, 53, 0.25);
    border: 1px solid var(--gold);
}

.initiative-scroll {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-color: #4CAF50 rgba(0, 0, 0, 0.3);
    scrollbar-width: thin;
    width: 100%;
}

.input-group {
    margin-bottom: 24px;
}

.intro-content {
    align-items: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
}

.intro-document {
    border-radius: 8px;
    height: auto;
    max-width: 300px;
    width: 100%;
}

.intro-text {
    text-align: center;
}

.intro-video {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    height: auto;
    width: 100%;
}

.inventory-balance {
    color: #ffd700 !important;
    font-family: var(--font-numeric);
    font-size: 14px !important;
    font-weight: 600;
}

.inventory-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
    text-align: center;
    width: 100%;
}

.inventory-item {
    border-radius: 8px;
    cursor: pointer;
    height: 50px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
    width: 50px;
}

.inventory-item-count {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    bottom: 2px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    position: absolute;
    right: 2px;
}

.inventory-item-img {
    border: 2px solid var(--border-subtle);
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.inventory-item-in-trade {
    align-items: center;
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-dark) 100%);
    border-radius: 50%;
    color: white;
    display: flex;
    font-size: 14px;
    font-weight: bold;
    height: 24px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
}

.inventory-item.in-trade {
    cursor: default;
    opacity: 0.5;
}

.inventory-item.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.inventory-loading {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 60px 20px;
}

.inventory-modal {
    animation: slideUp 0.25s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: 100%;
    left: auto;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
}

.inventory-modal-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
}

.inventory-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    pointer-events: auto;
}

.inventory-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold-dark);
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    position: relative;
}

.inventory-modal-header.picker-mode {
    background: linear-gradient(180deg, rgba(107, 74, 107, 0.4) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid rgba(140, 100, 140, 0.5);
}

.inventory-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(10px);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.inventory-section {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.6) 0%, rgba(18, 17, 15, 0.8) 100% );
    border: 1px solid var(--gold-dark);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

/* Стили для страницы инвентаря - фиксированные размеры слотов */
.skills-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, 64px);
    padding: 16px;
    justify-content: center;
}

.items-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, 64px);
    padding: 16px;
    justify-content: center;
}

.skills-grid .inventory-slot-wrapper,
.items-grid .inventory-slot-wrapper,
.belt-grid .inventory-slot-wrapper {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.invite-text {
    color: #d4d4d4;
    font-size: 14px;
}

.inviter-name {
    color: var(--gold-light);
    font-size: 20px;
    font-weight: 600;
}

.item-modal {
    animation: slideUp 0.25s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0 !important;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    left: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
}

.item-modal-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
}

.item-modal-content {
    align-items: stretch;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 16px;
    pointer-events: auto;
}

.item-modal-content.embedded {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    padding: 12px;
}

.item-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold-dark);
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    position: relative;
}

.item-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2500;
}

.item-modal-overlay.draggable-mode {
    backdrop-filter: none;
    background: transparent;
    pointer-events: none;
}

.item-modal.item-modal-embedded {
    animation: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    margin: 0 auto;
    max-height: none;
    max-width: 680px;
    position: relative !important;
    width: 100%;
}

.level-badge {
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-dark) 100% );
    border: 1px solid var(--gold);
    bottom: -4px;
    box-shadow: 0 2px 8px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: var(--bg-void);
    font-family: var(--font-numeric);
    font-size: 10px;
    font-weight: normal;
    padding: 2px 5px;
    position: absolute;
    right: -4px;
}

.loading-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    z-index: 10;
}

.loading-screen {
    align-items: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(74, 14, 14, 0.4) 0%, transparent 40%), radial-gradient(ellipse at 20% 100%, rgba(92, 74, 31, 0.1) 0%, transparent 30%), radial-gradient(ellipse at 80% 100%, rgba(92, 74, 31, 0.1) 0%, transparent 30%), radial-gradient(ellipse at center, var(--bg-elevated) 0%, var(--bg-void) 100%);
    display: flex;
    justify-content: center;
    min-height: 100dvh;
}

.loading-spinner {
    animation: spin 1s linear infinite;
    border: 3px solid var(--smoke);
    border-radius: 50%;
    border-top-color: var(--gold);
    box-shadow: 0 0 20px var(--shadow-gold);
    height: 52px;
    width: 52px;
}

.loading-spinner-small {
    animation: spin 0.8s linear infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: var(--arcane-glow);
    height: 14px;
    width: 14px;
}

.loading-text {
    color: var(--bone-dark);
    font-family: var(--font-numeric);
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 4px var(--shadow-void);
    text-transform: uppercase;
}

.location-text {
    color: var(--bone);
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.03em;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-badge {
    background: #ff6b6b;
    border-radius: 10px;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
}

.log-content {
    color: #ccc;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 11px;
    gap: 2px;
    overflow-y: auto;
    padding: 10px;
}

.log-header {
    background: rgba(139, 115, 53, 0.1);
    border-bottom: 1px solid #333;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 600;
    padding: 8px;
}

.log-line {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    color: #aaa;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    padding: 3px 5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-toggle {
    align-items: center;
    background: rgba(139, 115, 53, 0.1);
    border-bottom: 1px solid rgba(139, 115, 53, 0.3);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    padding: 10px 8px;
    transition: all 0.2s;
}

.map-error {
    color: #ff6b6b;
    font-size: 14px;
    padding: 20px;
    text-align: center;
}

.member-avatar {
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.member-avatar-img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.member-avatar-placeholder {
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.member-avatar-wrapper {
    flex-shrink: 0;
    height: 40px;
    position: relative;
    width: 40px;
}

.member-buff-item {
    cursor: help;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.member-buff-item.negative {
    filter: drop-shadow(0 0 2px rgba(244, 67, 54, 0.5));
}

.member-buff-item.positive {
    filter: drop-shadow(0 0 2px rgba(139, 115, 53, 0.5));
}

.member-buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.member-coords {
    color: var(--text-secondary);
    font-size: 11px;
    opacity: 0.8;
}

.member-hp-bar {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    height: 6px;
    overflow: hidden;
    width: 100%;
}

.member-hp-bar-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.member-hp-bar-fill {
    background: linear-gradient(90deg, var(--blood) 0%, var(--blood-glow) 50%, var(--gold) 100%);
    height: 100%;
    transition: width 0.3s ease;
}

.member-hp-text {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: 10px;
    white-space: nowrap;
}

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

.member-item {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    padding: 8px 12px;
}

.member-item.more {
    font-style: italic;
    opacity: 0.6;
}

.member-level {
    color: var(--text-secondary);
    font-size: 12px;
}

.member-name {
    color: var(--text-primary);
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-name-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.member-role {
    color: var(--gold-light);
    font-size: 11px;
}

.members-label {
    color: #888;
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-log-content {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50px;
    overflow-y: auto;
    padding: 5px 8px;
}

.mobile-log-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 3px 6px;
    transition: all 0.2s;
}

.mobile-log-icon {
    font-size: 14px;
}

.mobile-log-preview {
    color: #888;
    flex: 1;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-log-toggle {
    color: #666;
    font-size: 10px;
    transition: transform 0.3s;
}

.movement-highlight {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.movement-icon {
    color: var(--gold-light);
    font-size: 16px;
    opacity: 0.7;
    text-shadow: 0 0 8px var(--shadow-gold);
}

.music-btn {
    -webkit-user-select: none;
    align-items: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    justify-content: center;
    min-width: 32px;
    padding: 4px 8px;
    pointer-events: auto !important;
    position: relative;
    transition: all 0.2s;
    user-select: none;
    z-index: 2002;
}

.music-controls {
    align-items: center;
    animation: slideDownMusic 0.2s ease-out;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    pointer-events: auto !important;
    position: relative;
    z-index: 2001;
}

.music-toggle-btn {
    -webkit-user-select: none;
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    height: 40px;
    justify-content: center;
    pointer-events: auto !important;
    position: relative;
    transition: all 0.2s;
    user-select: none;
    width: 40px;
    z-index: 2001;
}

.no-fight {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.no-fight-icon {
    font-size: 64px;
    opacity: 0.5;
}

.no-fight-text {
    font-size: 16px;
}

.notification-badge {
    align-items: center;
    background: var(--accent-red);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.5);
    color: #fff;
    display: flex;
    font-family: var(--font-numeric);
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    position: absolute;
    right: -5px;
    top: -5px;
}

.notification-close {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 24px;
    justify-content: center;
    transition: all 0.2s ease;
    width: 24px;
}

.notification-content {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.notification-text {
    color: var(--text-primary);
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.object-icon {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 0;
    padding: 2px;
    width: 100%;
}

.object-name {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    box-sizing: border-box;
    color: #ddd;
    flex-shrink: 0;
    font-size: clamp(6px, 1.2vw, 8px);
    font-weight: 500;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    padding: 1px 2px;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    width: 100%;
}

.observe-content {
    text-align: center;
}

.offer-empty {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex: 1;
    font-size: 13px;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.offer-gold {
    align-items: center;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    gap: 8px;
    padding: 10px;
}

.offer-gold.editable {
    background: rgba(255, 215, 0, 0.15);
}

.offer-header {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.offer-items {
    align-content: flex-start;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 80px;
}

.offer-player-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.offer-status {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
}

.offer-status.confirmed {
    background: rgba(139, 115, 53, 0.2);
    color: var(--gold-light);
}

.owner-badge {
    align-items: center;
    background: var(--bg-panel);
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
    display: flex;
    font-size: 18px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 24px;
    z-index: 10;
}

.owner-label {
    background: rgba(255, 215, 0, 0.15);
    color: var(--accent-gold);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    white-space: nowrap;
}

.party-actions {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
}

.party-close-btn {
    align-items: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 20px;
    height: 24px;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    width: 24px;
}

.party-count {
    align-items: center;
    background: var(--accent-green);
    border-radius: 9px;
    color: white;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -5px;
}

.party-count-badge {
    background: var(--gold-dark);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    padding: 2px 6px;
    text-align: center;
}

.party-empty {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 20px;
    text-align: center;
}

.party-header {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
}

.party-icon {
    font-size: 18px;
}

.party-invite-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(139, 115, 53, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.party-invite-btn {
    align-items: center;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    padding: 14px 20px;
    transition: all 0.2s ease;
    width: 100%;
}

.party-invite-btn.accept {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: white;
}

.party-invite-btn.decline {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
}

.party-invite-content {
    padding: 24px;
}

.party-invite-error {
    color: #f44336;
    padding: 20px;
    text-align: center;
}

.party-invite-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.12) 0%, rgba(26, 24, 22, 0.9) 100% );
    border-bottom: 2px solid var(--gold-dark);
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 22px;
    position: relative;
}

.party-invite-icon {
    font-size: 32px;
}

.party-invite-message {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.party-invite-modal {
    animation: slideUp 0.25s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 50px var(--shadow-blood);
    max-width: none;
    overflow: hidden;
    position: relative;
    width: 95%;
}

.party-invite-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.85);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 3000;
}

.party-invite-title {
    color: var(--gold-light);
    font-size: 18px;
    font-weight: 600;
}

.party-leave-btn {
    align-items: center;
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    padding: 10px 16px;
    transition: all 0.2s ease;
    width: 100%;
}

.party-member-item {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.party-member-item.owner {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--accent-gold);
}

.party-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

.party-members-panel {
    left: 12px;
    pointer-events: auto;
    position: fixed;
    top: 10px;
    z-index: 1000;
}

.party-members-panel.mobile {
    left: 12px;
    top: 10px;
}

.party-members-preview {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 115, 53, 0.2);
    border-radius: 12px;
    margin-top: 20px;
    padding: 16px;
}

.party-minimize-btn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-left: auto;
    padding: 4px;
    transition: all 0.2s ease;
}

.party-panel-content {
    backdrop-filter: blur(12px);
    background: var(--bg-panel);
    border: 2px solid var(--gold-dark);
    box-shadow: 0 4px 24px var(--shadow-void), 0 0 20px var(--shadow-blood);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    max-width: 320px;
    min-width: 280px;
    padding: 16px;
    transition: width 0.3s ease, height 0.3s ease, min-width 0.3s ease;
}

.party-panel-content.party-minimized {
    height: auto !important;
    max-width: none !important;
    min-height: auto !important;
    min-width: auto !important;
    padding: 0;
    width: auto !important;
}

.party-title {
    color: var(--text-primary);
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.party-toggle-btn {
    align-items: center;
    backdrop-filter: blur(12px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    font-size: 20px;
    font-weight: 500;
    gap: 6px;
    height: 44px;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: all 0.2s ease;
    width: 44px;
}

.picker-actions {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

.picker-cancel-btn {
    align-items: center;
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.2) 0%, rgba(183, 28, 28, 0.3) 100% );
    border: 2px solid rgba(244, 67, 54, 0.4);
    border-radius: 4px;
    color: #f8a8a8;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    padding: 12px 24px;
    transition: all 0.2s ease;
}

.picker-description {
    background: rgba(107, 74, 107, 0.15);
    border: 1px solid rgba(140, 100, 140, 0.3);
    border-radius: 4px;
    padding: 12px 16px;
    text-align: center;
}

.picker-item {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 115, 53, 0.2);
    border-radius: 4px;
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.picker-item-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.picker-item-level {
    color: var(--text-muted);
    font-family: var(--font-numeric);
    font-size: 12px;
}

.picker-item-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-items-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.picker-mode-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 16px;
}

.player-resources {
    display: flex;
    gap: 4px;
}

.portrait-buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.portrait-dead-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    font-size: 20px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.portrait-emoji {
    font-size: 16px;
}

.portrait-frame {
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #666;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 52px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 52px;
}

.portrait-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.portrait-hp-bar {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    height: 2px;
    overflow: hidden;
    width: 100%;
}

.portrait-hp-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 90%;
}

.portrait-hp-fill {
    height: 100%;
    transition: width 0.3s;
}

.portrait-hp-fill.ally {
    background: linear-gradient(90deg, #4CAF50, #66BB6A);
}

.portrait-hp-fill.enemy {
    background: linear-gradient(90deg, #ff6b6b, #ff8787);
}

.portrait-hp-text {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.portrait-img {
    height: 100%;
    image-rendering: pixelated;
    object-fit: cover;
    width: 100%;
}

.portrait-info {
    display: none;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.portrait-level {
    color: var(--gold-light);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 9px;
}

.portrait-name {
    color: #ccc;
    display: none;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 8px;
    max-width: 40px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portrait-status {
    display: flex;
    font-size: 8px;
    gap: 2px;
    position: absolute;
    right: 2px;
    top: 2px;
}

.portrait-team-tag {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
    height: 12px;
    image-rendering: pixelated;
    left: -2px;
    object-fit: contain;
    position: absolute;
    top: -2px;
    width: 12px;
    z-index: 5;
}

.preview-author {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 600;
}

.preview-text {
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-action-btn {
    align-items: center;
    background: rgba(139, 115, 53, 0.12);
    border: 1px solid rgba(139, 115, 53, 0.35);
    color: var(--gold-light);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    padding: 12px 16px;
    text-align: center;
    transition: all 0.2s ease;
    width: 100%;
}

.profile-action-btn.attack {
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.35);
    color: #f44336;
}

.profile-action-btn.invite {
    background: rgba(100, 181, 246, 0.12);
    border-color: rgba(100, 181, 246, 0.35);
    color: #64B5F6;
}

.profile-action-btn.team {
    background: rgba(139, 115, 53, 0.15);
    border-color: var(--gold-dark);
    color: var(--gold-light);
}

.profile-action-btn.trade {
    background: rgba(139, 115, 53, 0.15);
    border: 1px solid rgba(139, 115, 53, 0.4);
    color: var(--gold-light);
}

.profile-actions-section {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-subtle);
    margin-top: 16px;
    padding: 16px;
}

.profile-avatar-container {
    flex-shrink: 0;
    position: relative;
}

.profile-avatar-img {
    background: var(--bg-panel);
    border-radius: 50%;
    height: 80px;
    object-fit: cover;
    width: 80px;
}

.profile-avatar-ring {
    align-items: center;
    background: conic-gradient( var(--gold-light) calc(var(--exp-progress, 0) * 3.6deg), rgba(139, 115, 53, 0.2) calc(var(--exp-progress, 0) * 3.6deg) );
    border-radius: 50%;
    display: flex;
    height: 90px;
    justify-content: center;
    padding: 4px;
    width: 90px;
}

.profile-description-box {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--accent-green);
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 16px 16px;
    padding: 12px 16px;
}

.profile-error {
    color: var(--accent-red);
}

.profile-exp-text {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: 12px;
    margin-bottom: 8px;
}

.profile-guild-badge {
    align-items: center;
    background: rgba(250, 196, 59, 0.15);
    border: 1px solid rgba(250, 196, 59, 0.3);
    display: inline-flex;
    gap: 6px;
    padding: 6px 12px;
}

.profile-id-label {
    color: var(--text-muted);
    font-family: var(--font-numeric);
    font-size: 12px;
}

.profile-id-value {
    font-family: var(--font-numeric);
    font-size: 14px;
    font-weight: 700;
}

.profile-id-value.id {
    color: #C728FF;
}

.profile-id-value.level {
    color: #284BFF;
}

.profile-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.profile-info-block {
    flex: 1;
    min-width: 0;
}

.profile-level-badge {
    align-items: center;
    background: linear-gradient(135deg, var(--accent-gold), #FFA000);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6);
    color: #1a1a1a;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 32px;
}

.profile-main-info {
    align-items: center;
    display: flex;
    gap: 20px;
    padding: 16px;
}

.profile-modal {
    animation: slideUp 0.25s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: 100%;
    left: auto !important;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    top: auto !important;
    transform: none !important;
    width: 100%;
}

.profile-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    pointer-events: auto;
}

.profile-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold-dark);
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    position: relative;
}

.profile-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.85);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.profile-player-name {
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-weight: 700;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-stat-item {
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
}

.profile-stats-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
}

.progress-bar {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(10, 9, 8, 0.9) 100% );
    border: 1px solid var(--smoke);
    border-radius: 0;
    height: 12px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    position: relative;
    transition: width 0.4s ease;
}

.progress-fill.exp {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 15px var(--shadow-gold);
}

.progress-fill.hp {
    background: linear-gradient(90deg, var(--blood-dark), var(--blood), var(--blood-light));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 15px var(--shadow-blood);
}

.progress-text {
    color: var(--bone);
    font-family: var(--font-numeric);
    font-size: 8px;
    font-weight: 600;
    left: 50%;
    letter-spacing: 0.1em;
    position: absolute;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%, -50%);
}

.progress-value {
    color: var(--bone);
    font-family: var(--font-numeric);
    font-size: 9px;
    font-weight: 600;
    left: 50%;
    letter-spacing: 0.05em;
    position: absolute;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    white-space: nowrap;
}

.quest-count {
    color: #4a9eff;
    font-size: 14px;
    font-weight: 600;
}

.quest-date {
    color: var(--text-muted);
    font-family: var(--font-numeric);
    font-size: 12px;
}

.quest-description {
    color: #cccccc;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.quest-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.quest-item {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.8) 0%, rgba(18, 17, 15, 0.9) 100% );
    border: 1px solid var(--gold-dark);
    padding: 16px 18px;
    position: relative;
    transition: all 0.3s;
}

.quest-item.completed {
    border-color: var(--smoke);
    opacity: 0.6;
}

.quest-journal-loading {
    align-items: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 40px;
}

.quest-journal-modal {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0;
    bottom: 0;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    left: 0;
    max-height: 100vh;
    max-width: 100%;
    overflow: hidden;
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2001;
}

.quest-journal-modal-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding: 20px;
    pointer-events: auto;
}

.quest-journal-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold-dark);
    cursor: grab;
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    position: relative;
    user-select: none;
}

.quest-journal-modal-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.quest-journal-modal-overlay.draggable-mode {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.quest-journal-modal.is-dragging {
    cursor: grabbing;
}

.quest-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quest-name {
    color: var(--bone);
    font-family: var(--font-numeric);
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0.02em;
}

.quest-progress {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
    text-align: left;
}

.quest-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quest-stage {
    margin-bottom: 8px;
}

.quest-stage-name {
    color: #4a9eff;
    font-size: 14px;
    font-weight: 600;
}

.quick-btn {
    align-items: center;
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.95) 0%, rgba(10, 9, 8, 0.98) 100% );
    border: 2px solid var(--smoke);
    box-shadow: 0 4px 16px var(--shadow-void), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    color: var(--bone);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 15px;
    height: 34px;
    justify-content: center;
    max-width: 34px;
    min-width: 34px;
    padding: 0;
    position: relative;
    transition: all 0.3s ease;
    width: 34px;
}

.quick-btn.active {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.25) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-color: var(--gold);
    color: var(--gold-light);
}

.race-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.race-card {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.8) 0%, rgba(10, 9, 8, 0.9) 100% );
    border: 2px solid var(--smoke);
    cursor: pointer;
    padding: 16px;
    position: relative;
    text-align: center;
    transition: all 0.3s;
}

.race-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.race-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 24px;
}

.race-image {
    border-radius: 6px;
    height: 120px;
    margin-bottom: 12px;
    object-fit: cover;
    width: 100%;
}

.race-name {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.race-view {
    margin-bottom: 24px;
}

.race-view-image {
    border-radius: 8px;
    display: block;
    height: auto;
    margin: 0 auto 24px;
    max-width: 400px;
    width: 100%;
}

.registration-intro {
    max-width: 800px;
    width: 100%;
}

.registration-loading {
    align-items: center;
    background: radial-gradient(ellipse at center, #151820 0%, #0a0c10 100%);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.registration-panel {
    align-items: center;
    background: radial-gradient(ellipse at center, #151820 0%, #0a0c10 100%);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow-y: auto;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

.registration-step {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 50%, rgba(10, 9, 8, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    box-shadow: 0 8px 32px var(--shadow-void), 0 0 40px var(--shadow-blood);
    margin: 20px;
    max-width: 600px;
    padding: 24px;
    position: relative;
    width: 100%;
}

.resource {
    align-items: center;
    border-radius: 10px;
    display: flex;
    font-size: 10px;
    font-weight: 500;
    gap: 2px;
    padding: 2px 4px;
}

.resource-icon {
    font-size: 9px;
}

.resource-label {
    display: none;
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
}

.resource-value {
    font-family: var(--font-numeric);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.resource.ap {
    background: rgba(139, 115, 53, 0.15);
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
}

.resource.mp {
    background: rgba(33, 150, 243, 0.15);
    border: 1px solid rgba(33, 150, 243, 0.3);
    color: #2196F3;
}

.return-btn {
    background: rgba(138, 43, 226, 0.2);
    border-color: #8A2BE2;
}

.reward-icon {
    font-size: 20px;
    text-align: center;
    width: 24px;
}

.reward-item-card {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    gap: 12px;
    padding: 12px;
}

.reward-item-count {
    color: var(--text-secondary);
    font-size: 12px;
}

.reward-item-details {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 8px;
}

.reward-item-image {
    flex-shrink: 0;
    height: 48px;
    width: 48px;
}

.reward-item-img {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.reward-item-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.reward-item-level {
    color: var(--text-secondary);
}

.reward-item-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.reward-item-placeholder {
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    font-size: 24px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.reward-item-rarity {
    font-weight: 600;
}

.reward-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.reward-items-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reward-items-spoiler {
    cursor: pointer;
    min-height: 60px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    user-select: none;
}

.reward-items-spoiler.revealed {
    background: transparent;
    cursor: default;
    filter: none;
}

.reward-modal {
    animation: slideUp 0.25s ease, reward-glow 2s ease-in-out infinite;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 80px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    left: auto !important;
    max-height: 100vh;
    max-width: 100%;
    overflow: hidden;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
}

.reward-modal-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 12px;
    padding: 16px 20px;
}

.reward-modal-content {
    align-items: stretch;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 16px;
    pointer-events: auto;
}

.reward-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.2) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold);
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    position: relative;
}

.reward-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 0;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2500;
}

.reward-modal-overlay.draggable-mode {
    backdrop-filter: none;
    background: transparent;
    pointer-events: none;
}

.reward-section-header {
    margin-bottom: 8px;
}

.reward-section-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.reward-spoiler-hint {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    color: var(--accent-gold);
    font-size: 14px;
    font-weight: 600;
    padding: 16px 24px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.reward-spoiler-overlay {
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

.reward-stat-item {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 12px;
    padding: 8px 12px;
}

.reward-stat-label {
    color: var(--text-secondary);
    flex: 1;
    font-size: 14px;
}

.reward-stat-value {
    color: var(--accent-gold);
    font-size: 16px;
    font-weight: 700;
}

.reward-stats-section {
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.reward-text {
    color: var(--gold-light);
    font-family: var(--font-numeric);
    font-size: 0.9rem;
    font-weight: normal;
    text-align: center;
}

.reward-text-section {
    background: rgba(139, 115, 53, 0.15);
    border: 1px solid var(--gold-dark);
    padding: 12px;
}

.run-away-btn {
    background: rgba(139, 115, 53, 0.2);
    border-color: var(--gold-dark);
}

.section-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.1) 0%, rgba(0, 0, 0, 0.3) 100% );
    border-bottom: 1px solid var(--border-accent);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    position: relative;
    transition: all 0.3s ease;
    user-select: none;
}

.section-toggle {
    color: var(--gold);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.skill-btn {
    align-items: center;
    background: rgba(139, 115, 53, 0.2);
    border: 2px solid var(--gold);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    max-width: 100px;
    min-width: 70px;
    padding: 6px 10px;
    position: relative;
    transition: all 0.2s;
}

.skill-btn.disabled {
    background: rgba(50, 50, 50, 0.3);
    border-color: #333;
    cursor: not-allowed;
    opacity: 0.5;
}

.skill-cost {
    color: var(--gold-light);
    font-size: 8px;
    font-weight: 600;
}

.skill-icon {
    font-size: 28px;
    line-height: 1;
}

.skill-icon-container {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: center;
    position: relative;
    width: 40px;
}

.skill-icon-img {
    height: 100%;
    image-rendering: crisp-edges;
    object-fit: contain;
    width: 100%;
}

.skill-name {
    color: #ddd;
    font-size: 10px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skip-btn {
    background: rgba(128, 128, 128, 0.2);
    border-color: #808080;
}

.stack-btn {
    align-items: center;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--smoke);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 36px;
    justify-content: center;
    transition: all 0.3s ease;
    width: 36px;
}

.stat-bar {
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    height: 28px;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.stat-bar-fill {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 0.3s ease;
}

.stat-bar-fill.hp {
    background: linear-gradient(90deg, #b71c1c, #e53935);
}

.stat-card {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.8) 0%, rgba(10, 9, 8, 0.9) 100% );
    border: 2px solid var(--smoke);
    cursor: pointer;
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
}

.stat-description {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 24px;
}

.stat-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.stat-name {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.statistics-list {
    padding: 12px 16px;
}

.statistics-row {
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 10px 12px;
}

.status-badge {
    bottom: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
    max-width: calc(100% - 4px);
    position: absolute;
    right: 2px;
}

.status-center {
    flex: 0 0 auto;
    order: 3;
}

.status-debuff {
    align-items: center;
    background: rgba(244, 67, 54, 0.3);
    border: 1px solid rgba(244, 67, 54, 0.5);
    border-radius: 3px;
    display: flex;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.status-icon {
    font-size: 14px;
    line-height: 1;
}

.status-info-content {
    align-items: center;
    display: flex;
    gap: 8px;
}

.status-left {
    flex: 0 0 auto;
    justify-content: flex-start;
    order: 2;
}

.status-progress-bar {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    height: 4px;
    overflow: hidden;
}

.status-progress-fill {
    background: linear-gradient(90deg, #4a90d9 0%, #6ab0f9 100%);
    border-radius: 2px;
    height: 100%;
    transition: width 0.3s ease;
}

.status-right {
    flex: 0 0 auto;
    justify-content: flex-start;
    order: 1;
}

.status-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
}

.status-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-title {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.step-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    text-align: center;
}

.target-btn-compact {
    background: rgba(139, 115, 53, 0.2);
    border: 1px solid var(--gold);
    border-radius: 3px;
    color: var(--gold-light);
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    padding: 4px;
    transition: all 0.2s;
    width: 100%;
}

.target-highlight {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

.target-icon {
    animation: rotate-star 3s linear infinite;
    color: var(--gold);
    font-size: 20px;
    text-shadow: 0 0 10px var(--shadow-gold);
}

.target-selection-indicator {
    align-items: center;
    animation: pulse-border 1.5s infinite;
    background: linear-gradient(135deg, rgba(139, 115, 53, 0.25) 0%, rgba(92, 74, 31, 0.25) 100%);
    border: 1px solid var(--gold);
    border-radius: 6px;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    padding: 6px 12px;
}

.time-text {
    color: var(--gold-light);
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.timer-icon {
    font-size: 16px;
}

.timer-value {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.toggle-icon {
    color: var(--gold-light);
    font-size: 12px;
    transition: transform 0.3s;
}

.toggle-text {
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.token-hp {
    background: #ff6b6b;
    border-radius: 1px;
    height: 100%;
    transition: width 0.3s;
}

.token-hp-container {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    flex-shrink: 0;
    height: clamp(2px, 0.6vw, 3px);
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 95%;
}

.token-icon {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 4px;
    width: 100%;
}

.token-name {
    box-sizing: border-box;
    color: #ddd;
    display: none;
    flex-shrink: 0;
    font-size: clamp(5px, 1.2vw, 7px);
    font-weight: 600;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    padding: 0 1px;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    width: 100%;
}

.token-name.long-name {
    display: none;
    font-size: clamp(6px, 1.5vw, 10px);
}

.top-bar-buffs {
    display: none;
    flex-shrink: 0;
    gap: 3px;
}

.top-bar-divider {
    background: var(--gold-dark);
    display: none;
    flex-shrink: 0;
    height: 24px;
    opacity: 0.5;
    width: 0.5px;
}

.top-bar-section {
    align-items: center;
    display: flex;
    flex-shrink: 1;
    gap: 6px;
    min-width: 0;
}

.trade-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    padding: 8px 0;
}

.trade-arrow {
    animation: pulse 2s infinite;
    color: var(--text-muted);
    font-size: 28px;
}

.trade-btn {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.9) 0%, rgba(10, 9, 8, 0.95) 100% );
    border: 2px solid var(--smoke);
    color: var(--bone);
    cursor: pointer;
    flex: 1;
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.02em;
    max-width: none;
    padding: 14px 24px;
    transition: all 0.3s ease;
}

.trade-btn.cancel {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
}

.trade-btn.confirm {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100% );
    border: 2px solid var(--gold-light);
    color: var(--bg-void);
}

.trade-btn.unconfirm {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid rgba(255, 152, 0, 0.4);
    color: #ff9800;
}

.trade-count-actions {
    display: flex;
    gap: 12px;
}

.trade-count-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    transition: all 0.2s;
}

.trade-count-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.trade-count-cancel {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
}

.trade-count-close {
    align-items: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 20px;
    height: 24px;
    justify-content: center;
    padding: 0;
    transition: color 0.2s;
    width: 24px;
}

.trade-count-confirm {
    background: linear-gradient(135deg, var(--accent-green), #45a049);
    color: white;
}

.trade-count-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.trade-count-header {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
}

.trade-count-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    padding: 12px;
    text-align: center;
    width: 100%;
}

.trade-count-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trade-count-item-available {
    color: var(--text-secondary);
    font-size: 13px;
}

.trade-count-item-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.trade-count-item-img {
    border: 2px solid var(--border-subtle);
    border-radius: 8px;
    height: 60px;
    object-fit: cover;
    width: 60px;
}

.trade-count-item-info {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    gap: 16px;
    padding: 12px;
}

.trade-count-item-name {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.trade-count-modal {
    animation: slideUp 0.3s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    box-shadow: 0 12px 40px var(--shadow-void), 0 0 30px var(--shadow-blood);
    max-width: 400px;
    width: 90%;
}

.trade-count-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    background: rgba(0, 0, 0, 0.85);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 11000;
}

.trade-count-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.trade-divider {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 8px 0;
    transform: rotate(90deg);
}

.trade-inventory {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 220px;
    min-height: 150px;
    overflow-y: auto;
    padding: 12px;
}

.trade-inventory-divider {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 12px;
    padding: 8px 0;
}

.trade-invite-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.trade-invite-btn {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s ease;
}

.trade-invite-btn.accept {
    background: linear-gradient(135deg, var(--accent-green), #45a049);
    color: white;
}

.trade-invite-btn.decline {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
}

.trade-invite-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.trade-invite-message {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.trade-invite-modal {
    animation: slideUp 0.3s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 320px;
    padding: 28px;
    text-align: center;
    width: 90%;
}

.trade-invite-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.trade-invite-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.trade-item {
    cursor: default;
    height: 50px;
    overflow: hidden;
    position: relative;
    width: 50px;
}

.trade-item-count {
    background: rgba(0, 0, 0, 0.8);
    bottom: 2px;
    color: white;
    font-family: var(--font-numeric);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    position: absolute;
    right: 2px;
}

.trade-item-img {
    border: 2px solid var(--border-subtle);
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.trade-item-remove {
    align-items: center;
    background: var(--accent-red);
    border-radius: 50%;
    color: white;
    display: flex;
    font-size: 12px;
    height: 18px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: -4px;
    top: -4px;
    transition: opacity 0.2s;
    width: 18px;
}

.trade-item.locked {
    cursor: not-allowed;
    opacity: 0.7;
}

.trade-item.removable {
    cursor: pointer;
}

.trade-modal {
    animation: slideUp 0.3s ease;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(18, 17, 15, 0.98) 30%, rgba(10, 9, 8, 0.98) 70%, rgba(5, 5, 5, 0.98) 100% );
    border: 2px solid var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-blood), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    max-width: 100%;
    min-height: 70vh;
    overflow: hidden;
    pointer-events: auto;
    position: absolute;
    right: 20px;
    top: 100px;
    touch-action: none;
    width: 600px;
}

.trade-modal-content {
    -ms-overflow-style: none;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: none;
}

.trade-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-bottom: 2px solid var(--gold-dark);
    cursor: grab;
    display: flex;
    justify-content: space-between;
    padding: 18px 24px;
    position: relative;
    user-select: none;
}

.trade-modal-overlay {
    align-items: flex-start;
    animation: none;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.85);
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    left: 0;
    padding: calc(16px + var(--tg-safe-area-top, 0px)) 16px calc(16px + var(--tg-safe-area-bottom, 0px)) 16px;
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.trade-offer-block {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border-subtle);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    min-height: 150px;
    padding: 14px;
    transition: all 0.3s ease;
}

.trade-offer-block.confirmed {
    background: rgba(139, 115, 53, 0.1);
    border-color: var(--gold);
}

.trade-offer-block.mine.confirmed {
    opacity: 0.8;
}

.trade-offer-block.other {
    opacity: 0.9;
}

.trade-offers-container {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.turn-icon {
    font-size: 11px;
}

.turn-indicator {
    align-items: center;
    border-radius: 12px;
    display: flex;
    font-family: var(--font-numeric);
    font-size: 9px;
    font-weight: normal;
    gap: 8px;
    letter-spacing: 0.02em;
    padding: 2px 5px;
    transition: all 0.3s;
}

.turn-indicator.enemy-turn {
    background: linear-gradient(180deg, rgba(107, 26, 26, 0.4) 0%, rgba(74, 14, 14, 0.3) 100% );
    border: 2px solid var(--blood);
    color: var(--bone-dark);
}

.turn-indicator.your-turn {
    animation: your-turn-pulse 2s infinite;
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.5) 0%, rgba(92, 74, 31, 0.4) 100% );
    border: 2px solid var(--gold);
    box-shadow: 0 0 20px var(--shadow-gold);
    color: var(--gold-pale);
}

.turn-info-compact {
    background: rgba(139, 115, 53, 0.1);
    border: 1px solid var(--gold);
    border-radius: 6px;
    color: #ddd;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    gap: 3px;
    padding: 6px 10px;
    text-align: center;
}

.turn-text {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 8px;
    max-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turn-timer {
    align-items: center;
    background: rgba(139, 115, 53, 0.2);
    border: 1px solid var(--gold-dark);
    border-radius: 16px;
    color: var(--gold-light);
    display: flex;
    font-size: 11px;
    font-weight: normal;
    gap: 6px;
    padding: 3px 6px;
}

.turn-timer.timer-low {
    animation: timer-warning 0.5s infinite;
    background: rgba(107, 26, 26, 0.3);
    border-color: var(--blood);
    color: var(--blood-light);
}

.volume-indicator {
    -webkit-user-select: none;
    color: white;
    font-size: 11px;
    font-weight: 500;
    min-width: 35px;
    text-align: center;
    user-select: none;
}

.weapon-card {
    align-items: center;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.8) 0%, rgba(10, 9, 8, 0.9) 100% );
    border: 2px solid var(--smoke);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 20px;
    transition: all 0.3s;
}

.weapon-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 24px;
}

.weapon-icon-wrapper {
    align-items: center;
    background: linear-gradient(135deg, rgba(20, 18, 16, 0.95) 0%, rgba(10, 9, 8, 1) 100%);
    border: 2px solid var(--gold);
    border-radius: 8px;
    display: flex;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.weapon-icon-wrapper .game-icon {
    color: var(--gold);
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
}

.weapon-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.weapon-icon {
    font-size: 48px;
}

.weapon-name {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

.weapon-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

.weapon-skill-exp {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: 11px;
    text-align: right;
}

.weapon-skill-info {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.weapon-skill-level {
    color: var(--accent-gold);
    font-family: var(--font-numeric);
    font-size: 14px;
    font-weight: 600;
}

.weapon-skill-max {
    color: var(--accent-gold);
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.weapon-skill-name {
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-size: 14px;
    font-weight: 600;
}

.weapon-skill-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.weapon-skill-progress-bar {
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    overflow: hidden;
    width: 100%;
}

.weapon-skill-progress-fill {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    height: 100%;
    transition: width 0.3s ease;
}

.weapon-skill-row {
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    padding: 12px;
}

.weapon-skills-list {
    padding: 12px 16px;
}

.world-map {
    bottom: 0;
    contain: layout style paint;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.achievement-detail-close:hover {
    background: rgba(244, 67, 54, 0.2);
    color: #ff5252;
}

.achievement-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
    z-index: 10;
}

.action-btn .keybind-badge {
    align-items: center;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(139, 115, 53, 0.7);
    border-radius: 3px;
    color: var(--gold-light);
    display: flex;
    font-family: var(--font-numeric);
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    left: 4px;
    position: absolute;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 3;
    top: 4px;
    width: 18px;
}

.action-btn.additional-attack:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(160, 120, 50, 0.5) 0%, rgba(120, 85, 35, 0.35) 100%);
    border-color: rgba(220, 180, 100, 0.85);
    box-shadow: 0 4px 16px rgba(180, 140, 60, 0.4), 0 0 12px rgba(180, 140, 60, 0.5);
}

.action-btn.attack:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(160, 50, 50, 0.5) 0%, rgba(120, 35, 35, 0.35) 100%);
    border-color: rgba(220, 100, 100, 0.85);
    box-shadow: 0 4px 16px var(--shadow-blood), 0 0 12px rgba(180, 60, 60, 0.5);
}

.action-btn.belt-item:hover:not(.disabled) {
    background: linear-gradient(145deg, rgba(92, 74, 31, 0.5) 0%, rgba(40, 36, 32, 0.9) 100%);
    border-color: var(--gold);
}

.action-btn.buy:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100% );
    border-color: var(--gold-pale);
    box-shadow: 0 8px 30px var(--shadow-gold), 0 0 30px var(--shadow-gold);
    transform: translateY(-3px);
}

.action-btn.delete:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(139, 37, 37, 0.5) 0%, rgba(107, 26, 26, 0.65) 100% );
    border-color: var(--blood-light);
    box-shadow: 0 4px 20px var(--shadow-blood);
    transform: translateY(-2px);
}

.action-btn.equip:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(168, 146, 74, 0.5) 0%, rgba(139, 115, 53, 0.6) 100% );
    border-color: var(--gold-light);
    box-shadow: 0 6px 25px var(--shadow-gold), 0 0 25px var(--shadow-gold);
    transform: translateY(-3px);
}

.action-btn.escape:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(180, 155, 75, 0.5) 0%, rgba(140, 120, 55, 0.35) 100%);
    border-color: rgba(230, 200, 110, 0.85);
    box-shadow: 0 4px 16px var(--shadow-gold), 0 0 12px rgba(200, 170, 90, 0.5);
}

.action-btn.mark-sell.marked:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.5) 0%, rgba(139, 115, 53, 0.3) 100%);
    box-shadow: 0 4px 20px var(--shadow-gold);
}

.action-btn.mark-sell:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(107, 101, 96, 0.4) 0%, rgba(107, 101, 96, 0.25) 100%);
    box-shadow: 0 4px 20px rgba(107, 101, 96, 0.3);
    transform: translateY(-2px);
}

.action-btn.return:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(90, 110, 130, 0.35) 0%, rgba(90, 110, 130, 0.2) 100%);
    border-color: rgba(120, 140, 160, 0.7);
    box-shadow: 0 4px 12px rgba(90, 110, 130, 0.3);
}

.action-btn.sell:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(120, 135, 150, 0.45) 0%, rgba(100, 115, 130, 0.6) 100% );
    border-color: rgba(150, 165, 180, 0.6);
    box-shadow: 0 6px 25px rgba(100, 115, 130, 0.4), 0 0 20px rgba(120, 135, 150, 0.3);
    transform: translateY(-3px);
}

.action-btn.skill:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(150, 110, 160, 0.5) 0%, rgba(110, 80, 120, 0.35) 100%);
    border-color: rgba(200, 160, 220, 0.85);
    box-shadow: 0 4px 16px rgba(130, 90, 140, 0.4), 0 0 12px rgba(160, 120, 180, 0.5);
}

.action-btn.truce:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(90, 160, 120, 0.5) 0%, rgba(60, 120, 85, 0.35) 100%);
    border-color: rgba(130, 210, 160, 0.85);
    box-shadow: 0 4px 16px rgba(70, 140, 100, 0.4), 0 0 12px rgba(100, 180, 130, 0.5);
}

.action-btn.unequip:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(168, 146, 74, 0.45) 0%, rgba(139, 115, 53, 0.55) 100% );
    border-color: var(--gold);
    box-shadow: 0 6px 25px var(--shadow-gold), 0 0 20px var(--shadow-gold);
    transform: translateY(-3px);
}

.action-btn.use:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(140, 100, 140, 0.5) 0%, rgba(107, 74, 107, 0.6) 100% );
    border-color: rgba(180, 140, 180, 0.7);
    box-shadow: 0 6px 25px rgba(107, 74, 107, 0.4), 0 0 20px rgba(140, 100, 140, 0.3);
    transform: translateY(-3px);
}

.action-btn:active:not(.disabled) {
    transform: translateY(0);
}

.action-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(0.5);
    opacity: 0.5;
}

.action-btn:hover:not(.disabled) {
    background: var(--bg-elevated);
    border-color: var(--gold);
    box-shadow: 0 4px 16px var(--shadow-gold), 0 0 8px rgba(139, 115, 53, 0.4);
    transform: translateY(-2px);
}

.attack-btn:hover:not(.disabled) {
    background: rgba(255, 107, 107, 0.3);
    border-color: #ff8787;
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
}

.auth-button::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    content: '';
    height: 50%;
    left: 2px;
    pointer-events: none;
    position: absolute;
    right: 2px;
    top: 2px;
}

.auth-button:active {
    transform: translateY(0);
}

.auth-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.auth-button:hover {
    background: linear-gradient(180deg, var(--blood-glow) 0%, var(--blood) 100%);
    border-color: var(--blood-light);
    box-shadow: 0 8px 35px var(--shadow-blood), 0 0 40px var(--shadow-blood);
    color: #fff;
    transform: translateY(-3px);
}

.avatar-img, .avatar-placeholder {
    border: 3px solid var(--gold-dark);
    border-radius: 50%;
    box-shadow: 0 4px 16px var(--shadow-void), 0 0 15px var(--shadow-blood), inset 0 0 10px rgba(0, 0, 0, 0.3);
    height: 38px;
    object-fit: cover;
    transition: all 0.3s ease;
    width: 38px;
}

.avatar-wrapper:hover .avatar-img, .avatar-wrapper:hover .avatar-placeholder {
    border-color: var(--gold-light);
    box-shadow: 0 6px 25px var(--shadow-void), 0 0 25px var(--shadow-gold);
    transform: scale(1.08);
}

.back-btn:hover:not(.disabled) {
    background: rgba(100, 149, 237, 0.3);
    border-color: #87CEEB;
    box-shadow: 0 4px 8px rgba(100, 149, 237, 0.3);
}

.belt-grid .inventory-slot-wrapper {
    position: relative;
}

.belt-grid .inventory-slot-wrapper::after {
    border: 2px solid var(--gold-dark);
    border-radius: 8px;
    content: '';
    inset: -2px;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
}

.belt-item-slot:hover:not(.on-cooldown) {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.3);
    transform: scale(1.05);
}

.belt-section .section-header {
    background: linear-gradient(90deg, rgba(92, 74, 31, 0.2) 0%, transparent 100%);
}

.boss-death .boss-danger-badge {
    animation: death-badge-glow 1.5s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(80, 0, 0, 0.9) 0%, rgba(40, 0, 0, 0.9) 100%);
    border-color: rgba(255, 50, 50, 0.5);
    color: #ff4444;
}

.boss-global .boss-danger-badge {
    background: linear-gradient(135deg, rgba(150, 50, 200, 0.8) 0%, rgba(100, 30, 150, 0.8) 100%);
    border-color: rgba(200, 100, 255, 0.3);
    color: #e0b3ff;
}

.boss-hp-fill::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
    border-radius: 3px 3px 0 0;
    content: '';
    height: 40%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.boss-local .boss-danger-badge {
    background: linear-gradient(135deg, rgba(180, 120, 50, 0.8) 0%, rgba(120, 80, 30, 0.8) 100%);
    border-color: rgba(255, 180, 100, 0.3);
    color: #ffe0b3;
}

.btn-primary, .btn-secondary {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    max-width: 300px;
    padding: 12px 24px;
    transition: all 0.2s;
    width: 100%;
}

.btn-primary:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--blood-glow) 0%, var(--blood) 100%);
    border-color: var(--blood-light);
    box-shadow: 0 6px 25px var(--shadow-blood), 0 0 30px var(--shadow-blood);
    color: #fff;
    transform: translateY(-2px);
}

.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--shadow-gold);
    color: var(--gold-pale);
    transform: translateY(-2px);
}

.buff-icon img {
    height: 12px;
    object-fit: contain;
    width: 12px;
}

.buff-icon:hover {
    transform: scale(1.25);
    z-index: 10;
}

.chat-close:hover {
    background: rgba(244, 67, 54, 0.3);
    color: var(--accent-red);
}

.chat-modal .channel-tab {
    color: var(--ash) !important;
}

.chat-modal .channel-tab.active {
    color: var(--gold) !important;
}

.chat-modal .chat-input {
    color: var(--bone) !important;
}

.chat-modal .message-author {
    color: var(--gold-light) !important;
}

.chat-modal .message-text {
    color: var(--bone) !important;
}

.chat-modal .message-text, .chat-modal .message-author, .chat-modal .message-time, .chat-modal .modal-title, .chat-modal .channel-tab, .chat-modal .chat-input, .chat-modal .empty-text, .chat-modal .empty-icon, .chat-modal button, .chat-modal span:not(.unread-badge) {
    opacity: 1 !important;
}

.chat-modal .modal-title {
    color: var(--bone) !important;
}

.chat-modal::after {
    border-width: 0 1px 1px 0;
    bottom: 6px;
    right: 6px;
}

.chat-modal::before {
    border-width: 1px 0 0 1px;
    left: 6px;
    top: 6px;
}

.chat-modal::before, .chat-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 20px;
    opacity: 0.6;
    pointer-events: none;
    position: absolute;
    width: 20px;
    z-index: 10;
}

.chat-preview-bubble:hover {
    background: var(--bg-panel-hover);
    border-color: var(--gold);
}

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

.content-body::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 53, 0.4);
    border-radius: 3px;
}

.content-body::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 115, 53, 0.6);
}

.content-body::-webkit-scrollbar-track {
    background: transparent;
}

.content-close-btn:hover {
    background: rgba(244, 67, 54, 0.3);
    color: var(--accent-red);
}

.content-header:hover {
    background: rgba(0, 0, 0, 0.4);
}

.content-image img {
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
}

.content-modal .content-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-height: calc(100vh - 300px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.content-modal .content-image {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    max-height: 300px;
    overflow: hidden;
}

.content-modal .content-image img {
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
}

.content-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 10px;
    right: 10px;
}

.content-modal::before {
    border-width: 2px 0 0 2px;
    left: 10px;
    top: 10px;
}

.content-modal::before, .content-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 35px;
    pointer-events: none;
    position: absolute;
    width: 35px;
    z-index: 10;
}

.context-menu-action:active:not(.disabled) {
    transform: translateX(2px);
}

.context-menu-action:hover:not(.disabled) {
    background: rgba(139, 115, 53, 0.15);
    border-color: rgba(139, 115, 53, 0.4);
    transform: translateX(4px);
}

.context-menu-close:hover {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.crafting-item-card:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--gold-dark);
    box-shadow: 0 0 15px var(--shadow-gold);
}

.crafting-modal-actions .action-btn.stop-craft {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
    cursor: pointer;
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s;
    width: 100%;
}

.crafting-modal-actions .action-btn.stop-craft:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.crafting-modal-actions .action-btn.stop-craft:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.3);
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.3);
    transform: translateY(-2px);
}

.crafting-modal-content::-webkit-scrollbar {
    width: 8px;
}

.crafting-modal-content::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 4px;
}

.crafting-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.crafting-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.crafting-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
}

.crafting-modal-header::before {
    background: var(--bg-dark);
    bottom: -10px;
    color: var(--gold);
    content: '⚒';
    font-size: 14px;
    left: 50%;
    padding: 0 10px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.crafting-modal-overlay.draggable-mode .crafting-modal {
    box-shadow: 0 12px 48px var(--shadow-void), 0 0 40px var(--shadow-gold), 0 0 0 1px var(--gold-dark);
    max-height: 70vh;
    max-width: 550px;
    pointer-events: auto;
    position: fixed;
    transition: box-shadow 0.2s ease;
    width: 550px;
}

.crafting-modal-overlay.draggable-mode .crafting-modal:hover {
    box-shadow: 0 16px 56px var(--shadow-void), 0 0 50px var(--shadow-gold), 0 0 0 1px var(--gold);
}

.crafting-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 8px;
    right: 8px;
}

.crafting-modal::before {
    border-width: 2px 0 0 2px;
    left: 8px;
    top: 8px;
}

.crafting-modal::before, .crafting-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 28px;
    pointer-events: none;
    position: absolute;
    width: 28px;
    z-index: 10;
}

.crafting-result-section, .crafting-required-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.creature-card.compact.ally .hp-bar {
    background: linear-gradient(90deg, #4CAF50, #66BB6A);
}

.creature-card.compact.ally.summon .hp-bar {
    background: linear-gradient(90deg, #6495ED, #87CEEB);
}

.creature-card.compact:hover {
    background: rgba(139, 115, 53, 0.05);
    border-color: var(--gold);
}

.creature-token .token-team-tag {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
    height: 10px;
    image-rendering: pixelated;
    left: 2px;
    object-fit: contain;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 6;
}

.creature-token.ally .token-hp {
    background: #4CAF50;
}

.creature-token.summon .token-hp {
    background: #6495ED;
}

.creature-token.valid-target-creature .target-glow {
    animation: glow-pulse 1s infinite;
    border: 2px solid var(--gold);
    border-radius: 5px;
    bottom: -2px;
    left: -2px;
    pointer-events: none;
    position: absolute;
    right: -2px;
    top: -2px;
}

.creature-token:hover, .creature-token.highlighted {
    box-shadow: 0 0 12px var(--shadow-gold);
    transform: scale(1.08);
    z-index: 10;
}

.creatures-list::-webkit-scrollbar {
    width: 4px;
}

.creatures-list::-webkit-scrollbar-thumb {
    background: #4CAF50;
    border-radius: 4px;
}

.creatures-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.draggable-mode .crafting-modal {
    animation: none;
}

.draggable-mode .crafting-modal-header {
    -webkit-user-select: none;
    cursor: grab;
    user-select: none;
}

.draggable-mode .crafting-modal-header:active {
    cursor: grabbing;
}

.draggable-mode .crafting-modal.is-dragging {
    box-shadow: 0 20px 64px var(--shadow-void), 0 0 60px var(--shadow-gold), 0 0 0 2px var(--gold);
    opacity: 0.95;
}

.draggable-mode .crafting-modal.is-dragging .crafting-modal-header {
    background: rgba(139, 115, 53, 0.2);
    cursor: grabbing;
}

.draggable-mode .draggable-modal[data-resizable="true"] {
    min-height: 200px;
    min-width: 300px;
    position: relative;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle {
    background: transparent;
    position: absolute;
    z-index: 1000;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-e {
    right: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-e, .draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-w {
    bottom: 10px;
    cursor: ew-resize;
    top: 10px;
    width: 8px;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-n {
    top: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-n, .draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-s {
    cursor: ns-resize;
    height: 8px;
    left: 10px;
    right: 10px;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-ne {
    cursor: nesw-resize;
    right: 0;
    top: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-ne, .draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-nw, .draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-se, .draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-sw {
    height: 12px;
    width: 12px;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-nw {
    cursor: nwse-resize;
    left: 0;
    top: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-s {
    bottom: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-se {
    bottom: 0;
    cursor: nwse-resize;
    right: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-sw {
    bottom: 0;
    cursor: nesw-resize;
    left: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle-w {
    left: 0;
}

.draggable-mode .draggable-modal[data-resizable="true"] .resize-handle:hover {
    background: rgba(139, 115, 53, 0.3);
}

.draggable-mode .inventory-modal, .draggable-mode .profile-modal, .draggable-mode .item-modal, .draggable-mode .trade-modal, .draggable-mode .party-panel-content {
    animation: none;
}

.draggable-mode .inventory-modal-header, .draggable-mode .profile-modal-header, .draggable-mode .item-modal-header, .draggable-mode .chat-modal-header, .draggable-mode .trade-modal-header, .draggable-mode .party-header {
    -webkit-user-select: none;
    cursor: grab;
    user-select: none;
}

.draggable-mode .inventory-modal-header:active, .draggable-mode .profile-modal-header:active, .draggable-mode .item-modal-header:active, .draggable-mode .trade-modal-header:active, .draggable-mode .party-header:active {
    cursor: grabbing;
}

.draggable-mode .inventory-modal.is-dragging .inventory-modal-header, .draggable-mode .profile-modal.is-dragging .profile-modal-header, .draggable-mode .item-modal.is-dragging .item-modal-header, .draggable-mode .trade-modal.is-dragging .trade-modal-header, .draggable-mode .party-panel-content.is-dragging .party-header {
    background: rgba(139, 115, 53, 0.2);
    cursor: grabbing;
}

.draggable-mode .inventory-modal.is-dragging, .draggable-mode .profile-modal.is-dragging, .draggable-mode .item-modal.is-dragging, .draggable-mode .trade-modal.is-dragging, .draggable-mode .party-panel-content.is-dragging {
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.95), 0 0 0 2px var(--gold);
    opacity: 0.95;
}

/* Гарантируем, что стили JavaScript имеют приоритет во время перетаскивания */
.draggable-mode .draggable-modal.is-dragging[data-js-dragging="true"] {
    position: fixed !important;
}

/* Гарантируем, что стили JavaScript имеют приоритет после перетаскивания */
.draggable-mode .draggable-modal[style*="left"] {
    position: fixed !important;
}

.draggable-mode .reward-modal {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.2);
}

.draggable-mode .reward-modal-header {
    cursor: move;
    user-select: none;
}

.draggable-mode .reward-modal-header:active {
    cursor: grabbing;
}

.draggable-mode .reward-modal.is-dragging {
    opacity: 0.9;
}

.draggable-mode .reward-modal.is-dragging .reward-modal-header {
    cursor: grabbing;
}

.enemies-panel h3, .allies-panel h3 {
    margin-bottom: 5px;
}

.enemies-panel, .allies-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    max-height: 120px;
}

.fight-actions-panel .action-btn {
    align-items: center;
    background: linear-gradient(180deg, rgba(36, 34, 32, 0.95) 0%, rgba(18, 16, 14, 0.98) 100% );
    border: 2px solid rgba(180, 170, 155, 0.55);
    box-shadow: 0 0 6px rgba(139, 115, 53, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--bone);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: var(--font-numeric);
    gap: 4px;
    height: 72px;
    min-height: 72px;
    padding: 8px 10px;
    position: relative;
    transition: all 0.3s;
    width: 100%;
    overflow: hidden;
    justify-content: center;
}

.fight-actions-panel .action-btn:has(.btn-skill-img) {
    align-items: flex-end;
    gap: 0;
    padding: 0;
}

.fight-btn:hover {
    background: rgba(139, 115, 53, 0.2);
    border-color: rgba(139, 115, 53, 0.5);
    box-shadow: 0 4px 12px var(--accent-green-glow);
    transform: translateY(-2px);
}

.fight-log-mobile.expanded .mobile-log-toggle {
    transform: rotate(180deg);
}

.fight-log-sidebar .log-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding: 8px;
}

.fight-log-sidebar .log-content::-webkit-scrollbar {
    width: 6px;
}

.fight-log-sidebar .log-content::-webkit-scrollbar-thumb {
    background: #4CAF50;
    border-radius: 3px;
}

.fight-log-sidebar .log-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.fight-log-sidebar.collapsed .toggle-icon {
    transform: rotate(180deg);
}

.fight-log-sidebar.collapsed .toggle-text {
    display: none;
}

.fight-panel-v2.actions-collapsed .actions-toggle {
    transform: rotate(180deg);
}

.fight-panel-v2::before {
    background: radial-gradient(ellipse at center, transparent 30%, var(--bg-void) 100%);
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.6;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.fight-side-panel h3, .fight-center-panel h3, .fight-right-panel h3, .allies-panel h3, .fight-log-panel > div:first-child {
    border-bottom: 1px solid #333;
    color: var(--gold-light);
    font-size: 12px;
    margin: 0;
    padding: 5px 0;
}

.fight-side-panel, .fight-right-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.fight-skills-panel::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.fight-skills-panel::-webkit-scrollbar-thumb {
    background: #4CAF50;
    border-radius: 4px;
}

.fight-skills-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.fight-status-bar::after {
    background: linear-gradient(90deg, transparent, var(--blood-light), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 15%;
    position: absolute;
    right: 15%;
}

.form-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--accent-green-glow);
    outline: none;
}

.game-container.fight-active .hud-movement {
    display: none;
}

.game-container.fight-active .hud-bottom-bars {
    display: none;
}

/* Скрываем весь контейнер с аватаром, поясом и барами в бою */
.game-container.fight-active .hud-avatar-belt-container {
    display: none;
}

.game-container.fight-active .hud-quick-actions {
    top: calc(6px + var(--safe-area-top, 0px)) !important;
}

.game-container.fight-active .hud-top-bar {
    display: none !important;
}

.game-content-panel .actions-section {
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px;
    padding-bottom: calc(12px + var(--safe-area-bottom));
    position: sticky;
    z-index: 10;
}

.game-content-panel .content-section {
    flex: 0 0 auto;
    overflow-y: auto;
}

.game-content-panel .input-section {
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px;
    padding-bottom: calc(12px + var(--safe-area-bottom));
    position: sticky;
    z-index: 10;
}

.game-content-panel .sell-section {
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px;
    padding-bottom: calc(12px + var(--safe-area-bottom));
    position: sticky;
    z-index: 10;
}

.game-icon-clickable:hover {
    filter: drop-shadow(0 0 4px currentColor);
    transform: scale(1.1);
}

.game-icon-gold, .game-icon-coin, .game-icon-money {
    color: var(--gold);
}

.game-icon-heart, .game-icon-hp, .game-icon-health {
    color: var(--blood);
}

.game-icon-lightning, .game-icon-energy, .game-icon-ap {
    color: #60a5fa;
}

.game-icon-loading, .game-icon-refresh, .game-icon-sync {
    animation: spin 1s linear infinite;
}

.game-icon-skull, .game-icon-dead, .game-icon-death {
    color: #94a3b8;
}

.game-icon-star, .game-icon-exp, .game-icon-experience {
    color: var(--gold);
}

.game-icon-warning, .game-icon-alert, .game-icon-danger {
    color: #f59e0b;
}

.gold-input::-webkit-outer-spin-button, .gold-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gold-input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.gold-input:focus {
    border-color: var(--accent-gold);
    outline: none;
}

.grid-cell.movable:hover {
    background: rgba(139, 115, 53, 0.3);
    border-color: var(--gold-light);
    box-shadow: 0 0 10px var(--shadow-gold);
    transform: scale(1.02);
}

.grid-cell.occupied .fight-object {
    opacity: 0.7;
    z-index: 0;
}

.grid-cell.valid-target:hover {
    background: rgba(139, 115, 53, 0.3);
    border-color: var(--gold-light);
    box-shadow: 0 0 10px var(--shadow-gold);
}

.grid-cell:hover {
    background: rgba(139, 115, 53, 0.1);
    border-color: var(--gold);
}

.guild-tag, .guild-name {
    color: #FAC43B;
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 600;
}

.hud-avatar-inline .avatar-img, .hud-avatar-inline .avatar-placeholder {
    height: 38px;
    width: 38px;
}

.hud-bottom-bars .bar-label, .hud-bottom-bars .bar-value {
    display: none;
}

.hud-bottom-bars .bar-icon {
    display: none;
}

.hud-bottom-bars .progress-text {
    display: none;
}

.hud-bottom-container .hud-avatar-belt-container {
    align-self: center;
    bottom: auto !important;
    flex-shrink: 0;
    left: auto !important;
    order: 2;
    pointer-events: auto;
    position: relative !important;
    right: auto !important;
}

.hud-bottom-container .hud-belt-items {
    align-self: flex-end;
    bottom: auto !important;
    flex-shrink: 0;
    order: 3;
    pointer-events: auto;
    position: relative !important;
    right: auto !important;
}

.hud-bottom-container .hud-bottom-bars {
    align-self: flex-start;
    bottom: auto !important;
    flex-shrink: 0;
    left: auto !important;
    margin: 0;
    max-width: 500px;
    order: 2;
    pointer-events: auto;
    position: relative !important;
    right: auto !important;
    transform: none !important;
    width: auto;
}

.hud-bottom-container .hud-movement {
    bottom: auto !important;
    flex-shrink: 0;
    left: auto !important;
    order: 1;
    pointer-events: auto;
    position: relative !important;
    overflow: visible;
}

.hud-content-panel .content-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.hud-movement ::deep .movement-btn {
    height: 32px;
    width: 32px;
}

.hud-movement ::deep .movement-controls {
    backdrop-filter: blur(12px);
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 4px;
}

.hud-party-quick-action ~ .hud-top-bar {
    max-width: calc(100vw - 250px) !important;
}

.initiative-portrait .buff-icon {
    height: 18px;
    width: 18px;
}

.initiative-portrait .buff-icon, .initiative-portrait .status-debuff {
    height: 14px;
    width: 14px;
}

.initiative-portrait .portrait-buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.initiative-portrait .portrait-frame {
    height: 40px;
    width: 40px;
}

.initiative-portrait .portrait-header {
    align-items: baseline;
    display: flex;
    gap: 6px;
}

.initiative-portrait .portrait-hp-bar {
    border-radius: 3px;
    height: 4px;
}

.initiative-portrait .portrait-hp-container {
    align-items: flex-start;
    gap: 2px;
    width: 100%;
}

.initiative-portrait .portrait-hp-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 9px;
    text-align: left;
}

.initiative-portrait .portrait-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.initiative-portrait .portrait-level {
    color: var(--gold-light);
    display: inline;
    font-size: 8px;
}

.initiative-portrait .portrait-name {
    color: #fff;
    display: block;
    font-size: 10px;
    font-weight: 600;
    max-width: none;
    text-align: left;
}

.initiative-portrait .portrait-status {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    position: static;
}

.initiative-portrait .status-debuff {
    height: 18px;
    width: 18px;
}

.initiative-portrait.ally .portrait-frame {
    border-color: var(--gold);
}

.initiative-portrait.enemy .portrait-frame {
    border-color: #ff6b6b;
}

.initiative-portrait.not-in-queue .portrait-frame {
    filter: grayscale(0.3);
}

.initiative-portrait.player .portrait-frame {
    border-color: var(--gold);
    border-width: 3px;
}

.initiative-portrait:hover, .initiative-portrait.highlighted {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px var(--shadow-gold);
    transform: translateY(-2px);
}

.initiative-scroll::-webkit-scrollbar {
    height: 6px;
}

.initiative-scroll::-webkit-scrollbar-thumb {
    background: #4CAF50;
    border-radius: 3px;
}

.initiative-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.intro-text h2 {
    color: var(--text-primary);
    font-size: 28px;
    margin: 0 0 12px 0;
}

.intro-text p {
    color: var(--text-secondary);
    font-size: 16px;
    margin: 0;
}

.inventory-item:hover:not(.in-trade):not(.locked) {
    transform: scale(1.1);
    z-index: 1;
}

.inventory-modal .action-btn {
    min-width: 100%;
}

.inventory-modal .action-error {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: var(--accent-red);
    font-size: 13px;
    padding: 12px 16px;
    text-align: center;
}

.inventory-modal .empty-section {
    color: var(--text-muted);
    font-size: 28px;
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
}

.inventory-modal .equip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

.inventory-modal .item-count {
    bottom: 2px;
    color: #fff;
    font-family: var(--font-numeric);
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    right: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.inventory-modal .item-count-badge {
    background: rgba(139, 115, 53, 0.15);
    border: 1px solid rgba(139, 115, 53, 0.3);
    color: var(--gold-light);
}

.inventory-modal .item-description {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid var(--accent-green);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    padding: 12px 16px;
}

.inventory-modal .item-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inventory-modal .item-image {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--border-subtle);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    height: 120px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 120px;
}

.inventory-modal .item-image-container {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.inventory-modal .item-image-img {
    height: 100%;
    object-fit: contain;
    padding: 15%;
    width: 100%;
}

.inventory-modal .item-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inventory-modal .item-level-badge {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--accent-gold);
}

.inventory-modal .item-level-badge, .inventory-modal .item-count-badge {
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
}

.inventory-modal .item-name-level {
    align-items: center;
    display: flex;
    gap: 10px;
}

.inventory-modal .item-rarity {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.inventory-modal .item-stats {
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

.inventory-modal .items-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, 60px);
    padding: 16px;
    justify-content: center;
}

.inventory-modal .sell-mark-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
    font-size: 14px;
    left: 4px;
    pointer-events: none;
    position: absolute;
    top: 2px;
    z-index: 5;
}

.inventory-modal .skills-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, 60px);
    padding: 16px;
    justify-content: center;
}

.inventory-modal .belt-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, 60px);
    padding: 16px;
    justify-content: center;
}

.inventory-modal .slot-image {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    height: 100%;
    left: 0;
    object-fit: contain;
    position: absolute;
    top: 0;
    width: 100%;
}

.inventory-modal .stat-name {
    color: var(--text-secondary);
    font-size: 13px;
}

.inventory-modal .stat-row {
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    transition: background 0.2s ease;
}

.inventory-modal .stat-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.inventory-modal .stat-value {
    color: var(--gold-light);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 600;
}

.inventory-modal-content * {
    pointer-events: auto;
}

.inventory-modal-content::-webkit-scrollbar {
    width: 8px;
}

.inventory-modal-content::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 53, 0.4);
    border-radius: 4px;
}

.inventory-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.inventory-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
}

.inventory-modal-header::before {
    background: var(--bg-dark);
    bottom: -8px;
    color: var(--gold);
    content: '◆';
    font-size: 12px;
    left: 50%;
    padding: 0 8px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.inventory-modal-overlay.draggable-mode .inventory-modal, .profile-modal-overlay.draggable-mode .profile-modal, .trade-modal-overlay.draggable-mode .trade-modal, .chat-modal-overlay.draggable-mode .chat-modal, .quest-journal-modal-overlay.draggable-mode .quest-journal-modal {
    box-shadow: 0 12px 48px var(--shadow-void), 0 0 40px var(--shadow-blood), 0 0 0 1px var(--gold-dark);
    display: flex;
    flex-direction: column;
    height: 500px;
    max-height: 70vh;
    max-width: 520px;
    overflow: hidden;
    pointer-events: auto;
    position: fixed;
    transition: box-shadow 0.2s ease;
    width: 520px;
}

.item-modal-overlay.draggable-mode .item-modal {
    box-shadow: 0 12px 48px var(--shadow-void), 0 0 40px var(--shadow-blood), 0 0 0 1px var(--gold-dark);
    display: flex;
    flex-direction: column;
    height: auto !important;
    max-height: 70vh !important;
    max-width: 520px !important;
    overflow: hidden;
    pointer-events: auto;
    position: fixed !important;
    transition: box-shadow 0.2s ease;
    width: 520px !important;
}

.inventory-modal-overlay.draggable-mode .inventory-modal:hover, .profile-modal-overlay.draggable-mode .profile-modal:hover, .item-modal-overlay.draggable-mode .item-modal:hover, .trade-modal-overlay.draggable-mode .trade-modal:hover, .chat-modal-overlay.draggable-mode .chat-modal:hover, .quest-journal-modal-overlay.draggable-mode .quest-journal-modal:hover {
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(139, 115, 53, 0.5);
}

.inventory-modal-overlay.draggable-mode, .profile-modal-overlay.draggable-mode, .item-modal-overlay.draggable-mode, .trade-modal-overlay.draggable-mode, .chat-modal-overlay.draggable-mode, .quest-journal-modal-overlay.draggable-mode {
    align-items: unset !important;
    backdrop-filter: none;
    background: transparent;
    display: block !important;
    justify-content: unset !important;
    padding: 0;
    pointer-events: none;
}

.inventory-modal-overlay::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(74, 14, 14, 0.2) 0%, transparent 40%), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.inventory-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 8px;
    right: 8px;
}

.inventory-modal::before {
    border-width: 2px 0 0 2px;
    left: 8px;
    top: 8px;
}

.inventory-modal::before, .inventory-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 30px;
    pointer-events: none;
    position: absolute;
    width: 30px;
    z-index: 10;
}

.inventory-section::before {
    border: 1px solid rgba(139, 115, 53, 0.2);
    bottom: 3px;
    content: '';
    left: 3px;
    pointer-events: none;
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 1;
}

.item-modal .action-error {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: var(--accent-red);
    font-size: 13px;
    padding: 10px 14px;
    text-align: center;
}

.item-modal .item-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.item-modal .item-compare-hint {
    color: var(--text-muted);
    font-size: 11px;
    opacity: 0.7;
}

.item-modal .item-count-badge {
    background: rgba(139, 115, 53, 0.15);
    border: 1px solid var(--gold-dark);
    color: var(--gold);
}

.item-modal .item-description-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gold-dark);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    padding: 12px 14px;
}

.item-modal .item-id-badge {
    background: rgba(80, 80, 100, 0.25);
    border: 1px solid rgba(80, 80, 100, 0.4);
    color: #8090a0;
    cursor: pointer;
    font-family: var(--font-numeric);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    transition: all 0.2s ease;
    user-select: none;
}

.item-modal .item-id-badge.copied {
    background: rgba(80, 160, 80, 0.25);
    border-color: rgba(80, 160, 80, 0.5);
    color: #7bc45c;
}

.item-modal .item-id-badge:active {
    transform: scale(0.95);
}

.item-modal .item-id-badge:hover {
    background: rgba(100, 100, 130, 0.35);
    border-color: rgba(100, 100, 130, 0.6);
    color: #a0b0c0;
}

.item-modal .item-image-large {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: 3px solid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    height: 100px;
    justify-content: center;
    overflow: hidden;
    width: 100px;
}

.item-modal .item-image-large .item-image-img {
    height: 100%;
    object-fit: contain;
    padding: 6%;
    width: 100%;
}

.item-modal .item-image-section {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.item-modal .item-info-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-modal .item-level-badge {
    background: rgba(139, 115, 53, 0.2);
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
}

.item-modal .item-level-badge,
.item-modal .item-count-badge,
.item-modal .item-type-badge,
.item-modal .item-id-badge {
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
}

.item-modal .item-level-badge, .item-modal .item-count-badge, .item-modal .item-type-badge {
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
}

.item-modal .item-price {
    color: var(--accent-gold);
    font-size: 14px;
    font-weight: 600;
}

.item-modal .item-price-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.item-modal .item-rarity-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.item-modal .item-stat-name {
    align-self: center;
    color: var(--text-secondary);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.item-modal .item-stats-table {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.item-modal .item-type-badge {
    background: rgba(90, 110, 130, 0.2);
    border: 1px solid rgba(90, 110, 130, 0.5);
    color: #a0b0c0;
}

.item-modal .stat-diff {
    font-size: 11px;
    opacity: 0.9;
}

.item-modal .stat-row {
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.2);
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr auto;
    min-height: 32px;
    padding: 0px 10px;
}

.item-modal .stat-row.stat-missing {
    opacity: 0.7;
}

.item-modal .stat-row:hover {
    background: var(--bg-elevated);
}

.item-modal .stat-value {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    text-align: right;
    white-space: nowrap;
}

.item-modal .item-stat-value {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    text-align: right;
    white-space: nowrap;
}

.item-modal .weapon-skill-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.item-modal .weapon-skill-level {
    background: rgba(139, 115, 53, 0.15);
    border: 1px solid rgba(139, 115, 53, 0.3);
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
}

.item-modal .weapon-skill-max {
    background: rgba(139, 115, 53, 0.1);
    border: 1px solid rgba(139, 115, 53, 0.2);
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    padding: 6px;
    text-align: center;
}

.item-modal .weapon-skill-progress {
    margin-top: 8px;
}

.item-modal .weapon-skill-progress-bar {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    height: 22px;
}

.item-modal .weapon-skill-progress-fill {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 12px var(--shadow-gold);
}

.item-modal .weapon-skill-progress-text {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.item-modal .weapon-skill-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 12px;
    padding: 12px;
}

.item-modal .weapon-skill-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.item-modal-actions .action-btn {
    flex: 1 1 calc(50% - 5px);
    min-width: calc(50% - 5px);
}

.item-modal-content * {
    pointer-events: auto;
}

.item-modal-content.embedded .item-image-large {
    height: 100px;
    width: 100px;
}

.item-modal-content.embedded .item-image-section {
    padding: 10px;
}

.item-modal-content.embedded .item-stat-name {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    line-height: 1.3;
    word-break: break-word;
}

.item-modal-content.embedded .item-stats-table {
    padding: 6px;
}

.item-modal-content.embedded .stat-row {
    min-height: 30px;
    padding: 6px 8px;
}

.item-modal-content.embedded .weapon-skill-level {
    font-size: 12px;
    padding: 3px 8px;
}

.item-modal-content.embedded .weapon-skill-progress-bar {
    height: 20px;
}

.item-modal-content.embedded .weapon-skill-progress-text {
    font-size: 11px;
}

.item-modal-content.embedded .weapon-skill-section {
    margin-top: 10px;
    padding: 10px;
}

.item-modal-content.embedded .weapon-skill-title {
    font-size: 13px;
}

.item-modal-content::-webkit-scrollbar {
    width: 8px;
}

.item-modal-content::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 53, 0.4);
    border-radius: 4px;
}

.item-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 115, 53, 0.6);
}

.item-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.item-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
}

.item-modal-overlay.standalone .item-modal {
    pointer-events: auto;
}

.item-modal.no-header .item-modal-header {
    display: none;
}

.item-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 6px;
    right: 6px;
}

.item-modal::before {
    border-width: 2px 0 0 2px;
    left: 6px;
    top: 6px;
}

.item-modal::before, .item-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 25px;
    pointer-events: none;
    position: absolute;
    width: 25px;
    z-index: 10;
}

.loading-content::before {
    color: var(--gold-dark);
    content: '◆ ◆ ◆';
    font-size: 0.8rem;
    letter-spacing: 1rem;
    opacity: 0.6;
}

.loading-screen::before {
    background: radial-gradient(ellipse at center, transparent 40%, var(--bg-void) 100%);
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}

.location-icon, .time-icon {
    color: var(--gold-light);
    flex-shrink: 0;
    font-size: 18px;
    text-shadow: 0 0 8px var(--shadow-gold);
}

.log-content::-webkit-scrollbar {
    width: 5px;
}

.log-content::-webkit-scrollbar-thumb {
    background: #4CAF50;
    border-radius: 4px;
}

.log-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.log-line:nth-child(odd) {
    color: #bbb;
}

.log-toggle:hover {
    background: rgba(139, 115, 53, 0.2);
}

.member-buff-item:hover {
    transform: scale(1.2);
}

.mobile-log-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.modal-back-btn, .modal-close-btn {
    align-items: center;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--smoke);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 18px;
    height: 38px;
    justify-content: center;
    transition: all 0.3s ease;
    width: 38px;
}

.modal-back-btn:hover {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--shadow-gold);
    color: var(--gold-light);
}

.modal-close-btn:hover {
    background: linear-gradient(180deg, var(--blood-dark) 0%, var(--bg-dark) 100%);
    border-color: var(--blood);
    box-shadow: 0 0 15px var(--shadow-blood);
    color: var(--blood-glow);
}

.modal-title, .section-title, .panel-title {
    color: var(--bone);
    font-family: 'Inter', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px var(--shadow-void);
    text-transform: uppercase;
}

.music-btn:active {
    transform: scale(0.95);
}

.music-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.music-toggle-btn:active {
    transform: scale(0.95);
}

.music-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

.notification-close:hover {
    background: rgba(244, 67, 54, 0.3);
    color: var(--accent-red);
}

.object-icon img {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
    height: 70%;
    image-rendering: pixelated;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 70%;
}

.observe-content p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.party-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.party-invite-btn .btn-icon {
    font-size: 18px;
}

.party-invite-btn .btn-text {
    font-size: 14px;
}

.party-invite-btn.accept:hover:not(:disabled) {
    box-shadow: 0 4px 12px var(--shadow-gold);
    transform: translateY(-2px);
}

.party-invite-btn.decline:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.3);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
    transform: translateY(-2px);
}

.party-invite-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.party-invite-header::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 15%;
    position: absolute;
    right: 15%;
}

.party-invite-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 6px;
    right: 6px;
}

.party-invite-modal::before {
    border-width: 2px 0 0 2px;
    left: 6px;
    top: 6px;
}

.party-invite-modal::before, .party-invite-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 25px;
    pointer-events: none;
    position: absolute;
    width: 25px;
    z-index: 10;
}

.party-leave-btn:hover {
    background: rgba(244, 67, 54, 0.25);
    border-color: rgba(244, 67, 54, 0.6);
    transform: translateY(-2px);
}

.party-member-item:hover {
    background: rgba(139, 115, 53, 0.15);
    border-color: var(--gold);
    transform: translateX(4px);
}

.party-members-list::-webkit-scrollbar {
    width: 6px;
}

.party-members-list::-webkit-scrollbar-thumb {
    background: var(--accent-green);
    border-radius: 3px;
}

.party-members-list::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.party-members-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.party-members-panel.mobile .party-panel-content {
    left: 12px;
    max-height: 60vh;
    max-width: none;
    position: fixed;
    right: 12px;
    top: 70px;
    width: auto;
}

.party-members-panel:not(.mobile) .draggable-mode {
    position: relative;
}

.party-members-panel:not(.mobile) .draggable-mode .party-panel-content {
    cursor: default;
    position: fixed;
}

.party-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold);
}

.party-panel-content.party-minimized .party-header-minimized {
    border-bottom: none;
    gap: 8px;
    padding: 8px 12px;
}

.party-toggle-btn:hover, .party-toggle-btn:active, .party-toggle-btn.active {
    background: var(--bg-panel-hover);
    border-color: var(--gold);
    box-shadow: 0 6px 24px var(--accent-green-glow);
    transform: scale(1.08);
}

.picker-cancel-btn:hover {
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.3) 0%, rgba(183, 28, 28, 0.4) 100% );
    border-color: rgba(244, 67, 54, 0.6);
    transform: scale(1.02);
}

.picker-description p {
    color: #d4a8d4;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.picker-item:hover {
    background: rgba(139, 115, 53, 0.15);
    border-color: rgba(139, 115, 53, 0.5);
    transform: translateX(4px);
}

.profile-action-btn.attack:hover {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
}

.profile-action-btn.invite:hover {
    background: rgba(100, 181, 246, 0.2);
    border-color: rgba(100, 181, 246, 0.5);
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.2);
}

.profile-action-btn.team:hover {
    background: rgba(139, 115, 53, 0.25);
    border-color: var(--gold);
    box-shadow: 0 4px 12px var(--shadow-gold);
}

.profile-action-btn.trade:hover {
    background: rgba(139, 115, 53, 0.25);
    border-color: var(--gold);
}

.profile-action-btn:active {
    transform: translateY(0);
}

.profile-action-btn:hover {
    background: rgba(139, 115, 53, 0.2);
    border-color: rgba(139, 115, 53, 0.5);
    box-shadow: 0 4px 12px var(--shadow-gold);
    transform: translateY(-2px);
}

.profile-loading, .profile-error {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 60px 20px;
}

.profile-modal .equip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

.profile-modal .inventory-slot-wrapper:has(.inventory-slot.empty) {
    cursor: default;
}

.profile-modal .profile-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    margin-bottom: 16px;
    overflow: hidden;
}

.profile-modal .section-header {
    align-items: center;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    transition: background 0.2s ease;
    user-select: none;
}

.profile-modal .section-header span:first-child {
    color: var(--bone);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-modal .section-header:hover {
    background: var(--bg-elevated);
}

.profile-modal .section-toggle {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-modal .slot-image {
    height: 100%;
    left: 0;
    object-fit: contain;
    position: absolute;
    top: 0;
    width: 100%;
}

.profile-modal .stat-cell {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 95px;
    overflow: hidden;
    padding: 14px 10px;
    position: relative;
    transition: all 0.2s ease;
}

.profile-modal .stat-cell .stat-emoji {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

.profile-modal .stat-cell .stat-name {
    color: var(--text-muted);
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 10px;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    text-transform: uppercase;
    word-wrap: break-word;
}

.profile-modal .stat-cell .stat-number {
    color: var(--text-primary);
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}

.profile-modal .stat-cell.highlighted {
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--shadow-gold);
}

.profile-modal .stats-grid {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.profile-modal .stats-grid.primary {
    grid-template-columns: repeat(3, 1fr);
}

.profile-modal .stats-grid.secondary {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}

.profile-modal-content * {
    pointer-events: auto;
}

.profile-modal-content::-webkit-scrollbar {
    width: 8px;
}

.profile-modal-content::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 4px;
}

.profile-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.profile-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 20%;
    position: absolute;
    right: 20%;
}

.profile-modal-header::before {
    background: var(--bg-dark);
    bottom: -8px;
    color: var(--gold);
    content: '◆';
    font-size: 12px;
    left: 50%;
    padding: 0 8px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.profile-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 8px;
    right: 8px;
}

.profile-modal::before {
    border-width: 2px 0 0 2px;
    left: 8px;
    top: 8px;
}

.profile-modal::before, .profile-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 30px;
    pointer-events: none;
    position: absolute;
    width: 30px;
    z-index: 10;
}

.profile-stat-item .hp-profile-value {
    color: #ffffff;
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 700;
    left: 50%;
    pointer-events: none;
    position: absolute;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 1;
}

.profile-stat-item .stat-label {
    color: var(--text-muted);
    font-family: var(--font-numeric);
    font-size: 11px;
    text-transform: uppercase;
}

.profile-stat-item .stat-value {
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-size: 16px;
    font-weight: 700;
}

.profile-stat-item .stat-value.gold {
    color: var(--accent-gold);
}

.progress-fill::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    content: '';
    height: 50%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.quest-item:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 20px var(--shadow-void), 0 0 15px var(--shadow-gold);
}

.quest-journal-loading .loading-spinner {
    animation: quest-journal-spin 1s linear infinite;
    border: 4px solid rgba(74, 158, 255, 0.3);
    border-radius: 50%;
    border-top-color: #4a9eff;
    height: 40px;
    width: 40px;
}

.quest-journal-modal-content * {
    pointer-events: auto;
}

/* Статы в модалке осмотра существа - компактные */
.creature-stats-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px;
}

.creature-stat-cell {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-height: 50px;
    overflow: hidden;
    padding: 6px 8px;
    position: relative;
    transition: all 0.2s ease;
}

.creature-stat-cell .creature-stat-emoji {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.creature-stat-cell .creature-stat-name {
    color: var(--text-muted);
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 8px;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    text-transform: uppercase;
    word-wrap: break-word;
}

.creature-stat-cell .creature-stat-number {
    color: var(--text-primary);
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}

/* Статы в ProfileModal - компактные */
.profile-stats-grid-primary {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px;
}

.profile-stats-grid-secondary {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px;
}

.profile-stat-cell {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-height: 50px;
    overflow: hidden;
    padding: 6px 8px;
    position: relative;
    transition: all 0.2s ease;
}

.profile-stat-cell.highlighted {
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--shadow-gold);
}

.profile-stat-cell .profile-stat-emoji {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.profile-stat-cell .profile-stat-name {
    color: var(--text-muted);
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 8px;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    text-transform: uppercase;
    word-wrap: break-word;
}

.profile-stat-cell .profile-stat-number {
    color: var(--text-primary);
    flex-shrink: 0;
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}

.quest-journal-modal-content .empty-section {
    color: #888;
    font-size: 14px;
    padding: 40px 20px;
    text-align: center;
}

.quest-journal-modal-header .modal-close-btn {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s;
    width: 32px;
}

.quest-journal-modal-header .modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.quest-journal-modal-header .modal-title {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
}

.quest-journal-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
}

.quest-journal-modal-header::before {
    background: var(--bg-dark);
    bottom: -8px;
    color: var(--gold);
    content: '◆';
    font-size: 12px;
    left: 50%;
    padding: 0 8px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.quest-journal-modal-header:active {
    cursor: grabbing;
}

.quest-journal-modal-overlay.draggable-mode .quest-journal-modal {
    pointer-events: auto;
    position: fixed !important;
}

.quest-journal-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 8px;
    right: 8px;
}

.quest-journal-modal::before {
    border-width: 2px 0 0 2px;
    left: 8px;
    top: 8px;
}

.quest-journal-modal::before, .quest-journal-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 28px;
    pointer-events: none;
    position: absolute;
    width: 28px;
    z-index: 10;
}

.quest-progress .progress-bar {
    background-color: rgba(74, 158, 255, 0.2);
    border-radius: 4px;
    flex: 1;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.quest-progress .progress-fill {
    background: linear-gradient(90deg, #4a9eff 0%, #6bb6ff 100%);
    border-radius: 4px;
    height: 100%;
    transition: width 0.3s ease;
}

.quest-progress .quest-progress-text {
    align-self: center;
    color: #4a9eff;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    min-width: fit-content;
    text-align: left;
    white-space: nowrap;
}

.quest-section .section-header {
    align-items: center;
    border-bottom: 1px solid rgba(74, 158, 255, 0.3);
    color: #4a9eff;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: space-between;
    padding: 8px 0;
}

.quest-section .section-toggle {
    color: #4a9eff;
    font-size: 12px;
}

.quick-btn:hover, .quick-btn:active {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.3) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-color: var(--gold);
    box-shadow: 0 8px 30px var(--shadow-void), 0 0 25px var(--shadow-gold);
    color: var(--gold-pale);
    transform: scale(1.1);
}

.race-card:hover {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-color: var(--gold);
    box-shadow: 0 6px 20px var(--shadow-void), 0 0 25px var(--shadow-gold);
    transform: translateY(-3px);
}

.registration-step h2 {
    color: var(--bone);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0 0 16px 0;
    text-align: center;
    text-shadow: 0 2px 4px var(--shadow-void);
    text-transform: uppercase;
}

.return-btn:hover:not(.disabled) {
    background: rgba(138, 43, 226, 0.3);
    border-color: #9B4DE8;
    box-shadow: 0 4px 8px rgba(138, 43, 226, 0.3);
}

.reward-items-spoiler.revealed .reward-spoiler-overlay {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.reward-items-spoiler:not(.revealed) {
    background: rgba(0, 0, 0, 0.2);
    filter: blur(12px);
    pointer-events: auto;
}

.reward-items-spoiler:not(.revealed) .reward-item-card {
    opacity: 0.15;
}

.reward-items-spoiler:not(.revealed) .reward-items-list {
    opacity: 0.2;
    pointer-events: none;
}

.reward-modal-actions .action-btn.close-reward {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.25) 0%, rgba(92, 74, 31, 0.25) 100%);
    border: 2px solid var(--gold-dark);
    color: var(--accent-gold);
    cursor: pointer;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.2s ease;
    width: 100%;
}

.reward-modal-actions .action-btn.close-reward:hover {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.35) 0%, rgba(92, 74, 31, 0.35) 100%);
    border-color: var(--gold);
    box-shadow: 0 4px 15px var(--shadow-gold);
    transform: translateY(-2px);
}

.reward-modal-content::-webkit-scrollbar {
    width: 8px;
}

.reward-modal-content::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 4px;
}

.reward-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.reward-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.reward-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
}

.reward-modal-header::before {
    background: var(--bg-dark);
    bottom: -10px;
    color: var(--gold-light);
    content: '✦';
    font-size: 14px;
    left: 50%;
    padding: 0 10px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.reward-modal-overlay.draggable-mode .reward-modal {
    pointer-events: auto;
    position: fixed !important;
}

.reward-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 8px;
    right: 8px;
}

.reward-modal::before {
    border-width: 2px 0 0 2px;
    left: 8px;
    top: 8px;
}

.reward-modal::before, .reward-modal::after {
    border-color: var(--gold-light);
    border-style: solid;
    content: '';
    height: 30px;
    pointer-events: none;
    position: absolute;
    width: 30px;
    z-index: 10;
}

.run-away-btn:hover:not(.disabled) {
    background: rgba(255, 165, 0, 0.3);
    border-color: #FFB84D;
    box-shadow: 0 4px 8px rgba(255, 165, 0, 0.3);
}

.section-header span:first-child {
    color: var(--bone);
    font-family: var(--font-numeric);
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0.05em;
}

.section-header:hover {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.2) 0%, rgba(0, 0, 0, 0.4) 100% );
}

.skill-btn.disabled:hover {
    box-shadow: none;
    transform: none;
}

.skill-btn:hover:not(.disabled) {
    background: rgba(139, 115, 53, 0.3);
    border-color: var(--gold-light);
    box-shadow: 0 4px 8px var(--shadow-gold);
    transform: translateY(-2px);
}

.skip-btn:hover:not(.disabled) {
    background: rgba(128, 128, 128, 0.3);
    border-color: #A0A0A0;
    box-shadow: 0 4px 8px rgba(128, 128, 128, 0.3);
}

.stack-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.stack-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--arcane) 0%, var(--bg-dark) 100%);
    border-color: var(--arcane-glow);
    box-shadow: 0 0 15px var(--shadow-arcane);
    color: var(--arcane-glow);
    transform: scale(1.05);
}

.stat-card:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.stat-card:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-color: var(--gold);
    box-shadow: 0 6px 20px var(--shadow-void), 0 0 25px var(--shadow-gold);
    transform: translateY(-3px);
}

.statistics-row .stat-label {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: 13px;
}

.statistics-row .stat-value {
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 600;
}

.statistics-row:last-child {
    margin-bottom: 0;
}

.status-badge .status-icon {
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: help;
    display: flex;
    font-size: 9px;
    height: 12px;
    justify-content: center;
    line-height: 1;
    min-width: 12px;
    transition: all 0.2s;
}

.status-badge .status-icon:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.15);
    z-index: 10;
}

.status-left, .status-center, .status-right {
    align-items: center;
    display: flex;
}

.target-btn-compact:active {
    transform: scale(0.98);
}

.target-btn-compact:hover {
    background: rgba(139, 115, 53, 0.3);
}

.token-icon img {
    box-sizing: border-box;
    height: 80% !important;
    image-rendering: pixelated;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 80% !important;
}

.trade-btn.cancel:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.3);
}

.trade-btn.confirm:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100% );
    box-shadow: 0 8px 30px var(--shadow-gold), 0 0 30px var(--shadow-gold);
    transform: translateY(-3px);
}

.trade-btn.unconfirm:hover:not(:disabled) {
    background: rgba(255, 152, 0, 0.3);
}

.trade-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.trade-count-btn:hover {
    background: rgba(139, 115, 53, 0.15);
    border-color: var(--gold);
}

.trade-count-cancel:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.3);
}

.trade-count-close:hover {
    color: var(--text-primary);
}

.trade-count-confirm, .trade-count-cancel {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s;
}

.trade-count-confirm:disabled, .trade-count-cancel:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.trade-count-confirm:hover:not(:disabled) {
    box-shadow: 0 4px 16px var(--accent-green-glow);
    transform: translateY(-2px);
}

.trade-count-input-group label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.trade-count-input::-webkit-outer-spin-button, .trade-count-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.trade-count-input:focus {
    border-color: var(--gold);
    outline: none;
}

.trade-inventory-divider::before, .trade-inventory-divider::after {
    background: var(--border-subtle);
    content: '';
    flex: 1;
    height: 1px;
}

.trade-inventory::-webkit-scrollbar {
    width: 6px;
}

.trade-inventory::-webkit-scrollbar-thumb {
    background: var(--accent-green);
    border-radius: 3px;
}

.trade-inventory::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.trade-invite-btn.accept:hover:not(:disabled) {
    box-shadow: 0 4px 12px var(--accent-green-glow);
    transform: translateY(-2px);
}

.trade-invite-btn.decline:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.3);
}

.trade-invite-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.trade-invite-message strong {
    color: var(--gold-light);
}

.trade-item.removable:not(.locked):hover {
    transform: scale(1.05);
}

.trade-item.removable:not(.locked):hover .trade-item-remove {
    opacity: 1;
}

.trade-modal-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.trade-modal-header .modal-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.trade-modal-header::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    bottom: -1px;
    content: '';
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
}

.trade-modal-header::before {
    background: var(--bg-dark);
    bottom: -10px;
    color: var(--gold);
    content: '⇄';
    font-size: 14px;
    left: 50%;
    padding: 0 10px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.trade-modal-header:active {
    cursor: grabbing;
}

.trade-modal-overlay.draggable-mode .trade-modal {
    animation: none;
    bottom: auto;
    max-height: 80vh;
    max-width: 600px;
    right: auto;
    transform: none;
    width: 600px;
}

.trade-modal::after {
    border-width: 0 2px 2px 0;
    bottom: 8px;
    right: 8px;
}

.trade-modal::before {
    border-width: 2px 0 0 2px;
    left: 8px;
    top: 8px;
}

.trade-modal::before, .trade-modal::after {
    border-color: var(--gold);
    border-style: solid;
    content: '';
    height: 28px;
    pointer-events: none;
    position: absolute;
    width: 28px;
    z-index: 10;
}

.turn-info-compact .mp-hint {
    color: #999;
    font-size: 9px;
    font-weight: normal;
}

.turn-info-compact .turn-info-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 6px;
    justify-content: center;
    margin: 0;
}

.turn-info-compact strong {
    color: var(--gold-light);
}

.weapon-card:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.weapon-card:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.15) 0%, rgba(26, 24, 22, 0.95) 100% );
    border-color: var(--gold);
    box-shadow: 0 6px 20px var(--shadow-void), 0 0 25px var(--shadow-gold);
    transform: translateY(-3px);
}

.weapon-card:hover:not(:disabled) .weapon-icon-wrapper {
    border-color: var(--gold-light);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.weapon-card:hover:not(:disabled) .weapon-icon-wrapper .game-icon {
    color: var(--gold-light);
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
    transform: scale(1.1);
}

.weapon-skill-level .effective-level {
    color: var(--gold-light);
}

.weapon-skill-row:last-child {
    margin-bottom: 0;
}

0%, 100% {
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-gold);
    filter: drop-shadow(0 0 2px currentColor);
    opacity: 1;
    text-shadow: 0 0 5px rgba(255, 50, 50, 0.5);
    transform: translateX(-50%) translateY(0);
}

50% {
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 100px var(--shadow-gold);
    filter: drop-shadow(0 0 8px currentColor);
    opacity: 0.6;
    text-shadow: 0 0 15px rgba(255, 50, 50, 0.9);
    transform: translateX(-50%) translateY(-4px);
}

.fight-log-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    align-self: stretch !important;
}

.fight-log-mobile {
    display: none !important;
}

.fight-main-area {
    flex-direction: row !important;
}

.fight-log-sidebar {
    display: none !important;
}

.fight-log-mobile {
    display: flex !important;
}

.inventory-slot {
    align-items: center;
    background-color: rgba(10, 9, 8, 0.8);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    border: 2px solid var(--smoke);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
}

.inventory-slot-wrapper {
    aspect-ratio: 1;
    cursor: pointer;
    position: relative;
}

.equip-grid .inventory-slot-wrapper {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.inventory-slot.empty {
    background-color: rgba(5, 5, 5, 0.6);
    cursor: default;
    opacity: 0.5;
}

.inventory-slot.empty:hover {
    box-shadow: none;
    opacity: 0.8;
    transform: none;
}

.inventory-slot:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 30px var(--shadow-void), 0 0 20px var(--shadow-gold), inset 0 0 20px rgba(139, 115, 53, 0.1);
    transform: scale(1.15);
    z-index: 10;
}

.inventory-slot::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.inventory-slot-wrapper:has(.inventory-slot.empty) {
    cursor: default;
}

.slot-image {
    pointer-events: none;
    user-select: none;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.profile-modal-overlay.draggable-mode .profile-modal {
    box-shadow: 0 12px 48px var(--shadow-void), 0 0 40px var(--shadow-blood), 0 0 0 1px var(--gold-dark);
    display: flex;
    flex-direction: column;
    height: 500px;
    max-height: 70vh;
    max-width: 520px;
    overflow: hidden;
    pointer-events: auto;
    position: fixed !important;
    transition: box-shadow 0.2s ease;
    width: 520px;
    left: auto;
    top: auto;
    transform: none;
}

.equip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

.equip-grid .inventory-slot-wrapper {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.burger-menu-divider {
    border-top: 1px solid var(--gold-dark);
    margin: 6px 0;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* БУРГЕР-МЕНЮ (только для мобильной версии)                          */
/* ═══════════════════════════════════════════════════════════════════ */

.hud-burger-menu {
    position: fixed;
    top: calc(10px + var(--safe-area-top, 0px));
    right: 12px;
    z-index: 3000;
    pointer-events: auto;
    display: none; /* По умолчанию скрыто (для ПК) */
}

.burger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 2999;
}

.burger-menu-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.95) 0%, rgba(10, 9, 8, 0.98) 100%);
    border: 2px solid var(--smoke);
    border-radius: 6px;
    color: var(--bone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px var(--shadow-void), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

.burger-menu-btn:hover,
.burger-menu-btn:active {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.3) 0%, rgba(26, 24, 22, 0.95) 100%);
    border-color: var(--gold);
    transform: scale(1.1);
    box-shadow: 0 8px 30px var(--shadow-void), 0 0 25px var(--shadow-gold);
    color: var(--gold-pale);
}

.burger-menu-btn.active {
    background: linear-gradient(180deg, rgba(92, 74, 31, 0.25) 0%, rgba(26, 24, 22, 0.95) 100%);
    border-color: var(--gold);
    color: var(--gold-light);
}

.burger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 16px;
    height: 12px;
    justify-content: center;
    align-items: center;
}

.burger-line {
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.burger-menu-btn.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu-btn.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu-btn.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.burger-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.98) 0%, rgba(10, 9, 8, 0.98) 100%);
    border: 2px solid var(--gold-dark);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--shadow-void), 0 0 30px var(--shadow-gold);
    backdrop-filter: blur(16px);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3001;
    animation: burgerMenuSlideIn 0.2s ease-out;
}

@keyframes burgerMenuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.burger-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--bone);
    cursor: pointer;
    font-family: var(--font-numeric);
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.burger-menu-item:hover {
    background: rgba(92, 74, 31, 0.2);
    border-color: var(--gold-dark);
    color: var(--gold-light);
}

.burger-menu-item.active {
    background: rgba(92, 74, 31, 0.25);
    border-color: var(--gold);
    color: var(--gold-light);
}

/* Первый дочерний элемент - всегда иконка (фиксированная ширина) */
.burger-menu-item > *:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    font-size: 18px;
    line-height: 1;
}

.burger-menu-item > *:first-child svg {
    width: 18px;
    height: 18px;
}

/* Второй дочерний элемент - текст (гибкий) */
.burger-menu-item > *:nth-child(2):not(.burger-menu-badge) {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    min-width: 0;
}

.burger-menu-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    background: var(--blood);
    color: #fff;
    font-family: var(--font-numeric);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ОВЕРЛЕЙ ОКОНЧАНИЯ БОЯ                                                */
/* ═══════════════════════════════════════════════════════════════════ */

.fight-ended-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}

.fight-ended-message {
    color: var(--gold-light);
    font-family: var(--font-numeric);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px var(--shadow-gold);
}

.fight-return-btn {
    align-items: center;
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.3) 0%, rgba(92, 74, 31, 0.5) 100%);
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 20px var(--shadow-gold);
    color: var(--gold-light);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-family: var(--font-numeric);
    font-size: 20px;
    font-weight: 600;
    gap: 12px;
    justify-content: center;
    padding: 18px 36px;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.fight-return-btn:hover {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.5) 0%, rgba(92, 74, 31, 0.7) 100%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), 0 0 30px var(--shadow-gold);
    transform: translateY(-2px);
}

.fight-return-btn:active {
    transform: translateY(0);
}

.fight-return-btn .btn-icon {
    display: flex;
    flex-shrink: 0;
}

.fight-return-btn .btn-label {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* МОДАЛКА РЫБАЛКИ                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.fishing-modal-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.fishing-modal {
    animation: fishingAppear 0.4s ease-out;
    background: transparent;
    border: none;
    border-radius: 12px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(20, 60, 80, 0.3);
    display: flex;
    flex-direction: column;
    height: 600px;
    max-height: 85vh;
    max-width: 700px;
    min-height: 500px;
    min-width: 500px;
    overflow: hidden;
    position: relative;
    width: 600px;
}

@keyframes fishingAppear {
    from { 
        opacity: 0; 
        transform: translateY(30px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Фоновое изображение */
.fishing-modal::before {
    /* Fallback градиент если картинка не загрузилась */
    background: 
        var(--fishing-bg, none),
        linear-gradient(180deg, 
            #1a3a4a 0%, 
            #0d2832 30%,
            #0a1f2a 60%,
            #051015 100%);
    background-position: center;
    background-size: cover;
    content: '';
    filter: brightness(0.45) saturate(0.9);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

/* Градиентный оверлей */
.fishing-modal::after {
    background: linear-gradient(180deg, 
        rgba(10, 20, 30, 0.6) 0%, 
        rgba(5, 15, 25, 0.7) 50%,
        rgba(0, 10, 20, 0.85) 100%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

/* Рамка */
.fishing-modal .fishing-frame {
    border: 3px solid;
    border-image: linear-gradient(180deg, 
        rgba(139, 115, 53, 0.8) 0%, 
        rgba(92, 74, 31, 0.6) 50%, 
        rgba(60, 50, 30, 0.4) 100%) 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

.fishing-modal-header {
    align-items: center;
    background: linear-gradient(180deg, 
        rgba(20, 40, 50, 0.9) 0%, 
        rgba(15, 30, 40, 0.8) 100%);
    border-bottom: 2px solid rgba(139, 115, 53, 0.5);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 24px;
    position: relative;
    z-index: 5;
}

.fishing-modal-header .modal-title {
    align-items: center;
    color: var(--gold-light);
    display: flex;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

.fishing-modal-header .modal-title .header-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.fishing-modal-header .modal-title .header-text {
    background: linear-gradient(180deg, 
        var(--gold-light) 0%, 
        var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fishing-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    z-index: 5;
}

.fishing-content {
    color: var(--text-primary);
}

/* Меню рыбалки */
.fishing-stage.menu-stage {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Декоративный заголовок меню */
.fishing-menu-title {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 10px;
}

.fishing-menu-title .title-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.fishing-menu-title .title-text {
    color: var(--gold-light);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

.fishing-bait-info {
    background: linear-gradient(135deg, 
        rgba(20, 40, 50, 0.8) 0%, 
        rgba(15, 30, 40, 0.7) 100%);
    border: 2px solid rgba(139, 115, 53, 0.4);
    border-radius: 8px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.fishing-bait-info::before {
    background: radial-gradient(ellipse at top right, 
        rgba(139, 115, 53, 0.15) 0%, 
        transparent 70%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.bait-count {
    align-items: center;
    display: flex;
    gap: 14px;
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
}

.bait-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.bait-text {
    color: var(--bone);
}

.bait-text strong {
    color: var(--gold-light);
    font-family: var(--font-numeric);
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(168, 146, 74, 0.4);
}

.bait-timer {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 0.9rem;
    gap: 8px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

/* Последние уловы */
.fishing-recent-catches {
    background: linear-gradient(135deg, 
        rgba(15, 30, 40, 0.7) 0%, 
        rgba(10, 25, 35, 0.6) 100%);
    border: 1px solid rgba(139, 115, 53, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.catches-header {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    color: var(--bone);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    justify-content: space-between;
    padding: 14px 18px;
    transition: background 0.2s;
}

.catches-header:hover {
    background: rgba(139, 115, 53, 0.1);
}

.section-toggle {
    color: var(--gold-dark);
    font-size: 0.85rem;
}

.catches-list {
    border-top: 1px solid rgba(139, 115, 53, 0.2);
    padding: 10px;
}

.catch-item {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 10px 14px;
    transition: background 0.2s;
}

.catch-item:hover {
    background: rgba(139, 115, 53, 0.1);
}

.catch-item.rarity-1 { color: var(--text-secondary); }
.catch-item.rarity-2 { color: #7cb342; }
.catch-item.rarity-3 { color: #42a5f5; }
.catch-item.rarity-4 { color: #ab47bc; }
.catch-item.rarity-5 { color: var(--gold-light); }

.catch-name {
    flex: 1;
    font-weight: 600;
}

.catch-weight {
    font-family: var(--font-numeric);
    font-size: 0.9rem;
    opacity: 0.8;
}

.catch-rarity {
    font-size: 1rem;
}

/* Кнопки меню */
.fishing-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.no-bait-warning {
    align-items: center;
    background: linear-gradient(135deg, 
        rgba(107, 26, 26, 0.3) 0%, 
        rgba(80, 20, 20, 0.2) 100%);
    border: 2px solid var(--blood);
    border-radius: 8px;
    color: var(--blood-glow);
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Общие стили этапов */
.fishing-stage h4 {
    color: var(--gold-light);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.stage-description {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--gold-dark);
    border-radius: 0 6px 6px 0;
    color: var(--bone);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 24px 0;
    padding: 14px 18px;
}

/* Кнопки рыбалки */
.fishing-action-btn {
    background: linear-gradient(180deg, 
        rgba(30, 50, 60, 0.9) 0%, 
        rgba(20, 35, 45, 0.95) 100%);
    border: 2px solid rgba(139, 115, 53, 0.5);
    border-radius: 8px;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--bone);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 16px 24px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    transition: all 0.25s ease;
    width: 100%;
}

.fishing-action-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, 
        rgba(45, 70, 85, 0.95) 0%, 
        rgba(30, 50, 60, 0.98) 100%);
    border-color: var(--gold);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(139, 115, 53, 0.2);
    color: var(--gold-pale);
    transform: translateY(-2px);
}

.fishing-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.fishing-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.fishing-action-btn.cast-start-btn {
    background: linear-gradient(180deg, 
        rgba(92, 74, 31, 0.6) 0%, 
        rgba(60, 50, 25, 0.8) 100%);
    border-color: var(--gold);
    color: var(--gold-pale);
    font-size: 1.15rem;
    padding: 18px 28px;
}

.fishing-action-btn.cast-start-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, 
        rgba(139, 115, 53, 0.7) 0%, 
        rgba(92, 74, 31, 0.9) 100%);
    border-color: var(--gold-light);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(139, 115, 53, 0.3);
}

.fishing-action-btn.leave-btn {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(139, 115, 53, 0.3);
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 14px 20px;
}

.fishing-action-btn.leave-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(139, 115, 53, 0.5);
    color: var(--bone);
}

/* Этап заброса */
.cast-power-visual {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 24px;
    padding: 20px;
}

.cast-power-bar {
    background: linear-gradient(90deg, 
        rgba(107, 26, 26, 0.4) 0%, 
        rgba(20, 40, 50, 0.6) 35%, 
        rgba(20, 40, 50, 0.6) 65%, 
        rgba(107, 26, 26, 0.4) 100%);
    border: 2px solid rgba(139, 115, 53, 0.5);
    border-radius: 20px;
    height: 44px;
    overflow: visible;
    position: relative;
}

.cast-power-optimal {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 180, 100, 0.3) 20%,
        rgba(100, 180, 100, 0.3) 80%,
        transparent 100%);
    border-left: 3px solid rgba(100, 200, 100, 0.7);
    border-right: 3px solid rgba(100, 200, 100, 0.7);
    border-radius: 10px;
    height: 100%;
    left: 70%;
    position: absolute;
    top: 0;
    width: 15%;
}

.cast-power-fill {
    background: linear-gradient(90deg, 
        #3a7bd5 0%, 
        #5bc0de 50%, 
        #4caf50 70%, 
        #8bc34a 85%, 
        #cddc39 100%);
    border-radius: 18px 0 0 18px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 0.05s linear;
}

.cast-power-fill.optimal {
    background: linear-gradient(90deg, 
        #4caf50 0%, 
        #8bc34a 50%, 
        #cddc39 100%);
}

.cast-power-marker {
    background: linear-gradient(180deg, #fff 0%, #ddd 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.4);
    height: 56px;
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    transition: left 0.05s linear;
    width: 8px;
}

.cast-power-labels {
    color: var(--text-secondary);
    display: flex;
    font-family: var(--font-numeric);
    font-size: 0.9rem;
    justify-content: space-between;
    margin-top: 14px;
}

.cast-power-value {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    color: var(--gold-light);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 4px 16px;
    transition: color 0.2s, background 0.2s;
}

.cast-power-value.optimal {
    background: rgba(100, 180, 100, 0.3);
    color: #8bc34a;
}

.cast-btn {
    touch-action: manipulation;
    user-select: none;
}

.cast-btn.charging {
    animation: chargeGlow 0.3s ease-in-out infinite alternate;
    background: linear-gradient(180deg, 
        rgba(139, 115, 53, 0.8) 0%, 
        rgba(92, 74, 31, 0.9) 100%) !important;
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 30px rgba(139, 115, 53, 0.5) !important;
}

@keyframes chargeGlow {
    from { box-shadow: 0 0 20px rgba(139, 115, 53, 0.4); }
    to { box-shadow: 0 0 40px rgba(168, 146, 74, 0.7); }
}

/* Этап ожидания */
.wait-stage {
    text-align: center;
}

.fishing-bobber {
    margin: 30px 0 40px 0;
    position: relative;
    text-align: center;
}

.bobber-animation {
    animation: bob 2.5s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8));
    font-size: 5rem;
}

.bobber-animation.biting {
    animation: bite 0.12s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes bite {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-25px) rotate(-10deg) scale(1.2); }
}

.water-ripples {
    bottom: -20px;
    height: 30px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 120px;
}

.ripple {
    animation: ripple 2.5s linear infinite;
    border: 2px solid rgba(100, 180, 220, 0.3);
    border-radius: 50%;
    position: absolute;
}

.ripple-1 { animation-delay: 0s; height: 10px; left: 45px; width: 30px; }
.ripple-2 { animation-delay: 0.6s; height: 15px; left: 35px; width: 50px; }
.ripple-3 { animation-delay: 1.2s; height: 20px; left: 25px; width: 70px; }

@keyframes ripple {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

.wait-message {
    background: linear-gradient(135deg, 
        rgba(20, 40, 50, 0.8) 0%, 
        rgba(15, 30, 40, 0.7) 100%);
    border: 1px solid rgba(139, 115, 53, 0.3);
    border-radius: 10px;
    color: var(--bone);
    font-size: 1.05rem;
    font-style: italic;
    margin: 20px auto;
    max-width: 400px;
    padding: 18px 24px;
    text-align: center;
    transition: all 0.3s;
}

.wait-message.biting-message {
    animation: biteAlert 0.2s ease-in-out infinite;
    background: linear-gradient(135deg, 
        rgba(139, 115, 53, 0.4) 0%, 
        rgba(100, 80, 30, 0.3) 100%);
    border: 3px solid var(--gold);
    box-shadow: 
        0 0 30px rgba(139, 115, 53, 0.4),
        inset 0 0 20px rgba(139, 115, 53, 0.1);
    color: var(--gold-pale);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
}

@keyframes biteAlert {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(139, 115, 53, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 50px rgba(139, 115, 53, 0.6); }
}

/* Таймеры */
.bite-timer,
.hook-timer {
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    margin: 18px auto;
    max-width: 350px;
    padding: 12px 16px;
}

.bite-timer-bar,
.hook-timer-bar {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(139, 115, 53, 0.3);
    border-radius: 6px;
    flex: 1;
    height: 12px;
    overflow: hidden;
}

.bite-timer-fill,
.hook-timer-fill {
    background: linear-gradient(90deg, 
        #f44336 0%, 
        #ff9800 30%, 
        #ffc107 60%, 
        #8bc34a 100%);
    border-radius: 4px;
    height: 100%;
    transition: width 0.05s linear;
}

.bite-timer-text,
.hook-timer-text {
    color: var(--gold-light);
    font-family: var(--font-numeric);
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 50px;
    text-align: right;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Этап подсечки */
.hook-indicator-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin: 24px 0;
    padding: 20px;
}

.hook-indicator-track {
    background: linear-gradient(90deg, 
        rgba(20, 40, 50, 0.8) 0%, 
        rgba(20, 40, 50, 0.8) 100%);
    border: 2px solid rgba(139, 115, 53, 0.5);
    border-radius: 22px;
    height: 50px;
    overflow: visible;
    position: relative;
}

.hook-green-zone {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 180, 100, 0.4) 20%,
        rgba(100, 180, 100, 0.4) 80%,
        transparent 100%);
    border-left: 3px solid rgba(100, 200, 100, 0.7);
    border-right: 3px solid rgba(100, 200, 100, 0.7);
    border-radius: 10px;
    border: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: inset 0 0 10px rgba(139, 115, 53, 0.2);
    height: 100%;
    position: absolute;
    top: 0;
}

.hook-indicator {
    background: linear-gradient(180deg, #fff 0%, #ddd 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.4);
    height: 62px;
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    transition: left 0.016s linear;
    width: 10px;
}

.fishing-action-btn.hook-btn {
    background: linear-gradient(180deg, 
        rgba(92, 74, 31, 0.6) 0%, 
        rgba(60, 50, 25, 0.8) 100%);
    border-color: var(--gold);
    color: var(--gold-pale);
    font-size: 1.15rem !important;
    padding: 18px 28px !important;
}

.fishing-action-btn.hook-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, 
        rgba(139, 115, 53, 0.7) 0%, 
        rgba(92, 74, 31, 0.9) 100%);
    border-color: var(--gold-light);
}

.fishing-action-btn.pulse-animation {
    animation: pulseButton 0.5s ease-in-out infinite;
}

@keyframes pulseButton {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transform: scale(1); }
    50% { box-shadow: 0 0 12px rgba(139, 115, 53, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03); transform: scale(1.01); }
}

/* Этап вываживания */
.reel-fish-info {
    background: linear-gradient(135deg, 
        rgba(20, 40, 50, 0.8) 0%, 
        rgba(15, 30, 40, 0.7) 100%);
    border: 2px solid rgba(139, 115, 53, 0.4);
    border-radius: 10px;
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 14px 20px;
}

.fish-rarity { 
    font-size: 1.3rem; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.fish-rarity.rarity-1 { color: var(--text-secondary); }
.fish-rarity.rarity-2 { color: #7cb342; }
.fish-rarity.rarity-3 { color: #42a5f5; }
.fish-rarity.rarity-4 { color: #ab47bc; }
.fish-rarity.rarity-5 { color: var(--gold-light); text-shadow: 0 0 10px rgba(168, 146, 74, 0.5); }

.fish-weight {
    color: var(--bone);
    font-family: var(--font-numeric);
    font-size: 1.1rem;
    font-weight: 700;
}

.reel-tension-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 18px;
}

.reel-tension-container label {
    color: var(--gold-light);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.reel-tension-track {
    background: linear-gradient(90deg,
        rgba(107, 26, 26, 0.4) 0%,
        rgba(20, 40, 50, 0.6) 15%,
        rgba(20, 40, 50, 0.6) 85%,
        rgba(107, 26, 26, 0.4) 100%);
    border: 2px solid rgba(139, 115, 53, 0.5);
    border-radius: 20px;
    height: 44px;
    margin-bottom: 12px;
    overflow: visible;
    position: relative;
}

.reel-danger-zone {
    height: 100%;
    position: absolute;
    top: 0;
}

.reel-danger-zone.low {
    background: linear-gradient(90deg, 
        rgba(220, 50, 50, 0.5) 0%, 
        rgba(107, 26, 26, 0.2) 50%,
        transparent 100%);
    border-radius: 18px 0 0 18px;
    left: 0;
    width: 20%;
}

.reel-danger-zone.high {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(107, 26, 26, 0.2) 50%,
        rgba(220, 50, 50, 0.5) 100%);
    border-radius: 0 18px 18px 0;
    right: 0;
    width: 20%;
}

.reel-optimal-zone {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 180, 100, 0.35) 20%,
        rgba(100, 180, 100, 0.35) 80%,
        transparent 100%);
    border-left: 3px solid rgba(100, 200, 100, 0.7);
    border-right: 3px solid rgba(100, 200, 100, 0.7);
    border-radius: 10px;
    height: 100%;
    position: absolute;
    top: 0;
}

.reel-tension-indicator {
    background: linear-gradient(180deg, #fff 0%, #ddd 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.4);
    height: 56px;
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    transition: left 0.05s ease-out, background 0.2s, box-shadow 0.2s;
    width: 8px;
}

.reel-tension-indicator.optimal { 
    background: linear-gradient(180deg, #8bc34a 0%, #4caf50 100%);
    box-shadow: 
        0 0 20px rgba(100, 200, 100, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

.reel-tension-indicator.danger { 
    background: var(--blood-glow); 
    box-shadow: 0 0 12px rgba(163, 48, 48, 0.6); 
}

.reel-tension-indicator.warning { 
    background: var(--gold-dark); 
    box-shadow: 0 0 10px rgba(92, 74, 31, 0.5); 
}

.reel-status {
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 22px;
    text-align: center;
}

.status-good { color: var(--gold-light); }
.status-bad { animation: statusPulse 0.5s ease-in-out infinite; color: var(--blood-glow); }

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.reel-main-btn {
    margin-bottom: 20px;
    touch-action: manipulation;
    user-select: none;
    font-size: 1.1rem !important;
    padding: 18px 28px !important;
}

.reel-main-btn.active {
    animation: reelGlow 0.15s ease-in-out infinite alternate;
    background: linear-gradient(180deg, 
        rgba(139, 115, 53, 0.8) 0%, 
        rgba(92, 74, 31, 0.9) 100%) !important;
    border-color: var(--gold-light) !important;
}

@keyframes reelGlow {
    from { box-shadow: 0 0 20px rgba(139, 115, 53, 0.5); }
    to { box-shadow: 0 0 40px rgba(168, 146, 74, 0.7); }
}

.reel-progress-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 14px 18px;
}

.reel-progress-container label {
    color: var(--gold-light);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.reel-progress-bar {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(139, 115, 53, 0.4);
    border-radius: 14px;
    height: 28px;
    overflow: hidden;
}

.reel-progress-fill {
    background: linear-gradient(90deg, 
        #3a7bd5 0%, 
        #4caf50 50%, 
        #8bc34a 75%,
        #cddc39 100%);
    border-radius: 12px;
    height: 100%;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(100, 180, 100, 0.4);
}

.reel-warning {
    animation: warningPulse 0.4s ease-in-out infinite;
    background: linear-gradient(135deg, 
        rgba(107, 26, 26, 0.3) 0%, 
        rgba(80, 20, 20, 0.2) 100%);
    border: 2px solid var(--blood);
    border-radius: 8px;
    color: var(--blood-glow);
    font-size: 0.875rem;
    margin-top: 12px;
    padding: 10px 14px;
    text-align: center;
}

@keyframes warningPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Результат */
.result-stage {
    padding: 30px 20px;
    text-align: center;
}

.result-stage.success {
    background: radial-gradient(ellipse at center, 
        rgba(139, 115, 53, 0.15) 0%, 
        transparent 70%);
}

.result-stage.failure {
    background: radial-gradient(ellipse at center, 
        rgba(107, 26, 26, 0.15) 0%, 
        transparent 70%);
}

.result-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.6));
}

.result-icon.success { 
    animation: successBounce 0.6s ease-out; 
}

.result-icon.failure { 
    animation: failureShake 0.5s ease-out; 
}

@keyframes successBounce {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes failureShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-15px); }
    40% { transform: translateX(15px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

.result-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 16px 0;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

.result-title.success { 
    color: var(--gold-light); 
    text-shadow: 0 0 20px rgba(168, 146, 74, 0.5);
}

.result-title.failure { 
    color: var(--blood-glow); 
}

.result-message {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    color: var(--bone);
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 14px 24px;
}

.result-bait-info {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 350px;
    margin: 0 auto;
}

.result-actions-loading {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-dots {
    animation: loadingDots 1s ease-in-out infinite;
    color: var(--gold-dark);
    font-size: 2rem;
    letter-spacing: 6px;
}

@keyframes loadingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* МЕДИА-ЗАПРОСЫ: ПК = landscape (ширина > высота)                     */
/*                Мобилка = portrait (высота > ширина)                 */
/* ═══════════════════════════════════════════════════════════════════ */

/* ПК режим (горизонтальный экран) */
@media (orientation: landscape) {
    /* Бургер-меню скрыто на ПК */
    .hud-burger-menu {
        display: none !important;
    }
    
    /* Быстрые действия видны на ПК */
    .hud-quick-actions {
        display: flex !important;
    }
    
    .fight-log-sidebar {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        align-self: stretch !important;
    }
    
    .fight-log-mobile {
        display: none !important;
    }
    
    .fight-main-area {
        flex-direction: row !important;
    }
    
    /* Модалки на ПК - ограниченный размер */
    .content-modal {
        width: auto !important;
        height: auto !important;
        max-width: 800px !important;
        max-height: 85vh !important;
        min-width: 400px;
    }
    
    .content-modal.has-media {
        max-width: 1100px !important;
    }
    
    /* Инвентарь на ПК */
    .inventory-modal {
        width: 520px !important;
        height: auto !important;
        max-width: 520px !important;
        max-height: 70vh !important;
    }
    
    /* Модалка предмета на ПК */
    .item-modal {
        width: 520px !important;
        height: auto !important;
        max-width: 520px !important;
        max-height: 70vh !important;
    }
    
    /* Модалка награды на ПК - ограниченная ширина */
    .reward-modal-overlay .reward-modal {
        width: auto !important;
        max-width: 600px !important;
        height: auto !important;
        max-height: 85vh !important;
        min-width: 400px !important;
    }
    
    /* Нижняя часть на ПК: панель с аватаром по центру */
    .hud-bottom-container {
        align-items: flex-end !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }
    
    .hud-bottom-container .hud-movement {
        align-self: flex-end !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        margin: 0 !important;
        position: absolute !important;
        left: 6px !important;
    }
    
    .hud-bottom-container .hud-avatar-belt-container {
        align-self: center !important;
        flex-shrink: 0 !important;
        order: 2 !important;
        margin: 0 auto !important;
    }
    
    .hud-bottom-container .hud-belt-items {
        flex: 1 !important;
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-self: flex-end !important;
    }
    
    .hud-bottom-container .hud-belt-items .belt-panel {
        width: auto !important;
    }
    
    .hud-bottom-container .hud-bottom-bars {
        align-self: flex-end !important;
        flex-shrink: 0 !important;
        order: 3 !important;
        margin: 0 !important;
    }
    
    /* Бары внутри контейнера с аватаром на ПК */
    .hud-avatar-belt-container .hud-bottom-bars {
        width: 100% !important;
        height: 100% !important;
    }
    
    .hud-avatar-belt-container .hud-bottom-bars .bars-content {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Когда пояса нет на ПК - аватар и бары в одну строку */
    .hud-avatar-belt-container:not(:has(.hud-belt-items)) {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .hud-avatar-belt-container:not(:has(.hud-belt-items)) .hud-bottom-bars {
        width: auto !important;
        flex: 1 !important;
        min-width: 200px !important;
    }
    
    /* Режим инверсии на ПК - джойстик справа, панель по центру */
    .hud-bottom-container.joystick-right .hud-movement {
        order: 3 !important;
        left: auto !important;
        right: 6px !important;
    }
    
    .hud-bottom-container.joystick-right .hud-avatar-belt-container {
        order: 1 !important;
        align-self: center !important;
        margin: 0 auto !important;
    }
    
    .hud-bottom-container.joystick-right .hud-bottom-bars {
        order: 1 !important;
    }
}

/* Альтернативный медиа-запрос для мобильных устройств (на случай проблем с orientation) */
@media (max-width: 768px) {
    /* Модалки на мобилке - на весь экран, закрывают верхний HUD */
    .content-modal-overlay,
    .inventory-modal-overlay,
    .profile-modal-overlay,
    .item-modal-overlay,
    .quest-journal-modal-overlay,
    .trade-modal-overlay,
    .reward-modal-overlay,
    .crafting-modal-overlay,
    .party-invite-modal-overlay,
    .chat-modal-overlay,
    .resurrection-offer-modal-overlay {
        z-index: 3100 !important;
        padding-top: 0 !important;
        padding: 0 !important;
        top: 0 !important;
    }
    
    /* Resurrection offer modal на мобилке - поверх всего */
    .resurrection-offer-modal-overlay {
        z-index: 10000 !important;
    }
    
    /* Trade modal имеет особый padding, убираем его на мобилке */
    .trade-modal-overlay {
        padding: 0 !important;
    }
    
    /* Все модалки на мобилке - на весь экран */
    .content-modal-overlay .content-modal,
    .inventory-modal-overlay .inventory-modal,
    .profile-modal-overlay .profile-modal,
    .item-modal-overlay .item-modal,
    .quest-journal-modal-overlay .quest-journal-modal,
    .trade-modal-overlay .trade-modal,
    .reward-modal-overlay .reward-modal,
    .crafting-modal-overlay .crafting-modal,
    .chat-modal-overlay .chat-modal,
    .resurrection-offer-modal-overlay .resurrection-offer-modal {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* Мобильный режим (вертикальный экран) */
@media (orientation: portrait) {
    /* Бургер-меню видно на мобилке */
    .hud-burger-menu {
        display: block !important;
    }
    
    /* Быстрые действия скрыты на мобилке */
    .hud-quick-actions {
        display: none !important;
    }
    
    .fight-log-sidebar {
        display: none !important;
    }
    
    .fight-log-mobile {
        display: flex !important;
    }
    
    /* Модалки на мобилке - на весь экран, закрывают верхний HUD */
    .content-modal-overlay,
    .inventory-modal-overlay,
    .profile-modal-overlay,
    .item-modal-overlay,
    .quest-journal-modal-overlay,
    .trade-modal-overlay,
    .reward-modal-overlay,
    .crafting-modal-overlay,
    .party-invite-modal-overlay,
    .chat-modal-overlay,
    .resurrection-offer-modal-overlay {
        z-index: 3100 !important;
        padding-top: 0 !important;
        padding: 0 !important;
        top: 0 !important;
    }
    
    /* Resurrection offer modal на мобилке - поверх всего */
    .resurrection-offer-modal-overlay {
        z-index: 10000 !important;
    }
    
    /* Trade modal имеет особый padding, убираем его на мобилке */
    .trade-modal-overlay {
        padding: 0 !important;
    }
    
    /* Модалки на мобилке - центрированы по вертикали */
    .content-modal-overlay {
        align-items: center !important;
        justify-content: center !important;
    }
    
    .content-modal-overlay .content-modal {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Все модалки на мобилке - на весь экран */
    .inventory-modal-overlay .inventory-modal,
    .profile-modal-overlay .profile-modal,
    .item-modal-overlay .item-modal,
    .quest-journal-modal-overlay .quest-journal-modal,
    .trade-modal-overlay .trade-modal,
    .reward-modal-overlay .reward-modal,
    .crafting-modal-overlay .crafting-modal,
    .chat-modal-overlay .chat-modal,
    .resurrection-offer-modal-overlay .resurrection-offer-modal {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
    
    /* Слоты ФИКСИРОВАННЫЙ РАЗМЕР на мобилке */
    .equip-grid .inventory-slot-wrapper,
    .inventory-modal .equip-grid .inventory-slot-wrapper,
    .profile-modal .equip-grid .inventory-slot-wrapper {
        width: 64px !important;
        height: 64px !important;
    }
    
    .inventory-modal .items-grid,
    .inventory-modal .skills-grid,
    .inventory-modal .belt-grid {
        grid-template-columns: repeat(5, 55px) !important;
    }
    
    /* Слоты на странице инвентаря - фиксированный размер на мобилке */
    .skills-grid,
    .items-grid {
        grid-template-columns: repeat(5, 55px) !important;
    }
    
    .skills-grid .inventory-slot-wrapper,
    .items-grid .inventory-slot-wrapper,
    .belt-grid .inventory-slot-wrapper {
        width: 55px !important;
        height: 55px !important;
    }
    
    /* Нижняя часть на мобилке: джойстик слева, панель справа */
    .hud-bottom-container {
        align-items: flex-end !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    
    /* Джойстик слева */
    .hud-bottom-container .hud-movement {
        align-self: flex-end !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        margin: 0 !important;
        position: relative !important;
        left: auto !important;
        overflow: visible !important;
    }
    
    /* Панель справа от джойстика */
    .hud-bottom-container .hud-avatar-belt-container {
        flex: 1 !important;
        order: 2 !important;
        width: auto !important;
        max-width: calc(100vw - 120px) !important;
        align-self: flex-end !important;
        margin: 0 !important;
        display: flex !important;
        min-width: 0 !important;
    }
    
    /* Когда пояса нет - контейнер не растягивается */
    .hud-bottom-container .hud-avatar-belt-container:not(:has(.hud-belt-items)) {
        flex: 0 0 auto !important;
        max-width: none !important;
    }
    
    .hud-avatar-belt-container .hud-avatar-inline .avatar-img,
    .hud-avatar-belt-container .hud-avatar-inline .avatar-placeholder {
        height: 50px !important;
        width: 50px !important;
    }
    
    /* Ограничиваем ширину пояса на мобилках */
    .hud-avatar-belt-container .hud-belt-items {
        flex: 0 0 auto;
        max-width: 200px;
        min-width: 140px;
    }
    
    .hud-avatar-belt-container .hud-belt-items .belt-panel {
        width: 100%;
        max-width: 200px;
    }
    
    /* Ограничиваем сетку предметов в поясе на мобилках */
    .hud-avatar-belt-container .belt-items-grid {
        max-width: 200px;
        justify-content: flex-start;
    }
    
    /* Бары должны быть той же ширины, что и пояс */
    .hud-avatar-belt-container .hud-bottom-bars {
        max-width: 200px;
        width: 100%;
    }
    
    .hud-avatar-belt-container .hud-bottom-bars .progress-bar {
        width: 100%;
    }
    
    /* Когда пояса нет на мобилке - аватар и бары в одну строку */
    .hud-avatar-belt-container:not(:has(.hud-belt-items)) {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }
    
    .hud-avatar-belt-container:not(:has(.hud-belt-items)) .hud-bottom-bars {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 150px !important;
        max-width: 200px !important;
    }
    
    /* Бары HP/EXP уже выровнены по левому краю через базовые стили */
    
    /* Пояс внутри контейнера - не отдельно */
    .hud-bottom-container .hud-belt-items {
        display: none;
    }
    
    .hud-avatar-belt-container .hud-belt-items {
        display: block;
    }
    
    /* Скрываем блок с аватаром в бою на мобилке */
    .game-container.fight-active .hud-avatar-belt-container {
        display: none !important;
    }
    
    /* Модалка рыбалки на мобилке */
    .fishing-modal {
        border-radius: 0;
        height: 100%;
        margin: 0;
        max-height: 100vh;
        max-width: 100%;
        min-width: 100%;
        width: 100%;
    }
    
    .fishing-modal-header {
        padding: 14px 18px;
    }
    
    .fishing-modal-header .modal-title {
        font-size: 1.1rem;
    }
    
    .fishing-modal-content {
        padding: 18px;
    }
    
    .bobber-animation {
        font-size: 4rem;
    }
    
    .fishing-action-btn {
        font-size: 1rem;
        padding: 14px 20px;
    }
    
    .cast-power-visual {
        padding: 16px;
    }
    
    .cast-power-bar {
        height: 40px;
    }
    
    .result-icon {
        font-size: 4rem;
    }
    
    .result-title {
        font-size: 1.5rem;
    }
    
    /* На широких мобильных экранах - то же расположение */
    @media (orientation: portrait) and (min-width: 600px) {
        .hud-bottom-container .hud-avatar-belt-container {
            max-width: calc(100vw - 24px) !important;
        }
    }
    
    /* Режим для левшей - джойстик справа, панель слева */
    .hud-bottom-container.joystick-right .hud-movement {
        order: 2 !important;
        align-self: flex-end !important;
    }
    
    .hud-bottom-container.joystick-right .hud-avatar-belt-container {
        order: 1 !important;
        align-self: flex-end !important;
        margin: 0 !important;
    }
    
    /* Лента инициативы на мобилке - горизонтальная сверху */
    .fight-panel-v2 {
        grid-template-areas: "initiative initiative"
                "status status"
                "boss boss"
                "main main"
                "log log"
                "actions actions" !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto 1fr auto auto !important;
    }
    
    .initiative-bar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: none !important;
        flex-direction: row !important;
        max-height: 80px !important;
        max-width: 100% !important;
        min-height: 70px !important;
        min-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
    }
    
    .initiative-scroll {
        flex-direction: row !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px !important;
    }
    
    .initiative-portrait {
        flex-direction: column !important;
        min-height: 60px !important;
        min-width: 70px !important;
        max-width: 90px !important;
        width: auto !important;
        padding: 3px 4px !important;
    }
    
    .initiative-portrait .portrait-frame {
        height: 32px !important;
        width: 32px !important;
        margin: 0 auto !important;
    }
    
    .initiative-portrait .portrait-info {
        align-items: center !important;
        text-align: center !important;
        gap: 1px !important;
    }
    
    .initiative-portrait .portrait-name {
        text-align: center !important;
        font-size: 9px !important;
    }
    
    .initiative-portrait .portrait-level {
        font-size: 7px !important;
    }
    
    .initiative-portrait .portrait-hp-text {
        text-align: center !important;
        font-size: 8px !important;
    }
    
    .initiative-portrait .portrait-hp-container {
        width: 100% !important;
    }
    
    .initiative-portrait .portrait-hp-bar {
        height: 3px !important;
    }
    
    .initiative-portrait.current-turn {
        padding-left: 4px !important;
        padding-top: 6px !important;
    }
    
    .initiative-portrait .portrait-status,
    .initiative-portrait .portrait-buffs {
        justify-content: center !important;
    }
    
    /* Скроллбар для горизонтальной прокрутки инициативы */
    .initiative-scroll::-webkit-scrollbar {
        height: 6px !important;
        width: auto !important;
    }
    
    .initiative-scroll::-webkit-scrollbar-thumb {
        background: #4CAF50 !important;
        border-radius: 3px !important;
    }
    
    .initiative-scroll::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 3px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* OBSERVE AROUND MODAL - Модалка осмотра локации */
/* ═══════════════════════════════════════════════════════════════════ */

.observe-around-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.3);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 20px;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 3000;
}

.observe-around-modal-overlay.draggable-mode {
    backdrop-filter: none;
    background: transparent;
    pointer-events: none;
}

.observe-around-modal-overlay.draggable-mode .observe-around-modal {
    pointer-events: auto;
}

.observe-around-modal {
    animation: slideUp 0.2s ease;
    background: linear-gradient(180deg, rgba(20, 18, 16, 0.95) 0%, rgba(12, 10, 8, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    max-width: 320px;
    min-width: 280px;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.observe-header {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    pointer-events: auto;
    position: relative;
}

.observe-close-btn {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    padding: 6px 8px;
    transition: all 0.2s ease;
}

.observe-close-btn:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.observe-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    pointer-events: auto;
}

.observe-items-compact {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.observe-item-row {
    position: relative;
}

.observe-item-compact {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    padding: 10px 16px;
    pointer-events: auto;
    position: relative;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
    z-index: 1;
}

.observe-item-compact:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bone);
}

.observe-item-compact:active {
    background: rgba(255, 255, 255, 0.08);
}

.observe-item-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.observe-item-compact .observe-item-name {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 1;
}

.observe-item-shadow {
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.3) 0%, 
        rgba(0, 0, 0, 0.15) 50%, 
        rgba(0, 0, 0, 0.3) 100%);
    height: 1px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.observe-item-row:first-child .observe-item-shadow {
    display: none;
}

.observe-loading,
.observe-error,
.observe-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.observe-loading span,
.observe-error span,
.observe-empty .empty-text {
    opacity: 1;
}

.observe-empty .empty-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 1;
}

.observe-error {
    color: var(--blood);
    font-size: 0.9rem;
    opacity: 1;
}

.in-fight-badge,
.teammate-badge {
    margin-left: 6px;
}

/* Цвета по уровню опасности */
.observe-item-compact.danger-standart .observe-item-name { color: var(--bone); }
.observe-item-compact.danger-rare .observe-item-name { color: #4fc3f7; }
.observe-item-compact.danger-nammed .observe-item-name { color: #ba68c8; }
.observe-item-compact.danger-elite .observe-item-name { color: #ffd54f; }
.observe-item-compact.danger-elite-rare .observe-item-name { color: #ff9800; }
.observe-item-compact.danger-elite-named .observe-item-name { color: #ff7043; }
.observe-item-compact.danger-local-boss .observe-item-name { color: #e91e63; }
.observe-item-compact.danger-master-boss .observe-item-name { color: #f44336; }
.observe-item-compact.danger-global-boss .observe-item-name { color: #ff1744; }
.observe-item-compact.danger-death .observe-item-name { color: #d50000; }
.observe-item-compact.danger-npc .observe-item-name { color: #81c784; }
.observe-item-compact.danger-animal .observe-item-name { color: #a1887f; }
.observe-item-compact.danger-gathering .observe-item-name { color: #aed581; }
.observe-item-compact.danger-rock .observe-item-name { color: #90a4ae; }
.observe-item-compact.danger-event .observe-item-name { color: var(--gold); }

.observe-item-compact.chest .observe-item-name { color: var(--gold); }
.observe-item-compact.qnpc .observe-item-name { color: #81c784; }
.observe-item-compact.obelisk .observe-item-name { color: #ba68c8; }
.observe-item-compact.tomb .observe-item-name { color: #888; }

.observe-item-compact.attack-all {
    background: rgba(139, 50, 50, 0.2);
    border-left: 2px solid rgba(200, 80, 80, 0.5);
}

.observe-item-compact.attack-all:hover:not(:disabled) {
    background: rgba(139, 50, 50, 0.3);
    border-left-color: rgba(220, 100, 100, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CHEST MODAL - Модалка сундука */
/* ═══════════════════════════════════════════════════════════════════ */

.chest-modal-overlay {
    align-items: center;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.75);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 20px;
    padding-bottom: var(--tg-safe-area-bottom, 0px);
    padding-top: var(--tg-safe-area-top, 0px);
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 3100;
}

.chest-modal-overlay.draggable-mode {
    backdrop-filter: none;
    background: transparent;
    pointer-events: none;
}

.chest-modal-overlay.draggable-mode .chest-modal {
    pointer-events: auto;
}

.chest-modal {
    animation: slideUp 0.3s ease, chest-glow 2s ease-in-out infinite;
    background: linear-gradient(180deg, rgba(30, 28, 24, 0.98) 0%, rgba(20, 18, 16, 0.98) 30%, rgba(12, 10, 8, 0.98) 70%, rgba(6, 5, 4, 0.98) 100%);
    border: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: 0 20px 60px var(--shadow-void), 0 0 60px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    contain: layout style paint;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    max-width: 420px;
    min-width: 300px;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

@keyframes chest-glow {
    0%, 100% { box-shadow: 0 20px 60px var(--shadow-void), 0 0 40px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
    50% { box-shadow: 0 20px 60px var(--shadow-void), 0 0 80px var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}

.chest-modal-header {
    align-items: center;
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.25) 0%, rgba(26, 24, 22, 0.95) 100%);
    border-bottom: 2px solid var(--gold);
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    pointer-events: auto;
    position: relative;
}

.chest-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    pointer-events: auto;
}

.chest-loading,
.chest-error {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.chest-error {
    color: var(--blood);
}

.chest-discovery {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    text-align: center;
}

.chest-image-container {
    position: relative;
}

.chest-image {
    border: 2px solid var(--gold);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    height: 120px;
    object-fit: contain;
    width: 120px;
}

.chest-glow {
    animation: chest-pulse 2s ease-in-out infinite;
    background: radial-gradient(ellipse at center, rgba(139, 115, 53, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    height: 200px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    z-index: -1;
}

@keyframes chest-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.chest-text {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(139, 115, 53, 0.5);
}

.chest-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.chest-modal-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 12px;
    padding: 16px 20px;
}

.chest-modal-actions .action-btn.open-chest {
    background: linear-gradient(180deg, rgba(139, 115, 53, 0.9) 0%, rgba(100, 85, 40, 0.95) 100%);
    border: 1px solid var(--gold);
    color: #fff;
    flex: 1;
    font-weight: 600;
    justify-content: center;
    padding: 14px 24px;
}

.chest-modal-actions .action-btn.open-chest:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(160, 135, 60, 0.95) 0%, rgba(120, 100, 50, 0.98) 100%);
    box-shadow: 0 4px 20px rgba(139, 115, 53, 0.4);
}

.chest-modal-actions .action-btn.close-reward {
    flex: 1;
    justify-content: center;
}

/* OPTIMIZATION: Отключение анимаций для слабых устройств и пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Отступ сверху для хедеров модалок в fullscreen режиме (не draggable) для Telegram */
.content-modal-overlay:not(.draggable-mode) .content-header,
.content-modal-overlay:not(.draggable-mode) .content-modal-close {
    top: calc(18px + var(--tg-safe-area-top, 0px)) !important;
}

.content-modal-overlay:not(.draggable-mode) .content-modal-content {
    padding-top: calc(24px + var(--tg-safe-area-top, 0px)) !important;
}

.inventory-modal-overlay:not(.draggable-mode) .inventory-modal-header,
.profile-modal-overlay:not(.draggable-mode) .profile-modal-header,
.item-modal-overlay:not(.draggable-mode) .item-modal-header,
.chat-modal-overlay:not(.draggable-mode) .chat-modal-header,
.trade-modal-overlay:not(.draggable-mode) .trade-modal-header,
.quest-journal-modal-overlay:not(.draggable-mode) .quest-journal-modal-header,
.reward-modal-overlay:not(.draggable-mode) .reward-modal-header,
.crafting-modal-overlay:not(.draggable-mode) .crafting-modal-header,
.chest-modal-overlay:not(.draggable-mode) .chest-modal-header,
.observe-around-modal-overlay:not(.draggable-mode) .observe-header {
    padding-top: calc(18px + var(--tg-safe-area-top, 0px)) !important;
}