/* ===========================================================
   洛克王国图鉴站 · 全局主题（唯一主题源）
   风格：粗波普 / 街机复古
   - 五高饱和撞色：亮黄 #FFE600 / 玫粉 #FF2E7E / 电光青 #00E5FF
                   高亮绿 #3DFF00 / 电光紫 #B026FF
   - 纯黑粗边框 + 无模糊硬阴影 + 波点纹理 + 像素级硬朗交互
   - 内置 [data-theme="dark"] 暗色主题
   =========================================================== */
:root {
    /* 五撞色 */
    --yellow:#FFE600;
    --pink:#FF2E7E;
    --cyan:#00E5FF;
    --green:#3DFF00;
    --purple:#B026FF;
    --ink:#000000;

    /* 表面（浅色） */
    --paper:#FFF6E9;
    --surface:#FFFFFF;
    --bg:var(--paper);
    --bg-soft:#FFFBF2;
    --card-bg:#FFFFFF;
    --panel:#FFFFFF;

    /* 文字 */
    --text:#0A0A0A;
    --text-light:#5b5145;
    --text-lighter:#8a7d6e;
    --muted:#5b5145;

    /* 线条 / 描边（纯黑粗边框） */
    --line:#000000;
    --stroke:#000000;
    --border:#000000;

    /* 阴影（无模糊硬阴影） */
    --shadow:7px 7px 0 var(--ink);
    --shadow-hover:10px 10px 0 var(--ink);
    --shadow-sm:4px 4px 0 var(--ink);

    /* 圆角 */
    --radius:18px;
    --radius-sm:14px;
    --radius-xs:10px;

    /* 品牌 / 强调 → 五撞色 */
    --brand:#FFE600;
    --brand-2:#FF2E7E;
    --brand-soft:rgba(255,230,0,.18);

    --accent-orange:#FFE600;
    --accent-pink:#FF2E7E;
    --accent-green:#3DFF00;
    --accent-blue:#00E5FF;
    --accent-purple:#B026FF;
    --accent-yellow:#FFE600;

    /* 兼容别名（内页曾用名） */
    --orange:#FFE600;
    --pink:#FF2E7E;
    --green:#3DFF00;
    --blue:#00E5FF;
    --purple:#B026FF;
    --yellow:#FFE600;

    /* 元素内联动态变量默认值（由 JS 按类型/蛋组覆盖） */
    --accent-soft:rgba(0,0,0,.06);
    --detail-soft:rgba(0,0,0,.06);
    --type-color:#FFE600;
    --gc:#FF2E7E;
    --gct:#0A0A0A;
    --chip:#FFE600;
    --qt:#FF2E7E;

    /* 波点纹理 */
    --dot:rgba(0,0,0,.07);
}

/* ===================== 暗色主题 ===================== */
html[data-theme="dark"]{
    --paper:#0B0B12;
    --surface:#16161F;
    --bg:var(--paper);
    --bg-soft:#1C1C26;
    --card-bg:#16161F;
    --panel:#16161F;

    --text:#F6F6F6;
    --text-light:#B9B2C4;
    --text-lighter:#8E879B;
    --muted:#A39CB0;

    /* 暗面板改用纯白粗边框，保证硬朗可见 */
    --line:#FFFFFF;
    --stroke:#FFFFFF;
    --border:#FFFFFF;

    --shadow:7px 7px 0 #000;
    --shadow-hover:10px 10px 0 #000;
    --shadow-sm:4px 4px 0 #000;

    --accent-soft:rgba(255,255,255,.08);
    --detail-soft:rgba(255,255,255,.08);
    --gct:#F6F6F6;

    --dot:rgba(255,255,255,.06);
}

/* ===================== 全局基底 ===================== */
* { box-sizing:border-box; }
html,body { height:100%; }
body {
    font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    color:var(--text);
    background-color:var(--bg);
    background-image:radial-gradient(var(--dot) 2.2px, transparent 2.6px);
    background-size:24px 24px;
    margin:0;
}

/* 像素级硬朗交互：极短、带台阶的过渡，制造硬切手感 */
a,button,.card,.panel,.nav-item,.tag,.stat,.chip {
    transition:transform .07s steps(2), box-shadow .07s steps(2);
}
:active { transition:none; }

/* ===================== 左侧导航 ===================== */
.sidebar {
    position:fixed; top:0; left:0; bottom:0;
    width:230px;
    background:var(--surface);
    border-right:5px solid var(--border);
    padding:22px 16px;
    display:flex; flex-direction:column; gap:14px;
    z-index:40; overflow-y:auto;
}
.sidebar .brand {
    display:flex; align-items:center; gap:10px;
    border:4px solid var(--border); border-radius:14px;
    padding:10px; background:var(--yellow);
    box-shadow:var(--shadow-sm);
}
.sidebar .brand img { width:34px; height:34px; border-radius:8px; display:block; }
.sidebar .brand b { font-size:14px; line-height:1.1; color:#000; }
.sidebar .brand small { display:block; font-size:9px; font-weight:800; color:#000; letter-spacing:1px; }

.nav-label { font-size:10px; font-weight:900; letter-spacing:2px; color:var(--muted); padding-left:4px; }
.nav-item {
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:var(--text);
    font-weight:800; font-size:14px;
    border:3px solid var(--border); border-radius:12px;
    padding:11px 12px; background:var(--surface);
    box-shadow:var(--shadow-sm); position:relative;
}
.nav-item .ico {
    width:26px; height:26px; border-radius:7px; border:2px solid #000;
    display:grid; place-items:center; font-size:15px; color:#000; flex-shrink:0;
}
.nav-item:nth-child(3) .ico { background:var(--yellow); }
.nav-item:nth-child(4) .ico { background:var(--cyan); }
.nav-item:nth-child(5) .ico { background:var(--pink); }
.nav-item:nth-child(6) .ico { background:var(--green); }
.nav-item:nth-child(7) .ico { background:var(--purple); }
.nav-item:nth-child(8) .ico { background:var(--yellow); }
.nav-item:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.nav-item.active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); background:var(--yellow); }
.nav-item.active::after { content:"▶"; position:absolute; right:8px; color:#000; font-size:10px; }
.side-foot { margin-top:auto; font-size:10px; color:var(--muted); text-align:center; font-weight:700; }

/* ===================== 主区域 + 顶栏 + 能量条 ===================== */
.main { margin-left:230px; min-height:100vh; display:flex; flex-direction:column; }
.app-head {
    position:sticky; top:0; z-index:30;
    background:var(--surface);
    border-bottom:5px solid var(--border);
    padding:14px 22px;
}
.app-head .row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.app-head h1 { font-size:20px; font-weight:900; letter-spacing:.5px; }
.app-head p { font-size:12px; color:var(--muted); font-weight:700; }

.theme-toggle {
    border:3px solid var(--border); border-radius:12px;
    background:var(--purple); color:#fff; font-weight:900; font-size:13px;
    padding:9px 14px; cursor:pointer; box-shadow:var(--shadow-sm);
}
.theme-toggle:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.theme-toggle:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }

.energy-bar {
    margin-top:12px; height:8px; border:3px solid var(--border);
    border-radius:99px; overflow:hidden; background:var(--surface);
}
.energy-fill {
    height:100%; width:40%;
    background:repeating-linear-gradient(90deg,
        var(--cyan) 0 16px, var(--pink) 16px 32px,
        var(--green) 32px 48px, var(--yellow) 48px 64px);
    background-size:128px 100%;
    animation:flow 1.1s linear infinite;
    filter:saturate(1.4);
}
@keyframes flow { to { background-position:128px 0; } }

.content { padding:24px 22px 60px; }

/* ===================== 通用按钮 ===================== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:13px;
    border:4px solid var(--border); font-family:inherit; font-size:14px;
    font-weight:900; text-decoration:none; cursor:pointer; white-space:nowrap;
    color:var(--text); background:#fff; box-shadow:var(--shadow-sm);
}
.btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }
.btn-primary { background:var(--yellow); }
.btn-secondary { background:#fff; }
.btn-ghost { background:var(--surface); }
.btn-pink { background:var(--pink); color:#fff; }
.btn-cyan { background:var(--cyan); }
.btn-green { background:var(--green); }
.btn-purple { background:var(--purple); color:#fff; }

/* 通用区块标题 / 卡片 / 标签（供内页复用） */
.section-title {
    display:inline-block; font-size:16px; font-weight:900;
    border:3px solid var(--border); border-radius:10px;
    padding:6px 14px; background:var(--yellow); color:#000;
    box-shadow:var(--shadow-sm);
}
.card, .panel {
    background:var(--card-bg);
    border:3px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.tag, .chip {
    font-size:12px; font-weight:900; border:3px solid var(--border);
    border-radius:99px; padding:6px 14px; color:#000; background:#fff;
    box-shadow:var(--shadow-sm); display:inline-block;
}

/* 旧品牌标（兼容） */
img.brand-mark, img.brand-icon {
    width:40px; height:40px; border:3px solid var(--border) !important;
    background:#fff !important; box-shadow:var(--shadow-sm) !important;
    border-radius:14px; object-fit:contain; padding:1px;
}

/* ===================== 响应式 ===================== */
@media (max-width:760px) {
    .sidebar {
        position:static; width:100%; min-height:auto;
        flex-direction:row; flex-wrap:wrap; align-items:center;
        border-right:none; border-bottom:5px solid var(--border);
    }
    .sidebar .brand { flex:1 1 100%; }
    .nav-item { flex:1 1 45%; }
    .side-foot { display:none; }
    .main { margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
    .energy-fill { animation:none; }
    a,button,.card,.panel,.nav-item,.tag,.stat,.chip { transition:none; }
}