/* 《一假难求》样式。图片路径相对本文件，所以是 ../img/。带两层背景的地方，第一层是美术图，图缺了会自动露出第二层的纯 CSS 版本。 */
:root{--cream:#F2EAD6;--card:#FBF6EA;--peach:#F3B796;--peach2:#E9A07E;--teal:#5E8F85;--navy:#2E3C55;--navy2:#1f2a3d;--coral:#E4654F;--mint:#9DC3B3;--ink:#3A3A3A;--mute:#8A8275;--gold:#E8B84A;--sky:#7fc4d8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
img{-webkit-user-drag:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#CFE0D6;font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);overflow:hidden}
button{font:inherit;color:inherit}
#app{max-width:430px;margin:0 auto;height:100vh;height:100dvh;background:var(--cream);position:relative;overflow:hidden;display:flex;flex-direction:column}
#app.shk{animation:shk var(--shd,.42s) cubic-bezier(.36,.07,.19,.97)}
@keyframes shk{10%{transform:translate(calc(var(--sh)*-1),calc(var(--sh)*.5)) rotate(calc(var(--shr)*-1))}30%{transform:translate(var(--sh),calc(var(--sh)*-.6)) rotate(var(--shr))}50%{transform:translate(calc(var(--sh)*-.7),calc(var(--sh)*.4))}70%{transform:translate(calc(var(--sh)*.5),calc(var(--sh)*-.3))}90%{transform:translate(calc(var(--sh)*-.2),calc(var(--sh)*.1))}}
#app.lost #enemy,#app.lost #field,#app.lost #you,#app.lost #hand{filter:saturate(.25) brightness(.85);transition:filter .6s}
html.hs *{animation-play-state:paused!important}
#fxc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:33}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:48;transition:opacity .2s}
#vig{position:absolute;inset:0;pointer-events:none;z-index:31;box-shadow:inset 0 0 90px 30px rgba(228,60,40,.75);opacity:0;transition:opacity .35s}
#app.danger #vig{animation:dvig 1s ease-in-out infinite}
@keyframes dvig{0%,100%{opacity:.12}50%{opacity:.5}}
#dim{position:absolute;inset:0;background:#0d1420;opacity:0;pointer-events:none;z-index:32;transition:opacity .25s}
#dim.on{opacity:.6}
.pill{background:var(--peach);border-radius:999px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),inset 0 4px 0 rgba(255,255,255,.35),0 6px 10px rgba(120,80,50,.15)}
.rbtn{width:38px;height:38px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 0 #d9cfb8;font-size:16px;font-weight:900;color:var(--navy);cursor:pointer;transition:transform .08s}
.rbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #d9cfb8}

/* ---------- 老板区 ---------- */
#enemy{position:relative;height:30vh;min-height:190px;flex:none;overflow:hidden;transition:box-shadow .15s;background:#e9dcc0}
#face{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transition:filter .1s;animation:breathe2 4.2s ease-in-out infinite;transform-origin:50% 80%}
@keyframes breathe2{50%{transform:scale(1.018) translateY(-2px)}}
#face.talk{animation:talk .15s ease-in-out infinite alternate}
@keyframes talk{to{transform:scale(1.012) translateY(-4px)}}
#enemy.hit #face{filter:brightness(1.8) saturate(.4)}
#enemy.ko #face{animation:kojit .07s linear infinite}
@keyframes kojit{0%{transform:translate(-7px,3px) rotate(-2deg) scale(1.08)}50%{transform:translate(6px,-4px) rotate(2deg) scale(1.1)}100%{transform:translate(-3px,5px) rotate(-1deg) scale(1.08)}}
.split{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-blend-mode:multiply;mix-blend-mode:lighten;opacity:0;pointer-events:none}
#splitR{background-color:#f00}#splitC{background-color:#0ff}
#aura{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;will-change:opacity}
#enemy[data-mood=smug] #aura{background:radial-gradient(circle at 50% 55%,transparent 45%,rgba(255,207,74,.55) 100%);opacity:.8}
#enemy[data-mood=mad] #aura{background:radial-gradient(circle at 50% 55%,transparent 40%,rgba(255,43,15,.6) 100%);opacity:.9;animation:aurap 1.1s ease-in-out infinite}
#enemy[data-mood=soft] #aura{background:radial-gradient(circle at 50% 55%,transparent 45%,rgba(79,180,224,.5) 100%);opacity:.8}
@keyframes aurap{50%{opacity:.5}}
#enemy::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--mc,transparent);box-shadow:0 0 18px 4px var(--mc,transparent);transition:all .4s;pointer-events:none}
#enemy[data-mood=smug]{--mc:#E8B84A}#enemy[data-mood=mad]{--mc:#E4654F}#enemy[data-mood=soft]{--mc:#7fc4d8}
#app.aim #enemy{box-shadow:inset 0 0 0 4px var(--coral)}
#app.aim-a #yrow .zone{border-color:var(--teal);background:rgba(157,195,179,.35);animation:zonep .6s ease-in-out infinite alternate}
@keyframes zonep{to{transform:scale(1.06)}}
#back{position:absolute;left:10px;top:10px;z-index:6}
#setbtn{position:absolute;left:54px;top:10px;z-index:6;font-size:15px}
#bubble{position:absolute;left:10px;top:56px;max-width:66%;background:#fff;padding:9px 13px;border-radius:14px 14px 14px 4px;font-size:14px;line-height:1.4;box-shadow:0 4px 0 #d9cfb8;opacity:0;transform:translateY(-6px) scale(.85);transform-origin:0 100%;transition:all .22s cubic-bezier(.3,1.6,.5,1);z-index:5;pointer-events:none}
#bubble.on{opacity:1;transform:none}
#moodw{position:absolute;right:10px;top:10px;text-align:right;z-index:6}
.mchips{display:inline-flex;gap:5px;background:rgba(255,255,255,.9);padding:5px 8px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.mchips i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:15px;filter:grayscale(1);opacity:.4;transition:all .28s cubic-bezier(.3,1.7,.5,1)}
.mchips i[data-m=smug]{--c:#E8B84A}.mchips i[data-m=mad]{--c:#E4654F}.mchips i[data-m=soft]{--c:#7fc4d8}
.mchips i.on{filter:none;opacity:1;transform:scale(1.38);background:var(--c);box-shadow:0 0 0 2px #fff,0 0 12px var(--c)}
#moodh{margin-top:7px;display:inline-block;background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px;box-shadow:0 3px 0 var(--navy2)}
#moodh.pop{animation:pop .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes pop{from{transform:scale(1.5)}}
#turn{position:absolute;right:10px;bottom:46px;background:rgba(46,60,85,.85);color:#fff;padding:3px 9px;border-radius:9px;font-size:12px;z-index:5}
#logbtn{position:absolute;left:98px;top:10px;width:38px;height:38px;background:#fff;border:0;border-radius:50%;font-size:15px;cursor:pointer;box-shadow:0 4px 0 #d9cfb8;z-index:6}
#intent{position:absolute;left:10px;bottom:46px;background:rgba(46,60,85,.9);color:#fff;padding:4px 10px 4px 4px;border-radius:999px;font-size:12px;display:none;align-items:center;gap:6px;z-index:6;cursor:pointer;animation:bob 1.6s ease-in-out infinite;box-shadow:0 3px 0 var(--navy2)}
#intent.on{display:flex}
#intent i{width:26px;height:26px;border-radius:50%;background:#555 center/cover;border:2px solid #fff;flex:none}
#intent b{font-weight:700}#intent em{font-style:normal;font-weight:900;color:#ffb3a3}
#intent small{font-size:12px;opacity:.8}
@keyframes bob{50%{transform:translateY(-3px)}}
#ehp{position:absolute;left:10px;right:10px;bottom:9px;padding:6px 12px 8px;display:flex;align-items:center;gap:10px;z-index:4}
#ehp.low .bar i{animation:lowhp .6s ease-in-out infinite}
@keyframes lowhp{50%{filter:brightness(1.6)}}
.hpbar small{font-size:12px;color:#6b3f2b;white-space:nowrap}
.hpbar .bar{flex:1;height:14px;border-radius:999px;background:var(--card);overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,0,.15);position:relative}
.hpbar .bar u{position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transition:width .5s ease .35s}
.hpbar .bar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#f08a76,var(--coral));transition:width .3s cubic-bezier(.2,1.3,.4,1);position:relative}
.hpbar b{font-size:15px;min-width:28px;text-align:right}
#why{position:absolute;left:50%;top:38%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:36}
#why span{background:#fff;color:var(--navy);font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px;box-shadow:0 3px 0 #d9cfb8;animation:why 1.4s forwards;white-space:nowrap}
#why span.bad{color:var(--coral)}#why span.good{color:var(--teal)}
@keyframes why{0%{opacity:0;transform:translateY(8px) scale(.6)}12%{opacity:1;transform:scale(1.12)}22%{transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#kostamp{position:absolute;left:50%;top:44%;font-size:52px;font-weight:900;letter-spacing:8px;color:var(--coral);border:7px solid var(--coral);border-radius:14px;padding:2px 16px;background:rgba(255,255,255,.25);transform:translate(-50%,-50%) rotate(-12deg) scale(0);opacity:0;z-index:7;pointer-events:none}
#kostamp.on{animation:kost .4s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes kost{from{transform:translate(-50%,-50%) rotate(-12deg) scale(3.5);opacity:0}to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}}
.moodstamp{position:absolute;font-size:58px;line-height:1;transform:translate(-50%,-50%);pointer-events:none;z-index:7;animation:mstamp .8s cubic-bezier(.2,1.4,.4,1) forwards;filter:drop-shadow(0 8px 0 rgba(0,0,0,.2))}
@keyframes mstamp{0%{transform:translate(-50%,-50%) scale(.2) rotate(-25deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.25) rotate(6deg);opacity:1}45%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1}100%{transform:translate(-50%,-70%) scale(1.1);opacity:0}}

/* ---------- 场地 ---------- */
#field{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-around;padding:4px 10px;position:relative;transition:box-shadow .6s}
#field::before{content:"";position:absolute;inset:0;background:var(--desk,none) center/cover no-repeat;opacity:.9;pointer-events:none}
#app[data-phase="1"] #field{box-shadow:inset 0 0 40px rgba(228,101,79,.18)}
#field::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(228,60,40,.5);opacity:0}
#app[data-phase="2"] #field::after{animation:rush 1.4s ease-in-out infinite}
@keyframes rush{0%,100%{opacity:.4}50%{opacity:1}}
.row{display:flex;justify-content:center;gap:6px;min-height:96px;align-items:center;position:relative;z-index:1}
.row .zone{width:70px;height:96px;border:2px dashed #d9b89c;border-radius:12px;display:grid;place-items:center;color:#8a6548;font-size:13px;background:rgba(255,255,255,.25);transition:all .2s}
.row.e .zone{border-color:#9fb0c8;color:#55657e}
#end{position:absolute;right:8px;top:50%;margin-top:-32px;width:54px;height:64px;border:0;border-radius:18px;background:linear-gradient(180deg,#b5d6c8,var(--mint));box-shadow:inset 0 -6px 0 rgba(0,0,0,.14),inset 0 3px 0 rgba(255,255,255,.4),0 5px 8px rgba(0,0,0,.15);cursor:pointer;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;line-height:1.25;color:var(--navy);transition:transform .08s,filter .2s}
#end b{display:block;font-weight:900;letter-spacing:1px}
#end:active{transform:translateY(4px)}
#end.ready{background:linear-gradient(180deg,#ffe08a,var(--gold));animation:endp 1s ease-in-out infinite}
@keyframes endp{50%{transform:translateY(-4px) scale(1.06)}}
#end:disabled{filter:grayscale(.9) brightness(.92);opacity:.75;animation:none}
#deckp{position:absolute;right:16px;bottom:8px;width:34px;height:48px;z-index:5}
#deckp i,.cback{position:absolute;inset:0;border-radius:6px;border:2px solid #efd9b8;background:url(../img/back.jpg) center/cover,radial-gradient(circle at 50% 50%,var(--peach) 0 22%,transparent 23%),repeating-linear-gradient(45deg,#34435f 0 6px,var(--navy) 6px 12px);box-shadow:0 2px 3px rgba(0,0,0,.25)}
#deckp i:nth-child(1){transform:translate(-4px,-4px) rotate(-5deg)}#deckp i:nth-child(2){transform:translate(-2px,-2px) rotate(-2deg)}
#deckp b{position:absolute;right:-8px;top:-10px;min-width:20px;height:20px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;display:grid;place-items:center;padding:0 4px;box-shadow:0 2px 0 var(--navy2)}
#deckp.shuf{animation:shuf .5s}
@keyframes shuf{25%{transform:rotate(-14deg) scale(1.15)}60%{transform:rotate(12deg) scale(1.15)}}

/* ---------- 你 ---------- */
#you{display:flex;align-items:center;gap:8px;padding:5px 12px 6px 6px;margin:0 10px;flex:none;position:relative;z-index:2;border-radius:26px}
#you.jolt{animation:jolt .32s}
@keyframes jolt{20%{transform:translate(-7px,3px) scale(1.03,.9)}45%{transform:translate(6px,-2px) scale(.98,1.06)}70%{transform:translate(-3px,1px)}}
#yav{width:42px;height:42px;border-radius:50%;flex:none;border:3px solid #fff;background:url(../img/you.jpg) center 20%/cover,linear-gradient(160deg,#cfe4f2,#9DC3B3);box-shadow:0 3px 0 rgba(0,0,0,.12);display:grid;place-items:center;font-size:20px;overflow:hidden}
#yav.hurt{animation:avh .4s}
@keyframes avh{30%{filter:brightness(1.5) sepia(1) saturate(6) hue-rotate(-40deg);transform:scale(1.15) rotate(-8deg)}}
.ycol{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.yrow1{display:flex;align-items:center;gap:8px}
#you .bar i{background:linear-gradient(180deg,#7cb3a6,var(--teal))}
#you.low .bar i{animation:lowhp .6s ease-in-out infinite}
#cups{display:flex;gap:3px;align-items:center;height:26px;--cup:24px}
#cups .cl{font-size:12px;color:#6b3f2b;margin-right:3px;white-space:nowrap}
.cup{width:var(--cup,24px);height:var(--cup,24px);border-radius:50%;flex:none;background:url(../img/cup_empty.jpg) center/cover,radial-gradient(circle,#efe3c8 0 36%,#fff 38% 62%,#dcc9a6 64%);opacity:.28;transition:opacity .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cup.full{opacity:1;background:url(../img/cup_full.jpg) center/cover,radial-gradient(circle,#6b4226 0 36%,#fff 38% 62%,#d9a66c 64%)}
.cup.gold{box-shadow:0 0 0 2px var(--gold),0 0 8px var(--gold)}
.cup.pop{animation:cupop .32s cubic-bezier(.2,1.8,.4,1)}
@keyframes cupop{from{transform:scale(2) translateY(-8px)}}
#cupn{font-weight:900;font-size:13px;color:var(--navy);margin-left:5px;white-space:nowrap}
#cupn.tax{color:var(--coral)}
#cuptax{position:absolute;left:56px;top:-13px;background:var(--coral);color:#fff;font-size:13px;font-weight:900;padding:2px 9px;border-radius:999px;box-shadow:0 3px 0 #b8321f;white-space:nowrap}

/* ---------- 手牌（扇形） ---------- */
#hand{height:212px;flex:none;position:relative;z-index:3}
#hand .card{position:absolute;left:50%;bottom:30px;margin-left:-54px;transform-origin:50% 100%;touch-action:none;transition:transform .24s cubic-bezier(.3,1.3,.5,1),filter .2s}
/* ---------- 卡牌 ---------- */
.card{width:108px;height:160px;border-radius:13px;position:relative;color:var(--ink);background:var(--card);box-shadow:0 8px 0 #cbbfa4,0 14px 22px rgba(80,50,30,.25),inset 0 2px 0 #fff;border:5px solid #efd9b8;cursor:pointer;flex:none}
.card.r{border-color:#c7d7ec}.card.n{border-color:#f0b2a3}.card.o{border-color:#f5d08a}.card.junk{border-color:#555;background:#e9e3d6}
.card.bcard{border-color:#d98a7c;background:#fff1ec;box-shadow:0 8px 0 #c98a7e,0 14px 22px rgba(80,30,20,.3),inset 0 2px 0 #fff}
.card.bcard .txt{color:#7a3b30}
.card.dim{filter:saturate(.3) brightness(.85)}
.card.cold{filter:saturate(.15) brightness(.8)}
.card.hot,.card.tgt{border-color:var(--hc,var(--gold))}
.card.hot::before,.card.tgt::before{content:"";position:absolute;inset:-9px;border-radius:19px;box-shadow:0 0 0 3px var(--hc,var(--gold)),0 0 24px 8px var(--hc,var(--gold));pointer-events:none;will-change:opacity;animation:hot 1.1s ease-in-out infinite}
@keyframes hot{0%,100%{opacity:.5}50%{opacity:1}}
.foil{position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:1;overflow:hidden}
.foil::after{content:"";position:absolute;top:0;bottom:0;left:-100%;width:100%;background:linear-gradient(115deg,transparent 20%,rgba(190,220,255,.55) 45%,rgba(255,255,255,.8) 50%,rgba(190,220,255,.55) 55%,transparent 80%);will-change:transform;animation:foil 3.2s linear infinite}
.card.o .foil::after{background:linear-gradient(115deg,transparent 10%,rgba(255,150,180,.5) 32%,rgba(255,225,120,.8) 45%,rgba(255,255,255,.85) 50%,rgba(170,255,220,.7) 55%,rgba(170,190,255,.5) 68%,transparent 90%)}
@keyframes foil{from{transform:translateX(0)}60%,to{transform:translateX(200%)}}
.st{position:absolute;z-index:3;font-weight:900;pointer-events:none}.st:empty{display:none}
.hot .st{right:-10px;top:-12px;padding:2px 7px;border-radius:999px;background:var(--hc,var(--gold));color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);font-size:12px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 3px 4px rgba(0,0,0,.25);animation:x2 .8s ease-in-out infinite}
@keyframes x2{50%{transform:scale(1.18) rotate(8deg)}}
.cold .st{left:5px;right:5px;top:36px;text-align:center;background:rgba(46,60,85,.85);color:#fff;font-size:11px;padding:3px 0;border-radius:6px}
.ty{position:absolute;left:3px;top:17px;z-index:2;font-size:11px;line-height:15px;font-weight:900;color:#fff;padding:0 5px;border-radius:6px;background:var(--mute)}
.ty-r{background:var(--sky)}.ty-p{background:var(--coral)}.ty-m{background:var(--gold);color:#5a3a00}.ty-n{background:#444}.ty-i{background:#a08a5a}.ty-a{background:var(--navy)}.ty-j{background:#222}.ty-b{background:#b8321f}
.mini .ty,.mini .st,.mini .foil{display:none}
.card.ghost{position:absolute;margin:0;z-index:40;transform-origin:50% 50%;transition:none;pointer-events:none;filter:none;animation:none;will-change:transform}
.card.ghost.no{filter:saturate(.3) brightness(.85)}
.card.ghost.drag{box-shadow:0 26px 0 -14px rgba(0,0,0,.12),0 40px 40px rgba(80,50,30,.35),inset 0 2px 0 #fff}
.card.ghost.show{box-shadow:0 0 0 4px #fff,0 0 30px 10px rgba(255,255,255,.8),0 20px 30px rgba(0,0,0,.3)}
.card.ghost.charged{box-shadow:0 0 0 5px var(--gold),0 0 44px 18px rgba(232,184,74,.95),0 20px 30px rgba(0,0,0,.3);animation:chg .1s linear infinite}
@keyframes chg{0%{filter:brightness(1)}50%{filter:brightness(1.3)}100%{filter:brightness(1)}}
.art{position:absolute;left:5px;right:5px;top:5px;height:72px;border-radius:9px;overflow:hidden;background:linear-gradient(160deg,#fde8d5,#f3b796);display:grid;place-items:center;font-size:42px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.art img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;position:absolute;inset:0;pointer-events:none}
.art img[src*="card_bigboss"],.art img[src*="card_cleaner"]{object-position:50% 0}
.ttl{position:absolute;left:0;right:0;top:79px;text-align:center;font-weight:900;font-size:14px;letter-spacing:1px;white-space:nowrap}
.txt{position:absolute;left:2px;right:2px;top:98px;font-size:11px;line-height:1.25;color:#4f483c;text-align:center}
.gem{position:absolute;min-width:28px;height:26px;padding:0 6px;border-radius:13px;display:flex;align-items:baseline;justify-content:center;line-height:25px;font-weight:900;font-size:15px;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.35),0 3px 4px rgba(0,0,0,.25);z-index:2}
.cost{left:-11px;top:-11px;background:#7a4a2a}.cost.taxed{background:var(--coral)}.atk{left:-9px;bottom:-11px;background:var(--coral)}.atk.up{background:#b8321f;box-shadow:0 0 10px #ff5a3c}.atk.zero{background:#8b8b8b}.hp{right:-9px;bottom:-11px;background:var(--teal)}
.cost::after,.atk::after,.hp::after{font-size:11px;margin-left:1px}.cost::after{content:"杯"}.atk::after{content:"伤"}.hp::after{content:"血"}
.bcard .cost{display:none}
.rar{left:50%;bottom:-8px;min-width:0;width:14px;height:14px;padding:0;transform:translateX(-50%);background:#ddd}
.rar.b{background:#5aa0e8}.rar.o{background:#ff9a2e;box-shadow:0 0 10px #ff9a2e}
.mini{width:70px;height:96px;cursor:default;border-width:3px;box-shadow:0 4px 0 #cbbfa4}
.mini .art{height:52px;font-size:26px;left:3px;right:3px;top:3px}.mini .ttl{top:56px;font-size:13px;line-height:1.1;letter-spacing:0;white-space:normal}.mini .txt{display:none}.mini .gem{min-width:22px;height:21px;padding:0 4px;line-height:20px;font-size:13px}.mini .gem::after{font-size:12px}.mini .atk{left:-4px;bottom:-9px}.mini .hp{right:-4px;bottom:-9px}.mini .cost,.mini .rar{display:none}
.mini.bing{border-color:var(--gold);background:#fff4d6}
.mini.mine{animation:idle 3s ease-in-out infinite}
.mini.mine:nth-child(2){animation-delay:-1s}.mini.mine:nth-child(3){animation-delay:-2s}
@keyframes idle{50%{transform:translateY(-4px)}}
.mini.spawn{animation:spawn .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes spawn{from{transform:scale(1.7) translateY(-30px);opacity:0}}
.mini.jolt{animation:jolt .3s}
.mini .shd{position:absolute;right:-7px;top:-9px;font-size:16px;z-index:3;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
#peek{position:absolute;left:50%;top:44%;z-index:44;pointer-events:none;margin:-80px 0 0 -54px;transform:scale(1.8);transform-origin:50% 50%;animation:peek .2s cubic-bezier(.2,1.5,.4,1);box-shadow:0 0 0 3px #fff,0 20px 40px rgba(0,0,0,.35)}
@keyframes peek{from{transform:scale(1);opacity:0}}

/* ---------- 飘字和 DOM 特效 ---------- */
.fnum{position:absolute;transform:translate(-50%,-50%);font-size:52px;font-weight:900;color:#fff;-webkit-text-stroke:3px var(--coral);paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.2);pointer-events:none;z-index:38;animation:fnum 1s forwards;white-space:nowrap}
.fnum.huge{font-size:76px;-webkit-text-stroke:4px #b8321f}
.fnum.crit{font-size:92px;color:#fff3c4;-webkit-text-stroke:5px #b86a00;animation:fcrit 1.2s forwards}
.fnum.critx{font-size:26px;color:var(--gold);-webkit-text-stroke:2px #6b3f00;letter-spacing:2px;animation-duration:1s}
.fnum.heal{-webkit-text-stroke:3px var(--teal);font-size:40px}
.fnum.you{font-size:46px;-webkit-text-stroke:3px #b8321f}
.fnum.sm{font-size:30px;-webkit-text-stroke:2px var(--coral)}
.fnum.x2{font-size:44px;color:var(--gold);-webkit-text-stroke:3px #6b3f00;animation:fx2 .7s forwards}
@keyframes fnum{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}14%{transform:translate(-50%,-55%) scale(1.45);opacity:1}26%{transform:translate(-50%,-55%) scale(1)}70%{opacity:1}100%{transform:translate(-50%,-110%) scale(.9);opacity:0}}
@keyframes fcrit{0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}12%{transform:translate(-50%,-60%) scale(1.8) rotate(6deg);opacity:1}24%{transform:translate(-50%,-60%) scale(1) rotate(-3deg)}34%{transform:translate(-50%,-60%) scale(1.12) rotate(0)}75%{opacity:1}100%{transform:translate(-50%,-100%) scale(.9);opacity:0}}
@keyframes fx2{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}30%{transform:translate(-50%,-50%) scale(1.5) rotate(8deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
.burst{position:absolute;width:240px;height:240px;margin:-120px 0 0 -120px;background:var(--gold);pointer-events:none;z-index:32;clip-path:polygon(50% 0,58% 34%,85% 15%,68% 42%,100% 50%,68% 58%,85% 85%,58% 66%,50% 100%,42% 66%,15% 85%,32% 58%,0 50%,32% 42%,15% 15%,42% 34%);animation:burst .5s ease-out forwards}
@keyframes burst{from{transform:scale(.2) rotate(0);opacity:1}to{transform:scale(1.6) rotate(50deg);opacity:0}}
.rays{position:absolute;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:39;background:repeating-conic-gradient(rgba(232,184,74,.55) 0 8deg,transparent 8deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 68%);mask-image:radial-gradient(circle,#000 10%,transparent 68%);animation:rays 1.6s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
#banner{position:absolute;left:0;right:0;top:44%;height:64px;margin-top:-32px;display:grid;place-items:center;font-size:28px;font-weight:900;letter-spacing:6px;color:#fff;background:var(--navy);box-shadow:0 6px 0 var(--navy2);transform:translateX(-110%) skewX(-12deg);pointer-events:none;z-index:46;text-shadow:0 3px 0 rgba(0,0,0,.3)}
#banner.e{background:var(--coral);box-shadow:0 6px 0 #b8321f}
#banner.w{background:repeating-linear-gradient(-45deg,#b8321f 0 18px,#E4654F 18px 36px);font-size:17px;letter-spacing:1px;box-shadow:0 6px 0 #7d1f12}
#banner.on{animation:banner .85s cubic-bezier(.2,.9,.3,1) forwards}
#banner.w.on{animation-duration:1.5s}
@keyframes banner{0%{transform:translateX(-110%) skewX(-12deg)}22%,72%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(110%) skewX(-12deg)}}
#toast{position:absolute;left:50%;top:52%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:6px 12px;border-radius:10px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:47;white-space:nowrap}
#toast.on{opacity:1}
#achtoast{position:absolute;left:50%;top:10px;transform:translate(-50%,-400%);background:linear-gradient(180deg,#ffe9a8,var(--gold));color:#5a3a00;padding:8px 16px 8px 10px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 5px 0 #b8892e,0 10px 20px rgba(0,0,0,.25);z-index:90;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .45s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
#achtoast.on{transform:translate(-50%,0)}
#achtoast i{font-style:normal;font-size:22px}
#logp{position:absolute;left:12px;right:12px;top:31vh;bottom:230px;background:rgba(251,246,234,.97);border-radius:14px;padding:10px 12px;font-size:12px;line-height:1.5;overflow-y:auto;display:none;z-index:45;box-shadow:0 8px 20px rgba(0,0,0,.2)}
#logp.on{display:block}#logp div{border-bottom:1px dashed #e4d8c0;padding:2px 0}#logp .t{color:var(--mute)}

/* ---------- 新手引导 ---------- */
#cap{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.8);max-width:84%;width:max-content;background:var(--navy);color:#fff;padding:12px 18px;border-radius:16px;font-size:17px;font-weight:700;line-height:1.5;text-align:center;box-shadow:0 6px 0 var(--navy2),0 12px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.3,1.5,.5,1);z-index:54}
#cap.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#cap b{color:var(--gold)}
#cap button{display:block;margin:10px auto 0;border:0;border-radius:999px;padding:8px 22px;font-size:15px;font-weight:900;background:var(--gold);color:#5a3a00;pointer-events:auto;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
#finger{position:absolute;left:0;top:0;font-size:46px;line-height:1;pointer-events:none;z-index:55;opacity:0;filter:drop-shadow(0 6px 4px rgba(0,0,0,.3))}
#finger.drag{animation:fdrag 1.7s ease-in-out infinite}
#finger.tap{animation:ftap .9s ease-in-out infinite}
@keyframes fdrag{0%{transform:translate(var(--x1),var(--y1)) scale(1.15);opacity:0}12%{opacity:1;transform:translate(var(--x1),var(--y1)) scale(.95)}75%{transform:translate(var(--x2),var(--y2)) scale(.95);opacity:1}100%{transform:translate(var(--x2),var(--y2)) scale(1.15);opacity:0}}
@keyframes ftap{0%,100%{transform:translate(var(--x1),var(--y1)) scale(1.15);opacity:1}50%{transform:translate(var(--x1),calc(var(--y1) - 8px)) scale(.9);opacity:1}}

/* ---------- 加载页：咖啡杯灌满 ---------- */
#load{position:absolute;inset:0;background:var(--cream);z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .5s}
#load.off{opacity:0;pointer-events:none}
#load .brand{position:absolute;top:max(22px,env(safe-area-inset-top));font-size:12px;letter-spacing:4px;color:var(--mute)}
#load .blobA,#load .blobB{position:absolute;border-radius:50%;opacity:.55;animation:drift 7s ease-in-out infinite alternate}
#load .blobA{width:340px;height:340px;left:-140px;top:-90px;background:var(--peach)}
#load .blobB{width:300px;height:300px;right:-140px;bottom:-60px;background:var(--mint);animation-delay:-3s}
@keyframes drift{to{transform:translate(30px,24px) scale(1.08)}}
#cupsvg{width:84px;height:84px;position:relative;animation:cupbob 1.6s ease-in-out infinite}
@keyframes cupbob{50%{transform:translateY(-6px) rotate(-2deg)}}
#cupsvg.done{animation:cuphop .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes cuphop{30%{transform:translateY(-26px) scale(1.08,.94)}60%{transform:translateY(0) scale(.96,1.05)}}
#liq{transition:transform .35s ease-out}
#wave{animation:wave 1.4s linear infinite}
@keyframes wave{to{transform:translateX(-100px)}}
.steam{opacity:0;stroke-dasharray:40;stroke-dashoffset:40}
#cupsvg.done .steam{animation:steam 1.8s ease-in-out infinite}
#cupsvg.done .steam:nth-of-type(2){animation-delay:.4s}#cupsvg.done .steam:nth-of-type(3){animation-delay:.8s}
@keyframes steam{0%{opacity:0;stroke-dashoffset:40}40%{opacity:.8}100%{opacity:0;stroke-dashoffset:-40;transform:translateY(-10px)}}
#load .pct{font-weight:900;font-size:22px;color:var(--navy);position:relative}
#load .ltitle{font-size:34px;font-weight:900;letter-spacing:6px;color:#fff;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;text-shadow:0 3px 0 var(--navy),0 6px 0 var(--navy2);position:relative;margin-bottom:6px}
#load .tip{position:relative;font-size:13px;color:var(--mute);text-align:center;padding:0 34px;line-height:1.5;min-height:40px;transition:opacity .3s}
#loadboss{position:relative;width:220px;height:220px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:6px solid #fff;box-shadow:0 8px 0 rgba(46,60,85,.18)}
#load .lrib{position:relative;background:var(--navy);color:#fff;font-size:15px;font-weight:700;letter-spacing:2px;padding:6px 18px;border-radius:999px;box-shadow:0 4px 0 var(--navy2)}
#load.off *{animation:none}

/* ---------- 首页 ---------- */
#home{position:absolute;inset:0;background:var(--cream);z-index:60;overflow:hidden;--px:0;--py:0;transition:opacity .35s}
#home.off{opacity:0;pointer-events:none}
#home .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.75;transition:transform .6s ease-out}
#home .b1{width:440px;height:440px;left:-150px;top:-120px;background:var(--peach);transform:translate(calc(var(--px)*-16px),calc(var(--py)*-10px))}
#home .b2{width:360px;height:360px;right:-160px;top:28%;background:var(--mint);opacity:.55;transform:translate(calc(var(--px)*-10px),calc(var(--py)*-14px))}
#home .b3{width:300px;height:300px;left:-80px;bottom:-120px;background:#F6D9A8;opacity:.6}
.fc{position:absolute;width:84px;height:124px;border-radius:10px;overflow:hidden;border:4px solid #efd9b8;box-shadow:0 6px 0 #cbbfa4,0 12px 18px rgba(80,50,30,.2);opacity:0;animation:fcin .8s forwards,float 7s ease-in-out infinite}
.fc img{width:100%;height:100%;object-fit:cover}
.fc.f1{left:5%;top:6%;rotate:-14deg;animation-delay:.5s,0s}
.fc.f2{right:6%;top:4%;rotate:12deg;animation-delay:.7s,1.5s}
.fc.f3{left:3%;top:30%;rotate:8deg;animation-delay:.9s,3s;width:70px;height:104px}
.fc.f4{right:3%;top:32%;rotate:-10deg;animation-delay:1.1s,2s;width:70px;height:104px}
@keyframes fcin{to{opacity:.55}}
@keyframes float{50%{transform:translateY(-14px) rotate(3deg)}}
#home .boss{position:absolute;left:50%;top:2%;height:46%;aspect-ratio:4/5;max-width:96%;translate:-50% 0;transform:translate(calc(var(--px)*8px),calc(var(--py)*5px));transition:transform .6s ease-out}
#home .boss img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 45%,#000 55%,transparent 100%);opacity:0}
#home.in .boss img{animation:bossin .7s cubic-bezier(.2,1.2,.4,1) forwards,breathe 3.4s ease-in-out .8s infinite}
@keyframes bossin{from{opacity:0;transform:translateY(50px) scale(.92)}to{opacity:1;transform:none}}
@keyframes breathe{50%{transform:translateY(-5px) scale(1.015)}}
#home .bot{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:9px}
#home .tt{text-align:center;position:relative}
#home h1{margin:0;font-size:58px;line-height:1;letter-spacing:3px;font-weight:900;color:#fff;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;text-shadow:0 3px 0 var(--navy),0 6px 0 var(--navy),0 9px 0 var(--navy),0 12px 0 var(--navy2),0 18px 22px rgba(46,60,85,.35);transform:rotate(-3deg);display:flex;justify-content:center}
#home h1 span{display:inline-block;opacity:0}
#home.in h1 span{animation:chin .55s cubic-bezier(.2,1.6,.4,1) forwards,chhop 5s ease-in-out infinite}
#home.in h1 span:nth-child(1){animation-delay:.35s,3s}#home.in h1 span:nth-child(2){animation-delay:.47s,3.12s}#home.in h1 span:nth-child(3){animation-delay:.59s,3.24s}#home.in h1 span:nth-child(4){animation-delay:.71s,3.36s}
@keyframes chin{from{opacity:0;transform:translateY(-90px) scale(1.6) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes chhop{0%,6%,100%{transform:none}3%{transform:translateY(-12px) rotate(-5deg)}}
#home .rib{display:inline-block;margin-top:18px;background:var(--navy);color:#fff;font-size:14px;letter-spacing:2px;padding:6px 18px;border-radius:999px;box-shadow:0 4px 0 var(--navy2);position:relative;opacity:0}
#home.in .rib{animation:ttlin .5s cubic-bezier(.2,1.4,.4,1) .85s forwards}
@keyframes ttlin{from{opacity:0;transform:scale(.5) translateY(40px)}to{opacity:1;transform:none}}
#home .rib::before,#home .rib::after{content:"";position:absolute;top:50%;width:26px;height:3px;background:var(--navy);border-radius:2px}
#home .rib::before{right:100%;margin-right:8px}#home .rib::after{left:100%;margin-left:8px}
#home .stamp{position:absolute;right:-6px;top:-22px;rotate:14deg;border:3px solid var(--coral);color:var(--coral);font-weight:900;font-size:15px;letter-spacing:3px;padding:3px 7px;border-radius:6px;opacity:0;}
#home.in .stamp{animation:stamp .4s cubic-bezier(.2,1.5,.4,1) 1.3s forwards}
@keyframes stamp{from{opacity:0;transform:scale(2.4)}to{opacity:.85;transform:none}}
#week{display:flex;gap:8px;opacity:0}
#home.in #week{animation:ttlin .5s cubic-bezier(.2,1.2,.4,1) 1s forwards}
.wd{width:52px;text-align:center;font-size:11px;font-weight:700;color:var(--mute);position:relative;line-height:1.15}
.wd i{display:block;width:44px;height:44px;margin:0 auto 2px;border-radius:50%;background:#ddd center 24%/330% no-repeat;border:3px solid #fff;box-shadow:0 3px 0 #d9cfb8}
.wd em{display:block;font-style:normal;font-size:9px;letter-spacing:1px;color:#d9cfb8;height:11px}.wd em b{color:var(--gold);font-weight:400}
.wd.lock i{filter:brightness(0) opacity(.28)}
.wd.lock::after{content:"?";position:absolute;left:0;right:0;top:11px;font-size:20px;font-weight:900;color:#fff}
.wd.done i{filter:saturate(.6)}
.wd.done::after{content:"✔";position:absolute;right:0;top:-4px;width:19px;height:19px;border-radius:50%;background:var(--teal);color:#fff;font-size:11px;line-height:19px}
.wd.cur{color:var(--navy)}.wd.cur i{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,74,.5),0 3px 0 #d9cfb8;animation:cur 1.2s ease-in-out infinite}
@keyframes cur{50%{transform:translateY(-4px) scale(1.06)}}
#home .btns{width:76%;display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0}
#home.in .btns{animation:ttlin .5s cubic-bezier(.2,1.2,.4,1) 1.15s forwards}
.big{border:0;border-radius:999px;padding:15px;width:100%;font-size:21px;font-weight:900;letter-spacing:3px;cursor:pointer;background:linear-gradient(180deg,#F07A64,#E4654F);color:#fff;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 4px 0 rgba(255,255,255,.3),0 8px 14px rgba(120,80,50,.25);transition:transform .08s,box-shadow .08s;position:relative;overflow:hidden}
.big::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%,60%{left:-60%}100%{left:130%}}
@keyframes pulse{50%{transform:scale(1.035)}}
#go,#intro .big{animation:pulse 2.2s ease-in-out infinite}
.big:active{transform:translateY(4px) scale(.98);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.big.ghostb{background:#fff;color:var(--navy);box-shadow:0 4px 0 #d9cfb8;font-size:16px;padding:12px;animation:none;letter-spacing:1px}.big.ghostb::after{display:none}
.big.ghostb:active{box-shadow:0 1px 0 #d9cfb8}
#dailyb{width:100%;border:0;border-radius:16px;background:linear-gradient(180deg,#3a4a68,var(--navy));color:#fff;padding:7px 12px 7px 7px;display:none;align-items:center;gap:9px;text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--navy2);transition:transform .08s}
#dailyb.on{display:flex}#dailyb:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy2)}
#dailyb i{width:38px;height:38px;border-radius:50%;background:#555 center 24%/330% no-repeat;border:2px solid var(--gold);flex:none}
#dailyb span{flex:1;font-size:12px;line-height:1.35;min-width:0}#dailyb span b{display:block;font-size:14px;color:var(--gold)}
#dailyb em{font-style:normal;font-size:11px;background:var(--gold);color:#5a3a00;border-radius:999px;padding:2px 8px;font-weight:700;white-space:nowrap}
#home .ico{display:flex;gap:9px;width:100%;align-items:center}
#home .ico .big{flex:1;margin:0}
#home .ico .rbtn{width:44px;height:44px;flex:none;font-size:19px}
#home .meta{display:flex;gap:14px;font-size:11px;color:var(--mute);min-height:15px}
#home .meta a{text-decoration:underline;cursor:pointer}
#home .ver{position:absolute;right:10px;top:8px;font-size:10px;color:var(--mute)}
#wipe{position:absolute;inset:0;background:var(--navy);z-index:70;pointer-events:none;clip-path:circle(0 at 50% 88%);transition:clip-path .55s cubic-bezier(.6,0,.3,1)}
#wipe.on{clip-path:circle(140% at 50% 88%)}

/* ---------- 关卡开场：VS ---------- */
#intro{position:absolute;inset:0;background:var(--navy);z-index:58;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:0 30px;overflow:hidden}
#intro.on{display:flex}
#intro::before{content:"";position:absolute;width:160%;height:130px;top:22%;left:-30%;background:var(--coral);transform:rotate(-8deg);opacity:.9;animation:stripe .5s cubic-bezier(.2,1,.3,1) both}
#intro::after{content:"";position:absolute;width:160%;height:70px;bottom:26%;left:-30%;background:var(--teal);transform:rotate(-8deg);opacity:.55;animation:stripe .5s cubic-bezier(.2,1,.3,1) .1s both reverse}
@keyframes stripe{from{transform:rotate(-8deg) translateX(-110%)}}
#intro>*{position:relative}
#intro .iday{font-size:22px;font-weight:900;letter-spacing:8px;color:var(--gold);animation:slL .45s cubic-bezier(.2,1.2,.4,1) both}
#intro .iface{width:170px;height:170px;border-radius:50%;border:6px solid #fff;background:#ddd center 22%/340% no-repeat;box-shadow:0 10px 0 rgba(0,0,0,.25);animation:ifa .5s cubic-bezier(.2,1.5,.4,1) .15s both}
#intro .iname{font-size:44px;font-weight:900;letter-spacing:4px;text-shadow:0 5px 0 var(--navy2);animation:slR .45s cubic-bezier(.2,1.2,.4,1) .3s both;line-height:1.1}
#intro .itype{font-size:15px;font-weight:700;background:#fff;color:var(--navy);padding:4px 14px;border-radius:999px;animation:slR .45s cubic-bezier(.2,1.2,.4,1) .4s both}
#intro .ivs{font-size:34px;font-weight:900;font-style:italic;color:var(--gold);-webkit-text-stroke:2px var(--navy2);paint-order:stroke fill;animation:kost2 .4s cubic-bezier(.2,1.8,.4,1) .55s both;margin:2px 0}
@keyframes kost2{from{transform:scale(4);opacity:0}}
#intro .iyou{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);padding:6px 16px 6px 6px;border-radius:999px;animation:slL .45s cubic-bezier(.2,1.2,.4,1) .65s both;font-size:13px;text-align:left;line-height:1.3}
#intro .iyou i{width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:url(../img/you.jpg) center 20%/cover,linear-gradient(160deg,#cfe4f2,#9DC3B3);flex:none}
#intro .iyou b{display:block;font-size:15px}
#intro .imut{font-size:13px;background:var(--gold);color:#5a3a00;font-weight:700;padding:4px 12px;border-radius:999px;animation:ttlin .4s .75s both}
#intro .imut:empty{display:none}
#intro .itip{font-size:14px;line-height:1.6;color:#d9dfea;max-width:300px;margin:6px 0 4px;animation:ttlin .4s .8s both}
#intro .big{width:64%;animation:ttlin .4s .95s both,pulse 2.2s ease-in-out 1.4s infinite}
@keyframes slL{from{transform:translateX(-120%);opacity:0}}@keyframes slR{from{transform:translateX(120%);opacity:0}}@keyframes ifa{from{transform:scale(0) rotate(-40deg)}}

/* ---------- 弹窗 ---------- */
.ov{position:absolute;inset:0;background:rgba(46,60,85,.82);display:none;align-items:center;justify-content:center;padding:20px;z-index:65}
.ov.on{display:flex}
.ov .c{width:100%;max-height:90%;overflow-y:auto;padding:18px 16px;border-radius:18px;background:var(--card);font-size:14px;line-height:1.6;animation:ttlin .3s cubic-bezier(.2,1.3,.4,1)}
.ov h3{margin:0 0 8px;font-size:20px;color:var(--navy);display:flex;justify-content:space-between;align-items:center}.ov h3 small{font-size:12px;color:var(--mute);font-weight:400}
.ov p{margin:6px 0}.ov b{color:var(--coral)}
.ov .big{margin-top:10px}
#gal .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 14px;padding:14px 4px 6px;justify-items:center}
#gal .card{zoom:.82;cursor:pointer}#gal .txt,.flipc .txt{font-size:12.5px;line-height:1.2}#gal .ty,.flipc .ty{font-size:12.5px}#gal .card.dim::after{content:"未获得";position:absolute;left:5px;right:5px;top:36px;text-align:center;background:rgba(46,60,85,.85);color:#fff;font-size:11px;padding:3px 0;border-radius:6px;z-index:4}
#gal h4{margin:14px 0 0;font-size:14px;color:var(--navy);border-top:1px dashed #d9cfb8;padding-top:10px}
#ask{z-index:66}#ask .c{text-align:center}#ask .row2{display:flex;gap:10px;margin-top:14px}#ask .big{margin:0;padding:12px;font-size:16px;letter-spacing:1px;animation:none}
#poster .c{text-align:center;padding:14px}#poster img{width:100%;border-radius:12px;display:block;box-shadow:0 6px 16px rgba(0,0,0,.2)}#poster small{display:block;margin-top:8px;color:var(--mute)}
#set label{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:700;color:var(--navy)}
#set label span{width:70px;flex:none}
#set input[type=range]{flex:1;accent-color:var(--coral);height:26px;touch-action:pan-x}
#set input[type=checkbox]{width:24px;height:24px;accent-color:var(--teal);margin-left:auto}
.achl{display:flex;flex-direction:column;gap:7px;margin:6px 0}
.achi{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:7px 10px;box-shadow:0 2px 0 #e4d8c0;opacity:.45;filter:grayscale(1)}
.achi.got{opacity:1;filter:none;box-shadow:0 2px 0 var(--gold)}
.achi i{font-style:normal;font-size:24px;width:32px;text-align:center}.achi b{display:block;color:var(--navy);font-size:14px}.achi span{font-size:12px;color:var(--mute);line-height:1.3}
#dailyp .c{text-align:center}
#dailyp .dface{width:110px;height:110px;border-radius:50%;margin:4px auto 6px;border:5px solid var(--gold);background:#ddd center 22%/340% no-repeat;box-shadow:0 6px 0 #d9cfb8}
#dailyp .dmut{display:inline-block;background:var(--gold);color:#5a3a00;font-weight:700;border-radius:999px;padding:4px 14px;margin:4px 0}
#dailyp .dbest{color:var(--mute);font-size:13px}

/* ---------- 结算 ---------- */
#over{position:absolute;inset:0;background:rgba(46,60,85,.84);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
#over.on{display:flex}
#over .c{width:100%;max-height:96%;overflow-y:auto;padding:16px 14px 18px;text-align:center;border-radius:20px;background:var(--card);animation:ttlin .4s cubic-bezier(.2,1.3,.4,1);position:relative}
#oart{height:118px;margin:-16px -14px 6px;border-radius:20px 20px 0 0;background:var(--art,none) center/cover,linear-gradient(180deg,var(--peach),#f7d9c2)}
#over.lose #oart{background:var(--art,none) center/cover,linear-gradient(180deg,#b9c2d0,#dfe3ea)}
#otitle{margin:0 0 4px;font-size:30px;display:inline-block}
#over.win #otitle{color:var(--coral);border:4px solid var(--coral);border-radius:10px;padding:2px 14px;rotate:-5deg;animation:stamp .45s cubic-bezier(.2,1.5,.4,1) .25s both;background:rgba(255,255,255,.6);margin-top:-30px;position:relative}
#stars{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:56px;margin:4px 0 2px}
#stars i{width:42px;height:42px;background:#d9cfb8;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
#stars i:nth-child(2){width:54px;height:54px}
#stars i.on{background:linear-gradient(180deg,#fff0b0,var(--gold) 60%,#c98f1e);animation:starpop .5s cubic-bezier(.2,1.9,.4,1)}
@keyframes starpop{from{transform:scale(3) rotate(-70deg);opacity:0}}
#stars.hide{display:none}
#over p{margin:5px 0;color:var(--mute);font-size:14px}
#ostats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 4px}
#ostats div{background:#fff;border-radius:12px;padding:6px 2px;box-shadow:0 2px 0 #e4d8c0;font-size:11px;color:var(--mute);line-height:1.2}
#ostats b{display:block;font-size:20px;color:var(--navy)}
#ostats:empty{display:none}
#obtn button{margin:10px 4px 0;border:0;border-radius:999px;padding:12px 20px;font-size:15px;font-weight:700;background:var(--mint);cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);transition:transform .08s}
#obtn button:active{transform:translateY(3px)}
#obtn button.h{background:#fff;box-shadow:0 3px 0 #d9cfb8}#obtn button.p{background:var(--coral);color:#fff}
#reward{display:none;margin-top:6px}#reward.on{display:block}
#reward .rt,#pickp .rt{font-weight:900;color:var(--navy);font-size:16px}
#reward .rc,#pickp .rc{display:flex;justify-content:center;gap:14px;padding:14px 0 12px;min-height:160px}
#pickp .c{text-align:center}
.flipc{width:108px;height:160px;perspective:700px;zoom:.82;cursor:pointer;opacity:0;animation:deal .45s cubic-bezier(.2,1.2,.4,1) forwards;transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .3s,filter .3s}
.flipc:nth-child(2){animation-delay:.12s}.flipc:nth-child(3){animation-delay:.24s}
@keyframes deal{from{opacity:0;transform:translateY(140px) rotate(25deg) scale(.5)}to{opacity:1}}
.flipc .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.3,.5,1);transform:rotateY(180deg)}
.flipc.open .in{transform:rotateY(0)}
.flipc .card,.flipc .cback{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipc .cback{transform:rotateY(180deg);border-radius:13px;border-width:5px}
.flipc.gone{opacity:.25!important;filter:saturate(.2);pointer-events:none}
.flipc.pick{transform:translateY(-10px) scale(1.1)}
.flipc.pick .card{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold),0 0 26px 8px rgba(232,184,74,.9)}

@media (max-height:720px){
  html:not(.wide) #hand{height:192px}html:not(.wide) #hand .card{bottom:22px}
  html:not(.wide) .row{zoom:.86}html:not(.wide) #enemy{height:28vh}
  html:not(.wide) #home h1{font-size:50px}html:not(.wide) #home .boss{height:42%}
}
@media (prefers-reduced-motion:reduce){.fc,.big,#face{animation:none!important}}

/* 被首页、加载页、开场页整个盖住时，对局层不绘制，省电 */
#app.menu #enemy,#app.menu #field,#app.menu #you,#app.menu #hand{visibility:hidden}

/* ---------- 开局换牌 ---------- */
#mull{position:absolute;inset:0;background:rgba(13,20,32,.72);z-index:52;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;padding:0 14px}
#mull.on{display:flex}
#mull h3{margin:0;font-size:22px;letter-spacing:2px;text-shadow:0 3px 0 rgba(0,0,0,.3)}
#mull p{margin:-8px 0 0;font-size:13px;color:#d9dfea}
#mullc{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 18px;padding:12px 0;max-width:330px}
#mullc .card{animation:deal .4s cubic-bezier(.2,1.2,.4,1) both;transition:transform .15s,filter .15s}
#mullc .card:nth-child(2){animation-delay:.08s}#mullc .card:nth-child(3){animation-delay:.16s}#mullc .card:nth-child(4){animation-delay:.24s}
#mullc .card.swap{transform:scale(.92) rotate(-3deg);filter:saturate(.3) brightness(.7)}
#mullc .card.swap::after{content:"换";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900;box-shadow:0 4px 0 #b8321f;z-index:5}
#mull .big{width:60%}
#enemy #face{cursor:pointer}

/* ---------- 教学：今天学什么、停住时的提示 ---------- */
#intro .ilearn{font-size:15px;font-weight:700;line-height:1.5;background:var(--gold);color:#4a3000;border-radius:14px;padding:8px 14px;max-width:320px;animation:ttlin .4s .75s both}
#intro .ilearn:empty{display:none}
#intro .itip:empty{display:none}
.card.hint{animation:hintb .7s ease-in-out infinite}
@keyframes hintb{50%{translate:0 -18px}}
.card.hint::before{content:"";position:absolute;inset:-9px;border-radius:19px;box-shadow:0 0 0 3px var(--gold),0 0 24px 8px rgba(232,184,74,.9);pointer-events:none;animation:hot .7s ease-in-out infinite}

/* ---------- 咖啡 ---------- */
.cupfly{position:absolute;z-index:42;pointer-events:none;display:block;margin:0}
.cupi{display:inline-block;width:22px;height:22px;margin:0 4px;vertical-align:-5px;border-radius:50%;background:url(../img/cup_full.jpg) center/cover,#7a4a2a}
#cups.spot,.mchips.spot{border-radius:999px;animation:spotp .8s ease-in-out infinite}
.gem.spot{animation:spotg .8s ease-in-out infinite;z-index:6}
@keyframes spotp{0%,100%{box-shadow:0 0 0 3px var(--gold)}50%{box-shadow:0 0 0 7px var(--gold),0 0 18px 6px rgba(232,184,74,.9)}}
@keyframes spotg{0%,100%{box-shadow:0 0 0 3px var(--gold);scale:1.2}50%{box-shadow:0 0 0 6px var(--gold),0 0 16px 6px rgba(232,184,74,.9);scale:1.45}}
#cups.no{animation:cupsno .6s}
#cups.no .cup{box-shadow:0 0 0 2px var(--coral),0 0 10px var(--coral)}
#cups.no #cupn{color:var(--coral)}
@keyframes cupsno{15%{transform:translateX(-7px)}35%{transform:translateX(6px)}55%{transform:translateX(-4px)}75%{transform:translateX(3px)}}

/* ---------- 点场上的牌看解释 ---------- */
.row .mini{cursor:pointer}
#peek.top,#peeknote.top{z-index:67}
#peeknote{white-space:pre-line;position:absolute;left:50%;top:calc(44% + 158px);transform:translateX(-50%);width:84%;max-width:330px;z-index:44;pointer-events:none;background:var(--navy);color:#fff;font-size:14px;font-weight:700;line-height:1.5;text-align:center;padding:9px 14px;border-radius:14px;box-shadow:0 5px 0 var(--navy2),0 10px 18px rgba(0,0,0,.25);animation:ttlin .22s cubic-bezier(.2,1.4,.4,1)}

/* ---------- 新手模式的周一：少看点东西 ---------- */
#app.novice #logbtn,#app.novice .rar,#app.novice #turn{display:none}
#firstp .big{margin-top:10px}

/* ---------- 电脑横屏：1120×630 的舞台由 fit() 等比放大。左边老板，右边牌桌 ---------- */
html.wide,html.wide body{background:var(--navy2)}
html.wide #app{position:fixed;left:50%;top:50%;translate:-50% -50%;scale:var(--k);width:var(--w);height:var(--h);max-width:none;margin:0;display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
html.wide #enemy{grid-column:1;grid-row:1/4;height:auto;min-height:0}
html.wide #enemy::after{left:auto;top:0;width:5px;height:auto}
html.wide #field{grid-column:2;grid-row:1}
html.wide #you{grid-column:2;grid-row:2}
html.wide #hand{grid-column:2;grid-row:3}
html.wide .row{zoom:1.2}
html.wide #logp{left:412px;top:12px;bottom:284px}
html.wide #peek,html.wide #peeknote,html.wide #cap,html.wide #toast{left:calc(50% + 200px)}
html.wide #peeknote{top:calc(44% + 150px)}
html.wide #cap{max-width:560px}
/* 加载页、首页 */
html.wide #load .blobA{width:560px;height:560px;left:-180px;top:-200px}
html.wide #load .blobB{width:480px;height:480px;right:-160px;bottom:-180px}
html.wide #home .b1{width:640px;height:640px;left:-200px;top:-220px}
html.wide #home .b2{width:520px;height:520px;right:-200px;top:20%}
html.wide #home .b3{width:420px;height:420px;left:30%;bottom:-260px}
html.wide #home .boss{left:27%;top:5%;height:90%;max-width:50%}
html.wide #home .bot{left:50%;right:3%;top:0;bottom:0;justify-content:center;gap:14px}
html.wide #home h1{font-size:68px}
html.wide #home .btns{width:340px}
html.wide .fc.f1{left:3%;top:8%}html.wide .fc.f2{right:4%;top:6%}html.wide .fc.f3{left:4%;top:auto;bottom:10%}html.wide .fc.f4{right:5%;top:auto;bottom:8%}
html.wide #wipe{clip-path:circle(0 at 75% 62%)}html.wide #wipe.on{clip-path:circle(140% at 75% 62%)}
/* 开场：左老板，右你和今天学什么 */
html.wide #intro.on{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);align-content:center;justify-items:center;gap:8px 30px;padding:0 50px}
html.wide #intro .iday{grid-area:1/1}html.wide #intro .iface{grid-area:2/1/5/2}html.wide #intro .iname{grid-area:5/1}html.wide #intro .itype{grid-area:6/1}
html.wide #intro .ivs{grid-area:1/2}html.wide #intro .iyou{grid-area:2/2}html.wide #intro .imut{grid-area:3/2}html.wide #intro .ilearn{grid-area:4/2}html.wide #intro .itip{grid-area:5/2}html.wide #intro .big{grid-area:6/2;width:280px}
html.wide #intro .iface{width:210px;height:210px}
/* 弹窗不铺满 */
html.wide .ov .c{max-width:520px}
html.wide #gal .c{max-width:860px}html.wide #gal .grid{grid-template-columns:repeat(6,1fr)}
html.wide #gal .card,html.wide .flipc{zoom:1}html.wide #gal .txt,html.wide .flipc .txt{font-size:11px;line-height:1.25}html.wide #gal .ty,html.wide .flipc .ty{font-size:11px}
html.wide #over .c{max-width:640px}
html.wide #oart{height:76px}
html.wide #mullc{max-width:none;flex-wrap:nowrap}html.wide #mull .big{width:280px}
html.wide #hand .card{bottom:40px}
html.wide #home .boss img{-webkit-mask-image:radial-gradient(ellipse 50% 54% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 54% at 50% 46%,#000 62%,transparent 100%)}
.card.ghost .st{display:none}
/* 手机上图鉴和奖励牌缩小后正文更大，插图再让一点 */
html:not(.wide) #gal .art,html:not(.wide) .flipc .art{height:62px}html:not(.wide) #gal .ttl,html:not(.wide) .flipc .ttl{top:69px}html:not(.wide) #gal .txt,html:not(.wide) .flipc .txt{top:87px}
/* 320 宽时下一招别压到回合标签，咖啡行放得下 */
@media (max-width:340px){#intent small,#cups .cl{display:none}#cupn{font-size:12px;margin-left:3px}}
/* 手机横屏牌字太小，请玩家转回竖屏 */
#rotate{position:absolute;inset:0;z-index:99;background:var(--navy);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:20px;font-weight:900;text-align:center}
#rotate i{font-style:normal;font-size:44px}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){#rotate{display:flex}}
/* 小窗横屏：舞台不再缩，左栏让出位置，场上的牌缩小 */
html.tiny #app{grid-template-columns:42% minmax(0,1fr)}
html.tiny .row{zoom:.82}
html.tiny #peek,html.tiny #peeknote,html.tiny #cap,html.tiny #toast{left:71%}
html.tiny #logp{left:44%}
/* 矮屏加载页：头像和杯子缩小，别压到署名。首屏靠 game.html 内联的同一行 */
@media (max-height:600px){#loadboss{width:150px;height:150px}#cupsvg{width:60px;height:60px}}
/* 「怎么玩」里的类型表 */
.tyl{display:flex;align-items:baseline;gap:8px;margin:4px 0}.tyl .ty{position:static;flex:none;font-size:12px;line-height:18px;padding:0 7px}