*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#e8c56a;--wood:#2b1a0c;--card:#f6ecd2;
  --red:#c0392b;--blue:#3b6ea5;--green:#2e7d6b;--purple:#7a4c8f;
}
html,body{height:100%}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;overflow:hidden;color:#f0e6cf;
  background:radial-gradient(ellipse at 50% 30%, #2f6a44, #12351d 70%, #0a2413);user-select:none}
#app{position:relative;width:100vw;height:100vh}

/* 顶部居中提示 */
#hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:9;background:rgba(0,0,0,.55);
  border:1px solid var(--gold);border-radius:20px;padding:7px 20px;font-size:14px;color:#ffe9b0}

/* 战报 */
#log{position:absolute;right:14px;bottom:14px;width:270px;max-height:36vh;overflow-y:auto;z-index:8;
  background:rgba(0,0,0,.45);border:1px solid #8a6a2f;border-radius:10px;padding:10px;font-size:13px}
#log h3{color:var(--gold);font-size:14px;margin-bottom:6px;border-bottom:1px solid #5a431f;padding-bottom:4px}
.log-line{margin:3px 0;color:#eee;line-height:1.45}
.log-line.red{color:#ff8a7a}.log-line.green{color:#a7e8a0}

/* 中央场景 */
#center-stage{position:relative;width:100%;height:100%}
#seats{position:absolute;inset:0}

/* 座位 */
.seat{position:absolute;width:190px;text-align:center;transition:filter .2s}
.seat .role{position:absolute;top:-6px;left:-6px;width:26px;height:26px;border-radius:50%;color:#fff;font-size:13px;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--gold);z-index:3}
.seat .picon{width:80px;height:96px;margin:0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:46px;font-weight:bold;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6);border:3px solid var(--gold);
  box-shadow:0 6px 16px rgba(0,0,0,.5);position:relative}
.seat .picon .kingdom{position:absolute;bottom:-4px;right:-4px;width:22px;height:22px;border-radius:50%;font-size:12px;
  display:flex;align-items:center;justify-content:center;background:#fff;color:#333;border:1px solid #999;font-weight:bold}
.seat .pname{margin-top:8px;font-size:15px;font-weight:bold;color:#fff;text-shadow:0 1px 2px #000}
.seat .php{margin-top:5px;display:flex;justify-content:center;gap:3px;align-items:center}
.seat .php .num{font-size:13px;font-weight:bold;margin-right:4px}
.seat .hpdot{width:15px;height:15px;border-radius:50%;background:var(--red);border:1px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.4)}
.seat .hpdot.lost{background:#3a2a1a;opacity:.5;box-shadow:none}
.seat .hand{position:absolute;top:-34px;right:16px;background:#2b1a0c;color:var(--card);font-size:11px;padding:2px 7px;border-radius:4px;border:1px solid #8a6a2f}
.seat .equip{display:flex;justify-content:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.seat .equip span{font-size:11px;background:rgba(0,0,0,.5);padding:1px 5px;border-radius:3px;color:#ffe9b0;border:1px solid #6a4e24}
.seat.current{outline:2px solid #f7c948;border-radius:12px}
.seat.dead{filter:grayscale(1) brightness(.6)}

/* 玩家（底部） */
#seat-0{left:50%;bottom:120px;transform:translateX(-50%)}
#seat-0 .picon{width:84px;height:100px;font-size:46px}

/* 手牌 */
#hand{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:-10px;z-index:6;flex-wrap:nowrap}
.card{width:74px;height:106px;border-radius:8px;flex:0 0 auto;cursor:pointer;position:relative;transition:transform .15s;
  background:linear-gradient(160deg,#fff8e6,#f0e0bd);border:1px solid #c9a85a;box-shadow:0 4px 8px rgba(0,0,0,.5);
  color:#333;font-weight:bold;text-align:center;padding:2px;margin-left:-26px}
.card:first-child{margin-left:0}
.card .corner{position:absolute;top:5px;left:6px;font-size:14px;line-height:1.1;text-align:center}
.card .big{position:absolute;top:44%;left:0;right:0;transform:translateY(-50%);font-size:22px;font-weight:bold;text-shadow:0 1px 0 #fff}
.card .foot{position:absolute;bottom:5px;left:0;right:0;font-size:10px;color:#6b5a30;font-weight:normal}
.card.red{color:#b3261e}
.card.equip .big{font-size:15px}
.card.trick .foot{background:#6a86c9}
.card:hover{transform:translateY(-20px);z-index:20}
.card.selected{transform:translateY(-26px);outline:3px solid #f7c948;z-index:21}
.card.disabled{opacity:.4;cursor:default}

/* 控制条 */
#controls{position:absolute;bottom:236px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:7;flex-wrap:wrap;justify-content:center;max-width:80%}
.btn{background:linear-gradient(180deg,#e8c56a,#b98a2f);color:#3a2508;font-weight:bold;border:2px solid #7a5517;border-radius:8px;
  padding:8px 16px;font-size:14px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#e05a3a,#a92f1f);color:#fff;border-color:#7a1e12}
.btn.ghost{background:rgba(0,0,0,.5);color:#e8c56a;border-color:#8a6a2f}
.btn.skill{background:linear-gradient(180deg,#9b59b6,#6c3483);color:#fff;border-color:#4a2457}

/* Modal */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:50}
#overlay.show{display:flex}
.modal{background:linear-gradient(180deg,#3a2412,#241507);border:3px solid var(--gold);border-radius:16px;padding:28px 34px;text-align:center;
  max-width:720px;max-height:88vh;overflow-y:auto;box-shadow:0 12px 50px rgba(0,0,0,.7)}
.modal h2{color:var(--gold);margin-bottom:12px;font-size:28px}
.modal p{margin:6px 0;line-height:1.6}

/* 选将界面 */
.setup .modes{display:flex;gap:10px;justify-content:center;margin:14px 0}
.setup .mode{cursor:pointer;border:2px solid #6a4e24;border-radius:8px;padding:10px 16px;background:rgba(0,0,0,.3)}
.setup .mode.sel{border-color:var(--gold);background:rgba(232,197,106,.18)}
.setup .gsel{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:16px 0;max-height:44vh;overflow-y:auto;padding:4px}
.setup .gcard{cursor:pointer;border:2px solid #6a4e24;border-radius:8px;padding:8px 4px;background:rgba(0,0,0,.35);text-align:center}
.setup .gcard.sel{border-color:var(--gold);background:rgba(232,197,106,.2);box-shadow:0 0 10px #e8c56a55}
.setup .gcard .gavatar{width:52px;height:64px;margin:0 auto 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;border:2px solid #fff}
.setup .gcard .gname{font-size:14px;font-weight:bold;color:#fff}
.setup .gcard .gskill{font-size:10px;color:#d7c99a;margin-top:2px}
.deckcounter{font-size:12px;color:#d7c99a;text-align:center;margin-top:6px}
.target-hint{color:#ffd76a;font-weight:bold}

/* ===== 新增：形象 / 技能按钮 / 弃牌堆 / 提示浮层 ===== */
.picon{overflow:hidden}
.pavatar{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pavatar svg{width:94%;height:94%;border-radius:8px}
.deadmark{font-size:40px;color:#fff;text-shadow:0 2px 4px #000}
.skillchip{background:linear-gradient(180deg,#e8c56a,#b98a2f);color:#3a2508;border:none;border-radius:4px;font-size:11px;
  padding:1px 6px;margin-left:6px;cursor:pointer;vertical-align:middle}
.skillchip:hover{filter:brightness(1.1)}
.tooltip{position:fixed;z-index:200;left:50%;top:50%;transform:translate(-50%,-50%);max-width:340px;width:92vw;
  background:linear-gradient(180deg,#3a2412,#241507);border:2px solid #e8c56a;border-radius:12px;padding:14px 18px;color:#f0e6cf;
  box-shadow:0 10px 40px rgba(0,0,0,.6);text-align:left}
.tooltip .tt-title{color:#e8c56a;font-weight:bold;font-size:16px;margin-bottom:8px;border-bottom:1px solid #5a431f;padding-bottom:6px}
.tooltip .tt-skill{margin:6px 0;font-size:13px;line-height:1.5}
.tooltip .tt-skill b{color:#ffd76a}
.deckinfo{position:absolute;left:14px;top:52px;z-index:8;background:rgba(0,0,0,.5);border:1px solid #8a6a2f;border-radius:8px;
  color:#ffe9b0;font-size:12px;padding:4px 10px;cursor:pointer}
.deckinfo:hover{background:rgba(0,0,0,.7)}
.deckinfo .sep{color:#6a4e24;margin:0 4px}

/* ===== 移动端 / 竖屏（手机、抖音 web-view）适配 ===== */
@media (max-width: 768px){
  body{overflow:auto}
  .seat{width:140px}
  .seat .picon{width:60px;height:74px;border-radius:8px;font-size:34px}
  .seat .pname{font-size:13px}
  .seat .hpdot{width:12px;height:12px}
  .seat .equip span{font-size:10px}
  #seat-0{left:50%;bottom:96px;transform:translateX(-50%)}
  #seat-0 .picon{width:70px;height:88px;font-size:44px}
  #hand{bottom:6px;gap:0}
  .card{width:52px;height:78px;border-radius:6px;font-size:11px;margin-left:-16px}
  .card .big{font-size:14px}
  .card .corner{font-size:11px}
  .card .foot{font-size:8px}
  #controls{bottom:186px;gap:6px}
  .btn{padding:6px 10px;font-size:12px}
  #log{right:8px;bottom:8px;top:auto;width:210px;max-height:30vh;font-size:11px;padding:6px}
  #deckinfo{left:8px;top:8px;font-size:11px}
  #hint{top:8px;font-size:12px;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .setup .gsel{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .setup .gcard .gavatar{width:40px;height:50px;font-size:24px}
}

.setup .gavatar{overflow:hidden;display:flex;align-items:center;justify-content:center}
.setup .gavatar svg{width:100%;height:100%}

.card .cicon{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:15px;opacity:.85}
.card .big{top:52%}

/* ===== 装备区 ===== */
.equipzone{display:flex;justify-content:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.eqslot{min-width:50px;height:32px;border:1px solid #6a4e24;border-radius:4px;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;gap:3px;font-size:10px;color:#c9b57e;padding:2px 4px}
.eqslot.filled{background:linear-gradient(160deg,#e8c56a,#b98a2f);color:#3a2508;border-color:#7a5517;font-weight:bold}
.eqslot .eqicon{font-size:14px}
.eqlabel{opacity:.55}
/* ===== 桌面中央弃牌堆 ===== */
#discardpile{position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:4;text-align:center;cursor:pointer}
#discardpile .dpstack{position:relative;width:62px;height:80px;margin:0 auto;border-radius:6px;background:linear-gradient(160deg,#7b1c1c,#4a0f0f);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:#e8c56a;font-size:22px;box-shadow:0 6px 12px rgba(0,0,0,.5)}
#discardpile .dpstack.empty{background:rgba(0,0,0,.35);border:2px dashed #8a6a2f;color:#c9b57e;font-size:12px}
#discardpile .dpcount{margin-top:6px;font-size:12px;color:#d7c99a}
/* ===== 玩家区布局（手牌不遮武将） ===== */
#seat-0{bottom:250px}
#seat-0 .equipzone{margin-top:6px}
#hand{bottom:4px}
#controls{bottom:452px}
@media (max-width:768px){
  #seat-0{bottom:128px}
  #controls{bottom:220px}
  #hand{bottom:4px}
  #discardpile{top:32%}
  #discardpile .dpstack{width:48px;height:62px;font-size:16px}
}

#seat-0{display:flex;flex-direction:column;align-items:center;width:230px}
#seat-0 .php,#seat-0 .equipzone{width:100%;justify-content:center}
#seat-0 .php{margin-top:4px}

#seat-0 .php,#seat-0 .equipzone{position:relative;z-index:40;background:rgba(0,0,0,.45);border-radius:4px;margin-top:3px}
#seat-0 .equipzone{flex-wrap:wrap}

/* ===== 判定区 ===== */
.judgezone{display:flex;justify-content:center;gap:4px;margin-top:4px;flex-wrap:wrap;position:relative;z-index:40}
.judgezone .jcard{background:linear-gradient(160deg,#7a2a8f,#4a1d55);color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;border:1px solid #c9a2e8}

/* 弃牌堆：正面散乱一堆 */
#discardpile .dpstack{background:none;border:none;box-shadow:none;width:150px;height:96px;position:relative;display:flex;align-items:center;justify-content:center}
#discardpile .dpstack .dpc{position:absolute;width:42px;height:60px;border:1px solid #b89b5a;border-radius:4px;background:linear-gradient(160deg,#fff6e2,#efe0bd);color:#333;font-size:9px;line-height:1;padding:3px 2px;text-align:center;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.4)}
#discardpile .dpstack .dpc b{display:block;font-size:8px;margin-top:2px;color:#7a5a1a;font-weight:bold}
#discardpile .dpstack.empty{background:rgba(0,0,0,.35);border:2px dashed #8a6a2f;width:62px;height:80px;display:flex;align-items:center;justify-content:center;color:#c9b57e;font-size:12px}

#discardpile .dpstack{width:170px;height:110px}
#discardpile .dpstack .dpc{width:50px;height:74px;font-size:10px}
#discardpile .dpstack .dpc b{font-size:10px}

/* 出牌/判定动画 */
.cardanim{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);width:120px;height:168px;border-radius:10px;
  background:linear-gradient(160deg,#fff8e6,#efe0bd);border:2px solid #e8c56a;color:#333;text-align:center;z-index:120;
  box-shadow:0 12px 40px rgba(0,0,0,.6);animation:cardPop 1.15s ease-out forwards;pointer-events:none}
.cardanim .ca-corner{position:absolute;top:8px;left:9px;font-size:15px;font-weight:bold}
.cardanim .ca-big{position:absolute;top:46%;left:0;right:0;transform:translateY(-50%);font-size:26px;font-weight:bold}
.cardanim .ca-type{position:absolute;bottom:8px;left:0;right:0;font-size:11px;color:#7a5a1a}
.cardanim .ca-tag{position:absolute;top:8px;right:8px;background:#7a2a8f;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px}
.cardanim.judge{width:190px;height:266px;border-color:#c9a2e8;box-shadow:0 12px 40px rgba(122,42,143,.6);animation:cardPop 3s ease-out forwards}
.cardanim.judge .ca-big{font-size:34px}
.cardanim.judge .ca-corner{font-size:20px}
@keyframes cardPop{0%{opacity:0;transform:translate(-50%,32vh) scale(.55)}22%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-15vh) scale(.9)}}

.gimg{width:100%;height:100%;object-fit:cover;border-radius:8px;background:#111}

/* 玩家头像完整露出 */
#seat-0{bottom:280px}
#seat-0 .picon{width:80px;height:96px;font-size:44px}
#controls{bottom:512px}
@media (max-width:768px){
  #seat-0{bottom:132px}
  #seat-0 .picon{width:70px;height:86px}
  #controls{bottom:224px}
}

.gimg{width:100%;height:100%;object-fit:contain;background:#1a1a1a;border-radius:8px}
.cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f6ecd2;border-radius:8px;z-index:2}

/* ===== 布局：武将牌在左、手牌在右且更大 ===== */
#seat-0{left:6%;bottom:92px;transform:none;width:auto;text-align:left}
#seat-0 .picon{width:112px;height:152px;font-size:44px}
#seat-0 .pavatar svg{width:100%;height:100%}
#seat-0 .php,#seat-0 .equipzone{justify-content:flex-start;max-width:190px}
#seat-0 .pname{text-align:left}
#hand{left:32%;right:8%;bottom:10px;justify-content:center;gap:0}
.card{width:92px;height:132px;margin-left:-24px}
.card:first-child{margin-left:0}
.card .big{font-size:24px}
.card .corner{font-size:16px;top:6px;left:7px}
.card .cicon{font-size:19px;top:22px}
.card .foot{font-size:11px}
#controls{bottom:300px}
@media (max-width:768px){
  #seat-0{left:8px;bottom:70px}
  #seat-0 .picon{width:80px;height:110px}
  #hand{left:44%;right:6%;bottom:6px}
  .card{width:60px;height:86px;margin-left:-16px}
  .card .big{font-size:15px}
  #controls{bottom:206px}
}

@keyframes hitfx{0%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.seat.hitfx{animation:hitfx .55s ease}
.seat.hitfx .picon{outline:4px solid #f33;box-shadow:0 0 24px rgba(255,60,60,.8)}

/* 强制：武将牌在左，手牌在右 */
#seat-0{left:5% !important;bottom:92px !important;transform:none !important;position:absolute}
#hand{left:32% !important;right:6% !important;transform:none !important;justify-content:flex-start}
#controls{bottom:300px}
@media (max-width:768px){
  #seat-0{left:6px !important;bottom:70px}
  #seat-0 .picon{width:80px;height:110px}
  #hand{left:46% !important;right:4% !important}
  .card{width:58px;height:84px;margin-left:-14px}
  #controls{bottom:206px}
}

/* 全部武将牌放大 + 玩家贴手牌 + 手牌再放大 */
.seat{width:150px}
.seat .picon{width:100px;height:134px;font-size:48px}
.seat .pname{font-size:15px}
.seat .php .num{font-size:14px}
.seat .equipzone{margin-top:5px}
#seat-0{left:8% !important;bottom:70px !important}
#seat-0 .picon{width:132px;height:178px;font-size:60px}
#hand{left:23% !important;right:4% !important;bottom:10px !important}
.card{width:102px;height:148px;margin-left:-28px}
.card:first-child{margin-left:0}
.card .big{font-size:26px}
.card .corner{font-size:18px}
.card .cicon{font-size:22px}
.card .foot{font-size:12px}
#controls{bottom:300px}
@media (max-width:768px){
  .seat .picon{width:76px;height:104px}
  #seat-0{left:6px;bottom:56px}
  #seat-0 .picon{width:92px;height:126px}
  #hand{left:44%;right:4%}
  .card{width:62px;height:90px;margin-left:-14px}
  .card .big{font-size:16px}
  #controls{bottom:200px}
}

.cdwrap{margin:10px auto 4px;max-width:320px;text-align:center;display:flex;align-items:center;gap:8px}
.cdtrack{flex:1;height:10px;background:#000;border:1px solid #e8c56a;border-radius:6px;overflow:hidden}
#cdbar{height:100%;background:linear-gradient(90deg,#e05a3a,#e8c56a)}
#cdtext{font-size:13px;color:#ffd76a;font-weight:bold}

#judgebanner{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:210;max-width:70%;text-align:center;
  background:rgba(20,10,4,.9);border:2px solid #e8c56a;border-radius:10px;padding:10px 20px;font-size:16px;color:#ffe9b0;
  box-shadow:0 8px 30px rgba(0,0,0,.6);display:none}
#judgebanner.ok{border-color:#3adb76;color:#bff0d0}
#judgebanner.bad{border-color:#e05a3a;color:#ffc9b8}

.card .corner{z-index:6;background:rgba(255,252,238,.92);color:#222;border-radius:4px;padding:2px 4px;font-weight:bold;text-shadow:0 1px 1px rgba(0,0,0,.12)}
.card .corner.red{color:#c0392b}

.dpc img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:3px}
#discardpile .dpstack .dpc{overflow:hidden;background:#fff}

#dock{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
#dock>*{pointer-events:auto}
#dock #seat-0{position:static !important;transform:none !important;left:auto !important;bottom:auto !important;flex:0 0 auto}
#dock #hand{position:static !important;transform:none !important;left:auto !important;right:auto !important;bottom:auto !important;flex:0 1 auto}

/* ============================================================
   【最终布局修正】玩家区：武将牌在左、手牌紧贴其右，整体居中
   ============================================================ */
#app{position:relative}
#dock{
  position:fixed; left:50%; bottom:6vh; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:2px; z-index:9;
  max-width:94vw; pointer-events:none;
}
#dock>*{pointer-events:auto}
#dock #seat-0{
  position:static !important; transform:none !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  flex:0 0 auto; width:auto; display:flex; flex-direction:column;
  align-items:flex-start; text-align:left;
}
#dock #seat-0 .picon{width:150px; height:200px; font-size:64px; flex:0 0 auto}
#dock #seat-0 .php,#dock #seat-0 .equipzone{justify-content:flex-start; width:auto; max-width:170px}
#dock #seat-0 .pname{margin-top:6px; text-align:left}
#dock #hand{
  position:static !important; transform:none !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  flex:0 1 auto; display:flex; gap:0; margin:0; padding:0;
  justify-content:flex-start !important; align-items:flex-end;
}

/* 全部武将牌再放大一轮 */
.seat{width:160px}
.seat .picon{width:112px; height:148px; font-size:52px}
.seat .pname{font-size:16px}
.seat .php .num{font-size:14px}

/* 手牌再放大 + 紧贴 */
#dock .card{width:112px; height:162px; margin-left:-24px}
#dock .card:first-child{margin-left:0}
#dock .card .big{font-size:27px}
#dock .card .corner{font-size:19px}
#dock .card .cicon{font-size:23px}
#dock .card .foot{font-size:13px}

/* 操作条悬于玩家区上方 */
#controls{bottom:calc(6vh + 250px)}

@media (max-width:768px){
  #dock{bottom:4vh; max-width:96vw}
  #dock #seat-0 .picon{width:108px; height:148px; font-size:50px}
  #dock .card{width:74px; height:108px; margin-left:-14px}
  #dock .card .big{font-size:18px}
  #dock .card .corner{font-size:13px}
  .seat .picon{width:80px; height:108px}
  #controls{bottom:calc(4vh + 190px)}
}

/* ============================================================
   【判定牌放大 + 停留更久】 + 出牌动画显示真实卡图
   ============================================================ */
.cardanim{overflow:hidden}
.cardanim .ca-imgwrap{position:absolute;inset:0;z-index:1;overflow:hidden}
.cardanim .ca-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f6ecd2}
.cardanim .ca-corner,.cardanim .ca-big,.cardanim .ca-type,.cardanim .ca-tag{z-index:3;position:absolute}
.cardanim .ca-big{text-shadow:0 1px 0 #fff}
.cardanim .ca-tag{top:8px;right:8px;background:#7a2a8f;color:#fff;font-size:11px;padding:2px 7px;border-radius:5px;z-index:4}
.cardanim.judge{width:220px;height:308px;border-color:#c9a2e8;box-shadow:0 14px 46px rgba(122,42,143,.7);animation:judgePop 4s ease-out forwards}
.cardanim.judge .ca-big{font-size:36px}
.cardanim.judge .ca-corner{font-size:22px}
@keyframes judgePop{0%{opacity:0;transform:translate(-50%,34vh) scale(.5)}10%{opacity:1;transform:translate(-50%,0) scale(1.04)}16%{transform:translate(-50%,0) scale(1)}84%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-14vh) scale(.92)}}

/* 技能小按钮：按技能名拆分成多个，可换行 */
.seat .pname{display:flex;flex-wrap:wrap;align-items:center;gap:4px;justify-content:center}
#dock #seat-0 .pname{justify-content:flex-start}

/* ============================================================
   【过河/顺手】选择目标牌：手牌显示牌背，装备正面展示
   ============================================================ */
.stealtiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;max-width:80vw}
.stealtile{cursor:pointer;text-align:center;transition:transform .12s;padding:4px}
.stealtile:hover{transform:translateY(-6px)}
.stealtile-img{position:relative;width:76px;height:108px;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#fff8e6,#efe0bd);border:2px solid #c9a85a;box-shadow:0 4px 10px rgba(0,0,0,.4);margin:0 auto}
.stealtile-img .corner{position:absolute;top:4px;left:5px;font-size:13px;font-weight:bold;z-index:3;background:rgba(255,252,238,.92);padding:1px 3px;border-radius:3px;color:#222}
.stealtile-img .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f6ecd2;z-index:2}
.stealtile-label{margin-top:5px;font-size:12px;color:#ffe9b0;font-weight:bold}
.cardback{width:76px;height:108px;margin:0 auto;border-radius:8px;border:2px solid #e8c56a;box-shadow:0 4px 10px rgba(0,0,0,.4);
  background:radial-gradient(circle at 50% 45%, #a52a2a, #6b1515 70%);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.cardback::before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(45deg,rgba(232,197,106,.25) 0,rgba(232,197,106,.25) 8px,transparent 8px,transparent 16px)}
.cardback::after{content:"豆";position:relative;z-index:2;color:#e8c56a;font-size:26px;font-weight:bold;text-shadow:0 1px 2px #000}

/* 出牌阶段 10 秒倒计时（自己回合主动出牌） */
#playcd{position:fixed;bottom:calc(6vh + 190px);left:50%;transform:translateX(-50%);z-index:108;display:none;width:280px;max-width:44vw;
  background:rgba(20,10,4,.9);border:1px solid var(--gold);border-radius:12px;padding:6px 12px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#playcd .playcd-label{color:#ffe9b0;font-size:12px;margin-bottom:3px}
#playcd .playcd-track{height:9px;background:#000;border:1px solid #e8c56a;border-radius:6px;overflow:hidden}
#playcd .playcd-bar{height:100%;width:100%;background:linear-gradient(90deg,#e05a3a,#e8c56a);transition:width .1s linear}
#playcd .playcd-time{color:#ffd76a;font-size:13px;font-weight:bold;margin-top:2px}

/* ============================================================
   【最终】操作条放在玩家区上方，避免手牌/武将牌遮挡按钮
   ============================================================ */
#controls{position:absolute;bottom:calc(6vh + 345px);left:50%;transform:translateX(-50%);z-index:10}
@media (max-width:768px){
  #controls{bottom:calc(4vh + 250px)}
}

/* ============================================================
   【抓牌牌堆】牌背朝上，紧贴弃牌堆左侧
   ============================================================ */
#drawpile{position:absolute;left:calc(50% - 175px);top:37%;transform:translateX(-50%);z-index:4;text-align:center;cursor:pointer}
#drawpile .dpstackback{position:relative;width:96px;height:134px;margin:0 auto;display:flex;align-items:flex-end;justify-content:center}
#drawpile .dpstackback .cardback{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
#drawpile .dpstackback .cardback:nth-child(1){transform:translateX(-50%) translate(9px,9px) rotate(10deg);z-index:1}
#drawpile .dpstackback .cardback:nth-child(2){transform:translateX(-50%) translate(-9px,7px) rotate(-10deg);z-index:2}
#drawpile .dpstackback .cardback:nth-child(3){transform:translateX(-50%) translate(0,0) rotate(0deg);z-index:3}
#drawpile .dpstackback.empty{background:rgba(0,0,0,.35);border:2px dashed #8a6a2f;width:76px;height:108px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#c9b57e;font-size:12px}
#drawpile .dpcount{margin-top:8px;font-size:12px;color:#d7c99a}

/* ============================================================
   【特效】抓牌 / 判定 / 回血
   ============================================================ */
.seat.drawfx .picon{box-shadow:0 0 0 4px #ffd76a,0 0 26px rgba(255,215,106,.85)}
.seat.judgefx .picon{box-shadow:0 0 0 4px #a44ddb,0 0 30px rgba(164,77,219,.9)}
.seat.healfx .picon{box-shadow:0 0 0 4px #35e07a,0 0 24px rgba(53,224,122,.9)}
.seat.judgefx .picon{animation:judgePulse .7s ease}
@keyframes judgePulse{0%{filter:brightness(1)}50%{filter:brightness(1.35)}100%{filter:brightness(1)}}
.fxlabel{position:fixed;transform:translate(-50%,-50%);font-size:20px;font-weight:bold;z-index:210;pointer-events:none;text-shadow:0 2px 5px #000;animation:floatUp 1.15s ease-out forwards;white-space:nowrap}
.fxlabel.draw{color:#ffd76a}
.fxlabel.judge{color:#d8a0ff}
.fxlabel.heal{color:#7cf6a0}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-40%) scale(.8)}20%{opacity:1;transform:translate(-50%,-70%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-150%) scale(1)}}

/* ============================================================
   【放大牌堆】抓牌堆 / 弃牌堆更大
   ============================================================ */
#drawpile{left:calc(50% - 215px);top:36%}
#drawpile .dpstackback{width:122px;height:172px}
#drawpile .dpstackback .cardback{width:104px;height:150px}
#drawpile .dpcount{font-size:14px;margin-top:9px}
#discardpile{top:38%}
#discardpile .dpstack{width:232px;height:152px}
#discardpile .dpstack .dpc{width:64px;height:93px;font-size:12px}
#discardpile .dpstack .dpc b{font-size:12px}
#discardpile .dpcount{font-size:14px;margin-top:8px}

/* ============================================================
   【牌移动特效】抓牌 / 弃牌 / 出牌时卡片在牌堆间飞行
   ============================================================ */
.flycard{position:fixed;width:72px;height:104px;border-radius:6px;transform:translate(-50%,-50%);transition:transform .5s ease,opacity .5s ease;z-index:205;pointer-events:none;background:#f6ecd2;border:1px solid #c9a85a;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.flycard img{width:100%;height:100%;object-fit:contain}
.flycard.back{background:radial-gradient(circle at 50% 45%,#a52a2a,#6b1515 70%);border:2px solid #e8c56a}
.flycard.back::after{content:"豆";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#e8c56a;font-size:22px;font-weight:bold;text-shadow:0 1px 2px #000}

/* 判定牌：花色点数 / 牌名需醒目可读 */
.cardanim .ca-corner{position:absolute;top:6px;left:7px;background:rgba(255,252,238,.94);border-radius:5px;padding:3px 6px;color:#222;font-weight:bold;font-size:15px;text-shadow:none;z-index:5}
.cardanim .ca-big{position:absolute;top:44%;left:0;right:0;transform:translateY(-50%);font-size:26px;font-weight:bold;background:rgba(255,252,238,.88);border-radius:8px;padding:6px 10px;margin:0 14px;color:#222;text-shadow:none;z-index:5}
.cardanim .ca-type{background:rgba(255,252,238,.86);color:#5a4010;border-radius:5px;padding:2px;margin:0 22px;z-index:5}
.cardanim.judge .ca-corner{background:rgba(255,252,238,.96);color:#222;font-size:22px;top:9px;left:10px}
.cardanim.judge .ca-corner.red{color:#c0392b}
.cardanim.judge .ca-big{background:rgba(255,252,238,.94);color:#222;font-size:36px;text-shadow:none}

/* 横置（铁索连环）标记 */
.chainmark{position:absolute;bottom:0;right:0;font-size:18px;display:none;z-index:6;background:rgba(30,60,120,.85);border-radius:6px 0 6px 0;padding:2px 5px;text-shadow:0 0 4px #000;color:#cfe4ff;border:1px solid #5aa0e8}
.seat.chainedoutline .picon{outline:2px dashed #5aa0e8}

/* ============================================================
   【手机端最终布局】避免倒计时/按钮遮挡武将牌与手牌
   ============================================================ */
@media (max-width:768px){
  #dock{bottom:2.5vh; max-width:98vw; gap:2px}
  #dock #seat-0{width:auto}
  #dock #seat-0 .picon{width:84px; height:114px; font-size:40px}
  #dock #seat-0 .php,#dock #seat-0 .equipzone{max-width:150px; font-size:10px}
  #dock #seat-0 .pname{font-size:12px; margin-top:4px}
  #dock .skillchip{font-size:10px; padding:0 4px}
  #dock #hand{align-items:flex-end}
  #dock .card{width:56px; height:82px; margin-left:-11px}
  #dock .card .big{font-size:15px}
  #dock .card .corner{font-size:11px}
  #dock .card .cicon{font-size:14px}
  #dock .card .foot{font-size:9px}

  /* 操作条：手牌上方，紧凑 */
  #controls{bottom:calc(2.5vh + 120px); gap:5px; max-width:96vw}
  #controls .btn{font-size:12px; padding:6px 9px}
  #controls .btn.skill{font-size:12px}

  /* 出牌倒计时：操作条上方，更小 */
  #playcd{bottom:calc(2.5vh + 168px); width:200px; max-width:58vw; padding:5px 9px}
  #playcd .playcd-label{font-size:10px}
  #playcd .playcd-time{font-size:11px}

  /* 抓牌堆/弃牌堆缩小 */
  #drawpile{left:calc(50% - 132px); top:34%}
  #drawpile .dpstackback{width:66px; height:94px}
  #drawpile .dpstackback .cardback{width:56px; height:82px}
  #drawpile .dpcount{font-size:11px}
  #discardpile{top:36%}
  #discardpile .dpstack{width:132px; height:88px}
  #discardpile .dpstack .dpc{width:40px; height:60px; font-size:9px}
  #discardpile .dpcount{font-size:11px}
}