/* ============================================================
   css/gwent-fx.css — 百局牌谈：区域入口 + 落牌/技能特效 + 面板
   ------------------------------------------------------------
   全部为纯表现层：不参与任何规则判定，pointer-events:none 不挡操作，
   动画节点由 JS 定时自清，prefers-reduced-motion 下整体降级。
   ============================================================ */

/* ---------- 牌库 / 弃牌堆紧凑入口 ---------- */
.gw-side-total { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gw-pile { display: inline-flex; align-items: center; gap: 2px; font-size: 0.7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 246, 227, 0.28);
    background: rgba(61, 47, 31, 0.35); color: #f0e2c8; line-height: 1.6; }
/* 弃牌堆入口：升级为主按钮观感（更大的点击域 + 文字标签），一眼可辨 */
.gw-pile--disc { cursor: pointer; font-family: inherit; font-size: 0.72rem; padding: 3px 10px;
    border: 1.5px solid rgba(244, 195, 77, 0.55); background: rgba(140, 96, 32, 0.5); color: #ffe9b8; }
.gw-pile--disc b { color: #ffd9a0; font-size: 0.8rem; }
.gw-pile--disc:hover { background: rgba(201, 162, 39, 0.55); color: #fff6e3; border-color: #f4c34d; }
.gw-pile--disc:active { transform: scale(0.94); }
.gw-pile-flash { animation: gw-pile-pop 0.5s ease; }
@keyframes gw-pile-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); background: #c9a227; } 100% { transform: scale(1); } }

/* ---------- 特效层 / 落牌飞行 / 飘字 ---------- */
.gw-fx { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.gw-fx-ghost { position: absolute; left: 0; top: 0; transform-origin: center center;
    transition: transform 0.42s cubic-bezier(0.22, 0.68, 0.35, 1), opacity 0.42s ease-out; opacity: 0.95;
    will-change: transform, opacity; }
.gw-fx-ghost > svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(30, 20, 8, 0.45)); }
.gw-fx-fly--hero { filter: drop-shadow(0 0 10px #f4c34d) drop-shadow(0 8px 12px rgba(30, 20, 8, 0.5)); }
.gw-fx-fly--medic { filter: drop-shadow(0 0 10px #7fd09a) drop-shadow(0 8px 12px rgba(30, 20, 8, 0.45)); }
.gw-fx-fly--spy { filter: drop-shadow(0 0 10px #6a6fa8) drop-shadow(0 8px 12px rgba(30, 20, 8, 0.45)); }
.gw-fx-fly--scorch { filter: drop-shadow(0 0 10px #ff8a4a) drop-shadow(0 8px 12px rgba(30, 20, 8, 0.45)); }
.gw-fx-fly--muster { filter: drop-shadow(0 0 10px #ffab5e) drop-shadow(0 8px 12px rgba(30, 20, 8, 0.45)); }
.gw-fx-fly--draw { transition-duration: 0.38s; }

.gw-fx-float { position: absolute; transform: translate(-50%, -50%); font-size: 0.92rem; font-weight: 800;
    text-shadow: 0 2px 4px rgba(30, 20, 8, 0.75); pointer-events: none; white-space: nowrap;
    animation: gw-float-up 0.95s ease-out forwards; }
.gw-fx-float--up { color: #ffd257; }
.gw-fx-float--dn { color: #ff8f80; }
@keyframes gw-float-up {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
    25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* ---------- 落地：按真实类别给出不同反馈 ---------- */
.gw-land { animation: gw-land-base 0.52s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes gw-land-base {
    0% { transform: scale(0.55) translateY(-14px); opacity: 0.2; }
    55% { transform: scale(1.14) translateY(0); opacity: 1; }
    100% { transform: scale(1); }
}
.gw-land--hero { animation: gw-land-hero 0.62s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes gw-land-hero {
    0% { transform: scale(0.5) translateY(-22px); filter: brightness(2.2); }
    45% { transform: scale(1.22); filter: brightness(1.6) drop-shadow(0 0 14px #f4c34d); }
    100% { transform: scale(1); filter: none; }
}
.gw-land--medic { animation: gw-land-medic 0.6s ease-out; }
@keyframes gw-land-medic { 0% { transform: scale(0.55) translateY(-12px); } 50% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(127, 208, 154, 0.85); border-radius: 12px; } 100% { transform: scale(1); box-shadow: none; } }
.gw-land--spy { animation: gw-land-spy 0.6s ease-out; }
@keyframes gw-land-spy { 0% { transform: scale(0.55) translateX(18px); filter: brightness(0.35); } 45% { filter: brightness(1.5); } 100% { transform: scale(1); filter: none; } }
.gw-land--scorch { animation: gw-land-scorch 0.6s ease-out; }
@keyframes gw-land-scorch { 0% { transform: scale(0.55); } 50% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255, 138, 74, 0.9); border-radius: 12px; } 100% { transform: scale(1); box-shadow: none; } }
.gw-land--muster { animation: gw-land-muster 0.6s ease-out; }
@keyframes gw-land-muster { 0% { transform: scale(0.5) translateY(-10px); } 50% { transform: scale(1.16); box-shadow: 0 0 0 4px rgba(255, 171, 94, 0.85); border-radius: 12px; } 100% { transform: scale(1); box-shadow: none; } }
.gw-land--horn { animation: gw-land-horn 0.6s ease-out; }
@keyframes gw-land-horn { 0% { transform: scale(0.55); } 50% { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(244, 195, 77, 0.9); border-radius: 12px; } 100% { transform: scale(1); box-shadow: none; } }
.gw-land--alchemy, .gw-land--berserker, .gw-land--mardroeme { animation: gw-land-alchemy 0.6s ease-out; }
@keyframes gw-land-alchemy { 0% { transform: scale(0.55) rotate(-12deg); } 50% { transform: scale(1.16) rotate(4deg); box-shadow: 0 0 0 4px rgba(154, 122, 176, 0.9); border-radius: 12px; } 100% { transform: scale(1); box-shadow: none; } }
.gw-land--avenger { animation: gw-land-avenger 0.6s ease-out; }
@keyframes gw-land-avenger { 0% { transform: scale(0.5); } 40% { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(176, 67, 47, 0.9); border-radius: 12px; } 100% { transform: scale(1); box-shadow: none; } }
.gw-land--weather { animation: gw-land-base 0.52s ease-out; }
.gw-land--agile, .gw-land--decoy, .gw-land--tactic { animation: gw-land-shift 0.6s ease-out; }
@keyframes gw-land-shift { 0% { transform: scale(0.55) translateX(16px); } 50% { transform: scale(1.12) translateX(-3px); } 100% { transform: scale(1); } }

/* ---------- 战力数值跳动 ---------- */
.gw-pw-up { animation: gw-pw-up 0.56s ease-out; }
@keyframes gw-pw-up { 0% { transform: scale(1); } 35% { transform: scale(1.42); color: #ffd257; } 100% { transform: scale(1); } }
.gw-pw-dn { animation: gw-pw-dn 0.56s ease-out; }
@keyframes gw-pw-dn { 0% { transform: scale(1); } 35% { transform: scale(0.72); color: #ff8f80; } 100% { transform: scale(1); } }

/* ---------- 战斗排上的效果反馈（由真实事件触发） ---------- */
.gw-fx-weather { animation: gw-rowfx 0.82s ease-out 2; --fx-c: 150, 205, 235; --fx-i: 0.34; }
.gw-fx-clear { animation: gw-rowfx 0.72s ease-out; --fx-c: 255, 236, 176; --fx-i: 0.4; }
.gw-fx-scorch { animation: gw-rowfx-scorch 0.78s ease-out; }
.gw-fx-horn { animation: gw-rowfx 0.76s ease-out; --fx-c: 244, 195, 77; --fx-i: 0.42; }
.gw-fx-heal { animation: gw-rowfx 0.78s ease-out; --fx-c: 127, 208, 154; --fx-i: 0.4; }
.gw-fx-muster { animation: gw-rowfx 0.78s ease-out; --fx-c: 255, 171, 94; --fx-i: 0.4; }
.gw-fx-alchemy { animation: gw-rowfx 0.76s ease-out; --fx-c: 170, 130, 200; --fx-i: 0.4; }
.gw-fx-spy { animation: gw-rowfx-spy 0.76s ease-out; }
.gw-fx-avenger { animation: gw-rowfx-scorch 0.76s ease-out; }
.gw-fx-tactic { animation: gw-rowfx 0.7s ease-out; --fx-c: 176, 190, 120; --fx-i: 0.32; }
@keyframes gw-rowfx {
    0% { box-shadow: inset 0 0 0 rgba(var(--fx-c), 0); }
    40% { box-shadow: inset 0 0 30px rgba(var(--fx-c), 0.85); background-color: rgba(var(--fx-c), var(--fx-i)); }
    100% { box-shadow: inset 0 0 0 rgba(var(--fx-c), 0); background-color: rgba(255, 248, 235, 0.18); }
}
@keyframes gw-rowfx-spy {
    0% { box-shadow: inset 0 0 0 rgba(40, 30, 70, 0); }
    35% { box-shadow: inset 0 0 34px rgba(50, 40, 90, 0.9); background-color: rgba(60, 50, 100, 0.35); }
    100% { box-shadow: inset 0 0 0 rgba(40, 30, 70, 0); background-color: rgba(255, 248, 235, 0.18); }
}
@keyframes gw-rowfx-scorch {
    0% { box-shadow: inset 0 0 0 rgba(255, 120, 50, 0); }
    25% { box-shadow: inset 0 0 34px rgba(255, 150, 60, 0.95); background-color: rgba(220, 90, 40, 0.42); }
    60% { box-shadow: inset 0 0 20px rgba(255, 120, 50, 0.5); background-color: rgba(220, 110, 50, 0.2); }
    100% { box-shadow: inset 0 0 0 rgba(255, 120, 50, 0); background-color: rgba(255, 248, 235, 0.18); }
}

/* ---------- 弃牌堆面板 ---------- */
.gw-grave { background: #fff8ec; border: 2px solid #6b4a2f; border-radius: 16px; padding: 12px;
    width: min(560px, 94vw); max-height: min(74vh, 560px); display: flex; flex-direction: column;
    box-shadow: 0 16px 40px rgba(40, 26, 10, 0.45); color: #4a3a2a; }
.gw-grave-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gw-grave-head h4 { margin: 0; font-size: 0.98rem; color: #6b4a2f; }
.gw-grave-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
    overflow-y: auto; padding: 4px 4px 8px; min-height: 0; }
.gw-grave-cell { position: relative; background: #fffdf6; border: 1px solid #e0d0b0; border-radius: 10px;
    padding: 4px 3px 6px; text-align: center; cursor: pointer; }
.gw-grave-cell:hover { background: #fdf0d8; border-color: #c9a86a; }
.gw-grave-svg { width: 100%; height: auto; display: block; }
.gw-grave-nm { font-size: 0.66rem; font-weight: 700; color: #4a3a2a; line-height: 1.25; margin-top: 2px; word-break: break-all; }
.gw-grave-meta { font-size: 0.58rem; color: #9a8560; line-height: 1.2; }
.gw-grave-cls { position: absolute; top: 2px; left: 2px; font-size: 0.52rem; color: #fff;
    border-radius: 5px; padding: 0 4px; opacity: 0.92; }
.gw-grave-empty { color: #9a8560; font-size: 0.8rem; line-height: 1.6; padding: 18px 6px; }

/* ---------- 音效 / 动画设置面板 ---------- */
.gw-cfg { background: #fff8ec; border: 2px solid #6b4a2f; border-radius: 16px; padding: 12px;
    width: min(360px, 92vw); box-shadow: 0 16px 40px rgba(40, 26, 10, 0.45); color: #4a3a2a; }
.gw-cfg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gw-cfg-head h4 { margin: 0; font-size: 0.98rem; color: #6b4a2f; }
.gw-cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 2px; border-bottom: 1px dashed #e0d0b0; font-size: 0.86rem; }
.gw-cfg-row .gb-btn { min-width: 56px; }
.gw-cfg-note { margin-top: 8px; font-size: 0.72rem; line-height: 1.55; }

/* ---------- 开局调度：把次数讲清楚 ---------- */
.gw-mull-txt { flex: 1; }
.gw-mull-txt b { color: #ffd9a0; }

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
    .gw-fx { display: none; }
    .gw-land, .gw-land--hero, .gw-land--medic, .gw-land--spy, .gw-land--scorch, .gw-land--muster,
    .gw-land--horn, .gw-land--alchemy, .gw-land--berserker, .gw-land--mardroeme, .gw-land--avenger,
    .gw-land--weather, .gw-land--agile, .gw-land--decoy, .gw-land--tactic,
    .gw-pw-up, .gw-pw-dn, .gw-fx-weather, .gw-fx-clear, .gw-fx-scorch, .gw-fx-horn, .gw-fx-heal,
    .gw-fx-muster, .gw-fx-alchemy, .gw-fx-spy, .gw-fx-avenger, .gw-fx-tactic { animation: none !important; }
}

/* ---------- 窄屏：入口更紧凑，面板改为贴底可滚动 ---------- */
@media (max-width: 560px) {
    .gw-side-total { gap: 4px; }
    .gw-pile { padding: 1px 5px; font-size: 0.6rem; }
    .gw-grave { width: 96vw; max-height: 82vh; }
    .gw-grave-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .gw-cfg-row { padding: 6px 2px; font-size: 0.8rem; }
}

/* ============================================================
   UI 优化增量：领袖显示 / 侧栏头像按钮 / 弃权手牌态 / 卡组详情入口
   ============================================================ */

/* 侧栏领袖头像 → 按钮（点击看领袖牌详情；已用打角标） */
.gw-side-ava--btn { position: relative; padding: 0; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.gw-side-ava--btn:hover { transform: scale(1.08); box-shadow: 0 0 8px rgba(244, 195, 77, 0.75); }
.gw-ava-used { position: absolute; right: -5px; bottom: -4px; font-size: 0.56rem; font-weight: 700;
    color: #fff6e3; background: #8a6d3b; border: 1px solid #6b4a2f; border-radius: 999px; padding: 0 4px; }

/* 行动条领袖按钮：领袖头像 + 名称/状态两行 */
.gw-act-leader { display: inline-flex; align-items: center; gap: 7px; text-align: left; flex: 0 0 auto; max-width: 220px; }
.gw-act-leader-ava { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden;
    border: 1.5px solid #f4c34d; background: #fff6e3; display: flex; align-items: center; justify-content: center; }
.gw-act-leader-ava .gw-svg, .gw-act-leader-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-act-leader-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gw-act-leader-txt b { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-act-leader-txt i { font-style: normal; font-size: 0.64rem; opacity: 0.85; white-space: nowrap; }

/* 弃权后手牌：半透明禁用态（仍可点开详情 / 悬停摘要） */
.gw-hcard--passed { opacity: 0.55; cursor: help; }
.gw-hcard--passed:hover { transform: translateY(-4px); opacity: 0.9; }
.gw-hand-passed--bar { width: 100%; padding: 2px 0 4px; font-size: 0.72rem; }

/* 领袖面板技能描述字号（原 gw-detail-meta 偏小） */
.gw-leader-panel .gw-detail-meta { font-size: 0.88rem; line-height: 1.55; color: #4a3a2a; }

/* 我的卡组：当前卡组列表详情按钮 / 领袖选择详情角标 */
.gw-deck-cur-info { font-size: 0.68rem; padding: 0 7px; line-height: 1.5; border-radius: 6px; flex: none; }
.gw-deck-cur-info:hover { background: #f3e3c3; }
.gw-leader-pick { position: relative; }
.gw-leader-pick-info { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255, 248, 236, 0.94); border: 1.5px solid #6b4a2f; color: #6b4a2f;
    font-size: 11px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.gw-leader-pick-info:hover { background: #f3e3c3; }

@media (max-width: 560px) {
    .gw-act-leader-ava { width: 26px; height: 26px; }
    .gw-act-leader-txt b { font-size: 0.74rem; }
    .gw-pile--disc { font-size: 0.68rem; padding: 2px 8px; }
    .gw-row-label { width: 46px; }
    .gw-row-ic { width: 15px; height: 15px; }
}