/* 洛克王国：世界 Wiki 样式 */

:root {
    --roco-primary: #22c55e;
    --roco-secondary: #10b981;
    --roco-accent: #84cc16;
    --roco-bg: #0f1a0f;
    --roco-bg-light: #1a2e1a;
    --roco-card: #1f3d1f;
    --roco-text: #e5e5e5;
    --roco-text-secondary: #9ca3af;
    --roco-text-muted: #6b7280;
    --roco-border: #2d4a2d;
    --roco-glow: rgba(34, 197, 94, 0.3);
}

/* 导航栏 */
.roco-navbar {
    background: linear-gradient(180deg, rgba(15, 26, 15, 0.98) 0%, rgba(15, 26, 15, 0.9) 100%);
    border-bottom: 1px solid var(--roco-border);
    backdrop-filter: blur(10px);
}

.roco-logo {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--roco-primary);
    text-decoration: none;
}

/* 面包屑 */
.roco-breadcrumb {
    padding: 1rem 0;
    font-size: 0.875rem;
    color: var(--roco-text-secondary);
}

.roco-breadcrumb a {
    color: var(--roco-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.roco-breadcrumb a:hover {
    color: var(--roco-primary);
}

.roco-breadcrumb span {
    color: var(--roco-text);
}

/* 卡片 */
.roco-card {
    background: var(--roco-card);
    border: 1px solid var(--roco-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.roco-card:hover {
    transform: translateY(-4px);
    border-color: var(--roco-primary);
    box-shadow: 0 8px 32px var(--roco-glow);
}

/* 属性标签 */
.attr-fire { background: linear-gradient(135deg, #ef4444, #dc2626); }
.attr-water { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.attr-grass { background: linear-gradient(135deg, #22c55e, #16a34a); }
.attr-electric { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.attr-ice { background: linear-gradient(135deg, #67e8f9, #22d3ee); }
.attr-fighting { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.attr-poison { background: linear-gradient(135deg, #a855f7, #9333ea); }
.attr-ground { background: linear-gradient(135deg, #d97706, #b45309); }
.attr-flying { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.attr-psychic { background: linear-gradient(135deg, #f472b6, #ec4899); }
.attr-bug { background: linear-gradient(135deg, #84cc16, #65a30d); }
.attr-rock { background: linear-gradient(135deg, #78716c, #57534e); }
.attr-ghost { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.attr-dragon { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.attr-dark { background: linear-gradient(135deg, #374151, #1f2937); }
.attr-steel { background: linear-gradient(135deg, #94a3b8, #64748b); }
.attr-fairy { background: linear-gradient(135deg, #f9a8d4, #f472b6); }
.attr-normal { background: linear-gradient(135deg, #9ca3af, #6b7280); }

/* 种族值条 */
.stat-bar {
    height: 8px;
    background: var(--roco-bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.stat-hp .stat-bar-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.stat-atk .stat-bar-fill { background: linear-gradient(90deg, #ef4444, #dc2626); }
.stat-def .stat-bar-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.stat-spa .stat-bar-fill { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.stat-spd .stat-bar-fill { background: linear-gradient(90deg, #a855f7, #9333ea); }
.stat-spe .stat-bar-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

/* 响应式 */
@media (max-width: 768px) {
    .roco-card {
        padding: 1rem;
    }
}