/* 战双PRO · Command Deck 视觉重构层（仅 UI，不触碰规则、数据与事件）
   设计目标：降低紫色噪声、提高信息对比、统一页面层级，并保留所有既有节点与交互。 */
:root {
    --rf-bg: #080b14;
    --rf-bg-2: #0c1120;
    --rf-panel: rgba(15, 23, 40, .88);
    --rf-panel-solid: #10182a;
    --rf-panel-soft: rgba(21, 31, 53, .7);
    --rf-line: rgba(139, 171, 221, .2);
    --rf-line-strong: rgba(147, 204, 255, .48);
    --rf-text: #edf4ff;
    --rf-muted: #94a6c2;
    --rf-faint: #61718d;
    --rf-violet: #9b7bff;
    --rf-violet-hi: #c7b7ff;
    --rf-cyan: #78e2ee;
    --rf-green: #7de0af;
    --rf-red: #ff879d;
    --rf-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

/* ---------- 全局基底 ---------- */
html, body { background: var(--rf-bg); }
body { color: var(--rf-text); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
body::before {
    background:
        radial-gradient(900px 500px at 72% -8%, rgba(92, 104, 255, .16), transparent 68%),
        radial-gradient(800px 520px at 12% 100%, rgba(49, 207, 218, .08), transparent 72%),
        linear-gradient(135deg, #070a13 0%, #0a1020 48%, #080b15 100%);
    opacity: .95;
}
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

/* ---------- 跨页导航：从装饰栏变为清晰的控制轨 ---------- */
.bottom-nav {
    background: rgba(7, 11, 21, .94);
    border-top: 1px solid rgba(134, 167, 216, .2);
    box-shadow: 0 -12px 34px rgba(0,0,0,.24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.nav-item { gap: 5px; min-width: 64px; padding: 7px 12px; border-radius: 10px; }
.nav-item::before { top: 5px; width: 3px; height: 26px; left: 0; transform: none; border-radius: 0 4px 4px 0; background: linear-gradient(var(--rf-cyan), var(--rf-violet)); box-shadow: 0 0 12px rgba(120,226,238,.45); }
.nav-item svg { width: 21px; height: 21px; color: var(--rf-faint); filter: none; }
.nav-item span { color: var(--rf-muted); font-size: 11px; letter-spacing: .5px; }
.nav-item.active, .nav-item:hover { background: rgba(129, 126, 255, .1); }
.nav-item.active svg, .nav-item.active span, .nav-item:hover svg, .nav-item:hover span { color: var(--rf-cyan); }
.nav-item.active svg { filter: drop-shadow(0 0 7px rgba(120,226,238,.35)); }
.nav-badge { top: 4px; right: 7px; background: var(--rf-red); box-shadow: 0 0 0 3px #090d18; }

/* ---------- 外壳页面公共层级 ---------- */
:is(#page-main,#page-card-search,#page-deck-editor,#page-duel-prep,#page-friends,#page-personal,#page-online,#page-preset-select,#page-preset-cards) {
    --bg: var(--rf-bg);
    --bg-panel: var(--rf-panel-solid);
    --bg-card: var(--rf-panel);
    --bg-card-hover: rgba(25, 38, 65, .95);
    --text: var(--rf-text);
    --text-dim: var(--rf-muted);
    --text-bright: #fff;
    --border: var(--rf-line);
    --border-gold: var(--rf-line-strong);
    --gold: var(--rf-violet);
    --gold-bright: var(--rf-violet-hi);
    --gold-dim: #7566b3;
    --gold-glow: rgba(155,123,255,.2);
}
:is(#page-main,#page-card-search,#page-deck-editor,#page-duel-prep,#page-friends,#page-personal,#page-online) .sub-page-header {
    background: rgba(10, 16, 29, .9);
    border-bottom-color: rgba(139,171,221,.2);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    backdrop-filter: blur(18px);
}
.sub-page-title { color: var(--rf-text); font-weight: 700; letter-spacing: 1px; }
.back-btn { border-color: var(--rf-line); color: var(--rf-cyan); border-radius: 10px; }
.back-btn:hover { background: rgba(120,226,238,.1); border-color: var(--rf-cyan); }
:is(button,input,select,textarea):focus-visible { outline: 2px solid var(--rf-cyan) !important; outline-offset: 3px; }

/* ---------- 首页：建立首屏焦点和阅读节奏 ---------- */
#page-main .home-wrap { background: transparent; }
#page-main .home-slim { width: min(1160px, calc(100% - 42px)); padding: 24px 0 90px; gap: 16px; }
#page-main .announce {
    border: 1px solid rgba(120,226,238,.24); border-radius: 12px; background: linear-gradient(90deg, rgba(22,50,69,.58), rgba(15,22,39,.82));
    padding: 13px 17px; box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
#page-main .announce::before { background: linear-gradient(90deg, var(--rf-cyan), transparent 75%); opacity: .8; }
#page-main .a-date { color: var(--rf-cyan); letter-spacing: 1.8px; }
#page-main .a-tx { color: #dce9f8; }
#page-main .home-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 18px; align-items: start; }
#page-main .asc-label { color: var(--rf-cyan); letter-spacing: 1.4px; }
#page-main .asc-label::after { background: linear-gradient(90deg, rgba(120,226,238,.46), transparent); }
#page-main .hero {
    min-height: 300px; padding: 30px 34px; border: 1px solid rgba(155,123,255,.4); border-radius: 18px;
    background: radial-gradient(circle at 88% 40%, rgba(155,123,255,.24), transparent 30%), linear-gradient(135deg, rgba(28,27,64,.96), rgba(12,21,39,.94));
    box-shadow: var(--rf-shadow), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden;
}
#page-main .hero::before { opacity: .38; background: linear-gradient(135deg, transparent 20%, rgba(120,226,238,.16) 50%, transparent 80%); }
#page-main .hero::after { border-color: rgba(120,226,238,.42); opacity: .55; }
#page-main .hero-body { max-width: 65%; }
#page-main .asc-core-vis { opacity: .72; filter: saturate(.82); }
#page-main .h-title { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: 0; }
#page-main .h-sub { color: #adbed5; font-size: 13px; }
#page-main .hero-actions { margin-top: 22px; }
#page-main .hero-cta { min-height: 48px; border-radius: 11px; box-shadow: 0 10px 24px rgba(155,123,255,.22); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
#page-main .hero-cta:not(.ghost) { background: linear-gradient(135deg, #b49cff, #7964e7); color: #0b0d17; }
#page-main .hero-cta .memo { white-space: nowrap; display: inline-block; }
#page-main .hero-cta.ghost { background: rgba(120,226,238,.06); border-color: rgba(120,226,238,.42); color: var(--rf-cyan); }
#page-main .shell-home-context { border-top-color: rgba(120,226,238,.2); }
#page-main .asc-net { gap: 10px; }
#page-main .asc-node { min-height: 82px; border: 1px solid rgba(139,171,221,.2); border-radius: 12px; background: linear-gradient(110deg, rgba(17,28,48,.86), rgba(12,18,32,.74)); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
#page-main .asc-node:hover { border-color: rgba(120,226,238,.58); background: linear-gradient(110deg, rgba(22,50,66,.9), rgba(20,24,48,.82)); box-shadow: 0 10px 28px rgba(0,0,0,.26), 0 0 20px rgba(120,226,238,.08); }
#page-main .asc-node::before { background: var(--rf-cyan); box-shadow: 0 0 12px rgba(120,226,238,.55); }
#page-main .fi { background: rgba(120,226,238,.1); border-color: rgba(120,226,238,.24); }
#page-main .fn { color: var(--rf-text); }
#page-main .fd { color: var(--rf-muted); }
#page-main .stats-strip, #page-main .asc-recent, #page-main .roadmap { border-color: rgba(139,171,221,.22); background: rgba(13,20,35,.72); border-radius: 14px; }
#page-main .stats-strip { padding: 18px; }
#page-main .rate-ring { border-color: rgba(120,226,238,.45); box-shadow: 0 0 22px rgba(120,226,238,.1); }
#page-main .stat-v { color: var(--rf-text); }
#page-main .stat-block.win .stat-v { color: var(--rf-green); }
#page-main .stat-block.lose .stat-v { color: var(--rf-red); }

/* ---------- 搜索页 / 卡组页：把筛选从噪声变成工具栏 ---------- */
#page-card-search .sub-page-container, #page-deck-editor .deck-workbench { background: linear-gradient(135deg, #080c16, #0c1322); }
#page-card-search .search-bar, #page-card-search .csw-search-hero, #page-card-search .csw-tools, #page-deck-editor .dwb-filters {
    background: rgba(14, 23, 40, .86); border-color: rgba(139,171,221,.2);
}
#page-card-search .search-input-wrap, #page-card-search .csw-searchbox { border-color: rgba(120,226,238,.26); border-radius: 12px; background: rgba(5,10,18,.54); }
#page-card-search .search-input-wrap:focus-within, #page-card-search .csw-searchbox:focus-within { border-color: var(--rf-cyan); box-shadow: 0 0 0 3px rgba(120,226,238,.08); }
#page-card-search #card-search-input { color: var(--rf-text); }
:is(#page-card-search,#page-deck-editor) .filter-btn, :is(#page-card-search,#page-deck-editor) .sort-btn { border-color: rgba(139,171,221,.22); color: var(--rf-muted); background: rgba(255,255,255,.025); border-radius: 8px; }
:is(#page-card-search,#page-deck-editor) .filter-btn:hover, :is(#page-card-search,#page-deck-editor) .sort-btn:hover { border-color: var(--rf-cyan); color: var(--rf-cyan); }
:is(#page-card-search,#page-deck-editor) .filter-btn.active, :is(#page-card-search,#page-deck-editor) .sort-btn.active { background: linear-gradient(135deg, var(--rf-violet), #6f68d8); border-color: transparent; color: #fff; }
#page-card-search .card-list-container { padding: 16px 20px 90px; gap: 14px; }
#page-card-search .search-card-item { border-color: rgba(139,171,221,.2); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
#page-card-search .search-card-item:hover { border-color: var(--rf-cyan); box-shadow: 0 14px 30px rgba(0,0,0,.3), 0 0 20px rgba(120,226,238,.08); }
#page-deck-editor .dwb-header { min-height: 64px; }
#page-deck-editor .dwb-columns { gap: 1px; background: rgba(120,226,238,.12); }
#page-deck-editor .dwb-deck-pane, #page-deck-editor .dwb-pool-pane { background: rgba(10,17,30,.94); }
#page-deck-editor .dwb-pane-title { color: var(--rf-text); border-bottom-color: rgba(139,171,221,.2); }
#page-deck-editor .dwb-kw { border-color: rgba(139,171,221,.28); background: rgba(5,10,18,.58); }
#page-deck-editor .dwb-pool-card, #page-deck-editor .dwb-deck-card { border-color: rgba(139,171,221,.2); border-radius: 10px; }
#page-deck-editor .dwb-pool-card:hover, #page-deck-editor .dwb-deck-card:hover { border-color: var(--rf-cyan); box-shadow: 0 10px 24px rgba(0,0,0,.3); }

/* ---------- 准备 / 好友 / 我的 / 大厅：统一工作台卡片 ---------- */
#page-duel-prep .duel-brief-wrap, #page-friends .sub-page-container, #page-personal .sub-page-container, #page-online .online-container { background: linear-gradient(135deg, #080c16, #0d1424); }
#page-duel-prep .prep-slim { width: min(980px, calc(100% - 36px)); padding-top: 26px; }
#page-duel-prep .hero, #page-duel-prep .announce, #page-duel-prep .feat-card, #page-duel-prep .deck-report, #page-duel-prep .rules-full { border-color: rgba(139,171,221,.22); background: linear-gradient(110deg, rgba(17,28,48,.88), rgba(12,18,32,.84)); border-radius: 14px; }
#page-duel-prep .hero { border-color: rgba(155,123,255,.42); box-shadow: var(--rf-shadow); }
#page-duel-prep .hero-cta { background: linear-gradient(135deg, #b49cff, #7964e7); color: #0b0d17; }
#page-duel-prep .feat-card:hover { border-color: var(--rf-cyan); background: rgba(22,45,62,.86); }
#page-friends .friends-page-body, #page-personal .friends-page-body { width: min(980px, calc(100% - 36px)); padding-top: 26px; }
#page-friends :is(.idcard,.friend-inbox,.friend-list), #page-personal :is(.pa-profile-card,.settings-section), #page-online .lobby-quick-card, #page-online .lobby-rooms { border-color: rgba(139,171,221,.22); background: linear-gradient(110deg, rgba(17,28,48,.86), rgba(12,18,32,.82)); border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.16); }
#page-online .online-header { background: rgba(10,16,29,.9); border-bottom-color: rgba(139,171,221,.2); }
#page-online .online-title { color: var(--rf-text); }
#page-online .lobby-quick-card:hover { border-color: var(--rf-cyan); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
#page-online .lqc-icon { background: rgba(120,226,238,.09); border-color: rgba(120,226,238,.24); }
#page-online .online-btn.primary { background: linear-gradient(135deg, #b49cff, #7964e7); border-color: transparent; color: #0b0d17; }
#page-online .online-btn.secondary { color: var(--rf-cyan); border-color: rgba(120,226,238,.35); }

/* ---------- 决斗盘：增加战场层级，减少紫边刺眼感 ---------- */
#page-battle { --gold: #a78bff; --gold-bright: #d5c7ff; --gold-dim: #7567a8; --gold-glow: rgba(167,139,255,.22); --border: rgba(139,171,221,.22); --border-gold: rgba(167,139,255,.42); --bg: #070b14; --bg-panel: #0e1626; --text: #eaf2ff; --text-dim: #879ab8; }
#page-battle .game-container { background: radial-gradient(ellipse at 50% 45%, rgba(44,67,111,.14), transparent 58%), #070b14; }
#page-battle .top-bar { background: linear-gradient(180deg, rgba(15,25,44,.98), rgba(8,13,24,.96)); border-bottom-color: rgba(120,226,238,.28); }
#page-battle .phase-stepper { background: rgba(16,25,43,.8); border-color: rgba(139,171,221,.25); }
#page-battle .phase-item.active { color: var(--rf-cyan); background: rgba(120,226,238,.1); }
#page-battle .duel-action-guide { border-color: rgba(120,226,238,.22); background: rgba(12,22,37,.88); }
#page-battle .duel-guide-state { color: var(--rf-cyan); background: rgba(120,226,238,.1); }
#page-battle .field-wrap, #page-battle .hand-zone, #page-battle .signal-row, #page-battle .right-panel { background-color: rgba(7,13,24,.8); border-color: rgba(139,171,221,.22); }
#page-battle .battle-slot { background: rgba(10,20,34,.7); border-color: rgba(139,171,221,.25); }
#page-battle .battle-slot.occupied { border-color: rgba(167,139,255,.48); box-shadow: inset 0 0 18px rgba(167,139,255,.05); }
#page-battle .battle-slot.highlight { border-color: var(--rf-cyan); box-shadow: 0 0 16px rgba(120,226,238,.2); }
#page-battle .battlefield-divider { background: linear-gradient(90deg, transparent, rgba(120,226,238,.6), rgba(167,139,255,.7), transparent); box-shadow: 0 0 8px rgba(120,226,238,.2); }
#page-battle .right-panel { background: rgba(8,14,26,.92); border-left-color: rgba(139,171,221,.22); }
#page-battle .action-btn { border-radius: 9px; border-color: rgba(139,171,221,.3); background: rgba(22,34,56,.72); color: var(--rf-text); }
#page-battle .action-btn:hover:not(:disabled) { border-color: var(--rf-cyan); background: rgba(120,226,238,.12); }
#page-battle .action-btn.primary, #page-battle #btn-end { background: linear-gradient(135deg, #a78bff, #6659c7); border-color: transparent; color: #fff; }
#page-battle .action-btn.danger { color: var(--rf-red); }

/* ---------- 移动端：优先保持触控尺寸和信息优先级 ---------- */
@media (max-width: 767px) {
    .bottom-nav { height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .nav-item { min-width: 54px; padding: 7px 8px; }
    #page-main .home-slim { width: min(100% - 24px, 620px); padding-top: 14px; }
    #page-main .home-main { display: flex; flex-direction: column; gap: 14px; }
    #page-main .hero { min-height: 278px; padding: 22px 20px; }
    #page-main .hero-body { max-width: 74%; }
    #page-main .h-title { font-size: 25px; }
    #page-main .asc-side { display: grid; grid-template-columns: 1fr; gap: 10px; }
    #page-main .asc-net { padding-left: 18px; }
    #page-main .asc-node { min-height: 70px; }
    #page-main .feat-grid { grid-template-columns: 1fr; }
    #page-card-search .card-list-container { padding: 12px 12px 86px; gap: 10px; }
    #page-duel-prep .prep-slim, #page-friends .friends-page-body { width: calc(100% - 24px); padding-top: 14px; }
    #page-online .online-body { padding: 12px; }
    #page-online .lobby-quick { gap: 9px; }
    #page-online .lobby-quick-card { padding: 12px; }
    #page-battle.bp-compact .battle-slot { border-color: rgba(139,171,221,.28); }
    #page-battle.bp-compact .hand-zone { border-color: rgba(120,226,238,.26); background: rgba(8,15,27,.9); }
    #page-battle.bp-compact .actions-zone .action-btn { border-color: rgba(139,171,221,.34); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}