/* ======================================================================
 * #02 我的世界附魔等级计算 · 独立视觉：奥术附魔工坊
 * 深紫 + 鎏金；半圆仪表；可点击像素书架环；规则表为发光刻度块
 * ====================================================================== */
.me-page {
    --g-accent: #6B4BC4;
    --g-accent-deep: #5235A5;
    --g-accent-ink: #4A2F9B;
    --g-accent-soft: #EEE9FC;
    --g-accent-2: #B98A2B;
    --g-accent-2-soft: #F8F0DC;
    --me-glow: #8B6BE8;
    --me-ink-soft: #F4EFFD;
    background:
      radial-gradient(900px 420px at 12% -6%, rgba(139, 107, 232, .13), transparent 70%),
      radial-gradient(700px 360px at 96% 8%, rgba(185, 138, 43, .10), transparent 72%),
      var(--g-bg);
}
:root[data-theme="dark"] .me-page {
    --g-accent: #B49BFF;
    --g-accent-deep: #CBBBFF;
    --g-accent-ink: #D6C9FF;
    --g-accent-soft: rgba(180, 155, 255, .13);
    --g-accent-2: #E8C578;
    --g-accent-2-soft: rgba(232, 197, 120, .13);
    --me-glow: #9E80FF;
    --me-ink-soft: #1A1630;
    background:
      radial-gradient(900px 420px at 12% -6%, rgba(158, 128, 255, .14), transparent 70%),
      radial-gradient(700px 360px at 96% 8%, rgba(232, 197, 120, .07), transparent 72%),
      var(--g-bg);
}
.me-page .hero-kicker {
    background: linear-gradient(90deg, var(--g-accent-soft), var(--g-accent-2-soft));
    border-color: color-mix(in srgb, var(--me-glow) 30%, transparent);
    font-family: var(--g-mono); letter-spacing: .05em;
}

/* 半圆等级仪表 */
.me-dial-wrap { text-align: center; }
.me-dial-wrap .lab { color: var(--g-accent-ink); font-family: var(--g-mono); }
.me-dial { display: block; width: 100%; max-width: 230px; margin: 6px auto 0; }
.me-dial-track { fill: none; stroke: var(--g-line); stroke-width: 13; stroke-linecap: round; }
.me-dial-fill {
    fill: none; stroke: url(#none); stroke: var(--me-glow); stroke-width: 13; stroke-linecap: round;
    stroke-dasharray: 270.2; stroke-dashoffset: 0;
    transition: stroke-dashoffset .45s ease;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--me-glow) 55%, transparent));
}
.me-tick { stroke: var(--g-line-2); stroke-width: 2; stroke-linecap: round; }
.me-dial-num { fill: var(--g-ink); font: 800 42px var(--g-mono); text-anchor: middle; letter-spacing: -.05em; }
.me-dial-cap { fill: var(--g-ink-3); font: 650 11px var(--g-font); text-anchor: middle; letter-spacing: .08em; }
:root[data-theme="dark"] .me-dial-num { fill: var(--g-ink); }

/* 书架滑块 */
.me-slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.me-slider-lab { font-size: 13px; font-weight: 750; color: var(--g-ink-2); flex: none; }
.me-slider-row input[type="range"] { flex: 1 1 150px; }
.me-slider-row input[type="number"] { width: 74px; flex: none; font-family: var(--g-mono); font-weight: 700; text-align: center; }
.me-slider-unit { font-size: 12px; color: var(--g-ink-3); flex: none; }
.me-slotnote {
    margin-top: 14px; padding: 10px 13px; border-radius: var(--g-r-sm);
    background: var(--g-accent-soft); color: var(--g-accent-ink);
    font-size: 13px; line-height: 1.8;
}

/* 5×5 书架环 */
.me-layout { border-top: 3px solid var(--me-glow); }
.me-lead { font-size: 13.5px; color: var(--g-ink-2); margin-bottom: 16px; }
.me-layout-inner { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; align-items: start; }
.me-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    max-width: 330px; width: 100%; margin: 0 auto;
    padding: 12px; border-radius: var(--g-r);
    background: var(--g-surface-3); border: 1px solid var(--g-line);
}
.me-cell {
    aspect-ratio: 1 / 1; border-radius: 7px; display: grid; place-items: center;
    font-size: 11px; font-weight: 750; user-select: none;
    border: 1px dashed transparent; transition: transform .12s, box-shadow .12s;
}
.me-cell.air { background: transparent; border-color: var(--g-line-2); color: var(--g-ink-3); }
.me-cell.table {
    background: linear-gradient(145deg, var(--me-glow), var(--g-accent-deep));
    color: #fff; font-size: 19px; box-shadow: 0 0 14px color-mix(in srgb, var(--me-glow) 45%, transparent);
}
.me-cell.gap { background: var(--g-surface); border: 1px solid var(--g-line); color: var(--g-ink-3); }
.me-cell.book {
    background: repeating-linear-gradient(90deg, #9B6B3E 0 6px, #7C5230 6px 8px, #C49A62 8px 11px);
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); cursor: pointer;
    border: 1px solid rgba(0,0,0,.18);
}
.me-cell.book:hover, .me-cell.gap:hover { transform: scale(1.06); box-shadow: var(--g-shadow-2); }
.me-cell.book.over { filter: grayscale(.7) brightness(.85); }
.me-legend { display: grid; gap: 10px; font-size: 12.5px; }
.me-legend > div { display: grid; grid-template-columns: 18px 1fr; gap: 3px 9px; align-items: center; }
.me-legend .me-sw { grid-row: span 2; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--g-line-2); }
.me-sw-table { background: var(--me-glow); }
.me-sw-air { background: transparent; border-style: dashed !important; }
.me-sw-book { background: repeating-linear-gradient(90deg, #9B6B3E 0 4px, #C49A62 4px 6px); }
.me-sw-gap { background: var(--g-surface); }
.me-legend b { color: var(--g-ink); font-size: 12.5px; }
.me-legend span { grid-column: 2; color: var(--g-ink-3); font-size: 11.5px; line-height: 1.5; }
.me-legend-count {
    display: block !important; margin-top: 8px; padding: 10px 12px; border-radius: var(--g-r-sm);
    background: var(--g-accent-soft); color: var(--g-accent-ink); font-size: 12.5px; line-height: 1.7;
}
.me-legend-count b { font-family: var(--g-mono); font-size: 15px; }

/* 结果等级徽章 */
.me-result { border-top: 3px solid var(--g-accent-2); }
.me-level-badge {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 14px; border-radius: var(--g-r);
    background: linear-gradient(110deg, var(--g-accent-soft), var(--g-accent-2-soft));
}
.me-level-badge span { font-size: 12.5px; font-weight: 700; color: var(--g-ink-2); }
.me-level-badge b { font: 820 38px/1 var(--g-mono); color: var(--g-accent-ink); letter-spacing: -.05em; }
.me-level-badge em {
    font-style: normal; font-size: 11.5px; font-weight: 750; padding: 3px 10px;
    border-radius: 999px; background: var(--g-accent-2-soft); color: var(--g-warn);
}
.me-formula {
    margin-top: 14px; padding: 11px 13px; border-radius: var(--g-r-sm);
    background: var(--g-surface-2); border: 1px dashed var(--g-line-2);
    font-size: 12.5px; line-height: 1.85; color: var(--g-ink-2);
}
.me-formula b { font-family: var(--g-mono); color: var(--g-accent-ink); }

/* 规则表 */
.me-rule-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.me-rule-cell {
    padding: 10px 6px; border-radius: 9px; text-align: center;
    background: var(--g-surface-2); border: 1px solid var(--g-line);
}
.me-rule-cell span { display: block; font-size: 11px; color: var(--g-ink-3); }
.me-rule-cell b { display: block; font: 750 18px/1.4 var(--g-mono); color: var(--g-accent-ink); }
.me-rule-cell.hot { background: var(--g-accent-soft); border-color: var(--g-accent); }
.me-rule-cell.hot b { color: var(--g-accent-deep); }

/* 批量 & 常见错误 */
.me-batch-out { margin-top: 14px; overflow-x: auto; }
.me-batch-out table { width: 100%; border-collapse: collapse; font-size: 13px; }
.me-batch-out th, .me-batch-out td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--g-line); white-space: nowrap; }
.me-batch-out th { background: var(--g-surface-3); font-size: 12px; color: var(--g-ink-2); }
.me-batch-out tr.bad td { color: var(--g-danger); }
.me-pit .tile { position: relative; overflow: hidden; }
.me-pit .tile::after {
    content: ''; position: absolute; right: -18px; bottom: -22px; width: 74px; height: 74px;
    border-radius: 50%; background: var(--g-accent-soft);
}
.me-pit .tile > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .me-layout-inner { grid-template-columns: 1fr; }
    .me-rule-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .me-rule-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .me-rule-cell b { font-size: 15px; }
}