/* PK 站 · 宣纸主题
   手机竖屏优先；宽屏（≥980px）切两栏：左边对局，右边身家与提示。 */

:root{
  --paper:#f6f1e6;
  --paper-2:#efe7d7;
  --card:#fffdf8;
  --ink:#1e1b16;
  --ink-2:#5f574a;
  --ink-3:#8b8172;
  --line:#ddd2bd;
  --line-2:#c9bda4;
  --zhu:#a8342a;
  --zhu-soft:#c9605a;
  --jin:#b08a3e;
  --ok:#4a6b46;
  --shadow:0 10px 24px rgba(78,60,28,.14), 0 2px 5px rgba(78,60,28,.08);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(90% 70% at 92% 8%, rgba(214,196,163,.40), rgba(214,196,163,0) 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Songti SC","STSong","Noto Serif SC",serif}

/* ---------- 骨架 ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:16px 14px 40px}
.head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:nowrap}
.head .titles{min-width:0;flex:1 1 auto}
.seal{
  width:34px;height:34px;border-radius:7px;background:var(--zhu);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1.05;
  font-weight:700;letter-spacing:0;text-align:center;box-shadow:0 3px 8px rgba(168,52,42,.32)
}
.head h1{font-size:18px;margin:0;letter-spacing:1.5px;font-weight:700;white-space:nowrap}
.head .sub{margin:2px 0 0;font-size:12px;color:var(--ink-3);letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me{
  flex:0 0 auto;max-width:42%;font-size:12px;color:var(--ink-3);text-align:right;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;
}
.me b{color:var(--ink);font-weight:600}

.panel{
  /* relative 是给表现层用的：.fx-layer / .round-banner 都以面板为定位基准，
     面板一旦是 static，飘字就会跑到文档流末尾去（踩过）。 */
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:14px;
}
.panel h2{
  margin:0 0 12px;font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:2px;
  display:flex;align-items:center;gap:8px;
}
.panel h2::before{content:"";width:3px;height:13px;background:var(--jin);border-radius:2px}
.hint{font-size:12px;color:var(--ink-3);line-height:1.7}
.hint b{color:var(--ink-2);font-weight:600}

/* ---------- 表单 ---------- */
input[type=text],input[type=password]{
  width:100%;padding:11px 12px;font-size:15px;color:var(--ink);
  background:#fffefb;border:1px solid var(--line-2);border-radius:10px;outline:none;
  transition:border-color .18s, box-shadow .18s;
}
input::placeholder{color:#a99f8d}
input:focus{border-color:var(--zhu-soft);box-shadow:0 0 0 3px rgba(168,52,42,.10)}
.field{margin-bottom:10px}
.field label{display:block;font-size:12px;color:var(--ink-3);margin:0 0 5px 2px;letter-spacing:1px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;font-size:14px;font-weight:600;letter-spacing:1px;
  border:1px solid transparent;border-radius:10px;cursor:pointer;
  background:var(--zhu);color:#fff;box-shadow:0 4px 12px rgba(168,52,42,.24);
  transition:transform .12s, box-shadow .18s, background .18s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(168,52,42,.22)}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:#fbf6ea}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tab{
  padding:8px 14px;font-size:14px;color:var(--ink-3);cursor:pointer;border:0;background:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:1px;
}
.tab.on{color:var(--zhu);border-bottom-color:var(--zhu);font-weight:600}

.msg{font-size:13px;color:var(--zhu);min-height:18px;line-height:1.6;margin-top:8px}
.msg.ok{color:var(--ok)}
.msg.quiet{color:var(--ink-3)}

/* ---------- 大厅 ---------- */
.hero{display:flex;gap:14px;align-items:center}
.avatar{
  width:56px;height:56px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(150deg,#3b3428,#7d7364 55%,#cfc3ab);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;letter-spacing:1px;box-shadow:var(--shadow)
}
.hero .who{min-width:0}
.hero .name{font-size:17px;font-weight:700;letter-spacing:1px}
.hero .title{font-size:12px;color:var(--ink-3);margin-top:3px}
.stats{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.stat{
  flex:1 1 96px;background:#fbf7ec;border:1px solid var(--line);border-radius:10px;
  padding:9px 10px;text-align:center;
}
.stat .k{font-size:11px;color:var(--ink-3);letter-spacing:1px}
.stat .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}

/* ---------- 对局 ---------- */
.arena{display:grid;gap:14px}
@media (min-width:980px){
  .arena{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}
}

.vs{display:flex;align-items:center;gap:10px}
.vs .side{flex:1;min-width:0}
.vs .side.foe{text-align:right}
.vs .side .n{font-size:13px;font-weight:600;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs .side .sub{font-size:11px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.bar{height:9px;border-radius:5px;background:#e8dfcc;overflow:hidden;margin-top:6px;position:relative}
.bar i{display:block;height:100%;width:100%;border-radius:5px;transition:width .45s ease}
.bar.mine i{background:linear-gradient(90deg,#5f7f58,#8fae7c)}
.bar.foe i{background:linear-gradient(90deg,#b8574a,#d08a72)}
.vs .mid{
  flex:0 0 auto;text-align:center;font-size:11px;color:var(--ink-3);line-height:1.35;
  padding:0 4px;
}
.vs .mid b{display:block;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}

.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;min-height:20px}
.badge{
  font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--ink-2);background:#fbf7ec;white-space:nowrap;
}
.badge.warn{color:var(--zhu);border-color:#e2b5ae;background:#fdf1ee}
.badge.good{color:var(--ok);border-color:#c3d3bd;background:#f0f5ee}

/* 手牌：扇形叠放 + 位置轮转。
   三张牌用绝对定位钉在同一个「舞台」上，每张的位置/旋转/缩放由所在槽位
   决定（--dx/--dy/--rot/--sc）；换牌时只是这几个变量变了，浏览器就把这张牌
   从旧槽位平滑地滑到新槽位——牌是真的在动，不是瞬间换位。
   用 translate/rotate/scale 三个独立属性而不是 transform，是为了让它们各自插值。 */
.hand{
  /* 子元素全部绝对定位，容器不会被子元素撑开，必须自己给宽度：
     中间那张整宽 + 两侧各露出 34%，再留 4px 余量。 */
  position:relative;display:block;
  --cw:clamp(96px, calc((100vw - 60px) / 2.55), 152px);
  width:calc(var(--cw) * 1.68 + 8px);
  height:calc(var(--cw) * 1.79 + 26px);
  margin:14px auto 2px;
  touch-action:pan-y;user-select:none;
  --lap:calc(var(--cw) * 0.34);
  --ease:cubic-bezier(.22,.72,.24,1);
}
.hand .card{
  position:absolute;top:0;left:50%;
  width:var(--cw);height:calc(var(--cw) * 1.79);
  margin-left:calc(var(--cw) / -2);
  border-radius:13px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(78,60,28,.16), 0 2px 4px rgba(78,60,28,.07);
  translate:var(--dx,0) var(--dy,0);
  rotate:var(--rot,0deg);
  scale:var(--sc,1);
  transition:
    translate .38s var(--ease),
    rotate .38s var(--ease),
    scale .38s var(--ease),
    box-shadow .38s var(--ease),
    filter .38s var(--ease);
  will-change:translate,rotate,scale;cursor:pointer;
}
.hand .card.slot-l{--dx:calc(var(--lap) * -1);--dy:6px;--rot:-3.2deg;--sc:.965;z-index:1}
.hand .card.slot-r{--dx:var(--lap);--dy:6px;--rot:3.2deg;--sc:.965;z-index:1}
.hand .card.slot-mid{
  --dx:0;--dy:-10px;--rot:0deg;--sc:1.06;z-index:5;
  box-shadow:0 20px 38px rgba(78,60,28,.26), 0 3px 7px rgba(78,60,28,.10);
}
.hand .card.slot-l,.hand .card.slot-r{filter:saturate(.94) brightness(.97)}
.hand .card::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:13px;
  box-shadow:inset 0 0 0 1px rgba(120,95,55,.12);
}
.hand .art{position:absolute;inset:0;z-index:1;overflow:hidden;background:#eee7d8}
.hand .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hand .art .veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom,
    rgba(255,253,248,0) 50%, rgba(255,253,248,.26) 66%,
    rgba(255,253,248,.78) 82%, rgba(255,253,248,.97) 93%);
}
.hand .meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 11px 13px}
.hand .meta .row{display:flex;align-items:center;gap:6px}
.hand .meta h3{margin:0;font-size:15px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.hand .tier{margin-left:auto;font-size:10.5px;padding:1px 6px;border-radius:4px;color:#fff;white-space:nowrap}
.c-普通{background:#8b8172}
.c-稀有{background:#6b4a8c}
.c-史诗{background:#a8853d}
.c-特殊{background:#8c3f52}
.hand .meta p{margin:4px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.42}
/* 只保留「选中牌」左右的翻牌热区，并排时不会误点邻牌 */
.edge{position:absolute;top:0;bottom:0;width:26%;z-index:6;display:none}
.edge.l{left:0;border-radius:13px 0 0 13px}
.edge.r{right:0;border-radius:0 13px 13px 0}
.hand .card.slot-mid .edge{display:block}

.help-row{display:flex;justify-content:flex-end;margin-top:12px}
.help-btn{
  font:inherit;font-size:12.5px;letter-spacing:1px;color:var(--ink-2);
  padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);
  background:#fbf7ec;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.help-btn:active{background:#f3ecdc}

/* 规则弹层：从底部升起，手机友好 */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-mask{position:absolute;inset:0;background:rgba(40,32,20,.38)}
.sheet-body{
  position:relative;width:100%;max-width:620px;max-height:82vh;overflow:auto;
  background:var(--card);border-radius:18px 18px 0 0;padding:16px 18px 26px;
  box-shadow:0 -12px 40px rgba(60,44,20,.24);
  animation:rise .26s cubic-bezier(.22,.68,.28,1);
}
@keyframes rise{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sheet-head h2{margin:0;font-size:14px;letter-spacing:2px;color:var(--ink-2);font-weight:600}
.sheet-x{
  margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  background:#fbf7ec;color:var(--ink-2);font-size:14px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sheet-main h3{font-size:13px;margin:16px 0 6px;color:var(--ink-2);letter-spacing:1px}
.sheet-main .hint b{color:var(--zhu);font-weight:600}

.play-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.play-row .grow{flex:1}
.lastround{
  font-size:12.5px;color:var(--ink-2);line-height:1.7;background:#fbf7ec;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:10px;
}
.lastround .w{color:var(--zhu);font-weight:600}
.empty-hand{font-size:13px;color:var(--ink-3)}

/* ---------- 结算 ---------- */
.result-hero{text-align:center;padding:12px 0 4px}
.result-hero .big{font-size:40px;font-weight:700;letter-spacing:6px;line-height:1.2}
.result-hero .big.win{color:var(--ok)}
.result-hero .big.lose{color:var(--zhu)}
.result-hero .big.draw{color:var(--ink-2)}
.result-hero .why{font-size:13px;color:var(--ink-3);margin-top:6px;letter-spacing:1px}
.hp-table{width:100%;border-collapse:collapse;margin-top:14px}
.hp-table td{padding:9px 6px;font-size:13px;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.hp-table td:first-child{color:var(--ink-2)}
.hp-table td:last-child{text-align:right;font-weight:600}
.hp-table tr:last-child td{border-bottom:0}

.loading{display:inline-block;width:14px;height:14px;border:2px solid var(--line-2);
  border-top-color:var(--zhu);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

.hide{display:none !important}

/* 手机小屏：卡片略小一点 */
@media (max-width:430px){
  .wrap{padding:14px 11px 34px}
  .head h1{font-size:16.5px;letter-spacing:1px}
  .head .sub{font-size:11.5px}
  .me{max-width:40%;font-size:11.5px}
  .seal{width:30px;height:30px;font-size:13px;border-radius:6px}
  .hand .meta h3{font-size:13px}
  .hand .meta p{font-size:10.5px;line-height:1.36}
  .hand .meta{padding:0 8px 10px}
  .hand .meta .row{gap:4px}
  .panel{padding:13px}
  .result-hero .big{font-size:34px}
}
/* ============================================================
   表现层（A 层）：结算回放用到的动画
   原则：所有动效都只加在 .fx-* / .hit / .bar 上，不改布局，
        播放期间靠 JS 锁按钮，不做阻塞式 alert。
   ============================================================ */

/* --- 战斗面板：受到重击时整体轻微一震 --- */
@keyframes panel-shake{
  0%,100%{transform:translate3d(0,0,0)}
  18%{transform:translate3d(-4px,1px,0)}
  38%{transform:translate3d(4px,-1px,0)}
  58%{transform:translate3d(-3px,0,0)}
  78%{transform:translate3d(2px,0,0)}
}
.panel.shake{animation:panel-shake .34s cubic-bezier(.36,.07,.19,.97) both}

/* --- 受击方：卡牌/血条位置抖一下 --- */
@keyframes hit-shake{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  15%{transform:translate3d(-7px,0,0) rotate(-1.2deg)}
  35%{transform:translate3d(6px,0,0) rotate(1deg)}
  55%{transform:translate3d(-4px,0,0) rotate(-.6deg)}
  75%{transform:translate3d(3px,0,0) rotate(.4deg)}
}
.hit{animation:hit-shake .32s cubic-bezier(.36,.07,.19,.97) both}

/* 受击瞬间整块泛白，像被砸了一下 */
@keyframes hit-flash{
  0%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0);background:transparent}
  12%{box-shadow:inset 0 0 60px 12px rgba(255,240,235,.85)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0);background:transparent}
}
.vs .side.hit::after{
  content:"";position:absolute;inset:-8px -10px;border-radius:12px;pointer-events:none;
  animation:hit-flash .38s ease-out both;
}
.vs .side{position:relative}

/* --- 血条：底层「幽灵条」停在上一次的宽度，上层延迟追上去，形成掉血拖尾 --- */
.bar i.ghost{
  position:absolute;left:0;top:0;bottom:0;
  background:rgba(168,52,42,.35);
  border-radius:5px;transition:width .5s ease .28s;
  z-index:0;
}
.bar i:not(.ghost){position:relative;z-index:1;transition:width .5s cubic-bezier(.4,0,.2,1)}
.bar.mine i.ghost{background:rgba(95,127,88,.30)}

/* 护盾 / 免伤：血条上覆一层斜纹 */
.bar-shield{
  position:absolute;inset:0;border-radius:5px;opacity:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(135deg,rgba(110,150,200,.55) 0 6px,rgba(110,150,200,.15) 6px 12px);
  transition:opacity .2s ease;
}
.bar-shield.on{opacity:1}

/* --- 伤害飘字 --- */
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:60;overflow:visible}
@keyframes dmg-float{
  0%{transform:translate(-50%,0) scale(.6);opacity:0}
  14%{transform:translate(-50%,-8px) scale(1.18);opacity:1}
  30%{transform:translate(-50%,-14px) scale(1);}
  100%{transform:translate(-50%,-58px) scale(.94);opacity:0}
}
.fx-dmg{
  position:absolute;left:0;top:0;
  font-family:var(--serif);font-weight:700;font-size:26px;line-height:1;
  color:#b3352a;text-shadow:0 2px 0 rgba(255,255,255,.85),0 0 14px rgba(179,53,42,.35);
  animation:dmg-float 1.05s cubic-bezier(.2,.7,.3,1) both;
  white-space:nowrap;
}
.fx-dmg.big{font-size:36px;color:#93221c;text-shadow:0 2px 0 rgba(255,255,255,.9),0 0 20px rgba(147,34,28,.45)}
.fx-dmg.heal{color:#3f7a4b;text-shadow:0 2px 0 rgba(255,255,255,.85),0 0 14px rgba(63,122,75,.35)}
.fx-dmg.dot{color:#6b4a8c}
.fx-dmg.crit::after{
  content:"暴";position:absolute;left:100%;top:-4px;margin-left:4px;
  font-size:12px;color:#fff;background:#93221c;border-radius:4px;padding:1px 5px;
}
.fx-dmg.immune{color:#5b6b7a;font-size:18px}

/* --- 命中斩击：一道斜线扫过 --- */
@keyframes slash{
  0%{transform:translate(-50%,-50%) scaleX(0) rotate(-28deg);opacity:0}
  25%{transform:translate(-50%,-50%) scaleX(1) rotate(-28deg);opacity:1}
  100%{transform:translate(-50%,-50%) scaleX(1.15) rotate(-28deg);opacity:0}
}
.fx-slash{
  position:absolute;left:0;top:0;width:180px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff,#b3352a,#fff,transparent);
  filter:drop-shadow(0 0 6px rgba(255,180,160,.9));
  animation:slash .38s ease-out both;
}

/* --- 回合横幅：「第 N 轮」从中间划过 --- */
@keyframes banner-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}
}
.round-banner{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:30px;letter-spacing:6px;font-weight:700;
  color:rgba(120,90,40,.92);text-shadow:0 2px 12px rgba(255,255,255,.9);
  pointer-events:none;opacity:0;z-index:59;
}
.round-banner.show{animation:banner-in .95s ease both}

/* 出牌瞬间：卡牌往对手方向轻推一下再回来 */
@keyframes card-throw{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-26px) scale(1.07)}
  100%{transform:translateY(0) scale(1)}
}
.hand .card.thrown{animation:card-throw .42s cubic-bezier(.3,.7,.4,1) both}

/* 播放动画期间不允许点牌，避免状态错位 */
.hand.locked .card{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .panel.shake,.hit,.hand .card.thrown,.round-banner.show,.fx-dmg,.fx-slash{animation-duration:.01s !important}
}

/* ============================================================
   每张牌一个独立特效（.fxc-<卡名>）
   约定：外层 .fxc 定位在锚点上（宽高 0），内部元素以 (0,0) 为中心
   绘制；粒子用 --i / --n 做扇形角度分布。
   ============================================================ */
.fxc{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:62;
  filter:drop-shadow(0 2px 6px rgba(40,30,20,.35))}
.fxc>i{position:absolute;left:0;top:0;display:block}

/* 1 刺杀 —— 冷蓝刀光斜切，血珠外溅 */
@keyframes fxc-blade{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-34deg) scaleX(.15)}
  30%{opacity:1;transform:translate(-50%,-50%) rotate(-34deg) scaleX(1)}
  70%{opacity:.85;transform:translate(-50%,-50%) rotate(-34deg) scaleX(1.05)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-34deg) scaleX(1.1)}
}
.fxc-刺杀::before{
  content:"";position:absolute;width:272px;height:5px;
  background:linear-gradient(90deg,transparent,#9ec8f0,#ffffff,#9ec8f0,transparent);
  box-shadow:0 0 22px rgba(120,180,240,.9);
  animation:fxc-blade .46s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes fxc-drop{
  0%{opacity:0;transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-8px) scale(.4)}
  35%{opacity:1;transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-26px) scale(1)}
  100%{opacity:0;transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-46px) scale(.7)}
}
.fxc-刺杀>i{width:10px;height:10px;border-radius:50%;background:#b3352a;
  box-shadow:0 0 13px rgba(179,53,42,.7);animation:fxc-drop .62s ease-out both}

/* 2 重击 —— 金红巨震：冲击波扩圈 + 裂痕线 */
@keyframes fxc-shock{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.2);border-width:10px}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.6);border-width:2px}
}
.fxc-重击::before{
  content:"";position:absolute;width:192px;height:192px;border-radius:50%;
  border:8px solid rgba(186,96,26,.98);box-shadow:0 0 46px rgba(186,96,26,.75) inset,0 0 30px rgba(186,96,26,.55);
  animation:fxc-shock .5s cubic-bezier(.15,.85,.3,1) both;
}
@keyframes fxc-flare{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(20deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(40deg)}
}
.fxc-重击>i{width:6px;height:83px;border-radius:3px;
  background:linear-gradient(180deg,transparent,#e9b86a,rgba(198,120,40,0));
  transform-origin:50% 50%;animation:fxc-flare .55s ease-out both}

/* 3 饮血 —— 血线回流：从对手侧拉回自己 */
@keyframes fxc-siphon{
  0%{opacity:0;transform:translate(-50%,-50%) scaleX(.1)}
  25%{opacity:.9;transform:translate(-50%,-50%) scaleX(1)}
  75%{opacity:.7}
  100%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}
}
.fxc-饮血::before{
  content:"";position:absolute;width:240px;height:3px;
  background:linear-gradient(90deg,rgba(179,53,42,0),#c0392b,#8e1b12);
  box-shadow:0 0 16px rgba(192,57,43,.8);
  transform:rotate(calc(var(--rot, 0deg)));
  animation:fxc-siphon .8s ease-in-out both;
}
.fxc-饮血>i{width:7px;height:7px;border-radius:50%;background:#8e1b12;
  box-shadow:0 0 14px rgba(192,57,43,.9);animation:fxc-drop .9s ease-in both}

/* 4 回复术 —— 淡绿治疗环 + 上浮十字 */
@keyframes fxc-ring{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
}
.fxc-回复术::before{
  content:"";position:absolute;width:154px;height:154px;border-radius:50%;
  border:5px solid rgba(88,170,120,.9);box-shadow:0 0 32px rgba(88,170,120,.55);
  animation:fxc-ring .82s ease-out both;
}
@keyframes fxc-cross{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(10px) scale(.6)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(-34px) scale(1.05)}
}
.fxc-回复术>i{width:5px;height:22px;background:#5fae7e;border-radius:3px;
  box-shadow:0 0 13px rgba(95,174,126,.8);animation:fxc-cross .9s ease-out both}
.fxc-回复术>i::before{content:"";position:absolute;left:-5.5px;top:9px;width:22px;height:5px;
  background:inherit;border-radius:3px}

/* 5 回春法 —— 翠绿光柱 + 旋转花瓣（比回复术更重） */
@keyframes fxc-pillar{
  0%{opacity:0;transform:translate(-50%,-50%) scaleY(.2)}
  25%{opacity:.85;transform:translate(-50%,-50%) scaleY(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scaleY(1.15)}
}
.fxc-回春法::before{
  content:"";position:absolute;width:86px;height:208px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(120,214,150,.55),rgba(120,214,150,0) 70%);
  animation:fxc-pillar .9s ease-out both;
}
@keyframes fxc-petal{
  0%{opacity:0;transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateY(16px) scale(.5)}
  30%{opacity:1}
  100%{opacity:0;transform:rotate(calc(var(--i) / var(--n) * 360deg + 90deg)) translateY(-52px) scale(1)}
}
.fxc-回春法>i{width:14px;height:14px;border-radius:50% 0 50% 50%;
  background:linear-gradient(135deg,#8fe0ac,#3f9268);
  box-shadow:0 0 16px rgba(120,214,150,.9);animation:fxc-petal 1s ease-out both}

/* 6 防御 —— 冰蓝护盾六边形 + 格挡涟漪 */
@keyframes fxc-shield-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}
}
.fxc-防御::before{
  content:"";position:absolute;width:166px;height:189px;
  background:linear-gradient(160deg,rgba(120,180,235,.42),rgba(70,120,180,.18));
  border:2px solid rgba(140,196,240,.95);
  box-shadow:0 0 35px rgba(120,180,235,.7),0 0 19px rgba(120,180,235,.5) inset;
  clip-path:polygon(50% 0,94% 22%,94% 68%,50% 100%,6% 68%,6% 22%);
  animation:fxc-shield-in .8s ease-out both;
}
@keyframes fxc-guard-wave{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}
}
.fxc-防御>i{width:112px;height:112px;border-radius:50%;border:2px solid rgba(170,214,248,.85);
  animation:fxc-guard-wave .7s ease-out both}

/* 7 以退为进 —— 青色残影后撤 + 紫色蓄力 */
@keyframes fxc-after{
  0%{opacity:.75;transform:translate(-50%,-50%) translateX(0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) translateX(var(--dx,-38px)) scale(.86)}
}
.fxc-以退为进::before,.fxc-以退为进::after{
  content:"";position:absolute;width:99px;height:138px;border-radius:19px;
  background:linear-gradient(170deg,rgba(120,220,214,.34),rgba(120,220,214,0));
  border:2px solid rgba(130,226,220,.6);
  animation:fxc-after .62s ease-out both;
}
.fxc-以退为进::after{animation-delay:.12s}
.fxc-以退为进>i{width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(170,120,220,.4),rgba(170,120,220,0) 70%);
  animation:fxc-ring .9s ease-out both}

/* 8 沙石 —— 土黄沙暴旋涡 + 封印符 */
@keyframes fxc-sand{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(220deg) scale(1.7)}
}
.fxc-沙石::before{
  content:"";position:absolute;width:208px;height:208px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(198,168,110,0) 0deg,rgba(176,140,74,.72) 90deg,
    rgba(198,168,110,0) 180deg,rgba(150,116,62,.62) 270deg,rgba(198,168,110,0) 360deg);
  filter:blur(3px);animation:fxc-sand .9s ease-out both;
}
@keyframes fxc-grain{
  0%{opacity:0;transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-6px) scale(.5)}
  30%{opacity:1}
  100%{opacity:0;transform:rotate(calc(var(--i) / var(--n) * 360deg + 140deg)) translateY(-56px) scale(.9)}
}
.fxc-沙石>i{width:6px;height:6px;border-radius:2px;background:#b99b62;
  animation:fxc-grain .85s ease-out both}

/* 9 蛊术 —— 紫绿毒雾 + 上浮毒泡 */
@keyframes fxc-toxic{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
.fxc-蛊术::before{
  content:"";position:absolute;width:176px;height:176px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,90,190,.35),rgba(110,180,110,.22) 55%,rgba(0,0,0,0) 72%);
  animation:fxc-toxic 1s ease-out both;
}
@keyframes fxc-bubble{
  0%{opacity:0;transform:translate(calc((var(--i) - 3) * 14px),22px) scale(.4)}
  30%{opacity:.95}
  100%{opacity:0;transform:translate(calc((var(--i) - 3) * 21px),-48px) scale(1.1)}
}
.fxc-蛊术>i{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(206,160,240,.95),rgba(110,170,110,.55));
  box-shadow:0 0 14px rgba(150,90,190,.8);animation:fxc-bubble 1.05s ease-out both}

/* 10 反甲 —— 银白护甲闪 + 反弹星芒 */
@keyframes fxc-armor{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  60%{opacity:.8}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}
}
.fxc-反甲::before{
  content:"";position:absolute;width:154px;height:154px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,210,226,.9),rgba(160,175,195,.45) 45%,rgba(0,0,0,0) 70%);
  border:2px solid rgba(220,230,244,.9);
  animation:fxc-armor .7s ease-out both;
}
@keyframes fxc-rebound{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.3)}
  30%{opacity:1;transform:translate(-50%,-50%) rotate(120deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(320deg) scale(1.4)}
}
.fxc-反甲>i{width:125px;height:125px;
  background:conic-gradient(from 0deg,rgba(206,220,238,.95) 0deg,rgba(240,246,255,0) 24deg,
    rgba(206,220,238,.95) 60deg,rgba(240,246,255,0) 96deg,rgba(206,220,238,.95) 150deg,
    rgba(240,246,255,0) 200deg,rgba(206,220,238,.95) 260deg,rgba(240,246,255,0) 330deg);
  filter:blur(.4px);animation:fxc-rebound .8s ease-out both}

@media (prefers-reduced-motion:reduce){
  .fxc,.fxc::before,.fxc::after,.fxc>i{animation:none!important}
}

/* ---------- 先手 / 后手 角标 ----------
   只在名字旁边标一处。早先还在两人中间加过一行说明，
   但那一行把「血/攻」挤成两行、手牌也被顶下去，已删掉，
   规则说明改放「规则」弹层里。 */
.n .turn-tag{
  display:inline-block;padding:0 5px;border-radius:20px;
  font-size:10px;line-height:15px;font-family:var(--sans);flex:0 0 auto;
  border:1px solid rgba(168,52,42,.45);color:var(--zhu);background:rgba(168,52,42,.08);
}
.n .turn-tag.later{border-color:var(--line);color:var(--ink-3,#8a8175);background:transparent}

/* ---------- 开局掷签 ---------- */
.turn-draw{
  position:absolute;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;border-radius:var(--radius);
  background:rgba(246,241,230,.86);backdrop-filter:blur(3px);
}
.turn-draw.show{display:flex;animation:draw-fade .22s ease-out both}
@keyframes draw-fade{from{opacity:0}to{opacity:1}}
.draw-inner{text-align:center;font-family:var(--serif)}
.draw-title{
  font-size:13px;letter-spacing:6px;color:var(--ink-2);margin-bottom:14px;opacity:.85;
}
.draw-slots{display:flex;align-items:center;justify-content:center;gap:14px}
.chip{
  width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--ink);border:1px solid var(--line);background:#fffdf7;
  box-shadow:0 2px 8px rgba(90,70,40,.10);
}
.chip.shuffling-l{animation:chip-shuffle-l 1.15s cubic-bezier(.3,.1,.25,1) both}
.chip.shuffling-r{animation:chip-shuffle-r 1.15s cubic-bezier(.3,.1,.25,1) both}
@keyframes chip-shuffle-l{
  0%{transform:translateX(0) rotate(0)}
  18%{transform:translateX(78px) rotate(14deg)}
  40%{transform:translateX(0) rotate(-8deg)}
  62%{transform:translateX(78px) rotate(10deg)}
  84%{transform:translateX(0) rotate(-4deg)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes chip-shuffle-r{
  0%{transform:translateX(0) rotate(0)}
  18%{transform:translateX(-78px) rotate(-14deg)}
  40%{transform:translateX(0) rotate(8deg)}
  62%{transform:translateX(-78px) rotate(-10deg)}
  84%{transform:translateX(0) rotate(4deg)}
  100%{transform:translateX(0) rotate(0)}
}
.chip.win{
  border-color:var(--zhu);color:var(--zhu);background:rgba(168,52,42,.08);
  box-shadow:0 0 0 3px rgba(168,52,42,.14),0 4px 14px rgba(168,52,42,.18);
  animation:chip-win .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes chip-win{
  0%{transform:scale(1)}
  45%{transform:scale(1.18)}
  100%{transform:scale(1.08)}
}
.draw-vs{font-size:12px;color:var(--ink-3,#8a8175);letter-spacing:2px}
.draw-result{
  margin-top:16px;font-size:19px;letter-spacing:2px;color:var(--zhu);
  opacity:0;transform:translateY(6px);
}
.draw-result.show{animation:result-in .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes result-in{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .chip.shuffling-l,.chip.shuffling-r{animation:none}
}