/* ============================================================
   案上御兽 · 对战原型 v0 — 卡在案上, 兽出卡面 (零新图: 复用 HoloCard + kit 面板)
   ============================================================ */
/* 案面: 三端各一张专属图 (ui/arena/desk_*.webp, 上沿香炉+烛, 下沿砚/笔/印, 中央留空放卡) */
#arena { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; color: #EFE1BF;
  background: #14100c; }
#arena::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 70%, rgba(0,0,0,.45) 100%); }
#arena.shake { animation: deskShake .25s ease-out; }
@keyframes deskShake { 0%,100% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 3px -2px; } 75% { translate: -2px -1px; } }
#arena.hidden { display: none; }
body.in-arena #nav, body.in-arena #hud { visibility: hidden; }
#arena > * { position: relative; z-index: 1; }

.ar-top { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat, 0px) + 10px) 14px 6px; }
.ar-x { width: 40px; height: 40px; background: none center / 100% 100% no-repeat; color: #3a3129; font-weight: 900; font-size: 1.2rem; line-height: 38px; text-align: center; font-family: system-ui; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.ar-title { flex: 1; text-align: center; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; font-weight: 900; font-size: 1.05rem; letter-spacing: .18em; text-shadow: 0 1px 0 #000; }
.ar-title small { display: block; font-size: .6rem; letter-spacing: .12em; opacity: .65; font-weight: 700; }
.ar-right { display: flex; align-items: center; gap: 8px; }
.ar-round { font-size: .72rem; font-weight: 800; opacity: .8; text-align: right; font-variant-numeric: tabular-nums; }
.ar-spd { height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #EFE1BF; font-size: .7rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(239,225,191,.3); font-family: system-ui; }
#arena.x2 .ar-spd { background: #8B2E1E; box-shadow: inset 0 0 0 1px rgba(255,200,160,.5); }

/* 案面: 两排卡 */
.ar-desk { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 0; padding: 4px 12px 0; perspective: 900px; min-height: 0; }
.ar-row { display: flex; justify-content: center; gap: 10px; }
.ar-bench { display: flex; gap: 4px; min-width: 64px; }
.ar-bench.foe { justify-content: flex-end; }
.ac.bench { width: 38px !important; }
.ac.bench .ac-host { filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) brightness(.8); border-radius: 5px; }
.ac.bench .ac-host.hc .namecol { display: none; }   /* 替补太小, 名签不显, 只看牌面 */
.ar-bench .ac.bench + .ac.bench { margin-left: -14px; transform: rotate(7deg) translateY(3px); }   /* 两张替补叠成一叠 */
.ar-bench.foe .ac.bench + .ac.bench { transform: rotateX(20deg) rotate(-7deg) translateY(3px); }
.ac.bench .ac-hp, .ac.bench .ac-pips, .ac.bench .ac-name { display: none; }

.ar-bench.foe .ac.bench { transform: rotateX(20deg) scale(.92); filter: brightness(.85); }
.ac.enter { animation: enterSlide .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes enterSlide { from { transform: translateY(60px) scale(.5) rotateY(90deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.ar-row.foe .ac.enter { animation-name: enterSlideFoe; }
@keyframes enterSlideFoe { from { transform: translateY(-60px) scale(.5) rotateY(-90deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.ar-row.foe { transform: rotateX(9deg) scale(.92); transform-origin: 50% 100%; filter: brightness(.88); }
.ar-mid { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: rgba(239,225,191,.75); text-shadow: 0 1px 0 #000; }
.ar-mid > span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 单张卡位 — 小卡: 名签整体 transform 等比缩 (内部对齐与原卡完全一致, 五星全留); 只隐藏编号/铭牌/认证小字 */
.ac-host.hc .namecol { --s: clamp(.42, calc(var(--kf) * 3.3), 1); transform: translateY(-50%) scale(var(--s)); transform-origin: 0 50%; left: calc(var(--inx) * .45); }
.ac-host.hc .cardno, .ac-host.hc .jbcenter, .ac-host.hc .certwrap { display: none !important; }
/* 单张卡位 */
.ac { position: relative; width: var(--cw, min(31%, 118px)); flex: 0 0 auto; transition: transform .28s cubic-bezier(.2,1.2,.4,1), filter .25s; }
.ac-host { width: 100%; aspect-ratio: 5/7; border-radius: 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.ac-host.hc .l-subject img { transition: transform .22s cubic-bezier(.2,1.4,.4,1), filter .22s; transform-origin: 50% 80%; }
.ac-ghost { width: 100%; aspect-ratio: 5/7; border-radius: 12px; background: url('/static/ui/cardback.webp') center / cover; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #EFE1BF; text-shadow: 0 1px 0 #000; }
.ac-tap { position: absolute; inset: 0; background: transparent; border: 0; border-radius: 12px; pointer-events: none; }
.ac-hp { height: 5px; margin: 7px 6px 0; border-radius: 3px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(255,230,160,.18), 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.ac-hp i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #C9E86A, #5FC46A 60%, #3FA85A); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: width .35s; }
.ac-hp.low i { background: linear-gradient(90deg, #F2B135, #E4573D); }
.ac-pips { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.ac-pips i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2a20, #14100c); box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 1px 1px rgba(0,0,0,.6); transition: all .25s; }
.ac-pips i.on { background: radial-gradient(circle at 38% 32%, #fff3e0 0%, rgb(var(--ec)) 35%, rgba(var(--ec), .7) 100%); box-shadow: 0 0 7px rgba(var(--ec), .95), inset 0 -1px 2px rgba(0,0,0,.4); transform: scale(1.1); }
.ac-pips i.on.ult { animation: pipUlt .8s ease-in-out infinite alternate; }
@keyframes pipUlt { from { filter: drop-shadow(0 0 3px rgba(var(--ec), .8)) brightness(1); } to { filter: drop-shadow(0 0 9px rgba(var(--ec), 1)) brightness(1.35); transform: scale(1.2); } }
.ac-name { text-align: center; font-size: .68rem; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; letter-spacing: .04em; color: #F3E7C9; }
.ac-name em { display: none; }   /* 属性已在名签印上, 底部不重复 */

/* 状态: 出题中 / 可灌注 / 已灌注 */
.ac.asking .ac-host { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(var(--ec), .9)); }
.ac.asking { transform: translateY(-6px); }
#arena.injecting .ac.can { transform: translateY(-10px); }
#arena.injecting .ac.can .ac-host { animation: canPulse .9s ease-in-out infinite alternate; }
#arena.injecting .ac.can .ac-tap { pointer-events: auto; cursor: pointer; }
#arena.injecting .ac.can::before { content: ''; position: absolute; inset: -5px -5px auto -5px; aspect-ratio: 5/7; border-radius: 15px; border: 2px solid rgba(255,220,140,.9); box-shadow: 0 0 14px rgba(255,200,100,.7), inset 0 0 12px rgba(255,220,140,.35); pointer-events: none; z-index: 3; animation: ringPulse .9s ease-in-out infinite alternate; }
#arena.injecting .ac:not(.can) { filter: brightness(.45) saturate(.7); }
#arena.injecting .ar-mid, #arena.injecting .ar-bench { opacity: .35; }
@keyframes canPulse { from { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); } to { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,220,140,.9)) brightness(1.08); } }
@keyframes ringPulse { from { opacity: .55; transform: scale(1); } to { opacity: 1; transform: scale(1.03); } }
.ac.charged .ac-host { animation: charged .6s ease-out; }
@keyframes charged { 0% { transform: scale(1); } 30% { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(var(--ec), 1)) brightness(1.25); } 100% { transform: scale(1); } }

/* 出手: 卡前滑抬起, 兽跃出卡框 */
.ac.act { z-index: 5; }
.ar-row.mine .ac.act { transform: translateY(-22px) rotateX(-8deg); }
.ar-row.foe .ac.act { transform: translateY(18px) rotateX(-4deg) scale(1.04); }
.ac.act .ac-host.hc .l-subject img { transform: scale(1.32) translateY(-9%); filter: drop-shadow(0 0 10px rgba(var(--ec), .95)) drop-shadow(0 10px 8px rgba(0,0,0,.5)); }
.ac.act.glow .ac-host { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(var(--ec), 1)); }
.ac.act.ult .ac-host.hc .l-subject img { transform: scale(1.45) translateY(-12%); }
/* 受击: 后仰 + 抖 + 闪白 */
.ac.hit .ac-host { animation: hitShake .32s ease-out; }
.ac.hit .ac-host.hc { filter: brightness(1.7) contrast(1.08); transition: filter .05s; }
.ar-row.foe .ac.hit { transform: rotateX(14deg) translateY(-4px); }
.ar-row.mine .ac.hit { transform: rotateX(12deg) translateY(4px); }
@keyframes hitShake { 0%,100% { translate: 0 0; } 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
.ac.ke::after { content: '克'; position: absolute; right: -6px; top: 4%; width: 36px; height: 36px; border-radius: 7px; border: 2.5px solid #E4573D; color: #E4573D; font-weight: 900; font-size: 1.1rem; line-height: 31px; text-align: center; font-family: "Songti SC","STSong",serif; background: rgba(255,240,230,.85); transform: rotate(-12deg); animation: stamp .35s cubic-bezier(.2,1.6,.4,1) both; z-index: 6; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.ac.weak .ac-host { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) saturate(.6); }
.ac.weak .ac-float { opacity: .7; font-size: .95rem; }
.ac-spark { position: absolute; left: 50%; top: 42%; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(#fff, rgba(var(--ec), .9)); box-shadow: 0 0 6px rgba(var(--ec), 1); pointer-events: none; z-index: 6; animation: sparkOut .5s ease-out both; }
@keyframes sparkOut { from { transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) scale(.2); opacity: 0; } }
/* 属性特效贴图: screen 混合, 中心爆开 */
.ac-fx { position: absolute; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; translate: -50% -50%; background: center / contain no-repeat; mix-blend-mode: screen; pointer-events: none; z-index: 6; animation: fxBurst .6s cubic-bezier(.1,.9,.3,1) both; }
@keyframes fxBurst { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 25% { opacity: 1; } 60% { transform: scale(var(--k, 1)) rotate(0); opacity: .95; } 100% { transform: scale(calc(var(--k, 1) * 1.15)) rotate(6deg); opacity: 0; } }
.ac-ghost-img { position: absolute; inset: -3%; left: -3%; bottom: -3%; width: 106%; height: 106%; object-fit: cover; opacity: .45; filter: blur(1px) brightness(1.4); animation: ghostTrail .45s ease-out both; pointer-events: none; }
@keyframes ghostTrail { from { transform: scale(1.2) translate(-14%, -6%); opacity: .5; } to { transform: scale(1.32) translateY(-9%); opacity: 0; } }
/* 回合书法横幅 */
.ar-banner { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 15; display: flex; align-items: baseline; gap: 6px; font-family: "Songti SC","STSong","Noto Serif CJK SC","STKaiti","KaiTi",serif; color: #FFE9B0; text-shadow: 0 2px 0 #3a1a0a, 0 0 18px rgba(255,200,120,.6); pointer-events: none; animation: bannerIn .7s cubic-bezier(.2,1.3,.4,1) both; }
.ar-banner span { font-size: 1.1rem; font-weight: 700; opacity: .85; }
.ar-banner b { font-size: 3.2rem; font-weight: 900; line-height: 1; }
.ar-banner.out { animation: bannerOut .2s ease-in both; }
@keyframes bannerIn { from { transform: scale(2.4); opacity: 0; letter-spacing: .6em; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; letter-spacing: .1em; } }
@keyframes bannerOut { to { opacity: 0; transform: scale(.9) translateY(-10px); } }
/* 飘字: 逐字书法体入场 */
.ac-float { position: absolute; left: 50%; top: 8%; translate: -50% 0; display: flex; font-family: "Songti SC","STSong","Noto Serif CJK SC","STKaiti","KaiTi",serif; font-size: 1.3rem; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.7); animation: floatUp 1s ease-out both; pointer-events: none; z-index: 7; }
.ac-float i { font-style: normal; display: inline-block; animation: chIn .28s cubic-bezier(.2,1.6,.4,1) calc(var(--i) * 45ms) both; }
@keyframes chIn { from { transform: translateY(-14px) scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.ac-float.crit { font-size: 1.9rem; color: #FFD166; text-shadow: 0 2px 0 #7A3A10, 0 0 14px rgba(255,180,60,.9); }
.ac-float.sk { color: #9BE7FF; }
.ac-float.pip { color: #FFE9B0; font-size: 1.05rem; }
@keyframes floatUp { from { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
/* KO: 灰化盖下, 碎简飘出 */
.ac.ko { transform: scale(.9) translateY(6px); filter: grayscale(1) brightness(.55); }
.ac.ko .ac-name, .ac.ko .ac-pips { opacity: .4; }
.ac-slip { position: absolute; left: 50%; top: 50%; width: 8px; height: 16px; border-radius: 2px; background: linear-gradient(#EFE1BF, #C9A35C); box-shadow: 0 0 6px rgba(255,220,140,.9); animation: slipFly .8s ease-out var(--dl) both; pointer-events: none; }
@keyframes slipFly { from { opacity: 0; transform: translate(-50%, -50%) rotate(0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), -160px) rotate(200deg); } }
/* 胜: 卡竖起亮框 */
.ac.stand { transform: translateY(-10px) rotateX(-6deg); }
.ac.stand .ac-host { filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,220,140,.9)); }

/* 底板: 题板 / 灌注板 / 战报 */
.ar-board { flex: 0 0 auto; min-height: 200px; max-height: 40vh; padding: 8px 12px calc(var(--sab, 0px) + 12px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.ar-board > * { max-height: 100%; overflow-y: auto; }
#arena { overflow: hidden; }
@media (max-height: 700px) { .ar-top { padding-top: calc(var(--sat, 0px) + 6px); padding-bottom: 2px; } .ar-board { min-height: 176px; max-height: 32vh; padding-top: 6px; } .qb-q { font-size: .84rem; margin-bottom: 6px; } .qb-opts .qo { padding: 6px 8px; font-size: .78rem; } .qb-decay { margin: 8px 0 6px; } }
.qb, .ib, .pb { background: none center / cover; border-radius: 16px; padding: 12px 14px; color: #2b2118; box-shadow: 0 -6px 24px rgba(0,0,0,.45), inset 0 0 0 2px rgba(120,90,50,.35); animation: boardIn .3s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes boardIn { from { transform: translateY(30px); opacity: 0; } }
.qb-head { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; }
.qb-subj { padding: 2px 10px; border-radius: 999px; background: rgb(var(--ec)); color: #fff; }
.qb-who { flex: 1; color: #6b5a45; }
.qb-skip { font-size: .72rem; font-weight: 800; color: #6b5a45; padding: 4px 10px; border-radius: 999px; border: 1.5px solid rgba(107,90,69,.4); background: transparent; }
.qb-decay { position: relative; height: 8px; margin: 10px 0 8px; border-radius: 4px; background: rgba(0,0,0,.12); overflow: visible; }
.qb-decay i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #F2B135, #FFD166); transition: width .1s linear; }
.qb-decay i[data-g="2"] { background: linear-gradient(90deg, #C9A35C, #E0C080); } .qb-decay i[data-g="1"] { background: #B9A88A; }
.qb-decay span { position: absolute; right: 0; top: -20px; font-size: .78rem; font-weight: 900; color: #7A5A1E; font-variant-numeric: tabular-nums; }
.qb-q { font-size: .88rem; line-height: 1.45; font-weight: 700; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qb-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qb-opts .qo { padding: 9px 10px; font-size: .82rem; background: rgba(255,255,255,.7); border-radius: 12px; }
.qb-opts .qo i { width: 20px; height: 20px; font-size: .66rem; }
.ib { text-align: center; }
.ib-pips { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.ib-pips i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE9B0, #F2B135 60%, #C98A12); box-shadow: 0 0 10px rgba(242,177,53,.9); animation: pipBob .8s ease-in-out infinite alternate; }
.ib-pips i:nth-child(2) { animation-delay: .15s; } .ib-pips i:nth-child(3) { animation-delay: .3s; }
@keyframes pipBob { to { transform: translateY(-5px); } }
.ib-txt { font-size: .95rem; font-weight: 800; } .ib-txt b { color: #C98A12; font-size: 1.2rem; }
.ib-sub { font-size: .7rem; color: #6b5a45; margin: 6px 0 8px; }
.pb { min-height: 120px; }
.pb-log p { margin: 0; font-size: .78rem; line-height: 1.7; font-weight: 700; color: #2b2118; }
.pb-log p + p { opacity: .55; }
.pb-log p + p + p { opacity: .35; }

/* 必杀切入: 卡面滑入 + 原文 */
.ar-cutin { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.85)); }
.ar-cutin.hidden { display: none; }
.ci-card { width: 42%; max-width: 220px; aspect-ratio: 5/7; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 3px rgba(var(--ec), .9), 0 0 40px rgba(var(--ec), .8), 0 20px 40px rgba(0,0,0,.7); transform: translateX(-120%) rotate(-6deg); }
.ci-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-text { flex: 1; transform: translateX(120%); opacity: 0; }
.ci-text b { display: block; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; font-size: 1.5rem; font-weight: 900; letter-spacing: .12em; color: #FFE9B0; text-shadow: 0 0 14px rgba(var(--ec), 1), 0 2px 0 #000; margin-bottom: 8px; }
.ci-text span { display: block; font-size: .78rem; line-height: 1.7; color: rgba(239,225,191,.9); font-family: "Songti SC","STSong",serif; }
.ar-cutin.in .ci-card { animation: ciCard 1.3s cubic-bezier(.2,1,.3,1) both; }
.ar-cutin.in .ci-text { animation: ciText 1.3s cubic-bezier(.2,1,.3,1) .15s both; }
.ar-cutin.out { animation: ciOut .3s ease-in both; }
@keyframes ciCard { 0% { transform: translateX(-120%) rotate(-6deg); } 28% { transform: translateX(0) rotate(-3deg) scale(1.04); } 85% { transform: translateX(0) rotate(-3deg) scale(1); } 100% { transform: translateX(-4%) rotate(-3deg) scale(1.02); } }
@keyframes ciText { 0% { transform: translateX(120%); opacity: 0; } 30% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes ciOut { to { opacity: 0; transform: scale(1.06); } }

/* 结算 */
.ar-end { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.ar-end.hidden { display: none; }
.end-box { background: none center / cover; border-radius: 20px; padding: 24px 28px; text-align: center; color: #2b2118; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: boardIn .35s cubic-bezier(.2,1.2,.4,1) both; }
.ar-end { flex-direction: column; gap: 18px; }
.end-stamp { width: 132px; height: 132px; border: 6px solid #B8321E; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #B8321E; font-family: "Songti SC","STSong","Noto Serif CJK SC","STKaiti","KaiTi",serif; font-size: 5.2rem; font-weight: 900; line-height: 1; transform: rotate(-9deg); background: radial-gradient(circle at 30% 30%, rgba(255,240,230,.18), rgba(0,0,0,0) 70%); box-shadow: inset 0 0 0 2px rgba(184,50,30,.35), 0 0 0 3px rgba(184,50,30,.15); -webkit-mask: radial-gradient(circle at 20% 80%, transparent 0 4%, #000 5%), radial-gradient(circle at 78% 22%, transparent 0 3%, #000 4%); -webkit-mask-composite: source-in; mask-composite: intersect; animation: stampDown .5s cubic-bezier(.2,1.6,.4,1) .15s both; }
.end-stamp.lose { border-color: #6b5a45; color: #6b5a45; } .end-stamp.draw { border-color: #1e8f86; color: #1e8f86; }
@keyframes stampDown { from { transform: rotate(-9deg) scale(3); opacity: 0; } 70% { opacity: 1; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
.end-box p { font-size: .82rem; color: #6b5a45; margin: 0 0 14px; }
.end-btns { display: flex; gap: 10px; justify-content: center; }
.end-btns .btn-ghost { height: 42px; padding: 0 18px; font-size: .84rem; }

/* 宽屏: 案更宽, 卡更大, 底板靠右 */
/* Pad 竖: 仍上下布局, 卡放大 */
@media (min-width: 600px) and (orientation: portrait) {
  .ac.bench { width: 64px; }
  .ac { width: min(26%, 176px); }
  .ar-row { gap: 20px; }
  .ar-board { max-height: 34vh; padding: 12px 40px calc(var(--sab, 0px) + 20px); }
}
/* 横屏宽: 案在左, 底板在右 */
@media (min-width: 900px) and (orientation: landscape) {
  #arena { flex-direction: row; }
  .ac.bench { width: 56px !important; }
  .ar-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
  .ar-desk { flex: 1; padding: 70px 30px 20px; gap: 14px; }
  .ar-row { gap: 18px; }
  .ac { width: var(--cw, min(24%, 170px)); }
  .ar-board { flex: 0 0 360px; max-height: none; display: flex; align-items: flex-end; padding: 70px 20px 24px 0; }
  .ar-board > * { width: 100%; }
}

/* ===== 同屋对决 (面对面): 乙方题板在顶部旋转 180°, 甲方在底; 敌排不再后仰 (对面的人正对着看) ===== */
#arena .ar-board.foe { display: none; }
#arena.f2f .ar-board.foe { display: flex; transform: rotate(180deg); padding: 8px 12px calc(var(--sat, 0px) + 10px); min-height: 176px; max-height: 32vh; }
#arena.f2f .ar-board { min-height: 176px; max-height: 32vh; }
/* 面对面: 顶栏收成中缝上的两个小钮 (退出 / 速度), 不占行, 不压卡 */
#arena.f2f .ar-top { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 4; padding: 0 6px; pointer-events: none; height: 0; overflow: visible; }
#arena.f2f .ar-top .ar-title, #arena.f2f .ar-top .ar-round { display: none; }
#arena.f2f .ar-top .ar-x { pointer-events: auto; width: 30px; height: 30px; line-height: 28px; font-size: 1rem; }
#arena.f2f .ar-top .ar-right { margin-left: auto; }
#arena.f2f .ar-top .ar-spd { pointer-events: auto; height: 22px; font-size: .62rem; }
#arena.f2f .ar-mid { height: 32px; padding: 0 40px; }
#arena.f2f .ar-row.foe { transform: none; filter: none; }
#arena.f2f .ar-row.foe .ac { transform: rotate(180deg); }
#arena.f2f .ar-row.foe .ac.act { transform: rotate(180deg) translateY(-22px) rotateX(-8deg); }
#arena.f2f .ar-row.foe .ac.hit { transform: rotate(180deg) rotateX(12deg) translateY(4px); }
#arena.f2f .ar-bench.foe .ac.bench { transform: rotate(180deg) scale(.92); }
#arena.f2f .ar-desk { padding-top: 0; }
#arena.f2f .ar-end { flex-direction: row; gap: 24px; }
#arena.f2f .end-stamp { font-size: 4.2rem; }
#arena.f2f.injecting .ar-mid { opacity: 1; }

/* 山神卡: 略大 + 金光 */
.ac.is-god { transform: scale(1.12); z-index: 2; }
.ac.is-god .ac-host { filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,200,100,.7)); }
.ac.is-god .ac-name { color: #FFD166; }

/* ===== kit3 · 明亮国风 (UIKIT_SPEC_v2) ===== */
.end-stamp { border: 0; border-radius: 0; box-shadow: none; -webkit-mask: none; mask: none; background: url('/static/ui/kit3/seal_win.webp') center / contain no-repeat; width: 168px; height: 168px; color: transparent; font-size: 0; transform: none; filter: drop-shadow(0 6px 10px rgba(120,30,10,.35)); }
.end-stamp.lose { background-image: url('/static/ui/kit3/seal_lose.webp'); } .end-stamp.draw { background-image: url('/static/ui/kit3/seal_draw.webp'); }
.end-stamp b { display: none; }
@keyframes stampDown { from { transform: scale(2.6); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.ac.ke::after { content: ''; border: 0; border-radius: 0; background: url('/static/ui/kit3/seal_ke.webp') center / contain no-repeat; width: 30px; height: 46px; line-height: 0; font-size: 0; transform: none; }
.ac.rite::before { content: ''; width: 34px; height: 60px; padding: 0; background: url('/static/ui/kit3/seal_rite.webp') center / contain no-repeat; font-size: 0; transform: none; top: -8px; }
.qb, .ib, .pb, .end-box { background: none; border-radius: 0; box-shadow: none; border: 0; border-image: url('/static/ui/kit3/panel_body.webp') 40 40 40 40 fill / 20px 20px 20px 20px stretch; padding: 16px 16px 18px; color: #2B4A4A; filter: drop-shadow(0 -6px 18px rgba(0,0,0,.35)); }
.end-box { padding: 26px 30px 26px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.end-box p { color: #4f6b62; }
.qb-skip { border: 0; border-radius: 0; background: url('/static/ui/kit3/btn_white.webp') center / 100% 100% no-repeat; padding: 6px 14px 8px; color: #2B4A4A; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.end-btns .btn-ghost { border: 0; border-radius: 0; background: url('/static/ui/kit3/btn_white.webp') center / 100% 100% no-repeat; color: #2B4A4A; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; font-weight: 900; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); padding: 0 22px 3px; }
.end-btns #end-again { background-image: url('/static/ui/kit3/btn_gold.webp'); color: #fff; text-shadow: 0 1px 2px rgba(120,60,0,.55); }
.ar-spd { border-radius: 0; background: url('/static/ui/kit3/chip_jade.webp') center / 100% 100% no-repeat; box-shadow: none; color: #1e5a48; padding: 0 12px 2px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
#arena.x2 .ar-spd { background-image: url('/static/ui/kit3/btn_gold.webp'); color: #fff; box-shadow: none; text-shadow: 0 1px 2px rgba(120,60,0,.55); }
.qb-subj { border-radius: 0; background: url('/static/ui/kit3/btn_gold.webp') center / 100% 100% no-repeat; padding: 3px 12px 5px; color: #fff; text-shadow: 0 1px 2px rgba(120,60,0,.5); }
.qb-who { color: #4f6b62; } .qb-decay { background: rgba(43,74,74,.12); } .qb-opts .qo { background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1.5px rgba(210,170,90,.5); }
.pb-log p { color: #2B4A4A; } .ib-sub { color: #4f6b62; }
.ar-x { background: url('/static/ui/kit3/btn_close.webp') center / contain no-repeat; color: transparent; width: 44px; height: 44px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.ar-banner { padding: 10px 46px 14px; background: url('/static/ui/kit3/tab_white.webp') center / 100% 100% no-repeat; text-shadow: none; color: #2B4A4A; }
@media (max-height: 700px) { .qb, .ib, .pb { padding: 14px 12px 16px; } .ar-board { max-height: 36vh; } }
/* ===== kit2 批次二: 7 色玉印珠 (nano 生成) ===== */
.ac-pips i { width: 16px; height: 16px; border-radius: 0; background: url('/static/ui/kit2/pip_metal.webp') center / contain no-repeat; box-shadow: none; filter: grayscale(.8) brightness(.5); transition: filter .25s, transform .25s; }
.ac[data-el="wood"] .ac-pips i, .ac[data-el="wood"] .ac-pips i.on { background-image: url('/static/ui/kit2/pip_wood.webp'); }
.ac[data-el="water"] .ac-pips i, .ac[data-el="water"] .ac-pips i.on { background-image: url('/static/ui/kit2/pip_water.webp'); }
.ac[data-el="fire"] .ac-pips i, .ac[data-el="fire"] .ac-pips i.on { background-image: url('/static/ui/kit2/pip_fire.webp'); }
.ac[data-el="earth"] .ac-pips i, .ac[data-el="earth"] .ac-pips i.on { background-image: url('/static/ui/kit2/pip_earth.webp'); }
.ac[data-el="light"] .ac-pips i, .ac[data-el="light"] .ac-pips i.on { background-image: url('/static/ui/kit2/pip_light.webp'); }
.ac[data-el="dark"] .ac-pips i, .ac[data-el="dark"] .ac-pips i.on { background-image: url('/static/ui/kit2/pip_dark.webp'); }
.ac-pips i.on { background-image: url('/static/ui/kit2/pip_metal.webp'); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(var(--ec), .8)) brightness(1.08); transform: scale(1.1); box-shadow: none; }
.ac[data-el="metal"] .ac-pips i { background-image: url('/static/ui/kit2/pip_metal.webp'); }

.ac-pips i { position: relative; }
.ib-pips i { border-radius: 0; background: url('/static/ui/kit2/pip_light.webp') center / contain no-repeat; box-shadow: none; width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(242,177,53,.9)); }
/* 关闭: 铜环玉扣 */
/* 回合横幅底: 卷轴 */
.ac-pips { gap: 2px; }
/* 山神 (合成单位, 无卡图): 山神面具 + 名 */
.ac-god { position: absolute; inset: 0; border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, rgba(var(--ec), .55), rgba(20,12,8,.95) 70%); box-shadow: inset 0 0 0 2px rgba(255,220,150,.35), 0 0 24px rgba(var(--ec), .6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.ac-god-mask { width: 68%; aspect-ratio: 1; background: url('/static/ui/kit2/icon_godmask.webp') center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); animation: godBreath 2.4s ease-in-out infinite alternate; }
.ac-god b { font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; color: #FFE9B0; font-size: .8rem; letter-spacing: .08em; text-shadow: 0 1px 0 #000; }
.ac-god small { font-size: .58rem; color: rgba(239,225,191,.75); }
@keyframes godBreath { to { transform: scale(1.06) translateY(-2%); } }
.ac.act .ac-god-mask { transform: scale(1.3) translateY(-8%); animation: none; }
/* 祠礼破: boss 头顶朱印 */
.qb.rite .qb-q { font-size: .92rem; }
.ac.she::after { content: ''; position: absolute; inset: 6% 8%; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(116,84,214,.55), inset 0 0 14px rgba(116,84,214,.5); pointer-events: none; z-index: 5; animation: sheWrap 1.6s ease-in-out infinite alternate; }
@keyframes sheWrap { to { box-shadow: inset 0 0 0 3px rgba(116,84,214,.85), inset 0 0 20px rgba(116,84,214,.7); } }