/* lol-mixer 2026-11-03 v4 · 纯表现层特效：只给数据大盘/选手档案/自动排片/选手仪表盘 4 页加视觉皮肤
   不改任何数据、计算口径、排序、搜索、落盘逻辑与鉴权；所有动效层 pointer-events:none，不挡点击。
   内容容器为 #root 下的 flex-1 内容区，导航栏不受这 4 页皮肤影响。 */

/* ---------- 通用：4 页进场（页面切换时 React 重新挂载内容，进场动画随之重播） ---------- */
body[data-fx-page="dashboard"] #root > div > div.flex-1,
body[data-fx-page="profiles"] #root > div > div.flex-1,
body[data-fx-page="autosched"] #root > div > div.flex-1,
body[data-fx-page="board"] #root > div > div.flex-1 { position: relative; }
body[data-fx-page="dashboard"] #root > div > div.flex-1 > div,
body[data-fx-page="profiles"] #root > div > div.flex-1 > div,
body[data-fx-page="autosched"] #root > div > div.flex-1 > div,
body[data-fx-page="board"] #root > div > div.flex-1 > div { animation: fxPageIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fxPageIn { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
body[data-fx-page="dashboard"] #root > div > div.flex-1 > div h2,
body[data-fx-page="profiles"] #root > div > div.flex-1 > div h2,
body[data-fx-page="autosched"] #root > div > div.flex-1 > div h2,
body[data-fx-page="board"] #root > div > div.flex-1 > div h2 {
  text-shadow: 0 0 22px rgba(129,140,248,.55), 0 0 60px rgba(129,140,248,.25);
  letter-spacing: .02em;
}

/* ---------- 数据大盘：电竞指挥舱 ---------- */
body[data-fx-page="dashboard"] #root > div > div.flex-1::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 260px at 15% 0%, rgba(99,102,241,.22), transparent 65%),
    radial-gradient(560px 300px at 90% 10%, rgba(236,72,153,.16), transparent 65%),
    radial-gradient(700px 320px at 50% 110%, rgba(16,185,129,.12), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 34px);
  animation: fxCommandDrift 14s ease-in-out infinite alternate;
}
@keyframes fxCommandDrift { from { opacity: .85; transform: translateY(0); } to { opacity: 1; transform: translateY(-10px); } }
/* KPI 数字：流动渐变发光（纯 CSS 无法对静态文本做真实从 0 计数，改用光泽扫过，保证数字本身不变且可读） */
body[data-fx-page="dashboard"] #root > div > div.flex-1 .text-3xl.font-black,
body[data-fx-page="dashboard"] #root > div > div.flex-1 .text-2xl.font-black {
  background: linear-gradient(100deg, #fff 20%, #a5b4fc 42%, #67e8f9 55%, #fff 75%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fxShineSweep 5s linear infinite;
  filter: drop-shadow(0 0 14px rgba(129,140,248,.35));
}
@keyframes fxShineSweep { from { background-position: 0% center; } to { background-position: 220% center; } }
/* KPI 卡片：霓虹边框呼吸 */
body[data-fx-page="dashboard"] #root > div > div.flex-1 .grid > div {
  border-color: rgba(129,140,248,.35) !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,.08), 0 10px 34px rgba(2,6,23,.55), inset 0 0 26px rgba(99,102,241,.07);
  animation: fxCardBreathe 4.5s ease-in-out infinite;
}
@keyframes fxCardBreathe { 0%,100% { box-shadow: 0 0 0 1px rgba(129,140,248,.08), 0 10px 34px rgba(2,6,23,.55), inset 0 0 22px rgba(99,102,241,.05); } 50% { box-shadow: 0 0 0 1px rgba(129,140,248,.28), 0 10px 40px rgba(99,102,241,.22), inset 0 0 34px rgba(99,102,241,.14); } }
/* 榜单条：渐变能量条 + 光泽流动 */
body[data-fx-page="dashboard"] #root > div > div.flex-1 .bg-indigo-500 {
  background: linear-gradient(90deg, #6366f1, #22d3ee, #a78bfa) !important;
  background-size: 200% 100%; animation: fxBarFlow 3.5s linear infinite;
  box-shadow: 0 0 12px rgba(99,102,241,.7);
}
@keyframes fxBarFlow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
/* 最近场次胜负字发光 */
body[data-fx-page="dashboard"] #root > div > div.flex-1 .text-sky-400 { text-shadow: 0 0 12px rgba(56,189,248,.8); }
body[data-fx-page="dashboard"] #root > div > div.flex-1 .text-rose-400 { text-shadow: 0 0 12px rgba(251,113,133,.8); }

/* ---------- 选手档案：全息档案卡 ---------- */
body[data-fx-page="profiles"] #root > div > div.flex-1::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(520px 300px at 85% -5%, rgba(16,185,129,.18), transparent 65%),
    radial-gradient(500px 280px at 5% 100%, rgba(52,211,153,.10), transparent 65%);
  animation: fxCommandDrift 12s ease-in-out infinite alternate;
}
/* 选手名片按钮：选中发光，未选中悬停浮起 */
body[data-fx-page="profiles"] #root > div > div.flex-1 button { transition: transform .2s ease, box-shadow .2s ease; }
body[data-fx-page="profiles"] #root > div > div.flex-1 button.bg-emerald-600 {
  box-shadow: 0 0 0 1px rgba(52,211,153,.6), 0 0 22px rgba(16,185,129,.55), 0 0 46px rgba(16,185,129,.22);
  animation: fxCardBreathe 4s ease-in-out infinite;
}
body[data-fx-page="profiles"] #root > div > div.flex-1 button:hover { transform: translateY(-2px); }
/* 档案主卡：全息渐变边框光晕 */
body[data-fx-page="profiles"] #root > div > div.flex-1 .bg-slate-900\/80 {
  border-color: rgba(52,211,153,.35) !important;
  box-shadow: 0 0 0 1px rgba(52,211,153,.08), 0 14px 40px rgba(2,6,23,.6), inset 0 0 30px rgba(16,185,129,.06);
}
/* 档案名：渐变 + 光环感 */
body[data-fx-page="profiles"] #root > div > div.flex-1 h3.text-2xl {
  background: linear-gradient(100deg, #fff 15%, #6ee7b7 45%, #22d3ee 70%, #fff 95%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fxShineSweep 6s linear infinite;
}
/* 成长轨迹表：行悬停发光，胜负字发光，行依次淡入（仅前 12 行加延迟，避免长表等太久） */
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody tr { transition: background .2s ease, box-shadow .2s ease; }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody tr:hover { background: rgba(16,185,129,.07); box-shadow: inset 3px 0 0 #34d399; }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody tr:nth-child(-n+12) { animation: fxRowIn .45s ease both; }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody tr:nth-child(2) { animation-delay: .05s; }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody tr:nth-child(3) { animation-delay: .1s; }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody tr:nth-child(4) { animation-delay: .15s; }
@keyframes fxRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody .text-emerald-400 { text-shadow: 0 0 10px rgba(52,211,153,.8); }
body[data-fx-page="profiles"] #root > div > div.flex-1 tbody .text-rose-400 { text-shadow: 0 0 10px rgba(251,113,133,.8); }

/* ---------- 自动排片：抽签仪式 / 蓝红对撞 ---------- */
body[data-fx-page="autosched"] #root > div > div.flex-1::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(560px 300px at 10% 0%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(560px 300px at 90% 0%, rgba(244,63,94,.20), transparent 60%),
    radial-gradient(600px 260px at 50% 110%, rgba(245,158,11,.10), transparent 65%);
  animation: fxCommandDrift 10s ease-in-out infinite alternate;
}
/* 生成按钮：金色仪式脉冲（不改文案与位置） */
body[data-fx-page="autosched"] #root > div > div.flex-1 button.bg-amber-600 {
  box-shadow: 0 0 0 1px rgba(245,158,11,.55), 0 0 26px rgba(245,158,11,.55), 0 0 60px rgba(245,158,11,.20);
  animation: fxRitualPulse 2.2s ease-in-out infinite;
}
@keyframes fxRitualPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(245,158,11,.45), 0 0 18px rgba(245,158,11,.4); } 50% { box-shadow: 0 0 0 1px rgba(245,158,11,.8), 0 0 34px rgba(245,158,11,.75), 0 0 70px rgba(245,158,11,.28); } }
body[data-fx-page="autosched"] #root > div > div.flex-1 button.bg-amber-600:active { transform: scale(.96); }
/* 已选选手芯片：选中金色发光 */
body[data-fx-page="autosched"] #root > div > div.flex-1 button.bg-amber-600:not(:last-child) { animation: fxRitualPulse 3s ease-in-out infinite; }
/* 预览对阵：蓝红方对撞光晕，卡片依次翻入（CSS 入场，数据与落盘逻辑不动） */
body[data-fx-page="autosched"] #root > div > div.flex-1 .bg-sky-950\/30 {
  box-shadow: 0 0 0 1px rgba(56,189,248,.35), 0 0 26px rgba(56,189,248,.22), inset 0 0 24px rgba(56,189,248,.08);
  animation: fxClashIn .5s cubic-bezier(.2,.9,.3,1.2) both;
}
body[data-fx-page="autosched"] #root > div > div.flex-1 .bg-rose-950\/30 {
  box-shadow: 0 0 0 1px rgba(244,63,94,.35), 0 0 26px rgba(244,63,94,.22), inset 0 0 24px rgba(244,63,94,.08);
  animation: fxClashIn .5s .12s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes fxClashIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
body[data-fx-page="autosched"] #root > div > div.flex-1 .text-sky-300 { text-shadow: 0 0 12px rgba(56,189,248,.9); }
body[data-fx-page="autosched"] #root > div > div.flex-1 .text-rose-300 { text-shadow: 0 0 12px rgba(251,113,133,.9); }

/* ---------- 选手仪表盘：霓虹排行榜墙 ---------- */
body[data-fx-page="board"] #root > div > div.flex-1::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 280px at 50% -5%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(167,139,250,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px);
  animation: fxCommandDrift 13s ease-in-out infinite alternate;
}
/* 表头：霓虹渐变字 */
body[data-fx-page="board"] #root > div > div.flex-1 thead th {
  background: linear-gradient(100deg, #67e8f9, #a78bfa, #f472b6);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fxShineSweep 7s linear infinite;
}
/* 前三名：金 / 银 / 铜霓虹底 */
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(1) { background: linear-gradient(90deg, rgba(251,191,36,.16), rgba(251,191,36,.03)); box-shadow: inset 3px 0 0 #fbbf24, 0 0 26px rgba(251,191,36,.14); }
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(2) { background: linear-gradient(90deg, rgba(203,213,225,.14), rgba(203,213,225,.02)); box-shadow: inset 3px 0 0 #cbd5e1; }
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(3) { background: linear-gradient(90deg, rgba(217,119,6,.16), rgba(217,119,6,.03)); box-shadow: inset 3px 0 0 #d97706; }
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(1) td:first-child button { text-shadow: 0 0 14px rgba(251,191,36,.9); }
/* 行悬停：霓虹墙浮起 + 左侧光条 */
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr { transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:hover { transform: translateX(4px); background: rgba(34,211,238,.08); box-shadow: inset 3px 0 0 #22d3ee, 0 8px 26px rgba(34,211,238,.12); }
/* 行依次淡入（仅前 12 行，避免 57 行长表等太久） */
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(-n+12) { animation: fxRowIn .4s ease both; }
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(2) { animation-delay: .04s; }
body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:nth-child(3) { animation-delay: .08s; }
/* 近 5 场能量格：胜格发光、悬停放大 */
body[data-fx-page="board"] #root > div > div.flex-1 tbody td:last-child span { transition: transform .15s ease, box-shadow .15s ease; }
body[data-fx-page="board"] #root > div > div.flex-1 tbody td:last-child span:hover { transform: scale(1.25); }
body[data-fx-page="board"] #root > div > div.flex-1 tbody td:last-child .bg-emerald-500\/20 { box-shadow: 0 0 10px rgba(52,211,153,.55); }
body[data-fx-page="board"] #root > div > div.flex-1 tbody td:last-child .bg-rose-500\/20 { box-shadow: 0 0 8px rgba(251,113,133,.4); }
/* 搜索 / 排序控件聚焦霓虹 */
body[data-fx-page="board"] #root > div > div.flex-1 input:focus,
body[data-fx-page="board"] #root > div > div.flex-1 select:focus { box-shadow: 0 0 0 1px rgba(34,211,238,.6), 0 0 22px rgba(34,211,238,.35); }

/* ---------- 性能与无障碍底线：手机减动效，减动效偏好全关 ---------- */
@media (max-width: 640px) {
  body[data-fx-page] #root > div > div.flex-1::before { animation: none; opacity: .6; }
  body[data-fx-page="dashboard"] #root > div > div.flex-1 .grid > div,
  body[data-fx-page="autosched"] #root > div > div.flex-1 button.bg-amber-600,
  body[data-fx-page="profiles"] #root > div > div.flex-1 button.bg-emerald-600 { animation: none; }
  body[data-fx-page="board"] #root > div > div.flex-1 tbody tr:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-fx-page] #root > div > div.flex-1 > div,
  body[data-fx-page] #root > div > div.flex-1::before,
  body[data-fx-page] #root > div > div.flex-1 .text-3xl.font-black,
  body[data-fx-page] #root > div > div.flex-1 .text-2xl.font-black,
  body[data-fx-page] #root > div > div.flex-1 .grid > div,
  body[data-fx-page] #root > div > div.flex-1 .bg-indigo-500,
  body[data-fx-page] #root > div > div.flex-1 tbody tr,
  body[data-fx-page] #root > div > div.flex-1 button { animation: none !important; transition: none !important; }
}