/* 出牌演出（js/timeline.js）：全部畫在 .juice-layer（fixed、z 60）裡，只動 transform／opacity／filter */

.juice-layer .tile { pointer-events: none; z-index: 2; }
.juice-layer .tile .tile-ab { display: none; }
.juice-layer .tile.spectral { filter: drop-shadow(0 0 8px rgba(150,200,255,.9)) saturate(.7) brightness(1.15); }
.juice-layer > div, .juice-layer .fx-clip > div { position: fixed; pointer-events: none; }
.juice-layer .fx-clip { overflow: hidden; border-radius: 4px; }
.juice-layer .fx-clip > div { position: absolute; inset: 0; }
.juice-layer .gold-bit { width: 6px; height: 3px; }

/* ── 異獸破框：去背主體浮出卡外（出牌、長按）；box 是放大後的尺寸，用 transform 縮回卡上 ── */
.juice-layer .hero { z-index: 5; transform-origin: 0 0; will-change: transform;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--fc) 75%, transparent)) drop-shadow(0 14px 14px rgba(0,0,0,.55)); }
.hero img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(0deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(0deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect; }
.juice-layer .hero.lunge { z-index: 4; transform-origin: 50% 55%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.juice-layer .hero-dim { inset: 0; z-index: 4; background: radial-gradient(70% 55% at 50% 50%, rgba(10,6,3,.5), rgba(10,6,3,.15) 70%, transparent); animation: bf-in .22s ease-out both; }
.juice-layer .hero-rays { width: 110vmin; height: 110vmin; z-index: 4; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,215,120,.26) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%);
  animation: bf-spin 7s linear infinite, bf-in .4s ease-out both; }
.juice-layer .hero-cap { z-index: 6; translate: -50% 0; display: grid; justify-items: center; gap: 3px; max-width: min(26rem, 84vw); text-align: center;
  color: #efe3c8; font: 500 .86rem/1.5 "Noto Serif TC", serif; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); animation: bf-rise .26s .08s ease-out both; }
.hero-cap small { color: #c9a24f; letter-spacing: .35em; font-size: .72rem; }
.hero-cap b { color: #fbf3e2; font: 900 clamp(1.3rem, 5vw, 1.9rem)/1.1 "Noto Serif TC", serif; letter-spacing: .2em; padding-left: .2em; text-shadow: 0 0 16px color-mix(in srgb, var(--fc, #c9a24f) 80%, transparent), 0 2px 4px #000; }
.hero-cap span { color: #ffe1a0; }
.hero-cap.quick { animation-duration: .18s; animation-delay: 0s; }
.hero-cap.quick b { font-size: clamp(1.1rem, 4.2vw, 1.5rem); }
/* 金卡經文：底下一道淡墨隨筆刷開，字一個個落在上面（逐字動畫在 timeline.js inkLine） */
.hero-cap .hero-line { position: relative; margin-top: 6px; padding: 3px .9em; color: #f8ecd2; letter-spacing: .14em;
  font: 700 clamp(.98rem, 4.3vw, 1.3rem)/1.5 "Noto Serif TC", serif; text-shadow: 0 0 10px rgba(0,0,0,.95), 0 1px 2px #000; }
.hero-cap .hero-line::before { content: ''; position: absolute; inset: 8% -4%; z-index: -1; border-radius: 40% 55% 45% 60% / 70% 60% 70% 60%;
  background: radial-gradient(farthest-side, rgba(10,6,4,.78) 55%, rgba(10,6,4,.4) 80%, transparent);
  transform-origin: 0 50%; animation: inkband var(--ink-ms, .8s) cubic-bezier(.3,.7,.3,1) var(--ink-delay, 0s) both; }
.hero-cap .hero-line i { display: inline-block; font-style: normal; }
@keyframes inkband { from { transform: scaleX(0); opacity: .2 } }
#app.board-screen .row-units .tile, #app.board-screen .row-units .tile img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* ── 領袖登場：橫貫全場的墨色長條 ── */
.juice-layer .leadershow { left: 0; right: 0; top: 50%; height: min(34vh, 230px); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 4vw; overflow: visible;
  background: linear-gradient(90deg, transparent, rgba(12,8,4,.9) 16%, rgba(12,8,4,.9) 84%, transparent); }
.leadershow::before, .leadershow::after { content: ''; position: absolute; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, #c9a24f, transparent); box-shadow: 0 0 12px rgba(255,200,110,.6); }
.leadershow::before { top: 0; } .leadershow::after { bottom: 0; }
.leadershow.opp { flex-direction: row-reverse; }
.ls-art { height: 135%; align-self: flex-end; max-width: 40vw; object-fit: contain; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--fc) 70%, transparent)) drop-shadow(0 10px 18px #000); }
.ls-txt { display: grid; gap: 6px; max-width: min(22rem, 48vw); color: #d9c9a6; font: 500 .9rem/1.6 "Noto Serif TC", serif; }
.ls-txt small { color: #c9a24f; letter-spacing: .4em; font-size: .78rem; }
.ls-txt b { color: #fbf3e2; font: 900 clamp(1.8rem, 6vw, 2.8rem)/1.1 "Noto Serif TC", serif; letter-spacing: .25em; text-shadow: 0 0 22px var(--fc), 0 2px 4px #000; }

/* ── 技能軌跡與受擊 ── */
.juice-layer .shot { width: 70px; height: 6px; border-radius: 99px; z-index: 4; }
.shot-war { background: linear-gradient(90deg, transparent, rgba(255,120,40,.5) 40%, #ffd9a0 85%, #fff); box-shadow: 0 0 10px rgba(255,120,40,.9), 0 0 22px rgba(255,60,20,.6); }
.shot-wucan { background: linear-gradient(90deg, transparent, rgba(180,70,220,.5) 40%, #f0c8ff 85%, #fff); box-shadow: 0 0 10px rgba(190,80,255,.9), 0 0 22px rgba(120,30,200,.6); }
.shot-strike { width: 96px; height: 10px; background: linear-gradient(90deg, transparent, rgba(220,40,30,.6) 40%, #ffb0a0 80%, #fff); box-shadow: 0 0 14px rgba(255,50,30,.95), 0 0 28px rgba(200,20,10,.6); }
.shot-sting { width: 36px; height: 3px; background: linear-gradient(90deg, transparent, #d6f07a 60%, #fff); box-shadow: 0 0 8px rgba(200,240,90,.9); }
.juice-layer .impact { width: 96px; height: 96px; border-radius: 50%; z-index: 4; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,250,230,.95) 0 12%, rgba(255,140,50,.75) 30%, transparent 65%); }
.impact.k-wucan { background: radial-gradient(circle, rgba(255,240,255,.95) 0 12%, rgba(180,70,230,.75) 30%, transparent 65%); }
.impact.k-strike { background: radial-gradient(circle, rgba(255,245,240,.95) 0 12%, rgba(230,40,30,.8) 32%, transparent 66%); }
.impact.k-sting { background: radial-gradient(circle, rgba(250,255,230,.95) 0 12%, rgba(190,230,80,.7) 30%, transparent 65%); }
.juice-layer .spark { width: 5px; height: 5px; border-radius: 50%; z-index: 4; background: #ffe2b0; box-shadow: 0 0 6px #ff9a40; }
.spark.k-wucan { background: #f3d6ff; box-shadow: 0 0 6px #b050ff; }
.spark.k-strike { background: #ffd0c8; box-shadow: 0 0 6px #ff3020; }
.spark.k-sting { background: #f0ffc0; box-shadow: 0 0 6px #b8e050; }
.juice-layer .slash { height: 5px; z-index: 4; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff 40%, #ff6040 60%, transparent); box-shadow: 0 0 14px #ff3020; }
.juice-layer .miasma { width: 55%; left: 0; filter: blur(6px); mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(140,210,90,.6) 40%, rgba(90,160,60,.4) 65%, transparent); }
.juice-layer .beam { background: linear-gradient(0deg, transparent, rgba(255,215,120,.65) 45%, rgba(255,245,210,.85) 55%, transparent); mix-blend-mode: screen; }
.juice-layer .mote { width: 6px; height: 6px; border-radius: 50%; z-index: 4; background: radial-gradient(circle, #fff, rgba(150,240,170,.9) 50%, transparent 72%); box-shadow: 0 0 8px rgba(130,230,160,.9); }
.juice-layer .maw { border-radius: 50%; z-index: 4; border: 4px solid rgba(25,10,6,.9); box-shadow: 0 0 0 8px rgba(110,25,15,.35), inset 0 0 18px rgba(0,0,0,.8); }
.juice-layer .pillar { z-index: 4; transform-origin: 50% 100%; border-radius: 45% 45% 12% 12%; filter: blur(2px); mix-blend-mode: screen;
  background: linear-gradient(0deg, rgba(255,90,20,.95), rgba(255,170,60,.85) 40%, rgba(255,230,150,.45) 75%, transparent); }
.juice-layer .ember { width: 4px; height: 4px; border-radius: 50%; z-index: 4; background: #ffc070; box-shadow: 0 0 6px #ff6a10; }
.juice-layer .soul { width: 14px; height: 14px; border-radius: 50%; z-index: 4; background: radial-gradient(circle, #fff 0 20%, rgba(170,210,255,.9) 42%, transparent 72%); box-shadow: 0 0 14px rgba(150,200,255,.95); }
.juice-layer .shock { width: 60px; height: 60px; border-radius: 50%; z-index: 4; border: 3px solid rgba(255,220,140,.95); box-shadow: 0 0 20px rgba(255,200,90,.8), inset 0 0 12px rgba(255,220,140,.7); }
.juice-layer .shard { width: 5px; height: 8px; z-index: 4; clip-path: polygon(50% 0, 100% 60%, 40% 100%, 0 40%); background: linear-gradient(160deg, #d4f5e4, #3a8f70); }

/* ── 飄字 ── */
.juice-layer .fnum { z-index: 6; font: 900 1.3rem/1 "Noto Serif TC", system-ui, serif; color: #ffe6a0; white-space: nowrap;
  text-shadow: 0 0 8px rgba(255,180,60,.95), 0 2px 3px #000, 0 0 2px #000; }
.juice-layer .fnum.dn { color: #ff9a8a; text-shadow: 0 0 8px rgba(220,40,30,.95), 0 2px 3px #000, 0 0 2px #000; }
@media (min-width: 700px) { .juice-layer .fnum { font-size: 1.6rem; } }

/* ── 回合結算 ── */
.juice-layer .rstamp { z-index: 6; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 10px; border: 4px solid currentColor;
  font: 900 3rem/1 "Noto Serif TC", serif; background: rgba(250,240,220,.08); box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.6); }
.rstamp.win { color: #e2483a; text-shadow: 0 0 14px rgba(255,90,60,.6); }
.rstamp.lose { color: #8ea4bc; }
.rstamp.tie { color: #d2bf98; }
.side-total.crowned { animation: bf-crown 1.4s ease-out; }

/* ── 開局擲幣 ── */
.juice-layer .coin-wrap { inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: 18px; perspective: 700px; }
.coin-wrap::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 50%, rgba(10,6,3,.6), rgba(10,6,3,.25)); animation: bf-in .3s ease-out both; }
.coin { position: relative; width: 112px; height: 112px; transform-style: preserve-3d; }
.cf { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font: 900 3rem/1 "Noto Serif TC", serif; color: #fbf3e2; text-shadow: 0 2px 3px rgba(0,0,0,.6);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc) 55%, color-mix(in srgb, var(--fc) 60%, #000));
  box-shadow: inset 0 0 0 5px #c9a24f, inset 0 0 0 8px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.6); }
.cf-b { transform: rotateY(180deg); }
.coin-label { font: 900 1.6rem/1 "Noto Serif TC", serif; letter-spacing: .3em; padding-left: .3em; color: #ffe1a0; text-shadow: 0 0 14px rgba(255,190,90,.7), 0 2px 3px #000; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.coin-wrap.done .coin-label { opacity: 1; transform: none; }

@keyframes bf-in { from { opacity: 0 } }
@keyframes bf-spin { to { rotate: 360deg } }
@keyframes bf-rise { from { opacity: 0; transform: translateY(8px) } }
@keyframes bf-crown { 0% { scale: 1 } 20% { scale: 1.45; filter: brightness(1.8) drop-shadow(0 0 14px #ffd27a) } 45% { scale: 1.1 } 100% { scale: 1 } }

/* ── 寬螢幕（≥900px）抽屜：浮在手牌上方的窄面板，不把桌面往上推（位置由 main.js placePop 寫入） ── */
.kz-drawer.kz-pop { transform: translateY(10px); opacity: 0; border-bottom: 1px solid #c9a24f; border-radius: 10px; padding: 4px 10px 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,180,.18); transition: transform .2s cubic-bezier(.22,.8,.2,1), opacity .18s ease; }
body.kz-drawer-open .kz-drawer.kz-pop { transform: none; opacity: 1; }
.kz-drawer.kz-pop .kz-drawer-handle { display: none; }
.kz-drawer.kz-pop .kz-drawer-title { font-size: .95rem; }
.kz-drawer.kz-pop .kz-drawer-body { overflow: auto; flex: 1 1 auto; min-height: 0; font-size: .82rem; }
.kz-drawer.kz-pop .kz-drawer-actions { padding-top: 4px; }
.kz-drawer.kz-pop .kz-drawer-actions .btn { min-height: 28px; padding: .25rem .6rem; font-size: .8rem; }

/* ── 出牌抽屜：固定三行，每行高度寫死（換牌時抽屜高度不變） ── */
.kz-drawer.kz-drawer-play .kz-drawer-title { display: flex; align-items: center; gap: .5em; min-width: 0; height: 1.3rem; }
.kz-play-name { flex: none; font-size: .95rem; color: #ffd88a; }
.kz-play-py { flex: none; margin-left: -.15em; font: 500 .62rem/1 "Kazhen Body", "Noto Serif TC", serif; color: #b9ab8c; letter-spacing: .02em; white-space: nowrap; }
.kz-play-tags { display: flex; align-items: center; gap: .3em; min-width: 0; overflow: hidden; font-size: .72rem; font-weight: 700; color: #e8dcc4; letter-spacing: 0; }
.kz-play-tags > span:not(.seal) { flex: none; padding: 0 .4em; line-height: 1.45; border: 1px solid rgba(201,162,79,.45); border-radius: 99px; background: rgba(0,0,0,.25); }
.kz-play-tags > .gold { color: #ffd88a; border-color: #c9a24f; }
.kz-play-tags .seal { flex: none; font-size: .9em; }
.kz-drawer-body .kz-play-ab { display: grid; grid-template-columns: auto 1fr; column-gap: .55em; align-items: start; margin: 0; height: 2.6em; line-height: 1.3; font-size: .76rem; }
.kz-play-ab > b { color: #ffd88a; white-space: nowrap; }
.kz-play-ab > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #e8dcc4; }
.kz-play-ab.none > b, .kz-play-ab.none > span { color: #a8977a; font-weight: 400; }
.kz-drawer-body .kz-play-lore { height: 1.35em; line-height: 1.35em; margin: 0; padding: 0 0 0 .4rem; border-left: 2px solid #b0452f;
  color: #e8d5b0; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 細看：接近全螢幕的大卡，知識欄放在卡下（寬螢幕放卡右） ── */
.modal { z-index: 31; }
.modal-scrim { background: radial-gradient(120% 90% at 50% 36%, rgba(48,26,12,.82), rgba(6,4,3,.95)); }
.modal .detail.big { width: min(560px, 96vw); max-height: 100dvh; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 10px calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: none; border: 0 !important; border-radius: 0; box-shadow: none; }
.modal .detail.big::-webkit-scrollbar { display: none; }
.detail.big .detail-card { position: relative; isolation: isolate; flex: none; width: min(80vw, 46dvh, 380px); margin: 0; }
.detail.big .detail-info { width: 100%; box-sizing: border-box; padding: 12px 16px 10px; border-radius: 12px;
  background: linear-gradient(rgba(28,14,8,.86), rgba(20,10,6,.93)), var(--tbl-sky, none) center / 256px;
  border: 1px solid var(--bronze); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 0 4px rgba(233,207,139,.22), 0 12px 30px rgba(0,0,0,.6); }
.detail.big .detail-x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0; line-height: 1;
  background: rgba(10,6,4,.6); border: 1px solid rgba(233,207,139,.45); color: #f3e3bf; font-size: 1.5rem; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .modal .detail.big { width: min(960px, 94vw); flex-direction: row; justify-content: center; gap: 32px; }
  .detail.big .detail-card { width: min(400px, 58dvh, 40vw); }
  .detail.big .detail-info { width: min(440px, 44vw); max-height: 88dvh; overflow-y: auto; }
}
/* 入場特效（main.js detailEntrance 掛上、播完即拆） */
.detail-card > .dt-glow, .detail-card > .dt-rays, .detail-card > .dt-ring { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: -1; border-radius: 50%; }
.detail-card > .dt-glow { width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%; background: radial-gradient(circle, rgba(255,226,150,.85), rgba(255,170,70,.35) 38%, transparent 68%); mix-blend-mode: screen; }
.detail-card > .dt-rays { width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,130,.38) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
.detail-card > .dt-ring { width: 120%; aspect-ratio: 1; margin: -60% 0 0 -60%; border: 3px solid rgba(255,220,140,.9); box-shadow: 0 0 24px rgba(255,200,110,.8), inset 0 0 18px rgba(255,200,110,.6); }
.detail-card > .dt-sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 4.5% / 3%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,246,220,.55) 50%, transparent 62%) no-repeat; background-size: 60% 100%; mix-blend-mode: soft-light; }

/* v51：撤銷 #app 常駐 will-change（整桌一張巨型合成層，每次重畫整層重鋪，反讓織錦更易閃失） */