: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;background:radial-gradient(ellipse at 50% 18%,#3a2a22 0%,#1c1411 45%,#0b0807 100%)}
.hall-bg .window{position:absolute;left:50%;top:2%;width:min(560px,70vw);height:30vh;transform:translateX(-50%);border-radius:220px 220px 10px 10px;background:linear-gradient(#18263a,#0e1726);box-shadow:inset 0 0 60px rgba(120,170,220,.25),0 0 0 10px #2b1d16,0 0 0 13px #4a3324;opacity:.55}
.hall-bg .window:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.5%,#2b1d16 49.5% 50.5%,transparent 50.5%),linear-gradient(transparent 49%,#2b1d16 49% 51%,transparent 51%)}
.rainfall{position:absolute;inset:-20%;opacity:.22;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 60%)}
@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)}
.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}
}