/* ===== 斗地主样式：复古赌场绿 + 中式纸牌 ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{user-select:none;-webkit-user-select:none}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#0e5c38 0%,#093d26 55%,#052a1a 100%);
  color:#f3e9d2;min-height:100vh;overflow-x:hidden;
}
body.light{background:radial-gradient(ellipse at 50% 30%,#f7f3e8 0%,#efe7d3 60%,#e2d6b8 100%);color:#4a3f28}
#app{max-width:760px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:8px 10px 14px}

/* 顶栏 */
header{display:flex;align-items:center;gap:8px;padding:6px 2px}
header h1{font-size:20px;letter-spacing:2px}
header h1 .en{display:block;font-size:10px;letter-spacing:3px;color:#d4af37;font-weight:400}
body.light header h1 .en{color:#a8842c}
.hspace{flex:1}
.pill{border:1px solid rgba(212,175,55,.55);border-radius:999px;padding:3px 10px;font-size:12px;color:#f3e9d2;background:rgba(0,0,0,.25)}
body.light .pill{color:#4a3f28;background:rgba(255,255,255,.5)}
.icobtn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(212,175,55,.55);background:rgba(0,0,0,.25);color:#f3e9d2;font-size:15px;cursor:pointer}
body.light .icobtn{color:#4a3f28;background:rgba(255,255,255,.5)}
#langlink{color:#d4af37;text-decoration:none;font-size:13px;border:1px solid rgba(212,175,55,.55);border-radius:999px;padding:6px 10px}

/* 红心大战牌桌：上/左/右为 AI，下为玩家，中央为墩区 */
#table{position:relative;width:100%;max-width:640px;margin:2px auto;min-height:380px;
  border:1px solid rgba(212,175,55,.35);border-radius:16px;background:rgba(0,0,0,.22);padding:8px}
body.light #table{background:rgba(255,255,255,.5)}
.seat{position:absolute;border:1px solid rgba(212,175,55,.35);border-radius:12px;padding:6px 10px;
  background:rgba(0,0,0,.25);transition:box-shadow .25s,border-color .25s;min-width:96px;text-align:center}
body.light .seat{background:rgba(255,255,255,.6)}
.seat.turn{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,.55)}
.seat .nm{font-size:13px;font-weight:700;white-space:nowrap}
.seat.top{top:8px;left:50%;transform:translateX(-50%)}
.seat.left{top:50%;left:8px;transform:translateY(-50%)}
.seat.right{top:50%;right:8px;transform:translateY(-50%)}
.seat.bottom{bottom:8px;left:50%;transform:translateX(-50%)}
#center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;min-width:220px;min-height:150px}
#trickArea{position:relative;width:200px;height:150px;margin:0 auto}
#trickArea .mini{position:absolute;padding:0}
#trickArea .mini-pos-b{bottom:0;left:50%;transform:translateX(-50%)}
#trickArea .mini-pos-t{top:0;left:50%;transform:translateX(-50%)}
#trickArea .mini-pos-l{left:0;top:50%;transform:translateY(-50%)}
#trickArea .mini-pos-r{right:0;top:50%;transform:translateY(-50%)}
#centerInfo{font-size:14px;color:#ffd98a;min-height:20px;margin-top:2px}
body.light #centerInfo{color:#8a6d1f}
/* 换牌/回合按钮区 */
#actions{display:flex;justify-content:center;gap:10px;margin:8px 0;min-height:44px}
/* 计分板 */
.stable{margin:10px 0}
.srow{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid rgba(212,175,55,.25);font-size:15px}
.srow.me{font-weight:800;color:#ffd700}
.moon{font-size:16px;color:#ffd700;text-align:center;margin-bottom:8px}
/* 旧 .airow 保留兼容 */
.airow{display:flex;justify-content:space-between;gap:8px;margin:4px 0}
.seat .bid{font-size:12px;color:#9fe6b0;min-height:16px;margin-top:2px}
.seat .plays{min-height:44px;margin-top:4px;display:flex;flex-wrap:wrap;gap:2px;align-items:flex-start}

/* 中央区旧规则已废弃（红心大战用 #table 绝对定位布局） */

/* 玩家出牌区 */
#myPlays{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;min-height:44px;margin:2px 0}

/* 手牌 */
#hand{display:flex;justify-content:center;align-items:flex-end;margin:6px 0 2px;min-height:96px;padding:0 4px}
#hand .pcard{margin-left:-40px;cursor:pointer;transition:transform .15s}
#hand .pcard:first-child{margin-left:0}
#hand .pcard.sel{transform:translateY(-14px);box-shadow:0 0 10px rgba(255,215,0,.8)}

/* 纸牌 */
/* ===== 大牌精美版（红心大战/蜘蛛纸牌共用） ===== */
.pcard{width:72px;height:100px;border-radius:10px;position:relative;isolation:isolate;color:#232323;flex:0 0 auto;
  background:radial-gradient(ellipse at 50% 32%,#fffef9 0%,#faf3df 55%,#efe2c2 100%);
  border:1px solid #8a6d1f;
  box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 0 0 2px #fffef9,inset 0 0 0 3px #c9a227,inset 0 0 0 6px #fffef9,inset 0 0 0 7px rgba(201,162,39,.45);
  font-family:Georgia,"Times New Roman","Songti SC",serif}
.pcard.red{color:#b3282d}
.pcard .corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1.02;font-weight:700;z-index:2}
.pcard .corner .r{font-size:20px;letter-spacing:-.5px}
.pcard .corner .s{font-size:15px}
.pcard .corner.tl{top:5px;left:6px}
.pcard .corner.br{bottom:5px;right:6px;transform:rotate(180deg)}
/* 中央大花色 + 淡水印底纹 */
.pcard .pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;z-index:1;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.pcard .pip::before{content:attr(data-s);position:absolute;font-size:76px;opacity:.07;transform:rotate(-12deg)}
/* A 特大 */
.pcard.ace .pip{font-size:56px}
/* 牌背：藏青金纹 + 中央徽记 */
.pcard.back{background:
    repeating-linear-gradient(45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 9px),
    repeating-linear-gradient(-45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 9px),
    radial-gradient(circle at 50% 36%,#33477e 0%,#1c2653 72%);
  border:1px solid #c9a227;
  box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 0 0 2px #1c2653,inset 0 0 0 3px #c9a227,inset 0 0 0 6px #1c2653,inset 0 0 0 7px rgba(212,175,55,.5)}
.pcard.back::after{content:"♠";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#d4af37;text-shadow:0 0 6px rgba(212,175,55,.55)}
.mini .pcard{width:46px;height:64px;border-radius:7px}
.mini .pcard .corner .r{font-size:13px}
.mini .pcard .corner .s{font-size:10px}
.mini .pcard .corner.tl{top:3px;left:4px}
.mini .pcard .corner.br{bottom:3px;right:4px}
.mini .pcard .pip{font-size:26px}
.mini .pcard .pip::before{font-size:48px}
.mini .pcard.ace .pip{font-size:34px}
.mini .pcard.back::after{font-size:18px}

/* 按钮 */
#actions{display:flex;justify-content:center;gap:10px;margin:8px 0;min-height:46px;flex-wrap:wrap}
.abtn{border:1px solid rgba(212,175,55,.6);border-radius:12px;padding:10px 22px;font-size:16px;font-weight:700;
  background:linear-gradient(180deg,#3a4a3f,#243128);color:#f3e9d2;cursor:pointer;min-width:86px}
.abtn.primary{background:linear-gradient(180deg,#d4af37,#9c7c1e);color:#241c05;border-color:#ffe9a8}
.abtn.play{background:linear-gradient(180deg,#2f9e5f,#1d7a44);color:#fff;border-color:rgba(124,252,154,.55)}
.abtn.hintb{background:linear-gradient(180deg,#3f6fb5,#2a4f86);color:#fff;border-color:rgba(150,190,255,.55)}
.abtn:disabled{opacity:.35;cursor:default}
body.light .abtn{background:linear-gradient(180deg,#fff,#e8dfc8);color:#4a3f28}
body.light .abtn.primary{background:linear-gradient(180deg,#e8c84a,#c39a1f);color:#241c05}
body.light .abtn.play{background:linear-gradient(180deg,#3aad6a,#248a4e);color:#fff}
body.light .abtn.hintb{background:linear-gradient(180deg,#4d7fc4,#33598f);color:#fff}

/* toast */
#toast{position:fixed;left:50%;top:64px;transform:translateX(-50%);background:rgba(0,0,0,.82);color:#ffe9a8;
  padding:10px 20px;border-radius:10px;font-size:15px;display:none;z-index:60;border:1px solid rgba(212,175,55,.5);
  max-width:86vw;text-align:center}

/* 结算弹窗 */
#modal,#helpModal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50}
#modal.show,#helpModal.show{display:flex}
#modal .box,#helpModal .box{background:linear-gradient(180deg,#123f28,#0a2a1a);border:2px solid #d4af37;border-radius:16px;
  padding:26px 30px;text-align:center;color:#f3e9d2;max-width:88vw}
body.light #modal .box,#helpModal .box{background:linear-gradient(180deg,#fffdf4,#f3ecd8);color:#4a3f28}
#modal h2,#helpModal h2{font-size:24px;margin-bottom:10px}
#modal h2.win{color:#7cfc9a}
#modal h2.lose{color:#ff9d8a}
#modal .detail{font-size:14px;line-height:1.9;margin-bottom:14px}
#helpModal .box.wide{width:520px;max-width:92vw;text-align:left;max-height:84vh;overflow-y:auto}
#helpModal .helpbody{font-size:14px;line-height:1.9}

/* 发牌动画 */
.fly{position:fixed;width:56px;height:78px;border-radius:8px;z-index:70;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 9px),
    repeating-linear-gradient(-45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 9px),
    radial-gradient(circle at 50% 36%,#33477e 0%,#1c2653 72%);
  border:1px solid #c9a227;box-shadow:0 3px 10px rgba(0,0,0,.55),inset 0 0 0 3px rgba(212,175,55,.25);
  transition:transform .34s cubic-bezier(.25,.8,.35,1),opacity .22s ease}
/* 玩家手牌逐张翻出 */
.deal-in{animation:dealIn .3s ease-out}
@keyframes dealIn{from{transform:translateY(28px) rotate(5deg) scale(.85);opacity:0}}
/* 电脑手牌：牌背 */
/* AI 牌堆：单张牌背 + 计数 */
.bkstack{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px}
.bkstack .bk{width:38px;height:54px;border-radius:6px;flex:0 0 auto;
  background:
    repeating-linear-gradient(45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 8px),
    repeating-linear-gradient(-45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 8px),
    radial-gradient(circle at 50% 36%,#33477e 0%,#1c2653 72%);
  border:1px solid rgba(212,175,55,.9);box-shadow:0 1px 4px rgba(0,0,0,.45),inset 0 0 0 2px rgba(212,175,55,.2)}
.bkstack .cnt{font-size:14px;color:#ffd98a;font-weight:700}
/* 旧 backs 保留兼容 */
.backs{display:flex;justify-content:center;min-height:56px;margin-top:4px}
.backs .bk{width:38px;height:54px;margin-left:-26px;border-radius:6px;flex:0 0 auto;
  background:
    repeating-linear-gradient(45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 8px),
    repeating-linear-gradient(-45deg,rgba(212,175,55,.28) 0 1.5px,transparent 1.5px 8px),
    radial-gradient(circle at 50% 36%,#33477e 0%,#1c2653 72%);
  border:1px solid rgba(212,175,55,.9);box-shadow:0 1px 4px rgba(0,0,0,.45),inset 0 0 0 2px rgba(212,175,55,.2)}
.backs .bk:first-child{margin-left:0}
/* 发牌中的牌墩 */
.deckpile{position:relative;width:54px;height:72px;margin:2px auto}
.deckpile .pcard.back{position:absolute;top:0;left:0}
/* 大小王 Scout 形象 */
.pcard.joker .joker-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:7px}

/* 页脚 */
footer{margin-top:auto;text-align:center;font-size:12px;color:#b8a06a;padding:10px 0 4px}
footer a{color:#b8a06a;text-decoration:none;margin:0 6px}
.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

@media (max-width:480px){
  .pcard{width:58px;height:80px;border-radius:8px}
  .pcard .corner .r{font-size:16px}
  .pcard .corner .s{font-size:12px}
  .pcard .pip{font-size:32px}
  .pcard .pip::before{font-size:60px}
  .pcard.ace .pip{font-size:44px}
  .pcard.back::after{font-size:22px}
  .mini .pcard{width:38px;height:54px}
  #hand .pcard{margin-left:-38px}
  #hand .pcard.sel{transform:translateY(-11px)}
  .abtn{padding:9px 16px;font-size:15px;min-width:76px}
}

/* ===== 蜘蛛纸牌 ===== */
#diffRow{display:flex;gap:8px;justify-content:center;margin:4px 0;min-height:26px}
.dpill{border:1px solid rgba(212,175,55,.55);border-radius:999px;padding:3px 12px;font-size:12px;color:#ffd98a;background:rgba(0,0,0,.25)}
.dpill.dim{opacity:.7}
.dpill.clickable{cursor:pointer;transition:background .15s}
.dpill.clickable:hover{background:rgba(212,175,55,.25)}
/* 10列 */
#board{display:flex;justify-content:center;gap:6px;margin:6px auto;max-width:760px;align-items:flex-start}
.scol{flex:0 0 auto;width:64px;min-height:120px;border-radius:8px;background:rgba(0,0,0,.18);
  border:1px dashed rgba(212,175,55,.25);padding:3px;position:relative}
.scol.empty{min-height:96px;cursor:pointer}
.scol .cwrap{margin-top:-58px;position:relative;cursor:pointer}
.scol .cwrap:first-child{margin-top:0}
.scol .cwrap.down{margin-top:-68px}
.scol .cwrap.down:first-child{margin-top:0}
.scol .cwrap.sel .pcard{box-shadow:0 0 0 3px #ffd700,0 3px 8px rgba(0,0,0,.4)}
/* 蜘蛛牌尺寸：64x88 */
.scol .pcard{width:58px;height:80px;border-radius:8px}
.scol .pcard .corner .r{font-size:15px}
.scol .pcard .corner .s{font-size:11px}
.scol .pcard .corner.tl{top:3px;left:4px}
.scol .pcard .corner.br{bottom:3px;right:4px}
.scol .pcard .pip{font-size:30px}
.scol .pcard .pip::before{font-size:56px}
.scol .pcard.ace .pip{font-size:40px}
.scol .pcard.back::after{font-size:20px}
/* 发牌堆行：底部固定控制条，不随牌列变高下移 */
#stockRow{position:fixed;bottom:0;left:0;right:0;z-index:60;margin:0;padding:10px 8px;
  background:rgba(8,32,20,.94);box-shadow:0 -2px 14px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
#app{padding-bottom:92px}
.stockinfo{font-size:13px;color:#ffd98a}
.pcard.stockpile{width:44px;height:62px;margin-left:-34px;border-radius:7px}
.pcard.stockpile:first-of-type{margin-left:0}
.pcard.stockpile.back::after{font-size:16px}
.doneArea{display:flex;gap:4px;margin-left:12px}
.doneslot{width:30px;height:42px;border-radius:6px;border:1px dashed rgba(212,175,55,.4);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#7a5c14}
.doneslot.full{background:linear-gradient(160deg,#f7efdb,#e8d9b5);border:1px solid #c9a227}
#diffModal .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:480px){
  #board{gap:3px}
  .scol{width:36px;padding:2px}
  .scol .pcard{width:32px;height:46px;border-radius:6px}
  .scol .pcard .corner .r{font-size:10px}
  .scol .pcard .corner .s{font-size:8px}
  .scol .pcard .corner.tl{top:2px;left:3px}
  .scol .pcard .corner.br{bottom:2px;right:3px}
  .scol .pcard .pip{font-size:18px}
  .scol .pcard .pip::before{font-size:34px}
  .scol .pcard.ace .pip{font-size:24px}
  .scol .pcard.back::after{font-size:12px}
  .scol .cwrap{margin-top:-32px}
  .scol .cwrap.down{margin-top:-40px}
  .scol .cwrap.down:first-child{margin-top:0}
  .doneslot{width:22px;height:32px;font-size:11px}
}