:root{--ink:#f5ecdf;--muted:#c9b9a5;--gold:#e8c27a;--gold2:#ffe2a3;--blue:#8fd3ff;--wine:#9b3f58;--red:#ff8fa3;--heal:#86e0b5;--panel:rgba(26,18,15,.72);--line:rgba(232,194,122,.28)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;-webkit-user-select:none;user-select:none;background:#0d0a09;color:var(--ink);font-family:"Noto Sans SC",Inter,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none}
button,.btn,input,select{font:inherit}
button,.btn{border:1px solid var(--line);border-radius:10px;padding:.45rem .8rem;background:rgba(40,27,22,.78);color:var(--ink);cursor:pointer;text-decoration:none;font-size:13px;font-weight:650;backdrop-filter:blur(8px)}
button:hover,.btn:hover{border-color:var(--gold)}
button.primary{background:linear-gradient(135deg,#b4576f,#7d2f47);border-color:rgba(255,210,170,.4)}
button:disabled{opacity:.4;cursor:not-allowed}
.hall-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 50% 0%,#33241b 0%,#17100d 48%,#080605 100%)}
.hall-bg .spot{position:absolute;left:50%;top:-12vh;width:120vw;height:90vh;transform:translateX(-50%);background:radial-gradient(ellipse 34% 60% at 50% 0%,rgba(255,214,160,.2),rgba(255,214,160,.05) 55%,transparent 75%)}
.hall-bg .bokeh{position:absolute;inset:-10%;filter:blur(14px);opacity:.55;animation:bokeh 26s ease-in-out infinite alternate;background:
 radial-gradient(circle at 12% 18%,rgba(255,190,120,.35) 0 2.2%,transparent 2.6%),
 radial-gradient(circle at 22% 9%,rgba(255,220,170,.25) 0 1.4%,transparent 1.8%),
 radial-gradient(circle at 36% 14%,rgba(255,170,110,.2) 0 3%,transparent 3.4%),
 radial-gradient(circle at 63% 7%,rgba(255,200,140,.28) 0 1.8%,transparent 2.2%),
 radial-gradient(circle at 77% 16%,rgba(255,180,120,.3) 0 2.6%,transparent 3%),
 radial-gradient(circle at 90% 8%,rgba(255,225,180,.22) 0 1.5%,transparent 1.9%),
 radial-gradient(circle at 5% 40%,rgba(255,170,110,.18) 0 3.2%,transparent 3.6%),
 radial-gradient(circle at 95% 36%,rgba(255,190,140,.2) 0 2.8%,transparent 3.2%)}
@keyframes bokeh{to{transform:translate3d(-2%,1.5%,0) scale(1.04)}}
.rainfall{position:absolute;inset:-20%;opacity:.07;background-image:repeating-linear-gradient(100deg,transparent 0 18px,rgba(200,225,250,.2) 19px,transparent 20px 38px);background-size:200px 200px;animation:rain 7s linear infinite;mask-image:linear-gradient(to bottom,#000 0,transparent 45%)}
@keyframes rain{to{transform:translate3d(-70px,200px,0)}}
#stage{position:fixed;inset:0;width:100vw;height:100dvh;z-index:1;display:block}

.hud-top{position:fixed;z-index:5;top:max(8px,env(safe-area-inset-top));left:10px;right:10px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:start;pointer-events:none}
.hud-top>*{pointer-events:auto}
.hud-buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.seat{display:flex;gap:9px;align-items:center;padding:7px 10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);min-width:0;max-width:360px}
.avatar{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 15px Georgia,serif;color:var(--gold2);background:radial-gradient(circle at 35% 30%,#7a3b4f,#2b1820);border:1px solid var(--gold)}
.avatar.me{background:radial-gradient(circle at 35% 30%,#3b5f7a,#16222e)}
.seat-body{flex:1;min-width:0}
.seat-name{display:flex;gap:8px;align-items:baseline;white-space:nowrap;overflow:hidden}
.seat-name b{font-size:14px}.seat-name .pile-link{cursor:pointer;text-decoration:underline dotted}.seat-name small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.hp{position:relative;margin-top:4px;height:16px;border-radius:999px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.hp i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#b4576f,#f08aa0);transition:width .5s ease}
.seat-me .hp i{background:linear-gradient(90deg,#3d8d75,#86e0b5)}
.hp span{position:relative;display:block;text-align:center;font:800 11px/16px Inter,sans-serif;text-shadow:0 1px 2px #000}
.seat.low .hp span{color:#ffd0d6}
.turn-ribbon{justify-self:center;text-align:center;padding:6px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);min-width:150px}
.turn-ribbon b{display:block;font:600 15px Georgia,"Noto Serif SC",serif;color:var(--gold2)}
.turn-ribbon small{color:var(--muted);font-size:11px}
.turn-ribbon.mine{box-shadow:0 0 22px rgba(232,194,122,.45);border-color:var(--gold)}

.hud-bottom{position:fixed;z-index:5;left:0;right:0;bottom:0;padding:0 10px max(8px,env(safe-area-inset-bottom));pointer-events:none;display:grid;grid-template-columns:minmax(220px,320px) 1fr;grid-template-areas:"seat bar" "hand hand";align-items:end;gap:6px 10px}
.hud-bottom>*{pointer-events:auto}
.seat-me{grid-area:seat}
.action-bar{grid-area:bar;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end;min-height:34px}
.action-bar .hint{color:var(--muted);font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.35)}
.action-bar .peek{color:var(--gold2);font-size:12px}
.hand{grid-area:hand;position:relative;height:clamp(118px,19vh,170px);display:flex;justify-content:center;align-items:flex-end;padding-bottom:4px}
.hcard{position:relative;flex:0 0 auto;width:clamp(70px,9vh,104px);aspect-ratio:320/492;margin:0 clamp(-22px,-1.6vh,-12px);border-radius:8px;transform-origin:50% 120%;transition:transform .18s ease,filter .18s ease,margin .18s;cursor:grab;touch-action:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.hcard img{width:100%;height:100%;display:block;border-radius:8px;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hcard:hover{transform:translateY(-14px) rotate(0deg)!important;z-index:20}
.hcard.selected{transform:translateY(-26px) rotate(0deg) scale(1.08)!important;z-index:30;filter:drop-shadow(0 0 14px rgba(232,194,122,.9))}
.hcard.mull{filter:grayscale(.7) brightness(.6) drop-shadow(0 0 8px rgba(255,140,160,.9))}
.hcard.mull:after{content:"换掉";position:absolute;left:50%;top:40%;transform:translateX(-50%);padding:2px 8px;border-radius:6px;background:rgba(155,63,88,.9);font-size:12px;font-weight:800}
.hcard.disabled{cursor:default}
.ghost{position:fixed;z-index:60;width:clamp(70px,9vh,104px);aspect-ratio:320/492;pointer-events:none;transform:translate(-50%,-60%) rotate(-4deg);filter:drop-shadow(0 18px 20px rgba(0,0,0,.6));opacity:.92}
.ghost img{width:100%;border-radius:8px}

.radial{position:fixed;z-index:70;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:rgba(26,18,15,.92);border:1px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.6);max-width:min(92vw,360px);max-height:72vh;overflow-y:auto}
.radial h4{margin:0 0 4px;font:600 14px Georgia,"Noto Serif SC",serif;color:var(--gold2)}
.radial button{text-align:left}
.radial button.destroy{background:linear-gradient(135deg,#3a3d4c,#1f2029)}
.radial button.swap{background:linear-gradient(135deg,#9b4560,#5e2438)}

.toast-layer{position:fixed;z-index:40;left:50%;top:var(--toast-top,96px);transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(92vw,560px)}
.toast{padding:8px 14px;border-radius:12px;background:rgba(20,14,12,.86);border:1px solid var(--line);font-size:13px;text-align:center;animation:toast 2.2s ease forwards}
.toast.damage{border-color:rgba(255,120,140,.7)}.toast.heal{border-color:rgba(134,224,181,.7)}
.toast.res{border-color:var(--blue);box-shadow:0 0 22px rgba(143,211,255,.45)}
.toast.sym{border-color:#fff;box-shadow:0 0 20px rgba(143,211,255,.6),0 0 36px rgba(232,194,122,.6)}
.toast.special{border-color:var(--gold)}
.toast.scale{border-color:var(--gold);color:var(--gold2);font-family:Georgia,"Noto Serif SC",serif}
@keyframes toast{0%{opacity:0;transform:translateY(10px)}10%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.float-layer{position:fixed;inset:0;z-index:45;pointer-events:none}
.float{position:absolute;font:900 30px Georgia,serif;text-shadow:0 2px 6px #000;animation:floatUp 1.3s ease-out forwards}
.float.damage{color:#ff7d93}.float.heal{color:#8af0bf}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.8)}20%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-40px)}}
.scale-banner{position:fixed;z-index:42;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:14px;background:rgba(20,14,12,.88);border:1px solid var(--gold);font:600 14px Georgia,"Noto Serif SC",serif;color:var(--gold2);pointer-events:none;animation:toast 1.6s ease forwards;text-align:center}
.scale-banner small{display:block;color:var(--muted);font:12px Inter,sans-serif}

.inspector{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:16px;border-radius:18px;background:rgba(26,18,15,.95);border:1px solid var(--gold);box-shadow:0 30px 80px rgba(0,0,0,.7);width:min(560px,94vw)}
.inspector img{width:min(210px,40vw);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.6);animation:flipIn .45s ease}
@keyframes flipIn{from{transform:perspective(600px) rotateY(80deg)}to{transform:none}}
.inspector-copy small{color:var(--gold);letter-spacing:.12em;font-size:10px}
.inspector-copy h3{margin:4px 0 6px;font:600 20px Georgia,"Noto Serif SC",serif}
.inspector-copy p{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.55}
.inspector-copy .chip{display:inline-block;margin:2px 4px 0 0;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:11px}
.chip.awake{color:var(--heal);border-color:rgba(134,224,181,.5)}.chip.sleep{color:#b8c4d6}.chip.res{color:var(--blue);border-color:var(--blue)}.chip.con{color:var(--gold2);border-color:var(--gold)}
.x{border-radius:50%;width:30px;height:30px;padding:0;display:grid;place-items:center;font-size:18px}
.inspector .x{position:absolute;right:10px;top:10px}

.drawer{position:fixed;z-index:75;right:0;top:0;bottom:0;width:min(380px,90vw);padding:14px;background:rgba(20,14,12,.95);border-left:1px solid var(--line);overflow:auto}
.drawer header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#logList div{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--muted)}
#aiThoughts{margin-top:12px;font-size:12px;color:var(--muted)}

dialog.sheet{border:1px solid var(--gold);border-radius:18px;background:#1c1411;color:var(--ink);padding:16px 18px 18px;width:min(460px,94vw);box-shadow:0 30px 90px rgba(0,0,0,.7)}
dialog.sheet.wide{width:min(720px,96vw)}
dialog::backdrop{background:rgba(5,3,2,.6);backdrop-filter:blur(3px)}
.sheet-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.sheet-head small{color:var(--gold);letter-spacing:.18em;font-size:10px}
.sheet-head h2{margin:2px 0;font:500 24px Georgia,"Noto Serif SC",serif}
.sheet-head p{margin:0;color:var(--muted);font-size:12px}
dialog label{display:grid;gap:4px;margin:8px 0;color:var(--muted);font-size:12px}
dialog input,dialog select{padding:.55rem .7rem;border-radius:10px;border:1px solid var(--line);background:#120d0b;color:var(--ink)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.mode{display:grid;gap:3px;text-align:left;padding:12px}.mode span{color:var(--muted);font-size:11px;font-weight:400}
.join{display:flex;gap:6px}.join input{flex:1}
.status{min-height:18px;color:var(--gold2);font-size:12px}.status.error{color:var(--red)}
.deck-link{color:var(--gold2);font-size:12px}
.rule-pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.rule-pages section{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.rule-pages h3{margin:0 0 4px;font:600 15px Georgia,"Noto Serif SC",serif;color:var(--gold2)}
.rule-pages p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}
.pile-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:60vh;overflow:auto}
.pile-grid img{width:84px;border-radius:7px}

@media (max-width:760px){
  .hud-top{grid-template-columns:1fr auto;gap:6px}
  .turn-ribbon{grid-column:1/-1;grid-row:2;justify-self:center;padding:3px 12px;min-width:0}
  .turn-ribbon b{font-size:13px}.turn-ribbon small{font-size:10px}
  .hud-buttons button,.hud-buttons .btn{padding:.35rem .5rem;font-size:11px}
  #btnRules{display:none}
  .seat{padding:5px 8px;gap:7px}.avatar{flex-basis:30px;height:30px;font-size:12px}
  .seat-name b{font-size:12px}.seat-name small{font-size:9.5px}
  .hud-bottom{grid-template-columns:1fr;grid-template-areas:"bar" "seat" "hand";gap:4px}
  .action-bar{justify-content:center}
  .hand{height:clamp(104px,17vh,140px)}
  .hcard{width:clamp(60px,15vw,78px);margin:0 -9px}
  .ghost{width:clamp(60px,15vw,78px)}
  .inspector{grid-template-columns:1fr;justify-items:center;text-align:center}
  .inspector img{width:min(170px,48vw)}
  .toast{font-size:11.5px;padding:5px 10px}
  .float{font-size:24px}
}
@media (min-width:761px){.toast-layer{left:auto;right:14px;transform:none;width:min(380px,34vw);align-items:flex-end}.toast{text-align:right}}

/* 卡牌详情：悬停/选中时显示 */
.detail{position:fixed;z-index:55;width:290px;padding:12px;border-radius:16px;background:rgba(24,16,13,.95);border:1px solid var(--gold);box-shadow:0 22px 60px rgba(0,0,0,.65);backdrop-filter:blur(10px);display:grid;grid-template-columns:1fr;gap:10px;pointer-events:auto}
.detail img{width:170px;justify-self:center;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.55);cursor:zoom-in}
.detail .x{position:absolute;right:8px;top:8px;width:26px;height:26px;font-size:15px}
.detail:not(.pinned) .x{display:none}
.detail-body small.kind{color:var(--gold);letter-spacing:.12em;font-size:10px}
.detail-body h3{margin:2px 0 6px;font:600 18px Georgia,"Noto Serif SC",serif}
.ope{display:grid;gap:5px;margin:6px 0}
.ope div{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;font-size:12px;color:var(--muted);line-height:1.35}
.ope b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:900 15px Georgia,serif;color:#fff;border:2px solid #f3d79b}
.ope b small{display:block;font:800 8px Inter,sans-serif;opacity:.85;margin-bottom:-4px}
.ope .o b{background:radial-gradient(circle at 35% 30%,#59657a,#141922)}
.ope .p b{background:radial-gradient(circle at 35% 30%,#3c86c4,#123150)}
.ope .p.boost b{background:radial-gradient(circle at 35% 30%,#ffe9a0,#9a6510);color:#3a2604}
.ope .e b{background:radial-gradient(circle at 35% 30%,#d1557a,#4d0f22)}
.ope em{font-style:normal;color:var(--ink)}
.detail-body .effect{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:12.5px;line-height:1.55;color:var(--ink)}
.detail-body .state{margin-top:4px}
@media (max-width:760px){
  .detail{left:8px!important;right:8px;top:var(--toast-top,96px)!important;width:auto;grid-template-columns:96px 1fr;align-items:start;max-height:46vh;overflow:auto;padding:10px}
  .detail img{width:96px}
  .detail-body h3{font-size:15px;padding-right:24px}
  .ope div{font-size:11px}.detail-body .effect{font-size:11.5px}
}

.detail-body .chip{display:inline-block;margin:2px 4px 0 0;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:11px}
.detail .more{display:none}
@media (max-width:760px){
  .detail.compact{grid-template-columns:58px 1fr;gap:8px;max-height:none;padding:8px 10px}
  .detail.compact img{width:58px}
  .detail.compact .detail-body h3{font-size:14px;margin:0 0 2px}
  .detail.compact .state .chip{font-size:10px;padding:1px 6px}
  .detail.compact .ope{display:flex;gap:6px;margin:4px 0}
  .detail.compact .ope div{display:block}
  .detail.compact .ope div>span{display:none}
  .detail.compact .ope b{width:30px;height:30px;font-size:13px}
  .detail.compact .effect{margin:2px 0 0;padding:5px 8px;font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .detail .more{display:inline-block;position:absolute;right:40px;top:8px;height:26px;padding:0 8px;font-size:11px;border-radius:999px}
}

/* 详情面板 v2：大图 + 只标数值 + 风味描述 */
.detail{width:330px;gap:8px}
.detail img{width:250px;max-height:52vh;object-fit:contain}
.detail .gems{display:flex;gap:8px;margin:6px 0 4px;flex-wrap:wrap}
.detail .g{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.detail .g i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:900 12px Inter,sans-serif;font-style:normal;color:#fff;border:2px solid #f3d79b}
.detail .g b{font:800 18px Georgia,serif;color:var(--ink)}
.detail .g small{font-size:10px;color:var(--muted)}
.detail .g.o i{background:radial-gradient(circle at 35% 30%,#59657a,#141922)}
.detail .g.p i{background:radial-gradient(circle at 35% 30%,#3c86c4,#123150)}
.detail .g.p.boost i{background:radial-gradient(circle at 35% 30%,#ffe9a0,#9a6510);color:#3a2604}
.detail .g.p.boost b{color:var(--gold2)}
.detail .g.p.off b{color:#8a95a8;text-decoration:line-through}
.detail .g.e i{background:radial-gradient(circle at 35% 30%,#d1557a,#4d0f22)}
.detail .ope{display:none}
.detail-body .effect{margin:6px 0 0}
.detail-body .flavor{margin:8px 2px 0;font:italic 13px/1.6 Georgia,"Noto Serif SC",serif;color:#d8c7a8;border-left:2px solid var(--gold);padding-left:10px}
@media (max-width:760px){
  .detail{grid-template-columns:120px 1fr;width:auto}
  .detail img{width:120px;max-height:none}
  .detail.compact{grid-template-columns:92px 1fr}
  .detail.compact img{width:92px}
  .detail.compact .gems{gap:5px;margin:3px 0}
  .detail.compact .g{padding:2px 7px 2px 3px}
  .detail.compact .g i{width:22px;height:22px;font-size:10px}
  .detail.compact .g b{font-size:15px}
  .detail.compact .flavor{display:none}
  .detail-body .flavor{font-size:12px}
}

/* 记录里的牌名引用 */
#logList .cardref{color:var(--gold2);border-bottom:1px dotted var(--gold);cursor:help}
#logList .cardref:hover{color:#fff}
.detail{z-index:78}
.detail-body .note{margin:4px 0 0;font-size:11.5px;color:var(--gold2)}

/* 逐步播放：场面检查的天平横幅 */
.scale-banner{top:46%;font-size:18px;padding:12px 22px;min-width:240px;z-index:44}
.scale-banner small{font-size:13px;margin-top:4px;color:var(--ink)}
@media (max-width:760px){.scale-banner{font-size:15px;min-width:0}#btnSpeed{font-size:10px}}

.hcard.synchro-target{filter:drop-shadow(0 0 10px rgba(140,210,255,.95))}
.radial .srow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.radial .srow>span{min-width:34px;color:var(--gold2);font-size:12px}
.radial .srow button.on{outline:2px solid var(--gold);color:var(--gold2)}
.radial .spre{margin:4px 0;font-size:13px;line-height:1.5}
.radial .spre small{opacity:.75}
.radial .go{background:linear-gradient(135deg,#3c6fa0,#1d3552)}
.hcard.synchro-source{transform:translateY(-10px) rotate(0deg)!important;filter:drop-shadow(0 0 14px rgba(232,194,122,.9))}

.rule-link{grid-column:1/-1;border-left:3px solid var(--gold)!important}
.rule-link a{color:var(--gold2);font-weight:700}

/* 交响：指挥棒弧光 + 字样 */
.sym-banner{position:fixed;z-index:46;left:50%;top:44%;width:min(640px,92vw);height:200px;transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center;align-content:center}
.sym-banner svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sym-banner path{fill:none;stroke:url(#baton);stroke-width:5;stroke-linecap:round;stroke-dasharray:760;stroke-dashoffset:760;filter:drop-shadow(0 0 8px rgba(243,207,122,.9)) drop-shadow(0 0 18px rgba(199,155,255,.7))}
.sym-banner b{position:relative;font:600 68px/1 "Noto Serif SC",Georgia,serif;letter-spacing:.5em;margin-right:-.5em;color:#fff3d0;text-shadow:0 0 18px rgba(243,207,122,.9),0 0 42px rgba(199,155,255,.75),0 2px 4px #000;opacity:0}
.sym-banner small{position:relative;margin-top:8px;font:600 13px Georgia,serif;letter-spacing:.6em;margin-right:-.6em;color:#e9d4ff;opacity:0;text-shadow:0 0 10px rgba(199,155,255,.9)}
.sym-banner.go path{animation:baton .7s cubic-bezier(.3,.6,.2,1) forwards,fadeOut .6s 1.6s forwards}
.sym-banner.go b{animation:symIn .7s .25s cubic-bezier(.2,.8,.2,1) forwards,fadeOut .5s 1.7s forwards}
.sym-banner.go small{animation:symIn .7s .45s ease forwards,fadeOut .5s 1.7s forwards}
@keyframes baton{to{stroke-dashoffset:0}}
@keyframes symIn{from{opacity:0;transform:scale(.86);letter-spacing:.9em}to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0}}
@media (max-width:760px){.sym-banner{height:140px}.sym-banner b{font-size:46px}}
.toast.sym{border-color:#e9d4ff;box-shadow:0 0 20px rgba(199,155,255,.6),0 0 36px rgba(243,207,122,.55)}
.toast.res{border-color:var(--blue);box-shadow:0 0 18px rgba(127,200,255,.5)}

/* 详情面板 v3：羊皮纸，O/P/E 和牌面同形，状态颜色与桌上特效一致；贴在牌的另一侧，不挡牌 */
.detail{--pp:#fbf4e6;--pink:#2b211c;--pmuted:#7a6a5e;--pgold:#b98a3e;width:300px;padding:14px 14px 12px;gap:8px;color:var(--pink);border:1px solid #b98a3e;border-radius:14px;
 background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,#fbf4e6,#efe2c6);
 box-shadow:inset 0 0 0 4px #fbf4e6,inset 0 0 0 5px rgba(185,138,62,.55),inset 0 0 40px rgba(150,110,50,.18),0 24px 60px rgba(0,0,0,.6);backdrop-filter:none}
.detail:not(.pinned){animation:detailIn .18s ease-out}
@keyframes detailIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.detail .dimg{position:relative;justify-self:center;width:190px;border-radius:12px;transform:perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .12s ease-out;box-shadow:0 12px 26px rgba(60,40,20,.45)}
.detail .dimg img{display:block;width:100%;max-height:none;border-radius:12px;box-shadow:none}
.detail .foil{position:absolute;inset:0;border-radius:12px;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 26%),rgba(255,240,200,.55) calc(var(--mx,50%) - 6%),rgba(210,180,255,.45) var(--mx,50%),rgba(170,230,255,.35) calc(var(--mx,50%) + 8%),transparent calc(var(--mx,50%) + 26%))}
.detail-body small.kind{color:var(--pgold);font-weight:700}
.detail-body h3{color:var(--pink);margin:2px 0 4px}
.detail .gems{gap:6px;margin:4px 0 2px}
.detail .g{background:rgba(120,90,50,.08);border-color:rgba(120,90,50,.18);padding:2px 10px 2px 3px}
.detail .g i{position:relative;width:30px;height:30px;border:0;border-radius:0;background:none!important;display:grid;place-items:center}
.detail .g i svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.detail .g i svg *{stroke:#c9963f;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.detail .g i em{position:relative;font:900 11px Inter,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.detail .g.o i svg *{fill:#3b4456}.detail .g.p i svg *{fill:#2d6ea6}.detail .g.p.boost i svg *{fill:#d8a432}.detail .g.e i svg *{fill:#a8304a}
.detail .g.p.boost i em{color:#3a2604;text-shadow:none}
.detail .g b{color:var(--pink)}
.detail .g.p.boost b{color:#9a6510}
.detail .g.p.off b{color:#9b8f86}
.detail .g small{color:var(--pmuted)}
.detail-body .effect{background:rgba(120,90,50,.08);border:1px solid rgba(120,90,50,.14);color:var(--pink)}
.detail-body .effect .sb{color:#1c1a1f;font-weight:700}.detail-body .effect .sr{color:#b4233f;font-weight:700}
.detail-body .state{margin-top:6px}
.detail-body .chip{border-color:rgba(120,90,50,.3);color:var(--pmuted);background:rgba(255,255,255,.4)}
.detail-body .chip.awake{color:#2f7a5c;border-color:rgba(47,122,92,.45)}
.detail-body .chip.sleep{color:#56657d;border-color:rgba(86,101,125,.4)}
.detail-body .chip.res{color:#1f6fb0;border-color:#5aa7e6;background:rgba(127,200,255,.16)}
.detail-body .chip.con{color:#8a5e10;border-color:#d8a432;background:rgba(240,192,96,.18)}
.detail-body .chip.sym{color:#6a3fa0;border-color:#b58ae6;background:linear-gradient(90deg,rgba(240,192,96,.25),rgba(199,155,255,.25))}
.detail-body .note{color:#8a5e10}
.detail-body .flavor{color:#6b5a4c;border-left-color:var(--pgold)}
.detail .x,.detail .more{background:#fbf4e6;color:var(--pink);border-color:rgba(185,138,62,.6)}
@media (max-width:760px){
  .detail{grid-template-columns:110px 1fr;width:auto}
  .detail .dimg{width:110px;transform:none}
  .detail.compact{grid-template-columns:84px 1fr}
  .detail.compact .dimg{width:84px}
  .detail.compact .g i{width:24px;height:24px}
}

/* 教学关 */
.tutorial-mode{width:100%;margin-top:10px;border-color:var(--gold);background:linear-gradient(135deg,rgba(232,194,122,.18),rgba(40,27,22,.8))}
.tutorial-mode b{color:var(--gold2)}
.coach{position:fixed;z-index:50;left:12px;top:calc(var(--toast-top,96px) + 4px);width:min(330px,28vw);max-height:calc(100dvh - var(--toast-top,96px) - 200px);overflow:auto;padding:14px 16px 12px;border-radius:14px;color:#2b211c;border:1px solid #b98a3e;
 background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,#fbf4e6,#efe2c6);
 box-shadow:inset 0 0 0 4px #fbf4e6,inset 0 0 0 5px rgba(185,138,62,.55),0 18px 50px rgba(0,0,0,.55)}
.coach.pop{animation:detailIn .25s ease-out}
.coach small{color:#b98a3e;font-weight:700;letter-spacing:.08em;font-size:11px}
.coach h3{margin:2px 0 8px;font:600 19px "Noto Serif SC",Georgia,serif;color:#2b211c}
.coach p{margin:0 0 7px;font-size:13.5px;line-height:1.62}
.coach-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.coach-actions button{color:var(--ink)}
.coach-hint{color:#8a5e10!important;font-weight:600;letter-spacing:0!important}
.hcard.locked{filter:grayscale(.55) brightness(.6) drop-shadow(0 8px 12px rgba(0,0,0,.55));cursor:not-allowed}
.hcard.locked:hover{transform:translateY(-6px) rotate(0deg)!important}
.hcard.tut-next{animation:tutGlow 1.4s ease-in-out infinite}
@keyframes tutGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,226,163,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.55))}50%{filter:drop-shadow(0 0 18px rgba(255,226,163,1)) drop-shadow(0 8px 12px rgba(0,0,0,.55))}}
.hcard.tut-next.selected{animation:none}
.radial button:disabled{opacity:.35}
@media (max-width:760px){
  .coach{left:8px;right:8px;width:auto;top:calc(var(--toast-top,96px) - 2px);max-height:34vh;padding:10px 12px 8px}
  .coach h3{font-size:16px;margin-bottom:4px}
  .coach p{font-size:12.5px;line-height:1.5;margin-bottom:5px}
}

/* 特写（点详情里的大图）：同款羊皮纸 */
.inspector{color:#2b211c;border-color:#b98a3e;background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,#fbf4e6,#efe2c6);box-shadow:inset 0 0 0 4px #fbf4e6,inset 0 0 0 5px rgba(185,138,62,.55),0 30px 80px rgba(0,0,0,.7)}
.inspector-copy small{color:#b98a3e;font-weight:700}
.inspector-copy h3{color:#2b211c}
.inspector-copy p{color:#6b5a4c}
.inspector .chip{color:#7a6a5e;border-color:rgba(120,90,50,.3)}
.inspector .x{background:#fbf4e6;color:#2b211c;border-color:rgba(185,138,62,.6)}
.coach-toggle{display:none;position:absolute;right:8px;top:8px;padding:2px 9px;font-size:11px;border-radius:999px;background:#fbf4e6;color:#2b211c;border-color:rgba(185,138,62,.6)}
@media (max-width:760px){
  .coach{max-height:28vh}
  .coach-toggle{display:block}
  .coach.mini #coachText,.coach.mini .coach-hint{display:none}
  .coach.mini h3{margin:0}
  .coach.mini .coach-actions{margin-top:4px}
  .coach.mini .coach-actions:empty{display:none}
}

/* 手机：大厅、规则等弹窗内容比屏幕高时可以上下滑（页面别处禁用了触摸滚动） */
dialog.sheet{max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog.sheet,dialog.sheet *{touch-action:pan-y}
dialog.sheet input,dialog.sheet select,dialog.sheet button{touch-action:manipulation}

/* 鸭姐 */
.avatar.duck-av{padding:0;overflow:hidden;background:#fbf4e6}
.avatar.duck-av img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.35);transform-origin:50% 30%}
.duck{position:fixed;z-index:6;left:12px;top:calc(var(--toast-top,96px) + 2px);display:flex;align-items:flex-start;gap:8px;pointer-events:none}
.duck img{width:104px;height:104px;border-radius:16px;border:2px solid #e8c27a;box-shadow:0 10px 26px rgba(0,0,0,.55);background:#fbf4e6}
.duck.bump img{animation:duckBump .35s ease-out}
@keyframes duckBump{0%{transform:scale(.9) rotate(-3deg)}60%{transform:scale(1.05) rotate(1deg)}100%{transform:none}}
.duck .say{position:relative;margin-top:14px;max-width:180px;padding:7px 11px;border-radius:12px;background:#fbf4e6;color:#2b211c;font-size:13px;font-weight:600;line-height:1.4;box-shadow:0 8px 20px rgba(0,0,0,.45);animation:detailIn .2s ease-out}
.duck .say:before{content:"";position:absolute;left:-6px;top:12px;border:6px solid transparent;border-left:0;border-right-color:#fbf4e6}
.coach-face{float:left;width:92px;height:92px;margin:0 10px 4px 0;border-radius:12px;border:2px solid #e8c27a;background:#fbf4e6;shape-outside:margin-box}
@media (max-width:760px){
  /* 手机：只用左上角座位里的头像，气泡挂在座位下面；提示条挪到右边，不和气泡叠在一起 */
  .duck{top:calc(var(--toast-top,96px) + 2px);left:8px}
  .duck img{display:none}
  .duck .say{margin-top:0;max-width:34vw;font-size:12px;padding:5px 9px}
  .duck .say:before{left:14px;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:#fbf4e6}
  .toast-layer{left:auto;right:8px;transform:none;width:min(62vw,300px);align-items:flex-end}
  .toast{text-align:right}
  .coach-face{width:44px;height:44px;margin-right:8px}
  .coach.mini .coach-face{width:30px;height:30px;margin-bottom:0}
}