/* ============================================================
   千变鬼牌 · 视觉系统
   深绿 CRT 底色 / 抖动 UI / 厚边按钮 / 纯代码卡面
   ============================================================ */
:root{
  --bg0:#0b120e;
  --bg1:#16241c;
  --panel:#1d2f24;
  --panel2:#243a2c;
  --line:#0a0f0b;
  --ink:#e9f5e6;
  --ink-dim:#9db8a0;
  --red:#e0454c;
  --red-deep:#8f1f27;
  --orange:#e8913f;
  --gold:#f2c14e;
  --blue:#4a9de8;
  --chips:#5fb7ef;
  --mult:#ff6b6b;
  --green:#4caf6d;
  --purple:#a06be0;
  --font-num:"Pixelify Sans","Microsoft YaHei","PingFang SC","Noto Sans SC","Courier New",monospace;
  --font-cn:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}
html,body{overflow:hidden}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% 30%, #1b2d22 0%, var(--bg1) 55%, var(--bg0) 100%);
  color:var(--ink);
  font-family:var(--font-cn);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* CRT 扫描线 + 晕影 + 桌面纹理 */
#crt{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 50% 8%, rgba(120,200,150,.05), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 16px);
}

/* ---------- 全局抖动 ---------- */
#wobble{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  animation:wob 4.2s ease-in-out infinite;will-change:transform}
@keyframes wob{
  0%,100%{transform:rotate(-.26deg) scale(1.003)}
  50%{transform:rotate(.3deg) scale(1.007)}
}
#app{width:min(1180px,98vw);height:min(760px,97vh);position:relative}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hidden{display:none !important}

/* ---------- 按钮 ---------- */
.btn{
  font-family:var(--font-num);font-weight:700;letter-spacing:.06em;
  border:none;border-radius:10px;cursor:pointer;color:#fff;
  padding:10px 22px;font-size:19px;position:relative;
  box-shadow:0 5px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.22);
  transition:transform .08s, box-shadow .08s, filter .12s;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.12)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.22)}
.btn:disabled{filter:grayscale(.85) brightness(.65);cursor:not-allowed;transform:none}
.btn-red{background:linear-gradient(#e0454c,#a92e35)}
.btn-orange{background:linear-gradient(#e8913f,#b5651d)}
.btn-green{background:linear-gradient(#4caf6d,#2e7a48)}
.btn-dark{background:linear-gradient(#3a4a40,#232e27)}
.btn-big{font-size:24px;padding:14px 34px;border-radius:13px}
.btn .btn-hint{font-size:11px;opacity:.85;font-weight:400;letter-spacing:0;text-shadow:none}

/* ============================================================
   主菜单
   ============================================================ */
.menu-box{display:flex;flex-direction:column;align-items:center;gap:18px;position:relative}
.menu-title{text-align:center;line-height:.95;animation:pop-in .5s cubic-bezier(.2,1.6,.4,1)}
.mt-line{display:block;font-family:var(--font-cn);font-weight:900;font-size:104px;
  color:var(--red);text-shadow:5px 5px 0 var(--red-deep), 10px 10px 0 rgba(0,0,0,.35);
  -webkit-text-stroke:2px #2a0d10;letter-spacing:.14em;margin-right:-.14em}
.mt-deck{color:var(--gold);text-shadow:5px 5px 0 #7a5a12, 10px 10px 0 rgba(0,0,0,.35);-webkit-text-stroke:2px #2a2208}
.mt-sub{display:block;margin-top:14px;font-size:20px;letter-spacing:.55em;color:var(--ink-dim)}
.menu-cards{position:relative;width:300px;height:110px;margin:6px 0}
.menu-card{position:absolute;font-size:64px;width:86px;height:112px;border-radius:10px;
  background:#f6f1e3;color:#20303f;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.5);border:2px solid #fff;
  animation:float 2.6s ease-in-out infinite}
.mc1{left:10px;transform:rotate(-12deg);color:#c33}
.mc2{left:110px;top:-8px;transform:rotate(0deg);animation-delay:.4s}
.mc3{left:210px;transform:rotate(12deg);color:#c33;animation-delay:.8s}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-10px}}
.menu-foot{font-size:12px;color:var(--ink-dim);opacity:.7;margin-top:4px}
@keyframes pop-in{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* 玩法说明 */
.rules{position:absolute;inset:0;background:rgba(4,10,6,.72);display:flex;align-items:center;justify-content:center;z-index:50;border-radius:14px}
.rules-card{background:var(--panel);border:3px solid var(--line);border-radius:14px;padding:26px 32px;max-width:560px;
  box-shadow:0 14px 40px rgba(0,0,0,.6)}
.rules-card h2{font-family:var(--font-num);color:var(--gold);margin-bottom:12px;font-size:26px}
.rules-card li{margin:9px 0 9px 20px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.rules-card b{color:var(--gold)}
.rules-card .btn{margin-top:14px}

/* ============================================================
   盲注选择
   ============================================================ */
.blind-title{font-family:var(--font-num);font-size:34px;font-weight:700;color:var(--ink);margin-bottom:8px;
  text-shadow:3px 3px 0 rgba(0,0,0,.4)}
.blind-ante{font-size:20px;color:var(--gold);margin-left:10px}
.blind-row{display:flex;gap:26px;margin:18px 0 26px}
.blind-sel{
  width:215px;height:305px;border-radius:13px;position:relative;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;padding-top:18px;gap:6px;
  border:3px solid var(--line);
  box-shadow:0 8px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.18);
  transition:transform .12s;
}
.blind-sel:hover{transform:translateY(-6px) scale(1.03)}
.blind-sel.locked{filter:grayscale(.9) brightness(.55);cursor:not-allowed}
.blind-sel.locked:hover{transform:none}
.blind-sel .b-tag{font-family:var(--font-num);font-size:17px;font-weight:700;color:rgba(0,0,0,.75);
  background:rgba(255,255,255,.85);padding:2px 12px;border-radius:6px}
.blind-sel .b-emoji{font-size:74px;margin:10px 0 2px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.blind-sel .b-name{font-size:21px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.blind-sel .b-mult{font-family:var(--font-num);font-size:34px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.blind-sel .b-target{font-size:14px;color:rgba(255,255,255,.92)}
.blind-sel .b-desc{position:absolute;bottom:10px;left:12px;right:12px;font-size:11.5px;line-height:1.4;
  background:rgba(0,0,0,.28);border-radius:7px;padding:6px 8px;color:#fff}
.blind-sel .b-reward{position:absolute;top:14px;right:-12px;background:var(--gold);color:#3a2a05;
  font-family:var(--font-num);font-weight:700;padding:3px 9px;border-radius:7px;font-size:15px;
  box-shadow:0 3px 0 rgba(0,0,0,.35);transform:rotate(6deg)}

/* ============================================================
   游戏主界面
   ============================================================ */
.game-grid{display:flex;width:100%;height:100%;gap:12px;padding:12px 14px}
.left-col{width:198px;display:flex;flex-direction:column;gap:9px;flex-shrink:0}
.center-col{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}

.panel{background:linear-gradient(180deg,#243b2d,#192a20);border:2px solid var(--line);border-radius:11px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.38)}
.left-col > *{box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.32)}

/* 盲注卡 */
.blind-card{padding:9px 11px;border-radius:10px;border:2px solid var(--line);
  background:linear-gradient(160deg,#5a2734,#3c1a24);box-shadow:0 3px 8px rgba(0,0,0,.35);position:relative;overflow:hidden}
.blind-card::after{content:"💲";position:absolute;right:-8px;bottom:-14px;font-size:56px;opacity:.10;pointer-events:none}
.blind-card.boss{background:linear-gradient(160deg,#4a2a63,#2c1839);animation:bossPulse 2.2s ease-in-out infinite}
.blind-card.boss::after{content:"💀"}
@keyframes bossPulse{50%{box-shadow:0 0 16px rgba(224,69,76,.45), 0 3px 8px rgba(0,0,0,.35)}}
.blind-name{font-family:var(--font-num);font-weight:700;font-size:19px;color:#fff}
.blind-desc{font-size:11px;color:#f3cfd4;line-height:1.35;margin-top:3px;min-height:28px}
.blind-reward{font-family:var(--font-num);font-size:13px;color:var(--gold);margin-top:4px}

/* 分数池 */
.score-pot{padding:8px 10px 10px;text-align:center;position:relative}
.pot-label{font-size:11px;color:var(--ink-dim);letter-spacing:.3em}
.pot-val{font-family:var(--font-num);font-size:37px;font-weight:700;color:var(--red);
  text-shadow:2px 2px 0 rgba(0,0,0,.4);line-height:1.05;transition:transform .1s}
.pot-val.bump{animation:bump .25s}
.pot-target{font-family:var(--font-num);font-size:15px;color:var(--ink-dim)}
@keyframes bump{50%{transform:scale(1.22)}}

/* 手牌型信息 */
.hand-info{padding:8px 10px;text-align:center}
.hi-name{font-size:16px;font-weight:700;color:var(--ink);min-height:22px}
.hi-lvl{display:inline-block;font-family:var(--font-num);font-size:12px;font-weight:700;
  background:#3f5d8a;color:#fff;border-radius:5px;padding:1px 8px;margin:3px 0}
.hi-scores{display:flex;justify-content:center;align-items:center;gap:6px}
.chips-num,.mult-num{font-family:var(--font-num);font-weight:700;font-size:24px;min-width:52px;
  padding:1px 8px;border-radius:6px;transition:transform .1s}
.chips-num{background:#0e2b3f;color:var(--chips)}
.mult-num{background:#3f0e14;color:var(--mult)}
.hi-scores .x{font-family:var(--font-num);font-size:20px;font-weight:700;color:var(--ink-dim)}
.chips-num.flash{animation:flashc .22s}
.mult-num.flash{animation:flashm .22s}
@keyframes flashc{50%{transform:scale(1.25);background:#1b4d70}}
@keyframes flashm{50%{transform:scale(1.25);background:#751b26}}
.hi-played{font-size:11px;color:var(--ink-dim);margin-top:4px}

/* 次数 / 金钱 / 底注 */
.counts{display:flex;gap:9px}
.cnt{flex:1;padding:7px 8px;text-align:center}
.cnt-label{display:block;font-size:11px;color:var(--ink-dim)}
.cnt-val{font-family:var(--font-num);font-size:29px;font-weight:700}
.hands{color:var(--red)}
.discards{color:var(--orange)}
.money-box{padding:7px 10px;text-align:center;font-family:var(--font-num);font-size:25px;font-weight:700;color:var(--gold)}
.money-box.bump{animation:bump .3s}
.ante-box{padding:6px 10px;font-size:13px;color:var(--ink-dim);display:flex;justify-content:space-around}

/* ---------- 小丑区 ---------- */
.joker-row{display:flex;gap:8px;min-height:118px;padding:6px 8px;align-items:center;overflow:visible}
.slot{width:78px;height:104px;border-radius:9px;border:2px dashed rgba(255,255,255,.16);flex-shrink:0}

/* ---------- 牌桌区 ---------- */
.table-area{flex:1;display:flex;gap:10px;min-height:0}
.consumables{width:96px;display:flex;flex-direction:column;gap:8px;padding:6px;align-items:center}
.consumables .slot{width:82px;height:110px;border-style:solid;border-color:rgba(255,255,255,.13)}
.play-area{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;
  background:rgba(0,0,0,.14);border:2px solid var(--line);border-radius:12px}
.play-empty{color:rgba(233,245,230,.28);font-size:14px;letter-spacing:.35em}

/* 通用小卡（小丑/消耗品） */
.jcard{width:78px;height:104px;border-radius:9px;cursor:pointer;position:relative;flex-shrink:0;
  border:2px solid #0d1310;box-shadow:0 4px 0 rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 3px;
  transition:transform .1s;overflow:hidden}
.jcard:hover{transform:translateY(-5px) scale(1.05);z-index:5}
.jcard .jc-emoji{font-size:37px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.jcard .jc-name{font-size:10.5px;font-weight:700;color:#fff;text-align:center;line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.jcard.r-common{background:linear-gradient(165deg,#4a7fb5,#2c4d75)}
.jcard.r-uncommon{background:linear-gradient(165deg,#4ca868,#2c6b40)}
.jcard.r-rare{background:linear-gradient(165deg,#c25058,#7d2e35)}
.jcard.r-planet{background:linear-gradient(165deg,#5a5f8f,#33375c)}
.jcard.r-tarot{background:linear-gradient(165deg,#7a4f9e,#4a2d63)}
.jcard.disabled{filter:grayscale(.9) brightness(.55)}
.jcard .jc-cost{position:absolute;bottom:2px;right:4px;font-family:var(--font-num);font-size:12px;color:var(--gold);font-weight:700}

/* Foil/Holo/Poly 光效 */
.jcard.ed-foil::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(90,170,255,.5),transparent 55%);pointer-events:none}
.jcard.ed-holo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,120,200,.45),transparent 60%);pointer-events:none}
.jcard.ed-poly::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,80,80,.4),rgba(255,230,80,.35),rgba(90,255,160,.4),rgba(120,120,255,.4));pointer-events:none;animation:polyspin 3s linear infinite}
@keyframes polyspin{50%{filter:hue-rotate(40deg)}}

/* 计分显示 */
.score-display{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;z-index:4;
  background:rgba(10,16,12,.82);border:2px solid var(--line);border-radius:10px;padding:8px 14px;min-width:120px}
.sd-chips,.sd-mult{font-family:var(--font-num);font-weight:700;font-size:26px;padding:0 10px;border-radius:6px}
.sd-chips{color:var(--chips);background:#0e2b3f}
.sd-mult{color:var(--mult);background:#3f0e14}
.sd-x{font-family:var(--font-num);color:var(--ink-dim);font-size:15px;font-weight:700}
.sd-eq{font-family:var(--font-num);color:var(--gold);font-size:19px;font-weight:700}
.score-display.flash{animation:bump .2s}

/* ---------- 底部手牌 ---------- */
.bottom-row{display:flex;align-items:center;gap:12px;min-height:0}
.deck-pile,.discard-pile{width:88px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.pile-card{width:66px;height:90px;border-radius:8px;background:linear-gradient(160deg,#37221f,#241412);
  border:2px solid #54382f;box-shadow:0 3px 6px rgba(0,0,0,.4);position:relative}
.pile-card::before{content:"🃏";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;opacity:.55}
.pile-card.disc{background:linear-gradient(160deg,#3a3f35,#24281f);border-color:#4c5442}
.pile-card.disc::before{content:"🗑"}
.pile-num{font-family:var(--font-num);font-size:16px;color:var(--ink-dim);font-weight:700}
.hand-row{flex:1;display:flex;justify-content:center;gap:7px;min-height:126px;align-items:flex-end;padding-bottom:2px}

/* 扑克牌 */
.pcard{width:92px;height:126px;border-radius:10px;cursor:pointer;position:relative;flex-shrink:0;
  background:linear-gradient(170deg,#fbf7ea,#efe7d2);
  border:2px solid #fff;outline:2px solid rgba(0,0,0,.35);
  box-shadow:0 3px 0 #c9bfa4, 0 6px 10px rgba(0,0,0,.45);
  transition:transform .09s cubic-bezier(.3,1.3,.4,1), margin .15s;
  transform-origin:50% 100%;
}

/* 低性能自动降级：帧率不足时关闭全屏晃动与粒子层 */
body.low-fx #wobble{animation:none}
body.low-fx #fx-canvas{display:none}
body.low-fx .jcard.ed-poly::after{animation:none}

/* FPS 计数器 */
#fps-meter{position:fixed;top:8px;right:12px;z-index:990;font-family:var(--font-num);font-weight:700;
  font-size:15px;color:#7ddb8f;background:rgba(8,14,10,.75);border:1px solid rgba(255,255,255,.16);
  border-radius:7px;padding:3px 10px;cursor:pointer;user-select:none}
#fps-meter.warn{color:var(--gold)}
#fps-meter.bad{color:#ff6b6b}
.pcard:hover{transform:translateY(-12px) rotate(-2deg)}
.pcard.sel{transform:translateY(-30px)}
.pcard .pc-corner{position:absolute;top:4px;left:7px;line-height:1;text-align:center}
.pcard .pc-rank{font-family:Verdana,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:25px;
  letter-spacing:-1px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.pcard .pc-suit{font-size:18px;margin-top:1px}
.pcard .pc-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px}
.pcard.red{color:#cf3040}.pcard.black{color:#252b33}
/* 增强卡底色 */
.pcard.enh-bonus{background:linear-gradient(170deg,#b9d5f2,#8fb5e0)}
.pcard.enh-mult{background:linear-gradient(170deg,#f2b9b9,#e08f8f)}
.pcard.enh-glass{background:linear-gradient(170deg,rgba(220,240,255,.92),rgba(180,215,240,.85));border-style:dashed}
.pcard.enh-steel{background:linear-gradient(170deg,#c8cdd4,#9aa2ac)}
.pcard.enh-gold{background:linear-gradient(170deg,#f5dc8f,#e0b64a)}
.pcard.enh-lucky{background:linear-gradient(170deg,#d9f2b9,#b5e08f)}
.pcard.enh-stone{background:linear-gradient(170deg,#a89f93,#7a7268)}
.pcard.enh-stone .pc-big{font-size:38px}
.pcard.enh-wild .pc-big{font-size:30px;line-height:1}
/* 计分时 */
.pcard.scoring{animation:scorepop .38s;--glow:rgba(95,183,239,.85)}
.pcard.scoring.red{--glow:rgba(255,107,107,.9)}
.pcard.scoring{box-shadow:0 3px 0 #c9bfa4, 0 0 22px var(--glow)}
.pcard.sel.member{box-shadow:0 0 0 3px var(--gold), 0 3px 0 #c9bfa4, 0 6px 10px rgba(0,0,0,.45)}
.jcard.scoring{animation:jpop .4s;box-shadow:0 0 20px rgba(242,193,78,.75), 0 4px 0 rgba(0,0,0,.42)}
@keyframes jpop{35%{transform:translateY(-12px) scale(1.18) rotate(-3deg)}}
.pcard.shatter{animation:shatter .5s forwards}
@keyframes shatter{to{transform:translateY(30px) rotate(24deg) scale(.6);opacity:0}}
/* 出牌飞入 */
.play-area .pcard.flyin{animation:flyin .34s cubic-bezier(.25,1.4,.4,1) backwards}
@keyframes flyin{from{transform:translateY(190px) scale(.72);opacity:0}}
/* 出牌震动（分级） */
#app.shake{animation:shake .16s}
@keyframes shake{25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,2px)}75%{transform:translate(2px,1px)}}
#app.shake2{animation:shake2 .22s}
@keyframes shake2{20%{transform:translate(4px,-3px)}40%{transform:translate(-4px,3px)}60%{transform:translate(3px,2px)}80%{transform:translate(-3px,-2px)}}
#app.shake3{animation:shake3 .3s}
@keyframes shake3{15%{transform:translate(6px,-5px) rotate(.4deg)}30%{transform:translate(-6px,4px)}45%{transform:translate(5px,3px) rotate(-.4deg)}60%{transform:translate(-4px,-3px)}75%{transform:translate(3px,-2px)}}

/* ============================================================
   计分爽感动效：粒子 / 浮字 / 受击闪光 / 飞行总分
   ============================================================ */
.ptc{position:absolute;width:9px;height:9px;z-index:180;pointer-events:none;border-radius:2px;
  animation:ptc .62s ease-out forwards;box-shadow:0 0 7px rgba(255,255,255,.4)}
.ptc.x{width:12px;height:12px;border-radius:50%}
@keyframes ptc{
  from{opacity:1;transform:translate(0,0) scale(1.25) rotate(0)}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25) rotate(180deg)}}

.float-txt{position:absolute;font-family:var(--font-num);font-weight:700;font-size:27px;pointer-events:none;z-index:190;
  -webkit-text-stroke:1.2px rgba(0,0,0,.55);text-shadow:0 3px 6px rgba(0,0,0,.5);
  animation:floatup2 .95s cubic-bezier(.2,1.5,.4,1) forwards}
.float-txt.fc{color:#7cc8ff}.float-txt.fm{color:#ff7b7b;font-size:29px}
.float-txt.fx{color:#ff4fd8;font-size:34px;-webkit-text-stroke:1.6px rgba(0,0,0,.6);
  animation:floatx .95s cubic-bezier(.2,1.5,.4,1) forwards}
.float-txt.fmoney{color:var(--gold);font-size:25px}
@keyframes floatup2{
  from{opacity:0;transform:translateX(-50%) scale(.25)}
  22%{opacity:1;transform:translateX(-50%) scale(1.45)}
  40%{transform:translateX(-50%) scale(1)}
  to{opacity:0;transform:translateX(-50%) translateY(-54px) scale(1.06)}}
@keyframes floatx{
  from{opacity:0;transform:translateX(-50%) scale(.2) rotate(-8deg)}
  20%{opacity:1;transform:translateX(-50%) scale(1.7) rotate(3deg)}
  38%{transform:translateX(-50%) scale(1.1) rotate(-2deg)}
  to{opacity:0;transform:translateX(-50%) translateY(-60px) scale(1.2)}}

/* 计分框受击 */
.sd-chips.hit,.sd-mult.hit{animation:sdhit .32s}
@keyframes sdhit{35%{transform:scale(1.45);box-shadow:0 0 20px currentColor}}
.score-display.xblast{animation:xblast .45s}
@keyframes xblast{25%{box-shadow:0 0 34px rgba(255,79,216,.85);transform:translateY(-50%) scale(1.1)}60%{box-shadow:0 0 12px rgba(255,79,216,.4)}}

/* 结算：总分飞向分数池 */
.fly-score{position:absolute;z-index:200;pointer-events:none;font-family:var(--font-num);font-weight:700;
  font-size:34px;color:var(--gold);-webkit-text-stroke:1.5px rgba(0,0,0,.55);
  text-shadow:0 0 18px rgba(242,193,78,.8), 0 4px 8px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.35,0,.25,1), opacity .55s}

/* canvas 特效层（粒子/纸屑/冲击波），位于 UI 之上、CRT 扫描线之下 */
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:800}

/* 打出/弃牌：卡牌克隆飞向弃牌堆 */
.fly-card{position:absolute;z-index:170;pointer-events:none;
  transition:transform .46s cubic-bezier(.5,0,.72,.6), opacity .46s !important}
/* 新抽的手牌：从下方逐张发入 */
.hand-row .pcard.dealin{animation:dealin .34s cubic-bezier(.25,1.3,.4,1) backwards}
@keyframes dealin{from{transform:translateY(74px) scale(.55);opacity:0}}
/* 浮动加分文字 */
.float-txt{position:absolute;font-family:var(--font-num);font-weight:700;font-size:22px;pointer-events:none;z-index:60;
  animation:floatup .8s forwards;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.float-txt.fc{color:var(--chips)}.float-txt.fm{color:var(--mult);font-size:24px}
.float-txt.fx{color:#ff4fd8;font-size:26px}.float-txt.fmoney{color:var(--gold);font-size:22px}
@keyframes floatup{from{opacity:1;transform:translateY(0) scale(.8)}30%{transform:translateY(-14px) scale(1.15)}to{opacity:0;transform:translateY(-46px) scale(1)}}

/* 出牌区中的牌(定格) */
.play-area .pcard{cursor:default}
.play-area .pcard:hover{transform:none}

/* 操作按钮行 */
.action-row{display:flex;gap:12px;justify-content:center;align-items:center}
.btn-play,.btn-discard{font-size:23px;padding:8px 30px}
.sort-btn{font-family:var(--font-cn);font-size:12.5px;padding:8px 13px;align-self:center}
.side-btn{background:var(--panel2);color:var(--ink-dim);border:1px solid var(--line);border-radius:8px;
  cursor:pointer;transition:filter .12s}
.side-btn:hover{filter:brightness(1.3)}

/* ============================================================
   商店
   ============================================================ */
.shop-wrap{width:min(980px,94%);display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(160deg,#243a2c,#182a1e);border:3px solid var(--line);border-radius:16px;
  padding:20px 26px;box-shadow:0 16px 50px rgba(0,0,0,.55)}
.shop-top{display:flex;align-items:center;justify-content:space-between}
.shop-money{font-family:var(--font-num);font-size:26px;font-weight:700;color:var(--gold)}
.shop-logo{font-family:var(--font-num);font-size:40px;font-weight:700;color:var(--gold);
  text-shadow:4px 4px 0 rgba(0,0,0,.4);letter-spacing:.2em}
.shop-cards,.shop-vouchers{display:flex;gap:18px;justify-content:center;min-height:132px}
.shop-vouchers{min-height:118px}
.shop-item{position:relative}
.shop-item .price-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-num);font-weight:700;background:var(--gold);color:#3a2a05;font-size:15px;
  padding:2px 10px;border-radius:7px;box-shadow:0 3px 0 rgba(0,0,0,.35);z-index:3}
.shop-item .jcard{width:96px;height:128px}
.shop-item .jcard .jc-emoji{font-size:46px}
.shop-item .jcard .jc-name{font-size:12px}
.shop-item.sold .jcard{filter:grayscale(1) brightness(.4);pointer-events:none}
.shop-bottom{display:flex;gap:20px;align-items:center}
.shop-joker-row{flex:1;display:flex;gap:8px;min-height:104px;align-items:center;padding:4px 8px}
.shop-note{font-size:11.5px;color:var(--ink-dim);text-align:center;margin-top:2px}

/* ============================================================
   覆盖层
   ============================================================ */
#overlay{position:absolute;inset:0;background:rgba(3,8,5,.78);z-index:100;
  display:flex;align-items:center;justify-content:center;border-radius:12px}
#overlay-content{animation:pop-in .35s cubic-bezier(.2,1.5,.4,1)}
.ov-box{background:var(--panel);border:3px solid var(--line);border-radius:16px;padding:26px 34px;
  min-width:380px;max-width:620px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.ov-title{font-family:var(--font-num);font-size:34px;font-weight:700;margin-bottom:6px}
.ov-title.win{color:var(--green)}
.ov-title.lose{color:var(--red)}
.ov-title.gold{color:var(--gold)}
.ov-sub{color:var(--ink-dim);font-size:14px;margin-bottom:16px}
.ov-rows{margin:14px 0;min-width:300px}
.ov-row{display:flex;justify-content:space-between;gap:40px;padding:6px 4px;font-size:15.5px;
  border-bottom:1px dashed rgba(255,255,255,.12)}
.ov-row b{font-family:var(--font-num);color:var(--gold);font-size:17px}
.ov-row.total{border-bottom:none;margin-top:6px;font-weight:700}
.ov-btns{display:flex;gap:12px;justify-content:center;margin-top:8px}

/* 详情弹层 */
.detail-box{background:var(--panel);border:3px solid var(--line);border-radius:14px;padding:18px 22px;
  min-width:330px;max-width:430px;text-align:center;box-shadow:0 14px 50px rgba(0,0,0,.6)}
.detail-box .jcard{margin:0 auto 10px;cursor:default}
.detail-box .jcard:hover{transform:none}
.d-name{font-size:19px;font-weight:700;color:var(--gold)}
.d-rarity{font-size:12px;color:var(--ink-dim);margin:2px 0 8px}
.d-desc{font-size:14.5px;line-height:1.55;min-height:44px;color:var(--ink)}
.d-price{font-family:var(--font-num);color:var(--gold);font-weight:700;font-size:17px;margin:8px 0}
.d-btns{display:flex;gap:10px;justify-content:center;margin-top:10px}

/* 牌组查看 */
.run-deck{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;margin:10px 0}
.run-deck .mini{font-family:var(--font-num);font-size:13px;font-weight:700;background:#f4eeda;color:#333;
  border-radius:4px;text-align:center;padding:2px 1px;cursor:default}
.run-deck .mini.red{color:#cf3040}

/* 提示浮层 */
#tooltip{position:fixed;z-index:200;background:rgba(8,14,10,.95);border:1px solid var(--gold);
  border-radius:8px;padding:8px 12px;font-size:12.5px;max-width:230px;line-height:1.5;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.5)}

/* 屏幕切换 */
.screen{animation:screenin .3s ease}
@keyframes screenin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

/* 目标选择模式 */
.pcard.targetable{box-shadow:0 0 0 3px var(--gold),0 3px 0 #c9bfa4,0 6px 10px rgba(0,0,0,.45)}
.consumables .jcard.using{animation:bump .6s infinite;box-shadow:0 0 0 3px var(--gold),0 4px 0 rgba(0,0,0,.42)}
.target-hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3a2a05;
  font-weight:700;font-size:13px;padding:4px 16px;border-radius:8px;z-index:30;white-space:nowrap}

/* ============================================================
   新手教程气泡
   ============================================================ */
#tutor{position:absolute;left:50%;top:24%;transform:translateX(-50%);z-index:150;
  background:linear-gradient(170deg,#f8f3e4,#ece4cd);color:#26301f;
  border:3px solid #101810;border-radius:13px;padding:14px 18px 12px;max-width:560px;
  box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.7);
  animation:pop-in .3s cubic-bezier(.2,1.5,.4,1)}
#tutor .t-tag{font-family:var(--font-num);font-weight:700;font-size:12px;letter-spacing:.15em;
  color:#8a6d1c;margin-bottom:5px}
#tutor .t-text{font-size:14.5px;line-height:1.65}
#tutor .t-text b{color:#a3352f}
#tutor .t-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
#tutor .btn{font-size:14px;padding:6px 16px}
#tutor.t-arrow::before{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#101810}

/* 结算行弹出动画 */
.ov-row{animation:rowIn .35s backwards}
.ov-row:nth-child(1){animation-delay:.05s}.ov-row:nth-child(2){animation-delay:.15s}
.ov-row:nth-child(3){animation-delay:.25s}.ov-row:nth-child(4){animation-delay:.35s}
.ov-row:nth-child(5){animation-delay:.45s}.ov-row:nth-child(6){animation-delay:.55s}
@keyframes rowIn{from{opacity:0;transform:translateX(-18px)}}

/* 「还差X分」提示 */
.pot-need{font-size:12px;color:var(--gold);margin-top:2px;min-height:16px}
.pot-need.done{color:var(--green)}

/* 帮助按钮 */
.help-btn{width:100%;padding:7px 0;font-size:13px;letter-spacing:.1em}

/* 商店商品入场 */
.shop-item{animation:pop-in .3s backwards}
.shop-item:nth-child(2){animation-delay:.06s}
.shop-item:nth-child(3){animation-delay:.12s}
.shop-item:nth-child(4){animation-delay:.18s}

/* ===== 手机适配（横屏优先，兼顾窄屏） ===== */
/* 基础视口：允许 app 撑满屏幕 */
@media (max-width: 900px){
  body{padding:0}
  #app{width:100vw;height:100dvh;min-height:100dvh;border-radius:0;border:none}
  /* 菜单 */
  .mt-line{font-size:56px}
  .mt-sub{font-size:13px;letter-spacing:.4em}
  .menu-card{font-size:40px;width:56px;height:74px}
  .btn{font-size:15px;padding:8px 16px}
  .btn-big{font-size:17px;padding:10px 24px}
  .rules-card{width:92vw;max-width:92vw;max-height:82dvh;overflow-y:auto;padding:16px}
  .rules-card li{font-size:12.5px}
  /* 盲注选择 */
  .blind-title{font-size:20px}
  .blind-row{gap:8px}
  .blind-sel{padding:10px 8px;min-width:100px}
  .blind-sel .b-emoji{font-size:44px}
  .blind-sel .b-name{font-size:14px}
  .blind-sel .b-mult{font-size:22px}
  .blind-sel .b-desc{font-size:9.5px}
}

/* 手机横屏：紧凑布局，左栏收窄，卡牌缩小 */
@media (max-height: 520px) and (orientation: landscape){
  #app{width:100vw;height:100dvh}
  /* 内容可能超出时从顶部对齐，避免 flex 居中把上下两端同时裁掉 */
  #screen-game .game-grid,
  #screen-blind,
  #screen-menu{justify-content:flex-start}
  .screen{overflow:hidden}
  /* 兜底：Chrome 最小字号限制会让小字号失效，改用 transform 缩放保险 */
  .game-grid{gap:6px;padding:6px 8px;overflow:hidden}
  /* 左栏改为窄条；内容超高时可滚动，确保顶部（小盲注卡）始终可见 */
  .left-col{width:118px;gap:5px;overflow-y:auto;min-height:0;justify-content:flex-start}
  .blind-card{flex-shrink:0}
  .counts{gap:5px}
  .help-btn{width:auto;padding:5px 6px;font-size:10px}
  .blind-name{font-size:13px}
  .blind-desc{display:none}
  .blind-reward{font-size:11px}
  .blind-card{padding:5px 8px}
  .score-pot{padding:4px 6px 6px}
  .hand-info{padding:4px 6px}
  .pot-label{font-size:9px;letter-spacing:.2em}
  .pot-val{font-size:24px}
  .pot-target{font-size:11px}
  .pot-need{font-size:10px;min-height:12px}
  .hi-name{font-size:12px;min-height:16px}
  .hi-lvl{font-size:9px;padding:1px 6px}
  .hi-scores{gap:4px}
  .chips-num,.mult-num{font-size:15px;min-width:38px;padding:1px 5px}
  .hi-scores .x{font-size:12px}
  .hi-played{font-size:9px;margin-top:2px}
  .counts{gap:5px}
  .cnt{padding:4px 8px}
  .cnt-label{font-size:9px}
  .cnt-val{font-size:16px}
  .money-box{font-size:17px;padding:4px 6px}
  .ante-box{font-size:10px;padding:3px 6px}
  .side-btn{font-size:11px;padding:5px 8px}
  .help-btn{padding:5px 0;font-size:11px}
  /* 中央区 */
  .center-col{gap:4px}
  .joker-row{min-height:72px;gap:5px;padding:2px 4px}
  .slot{width:52px;height:70px}
  .jcard{width:52px;height:70px;border-radius:7px}
  .jcard .jc-emoji{font-size:24px}
  .jcard .jc-name{font-size:8px}
  .jcard .jc-cost{font-size:10px}
  .consumables{width:60px;gap:4px}
  .consumables .slot{width:50px;height:68px}
  .play-area{gap:6px}
  .pcard{width:60px;height:84px;border-radius:7px}
  .pcard .pc-rank{font-size:16px}
  .pcard .pc-suit{font-size:12px}
  .pcard .pc-big{font-size:30px}
  .pcard.enh-stone .pc-big{font-size:25px}
  .pcard.enh-wild .pc-big{font-size:20px}
  .hand-row{min-height:88px;gap:5px}
  .bottom-row{gap:8px}
  .deck-pile,.discard-pile{width:56px}
  .pile-card{width:42px;height:58px}
  .pile-card::before{font-size:19px}
  .pile-num{font-size:12px}
  .action-row{gap:8px}
  .btn-play,.btn-discard{font-size:15px;padding:6px 18px}
  .btn .btn-hint{font-size:9px}
  .sort-btn{font-size:11px;padding:4px 10px}
  .score-display{min-width:84px;padding:4px 6px;right:6px;gap:1px}
  .sd-chips,.sd-mult{font-size:15px;padding:0 5px}
  .sd-x{font-size:11px}
  .sd-eq{font-size:13px}
  .float-txt{font-size:16px}
  .float-txt.fm{font-size:17px}
  .float-txt.fx{font-size:19px}
  .fly-score{font-size:22px}
  /* 覆盖层/结算/详情/教程：解除 min-width 限制 */
  .ov-box{min-width:0;max-width:92vw;padding:14px 18px}
  .ov-title{font-size:22px}
  .ov-rows{min-width:0}
  .ov-row{gap:16px;font-size:13px}
  .ov-row b{font-size:14px}
  .ov-btns{gap:8px}
  .ov-btns .btn{font-size:13px;padding:7px 14px}
  .detail-box{min-width:0;max-width:88vw;padding:12px 16px}
  .d-name{font-size:15px}
  .d-desc{font-size:12px;min-height:0}
  #tutor{max-width:88vw;padding:10px 12px}
  #tutor .t-text{font-size:12px;line-height:1.5}
  .target-hint{font-size:11px;padding:3px 10px}
  #fps-meter{font-size:11px;padding:2px 6px}
  /* 牌组查看 13 列网格：窄格缩字 */
  .run-deck .mini{font-size:9px;padding:1px 0}
  .run-deck{gap:2px}
  /* 商店 */
  .shop-wrap{width:96%;padding:10px 14px;gap:8px}
  .shop-top{gap:8px}
  .shop-money{font-size:18px}
  .shop-logo{font-size:22px}
  .shop-cards,.shop-vouchers{min-height:100px;gap:10px}
  .shop-item .jcard{width:70px;height:94px}
  .shop-item .jcard .jc-emoji{font-size:32px}
  .shop-item .jcard .jc-name{font-size:9px}
  .shop-item .price-tag{font-size:12px;padding:1px 7px;top:-9px}
  .shop-bottom{gap:10px}
  .shop-joker-row{min-height:74px}
  .shop-note{font-size:10px}
  .btn-next-round{font-size:14px;padding:7px 16px}
}

/* 手机竖屏（可玩但引导横屏）：整体缩放布局 */
@media (max-width: 520px) and (orientation: portrait){
  .game-grid{flex-direction:column;padding:8px}
  .left-col{width:100%;flex-direction:row;flex-wrap:wrap;gap:6px}
  .left-col > *{flex:1;min-width:88px}
  .blind-desc{display:none}
  .pot-val{font-size:20px}
  .chips-num,.mult-num{font-size:16px;min-width:40px}
  .cnt-val{font-size:18px}
  .money-box{font-size:18px}
  .pcard{width:52px;height:73px}
  .pcard .pc-rank{font-size:14px}
  .pcard .pc-suit{font-size:11px}
  .pcard .pc-big{font-size:26px}
  .hand-row{min-height:80px;gap:4px}
  .jcard{width:48px;height:64px}
  .jcard .jc-emoji{font-size:22px}
  .jcard .jc-name{font-size:7.5px}
  .slot{width:48px;height:64px}
  .consumables{width:64px}
  .consumables .slot{width:48px;height:64px}
  .btn-play,.btn-discard{font-size:14px;padding:6px 14px}
  .deck-pile,.discard-pile{width:50px}
  .pile-card{width:38px;height:52px}
  .pile-card::before{font-size:17px}
  .score-display{min-width:76px;padding:4px 5px}
  .sd-chips,.sd-mult{font-size:13px;padding:0 4px}
  .sd-x{font-size:10px}
  .sd-eq{font-size:12px}
  /* 弹层类解除固定宽度 */
  .ov-box{min-width:0;max-width:94vw;padding:14px 14px}
  .ov-title{font-size:20px}
  .ov-rows{min-width:0}
  .ov-row{gap:12px;font-size:12.5px}
  .detail-box{min-width:0;max-width:92vw;padding:12px}
  #tutor{max-width:92vw}
  /* 盲注选择：固定 215x305 三张在竖屏必然超宽 → 改两行自适应 */
  .blind-row{flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0 14px}
  .blind-sel{width:44vw;max-width:170px;height:auto;min-height:0;padding:12px 6px 14px;gap:4px}
  .blind-sel .b-emoji{font-size:36px;margin:4px 0 2px}
  .blind-sel .b-mult{font-size:20px}
  .blind-sel .b-desc{position:static;margin-top:4px}
  .blind-sel .b-reward{right:-6px;top:8px;font-size:12px}
  .blind-title{font-size:17px}
  .menu-cards{width:220px;height:84px}
  .menu-card{font-size:30px;width:44px;height:58px}
  .mc2{left:88px}
  .mc3{left:176px}
  #tutor{top:12%}
}

/* 极窄横屏（<760px 宽）：手牌允许重叠，牌堆再缩 */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 760px){
  .pcard{width:54px;height:76px}
  .pcard .pc-rank{font-size:14px}
  .pcard .pc-suit{font-size:10px}
  .pcard .pc-big{font-size:26px}
  .hand-row{gap:0}
  .hand-row .pcard + .pcard{margin-left:-16px} /* 手牌重叠，Balatro 式 */
  .hand-row .pcard.sel{margin-left:-10px;margin-right:-10px}
  .deck-pile,.discard-pile{width:44px}
  .pile-card{width:34px;height:46px}
  .pile-card::before{font-size:15px}
  .bottom-row{gap:6px}
  .game-grid{padding:4px 6px}
}