/* ═══════════════════════════════════════════════════════════════════════════
   🔫 STREET RPG - GANGSTER UI v2.0
   Modern dark theme with neon accents
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --rpg-bg: #050505;
    --rpg-card: #0c0c0c;
    --rpg-card-border: #1a1a1a;
    --rpg-card-hover: #111;
    --rpg-text: #e5e5e5;
    --rpg-text-dim: #777;
    --rpg-text-muted: #444;
    --rpg-accent: #10b981;
    --rpg-accent-dark: #065f46;
    --rpg-accent-glow: rgba(16, 185, 129, 0.3);
    --rpg-gold: #f59e0b;
    --rpg-danger: #ef4444;
    --rpg-info: #3b82f6;
    --rpg-purple: #8b5cf6;
    --rpg-orange: #f97316;
}

/* === MAIN CONTENT === */
.rpg-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: var(--rpg-bg);
}

/* === HERO CARD === */
.rpg-hero {
    background: linear-gradient(160deg, #111 0%, #080808 100%);
    border: 1px solid var(--rpg-card-border);
    border-radius: 20px;
    padding: 20px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.rpg-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rpg-accent), var(--rpg-gold), var(--rpg-accent));
}

/* === RESOURCE BARS === */

@keyframes pulse-hp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* === QUICK STATS === */

.rpg-stat {
    flex: 1;
    background: #080808;
    border: 1px solid #151515;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}

.rpg-stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.rpg-stat-num {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.rpg-stat-name {
    font-size: 9px;
    color: var(--rpg-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* === MENU GRID === */

.rpg-menu-btn {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 16px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}

.rpg-menu-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--btn-color, var(--rpg-accent));
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.rpg-menu-btn:active {
    transform: scale(0.96);
    background: var(--rpg-card-hover);
}

.rpg-menu-btn:active::after { transform: scaleX(1); }

.rpg-menu-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.rpg-menu-btn.jobs { --btn-color: var(--rpg-orange); }
.rpg-menu-btn.train { --btn-color: var(--rpg-info); }
.rpg-menu-btn.pvp { --btn-color: var(--rpg-danger); }
.rpg-menu-btn.services { --btn-color: var(--rpg-accent); }
.rpg-menu-btn.inventory { --btn-color: var(--rpg-purple); }
.rpg-menu-btn.shop { --btn-color: var(--rpg-gold); }

.rpg-menu-btn i {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.rpg-menu-btn strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--rpg-text);
    margin-bottom: 2px;
}

.rpg-menu-btn span {
    font-size: 10px;
    color: var(--rpg-text-dim);
}

/* === SECTION === */
.rpg-section {
    margin-bottom: 12px;
}

.rpg-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.rpg-section-head i { font-size: 16px; }

.rpg-section-head span {
    font-size: 11px;
    font-weight: 700;
    color: var(--rpg-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === PANEL (Info Card) === */

/* === LIST === */
.rpg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rpg-list-item {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.rpg-list-item:active {
    transform: scale(0.98);
    background: var(--rpg-card-hover);
}

.rpg-list-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.rpg-list-item.selected {
    border-color: var(--rpg-accent);
    background: rgba(16, 185, 129, 0.05);
}

.rli-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #151515;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rli-body { flex: 1; min-width: 0; }

.rli-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rpg-text);
    margin-bottom: 3px;
}

.rli-sub {
    font-size: 11px;
    color: var(--rpg-text-dim);
}

.rli-meta {
    text-align: right;
    flex-shrink: 0;
}

.rli-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--rpg-accent);
}

.rli-tag {
    font-size: 10px;
    color: var(--rpg-text-muted);
    margin-top: 2px;
}

.rli-reward {
    font-size: 13px;
    font-weight: 700;
    color: var(--rpg-text);
}

.rli-reward.green { color: var(--rpg-accent); }
.rli-reward.gold { color: var(--rpg-gold); }
.rli-reward.red { color: var(--rpg-danger); }

.rli-cost {
    font-size: 10px;
    color: var(--rpg-text-muted);
    margin-top: 2px;
}

/* === BUTTONS === */
.rpg-btn {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.rpg-btn:active { transform: scale(0.97); }
.rpg-btn:disabled { opacity: 0.4; pointer-events: none; }

.rpg-btn.primary {
    background: linear-gradient(135deg, var(--rpg-accent) 0%, #059669 100%);
    color: #000;
    box-shadow: 0 4px 20px var(--rpg-accent-glow);
}

.rpg-btn.secondary {
    background: #151515;
    color: var(--rpg-text);
    border: 1px solid #252525;
}

.rpg-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
}

.rpg-btn.gold {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    color: #000;
}

/* === GRID BUTTONS === */

.rpg-btn-grid .rpg-btn {
    margin-top: 0;
}

/* === EMPTY STATE === */
.rpg-empty {
    text-align: center;
    padding: 50px 20px;
}

.rpg-empty i {
    font-size: 56px;
    display: block;
    margin-bottom: 14px;
    opacity: 0.4;
}

.rpg-empty p {
    font-size: 14px;
    color: var(--rpg-text-dim);
}

/* === PROGRESS === */

.rpg-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rpg-progress-fill.green { background: linear-gradient(90deg, #10b981, #34d399); }
.rpg-progress-fill.yellow { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rpg-progress-fill.red { background: linear-gradient(90deg, #ef4444, #f87171); }
.rpg-progress-fill.blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

/* === BADGE === */

.rpg-badge.green { background: rgba(16,185,129,0.12); color: var(--rpg-accent); }
.rpg-badge.gold { background: rgba(245,158,11,0.12); color: var(--rpg-gold); }
.rpg-badge.red { background: rgba(239,68,68,0.12); color: var(--rpg-danger); }
.rpg-badge.blue { background: rgba(59,130,246,0.12); color: var(--rpg-info); }

/* === RESULT CARD === */
.rpg-result {
    background: var(--rpg-card);
    border: 2px solid var(--rpg-card-border);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    margin-bottom: 12px;
}

.rpg-result.win {
    border-color: var(--rpg-accent);
    background: linear-gradient(180deg, rgba(16,185,129,0.08) 0%, var(--rpg-card) 100%);
}

.rpg-result.lose {
    border-color: var(--rpg-danger);
    background: linear-gradient(180deg, rgba(239,68,68,0.08) 0%, var(--rpg-card) 100%);
}

.rpg-result i {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
}

.rpg-result h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.rpg-result.win h2 { color: var(--rpg-accent); }
.rpg-result.lose h2 { color: var(--rpg-danger); }

.rpg-result p {
    font-size: 13px;
    color: var(--rpg-text-dim);
}

/* === COMBAT LOG === */
.rpg-combat-log {
    background: #060606;
    border: 1px solid #151515;
    border-radius: 12px;
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}

.combat-line {
    padding: 5px 0;
    color: var(--rpg-text-dim);
    border-bottom: 1px solid #0a0a0a;
}

.combat-line:last-child { border-bottom: none; }
.combat-line.hit { color: var(--rpg-orange); }
.combat-line.crit { color: var(--rpg-danger); font-weight: 700; }
.combat-line.miss { color: #444; font-style: italic; }
.combat-line.heal { color: var(--rpg-accent); }
.combat-line.system { color: var(--rpg-purple); font-weight: 600; }
.combat-line.gold { color: var(--rpg-gold); }

/* === TABS === */

/* === FIGHT HEADER === */

/* === TRAINING GRID === */
.rpg-train-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rpg-train-card {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.12s ease;
}

.rpg-train-card:active {
    transform: scale(0.96);
    border-color: var(--train-color, var(--rpg-accent));
}

.rpg-train-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.rpg-train-card.atk { --train-color: var(--rpg-orange); }
.rpg-train-card.def { --train-color: var(--rpg-info); }
.rpg-train-card.spd { --train-color: var(--rpg-purple); }
.rpg-train-card.vit { --train-color: var(--rpg-accent); }

.rpg-train-card i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.rpg-train-card strong {
    display: block;
    font-size: 13px;
    color: var(--rpg-text);
    margin-bottom: 6px;
}

.rpg-train-card span {
    font-size: 16px;
    font-weight: 700;
    color: var(--train-color, var(--rpg-text));
}

/* === INVENTORY GRID === */

.rpg-inv-slot.empty {
    opacity: 0.3;
    pointer-events: none;
}

.rpg-inv-slot.equipped {
    border-color: var(--rpg-accent);
    box-shadow: 0 0 10px var(--rpg-accent-glow);
}

.rpg-inv-slot .qty {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Rarity borders */
.rpg-inv-slot.common { border-color: #666; }
.rpg-inv-slot.uncommon { border-color: var(--rpg-accent); }
.rpg-inv-slot.rare { border-color: var(--rpg-info); }
.rpg-inv-slot.epic { border-color: var(--rpg-purple); }
.rpg-inv-slot.legendary { border-color: var(--rpg-gold); box-shadow: 0 0 12px rgba(245,158,11,0.3); }

/* === LEGACY SUPPORT === */
.rpg-char-card { 
    background: linear-gradient(160deg, #111 0%, #080808 100%);
    border: 1px solid var(--rpg-card-border);
    border-radius: 20px;
    padding: 20px 16px;
    margin-bottom: 12px;
    position: relative;
}

.rpg-char-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rpg-accent), var(--rpg-gold), var(--rpg-accent));
    border-radius: 20px 20px 0 0;
}

.rcc-header { display: flex; align-items: center; gap: 14px; }
.rcc-avatar { 
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--rpg-accent), var(--rpg-accent-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; border: 3px solid #1f1f1f;
    box-shadow: 0 0 25px var(--rpg-accent-glow);
    overflow: hidden;
}
.rcc-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.rcc-avatar-emoji {
    display: flex; align-items: center; justify-content: center;
}
.rcc-info { flex: 1; }
.rcc-name { font-size: 20px; font-weight: 700; color: #fff; }
.rcc-subtitle { font-size: 11px; color: var(--rpg-accent); margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; }
.rcc-level { 
    background: var(--rpg-accent); color: #000;
    font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 10px;
}

.rpg-stat-card { 
    background: #080808; border: 1px solid #151515; border-radius: 12px;
    padding: 12px; display: flex; align-items: center; gap: 10px;
}
.rsc-icon { 
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; background: #151515;
}
.rsc-icon.hp { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
.rsc-icon.energy { background: linear-gradient(135deg, #d97706, #78350f); }
.rsc-icon.atk { background: linear-gradient(135deg, #ea580c, #9a3412); }
.rsc-icon.def { background: linear-gradient(135deg, #2563eb, #1e3a8a); }
.rsc-icon.spd { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.rsc-icon.respect { background: linear-gradient(135deg, #8b5cf6, #5b21b6); }

.rsc-content { flex: 1; }
.rsc-label { font-size: 10px; color: var(--rpg-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.rsc-value { font-size: 15px; font-weight: 700; color: var(--rpg-text); }

.rpg-actions-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.rpg-action-card {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 16px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}
.rpg-action-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, var(--rpg-accent));
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.rpg-action-card:active { transform: scale(0.96); background: var(--rpg-card-hover); }
.rpg-action-card:active::after { transform: scaleX(1); }

.rpg-action-card.accent-green { --card-accent: var(--rpg-accent); }
.rpg-action-card.accent-orange { --card-accent: var(--rpg-orange); }
.rpg-action-card.accent-blue { --card-accent: var(--rpg-info); }
.rpg-action-card.accent-purple { --card-accent: #a855f7; }
.rpg-action-card.locked { opacity: 0.5; cursor: not-allowed; }

.rac-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.rac-title { font-size: 13px; font-weight: 700; color: var(--rpg-text); margin-bottom: 2px; }
.rac-desc { font-size: 10px; color: var(--rpg-text-dim); }

.rpg-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 4px; }
.rsh-icon { font-size: 16px; }
.rsh-title { font-size: 11px; font-weight: 700; color: var(--rpg-text-dim); text-transform: uppercase; letter-spacing: 1px; }

.rpg-info-card {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 14px;
    border-bottom: 1px solid #111;
}
.ric-row:last-child { border-bottom: none; }
.ric-label { font-size: 13px; color: var(--rpg-text-dim); }
.ric-value { font-size: 14px; font-weight: 600; color: var(--rpg-text); }
.ric-value.green { color: var(--rpg-accent); }
.ric-value.gold { color: var(--rpg-gold); }
.ric-value.red { color: var(--rpg-danger); }

.rpg-big-btn {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    background: linear-gradient(135deg, var(--rpg-accent) 0%, #059669 100%);
    color: #000;
    box-shadow: 0 4px 20px var(--rpg-accent-glow);
}
.rpg-big-btn:active { transform: scale(0.97); }
.rpg-big-btn:disabled { opacity: 0.4; pointer-events: none; }
.rpg-big-btn.secondary { background: #151515; color: var(--rpg-text); border: 1px solid #252525; box-shadow: none; }
.rpg-big-btn.danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: #fff; box-shadow: 0 4px 20px rgba(239,68,68,0.3); }

.rpg-empty { text-align: center; padding: 50px 20px; }
.rpg-empty-icon { font-size: 56px; margin-bottom: 14px; opacity: 0.4; display: block; }
.rpg-empty-text { font-size: 14px; color: var(--rpg-text-dim); }

/* Scrollbar */
.rpg-content::-webkit-scrollbar { width: 4px; }
.rpg-content::-webkit-scrollbar-track { background: transparent; }
.rpg-content::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* === EMOJI ICONS === */
/* These will be used as backgrounds for consistent styling */

/* === INVENTORY - EQUIPPED GRID === */

.rpg-equip-slot:not(.empty):active {
    transform: scale(0.98);
    background: var(--rpg-card-hover);
}

.rpg-equip-slot.empty {
    opacity: 0.5;
    cursor: default;
    border-style: dashed;
}

/* === MATERIALS GRID === */

/* === INVENTORY LIST === */
.rpg-inv-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rpg-inv-item.equipped {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--rpg-accent);
}

.rpg-inv-equipped-badge {
    background: var(--rpg-accent);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB - Resources Row
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-res {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* XP Bar */

/* ═══════════════════════════════════════════════════════════════════════════
   HUB - Quick Actions Menu
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-quick-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rpg-qm-btn {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rpg-qm-btn:active {
    transform: scale(0.97);
    background: var(--rpg-card-hover);
}

.rpg-qm-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.rpg-qm-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Color variants for quick menu icons */
.rpg-qm-btn:nth-child(1) .rpg-qm-icon { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.3); }
.rpg-qm-btn:nth-child(2) .rpg-qm-icon { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.3); }
.rpg-qm-btn:nth-child(3) .rpg-qm-icon { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); }
.rpg-qm-btn:nth-child(4) .rpg-qm-icon { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); }

.rpg-qm-text {
    flex: 1;
    min-width: 0;
}

.rpg-qm-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rpg-text);
    margin-bottom: 2px;
}

.rpg-qm-text span {
    font-size: 11px;
    color: var(--rpg-text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB - Combat Stats Row
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-combat-stats {
    display: flex;
    gap: 8px;
}

.rpg-cs-item {
    flex: 1;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}

.rpg-cs-icon {
    font-size: 18px;
    display: block;
    margin-bottom: 4px;
}

.rpg-cs-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--rpg-text);
    display: block;
}

.rpg-cs-lbl {
    font-size: 9px;
    color: var(--rpg-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB - Alert Card
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-alert-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--rpg-card) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.rpg-alert-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.rpg-alert-text {
    flex: 1;
}

.rpg-alert-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rpg-danger);
    margin-bottom: 2px;
}

.rpg-alert-text span {
    font-size: 12px;
    color: var(--rpg-text-dim);
}

.rpg-alert-btn {
    background: var(--rpg-danger);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rpg-alert-btn:active {
    transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLACK MARKET
   ═══════════════════════════════════════════════════════════════════════════ */

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

.rpg-bm-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rpg-purple);
}

.rpg-bm-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--rpg-text-dim);
    background: var(--rpg-card);
    padding: 6px 10px;
    border-radius: 8px;
}

.rpg-bm-desc {
    font-size: 12px;
    color: var(--rpg-text-dim);
    margin-bottom: 16px;
    line-height: 1.4;
}

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

.rpg-bm-card {
    background: var(--rpg-card);
    border: 2px solid var(--rpg-card-border);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    position: relative;
    transition: all 0.15s ease;
}

.rpg-bm-card.sold {
    opacity: 0.5;
}

.rpg-bm-card.cant-afford:not(.sold) {
    border-style: dashed;
}

.rpg-bm-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--rarity-color, #666);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.rpg-bm-icon {
    font-size: 36px;
    margin: 8px 0;
}

.rpg-bm-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rarity-color, var(--rpg-text));
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpg-bm-type {
    font-size: 10px;
    color: var(--rpg-text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.rpg-bm-stat {
    font-size: 12px;
    color: var(--rpg-accent);
    font-weight: 600;
    margin-bottom: 4px;
}

.rpg-bm-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--rpg-gold);
    margin: 8px 0;
}

.rpg-bm-buy {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    background: linear-gradient(135deg, var(--rpg-accent) 0%, #059669 100%);
    color: #000;
}

.rpg-bm-buy:active {
    transform: scale(0.95);
}

.rpg-bm-buy.disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
}

.rpg-bm-sold {
    background: #333;
    color: #666;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* Name display in creation screen */
.rc-name-display {
    font-size: 20px;
    font-weight: 700;
    color: var(--rpg-accent);
    padding: 12px 16px;
    background: var(--rpg-card);
    border-radius: 10px;
    border: 1px solid var(--rpg-accent);
}
.rc-name-hint {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

/* === LOADING SPINNER === */
.rpg-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--rpg-card-border);
    border-top-color: var(--rpg-gold);
    border-radius: 50%;
    animation: rpg-spin 0.8s linear infinite;
}

@keyframes rpg-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREET CARD - New Design
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-street-card {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.98));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.rpg-street-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #ffd700, #22c55e);
}

.rpg-street-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.rpg-street-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 215, 0, 0.5);
    overflow: hidden;
}

.rpg-street-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rpg-street-avatar span {
    font-size: 28px;
}

.rpg-street-info {
    flex: 1;
}

.rpg-street-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.rpg-street-rank {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rank-badge {
    font-size: 13px;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.level-badge {
    font-size: 13px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* XP Progress */
.rpg-street-xp {
    margin-bottom: 16px;
}

/* Character Identity */
.rpg-street-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}

.rpg-id-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rpg-id-emoji {
    font-size: 24px;
}

.rpg-id-text {
    display: flex;
    flex-direction: column;
}

.rpg-id-text small {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rpg-id-text strong {
    font-size: 13px;
    color: #ccc;
}

.rpg-id-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
}

/* Quick Stats Row */
.rpg-street-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.rpg-ss-item {
    text-align: center;
    padding: 10px 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.rpg-ss-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.rpg-ss-lbl {
    display: block;
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.rpg-shop-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.rpg-shop-title span:first-child {
    font-size: 24px;
}

.rpg-shop-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
    padding: 0 4px;
}

.rpg-shop-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.rpg-shop-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.rpg-shop-card:hover:not(.cant-afford) {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.rpg-shop-card.cant-afford {
    opacity: 0.5;
}

.rpg-shop-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.rpg-shop-info {
    flex: 1;
}

.rpg-shop-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.rpg-shop-effect {
    font-size: 12px;
    color: #22c55e;
}

.rpg-shop-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.rpg-shop-price {
    font-size: 13px;
    font-weight: 600;
    color: #ffd700;
}

.rpg-shop-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #000;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rpg-shop-btn:hover:not(.disabled) {
    transform: scale(1.05);
}

.rpg-shop-btn.disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
}

/* XP Remaining indicator */

/* ═══════════════════════════════════════════════════════════════════════════
   TRAINING - Professional Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-train-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.rth-icon {
    font-size: 32px;
}

.rth-info {
    flex: 1;
}

.rth-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.rth-subtitle {
    font-size: 12px;
    color: #888;
}

.rth-energy {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 8px;
}

.rth-energy.low {
    color: #ef4444;
}

.rpg-train-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 16px;
}

.rti-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
}

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

.rti-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

.rpg-train-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rpg-train-card {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rpg-train-card:hover:not(.disabled) {
    border-color: var(--stat-color, #22c55e);
    transform: translateY(-2px);
}

.rpg-train-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rpg-train-card.close {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.rtc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rtc-emoji {
    font-size: 28px;
}

.rtc-title {
    flex: 1;
}

.rtc-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.rtc-tagline {
    font-size: 11px;
    color: var(--stat-color, #888);
}

.rtc-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--stat-color, #22c55e);
}

.rtc-body {
    padding: 12px 14px;
}

.rtc-desc {
    font-size: 12px;
    color: #888;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.rtc-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rtc-benefits li {
    font-size: 10px;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.rtc-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
}

.rtc-progress-wrap {
    flex: 1;
}

.rtc-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
}

.rtc-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.rtc-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.rtc-train-btn {
    background: var(--btn-color, #22c55e);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rtc-train-btn:hover {
    transform: scale(1.05);
}

.rtc-quote {
    font-size: 10px;
    color: #555;
    font-style: italic;
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.rpg-train-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #ef4444;
    font-size: 12px;
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES - Professional Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-services-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.rsvh-icon {
    font-size: 32px;
}

.rsvh-info {
    flex: 1;
}

.rsvh-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.rsvh-subtitle {
    font-size: 12px;
    color: #888;
}

.rsvh-balance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #22c55e;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 8px;
}

/* Services Tabs */
.rpg-services-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.rst-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rst-tab:hover {
    border-color: #444;
}

.rst-tab.active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    border-color: #22c55e;
    color: #22c55e;
}

.rpg-services-content {
    min-height: 200px;
}

/* Healing Tab */
.rpg-heal-status {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
    margin-bottom: 16px;
}

.rhs-visual {
    position: relative;
    width: 80px;
    height: 80px;
}

.rhs-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    filter: drop-shadow(0 0 10px var(--hp-color));
}

.rhs-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--hp-color) var(--hp-percent), rgba(255,255,255,0.1) 0);
    mask: radial-gradient(circle, transparent 60%, black 61%);
    -webkit-mask: radial-gradient(circle, transparent 60%, black 61%);
}

.rhs-info {
    flex: 1;
}

.rhs-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 4px;
}

.rhs-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.rhs-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.rhs-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rpg-heal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.rho-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.rho-card:hover:not(.disabled) {
    border-color: #22c55e;
    transform: translateY(-2px);
}

.rho-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rho-card.premium {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
}

.rho-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: #3b82f6;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.rho-icon {
    font-size: 32px;
}

.rho-content {
    flex: 1;
}

.rho-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.rho-desc {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}

.rho-effect {
    font-size: 12px;
    color: #22c55e;
    font-weight: 500;
}

.rho-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #22c55e;
}

.rho-price.cant-afford {
    color: #ef4444;
}

.rpg-heal-full {
    text-align: center;
    padding: 40px 20px;
    background: var(--rpg-card);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
}

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

.rhf-title {
    font-size: 18px;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 4px;
}

.rhf-text {
    font-size: 13px;
    color: #888;
}

.rpg-heal-tip, .rpg-repair-tip, .rpg-enhance-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 11px;
    color: #888;
    margin-top: 16px;
}

/* Repair Tab */
.rpg-repair-empty, .rpg-enhance-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
}

.rre-icon, .ree-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.rre-title, .ree-title {
    font-size: 16px;
    font-weight: 600;
    color: #888;
    margin-bottom: 4px;
}

.rre-text, .ree-text {
    font-size: 12px;
    color: #666;
    margin-bottom: 16px;
}

.rre-btn {
    background: #22c55e;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rpg-repair-section {
    margin-bottom: 16px;
}

.rrs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 13px;
    color: #888;
}

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

.rrs-title {
    flex: 1;
    font-weight: 600;
}

.rrs-count {
    font-size: 11px;
    color: #666;
}

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

.rpg-repair-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rpg-repair-item:hover:not(.disabled) {
    border-color: #22c55e;
}

.rpg-repair-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rri-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 2px solid;
}

.rri-content {
    flex: 1;
}

.rri-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.rri-dur {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rri-dur-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.rri-dur-fill {
    height: 100%;
    border-radius: 3px;
}

.rri-dur-text {
    font-size: 11px;
    font-weight: 600;
}

.rri-action {
    text-align: right;
}

.rri-cost {
    font-size: 14px;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 4px;
}

.rri-cost.cant-afford {
    color: #ef4444;
}

.rri-btn {
    font-size: 10px;
    color: #888;
}

.rpg-repair-list.compact {
    flex-direction: row;
    flex-wrap: wrap;
}

.rpg-repair-item-good {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
}

.rrig-icon {
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 4px;
}

.rrig-name {
    font-size: 12px;
    font-weight: 500;
}

.rrig-status {
    font-size: 10px;
    color: #22c55e;
}

/* Enhance Tab */
.rpg-enhance-info {
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    margin-bottom: 12px;
}

.rei-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.rei-desc {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.rei-stats {
    display: flex;
    gap: 16px;
}

.rei-stat {
    display: flex;
    flex-direction: column;
}

.reis-label {
    font-size: 10px;
    color: #666;
}

.reis-value {
    font-size: 18px;
    font-weight: 700;
    color: #8b5cf6;
}

.rpg-enhance-chances {
    padding: 14px;
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.rec-title {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

.rec-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.rec-item {
    text-align: center;
    padding: 6px 4px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
    font-size: 10px;
    color: #22c55e;
}

.rec-item span {
    display: block;
    font-weight: 600;
}

.rec-item.warn {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.rec-item.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.rec-warning {
    font-size: 10px;
    color: #ef4444;
    text-align: center;
}

.rpg-enhance-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rpg-enhance-item {
    background: var(--rpg-card);
    border: 1px solid var(--rpg-card-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rpg-enhance-item:hover:not(.disabled) {
    border-color: #8b5cf6;
}

.rpg-enhance-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reni-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
}

.reni-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 2px solid;
}

.reni-info {
    flex: 1;
}

.reni-name {
    font-size: 14px;
    font-weight: 600;
}

.reni-level {
    font-size: 12px;
    color: #8b5cf6;
    margin-left: 4px;
}

.reni-slot {
    font-size: 11px;
    color: #666;
    text-transform: capitalize;
}

.reni-details {
    padding: 0 14px 14px;
}

.reni-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    padding: 4px 0;
}

.reni-target {
    color: #8b5cf6;
    font-weight: 600;
}

.reni-chance {
    color: #22c55e;
    font-weight: 600;
}

.reni-chance.low {
    color: #eab308;
}

.reni-stats {
    color: #22c55e;
}

.reni-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
}

.reni-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #22c55e;
}

.reni-cost.cant-afford {
    color: #ef4444;
}

.reni-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.reni-btn.disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
}

.reni-maxed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: #666;
    font-size: 12px;
}

/* Enhanced chances - safe items */
.rec-item.safe {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Inventory quantity badge for consumables */

/* Enhance table small text for materials */
.rec-item small {
    display: block;
    font-size: 8px;
    margin-top: 2px;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSIONS MODULE v2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Loading/Error States */
.rpg-loading, .rpg-error {
    text-align: center;
    padding: 60px 20px;
}
.rpg-loading-icon, .rpg-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: pulse 1.5s infinite;
}
.rpg-loading-text, .rpg-error-text {
    color: #888;
    font-size: 14px;
}
.rpg-btn-retry {
    margin-top: 16px;
    padding: 10px 24px;
    background: #333;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
}

/* Missions Header */
.rpg-missions-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid #222;
}
.rmh-icon {
    font-size: 32px;
}
.rmh-info {
    flex: 1;
}
.rmh-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.rmh-subtitle {
    font-size: 12px;
    color: #888;
}
.rmh-energy {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(234, 179, 8, 0.15);
    border-radius: 20px;
    color: #eab308;
    font-weight: 600;
    font-size: 14px;
}

/* Mission Tier */
.rpg-mission-tier {
    margin-bottom: 16px;
}
.rmt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #1a1a1a;
    border-left: 3px solid var(--tier-color);
    margin-bottom: 8px;
}
.rmt-emoji {
    font-size: 16px;
}
.rmt-name {
    font-weight: 700;
    color: var(--tier-color);
    font-size: 14px;
}
.rmt-desc {
    font-size: 11px;
    color: #666;
    margin-left: auto;
}
.rmt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mission Card */
.rpg-mission-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(145deg, #1a1a1a 0%, #111 100%);
    border-radius: 10px;
    border: 1px solid #222;
    cursor: pointer;
    transition: all 0.2s;
}
.rpg-mission-card:active {
    transform: scale(0.98);
}
.rpg-mission-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Active Mission */
.rpg-active-mission {
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border-radius: 16px;
    border: 2px solid var(--mission-color);
    padding: 20px;
    margin-bottom: 16px;
}
.ram-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.ram-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--mission-color) 0%, rgba(0,0,0,0.5) 100%);
    border-radius: 14px;
}
.ram-info {
    flex: 1;
}
.ram-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--mission-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ram-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/* Timer Ring */
.ram-timer-section {
    text-align: center;
    margin: 24px 0;
}
.ram-timer-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.ram-timer-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ram-ring-bg {
    fill: none;
    stroke: #222;
    stroke-width: 8;
}
.ram-ring-progress {
    fill: none;
    stroke: var(--mission-color);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    transition: stroke-dashoffset 1s linear;
}
.ram-timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    font-family: monospace;
}
.ram-timer-label {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

/* Progress Bar */
.ram-progress {
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0 8px;
}
.ram-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mission-color) 0%, #fff 100%);
    border-radius: 4px;
    transition: width 1s linear;
}
.ram-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #555;
}

/* Ready State */
.ram-ready {
    text-align: center;
    padding: 30px 0;
}
.ram-ready-icon {
    font-size: 64px;
    margin-bottom: 12px;
    animation: bounce 1s infinite;
}
.ram-ready-text {
    font-size: 24px;
    font-weight: 800;
    color: #22c55e;
}
.ram-ready-sub {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* Rewards Preview */
.ram-rewards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #222;
}
.ram-reward-item {
    text-align: center;
    padding: 10px;
    background: #111;
    border-radius: 8px;
}
.ram-reward-label {
    display: block;
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}
.ram-reward-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.ram-reward-value.green { color: #22c55e; }

/* Action Buttons */
.ram-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rpg-mission-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.rpg-mission-btn:active {
    transform: scale(0.98);
}
.rpg-mission-btn.complete {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
}
.rpg-mission-btn.waiting {
    background: #333;
    color: #666;
    cursor: not-allowed;
}
.rpg-mission-btn.abandon {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
}
.rpg-mission-btn.primary {
    background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
    color: #000;
}
.rpg-mission-btn.secondary {
    background: #222;
    color: #888;
}
.rmb-icon {
    font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTIVE MISSION V2 - Redesigned with Activity Logs */
/* ═══════════════════════════════════════════════════════════════════════════ */

.rpg-active-mission-v2 {
    padding: 0;
}

.ram2-card {
    position: relative;
    background: linear-gradient(180deg, #151515 0%, #0a0a0a 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #222;
    overflow: hidden;
}

.ram2-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--mission-color, #22c55e) 0%, transparent 70%);
    opacity: 0.05;
    animation: ram2Glow 4s ease-in-out infinite;
}
@keyframes ram2Glow {
    0%, 100% { opacity: 0.03; transform: scale(1); }
    50% { opacity: 0.08; transform: scale(1.1); }
}

.ram2-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ram2-icon-wrap {
    position: relative;
}

.ram2-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: #111;
    border-radius: 14px;
    border: 2px solid var(--mission-color, #22c55e);
}

.ram2-tier-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    color: #000;
    text-transform: uppercase;
}

.ram2-title {
    flex: 1;
}

.ram2-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.ram2-status {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}
.ram2-status.ready {
    color: #22c55e;
    animation: ram2StatusPulse 1s ease-in-out infinite;
}
.ram2-status.progress {
    color: var(--mission-color, #f59e0b);
}
@keyframes ram2StatusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Progress Ring */
.ram2-progress-section {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.ram2-progress-ring {
    position: relative;
    width: 140px;
    height: 140px;
}

.ram2-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ram2-ring-bg {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 8;
}

.ram2-ring-prog {
    fill: none;
    stroke: url(#progGradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 327;
    transition: stroke-dashoffset 1s ease;
    filter: drop-shadow(0 0 8px var(--mission-color, #22c55e));
}

.ram2-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ram2-time {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    font-family: 'SF Mono', monospace;
    letter-spacing: 1px;
}

.ram2-percent {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

/* Activity Log Section */
.ram2-log-section {
    background: #0d0d0d;
    border-radius: 12px;
    padding: 12px;
    margin: 16px 0;
    border: 1px solid #1a1a1a;
}

.ram2-log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a1a1a;
}

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

.ram2-log-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    margin-left: auto;
    animation: ram2Blink 1s ease-in-out infinite;
}
@keyframes ram2Blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ram2-logs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.ram2-log-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #111;
    border-radius: 8px;
    font-size: 13px;
    opacity: 0;
    transform: translateX(-10px);
    animation: ram2LogSlide 0.4s ease-out forwards;
}
@keyframes ram2LogSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ram2-log-entry.visible {
    opacity: 1;
    transform: translateX(0);
}

.ram2-log-time {
    font-size: 10px;
    font-weight: 700;
    color: #22c55e;
    min-width: 36px;
    font-family: 'SF Mono', 'Monaco', monospace;
    opacity: 0.7;
}

.ram2-log-text {
    color: #999;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* READY STATE V2 - GANGSTA PAYDAY */
/* ═══════════════════════════════════════════════════════════════════════════ */

.ram2-ready-v2 {
    position: relative;
    margin: 16px 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    min-height: 220px;
    background: linear-gradient(180deg, #0d1a0d 0%, #0a0a0a 100%);
    border: 2px solid #22c55e;
    transition: all 0.3s;
}
.ram2-ready-v2:hover {
    transform: scale(1.02);
    border-color: #4ade80;
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
}
.ram2-ready-v2:active {
    transform: scale(0.98);
}

.ram2-ready-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ram2-ready-wave {
    position: absolute;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
    animation: readyWave 3s ease-in-out infinite;
}
.ram2-ready-wave.wave2 {
    animation-delay: -1.5s;
    opacity: 0.5;
}
@keyframes readyWave {
    0%, 100% { transform: translateY(10%) scale(1); }
    50% { transform: translateY(-10%) scale(1.1); }
}

.ram2-ready-particles {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 60% 80%, rgba(34, 197, 94, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 30% 70%, rgba(34, 197, 94, 0.2) 1px, transparent 1px);
    background-size: 100% 100%;
    animation: particleFloat 4s ease-in-out infinite;
}
@keyframes particleFloat {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-10px); }
}

.ram2-ready-content {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    text-align: center;
}

.ram2-ready-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    border-radius: 20px;
    letter-spacing: 2px;
    margin-bottom: 16px;
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 25px rgba(34, 197, 94, 0.8); }
}

.ram2-ready-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}

.ram2-ready-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.ram2-ready-icon-wrap .ram2-ready-icon {
    position: relative;
    font-size: 56px;
    animation: iconBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

.ram2-ready-text {
    font-size: 24px;
    font-weight: 900;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    margin-bottom: 4px;
}

.ram2-ready-sub {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.ram2-hint-icon {
    display: inline-block;
    font-size: 24px;
    animation: tapHint 1.5s ease-in-out infinite;
}
@keyframes tapHint {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* Rewards Row */
.ram2-rewards {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #1a1a1a;
    margin-top: 16px;
}

.ram2-reward {
    text-align: center;
    padding: 8px 12px;
    background: #111;
    border-radius: 8px;
    min-width: 70px;
}

.ram2-rw-icon {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.ram2-rw-val {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* Actions V2 */
.ram2-actions {
    margin-top: 16px;
}

.ram2-actions-row {
    display: flex;
    gap: 10px;
}

.rpg-btn-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}
.rpg-btn-v2:active {
    transform: scale(0.98);
}

.rpg-btn-v2.primary {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
}
.rpg-btn-v2.primary:hover {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.rpg-btn-v2.primary.large {
    padding: 18px 24px;
    font-size: 16px;
}

.rpg-btn-v2.secondary {
    background: #1a1a1a;
    color: #888;
    border: 1px solid #333;
}
.rpg-btn-v2.secondary:hover {
    background: #222;
    color: #fff;
}

.rpg-btn-v2.danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}
.rpg-btn-v2.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

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

/* Starting Animation */
.rpg-mission-starting, .rpg-mission-completing {
    text-align: center;
    padding: 80px 20px;
}
.rms-icon { font-size: 64px; margin-bottom: 16px; display: block; }
.rms-text { font-size: 18px; font-weight: 700; color: #fff; }

/* Result Screen */
.rpg-mission-result {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
}
.rpg-mission-result.success {
    background: linear-gradient(145deg, rgba(34,197,94,0.15) 0%, #0a0a0a 100%);
    border: 2px solid #22c55e;
}
.rpg-mission-result.failed {
    background: linear-gradient(145deg, rgba(239,68,68,0.15) 0%, #0a0a0a 100%);
    border: 2px solid #ef4444;
}

.rpg-mission-result.success .rmr-title { color: #22c55e; }
.rpg-mission-result.failed .rmr-title { color: #ef4444; }

/* Rewards Section */
.rmr-rewards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.rmr-reward {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #151515;
    border-radius: 8px;
}

/* Penalties */
.rmr-penalties {
    margin-top: 12px;
    padding: 10px;
    background: rgba(239,68,68,0.1);
    border-radius: 8px;
}

/* Loot */
.rmr-loot {
    margin-top: 12px;
    padding: 12px;
    background: rgba(245,158,11,0.1);
    border-radius: 8px;
    border: 1px solid rgba(245,158,11,0.3);
}

/* Level Up */
.rmr-levelup {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(34,197,94,0.2) 0%, rgba(34,197,94,0.05) 100%);
    border-radius: 12px;
    border: 1px solid #22c55e;
    text-align: center;
}

/* Animations */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Additional Mission Button Styles */
.ram-actions-row {
    display: flex;
    gap: 10px;
}
.ram-actions-row .rpg-mission-btn {
    flex: 1;
}
.rpg-mission-btn.back {
    background: #222;
    color: #888;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION CHOICE UI - Decision Moment
   ═══════════════════════════════════════════════════════════════════════════ */

.rpg-mission-choice {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    animation: fadeInUp 0.4s ease;
}

/* Choice Header */
.rmc-choice-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.rmc-ch-icon {
    font-size: 36px;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.5));
    animation: pulse 2s infinite;
}

.rmc-ch-info {
    flex: 1;
}

.rmc-ch-status {
    font-size: 12px;
    font-weight: 700;
    color: #ffc107;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: blink 1s infinite;
}

.rmc-ch-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-top: 4px;
}

/* Story Box */
.rmc-choice-story {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(145deg, #1a1a1a 0%, #111 100%);
    border-radius: 14px;
    border: 1px solid #333;
    animation: fadeInUp 0.5s ease 0.1s backwards;
}

.rmc-cs-icon {
    font-size: 28px;
    opacity: 0.7;
}

.rmc-cs-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    color: #ccc;
    font-style: italic;
}

/* Options */
.rmc-choice-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeInUp 0.5s ease 0.2s backwards;
}

.rmc-co-title {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 4px;
}

.rmc-choice-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(145deg, #1f1f1f 0%, #141414 100%);
    border: 1px solid #333;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: slideInRight 0.4s ease backwards;
    animation-delay: var(--delay, 0s);
}

.rmc-choice-btn:hover {
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: var(--mission-color, #22c55e);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.rmc-choice-btn:active {
    transform: scale(0.98) translateX(4px);
}

.rmc-cb-content {
    flex: 1;
    text-align: left;
}

.rmc-cb-text {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    display: block;
}

.rmc-cb-mods {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.rmc-cb-mod {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
}

.rmc-cb-mod.positive {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.rmc-cb-mod.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.rmc-cb-arrow {
    font-size: 20px;
    color: #555;
    transition: all 0.3s;
}

.rmc-choice-btn:hover .rmc-cb-arrow {
    color: var(--mission-color, #22c55e);
    transform: translateX(4px);
}

/* Info Footer */
.rmc-choice-info {
    text-align: center;
    padding: 12px;
    color: #666;
    font-size: 12px;
    border-top: 1px solid #222;
}

/* Choice Processing Animation */
.rpg-choice-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    animation: fadeIn 0.3s ease;
}

.rcp-icon {
    font-size: 64px;
    animation: bounce 0.6s ease infinite;
}

.rcp-text {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-top: 16px;
}

.rcp-dots {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.rcp-dots span {
    font-size: 24px;
    color: #22c55e;
    animation: dotPulse 1.4s infinite;
}

.rcp-dots span:nth-child(2) { animation-delay: 0.2s; }
.rcp-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; }
}

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION CARD v2 - Better Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Переопределяем карточку миссии */
.rpg-mission-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(145deg, #1a1a1a 0%, #111 100%);
    border-radius: 12px;
    border: 1px solid #222;
    cursor: pointer;
    transition: all 0.2s;
}
.rpg-mission-card:active {
    transform: scale(0.98);
}
.rpg-mission-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Header: Icon + Title */
.rmc-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.rmc-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border-radius: 10px;
    flex-shrink: 0;
}
.rmc-title {
    flex: 1;
    min-width: 0;
}
.rmc-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
.rmc-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.3;
}

/* Locked State */
.rmc-locked {
    text-align: center;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
}

/* Stats Row */
.rmc-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}
.rmc-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}
.rmc-stat-icon {
    font-size: 14px;
}
.rmc-stat-val {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

/* Rewards Grid */
.rmc-rewards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.rmc-reward-item {
    text-align: center;
    padding: 8px 4px;
    background: #151515;
    border-radius: 8px;
}
.rmc-rw-label {
    display: block;
    font-size: 10px;
    color: #666;
    margin-bottom: 3px;
}
.rmc-rw-val {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #22c55e;
}
.rmc-reward-item.cash .rmc-rw-val { color: #22c55e; }
.rmc-reward-item.xp .rmc-rw-val { color: #60a5fa; }
.rmc-reward-item.loot .rmc-rw-val { color: #f59e0b; }

/* Footer */
.rmc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
}
.rmc-entry {
    font-size: 12px;
    color: #888;
}
.rmc-start {
    font-size: 13px;
    font-weight: 700;
    color: #22c55e;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION RESULT SCREEN v2 - Professional Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Completing Animation */
.rpg-completing-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}
.rcs-dice {
    font-size: 64px;
    animation: diceRoll 0.5s infinite;
}
.rcs-text {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-top: 16px;
}
.rcs-dots span {
    font-size: 24px;
    color: #22c55e;
    animation: dotPulse 1.5s infinite;
}
.rcs-dots span:nth-child(2) { animation-delay: 0.3s; }
.rcs-dots span:nth-child(3) { animation-delay: 0.6s; }

@keyframes diceRoll {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-20deg) scale(1.1); }
    75% { transform: rotate(20deg) scale(1.1); }
}
@keyframes dotPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Result Screen Container */
.rpg-result-screen {
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 16px;
    animation: resultSlideIn 0.4s ease-out;
}
.rpg-result-screen.success {
    background: linear-gradient(180deg, rgba(34,197,94,0.2) 0%, rgba(34,197,94,0.05) 50%, #0a0a0a 100%);
    border: 2px solid #22c55e;
    animation: resultSlideIn 0.4s ease-out, successGlow 2s ease-in-out infinite;
}
.rpg-result-screen.failed {
    background: linear-gradient(180deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.05) 50%, #0a0a0a 100%);
    border: 2px solid #ef4444;
    animation: resultSlideIn 0.4s ease-out, failShake 0.5s ease-out;
}

@keyframes successGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.4); }
}

@keyframes failShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes resultSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.rrs-header {
    text-align: center;
    margin-bottom: 24px;
}
.rrs-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 12px;
}
.rpg-result-screen.success .rrs-icon-wrap {
    background: radial-gradient(circle, rgba(34,197,94,0.3) 0%, transparent 70%);
}
.rpg-result-screen.failed .rrs-icon-wrap {
    background: radial-gradient(circle, rgba(239,68,68,0.3) 0%, transparent 70%);
}
.rrs-icon {
    font-size: 56px;
    animation: iconPop 0.5s ease-out;
}
@keyframes iconPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.rrs-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
}
.rpg-result-screen.success .rrs-title { color: #22c55e; }
.rpg-result-screen.failed .rrs-title { color: #ef4444; }

.rrs-roll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}
.rrs-roll-dice { font-size: 16px; }
.rrs-roll-vs {
    color: #444;
    font-style: italic;
}

/* Performance Badge */
.rrs-performance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    animation: perfSlide 0.4s ease-out;
}
@keyframes perfSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.rrs-performance.sloppy {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.rrs-performance.okay {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}
.rrs-performance.good {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.rrs-performance.great {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.rrs-performance.perfect {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.4);
    animation: perfSlide 0.4s ease-out, perfGlow 1.5s ease-in-out infinite;
}
@keyframes perfGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
}
.rrs-crit-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    animation: critPulse 0.5s ease-out;
}
@keyframes critPulse {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Main Reward (Success) */
.rrs-main-reward {
    text-align: center;
    padding: 20px;
    background: linear-gradient(145deg, rgba(34,197,94,0.15) 0%, rgba(34,197,94,0.05) 100%);
    border-radius: 12px;
    margin-bottom: 16px;
}
.rrs-main-icon {
    font-size: 32px;
    margin-bottom: 4px;
}
.rrs-main-amount {
    font-size: 40px;
    font-weight: 800;
    color: #22c55e;
    line-height: 1;
}
.rrs-main-label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stats Grid */
.rrs-stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.rrs-stat {
    flex: 1;
    max-width: 100px;
    text-align: center;
    padding: 12px 8px;
    background: #111;
    border-radius: 10px;
}
.rrs-stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
}
.rrs-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.rrs-stat-val.green { color: #22c55e; }
.rrs-stat-val.red { color: #ef4444; }
.rrs-stat-val.blue { color: #3b82f6; }
.rrs-stat-val.gold { color: #ffd700; }
.rrs-stat-label {
    font-size: 10px;
    color: #555;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Loot Section */
.rrs-loot {
    background: #111;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}
.rrs-loot-header {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 12px;
    text-align: center;
}
.rrs-loot-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.rrs-loot-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 8px;
    border-left: 3px solid var(--rarity-color, #888);
    animation: lootPop 0.4s ease-out backwards;
}
.rrs-loot-item:nth-child(1) { animation-delay: 0.1s; }
.rrs-loot-item:nth-child(2) { animation-delay: 0.2s; }
.rrs-loot-item:nth-child(3) { animation-delay: 0.3s; }
.rrs-loot-item:nth-child(4) { animation-delay: 0.4s; }
.rrs-loot-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes lootPop {
    0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    60% { transform: scale(1.1) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
.rrs-li-icon { font-size: 18px; }
.rrs-li-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rarity-color, #fff);
}
.rrs-li-qty {
    font-size: 11px;
    color: #666;
    background: #222;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Level Up */
.rrs-levelup {
    text-align: center;
    padding: 20px;
    margin-top: 16px;
    background: linear-gradient(145deg, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0.05) 100%);
    border-radius: 12px;
    border: 2px solid #ffd700;
    animation: levelUpGlow 1s infinite alternate;
}
@keyframes levelUpGlow {
    from { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
    to { box-shadow: 0 0 25px rgba(255,215,0,0.5); }
}
.rrs-lu-icon {
    font-size: 48px;
    animation: bounce 1s infinite;
}
.rrs-lu-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffd700;
    margin-top: 8px;
}
.rrs-lu-level {
    font-size: 14px;
    color: #888;
    margin-top: 4px;
}

/* Penalties (Failed) */
.rrs-penalties {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.rrs-penalty-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(239,68,68,0.1);
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,0.2);
}
.rrs-pen-icon {
    font-size: 20px;
    margin-right: 12px;
}
.rrs-pen-label {
    flex: 1;
    font-size: 14px;
    color: #888;
}
.rrs-pen-val {
    font-size: 16px;
    font-weight: 700;
    color: #ef4444;
}

/* Salvage */
.rrs-salvage {
    padding: 16px;
    background: rgba(34,197,94,0.1);
    border-radius: 10px;
    border: 1px solid rgba(34,197,94,0.2);
    margin-bottom: 16px;
}
.rrs-salvage-title {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}
.rrs-salvage-items {
    display: flex;
    gap: 16px;
}
.rrs-salvage-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
}
.rrs-salvage-item .green { color: #22c55e; }
.rrs-salvage-item .blue { color: #3b82f6; }

/* Tip */
.rrs-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(59,130,246,0.1);
    border-radius: 10px;
    border: 1px solid rgba(59,130,246,0.2);
}
.rrs-tip-icon { font-size: 18px; }
.rrs-tip-text {
    font-size: 13px;
    color: #3b82f6;
}

/* Action Buttons */
.rrs-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.rrs-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.rrs-btn:active {
    transform: scale(0.97);
}
.rrs-btn.primary {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
}
.rrs-btn.secondary {
    background: #222;
    color: #888;
    border: 1px solid #333;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVENTORY v2 - Professional Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Loading State */
.inv-loading, .inv-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.inv-loading-icon, .inv-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: pulse 2s infinite;
}
.inv-loading-text, .inv-error-text {
    font-size: 16px;
    color: #888;
}
.inv-retry-btn {
    margin-top: 16px;
    padding: 10px 24px;
    background: #22c55e;
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Equipped Section */
.inv-equipped-section {
    background: linear-gradient(180deg, rgba(34,197,94,0.1) 0%, transparent 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #1a1a1a;
}
.inv-equipped-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.iet-icon { font-size: 18px; }
.iet-text {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inv-equipped-grid {
    display: flex;
    gap: 10px;
}

.inv-equip-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: #111;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.inv-equip-slot:not(.empty) {
    border-color: var(--slot-rarity);
}
.inv-equip-slot.empty {
    opacity: 0.5;
    cursor: default;
}
.inv-equip-slot:not(.empty):active {
    transform: scale(0.97);
}

.ies-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 10px;
    margin-bottom: 8px;
}
.ies-icon { font-size: 24px; }
.ies-enhance {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #ffd700;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 4px;
    border-radius: 4px;
}
.ies-info { text-align: center; }
.ies-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--slot-rarity, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}
.ies-slot {
    font-size: 9px;
    color: #555;
    text-transform: uppercase;
}
.ies-rarity-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slot-rarity);
}

/* Tab Navigation */
.inv-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    background: #0a0a0a;
    padding: 6px;
    border-radius: 12px;
}
.inv-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.inv-tab.active {
    background: #22c55e;
}
.inv-tab-icon { font-size: 18px; }
.inv-tab-label {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
}
.inv-tab.active .inv-tab-label { color: #000; }
.inv-tab-count {
    font-size: 9px;
    color: #555;
    background: #222;
    padding: 2px 6px;
    border-radius: 10px;
}
.inv-tab.active .inv-tab-count {
    background: rgba(0,0,0,0.2);
    color: #000;
}

/* Tab Content */
.inv-content {
    min-height: 200px;
}

/* Empty State */
.inv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
.inv-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.inv-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}
.inv-empty-hint {
    font-size: 13px;
    color: #444;
    margin-top: 8px;
}

/* Filters */
.inv-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.inv-filter {
    padding: 8px 16px;
    background: #111;
    border: 1px solid #222;
    border-radius: 20px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.inv-filter.active {
    background: #22c55e;
    border-color: #22c55e;
    color: #000;
    font-weight: 600;
}

/* Equipment Items Grid */
.inv-items-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #111;
    border-radius: 12px;
    border-left: 3px solid var(--item-rarity);
    cursor: pointer;
    transition: all 0.2s;
}
.inv-item:active {
    transform: scale(0.98);
    background: #1a1a1a;
}
.inv-item.equipped {
    background: linear-gradient(90deg, rgba(34,197,94,0.1) 0%, #111 100%);
}
.inv-item-icon {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--item-rarity) 0%, #111 100%);
    border-radius: 10px;
    font-size: 22px;
    flex-shrink: 0;
}
.inv-item-equipped-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-item-body {
    flex: 1;
    min-width: 0;
}
.inv-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--item-rarity);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-item-stats {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.inv-item-rarity {
    font-size: 11px;
    color: #666;
    text-transform: capitalize;
}
.inv-item-power {
    font-size: 11px;
    color: #22c55e;
    font-weight: 600;
}
.inv-item-dur {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.inv-dur-bar {
    width: 40px;
    height: 4px;
    background: #222;
    border-radius: 2px;
    overflow: hidden;
}
.inv-dur-fill {
    height: 100%;
    border-radius: 2px;
}
.inv-dur-text {
    font-size: 10px;
    color: #555;
}

/* Consumables List */
.inv-consumables-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inv-consumable {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #111;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.inv-consumable:active {
    transform: scale(0.98);
}
.inv-cons-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e 0%, #111 100%);
    border-radius: 10px;
    font-size: 22px;
}
.inv-cons-info { flex: 1; min-width: 0; }
.inv-cons-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.inv-cons-desc {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}
.inv-cons-qty {
    font-size: 16px;
    font-weight: 700;
    color: #22c55e;
}

/* Materials Grid */
.inv-materials-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(59,130,246,0.1);
    border-radius: 10px;
    margin-bottom: 14px;
}
.inv-mat-info-icon { font-size: 16px; }
.inv-mat-info-text {
    font-size: 12px;
    color: #3b82f6;
}
.inv-materials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.inv-material {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #111;
    border-radius: 12px;
    border: 1px solid #222;
}
.inv-mat-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
.inv-mat-count {
    font-size: 20px;
    font-weight: 800;
    color: var(--mat-color, #fff);
}
.inv-mat-name {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-top: 4px;
}

/* Item Detail View */
.inv-detail-view {
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.inv-dc-row:last-child { border-bottom: none; }
.inv-dc-row.main {
    padding: 14px 0;
}

.inv-dc-value.green { color: #22c55e; }
.inv-dc-value.gold { color: #ffd700; }

.inv-dd-icon { font-size: 16px; }
.inv-dd-text {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.inv-action-btn:active {
    transform: scale(0.98);
}
.inv-action-btn.primary {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
}
.inv-action-btn.secondary {
    background: #222;
    color: #888;
    border: 1px solid #333;
}

.inv-sec-btn:active {
    transform: scale(0.97);
    background: #1a1a1a;
}

.inv-back-btn:active {
    background: #111;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ITEM DETAIL VIEW v2 - Compact & Informative
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact Header */
.inv-det-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, #111 100%);
    border-radius: 14px;
    border-left: 4px solid var(--rarity, #22c55e);
    margin-bottom: 12px;
}
.inv-det-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 12px;
    font-size: 28px;
    flex-shrink: 0;
}
.inv-det-info { flex: 1; min-width: 0; }
.inv-det-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--rarity, #fff);
    margin-bottom: 4px;
}
.inv-det-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}
.inv-det-eq {
    color: #22c55e;
    font-weight: 600;
}

/* Main Stat Highlight */
.inv-det-main-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #111;
    border-radius: 12px;
    margin-bottom: 10px;
}
.inv-dms-icon {
    font-size: 32px;
}
.inv-dms-info { flex: 1; }
.inv-dms-val {
    font-size: 28px;
    font-weight: 800;
    color: #22c55e;
    line-height: 1;
}
.inv-dms-name {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}
.inv-dms-enhance {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,215,0,0.1);
    border-radius: 8px;
    color: #ffd700;
    font-weight: 700;
}
.inv-dms-enhance span:first-child { font-size: 16px; }
.inv-dms-enhance span:last-child { font-size: 14px; }

/* Stats Grid */
.inv-det-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.inv-det-stat {
    text-align: center;
    padding: 10px 8px;
    background: #111;
    border-radius: 8px;
}
.inv-ds-label {
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.inv-ds-val {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* Durability Section */
.inv-det-dur {
    padding: 12px;
    background: #111;
    border-radius: 10px;
    margin-bottom: 10px;
}
.inv-dd-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 8px;
}
.inv-dd-head span:first-child { color: #888; }
.inv-dd-bar {
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.inv-dd-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}
.inv-dd-nums {
    text-align: center;
    font-size: 11px;
    color: #555;
}

/* Description */
.inv-det-desc {
    padding: 12px 14px;
    background: #0a0a0a;
    border-radius: 8px;
    border-left: 2px solid #333;
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-bottom: 10px;
}

/* Quick Info */
.inv-det-quick {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.inv-dq-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: #0a0a0a;
    border-radius: 8px;
}
.inv-dq-icon { font-size: 14px; }
.inv-dq-text {
    font-size: 12px;
    color: #666;
}

/* Primary Action */
.inv-det-actions {
    margin-bottom: 10px;
}
.inv-det-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.inv-det-btn:active { transform: scale(0.98); }
.inv-det-btn.equip {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #000;
}
.inv-det-btn.unequip {
    background: #ef4444;
    color: #fff;
}

/* Secondary Actions */
.inv-det-sec-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.inv-det-sec-btn {
    flex: 1;
    padding: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.inv-det-sec-btn:active {
    transform: scale(0.97);
    background: #1a1a1a;
}

/* Back Button */
.inv-det-back {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #222;
    border-radius: 8px;
    color: #555;
    font-size: 13px;
    cursor: pointer;
}
.inv-det-back:active { background: #111; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE v2 - Complete Character Stats
   ═══════════════════════════════════════════════════════════════════════════ */

.prof-container {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hero Section */
.prof-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    background: linear-gradient(145deg, rgba(34,197,94,0.15) 0%, #0a0a0a 100%);
    border-radius: 16px;
    border: 1px solid #1a1a1a;
    margin-bottom: 12px;
    position: relative;
}
.prof-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #111 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid #22c55e;
}
.prof-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prof-avatar-fallback {
    font-size: 32px;
}
.prof-hero-info {
    flex: 1;
}
.prof-name {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.prof-rank {
    display: flex;
    align-items: center;
    gap: 6px;
}
.prof-rank-emoji { font-size: 16px; }
.prof-rank-name {
    font-size: 13px;
    color: #22c55e;
    font-weight: 600;
}
.prof-level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    background: #111;
    border-radius: 12px;
    border: 2px solid #22c55e;
}
.prof-lvl-num {
    font-size: 24px;
    font-weight: 900;
    color: #22c55e;
    line-height: 1;
}
.prof-lvl-text {
    font-size: 10px;
    color: #666;
    font-weight: 600;
}

/* XP Section */
.prof-xp-section {
    padding: 14px;
    background: #111;
    border-radius: 12px;
    margin-bottom: 12px;
}
.prof-xp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}
.prof-xp-header span:first-child { color: #888; }
.prof-xp-total { color: #22c55e; font-weight: 600; }
.prof-xp-bar {
    height: 10px;
    background: #222;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}
.prof-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 5px;
    transition: width 0.5s ease;
}
.prof-xp-nums {
    text-align: center;
    font-size: 11px;
    color: #555;
}

/* Identity Cards */
.prof-identity {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.prof-id-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #111;
    border-radius: 12px;
    border-left: 3px solid #333;
}
.prof-id-card.trait { border-color: #a855f7; }
.prof-id-card.origin { border-color: #3b82f6; }
.prof-id-icon { font-size: 24px; }
.prof-id-info { flex: 1; min-width: 0; }
.prof-id-label {
    font-size: 9px;
    color: #555;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.prof-id-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.prof-id-desc {
    font-size: 10px;
    color: #666;
    line-height: 1.3;
}

/* Section Headers */
.prof-section {
    margin-bottom: 12px;
}
.prof-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.prof-sh-icon { font-size: 16px; }
.prof-sh-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Core Stats Grid */
.prof-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pcs-main {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.prof-core-stat .pcs-total {
    font-size: 24px;
    font-weight: 900;
    color: var(--stat-color);
}

.pcs-breakdown {
    font-size: 10px;
    color: #555;
}
.pcs-base { color: #666; }
.pcs-breakdown .green { color: #22c55e; margin-left: 4px; }
.pcs-breakdown .red { color: #ef4444; margin-left: 4px; }

/* Combat Stats Grid */
.prof-combat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.prof-combat-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #111;
    border-radius: 10px;
}
.prof-combat-stat.main {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, #111 100%);
    border: 1px solid #222;
}
.prof-combat-stat .pcs-icon { font-size: 20px; }
.prof-combat-stat .pcs-info { flex: 1; }
.prof-combat-stat .pcs-label {
    font-size: 11px;
    color: #666;
}
.prof-combat-stat .pcs-value {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}
.prof-combat-stat .pcs-value.gold { color: #ffd700; }
.prof-combat-stat .pcs-breakdown {
    font-size: 10px;
    color: #555;
}

/* Special Effects Grid */
.prof-effects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.prof-effect {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #111;
    border-radius: 10px;
    border-left: 3px solid var(--eff-color);
}

/* Equipment Summary */
.prof-equip-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Progress Grid */
.prof-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.prof-prog-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: #111;
    border-radius: 10px;
}

.pps-val.gold { color: #ffd700; }
.pps-val.green { color: #22c55e; }

/* Stats List */
.prof-stats-list {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
}
.prof-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #1a1a1a;
}
.prof-stat-row:last-child { border-bottom: none; }

/* Resources */
.prof-resources {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prof-resource {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #111;
    border-radius: 12px;
}
.prof-resource.cash { border-left: 3px solid #22c55e; }
.prof-resource.hp { border-left: 3px solid #ef4444; }
.prof-resource.energy { border-left: 3px solid #eab308; }

.pr-bar-fill.hp { background: #ef4444; }
.pr-bar-fill.energy { background: #eab308; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE v3 - Compact & Informative
   ═══════════════════════════════════════════════════════════════════════════ */

/* Combat Power Card */
.prof-power-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, #111 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,215,0,0.3);
    margin-bottom: 10px;
}

/* XP Section Compact */
.prof-xp-section {
    padding: 10px 12px;
    background: #111;
    border-radius: 10px;
    margin-bottom: 10px;
}
.prof-xp-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
}
.prof-xp-header span:first-child { color: #22c55e; font-weight: 600; }
.prof-xp-next { color: #666; }
.prof-xp-bar {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}
.prof-xp-fill {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
}

/* Identity Cards - Compact */
.prof-identity {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.prof-id-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #111;
    border-radius: 10px;
}
.prof-id-icon { font-size: 22px; }
.prof-id-info { flex: 1; min-width: 0; }
.prof-id-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.prof-id-desc {
    font-size: 9px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section Headers */
.prof-section { margin-bottom: 10px; }
.prof-section-head {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    padding: 0 4px;
    margin-bottom: 8px;
}

/* Core Stats Grid v3 */

/* Special Abilities Grid */
.prof-abilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.prof-ability {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #111;
    border-radius: 8px;
    border-left: 2px solid var(--ab-color);
}
.pa-icon { font-size: 14px; }
.pa-name {
    flex: 1;
    font-size: 10px;
    color: #888;
}
.pa-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--ab-color);
}

/* Equipment Row */

/* Progress Row */

.ppi-val.gold { color: #ffd700; }

/* Stats Compact */

.psc-row:last-child { border-bottom: none; }
.psc-row span:first-child { color: #888; }
.psc-row span:last-child { color: #fff; font-weight: 600; }
.psc-row .green { color: #22c55e; }

/* Resources Bar (Bottom) */

.prb-item.cash { border-bottom: 2px solid #22c55e; }
.prb-item.hp { border-bottom: 2px solid #ef4444; }
.prb-item.energy { border-bottom: 2px solid #eab308; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE v4 - Clean Stats Grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* 6-card stats grid */

/* Item Bonuses Display */
.inv-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #111;
    border-radius: 10px;
    margin-bottom: 12px;
}

.inv-bonus {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
    border-radius: 8px;
    border: 1px solid #333;
}

.inv-bonus.muted {
    color: #666;
    font-style: italic;
    border: none;
}

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

.ib-val {
    font-size: 14px;
    font-weight: 700;
    color: #22c55e;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE v5 - Enhanced Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero Card */
.prof-hero-card {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #333;
}
.phc-bg {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.phc-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}
.phc-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    flex-shrink: 0;
}
.phc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phc-avatar span { font-size: 32px; }
.phc-info { flex: 1; min-width: 0; }
.phc-name {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phc-rank {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.phc-rank-emoji { font-size: 16px; }
.phc-rank-name { font-size: 13px; color: #22c55e; font-weight: 600; }
.phc-level { font-size: 12px; color: #888; margin-top: 2px; }
.phc-power {
    text-align: center;
    background: rgba(0,0,0,0.3);
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #444;
}
.phc-power-rank { font-size: 24px; font-weight: 900; }
.phc-power-val { font-size: 16px; font-weight: 700; color: #fff; }
.phc-power-label { font-size: 10px; color: #888; text-transform: uppercase; }

/* Progress Section */
.prof-progress-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid #333;
}

/* XP Progress Row */
.pps-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.pps-xp {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pps-xp-icon {
    font-size: 24px;
}
.pps-xp-info {
    display: flex;
    flex-direction: column;
}
.pps-xp-total {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.pps-xp-next {
    font-size: 11px;
    color: #888;
}
.pps-percent {
    font-size: 18px;
    font-weight: 800;
    color: #22c55e;
}
.pps-bar {
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
}
.pps-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px;
    transition: width 0.3s;
}

/* Status Bars */
.prof-status-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.psb-item {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid #333;
}
.psb-item.critical { border-color: #ef4444; }
.psb-item.low { border-color: #eab308; }
.psb-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.psb-icon { font-size: 14px; }
.psb-label { font-size: 11px; color: #888; }
.psb-val { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff; }
.psb-bar {
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}
.psb-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.psb-fill.hp { background: linear-gradient(90deg, #ef4444, #dc2626); }
.psb-fill.energy { background: linear-gradient(90deg, #eab308, #ca8a04); }

/* Identity Cards */
.prof-identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.prof-id-card {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #333;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.prof-id-card.trait { border-left: 3px solid #a855f7; }
.prof-id-card.origin { border-left: 3px solid #3b82f6; }
.pic-icon { font-size: 24px; flex-shrink: 0; }
.pic-info { flex: 1; min-width: 0; }
.pic-type { font-size: 10px; color: #666; text-transform: uppercase; }
.pic-name { font-size: 13px; font-weight: 700; color: #fff; }
.pic-desc { font-size: 10px; color: #888; margin-top: 2px; }

/* Section Header */
.prof-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #333;
}
.prof-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
.psh-icon { font-size: 18px; }
.psh-title { font-size: 15px; font-weight: 700; color: #fff; }

/* Combat Grid */
.prof-combat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.pcg-stat { text-align: center; }
.pcg-ring {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 6px;
}
.pcg-ring svg { width: 100%; height: 100%; transform: rotate(0deg); }
.pcg-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}
.pcg-label { font-size: 11px; color: #888; }
.pcg-sub { font-size: 10px; color: #22c55e; margin-top: 2px; }

/* Secondary Stats */
.prof-secondary-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.pss-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
}
.pss-icon { font-size: 14px; }
.pss-name { font-size: 11px; color: #888; flex: 1; }
.pss-val { font-size: 13px; font-weight: 700; color: #fff; }

/* Abilities Grid */
.prof-abilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.prof-ability {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 2px solid var(--ab-color, #666);
}
.pa-icon { display: block; font-size: 18px; margin-bottom: 4px; }
.pa-name { display: block; font-size: 9px; color: #888; }
.pa-val { display: block; font-size: 12px; font-weight: 700; color: var(--ab-color, #fff); }

/* Equipment Grid */
.prof-equip-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prof-equip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid #333;
    border-left: 3px solid var(--eq-color, #666);
    cursor: pointer;
}
.prof-equip-item.empty {
    border-left-color: #444;
    opacity: 0.6;
}
.pei-icon { font-size: 28px; }
.pei-info { flex: 1; min-width: 0; }
.pei-name { font-size: 13px; font-weight: 700; color: #fff; }
.pei-bonus { font-size: 11px; color: #22c55e; margin-top: 2px; }
.pei-sub { font-size: 11px; color: #666; }
.pei-dur {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.pei-dur-bar {
    flex: 1;
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}
.pei-dur-fill { height: 100%; border-radius: 2px; }
.pei-dur span { font-size: 10px; }
.pei-rarity {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #000;
}

/* PvP Stats */
.prof-pvp-stats {}
.ppvp-main {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 14px;
}
.ppvp-rating { text-align: center; }
.ppvp-rating-val { font-size: 32px; font-weight: 900; color: #ffd700; }
.ppvp-rating-label { font-size: 11px; color: #888; }
.ppvp-winrate { text-align: center; }
.ppvp-wr-ring {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}
.ppvp-wr-ring svg { width: 100%; height: 100%; }
.ppvp-wr-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 800;
    color: #22c55e;
}
.ppvp-wr-label { font-size: 11px; color: #888; margin-top: 4px; }
.ppvp-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ppvp-det {
    text-align: center;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.ppvp-det-icon { display: block; font-size: 16px; margin-bottom: 4px; }
.ppvp-det span:nth-child(2) { display: block; font-size: 10px; color: #888; }
.ppvp-det span:nth-child(3) { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; }
.ppvp-det .green { color: #22c55e; }
.ppvp-det .red { color: #ef4444; }
.ppvp-det .gold { color: #ffd700; }

/* Mission Stats */
.prof-mission-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}
.pms-circle {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}
.pms-circle svg { width: 100%; height: 100%; }
.pms-circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.pms-circle-val { font-size: 20px; font-weight: 900; color: #22c55e; }
.pms-circle-label { font-size: 10px; color: #888; }
.pms-details { flex: 1; display: grid; gap: 6px; }
.pms-det {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
}
.pms-icon { font-size: 14px; }
.pms-det span:nth-child(2) { flex: 1; font-size: 12px; color: #888; }
.pms-det span:nth-child(3) { font-size: 14px; font-weight: 700; color: #fff; }
.pms-det .green { color: #22c55e; }
.pms-det .red { color: #ef4444; }
.pms-det .gold { color: #ffd700; }

/* Resources Card */
.prof-resources-card {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #333;
}
.prc-header {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.prc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.prc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.prc-item.cash { border-bottom: 2px solid #22c55e; }
.prc-icon { font-size: 24px; }
.prc-val { font-size: 16px; font-weight: 800; color: #fff; }
.prc-label { font-size: 10px; color: #888; }

/* Rank Progress */
.prof-rank-progress {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #333;
}
.prp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.prp-header span:first-child { font-size: 13px; font-weight: 600; color: #fff; }
.prp-next { font-size: 11px; color: #22c55e; }
.prp-bar {
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.prp-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px;
}
.prp-ranks {
    display: flex;
    justify-content: space-between;
}
.prp-milestone {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.4;
    transition: all 0.2s;
}
.prp-milestone.achieved {
    background: #22c55e;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIGHT RESULT - REDESIGNED UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* Result Header */
.fight-result-header {
    text-align: center;
    padding: 25px 20px;
    border-radius: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.fight-result-header.victory {
    background: linear-gradient(135deg, rgba(34,197,94,0.2) 0%, rgba(34,197,94,0.05) 100%);
    border: 2px solid #22c55e;
}
.fight-result-header.defeat {
    background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.05) 100%);
    border: 2px solid #ef4444;
}
.frh-icon {
    font-size: 48px;
    margin-bottom: 8px;
    animation: bounce 0.5s ease;
}
.frh-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 2px;
}
.fight-result-header.victory .frh-title { color: #22c55e; }
.fight-result-header.defeat .frh-title { color: #ef4444; }
.frh-subtitle {
    font-size: 11px;
    color: #888;
    margin-top: 5px;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* VS Card */
.fight-vs-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #333;
}
.fvs-fighter {
    flex: 1;
    text-align: center;
}
.fvs-avatar {
    font-size: 32px;
    margin-bottom: 6px;
}
.fvs-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.fvs-fighter.you .fvs-name { color: #22c55e; }
.fvs-fighter.enemy .fvs-name { color: #ef4444; }
.fvs-stats {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
}
.fvs-level {
    color: #888;
    background: #222;
    padding: 2px 6px;
    border-radius: 4px;
}
.fvs-rating {
    color: #ffd700;
    font-weight: 600;
}
.fvs-vs {
    font-size: 20px;
    font-weight: 900;
    color: #ffd700;
    padding: 0 15px;
}

/* Rewards Row */
.fight-rewards {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.fr-item {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    background: #1a1a1a;
    border-radius: 10px;
    border: 1px solid #333;
}
.fr-label {
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
}
.fr-value {
    font-size: 16px;
    font-weight: 800;
}
.fr-item.positive .fr-value { color: #22c55e; }
.fr-item.negative .fr-value { color: #ef4444; }
.fr-item.respect .fr-value { color: #a855f7; }
.fr-item.neutral .fr-value { color: #fff; }

/* Action Buttons */
.fight-actions {
    display: flex;
    gap: 10px;
}
.fa-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.fa-btn.primary {
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    color: #000;
}
.fa-btn.secondary {
    background: #222;
    color: #fff;
    border: 1px solid #333;
}
.fa-btn:active {
    transform: scale(0.98);
}
.fa-icon { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PIT - ARENA REDESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Arena Header */
.arena-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #333;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.arena-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ef4444, #ffd700);
}
.arena-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
}
.arena-emblem {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffd70030, #ef444430);
    border: 2px solid #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 30px rgba(255,215,0,0.5); }
}
.arena-name {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.arena-subtitle {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-top: 2px;
}

/* Rep Card */
.arena-rep-card {
    background: #111;
    border: 2px solid #333;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
}
.arc-tier-badge {
    position: absolute;
    top: -8px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
}
.arc-tier-icon { font-size: 14px; }
.arc-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.arc-rating-num {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.arc-rating-label {
    font-size: 10px;
    color: #888;
    letter-spacing: 2px;
    margin-top: 4px;
}
.arc-rank {
    text-align: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffd70020, #ffd70005);
    border: 1px solid #ffd70040;
    border-radius: 12px;
}
.arc-rank-num {
    font-size: 28px;
    font-weight: 900;
    color: #ffd700;
}
.arc-rank-label {
    font-size: 10px;
    color: #888;
}
.arc-progress {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #222;
}
.arc-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
}
.arc-progress-bar {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}
.arc-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.arc-max-tier {
    margin-top: 15px;
    text-align: center;
    padding: 8px;
    background: linear-gradient(135deg, #ffd70020, transparent);
    border-radius: 8px;
    color: #ffd700;
    font-weight: 800;
    font-size: 12px;
}

/* Fight Record */
.arena-record {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}
.ar-item {
    flex: 1;
    text-align: center;
}
.ar-icon { font-size: 16px; margin-bottom: 4px; }
.ar-value {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}
.ar-value.green { color: #22c55e; }
.ar-value.gold { color: #ffd700; }
.ar-value .dim { color: #666; font-size: 14px; }
.ar-label {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}
.ar-divider {
    width: 1px;
    height: 35px;
    background: #333;
}

/* Combat Power */
.arena-power {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}
.ap-title {
    font-size: 10px;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-align: center;
}
.ap-stats {
    display: flex;
    justify-content: space-around;
}
.ap-stat {
    text-align: center;
}
.ap-stat.hp.low { animation: hp-warning 1s infinite; }
@keyframes hp-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.ap-icon { font-size: 14px; }
.ap-val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    display: block;
    margin: 2px 0;
}
.ap-val .dim { color: #666; font-size: 12px; }
.ap-name {
    font-size: 10px;
    color: #666;
}

/* Main Action Cards */
.arena-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.arena-action-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}
.arena-action-card:active {
    transform: scale(0.98);
}
.arena-action-card .aac-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s;
}
.arena-action-card:active .aac-glow {
    opacity: 1;
}

/* Ranked Card */
.arena-action-card.ranked {
    border-color: #ffd70060;
    background: linear-gradient(135deg, #ffd70010 0%, #1a1a1a 100%);
}
.arena-action-card.ranked .aac-glow {
    background: radial-gradient(circle at center, #ffd70030, transparent);
}
.arena-action-card.ranked .aac-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.arena-action-card.ranked .aac-badge {
    background: #ffd700;
    color: #000;
}

/* Disabled State */
.arena-action-card.disabled {
    border-color: #ef444460;
    background: linear-gradient(135deg, #ef444410 0%, #1a1a1a 100%);
}
.arena-action-card.disabled .aac-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}
.arena-action-card.disabled .aac-badge {
    background: #ef4444;
    color: #fff;
}

/* Lobby Card */
.arena-action-card.lobby {
    border-color: #22c55e60;
    background: linear-gradient(135deg, #22c55e10 0%, #1a1a1a 100%);
}
.arena-action-card.lobby .aac-glow {
    background: radial-gradient(circle at center, #22c55e30, transparent);
}
.arena-action-card.lobby .aac-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.arena-action-card.lobby .aac-badge {
    background: #22c55e;
    color: #000;
}

.aac-content { flex: 1; }
.aac-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.aac-subtitle {
    font-size: 11px;
    color: #888;
}
.aac-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Arena Section */
.arena-section {
    background: #111;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.as-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #1a1a1a;
    border-bottom: 1px solid #222;
}
.as-icon { font-size: 18px; }
.as-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}
.as-badge {
    margin-left: auto;
    font-size: 10px;
    color: #888;
    background: #222;
    padding: 3px 8px;
    border-radius: 10px;
}

/* Leaderboard */
.arena-leaderboard {
    padding: 8px;
}
.al-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 4px;
    background: transparent;
    transition: background 0.2s;
}
.al-entry:last-child { margin-bottom: 0; }
.al-entry.me {
    background: #22c55e15;
    border: 1px solid #22c55e30;
}
.al-entry.top3 .al-rank {
    font-size: 20px;
}
.al-rank {
    width: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #888;
}
.al-info { flex: 1; }
.al-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.al-you {
    color: #22c55e;
    font-size: 10px;
    font-weight: 400;
}
.al-tier {
    font-size: 11px;
}
.al-rating {
    font-size: 16px;
    font-weight: 800;
    color: #ffd700;
}

/* Bottom Actions */
.arena-bottom {
    margin-top: 8px;
}
.arena-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.arena-btn:active { transform: scale(0.98); }
.arena-btn.history {
    background: #222;
    color: #fff;
    border: 1px solid #333;
}
.arena-btn.back {
    background: #1a1a1a;
    color: #888;
    border: 1px solid #333;
    margin-top: 16px;
}
.ab-icon { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOBBY SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.lobby-header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #22c55e15, #0d0d0d);
    border: 1px solid #22c55e40;
    border-radius: 16px;
    margin-bottom: 16px;
}
.lh-icon {
    font-size: 48px;
    margin-bottom: 10px;
}
.lh-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
}
.lh-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.lobby-modes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.lobby-mode-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 16px;
    position: relative;
}
.lobby-mode-card.friendly {
    border-color: #3b82f640;
}
.lobby-mode-card.wager {
    border-color: #ffd70040;
}
.lobby-mode-card.locked {
    opacity: 0.5;
}
.lmc-icon {
    width: 50px;
    height: 50px;
    background: #222;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.lmc-content { flex: 1; }
.lmc-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.lmc-desc {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}
.lmc-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lmc-tag {
    font-size: 10px;
    color: #888;
    background: #222;
    padding: 3px 8px;
    border-radius: 6px;
}
.lmc-tag.gold { color: #ffd700; }
.lmc-status {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.lmc-status.coming {
    background: #3b82f6;
    color: #fff;
}
.lmc-status.locked {
    background: #333;
    color: #888;
}

.lobby-info {
    background: #111;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 16px;
}
.li-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    margin-bottom: 12px;
}
.li-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.li-step {
    display: flex;
    align-items: center;
    gap: 12px;
}
.li-num {
    width: 24px;
    height: 24px;
    background: #22c55e;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.li-text {
    font-size: 12px;
    color: #ccc;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RANKED SEARCH SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.ranked-search-screen {
    text-align: center;
    padding: 20px;
}
.rss-header {
    margin-bottom: 30px;
}
.rss-emblem {
    font-size: 48px;
    margin-bottom: 10px;
}
.rss-title {
    font-size: 24px;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 2px;
}

/* Radar Animation */
.rss-animation {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.rss-radar {
    width: 120px;
    height: 120px;
    border: 3px solid #ffd70040;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle, #ffd70010 0%, transparent 70%);
}
.rss-radar::before,
.rss-radar::after {
    content: '';
    position: absolute;
    border: 1px solid #ffd70020;
    border-radius: 50%;
}
.rss-radar::before {
    top: 20px; left: 20px; right: 20px; bottom: 20px;
}
.rss-radar::after {
    top: 40px; left: 40px; right: 40px; bottom: 40px;
}
.rss-radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, #ffd700, transparent);
    transform-origin: left center;
    animation: radar-sweep 2s linear infinite;
}
@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rss-radar-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #ffd700;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #ffd700;
}

.rss-info {
    margin-bottom: 30px;
}
.rss-status {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.rss-range {
    font-size: 12px;
    color: #888;
}
.rss-error {
    color: #ef4444;
    font-size: 14px;
    margin: 20px 0;
}
.rss-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.arena-btn.cancel {
    background: #ef444420;
    color: #ef4444;
    border: 1px solid #ef444440;
}
.arena-btn.primary {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #000;
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIGHT HISTORY - RAP SHEET
   ═══════════════════════════════════════════════════════════════════════════ */

.history-header {
    text-align: center;
    padding: 25px 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #333;
    border-radius: 16px;
    margin-bottom: 12px;
}
.hh-icon {
    font-size: 40px;
    margin-bottom: 8px;
}
.hh-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 3px;
}
.hh-subtitle {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* Stats Summary */
.history-stats {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
}
.hs-item {
    flex: 1;
    text-align: center;
}
.hs-value {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}
.hs-value.green { color: #22c55e; }
.hs-value.red { color: #ef4444; }
.hs-value.gold { color: #ffd700; }
.hs-label {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}
.hs-divider {
    width: 1px;
    height: 30px;
    background: #333;
}

/* Fight List */
.history-list {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.history-fight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.2s;
}
.history-fight:last-child {
    border-bottom: none;
}
.history-fight.win {
    border-left: 3px solid #22c55e;
}
.history-fight.loss {
    border-left: 3px solid #ef4444;
}

.hf-num {
    font-size: 14px;
    font-weight: 800;
    color: #ffd700;
    min-width: 28px;
    text-align: center;
}
.hf-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
}
.hf-icon {
    font-size: 16px;
}
.hf-letter {
    font-size: 10px;
    font-weight: 800;
    color: #666;
}
.history-fight.win .hf-letter { color: #22c55e; }
.history-fight.loss .hf-letter { color: #ef4444; }

.hf-info {
    flex: 1;
}
.hf-opponent {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}
.hf-details {
    display: flex;
    gap: 10px;
    font-size: 11px;
}
.hf-change {
    font-weight: 700;
}
.hf-change.positive { color: #22c55e; }
.hf-change.negative { color: #ef4444; }
.hf-cash {
    font-weight: 600;
}
.hf-cash.positive { color: #22c55e; }
.hf-cash.negative { color: #ef4444; }

.hf-num {
    font-size: 11px;
    color: #444;
    font-weight: 600;
}

/* Empty State */
.history-empty {
    text-align: center;
    padding: 40px 20px;
    background: #111;
    border-radius: 12px;
    margin-bottom: 12px;
}
.he-icon {
    font-size: 48px;
    margin-bottom: 10px;
}
.he-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.he-text {
    font-size: 12px;
    color: #888;
}

/* Total */
.history-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 12px;
}
.ht-label {
    font-size: 12px;
    color: #888;
}
.ht-value {
    font-size: 16px;
    font-weight: 800;
}
.ht-value.positive { color: #22c55e; }
.ht-value.negative { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOOD DASHBOARD - Streets Main Page
   ═══════════════════════════════════════════════════════════════════════════ */

/* GREETING BANNER */
.hood-greeting {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #333;
    border-left: 4px solid #22c55e;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}
.hg-icon {
    font-size: 32px;
}
.hg-content {
    flex: 1;
}
.hg-text {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.hg-name {
    color: #22c55e;
}
.hg-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.hg-balance {
    font-size: 14px;
    font-weight: 700;
    color: #22c55e;
    background: #22c55e15;
    padding: 6px 12px;
    border-radius: 8px;
}

/* ALERTS */
.hood-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}
.hood-alert:active {
    transform: scale(0.98);
}
.hood-alert.danger {
    background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%);
    border: 1px solid #dc2626;
}
.hood-alert.warning {
    background: linear-gradient(135deg, #713f12 0%, #451a03 100%);
    border: 1px solid #f59e0b;
}
.ha-icon {
    font-size: 28px;
}
.ha-content {
    flex: 1;
}
.ha-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.ha-text {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}
.ha-action {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 6px;
}

/* DAILY BONUS */
.hood-daily {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #14532d 0%, #052e16 100%);
    border: 2px solid #22c55e;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}
.hood-daily:active {
    transform: scale(0.98);
}
.hood-daily.claimed {
    background: #1a1a1a;
    border-color: #333;
    cursor: default;
}
.hood-daily.claimed:active {
    transform: none;
}
.hd-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(34,197,94,0.15) 0%, transparent 50%);
    animation: daily-pulse 2s ease-in-out infinite;
}
@keyframes daily-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
.hood-daily.claimed .hd-glow {
    display: none;
}
.hd-icon {
    font-size: 36px;
    position: relative;
    z-index: 1;
}
.hd-content {
    flex: 1;
    position: relative;
    z-index: 1;
}
.hd-title {
    font-size: 14px;
    font-weight: 800;
    color: #22c55e;
    letter-spacing: 1px;
}
.hood-daily.claimed .hd-title {
    color: #888;
}
.hd-text {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-top: 2px;
}
.hood-daily.claimed .hd-text {
    color: #666;
}
.hd-claim {
    font-size: 13px;
    font-weight: 900;
    color: #000;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    padding: 10px 20px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    letter-spacing: 1px;
}

/* SECTION HEADERS */
.hood-section {
    margin-bottom: 16px;
}
.hs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.hs-icon {
    font-size: 16px;
}
.hs-title {
    font-size: 11px;
    font-weight: 800;
    color: #666;
    letter-spacing: 2px;
}

/* SUGGESTIONS */
.hood-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hood-suggest {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.hood-suggest:active {
    transform: scale(0.98);
    border-color: #22c55e;
}
.hsu-icon {
    font-size: 20px;
}
.hsu-text {
    flex: 1;
    font-size: 13px;
    color: #d1d5db;
}
.hsu-arrow {
    font-size: 14px;
    color: #22c55e;
    font-weight: 700;
}

/* STATS GRID */
.hood-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.hood-stat {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.hood-stat:active {
    transform: scale(0.97);
    border-color: #22c55e;
}
.hst-icon {
    font-size: 22px;
    margin-bottom: 6px;
}
.hst-value {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
}
.hst-dim {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}
.hst-label {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* QUICK ACTIONS */
.hood-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.hood-action {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.hood-action:active {
    transform: scale(0.97);
    border-color: var(--hac-color, #22c55e);
}
.hac-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, var(--hac-color, #22c55e)30, transparent);
    border: 1px solid var(--hac-color, #22c55e)50;
    border-radius: 10px;
}
.hac-info {
    flex: 1;
}
.hac-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.hac-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

/* SPOTS (Services) */
.hood-spots {
    display: flex;
    gap: 10px;
}
.hood-spot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.hood-spot:active {
    transform: scale(0.96);
}
.hood-spot.vip {
    border-color: #8b5cf650;
    background: linear-gradient(135deg, #1a1a1a 0%, #2e1065 100%);
}
.hood-spot.locked {
    opacity: 0.4;
    cursor: not-allowed;
}
.hood-spot.locked:active {
    transform: none;
}
.hsp-icon {
    font-size: 28px;
}
.hsp-name {
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
}
.hood-spot.vip .hsp-name {
    color: #a78bfa;
}

/* NEWS */
.hood-news {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
}
.hn-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #1a1a1a;
}
.hn-item:last-child {
    border-bottom: none;
}
.hn-icon {
    font-size: 16px;
    margin-top: 1px;
}
.hn-text {
    flex: 1;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOOD FEED - Live Activity Feed
   ═══════════════════════════════════════════════════════════════════════════ */

/* BOSS TO BEAT */
.hood-boss {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #422006 0%, #1c0a00 100%);
    border: 2px solid #f59e0b;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.hood-boss:active {
    transform: scale(0.98);
}
.hood-boss.empty {
    border-color: #333;
    background: #1a1a1a;
    cursor: default;
}
.hb-crown {
    font-size: 36px;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
}
.hb-info {
    flex: 1;
}
.hb-name {
    font-size: 16px;
    font-weight: 800;
    color: #fbbf24;
}
.hood-boss.empty .hb-name {
    color: #888;
}
.hb-stats {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}
.hb-diff {
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
}
.hb-diff.above {
    color: #ef4444;
    background: #ef444420;
}
.hb-diff.below {
    color: #22c55e;
    background: #22c55e20;
}

/* COMPARISON */
.hs-refresh {
    margin-left: auto;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}
.hs-refresh:active {
    transform: rotate(180deg);
    opacity: 1;
}
.hood-compare {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
}
.hc-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #1a1a1a;
}
.hc-row:last-child {
    border-bottom: none;
}
.hc-val {
    width: 60px;
    font-size: 18px;
    font-weight: 800;
    color: #666;
    text-align: center;
}
.hc-val.win {
    color: #22c55e;
}
.hc-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
}
.hc-icon {
    font-size: 14px;
}
.hood-compare-empty, .hood-compare-loading {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

/* STREET FEED */
.hood-feed {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
}
.hf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #1a1a1a;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.hf-item:last-child {
    border-bottom: none;
}
.hf-item.you-win {
    background: #22c55e10;
    border-left-color: #22c55e;
}
.hf-item.you-lose {
    background: #ef444410;
    border-left-color: #ef4444;
}
.hf-icon {
    font-size: 20px;
    margin-top: 2px;
}
.hf-content {
    flex: 1;
}
.hf-text {
    font-size: 13px;
    color: #d1d5db;
    line-height: 1.4;
}
.hf-text b {
    color: #fff;
    font-weight: 700;
}
.hf-meta {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}
.hf-rating {
    color: #22c55e;
    font-weight: 600;
}
.hood-feed-empty, .hood-feed-loading {
    padding: 30px 20px;
    text-align: center;
}
.hfe-icon {
    font-size: 36px;
    margin-bottom: 10px;
}
.hfe-text {
    font-size: 14px;
    color: #888;
}
.hfe-hint {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
}
.hood-boss-loading {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* 6 Quick Actions - 3 columns */
.hood-actions {
    grid-template-columns: repeat(3, 1fr);
}

/* VIP Action card */
.hood-action.vip {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f0a1e 100%);
    border-color: #7c3aed;
    position: relative;
}
.hac-vip-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: 900;
    color: #000;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* 3 columns for Quick Actions */
.hood-actions.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOBBY SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* My Active Lobby */
.my-lobby .as-badge.active {
    background: #22c55e;
    color: #000;
    animation: pulse 2s infinite;
}

.lobby-my-card {
    background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, #0a0a0a 100%);
    border: 1px solid #22c55e40;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.lmc-mode {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}

.lmc-mode.friendly { color: #3b82f6; }
.lmc-mode.wager { color: #ffd700; }

.lmc-status {
    color: #888;
    font-size: 13px;
    margin-bottom: 15px;
}

.arena-btn.small {
    padding: 8px 16px;
    font-size: 12px;
}

/* Lobby List */
.lobby-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lobby-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.lobby-item:hover {
    border-color: #22c55e;
    background: #151515;
}

.lobby-item .li-avatar {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.lobby-item .li-info {
    flex: 1;
}

.lobby-item .li-name {
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}

.lobby-item .li-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.lobby-item .li-mode {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: #1a1a1a;
}

.lobby-item .li-mode.friendly {
    color: #3b82f6;
    border: 1px solid #3b82f640;
}

.lobby-item .li-mode.wager {
    color: #ffd700;
    border: 1px solid #ffd70040;
}

.lobby-item .li-join {
    color: #22c55e;
    font-weight: 700;
    font-size: 12px;
}

/* Create Lobby Page */
.lobby-header {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}

.lobby-header .lh-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.lobby-header .lh-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
}

.lobby-header .lh-subtitle {
    color: #888;
    font-size: 13px;
    margin-top: 5px;
}

.lobby-modes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.lobby-mode-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #111;
    border: 2px solid #222;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.lobby-mode-card:hover:not(.locked) {
    border-color: #22c55e;
    transform: translateY(-2px);
}

.lobby-mode-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.lobby-mode-card .lmc-icon {
    font-size: 36px;
    width: 60px;
    height: 60px;
    background: #1a1a1a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lobby-mode-card .lmc-content {
    flex: 1;
}

.lobby-mode-card .lmc-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.lobby-mode-card .lmc-desc {
    font-size: 12px;
    color: #888;
}

.lobby-mode-card .lmc-tags {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.lobby-mode-card .lmc-tag {
    font-size: 10px;
    padding: 3px 8px;
    background: #222;
    border-radius: 4px;
    color: #aaa;
}

.lobby-mode-card .lmc-tag.gold {
    background: #ffd70030;
    color: #ffd700;
}

.lobby-mode-card .lmc-action {
    color: #22c55e;
    font-weight: 700;
    font-size: 13px;
}

.lobby-mode-card .lmc-status {
    color: #666;
    font-size: 11px;
    font-weight: 700;
}

/* Wager Select */
.wager-select-card {
    background: #111;
    border: 2px solid #ffd70060;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.wsc-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffd700;
    text-align: center;
    margin-bottom: 10px;
}

.wsc-balance {
    text-align: center;
    color: #888;
    font-size: 13px;
    margin-bottom: 15px;
}

.wsc-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.wsc-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.wsc-option:hover {
    border-color: #ffd700;
    background: #222;
}

.wsc-amount {
    font-weight: 700;
    color: #ffd700;
    font-size: 16px;
}

.wsc-win {
    color: #22c55e;
    font-size: 12px;
}

.wsc-empty {
    text-align: center;
    color: #ef4444;
    padding: 20px;
}

/* Lobby Info */
.lobby-info {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.lobby-info .li-title {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    margin-bottom: 12px;
}

.lobby-info .li-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lobby-info .li-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lobby-info .li-num {
    width: 24px;
    height: 24px;
    background: #22c55e;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.lobby-info .li-text {
    color: #aaa;
    font-size: 13px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Inventory item description in list */
.inv-item-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAGER PANEL - NEW DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

.wager-panel {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.wp-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
}

.wp-balance {
    font-size: 13px;
    color: #22c55e;
}

.wp-quick-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wp-quick-btn {
    flex: 1;
    min-width: 50px;
    padding: 10px 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.wp-quick-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
}

.wp-quick-btn.active {
    background: rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.wp-quick-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wp-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.wp-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.wp-input:focus {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.wp-input::-webkit-outer-spin-button,
.wp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wp-currency {
    font-size: 24px;
}

.wp-winnings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
}

.wp-win-label {
    font-size: 13px;
    color: #888;
}

.wp-win-amount {
    font-size: 18px;
    font-weight: bold;
    color: #888;
}

.wp-win-amount.gold {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.wp-validation {
    text-align: center;
    font-size: 13px;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 6px;
}

.wp-validation.valid {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.wp-validation.invalid {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

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

.wp-actions .arena-btn {
    flex: 1;
}

.arena-btn.small {
    padding: 10px 16px;
    font-size: 13px;
}

.arena-btn.primary {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    font-weight: bold;
}

.arena-btn.primary:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.arena-btn.primary:disabled {
    background: #444;
    color: #666;
    cursor: not-allowed;
}

.arena-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.arena-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FRIENDLY STREET TAB REWORK
   ═══════════════════════════════════════════════════════════════════════════ */

/* Better Quick Moves for mobile - vertical layout */
@media (max-width: 400px) {
    /* Quick Actions - single column on very small screens */
    .hood-actions.three-cols {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    
    .hood-action {
        padding: 12px;
        gap: 10px;
    }
    
    .hac-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .hac-name {
        font-size: 13px;
    }
    
    .hac-desc {
        font-size: 10px;
    }
}

/* Medium mobile screens - 2 columns */
@media (min-width: 401px) and (max-width: 500px) {
    .hood-actions.three-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    
    /* 3rd item spans full width */
    .hood-actions.three-cols .hood-action:nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* Compact greeting on mobile */
@media (max-width: 400px) {
    .hood-greeting {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }
    
    .hg-icon {
        font-size: 24px;
    }
    
    .hg-content {
        flex: 1;
        min-width: 120px;
    }
    
    .hg-text {
        font-size: 14px;
    }
    
    .hg-name {
        font-size: 14px;
    }
    
    .hg-subtitle {
        font-size: 11px;
    }
    
    .hg-balance {
        font-size: 14px;
    }
}

/* Compact alerts on mobile */
@media (max-width: 400px) {
    .hood-alert {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .ha-icon {
        font-size: 20px;
    }
    
    .ha-title {
        font-size: 12px;
    }
    
    .ha-text {
        font-size: 10px;
    }
    
    .ha-action {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Compact suggestions on mobile */
@media (max-width: 400px) {
    .hood-suggest {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .hsu-icon {
        font-size: 18px;
    }
    
    .hsu-text {
        font-size: 12px;
    }
}

/* Compact comparison on mobile */
@media (max-width: 400px) {
    .hood-compare {
        padding: 10px;
    }
    
    .hc-row {
        padding: 6px 0;
    }
    
    .hc-val {
        font-size: 14px;
        min-width: 35px;
    }
    
    .hc-label {
        font-size: 11px;
        gap: 4px;
    }
    
    .hc-icon {
        font-size: 12px;
    }
}

/* Compact boss section on mobile */
@media (max-width: 400px) {
    .hood-boss {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .hb-crown {
        font-size: 24px;
    }
    
    .hb-name {
        font-size: 13px;
    }
    
    .hb-stats {
        font-size: 10px;
    }
    
    .hb-diff {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* Compact feed on mobile */
@media (max-width: 400px) {
    .hood-feed {
        padding: 8px;
    }
    
    .hf-item {
        padding: 10px;
        gap: 10px;
    }
    
    .hf-icon {
        font-size: 18px;
    }
    
    .hf-text {
        font-size: 12px;
    }
    
    .hf-meta {
        font-size: 10px;
    }
}

/* Feed wager badge */
.hf-wager {
    color: #ffd700;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW QUICK MOVES - Horizontal scroll on mobile, grid on desktop
   ═══════════════════════════════════════════════════════════════════════════ */
.hood-quick-moves {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hood-quick-moves::-webkit-scrollbar {
    display: none;
}

.hqm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 70px;
    padding: 12px 8px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.hqm-item:active {
    transform: scale(0.95);
    border-color: #22c55e;
}

.hqm-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 10px;
}

.hqm-label {
    font-size: 11px;
    font-weight: 700;
    color: #ccc;
    text-align: center;
}

/* Desktop - larger items */
@media (min-width: 500px) {
    .hood-quick-moves {
        justify-content: center;
    }
    
    .hqm-item {
        min-width: 90px;
        padding: 16px 12px;
    }
    
    .hqm-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .hqm-label {
        font-size: 12px;
    }
}

/* Better section spacing on mobile */
@media (max-width: 400px) {
    .hood-section {
        margin-bottom: 12px;
    }
    
    .hs-header {
        margin-bottom: 8px;
    }
    
    .hs-icon {
        font-size: 14px;
    }
    
    .hs-title {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    
    .hs-refresh {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MISSION RESULT V2 - GANGSTA PAYDAY SCREEN */
/* ═══════════════════════════════════════════════════════════════════════════ */

.rpg-result-v2 {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
}

.rpg-result-v2.success {
    background: linear-gradient(180deg, #0d1a0d 0%, #0a0a0a 100%);
    border: 2px solid #22c55e;
}
.rpg-result-v2.failed {
    background: linear-gradient(180deg, #1a0d0d 0%, #0a0a0a 100%);
    border: 2px solid #ef4444;
}

/* Animated Background */
.rrv2-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.rrv2-wave {
    position: absolute;
    bottom: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 40%;
    animation: resultWave 4s ease-in-out infinite;
}
.rpg-result-v2.success .rrv2-wave {
    background: radial-gradient(ellipse, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
}
.rpg-result-v2.failed .rrv2-wave {
    background: radial-gradient(ellipse, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
}
.rrv2-wave.wave2 {
    animation-delay: -2s;
    opacity: 0.5;
}
@keyframes resultWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20%) rotate(5deg); }
}

.rrv2-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
}
.rpg-result-v2.success .rrv2-glow {
    background: #22c55e;
}
.rpg-result-v2.failed .rrv2-glow {
    background: #ef4444;
}

/* Floating Particles */
.rrv2-particles {
    position: absolute;
    inset: 0;
}
.rrv2-particle {
    position: absolute;
    font-size: 20px;
    opacity: 0;
    animation: particleFly 3s ease-out infinite;
}
.rrv2-particle.p1 { left: 10%; animation-delay: 0s; }
.rrv2-particle.p2 { left: 20%; animation-delay: 0.2s; }
.rrv2-particle.p3 { left: 30%; animation-delay: 0.4s; }
.rrv2-particle.p4 { left: 40%; animation-delay: 0.6s; }
.rrv2-particle.p5 { left: 50%; animation-delay: 0.8s; }
.rrv2-particle.p6 { left: 60%; animation-delay: 1s; }
.rrv2-particle.p7 { left: 70%; animation-delay: 1.2s; }
.rrv2-particle.p8 { left: 80%; animation-delay: 1.4s; }
.rrv2-particle.p9 { left: 15%; animation-delay: 1.6s; }
.rrv2-particle.p10 { left: 45%; animation-delay: 1.8s; }
.rrv2-particle.p11 { left: 75%; animation-delay: 2s; }
.rrv2-particle.p12 { left: 90%; animation-delay: 2.2s; }
.rrv2-particle.p13 { left: 25%; animation-delay: 0.1s; }
.rrv2-particle.p14 { left: 55%; animation-delay: 0.3s; }
.rrv2-particle.p15 { left: 85%; animation-delay: 0.5s; }
.rrv2-particle.p16 { left: 35%; animation-delay: 0.7s; }
@keyframes particleFly {
    0% { bottom: 0; opacity: 1; transform: translateX(0) rotate(0deg); }
    100% { bottom: 100%; opacity: 0; transform: translateX(20px) rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRIT STYLES (badge and dice only, no particles)
   ═══════════════════════════════════════════════════════════════════════════ */

.rrv2-badge.crit {
    background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%) !important;
    animation: critBadgePulse 1s ease-in-out infinite !important;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.8) !important;
}
@keyframes critBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(251, 191, 36, 1); }
}
.rrv2-dice.crit {
    background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
    animation: diceSpin 0.5s ease-out;
}
@keyframes diceSpin {
    0% { transform: rotate(-20deg) scale(0.8); }
    50% { transform: rotate(10deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Content */
.rrv2-content {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
}

/* Header */
.rrv2-header {
    text-align: center;
    margin-bottom: 20px;
}

.rrv2-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 8px;
    animation: badgeGlow 2s ease-in-out infinite;
}
.rrv2-badge.win {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}
.rrv2-badge.lose {
    background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}
@keyframes badgeGlow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.rrv2-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 12px;
    animation: titleReveal 0.6s ease-out;
}
.rpg-result-v2.success .rrv2-title {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}
.rpg-result-v2.failed .rrv2-title {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}
@keyframes titleReveal {
    0% { opacity: 0; transform: translateY(-20px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dice Section */
.rrv2-dice-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    display: inline-flex;
}

.rrv2-dice {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rrv2-dice-icon {
    font-size: 20px;
    animation: diceShake 0.5s ease-out;
}
@keyframes diceShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}
.rrv2-dice-roll {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.rrv2-dice-vs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

/* Performance Badge */
.rrv2-performance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    animation: perfSlide 0.4s ease-out;
}
.rrv2-performance.sloppy { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; }
.rrv2-performance.okay { background: rgba(251, 191, 36, 0.2); border: 1px solid #fbbf24; }
.rrv2-performance.good { background: rgba(34, 197, 94, 0.2); border: 1px solid #22c55e; }
.rrv2-performance.great { background: rgba(59, 130, 246, 0.2); border: 1px solid #3b82f6; }
.rrv2-performance.perfect { background: rgba(168, 85, 247, 0.2); border: 1px solid #a855f7; }
@keyframes perfSlide {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.rrv2-perf-emoji {
    font-size: 24px;
}
.rrv2-perf-text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.rrv2-crit {
    padding: 4px 10px;
    background: linear-gradient(145deg, #ffd700 0%, #f59e0b 100%);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    animation: critPulse 0.5s ease-out infinite;
}
@keyframes critPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Cash Hero Display */
.rrv2-cash-hero {
    text-align: center;
    padding: 24px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.15) 0%, transparent 100%);
    border-radius: 16px;
    margin-bottom: 16px;
}

.rrv2-cash-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.rrv2-cash-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rrv2-cash-amount.animate {
    opacity: 1;
    transform: scale(1);
}

.rrv2-cash-icon {
    font-size: 40px;
    animation: cashBounce 0.6s ease-out;
}
@keyframes cashBounce {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.rrv2-cash-num {
    font-size: 48px;
    font-weight: 900;
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

.rrv2-cash-profit {
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}
.rrv2-cash-profit.up { color: #22c55e; }
.rrv2-cash-profit.down { color: #ef4444; }

/* XP Bar */
.rrv2-xp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #111;
    border-radius: 12px;
    margin-bottom: 16px;
}

.rrv2-xp-icon {
    font-size: 24px;
}

.rrv2-xp-bar {
    flex: 1;
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
}

.rrv2-xp-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 4px;
    transition: width 1s ease-out;
}
.rrv2-xp-fill.animate {
    width: 100%;
}

.rrv2-xp-text {
    font-size: 16px;
    font-weight: 700;
    color: #3b82f6;
    min-width: 70px;
    text-align: right;
}

/* Loot Section */
.rrv2-loot {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.rrv2-loot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rrv2-loot-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rrv2-loot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border-left: 3px solid var(--rarity, #888);
    animation: lootSlide 0.4s ease-out;
}
@keyframes lootSlide {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.rrv2-li-icon { font-size: 20px; }
.rrv2-li-name { flex: 1; font-weight: 600; color: #fff; }
.rrv2-li-qty { color: #888; font-size: 13px; }

/* Level Up */
.rrv2-levelup {
    position: relative;
    text-align: center;
    padding: 20px;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    overflow: hidden;
    animation: levelUpPop 0.5s ease-out;
}
@keyframes levelUpPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.rrv2-lu-flash {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
    animation: flashMove 2s linear infinite;
}
@keyframes flashMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.rrv2-lu-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rrv2-lu-icon { font-size: 32px; }
.rrv2-lu-text {
    font-size: 20px;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 3px;
}
.rrv2-lu-level {
    padding: 6px 14px;
    background: #fbbf24;
    color: #000;
    font-weight: 800;
    border-radius: 8px;
}

/* Injury (Risk Taker trait) */
.rrv2-injury {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin-top: 12px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 13px;
    color: #fbbf24;
}
.rrv2-inj-icon { font-size: 16px; }
.rrv2-inj-text { font-weight: 600; }

/* Failed State */
.rrv2-skull {
    text-align: center;
    padding: 20px;
    margin-bottom: 16px;
}

.rrv2-skull-icon {
    font-size: 64px;
    animation: skullShake 0.5s ease-out;
}
@keyframes skullShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.rrv2-skull-text {
    font-size: 14px;
    color: #ef4444;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 8px;
}

.rrv2-losses {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.rrv2-loss {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.rrv2-loss-icon { font-size: 20px; }
.rrv2-loss-label { flex: 1; color: #888; font-size: 14px; }
.rrv2-loss-val { font-size: 16px; font-weight: 700; color: #ef4444; }

.rrv2-salvage {
    padding: 16px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
}

.rrv2-salvage-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.rrv2-salvage-items {
    display: flex;
    gap: 16px;
}

.rrv2-sv-item {
    font-size: 16px;
    font-weight: 700;
    color: #22c55e;
}

.rrv2-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #111;
    border-radius: 10px;
    font-size: 13px;
    color: #666;
}

/* Action Buttons */
.rrv2-actions {
    display: flex;
    gap: 12px;
}

.rrv2-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.rrv2-btn:active {
    transform: scale(0.98);
}

.rrv2-btn.primary {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    color: #000;
}
.rrv2-btn.primary:hover {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.rrv2-btn.secondary {
    background: #1a1a1a;
    color: #888;
    border: 1px solid #333;
}
.rrv2-btn.secondary:hover {
    background: #222;
    color: #fff;
}


/* Clickable player elements in The Pit */
.li-avatar[onclick], .li-info[onclick] {
    cursor: pointer;
    transition: color 0.2s;
}
.li-avatar[onclick]:hover, .li-info[onclick]:hover .li-name {
    color: #22c55e !important;
}

.al-entry[onclick] {
    cursor: pointer;
    transition: background 0.2s;
}
.al-entry[onclick]:hover {
    background: rgba(34, 197, 94, 0.1);
}
.al-entry[onclick]:hover .al-name {
    color: #22c55e;
}