/* ============================================================
   dao · 官网2 —— 统一交互层样式(开发遵守文档 §四)
   ============================================================ */

/* ============ 唯一 TipLayer ============ */
.fx-tip{
  position:fixed; z-index:120; pointer-events:none; max-width:280px;
  background:linear-gradient(160deg,#1C1913,#14110C);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:10px 12px; box-shadow:0 14px 32px rgba(0,0,0,.6);
  opacity:0; transform:translateY(6px); transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.fx-tip.on{ opacity:1; transform:translateY(0); }
.fx-tip-t{ font-family:var(--f-disp); font-weight:700; font-size:14px; color:var(--sig); letter-spacing:.04em; margin-bottom:3px; }
.fx-tip-b{ font-size:12.5px; color:var(--tx); line-height:1.6; }
.fx-tip-m{ margin-top:6px; font-family:var(--f-mono); font-size:10px; color:var(--tx-faint); letter-spacing:.06em; }

/* ============ pressFx 点击三件套 ============ */
[data-fx]{ position:relative; overflow:hidden; }
.fx-press{ animation:fxPress .26s var(--ease); }
@keyframes fxPress{ 0%{ transform:scale(1);} 40%{ transform:scale(.965);} 100%{ transform:scale(1);} }
.fx-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--sig-glow) 0%, transparent 62%);
  transform:scale(0); animation:fxRipple .55s var(--ease) forwards;
}
@keyframes fxRipple{ to{ transform:scale(1.6); opacity:0; } }
/* 选中金框点亮 */
.fx-sel{ box-shadow:0 0 0 1px var(--sig), 0 0 16px var(--sig-glow) !important; border-color:var(--sig) !important; }

/* ============ 联动面板(核心居中大幅, 不贴边角) ============ */
.fx-panel{
  position:fixed; z-index:100;
  left:50%; top:50%; transform:translate(-50%, -46%) scale(.96);
  width:min(1060px, 94vw); max-height:88vh;
  background:linear-gradient(180deg, var(--ink-900), var(--ink-950));
  border:1px solid var(--line-strong);
  box-shadow:0 32px 80px rgba(0,0,0,.66), 0 0 0 1px rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition:transform var(--t-mid), opacity var(--t-mid);
  overflow-y:auto;
}
.fx-panel.on{ transform:translate(-50%, -50%) scale(1); opacity:1; pointer-events:auto; }
.fx-panel-x{
  position:sticky; top:0; float:right; z-index:2; margin:14px 14px 0 0;
  width:38px; height:38px; font-size:24px; line-height:1; color:var(--tx-dim);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-850);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.fx-panel-x:hover{ color:var(--sig); border-color:var(--sig); }
.fx-panel-body{ padding:30px 32px 44px; }
/* 内容错峰淡入 */
.fx-rise{ opacity:0; transform:translateY(12px); animation:fxRise .5s var(--ease) forwards; animation-delay:calc(var(--ri, 0) * .06s); }
@keyframes fxRise{ to{ opacity:1; transform:none; } }

/* 详情主区(怪物/卡牌 单栏) */
.cx-detail{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(20px,3vw,40px); }
/* 并列区(怪物 ↔ 技能卡 并排) */
.cx-split{ display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:clamp(18px,2.4vw,30px); align-items:start; }
.cx-split-divider{ background:linear-gradient(180deg, transparent, var(--sig-dim), transparent); width:1px; align-self:stretch; }

/* 移动端: 面板改近全屏抽屉 */
@media (max-width:860px){
  .fx-panel{
    left:0; right:0; top:auto; bottom:0; width:auto; max-height:88vh;
    transform:translateY(102%);
  }
  .fx-panel.on{ transform:translateY(0); }
  .fx-panel-body{ padding:22px 18px 34px; }
  .cx-detail{ grid-template-columns:1fr; }
  .cx-split{ grid-template-columns:1fr; }
  .cx-split-divider{ width:auto; height:1px; background:linear-gradient(90deg, transparent, var(--sig-dim), transparent); }
}
@media (prefers-reduced-motion:reduce){
  .fx-press, .fx-rise{ animation:none; opacity:1; transform:none; }
  .fx-ripple{ display:none; }
  .fx-panel{ transition:none; }
}