* { box-sizing: border-box; } :root{ --bg:#0b0e13; --panel:#141922; --panel2:#1b2230; --line:#232b3a; --text:#e6e9f0; --dim:#8b93a7; --accent:#ffb020; --ok:#2ecc71; --bad:#ff5c5c; --blue:#4ea1ff; } html,body{margin:0;height:100%} body{background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased} button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer} button:hover{border-color:#3a465c} button.primary{background:var(--accent);border-color:var(--accent);color:#191919;font-weight:700} button.ghost{background:transparent} button:disabled{opacity:.45;cursor:not-allowed} input{background:#0f131a;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 10px;font:inherit} .hidden{display:none !important} .sp{flex:1} /* 大厅 */ .lobby{max-width:520px;margin:12vh auto;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:14px} .lobby h1{margin:0 0 8px;font-size:22px} .lobby .hint{color:var(--dim);font-size:13px;margin:0 0 18px} .lobby label{display:flex;gap:10px;align-items:center;margin-bottom:14px} .lobby .row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap} .lobby .row input{flex:1} .msg{color:var(--accent);min-height:20px} /* 牌桌 */ #table{height:100%;display:flex;flex-direction:column;gap:6px;padding:8px;max-width:1240px;margin:0 auto} header{display:flex;gap:8px;align-items:center} .tag{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--dim)} .tag.on{color:#191919;background:var(--accent);border-color:var(--accent);font-weight:700} .side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px} .sideHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:2px 4px;font-size:12px;color:var(--dim)} .sideHead .who{color:var(--text);font-weight:700;font-size:13px} .pill{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 9px} .pill b{color:var(--text)} .pill.don b{color:var(--accent)} .pill small{color:var(--dim);margin-left:4px} .field{display:flex;gap:8px;align-items:flex-end;min-height:132px;padding:6px 6px 46px;flex-wrap:wrap} .card{position:relative;width:92px;flex:none;cursor:pointer;user-select:none} .card img{width:92px;height:129px;object-fit:cover;border-radius:6px;background:#0f131a;border:1px solid var(--line);display:block} .card .nm{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .card .pw{position:absolute;top:3px;left:3px;background:rgba(0,0,0,.72);border-radius:6px;padding:1px 6px;font-size:12px;font-weight:700} .card .donN{position:absolute;top:3px;right:3px;background:var(--accent);color:#191919;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700} .card.rested img{transform:rotate(90deg) scale(.78)} .card.rested{opacity:.85} .card.leader{width:104px} .card.leader img{width:104px;height:146px} .card.sel img{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .card.target img{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok)} .card.part::after{content:"部分效果";position:absolute;bottom:18px;left:3px;right:3px;background:rgba(120,90,30,.85);color:#ffd48a;font-size:10px;text-align:center;border-radius:4px;padding:1px 0} .card.unsup::after{content:"效果未实现";position:absolute;bottom:18px;left:3px;right:3px;background:rgba(120,40,40,.85);color:#ffb3b6;font-size:10px;text-align:center;border-radius:4px;padding:1px 0} .card.dead{opacity:.35} .hand{display:flex;gap:6px;overflow-x:auto;padding:6px 4px 2px} .hand .card{width:78px} .hand .card img{width:78px;height:109px} .mid{display:flex;flex-direction:column;gap:6px;min-height:96px} .banner{background:#2a2318;border:1px solid #6b5524;border-radius:10px;padding:8px 12px;color:#ffd98a;font-size:13px} /* [R564] 时钟行：包干时间 + 本回合行动倒计时，由页面自己的秒针更新 */ .clock{width:100%;background:#101722;border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums} .clock.urgent{color:#ff9c7a;border-color:#7a3a2a} /* [R564] 「这个座位已经在别处打开」的浮条 */ .kickbar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;background:#2b1a1a;border:1px solid #7a3a2a;border-radius:12px;padding:10px 14px;color:#ffd0c4;font-size:13px;box-shadow:0 8px 24px #0008} .kickbar button{background:var(--accent);border-color:var(--accent);color:#191919;font-weight:700} .actions{display:flex;gap:8px;flex-wrap:wrap} .actions button.on{background:var(--accent);border-color:var(--accent);color:#191919;font-weight:700} .log{flex:1;min-height:60px;max-height:150px;overflow:auto;background:#0e1219;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--dim);white-space:pre-wrap} .log div{color:var(--dim)} .log div:nth-last-child(-n+3){color:var(--text)} /* 手机 */ @media (max-width:720px){ #table{padding:6px;gap:4px} .card{width:66px} .card img{width:66px;height:93px} .card.leader{width:74px} .card.leader img{width:74px;height:104px} .hand .card{width:62px} .hand .card img{width:62px;height:87px} .field{min-height:100px;gap:6px} .log{max-height:110px} /* 大厅在窄屏占满宽度，行内按钮换行，输入框允许收缩 */ .lobby{max-width:none;margin:5vh 10px;padding:16px} .lobby .row{flex-wrap:wrap} .lobby .row input{flex:1 1 100%;min-width:0} .lobby .row button{flex:1 1 auto} .deckhead{flex-wrap:wrap} .deckbox .row{flex-wrap:wrap} .deckbox .row button{flex:1 1 40%} .deckrow #deckInfo{order:1;flex:1 1 auto;min-width:0} .deckrow #builderBtn{order:2} .deckrow #deckMine{order:3;flex:1 1 140px;min-width:120px;max-width:none} #table{max-width:none} header{flex-wrap:wrap} } /* 卡组区（大厅）：一行放完，别占三行高（R585） */ .deckbox{margin:8px 0 4px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px} .deckrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .decklabel{font-size:13px;font-weight:600;white-space:nowrap} .deckrow #deckInfo{flex:1 1 180px;min-width:100px;margin:0;font-size:12px;line-height:1.4} .deckrow #builderBtn{flex:0 0 auto} .deckrow #deckMine{flex:0 1 240px;min-width:130px;max-width:280px} .deckhead{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;font-size:13px;color:var(--text)} .deckhead .hint{color:var(--dim);font-size:12px;margin:0;line-height:1.5} .deckhead > span:first-child{flex:0 0 auto;white-space:nowrap} .msg.err{color:#ff8a8d} .lifeup{color:#f5c451;font-weight:600;} /* 大厅按钮文字不换行，避免「自动组卡（已实现效果）」被折成两行 */ .lobby .row button{white-space:nowrap} /* [R197] 手机端牌桌：整屏不滚动，日志吃掉剩余高度，手牌始终可见可点 */ @media (max-width:720px){ #table{display:flex;flex-direction:column;height:100dvh;overflow:hidden;padding:6px;gap:4px} #table > header{flex:none} #table .side{flex:none} #table .mid{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:4px} #table .mid .log{flex:1 1 auto;min-height:64px;max-height:none;overflow:auto} #table .mid .actions{flex:none} #table .mid .banner{flex:none} #table .side.me .hand{padding-bottom:2px} #table .field{min-height:84px} } /* [R198] 大厅下拉框跟着深色主题走（默认 select 是白底，很突兀） */ .lobby select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px} .lobby select:focus{outline:none;border-color:var(--accent)} /* [R199] 操作条常驻：桌面端页面很长时，攻击/结束回合不必滚回中段去找 */ .mid .actions{position:sticky;bottom:0;z-index:6;background:linear-gradient(180deg,rgba(11,13,18,0) 0%,rgba(11,13,18,.92) 42%,rgba(11,13,18,.98) 100%);padding:8px 0 6px;margin-bottom:-4px} /* [R211] 房间列表 */ .roomlist{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px} .roomlist:empty{display:none} .roomitem{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px} .roomitem .rid{font-family:ui-monospace,Consolas,monospace;color:var(--accent)} .roomitem .who{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .roomitem button{padding:4px 10px;font-size:12px} /* [R317] 入场 / 攻击 / 受击动画 + 音效按钮 + 手机手感 */ @keyframes pop-in{from{transform:scale(.72) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}} @keyframes lunge{0%{transform:translateY(0)}35%{transform:translateY(-10px) scale(1.04)}100%{transform:translateY(0)}} @keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} .card.enter{animation:pop-in .28s ease-out both} .card.attacking{animation:lunge .45s ease-out both;z-index:5} .shake{animation:shakeX .42s ease-in-out} button{-webkit-tap-highlight-color:transparent} #sfxBtn{padding:3px 8px;font-size:14px;line-height:1.2} #sfxBtn.off{opacity:.5} @media (prefers-reduced-motion: reduce){ .card.enter,.card.attacking,.shake{animation:none} } @media (max-width:720px){ .hand{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .hand .card{scroll-snap-align:start} .actions button{min-height:40px;padding:9px 14px} #table{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))} header .tag{font-size:11px} } /* [R319] 卡组编辑器 */ #builder{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;flex-direction:column;padding:10px;gap:8px} #builder.hidden{display:none} .bhead{display:flex;gap:8px;align-items:center;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:10px} .bbody{flex:1;display:grid;grid-template-columns:240px 1fr 250px;gap:8px;min-height:0} .bleft,.bright,.bmain{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0} .bleft,.bright{overflow:auto} .bfilters{display:flex;gap:6px;flex-wrap:wrap;align-items:center} /* [R581] 编辑器里的下拉（.lobby select 管不到 #builder，之前是白底）+ 颜色多选胶囊 */ #builder select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px} #builder select:focus{outline:none;border-color:var(--accent)} .bfilters #bSearch{flex:1 1 280px;min-width:200px} .bcolors{display:flex;gap:4px;flex-wrap:wrap} .bcol{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--dim);line-height:1.2} .bcol i{width:9px;height:9px;border-radius:50%;background:var(--c,#888);display:block} .bcol:hover{border-color:#3a465c;color:var(--text)} .bcol.on{background:var(--panel2);border-color:var(--c);color:var(--text);font-weight:700;box-shadow:inset 0 0 0 1px var(--c)} @media (max-width:820px){.bfilters #bSearch{flex:1 1 100%}.bcol{padding:4px 7px;font-size:11px}} .bgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;align-content:start;grid-auto-rows:max-content} .bcard{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:8px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)} .bcard img{width:100%;height:auto;display:block;aspect-ratio:92/129;object-fit:cover;flex:0 0 auto} .bcard .n{position:absolute;right:4px;top:4px;background:#000a;border-radius:6px;padding:0 5px;font-size:11px;font-weight:700} .bcard .nm{font-size:10px;padding:2px 4px;color:var(--dim);background:var(--panel2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bcard.sel{outline:2px solid var(--accent)} .bslot{min-width:92px;min-height:129px;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim);cursor:pointer;text-align:center;padding:4px} .bslot img{width:92px;display:block;border-radius:6px} .brow{display:flex;align-items:flex-start;gap:8px} .blist{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px;min-height:40px} .bitem{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;background:var(--panel2);font-size:12px} .bitem b{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bitem button{min-height:22px;padding:0 6px} .bitem.cur{outline:1px solid var(--accent)} #bCode{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:11px} .deckpick{max-width:280px} .danger{color:var(--bad)} @media (max-width:820px){ /* [R586] 手机端三块竖排：左右栏各自限高，中间卡图区给足高度（以前网格被压成一条缝） */ .bbody{display:flex;flex-direction:column;overflow:auto} .bleft,.bright{flex:0 0 auto;max-height:220px} .bmain{flex:0 0 auto;height:calc(100vh - 110px);min-height:420px} .bgrid{flex:1;min-height:0} } /* [R582] 编辑器效率：显示更多 / 统计 / 违规行标红 / 手机卡组抽屉 */ .bmore{flex:0 0 auto;align-self:center;margin:8px auto 4px} .bstats{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--dim)} .bitem.bad{color:var(--bad);outline:1px solid var(--bad)} .bh2{display:flex;align-items:center;gap:6px} .blab{font-size:12px;color:var(--dim);white-space:nowrap;flex:0 0 auto} #builder .bh2 .fmtnow{margin-left:auto;font-size:11px;white-space:nowrap} .bdeckclose{display:none} .bdeckfab{display:none} /* [R587] 手机端筛选折叠 + 重置；桌面不显示「筛选」按钮 */ .bfilterbtn{display:none} .breset{flex:0 0 auto} .bhead .tiny{min-height:26px;padding:0 8px;font-size:12px} .bhead .tiny:disabled{opacity:.45} .bcard.full{opacity:.55} .bcard.full .n{background:var(--bad);color:#fff} @media (max-width:820px){ #bDeckFab{display:flex;align-items:center;gap:6px;position:fixed;right:12px;bottom:12px;z-index:70;background:var(--accent);color:#1a1a1a;border:0;border-radius:999px;padding:10px 14px;font-weight:700;box-shadow:0 6px 18px #0008} .bdeckclose{display:inline-block;margin-left:auto} #builder.deckopen .bright{position:fixed;left:8px;right:8px;bottom:8px;max-height:62vh;z-index:80;box-shadow:0 -8px 30px #000a} } /* [R587] 手机窄屏：筛选条默认收起来（占 171px 太狠），按钮上显示生效条件数；断点 600px 是为了不影响 800×600 的回归视口 */ @media (max-width:600px){ .bfilterbtn{display:inline-flex;align-self:flex-start;margin:0 0 2px} .bfilters{display:none} .bfilters.open{display:flex} } /* [R322] 咚!!卡组 / 场上的咚!! */ .donzone{display:flex;gap:8px;align-items:flex-end;padding:2px 8px 6px;min-height:56px} .donzone:empty{min-height:0;padding:0} .donpile{position:relative;width:40px;display:flex;flex-direction:column;align-items:center;gap:2px} .donpile.pick{cursor:pointer} .donpile.pick .donimg{outline:2px solid var(--accent);box-shadow:0 0 0 3px rgba(255,196,0,.18)} .donimg{width:34px;height:47px;object-fit:cover;border-radius:3px;border:1px solid var(--line);background:#fff} .donimg.rested{transform:rotate(90deg) scale(.9);margin:6px 0} .doncount{position:absolute;right:-3px;top:-7px;background:var(--accent);color:#1a1a1a;font-size:10px;line-height:1;padding:2px 5px;border-radius:8px;font-weight:700} .donpile small{font-size:9px;color:var(--dim);white-space:nowrap} .donpile.deck .donimg{filter:brightness(.92)} @media (max-width:720px){.donzone{gap:5px;min-height:44px;padding:0 4px 2px}.donimg{width:26px;height:36px}.donpile{width:32px}} /* [R325] 【启动主要】：可发动的卡描边 + 左上角「启动」角标；点卡即发动 */ .card.activable{box-shadow:0 0 0 2px var(--accent),0 0 12px rgba(255,196,0,.22);cursor:pointer} .card .actN{position:absolute;left:4px;top:4px;background:var(--accent);color:#1a1a1a;font-size:10px;line-height:1;padding:2px 5px;border-radius:8px;font-weight:700;z-index:4} /* [R328] 赋予的咚!!：卡下方叠一摞小咚!!卡（看得出层数 + 张数），赋予时从小咚!!堆飞过来 */ .card .donstack{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))} .card .donstack img.donmini{width:30px;height:42px;border-radius:3px;border:1px solid #2b2b2b;display:block;margin-top:-26px;background:#fff;object-fit:cover;box-shadow:0 -2px 0 rgba(0,0,0,.65)} .card .donstack img.donmini:first-child{margin-top:0} .card img{position:relative;z-index:1} .card .nm{position:relative;z-index:2} .card .donstack .donN{position:static;margin-top:-2px;font-size:10px;line-height:1;padding:3px 6px;border-radius:8px;background:var(--accent);color:#191919;font-weight:700;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.5)} .card.rested .donstack img.donmini{transform:none} .card.donland{animation:don-land .42s ease-out} @keyframes don-land{0%{transform:translateY(-3px)}45%{transform:translateY(2px) scale(1.03)}100%{transform:none}} .flydon{position:fixed;width:34px;height:47px;z-index:90;pointer-events:none;border-radius:3px;border:1px solid #111;background:#fff;object-fit:cover;transition:transform .42s cubic-bezier(.3,.8,.4,1),opacity .42s;will-change:transform} @media (prefers-reduced-motion: reduce){.flydon{display:none}.card.donland{animation:none}} /* [R569] 触屏拖拽：可拖的卡不参与页面滚动（交给 pointer 事件），拖动时跟手的小卡浮在指针下 */ .doncard[data-drag="1"], .hand .card[data-handuid]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} body.pt-drag{cursor:grabbing} .pt-ghost{position:fixed;left:0;top:0;z-index:300;pointer-events:none;transform:translate(-50%,-50%);opacity:.92;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))} .pt-ghost img{border-radius:5px;border:1px solid var(--line)} body.pt-drag .doncard[data-drag="1"], body.pt-drag .hand .card[data-handuid]{opacity:.55} /* [R329] 牌桌改版：参考 optcgassistant.com/play 的横向牌桌 —— 左侧战报栏 + 上下分区 + 生命/牌堆/卡背 */ #table{height:100vh;max-width:none;padding:0;gap:0;background:#0b0d12;overflow:hidden} #table .hud{display:flex;gap:8px;align-items:center;padding:6px 10px;background:rgba(0,0,0,.4);border-bottom:1px solid var(--line)} #table .hud .tag{font-size:12px} #table .hud .tiny{font-size:12px;padding:3px 8px} .bshell{flex:1;display:grid;grid-template-columns:208px minmax(0,1fr);min-height:0} .rail{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:#0d1016} .roster{padding:8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)} .rline{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--dim)} .rline b{font-size:13px;color:var(--text)} .rline .pills{display:flex;gap:3px;flex-wrap:wrap} .rline .pill{font-size:11px;padding:1px 6px} .rail .log{flex:1;min-height:0;overflow:auto;padding:8px 10px;font-size:12px;line-height:1.6;color:var(--dim);border:0;background:transparent} .board{display:flex;flex-direction:column;min-height:0} .half{flex:1;display:flex;flex-direction:column;min-height:0;padding:4px 12px;position:relative} .half.opp{background:linear-gradient(180deg,#2b1414 0%,#1d1012 72%,#150d10 100%)} .half.me{background:linear-gradient(180deg,#141b26 0%,#101722 62%,#0c121a 100%)} .topRow{display:flex;align-items:center;gap:10px;min-height:52px;padding:2px 0} .matRow{display:flex;align-items:flex-end;gap:10px;flex:1;min-height:0;padding:2px 0} .mid{background:transparent;min-height:0;padding:0 12px} .mid .actions{padding:6px 0 4px;margin:0} #table .field{display:flex;gap:8px;align-items:flex-end;flex:1;min-height:132px;padding:0;flex-wrap:nowrap;overflow-x:auto} #table .field .slot{flex:0 0 92px;width:92px;height:128px;border:1px dashed rgba(255,255,255,.14);border-radius:8px;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;color:rgba(255,255,255,.18);font-size:12px} #table .col{display:flex;flex-direction:column;gap:6px;align-items:center;flex:none} #table .pile.deck{width:64px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative} #table .pile.deck img{width:60px;height:84px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#0f131a} #table .pile.deck small{font-size:10px;color:var(--dim)} #table .pile.deck .count,#table .handBacks .count,#table .lifeRow .count{position:absolute;right:2px;top:-6px;background:var(--accent);color:#1a1a1a;font-size:10px;line-height:1;padding:2px 5px;border-radius:8px;font-weight:700} #table .handBacks{position:relative;display:flex;align-items:center;padding-right:6px} #table .miniback{width:34px;height:48px;object-fit:cover;border-radius:5px;border:1px solid var(--line);margin-left:-22px;background:#0f131a} #table .miniback:first-child{margin-left:0} #table .lifeRow{position:relative;display:flex;align-items:center;gap:2px;padding:0 6px} #table .minicard{position:relative;width:44px;height:62px;border-radius:5px;overflow:hidden;border:1px solid var(--line);background:#0f131a;margin-left:-14px} #table .minicard:first-child{margin-left:0} #table .minicard img{width:100%;height:100%;object-fit:cover;display:block} #table .minicard.up{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} #table .lifeRow .count{right:-4px} #table .donzone{padding:2px 0 18px;min-height:0} #table .hand{display:flex;justify-content:center;align-items:flex-end;padding:10px 12px 6px;gap:0;overflow:visible;min-height:118px} #table .hand .card{margin-left:-26px;transition:transform .12s ease} #table .hand .card:first-child{margin-left:0} #table .hand .card:hover{transform:translateY(-14px);z-index:5} #table .mid .banner{margin:4px 0} @media (max-width:900px){ .bshell{grid-template-columns:1fr} .rail{display:none} #table .field .slot{flex:0 0 66px;width:66px;height:93px} #table .hand .card{margin-left:-34px} } /* [R329b] 修正 */ #table{display:flex;flex-direction:column} .bshell{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)} .board{min-height:0;height:100%} .half{flex:1 1 0;min-height:0;padding:2px 10px} .half.me{padding-bottom:0} #table .matRow{padding:0} #table .mid{flex:0 0 auto;padding:0 10px} #table .mid .actions{padding:4px 0} #table .banner{margin:2px 0;font-size:13px;padding:6px 10px} #table .hand{flex:0 0 auto;min-height:0;height:auto;padding:6px 10px 2px;align-items:flex-end} #table .hand .card{width:70px;margin-left:-30px} #table .hand .card img{width:70px;height:98px} #table .hand .card .nm{display:none} #table .rline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #table .rline .pills{gap:2px} #table .rline .pill{font-size:10px;padding:0 4px} #table .roster{gap:6px;padding:6px 8px} #table .rail .log{padding:6px 8px;font-size:11.5px} /* 咚区：只留一叠一叠的卡图，文字改 title，避免把半个牌桌撑高 */ #table .donzone{display:flex;align-items:flex-end;gap:6px;padding:0 0 14px;min-height:0} #table .donzone .donpile{width:34px} #table .donzone .donimg{width:30px;height:42px} #table .donzone .donpile small{display:none} #table .donzone .donpile .doncount{font-size:10px;right:-4px;top:-6px} /* 对手：生命卡背居中、手牌背靠右；我方生命区在卡组下方 */ #table .half.opp .topRow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} #table .half.opp #oppLifeRow{justify-self:center} #table .half.opp #oppHandBacks{justify-self:end} #table .half.me .matRow .col{order:-1} @media (max-width:900px){ #table .hand .card{margin-left:-36px} #table .rline .pills{flex-wrap:nowrap} } /* [R329c] 版面铺满 + 卡牌放大 + 手牌扇形 */ #table .matRow{align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px)} #table .field{flex:0 1 auto;justify-content:center;gap:clamp(8px,1.6vw,20px);min-height:0} #table .field .card{width:104px} #table .field .card>img{width:104px;height:146px} #table .field .slot{flex:0 0 104px;width:104px;height:146px} #table .field .card .nm{max-width:104px;font-size:11px} #table .col{align-self:center} #table .donzone{align-self:center;padding:0} #table .hand .card{width:92px;margin-left:-46px} #table .hand .card img{width:92px;height:129px} #table .hand .card .nm{display:block;font-size:10px;max-width:92px} #table .hand{padding-bottom:6px} #table .half.opp .matRow{margin-top:6px} #table .half.me .matRow{margin-top:0} @media (max-width:1100px){ #table .field .card,#table .field .card>img,#table .field .slot{width:88px} #table .field .card>img,#table .field .slot{height:124px} #table .hand .card img{width:82px;height:115px} #table .hand .card{margin-left:-48px} } /* [R329d] 放大一级，贴近参考站密度 */ #table .field .card{width:118px} #table .field .card>img{width:118px;height:165px} #table .field .slot{flex:0 0 118px;width:118px;height:165px} #table .field .card .nm{max-width:118px;font-size:11px} #table .field{gap:clamp(10px,1.8vw,26px)} #table .donzone .donpile{width:44px} #table .donzone .donimg{width:40px;height:56px} #table .donzone .donpile .doncount{font-size:11px} #table .hand .card{width:104px;margin-left:-52px} #table .hand .card img{width:104px;height:146px} #table .hand .card .nm{max-width:104px} #table .half.me{padding-bottom:8px} #table .hand{padding-bottom:10px} @media (max-width:1100px){ #table .field .card,#table .field .card>img,#table .field .slot{width:92px} #table .field .card>img,#table .field .slot{height:129px} #table .hand .card img{width:86px;height:120px} #table .hand .card{margin-left:-52px} } /* [R329e] 空卡位按宽度均分，把 5 个格子铺满场地 */ #table .field .slot{flex:1 1 118px;width:auto;min-width:92px;max-width:190px} #table .field{flex:1 1 auto;min-width:0} #table .donzone{flex:0 0 auto} /* [R329f] 窄屏：缩小卡牌、手牌可横向滚动、场地允许横向滚动 */ @media (max-width:700px){ #table .hud{flex-wrap:wrap;row-gap:4px;padding:4px 6px} #table .hud .tiny{font-size:11px;padding:2px 6px} #table .field .card,#table .field .card>img{width:64px} #table .field .card>img{height:90px} #table .field .slot{flex:0 0 56px;min-width:56px;height:90px;font-size:10px} #table .field{gap:6px;justify-content:flex-start} #table .matRow{gap:6px;justify-content:flex-start;overflow:hidden} #table .col .pile.deck img{width:46px;height:64px} #table .lifeRow .minicard{width:32px;height:45px;margin-left:-10px} #table .handBacks .miniback{width:24px;height:34px;margin-left:-16px} #table .donzone .donpile{width:28px} #table .donzone .donimg{width:26px;height:36px} #table .hand{overflow-x:auto;justify-content:flex-start;padding:6px 6px 8px;min-height:96px} #table .hand .card{width:66px;margin-left:-36px} #table .hand .card img{width:66px;height:93px} #table .hand .card .nm{display:none} #table .mid .actions button{font-size:12px;padding:6px 8px} } /* [R330] 咚!!卡组挂在主卡组下方 + 生命区贴左 */ #table .col{display:flex;flex-direction:column;gap:5px;align-items:center} #table .pile.don{width:56px;display:flex;flex-direction:column;align-items:center;gap:1px;position:relative} #table .pile.don img{width:46px;height:64px;object-fit:cover;border-radius:5px;border:1px solid var(--line);background:#0f131a} #table .pile.don small{font-size:9px;color:var(--dim);white-space:nowrap} #table .pile.don .count{position:absolute;right:0;top:-6px;background:var(--accent);color:#1a1a1a;font-size:10px;line-height:1;padding:2px 5px;border-radius:8px;font-weight:700} #table .lifeRow{align-self:center} #table .half.me .lifeRow{transform:translateY(6px)} /* [R332] 咚!!卡组移到手牌下方；场上的咚!!像手牌一样一张张铺开；贴咚改成拖拽 */ #table .half.me .donzone, #table .half.opp .donzone{ display:flex;justify-content:center;align-items:flex-end;gap:0; flex:0 0 auto;min-height:0;padding:2px 0 0;position:relative; } #table .doncard{ position:relative;flex:0 0 auto;width:56px;height:78px;margin-left:-28px; cursor:grab;transition:transform .12s ease;border-radius:5px; } #table .doncard:first-child{margin-left:0} #table .doncard img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:5px; border:1px solid rgba(255,255,255,.28);background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45); } #table .doncard.rested img{transform:rotate(90deg) scale(.8)} #table .doncard:hover{transform:translateY(-12px);z-index:7} #table .doncard.dragging{opacity:.42;cursor:grabbing} #table .doncard.pick{cursor:pointer} #table .doncard.pick img,#table .donzone.armed .doncard img{outline:2px solid var(--accent);outline-offset:1px} #table .donzone.armed .doncard{cursor:pointer} #table .donzone.armed .doncard:hover{transform:translateY(-16px)} #table .donbottom{ display:flex;justify-content:center;align-items:flex-end;flex:0 0 auto; padding:2px 0 4px;min-height:0; } #table .donbottom .pile.don{width:52px} #table .donbottom .pile.don img{width:44px;height:61px} #table .donbottom .pile.don small{font-size:9px} #table .half.me .donbottom{margin-top:2px} /* 拖到卡上：虚线高亮 */ #table .card.donhover{outline:2px dashed var(--accent);outline-offset:5px;border-radius:10px} @media (max-width:900px){ #table .doncard{width:46px;height:64px;margin-left:-24px} #table .donbottom .pile.don img{width:38px;height:53px} } @media (max-width:700px){ #table .donzone{overflow-x:auto;justify-content:flex-start;padding:2px 6px 0} #table .doncard{width:40px;height:56px;margin-left:-20px} #table .donbottom .pile.don img{width:34px;height:47px} } @media (prefers-reduced-motion: reduce){ #table .doncard{transition:none} } /* [R332b] 把「场地 + 咚!! + 手牌 + 咚!!卡组」压进半个牌桌：整体缩一档，禁止溢到隔壁半场 */ #table .half.me{overflow:hidden} #table .half.me .matRow{min-height:0} #table .donzone{align-self:center} @media (min-width:901px){ #table .field .card,#table .field .card>img{width:104px} #table .field .card>img,#table .field .slot{height:146px} #table .field .slot{flex:0 0 104px;width:104px} #table .hand .card{width:88px;margin-left:-40px} #table .hand .card img{width:88px;height:123px} #table .doncard{width:44px;height:62px;margin-left:-22px} #table .donbottom .pile.don img{width:40px;height:56px} #table .hand{padding:4px 10px 0} #table .lifeRow .minicard{width:38px;height:53px} } /* [R333] 场地：领袖居中一行 + 5 个明显的角色格；缩放浮层 */ #table .field{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0;width:100%;flex:1 1 auto} #table .leadrow{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:0;width:100%} #table .charrow{display:flex;align-items:flex-end;justify-content:center;gap:8px;width:100%;min-height:0} #table .charrow .slot{ width:74px;height:103px;flex:0 0 auto;border:1px dashed rgba(255,255,255,.18); border-radius:10px;display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.24);font-size:12px;position:relative; } #table .charrow .slot.filled{border-color:transparent;padding:0} #table .half.opp{flex:0 0 auto} #table .half.me{flex:1 1 auto} #table .field .card,#table .field .card>img{width:68px} #table .field .card>img,#table .charrow .slot{height:96px} #table .field .card.leader,#table .field .card.leader>img{width:80px} #table .field .card.leader>img{height:112px} #table .hand{min-height:0;padding:2px 10px 0} #table .hand .card{width:72px;margin-left:-34px} #table .hand .card img{width:72px;height:101px} #table .doncard{width:30px;height:42px;margin-left:-15px} #table .donbottom .pile.don{width:40px} #table .donbottom .pile.don img{width:26px;height:36px} #table .lifeRow .minicard{width:28px;height:39px} #table .charrow .slot.drophover{border-color:var(--accent);background:rgba(255,196,0,.08)} #table .charrow .slot .card{cursor:grab} @media (min-height:980px){ #table .field .card,#table .field .card>img{width:84px} #table .field .card>img,#table .charrow .slot{height:118px} #table .charrow .slot{width:90px;height:118px} #table .field .card.leader,#table .field .card.leader>img{width:96px} #table .field .card.leader>img{height:134px} #table .hand .card{width:86px;margin-left:-40px} #table .hand .card img{width:86px;height:120px} #table .doncard{width:38px;height:53px;margin-left:-19px} #table .donbottom .pile.don img{width:32px;height:45px} } @media (max-width:900px){ #table .charrow .slot{width:56px;height:79px;font-size:11px} #table .field .card,#table .field .card>img{width:54px} #table .field .card>img{height:76px} #table .charrow{gap:4px} } /* 缩放看卡 */ .zoom{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:20px} .zoom.hidden{display:none} .zoom .zoombox{display:flex;gap:18px;max-width:min(960px,92vw);max-height:92vh;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.6)} .zoom img{width:min(44vw,380px);height:auto;border-radius:10px;display:block;background:#0f131a} .zoom .zoominfo{flex:1 1 300px;min-width:220px;max-width:420px;overflow:auto;color:var(--text)} .zoom .zoominfo b{font-size:18px} .zoom .zoomstats{margin:6px 0 10px;color:var(--dim);font-size:13px;display:flex;flex-wrap:wrap;gap:8px} .zoom .zoomstats span{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 8px} .zoom .zoomtext{white-space:pre-wrap;line-height:1.6;font-size:14px;margin:0} @media (max-width:700px){ .zoom .zoombox{flex-direction:column;max-height:94vh} .zoom img{width:auto;max-height:52vh;margin:0 auto} } /* [R333b] 我方：领袖行 + 5 格两行；对手：一行紧凑（领袖 + 5 格），把高度让给我方 */ #table .matRow{flex:0 0 auto} #table .half.opp .field{flex-direction:row;align-items:flex-end;justify-content:center} #table .half.opp .leadrow{width:auto} #table .half.opp .charrow{width:auto;margin-left:6px} /* [R333c] 再压一档：保证半场高度 420 内能放下「场地两行 + 咚 + 手牌 + 咚卡组」 */ #table .charrow .slot{height:92px} #table .field .card>img,#table .charrow .slot{height:92px} #table .field .card.leader>img{height:108px} #table .hand .card{width:68px;margin-left:-32px} #table .hand .card img{width:68px;height:95px} #table .hand .card .nm{font-size:9px;padding:1px 2px} #table .doncard{width:28px;height:40px;margin-left:-14px} #table .donbottom .pile.don img{width:24px;height:33px} #table .donbottom{padding:0} #table .hand .card img{height:90px} #table .hand{padding:0 10px} /* [R333d] 卡位固定宽度、咚区与手牌不重叠 */ #table .charrow .slot{flex:0 0 74px;width:74px} #table .half.me .donzone{margin-bottom:3px} #table .charrow .slot{min-width:0} /* [R333e] 场地居中：牌堆/生命区用绝对定位放两侧，领袖与 5 格在屏幕正中 */ #table .matRow{position:relative;display:flex;justify-content:center;align-items:flex-end} #table .matRow>.col{position:absolute;left:0;bottom:0;margin:0} #table .matRow>.lifeRow{position:absolute;left:58px;bottom:30px} #table .half.me .lifeRow{transform:none} /* [R333f] 用掉剩余高度：场地/手牌各放大一档 */ #table .field .card,#table .field .card>img{width:76px} #table .field .card>img,#table .charrow .slot{height:104px} #table .charrow .slot{width:78px;height:104px;flex:0 0 78px;min-width:0} #table .field .card.leader,#table .field .card.leader>img{width:92px} #table .field .card.leader>img{height:128px} #table .hand .card{width:76px;margin-left:-34px} #table .hand .card img{width:76px;height:104px} #table .doncard{width:32px;height:45px;margin-left:-16px} #table .donbottom .pile.don img{width:28px;height:39px} #table .field .card.leader>img{height:122px} #table .hand .card img{height:100px} #table .doncard{width:30px;height:42px;margin-left:-15px} #table .donbottom .pile.don img{width:26px;height:36px} /* [R333m] 手机端：隐藏绝对定位的牌堆/生命列（会在窄屏压到场地上），只保留 5 格场地 */ @media (max-width:700px){ #table .matRow>.col,#table .matRow>.lifeRow{display:none} #table .half.me .donzone{margin:0 0 2px} #table .half.me .hand{padding:0 4px} } /* [R333n] 手机端 5 格收进 390 宽 */ @media (max-width:700px){ #table .charrow{gap:2px} #table .charrow .slot{flex:0 0 68px;width:68px;height:92px} #table .field .card,#table .field .card>img{width:68px} #table .field .card.leader,#table .field .card.leader>img{width:80px} #table .field .card.leader>img{height:112px} } @media (max-width:700px){ #table .charrow{gap:0;justify-content:center} #table .charrow .slot{flex:0 0 64px;width:64px;height:90px} #table .field{width:100%;max-width:100%;align-items:center} #table .leadrow{justify-content:center} } /* [R333p] 领袖行放到角色格正下方居中 */ #table .field{flex-direction:column-reverse} /* [R334b] 咚卡行高度自适应、完整显示 */ #table .donzone{height:auto !important;min-height:0 !important;overflow:visible !important;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;padding:0 6px} #table .donzone .doncard{flex:0 0 72px;height:96px;position:relative} #table .donzone .doncard img{position:static;display:block} /* [R334c] 咚卡严格等于手牌 76x100 */ #table .donzone .doncard{flex:0 0 76px;width:76px;height:100px;margin-left:-34px} #table .donzone .doncard:first-child{margin-left:0} #table .donzone .doncard img{width:76px;height:100px !important;object-fit:cover} #table .donzone .doncard.rested img{transform:rotate(90deg) scale(.72)} /* [R336] 长提示（选赋予对象/弃牌等）在动作栏里换行，不要冲出屏幕 */ #table .actions .tag{white-space:normal;line-height:1.35;max-width:min(760px,72vw)} #table .actions{flex-wrap:wrap;row-gap:6px} /* [R337] 点自己的卡弹出的动作菜单 */ .cardmenu{position:fixed;z-index:120;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);min-width:104px} .cardmenu button{width:100%;text-align:center} /* [R338] 力量修正红字 / 检索卡图 / 排顺序 */ .card .powbonus{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:4;font-weight:900;font-size:20px;color:#ff3b30;text-shadow:0 0 4px #000,0 2px 6px rgba(0,0,0,.85);pointer-events:none;letter-spacing:.5px} .card .powbonus.down{color:#3aa0ff} #table .pickrow{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:2px 0} #table .pickcard{width:76px;cursor:pointer;border:2px solid transparent;border-radius:8px;background:var(--panel2);overflow:hidden} #table .pickcard img{width:100%;display:block;aspect-ratio:92/129;object-fit:cover} #table .pickcard .nm{font-size:10px;color:var(--dim);padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #table .pickcard.on{border-color:var(--accent);box-shadow:0 0 10px rgba(255,196,0,.5)} #table .pickcard.ord{position:relative;cursor:grab} #table .pickcard.ord.dragging{opacity:.4} #table .pickcard.ord.over{border-color:var(--blue)} #table .pickcard .ordn{position:absolute;left:2px;top:2px;z-index:2;background:var(--accent);color:#1a1a1a;font-size:10px;font-weight:700;border-radius:10px;padding:0 5px} /* [R338b] 900px 高内放下「场地两行 + 手牌 + 咚卡」：手牌与咚卡同尺寸 68x92 */ #table .half.me .field .card{width:72px} #table .half.me .field .card>img{width:72px;height:98px} #table .half.me .field .card.leader{width:88px} #table .half.me .field .card.leader>img{width:88px;height:120px} #table .half.me .hand .card{width:68px} #table .half.me .hand .card>img{width:68px;height:92px} #table .donzone .doncard{flex:0 0 68px;width:68px;height:92px;margin-left:-34px} #table .donzone .doncard img{width:68px;height:92px !important} /* [R338c] 再缩手牌/咚卡到 60x82，保证「场地 + 手牌 + 咚卡」都在 900 内 */ #table .half.me .hand .card{width:60px} #table .half.me .hand .card>img{width:60px;height:82px} #table .donzone .doncard{flex:0 0 60px;width:60px;height:82px;margin-left:-30px} #table .donzone .doncard img{width:60px;height:82px !important} /* [R338d] 压缩对手半场与我的场地，让「场地+手牌+咚卡」都在半场内 */ #table .half.opp .field .card{width:60px} #table .half.opp .field .card>img{width:60px;height:82px} #table .half.opp .field .card.leader{width:72px} #table .half.opp .field .card.leader>img{width:72px;height:98px} #table .half.opp .charrow .slot{flex:0 0 64px;width:64px;height:84px} #table .half.me .field .card{width:64px} #table .half.me .field .card>img{width:64px;height:86px} #table .half.me .field .card.leader{width:76px} #table .half.me .field .card.leader>img{width:76px;height:104px} #table .half.me .charrow .slot{height:86px} /* [R338e] 再压一档场地卡，保证三段都在 805 内 */ #table .half.me .field .card{width:56px} #table .half.me .field .card>img{width:56px;height:76px} #table .half.me .field .card.leader{width:68px} #table .half.me .field .card.leader>img{width:68px;height:92px} #table .half.me .charrow .slot{height:76px} #table .half.opp .field .card{width:56px} #table .half.opp .field .card>img{width:56px;height:76px} #table .half.opp .field .card.leader{width:68px} #table .half.opp .field .card.leader>img{width:68px;height:92px} #table .half.opp .charrow .slot{height:76px} #table .half.me .hand{height:auto} /* [R338f] 手牌/咚卡 60x80，收进 805 */ #table .half.me .hand .card{width:60px} #table .half.me .hand .card>img{width:60px;height:80px} #table .half.me .hand .card .nm{font-size:9px;line-height:11px;padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #table .donzone .doncard{flex:0 0 60px;width:60px;height:80px;margin-left:-30px} #table .donzone .doncard img{width:60px;height:80px !important} /* [R339] 自适应放大：--k 由 app.js 按窗口高度计算，所有战斗尺寸乘 --k */ #table{--k:1} #table .field .card{width:calc(56px * var(--k))} #table .field .card>img{width:calc(56px * var(--k));height:calc(76px * var(--k))} #table .field .card.leader{width:calc(68px * var(--k))} #table .field .card.leader>img{width:calc(68px * var(--k));height:calc(92px * var(--k))} #table .charrow{gap:calc(2px * var(--k))} #table .charrow .slot{flex:0 0 calc(74px * var(--k));width:calc(74px * var(--k));height:calc(76px * var(--k));font-size:calc(12px * var(--k))} #table .half.me .hand .card{width:calc(60px * var(--k))} #table .half.me .hand .card>img{width:calc(60px * var(--k));height:calc(80px * var(--k))} #table .donzone .doncard{flex:0 0 calc(60px * var(--k));width:calc(60px * var(--k));height:calc(80px * var(--k));margin-left:calc(-30px * var(--k))} #table .donzone .doncard img{width:100%;height:100% !important} #table .card .nm{font-size:calc(9px * var(--k));line-height:calc(11px * var(--k))} #table .card .pw,#table .card .donN,#table .card .powbonus{font-size:calc(11px * var(--k))} #table .card .powbonus{font-size:calc(18px * var(--k))} #table .card .actN{font-size:calc(10px * var(--k))} /* [R339b] 行不收缩，方便按内容高度自适应放大 */ #table .half.me .matRow,#table .half.me .hand,#table .half.me .donzone{flex-shrink:0} /* [R340] 场地卡/领袖跟着 --k 一起放大（压过 [R338e] 的固定尺寸规则）；角标偏移也随 --k 缩放 */ #table .field .card{width:calc(56px * var(--k)) !important} #table .field .card>img{width:calc(56px * var(--k)) !important;height:calc(76px * var(--k)) !important} #table .field .card.leader{width:calc(68px * var(--k)) !important} #table .field .card.leader>img{width:calc(68px * var(--k)) !important;height:calc(92px * var(--k)) !important} #table .charrow .slot{height:calc(76px * var(--k)) !important} #table .card .actN{left:calc(4px * var(--k));top:calc(4px * var(--k));font-size:calc(10px * var(--k));padding:calc(1px * var(--k)) calc(5px * var(--k));border-radius:calc(8px * var(--k))} #table .card .pw{top:calc(2px * var(--k));right:calc(3px * var(--k));font-size:calc(11px * var(--k));padding:0 calc(4px * var(--k))} #table .card .nm{font-size:calc(11px * var(--k));padding:calc(1px * var(--k)) calc(3px * var(--k))} #table .card .donstack{bottom:calc(-19px * var(--k))} #table .card .donstack img.donmini{width:calc(30px * var(--k));height:calc(42px * var(--k));margin-top:calc(-26px * var(--k))} #table .card .donstack .donN{font-size:calc(10px * var(--k));padding:calc(1px * var(--k)) calc(5px * var(--k))} #table .card .powbonus{font-size:calc(20px * var(--k))} /* [R340] 生命区：带「生命 N」标签，卡背加大一点，避免被当成咚卡 */ #table .lifeRow{display:flex;align-items:center;gap:4px} #table .lifeRow .lifelab{font-size:calc(11px * var(--k));color:var(--dim);font-weight:600} #table .lifeRow .lifecnt{background:var(--accent);color:#1a1a1a;border-radius:calc(8px * var(--k));padding:0 calc(6px * var(--k));font-weight:800;font-size:calc(12px * var(--k));line-height:1.6} #table .lifeRow .minicard{width:calc(38px * var(--k));height:calc(53px * var(--k))} /* [R340b] 卡组编辑器：标准环境不可用的卡（①号环境）置灰 */ #builder .bcard.illegal{opacity:.38;filter:grayscale(.85)} #builder .bcard.illegal:hover{opacity:.6} /* [R340c] 生命区：卡背只在彼此之间重叠，别压住「生命 N」 */ #table .lifeRow .minicard{margin-left:0} #table .lifeRow .minicard+.minicard{margin-left:calc(-10px * var(--k))} #table .lifeRow .lifecnt{margin-right:calc(4px * var(--k))} /* [R341] 牌桌不再整页滚动/裁切：缩放只按窗口算一次，避免出牌时跳变 */ #table,#table .bshell,#table .board,#table .half{overflow:hidden} /* [R342] 对手手牌背加一个可见的「手牌」小标签，别让人以为是多余的 UI */ #table .handBacks{position:relative} #table .handBacks::before{content:'手牌';position:absolute;left:calc(-34px * var(--k));top:50%;transform:translateY(-50%);font-size:calc(11px * var(--k));color:var(--dim);white-space:nowrap} /* [R343] 生命区竖排在左手边（双方都有）；墓地堆在右手边，可点击查看 */ #table .half{position:relative} #table .half .lifeRow{ position:absolute;left:2px;top:4px;bottom:auto;right:auto; z-index:4;display:flex;flex-direction:column;align-items:center;gap:0; } #table .half .lifeRow .lifelab{font-size:calc(11px * var(--k));color:var(--dim);font-weight:600} #table .half .lifeRow .lifecnt{ background:var(--accent);color:#1a1a1a;border-radius:calc(8px * var(--k)); padding:0 calc(6px * var(--k));font-weight:800;font-size:calc(12px * var(--k));line-height:1.6; margin:calc(2px * var(--k)) 0 calc(4px * var(--k)); } #table .half .lifeRow .minicard{margin:0} #table .half .lifeRow .minicard + .minicard{margin-top:calc(-34px * var(--k))} #table .matRow>.col.right{position:absolute;right:0;bottom:0;left:auto;align-items:center;gap:2px} #table .pile.trash{cursor:pointer} #table .pile.trash img{width:calc(46px * var(--k));height:calc(64px * var(--k));border-radius:calc(4px * var(--k));border:1px solid var(--line);object-fit:cover;background:#111} #table .pile.trash .empty{ width:calc(46px * var(--k));height:calc(64px * var(--k));border-radius:calc(4px * var(--k)); border:1px dashed rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.35);font-size:calc(13px * var(--k)); } #table .pile .pilelab{font-size:calc(10px * var(--k));color:var(--dim)} #table .pile.trash:hover{filter:brightness(1.15)} /* 墓地查看浮层 */ .grave{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center} .grave.hidden{display:none} .gravebox{width:min(1100px,94vw);height:min(760px,90vh);background:var(--panel);border:1px solid var(--line); border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)} .gravehead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)} .gravehead .sp{flex:1} .gravehead .pills{display:flex;gap:6px} .gravegrid{flex:1;overflow:auto;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;align-content:start} .gravecard{cursor:pointer;display:flex;flex-direction:column;gap:2px;border-radius:8px} .gravecard img{width:100%;aspect-ratio:92/129;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#111} .gravecard .nm{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gravecard:hover img{outline:2px solid var(--accent)} .graveempty{grid-column:1/-1;color:var(--dim);padding:24px;text-align:center} /* [R343b] 左手生命区与卡组列错开，避免重叠 */ #table .matRow>.col{left:calc(58px * var(--k))} #table .half .lifeRow{left:0} /* [R343c] 墓地堆的盒模型与计数角标；生命计数与卡之间留白 */ #table .pile.trash{width:calc(64px * var(--k));display:flex;flex-direction:column;align-items:center;gap:2px;position:relative} #table .pile.trash .count{position:absolute;right:0;top:calc(-6px * var(--k));background:var(--accent);color:#1a1a1a;font-size:calc(10px * var(--k));line-height:1;padding:calc(2px * var(--k)) calc(5px * var(--k));border-radius:calc(8px * var(--k));font-weight:700} #table .half .lifeRow .lifecnt{margin:calc(2px * var(--k)) 0 calc(8px * var(--k))} /* [R347] 中间的动作栏整体居中，不再贴左 */ #table .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center} #table #banner{text-align:center} #table #actions{justify-content:center;align-items:center;text-align:center} /* [R348] 费用修正角标 + 临时关键字小彩标（都按 --k 缩放） */ #table .card .costbonus{position:absolute;right:calc(3px * var(--k));top:calc(20px * var(--k));z-index:5;background:#2dd4bf;color:#06251f;font-weight:800;font-size:calc(11px * var(--k));line-height:1.3;padding:0 calc(4px * var(--k));border-radius:calc(6px * var(--k));box-shadow:0 1px 3px rgba(0,0,0,.5)} #table .card .costbonus.down{background:#60a5fa;color:#0b1b33} #table .card .kwrow{position:absolute;left:calc(2px * var(--k));top:calc(22px * var(--k));z-index:5;display:flex;flex-direction:column;gap:calc(2px * var(--k));align-items:flex-start;pointer-events:none} #table .card .kwtag{font-size:calc(10px * var(--k));line-height:1.25;font-weight:700;padding:0 calc(4px * var(--k));border-radius:calc(5px * var(--k));color:#0b0d12;box-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap} #table .card .kwtag.kw-blocker{background:#4c9aff;color:#fff} #table .card .kwtag.kw-unblock{background:#b06bff;color:#fff} #table .card .kwtag.kw-rush{background:#ff8c1a} #table .card .kwtag.kw-double{background:#ff5fa2;color:#fff} #table .card .kwtag.kw-active{background:#26c281} #table .card .kwtag.kw-noattack{background:#ff5f5f;color:#fff} #table .card .kwtag.kw-nolead{background:#ffa94d} /* [R348b] 关键字小彩标改成卡底一条横排，避免和右上费用/力量角标打架 */ #table .card .kwrow{left:calc(2px * var(--k));right:calc(2px * var(--k));top:auto;bottom:calc(16px * var(--k));flex-direction:row;flex-wrap:wrap;justify-content:center;gap:calc(2px * var(--k));align-items:flex-end} /* [R348c] 关键字小标再紧凑一点，窄卡也不至于溢出 */ #table .card .kwrow{overflow:hidden} #table .card .kwtag{font-size:calc(9px * var(--k));padding:0 calc(3px * var(--k));border-radius:calc(4px * var(--k))} /* [R348d] 费用角标挪到左上（启动角标下方），避开右上力量与中间的力量修正红字 */ #table .card .costbonus{right:auto;left:calc(3px * var(--k));top:calc(22px * var(--k))} /* [R348e] 费用/能力标记改成纯字色（无底色），并挪到卡底两角，避开力量与力量修正红字 */ #table .card .costbonus{left:calc(4px * var(--k));right:auto;top:auto;bottom:calc(5px * var(--k));background:none;box-shadow:none;padding:0;border-radius:0; font-weight:900;font-size:calc(11px * var(--k));color:#2dd4bf;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px rgba(0,0,0,.9)} #table .card .costbonus.down{color:#60a5fa} #table .card .kwrow{left:auto;right:calc(3px * var(--k));bottom:calc(4px * var(--k));top:auto;flex-direction:column;align-items:flex-end;gap:calc(1px * var(--k));overflow:visible} #table .card .kwtag{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0;font-weight:800;font-size:calc(10px * var(--k));line-height:1.2; text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px rgba(0,0,0,.9)} #table .card .kwtag.kw-blocker{color:#4c9aff} #table .card .kwtag.kw-unblock{color:#c084fc} #table .card .kwtag.kw-rush{color:#ff9f40} #table .card .kwtag.kw-double{color:#ff6fb5} #table .card .kwtag.kw-active{color:#34d399} #table .card .kwtag.kw-noattack{color:#ff6b6b} #table .card .kwtag.kw-nolead{color:#ffb84d} /* [R348f] 抬到卡名上方，别压住名称与编号 */ #table .card .costbonus{bottom:calc(19px * var(--k)) !important} #table .card .kwrow{bottom:calc(18px * var(--k)) !important} /* [R350] 手牌加大一号，由 JS 按张数自适应间距（layoutHand 设 margin-left） */ #table .hand{justify-content:center;align-items:flex-end;overflow:visible;gap:0;height:auto;min-height:0} #table .hand .card{width:calc(86px * var(--k));margin-left:0;flex:0 0 auto} #table .hand .card img{width:calc(86px * var(--k));height:calc(120px * var(--k))} #table .hand .card .nm{display:block;max-width:calc(86px * var(--k));font-size:calc(10px * var(--k));padding:calc(1px * var(--k)) calc(2px * var(--k))} #table .hand .card:first-child{margin-left:0 !important} #table .half.me .hand .card{width:calc(86px * var(--k))} #table .half.me .hand .card img{width:calc(86px * var(--k));height:calc(120px * var(--k))} /* [R350b] 手牌右侧留出墓地/牌堆的位置，避免最右边一张压在墓地上 */ #table .half.me .hand{padding-left:calc(10px * var(--k));padding-right:calc(72px * var(--k))} /* [R350c] 手牌变大后，咚卡保持与手牌同宽（R334 的约定） */ #table .donzone .doncard{width:calc(86px * var(--k)) !important;height:calc(120px * var(--k)) !important} #table .donzone .doncard img{width:calc(86px * var(--k)) !important;height:calc(120px * var(--k)) !important} /* [R351] 场地格：领袖右侧一格（双方），手牌中的舞台卡拖上去打出 */ #table .leadrow{position:relative;align-items:flex-end;gap:calc(8px * var(--k))} #table .leadrow::before{content:'';width:calc(74px * var(--k));flex:0 0 calc(74px * var(--k))} #table .stageSlot{width:calc(74px * var(--k));height:calc(104px * var(--k));flex:0 0 calc(74px * var(--k));border:1px dashed rgba(255,255,255,.18);border-radius:calc(6px * var(--k));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28);font-size:calc(11px * var(--k))} #table .stageSlot.filled{width:auto;height:auto;flex:0 0 auto;border-color:transparent} #table .stageSlot .slab{pointer-events:none} #table .stageSlot.drophover{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)} #table .stageSlot.filled.drophover{box-shadow:none} /* [R351] 底部咚!! 只露上面 2/3，省出高度给手牌 */ #table .half.me .donzone{align-items:flex-start;height:calc(80px * var(--k)) !important;min-height:0 !important;overflow:hidden} #table .half.me .donzone .doncard{height:calc(120px * var(--k))} /* [R351] 攻击箭头 */ #arrowLayer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:95;display:none} #arrowLayer .attackPath{fill:none;stroke:#ff5252;stroke-width:calc(5px * var(--k));stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,82,82,.85));animation:attackPulse .55s ease-in-out infinite alternate} @keyframes attackPulse{from{opacity:.7}to{opacity:1}} /* [R351b] 对手的咚区压成一条（只露顶 1/3），把高度让给我方手牌与咚 */ #table .half.opp #oppDonZone{height:calc(40px * var(--k)) !important;min-height:0 !important;overflow:hidden;align-items:flex-start;margin:0} /* [R351c] 攻击箭头加粗 + 白边，手牌与领袖名留缝 */ #arrowLayer .attackPath{stroke-width:calc(6px * var(--k));stroke:#ff3b30} #arrowLayer .attackPathGlow{stroke:rgba(255,255,255,.55);stroke-width:calc(11px * var(--k));fill:none;stroke-linecap:round} #table .half.me .hand{margin-top:calc(7px * var(--k))} /* [R352] 对手咚!!挪到手牌上方（缩小）；场地/角色/领袖框统一成卡片尺寸 */ #table .half.opp .topRow{display:flex !important;justify-content:flex-end;align-items:center;gap:calc(8px * var(--k));grid-template-columns:none} #table .oppRight{display:flex;flex-direction:column;align-items:flex-end;gap:calc(4px * var(--k))} #table .half.opp #oppDonZone{height:auto !important;min-height:0 !important;overflow:visible !important;align-items:center;justify-content:flex-end;gap:0;margin:0;padding:0} #table .half.opp #oppDonZone .doncard{width:calc(34px * var(--k)) !important;height:calc(48px * var(--k)) !important;margin-left:calc(-18px * var(--k))} #table .half.opp #oppDonZone .doncard:first-child{margin-left:0} #table .half.opp #oppDonZone .doncard img{width:calc(34px * var(--k)) !important;height:calc(48px * var(--k)) !important} #table{--cw:calc(74px * var(--k));--ch:calc(103px * var(--k))} #table .field .card{width:var(--cw) !important} #table .field .card>img{width:var(--cw) !important;height:var(--ch) !important} #table .field .card.leader{width:var(--cw) !important} #table .field .card.leader>img{width:var(--cw) !important;height:var(--ch) !important} #table .charrow .slot{flex:0 0 var(--cw) !important;width:var(--cw) !important;min-width:0 !important;height:var(--ch) !important} #table .stageSlot{width:var(--cw) !important;height:var(--ch) !important;flex:0 0 var(--cw) !important} #table .leadrow::before{width:var(--cw);flex:0 0 var(--cw)} #table .stageSlot .card,#table .stageSlot .card>img{width:var(--cw) !important;height:var(--ch) !important} #table .half.opp .field .card{width:var(--cw) !important} #table .half.opp .field .card>img{width:var(--cw) !important;height:var(--ch) !important} #table .half.opp .field .card.leader{width:var(--cw) !important} #table .half.opp .field .card.leader>img{height:var(--ch) !important} #table .half.opp .charrow .slot{flex:0 0 var(--cw) !important;width:var(--cw) !important;height:var(--ch) !important} /* [R352b] 领袖居中（场地格绝对定位在右侧），对手小咚卡尺寸生效 */ #table .field .leadrow{position:relative} #table .field .leadrow::before{display:none} #table .field .leadrow .stageSlot{position:absolute;left:calc(50% + var(--cw) * 0.62);bottom:0;width:var(--cw) !important;height:var(--ch) !important;flex:0 0 var(--cw) !important} #table .half.opp .topRow #oppDonZone .doncard{width:calc(34px * var(--k)) !important;height:calc(48px * var(--k)) !important;margin-left:calc(-18px * var(--k)) !important} #table .half.opp .topRow #oppDonZone .doncard:first-child{margin-left:0 !important} #table .half.opp .topRow #oppDonZone .doncard img{width:calc(34px * var(--k)) !important;height:calc(48px * var(--k)) !important} /* [R352c] 领袖行不再用 ::before 占位，舞台格绝对定位到领袖右侧 */ #table .leadrow.no-before::before{display:none !important} #table .leadrow.no-before{position:relative} #table .leadrow.no-before .stageSlot{min-width:0 !important;max-width:none !important} /* [R352d] 对手领袖/场地与我方左右对称：领袖压在 3 号格、场地压在 2 号格（都在格子行的上方） */ #table .half.opp .field{position:relative;overflow:visible !important;padding-top:calc(var(--ch) + 6px * var(--k))} #table .half.opp .field .leadrow{position:absolute;left:0;right:0;top:0;bottom:auto;width:100% !important;justify-content:center;z-index:20} #table .half.opp .field .stageSlot{min-width:0 !important;max-width:none !important} /* [R352d] 领袖卡与场地格统一为 --cw×--ch，名字叠在卡面底部 */ #table .leadrow .card.leader{width:var(--cw) !important;height:var(--ch) !important;position:relative;overflow:hidden;flex:0 0 var(--cw) !important} #table .leadrow .card.leader>img{width:var(--cw) !important;height:var(--ch) !important} #table .leadrow .card.leader .nm{position:absolute;left:0;right:0;bottom:0;font-size:calc(9px * var(--k));line-height:1.15;padding:calc(1px * var(--k)) calc(3px * var(--k));background:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* [R571] 回放控制条：fixed 底栏，复用牌桌渲染 */ .replaybar{position:fixed;left:0;right:0;bottom:0;z-index:210;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0d131c;border-top:1px solid var(--line);box-shadow:0 -8px 24px #0006;font-size:12px;color:var(--dim)} .replaybar .rp-title{font-weight:700;color:var(--fg);white-space:nowrap;max-width:22vw;overflow:hidden;text-overflow:ellipsis} .replaybar button{padding:4px 10px;min-width:34px} .replaybar .rp-range{flex:1;min-width:120px;accent-color:var(--accent)} .replaybar .rp-info{font-variant-numeric:tabular-nums;white-space:nowrap} .replaybar .rp-seat,.replaybar .rp-speed{background:#16202e;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:4px 6px} .replaybar .rp-state{color:var(--accent);white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis} .replaybar .sp{flex:1} body.replay-mode #actions,body.replay-mode #concedeBtn,body.replay-mode #copyRoom{display:none!important} body.replay-mode #table{padding-bottom:52px} body.replay-mode #banner.hidden{display:none} /* ---------- [R573] 账号：登录门 / 用户条 / 管理端 ---------- */ body.auth-locked{overflow:hidden} .userchip{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--dim);width:max-content;max-width:100%} .userchip .uavatar{font-size:15px} .userchip #userName{color:var(--text);font-weight:700;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} button.tiny{padding:3px 9px;font-size:12px;border-radius:999px} .authgate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 600px at 50% -10%,#1b2434 0%,#0b0e13 60%)} .authcard{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.55)} .authcard h2{margin:0 0 6px;font-size:22px} .authcard .hint{color:var(--dim);font-size:13px;margin:0 0 16px} .authcard input{display:block;width:100%;margin-bottom:10px} .authcard a{color:var(--accent)} button.wide{width:100%;margin-top:4px;padding:10px} .authcard .msg{margin:12px 0 0} /* [R578] 验证码输入 + 发送按钮 */ .authcard .coderow{display:flex;gap:8px;margin-bottom:10px} .authcard .coderow input{flex:1;min-width:0;margin-bottom:0} .authcard .coderow button{flex:0 0 auto;white-space:nowrap;padding-left:12px;padding-right:12px} .authcard input[readonly]{opacity:.72;cursor:not-allowed} /* [R582b] 密码显示/隐藏 + 大写锁定提示 */ .authcard .pwrow{position:relative;margin-bottom:10px} #authGate .authcard .pwrow input{margin-bottom:0;padding-right:64px} .authcard .pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:4px 9px;font-size:12px;line-height:1.2;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);cursor:pointer} .authcard .pweye:hover{color:var(--text);border-color:var(--accent)} .authcard .capshint{color:#f0b35a;margin:-2px 0 10px;font-size:12px} #nameNote{margin-left:8px;font-weight:400} button:disabled{opacity:.55;cursor:not-allowed} .adminbox{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,6,10,.72)} .admincard{width:100%;max-width:680px;max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px} .adminhead{display:flex;align-items:center;gap:8px;margin-bottom:8px} .admincard h3{font-size:14px;color:var(--dim);margin:18px 0 8px;font-weight:600} .adminlist{display:flex;flex-direction:column;gap:6px} .adminrow{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;font-size:13px;flex-wrap:wrap} .adminrow code{color:var(--accent);font-size:13px;letter-spacing:.5px} .adminrow .aname{flex:1;min-width:150px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adminrow .apill{color:var(--dim);font-size:12px} .adminrow .arole{color:var(--blue);font-size:12px} .banbox{max-width:430px} .banbox h3{margin:0 0 8px;color:var(--text);font-size:16px} .banbox select,.banbox input{width:100%;margin:7px 0} .banbox .row{display:flex;align-items:center;gap:8px;margin-top:10px} /* ---------- [R582] 管理员大厅右侧：玩家状态栏 ---------- */ .adminrail{ position:fixed; top:72px; right:16px; z-index:72; width:280px; max-height:calc(100vh - 96px); display:none; flex-direction:column; background:linear-gradient(180deg,rgba(25,32,45,.98),rgba(16,21,30,.98)); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 55px rgba(0,0,0,.46); overflow:hidden; } .adminrail.open{display:flex} .adminrail.hidden{display:none!important} .arhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 9px;border-bottom:1px solid var(--line)} .artitle{font-size:13px;font-weight:700;color:var(--text);display:flex;flex-direction:column;gap:2px;min-width:0} .arstats{font-size:11px;font-weight:400;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .arheadbtns{display:flex;align-items:center;gap:6px;flex:none} .arfilters{display:flex;gap:5px;padding:8px 10px 0} .arfilters input{flex:1;min-width:0;font-size:11px;padding:4px 7px;margin:0} .arfilters select{font-size:11px;padding:4px 5px;max-width:96px} .arclose{display:none;font-size:16px;line-height:1;padding:3px 8px} .arlist{overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px} .arow{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-height:50px} .arow.banned{opacity:.62} .awho{flex:1;min-width:0} .aname{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .amail{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .ameta{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;opacity:.9} .aright{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none} .astatus{font-size:10px;line-height:1.5;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--dim);white-space:nowrap} .astatus.playing{color:#191919;background:var(--accent);border-color:var(--accent);font-weight:700} .astatus.online{color:var(--ok);border-color:rgba(46,204,113,.42)} .astatus.offline{color:var(--dim)} .astatus.banned{color:var(--bad);border-color:rgba(255,92,92,.42)} .aban{padding:3px 8px;font-size:11px;line-height:1.4;border-radius:6px} .aban.ban{color:var(--bad);border-color:rgba(255,92,92,.35)} .aban.unban{color:var(--ok);border-color:rgba(46,204,113,.35)} .akick{padding:3px 8px;font-size:11px;line-height:1.4;border-radius:6px;color:#f0b35a;border-color:rgba(240,179,90,.42);background:transparent} .akick:hover{background:rgba(240,179,90,.12)} .armsg{color:var(--accent);font-size:12px;padding:0 12px} .armsg:empty{display:none} .adminrail-toggle{ position:fixed; right:14px; bottom:64px; z-index:96; display:none; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.35); } .adminrail-toggle b,.adminrail-toggle span{font-size:12px} .adminrail-toggle span{color:var(--accent);font-weight:700} @media (min-width:1280px){ .adminrail{display:flex} .adminrail-toggle{display:none!important} } @media (max-width:1279.98px){ .adminrail{top:auto;bottom:64px;right:12px;width:min(320px,calc(100vw - 24px));max-height:min(62vh,560px)} .adminrail.open{display:flex} .adminrail-toggle{display:inline-flex} .arclose{display:inline-block} } #lobby.hidden + #adminRail{display:none!important} #lobby.hidden ~ #adminRailToggle{display:none!important} .adminrail.open ~ #adminRailToggle{display:none!important} body.auth-locked #adminRail,body.auth-locked #adminRailToggle{display:none!important} body.in-game #adminRail,body.in-game #adminRailToggle{display:none!important} /* 羊皮纸主题下改成纸质公告板，不然深色栏会显得很突兀 */ body.parchment .adminrail{ background:linear-gradient(180deg,rgba(250,241,220,.98),rgba(233,218,184,.98)); border-color:var(--ink-line); color:var(--ink); box-shadow:0 20px 48px rgba(64,42,12,.34); } body.parchment .arhead{border-bottom-color:var(--ink-line)} body.parchment .artitle{color:var(--ink)} body.parchment .arstats,body.parchment .amail{color:var(--ink-soft)} body.parchment .arow{background:rgba(255,255,255,.34);border-color:var(--ink-line)} body.parchment .aname{color:var(--ink)} body.parchment .astatus{color:var(--ink-soft);border-color:var(--ink-line)} body.parchment .astatus.playing{color:#f8ead0;background:#3a2314;border-color:#2a180c} body.parchment .astatus.online{color:#2f6b3f;border-color:rgba(47,107,63,.42)} body.parchment .astatus.banned{color:var(--seal);border-color:rgba(141,47,37,.42)} body.parchment .adminrail button{background:transparent;border:1px solid var(--ink-line);color:var(--ink-2);border-radius:8px} body.parchment .adminrail button:hover{background:rgba(255,252,240,.55);border-color:var(--brass)} body.parchment .aban.ban{color:var(--seal);border-color:rgba(141,47,37,.42)} body.parchment .aban.unban{color:#2f6b3f;border-color:rgba(47,107,63,.42)} body.parchment .adminrail-toggle{background:#3a2314;border-color:#2a180c;color:#f8ead0;box-shadow:0 8px 22px rgba(58,35,20,.28)} /* ===================== [R587] 排位面板（大厅内） ===================== */ .rankbox{margin:6px 0 14px;padding:12px 12px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px} /* hidden 属性优先级：.rankqueue 之类带 display:flex 的块会盖掉 [hidden]，这里兜底 */ .rankbox[hidden],.rankbox [hidden]{display:none!important} .rankhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rankhead .grow{flex:1} .ranktitle{font-weight:700;letter-spacing:.5px} /* [R589] 一键匹配：居中、大号、有厚度（实心底边）+ 流光 + 外扩光圈 + 内部柔光 */ .rankaction{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 8px} .matchbig{position:relative;display:inline-flex;align-items:center;gap:12px;padding:19px 62px;border:0;border-radius:999px;font-size:22px;font-weight:800;letter-spacing:.1em;color:#2a1500;text-shadow:0 1px 0 rgba(255,255,255,.6);cursor:pointer; background:linear-gradient(115deg,#ffd76b,#ffb020 38%,#ff8a1f 62%,#ffb020 84%,#ffd76b);background-size:240% 100%; box-shadow:0 8px 0 #a3560a,0 15px 30px rgba(255,150,20,.42),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 0 rgba(140,66,0,.28); animation:rankShimmer 3.6s linear infinite;transition:transform .12s ease,box-shadow .12s ease} .matchbig:hover{transform:translateY(-2px);box-shadow:0 10px 0 #a3560a,0 19px 34px rgba(255,150,20,.5),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 0 rgba(140,66,0,.28)} .matchbig:active{transform:translateY(6px);box-shadow:0 2px 0 #a3560a,0 8px 16px rgba(255,150,20,.4),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(140,66,0,.28)} .matchbig[disabled]{opacity:.55;cursor:progress;animation:none} .matchbig::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(255,196,80,.8);opacity:0;pointer-events:none;animation:rankRing 2.4s ease-out infinite} .matchbig-ico{font-size:24px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))} .matchbig-ico,.matchbig-txt{position:relative;z-index:1} .matchbig-glow{position:absolute;inset:0;border-radius:inherit;z-index:0;background:radial-gradient(58% 130% at 28% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 62%);background-size:220% 100%;opacity:.32;pointer-events:none;animation:rankGlow 2.8s ease-in-out infinite} @keyframes rankShimmer{from{background-position:0% 50%}to{background-position:240% 50%}} @keyframes rankRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.24);opacity:0}} @keyframes rankGlow{0%,100%{background-position:0% 50%;opacity:.22}50%{background-position:100% 50%;opacity:.42}} @media (prefers-reduced-motion:reduce){.matchbig,.matchbig-glow,.matchbig::after{animation:none}} .rankbox .hint{margin:8px 0 0;font-size:12.5px;color:var(--dim)} .rankbox .hint.err{color:var(--bad)} .rankme{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;background:#0f131a;border:1px solid var(--line);border-radius:10px} .rankmeleft{display:flex;align-items:center;gap:10px} .ranktier{font-weight:700;color:var(--accent)} .rankscore{font-size:18px;font-weight:700} .rankmeright{display:flex;gap:8px;align-items:center;font-size:12px} .rankmeright .dot{color:var(--line)} .rankqueue{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;background:rgba(78,161,255,.08);border:1px solid rgba(78,161,255,.35);border-radius:10px;color:var(--blue)} .spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(78,161,255,.35);border-top-color:var(--blue);animation:rank-spin .8s linear infinite;flex:none} @keyframes rank-spin{to{transform:rotate(360deg)}} .rankready{margin-top:10px;padding:10px;background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.4);border-radius:10px} .rankreadytext{font-weight:700;color:var(--ok)} .rankopp{margin-top:4px;font-size:13px;color:var(--dim)} .rankreadybtns{margin:10px 0 0} .ladder{margin-top:12px;border-top:1px solid var(--line);padding-top:8px} .ladder>summary{cursor:pointer;color:var(--dim);font-size:13px;user-select:none} .ladder>summary:hover{color:var(--text)} .tiers{margin-top:8px;display:flex;flex-direction:column;gap:6px} .tier{border:1px solid var(--line);border-radius:9px;background:#0f131a;overflow:hidden} /* [R589] 每档都不折叠：徽章标题居中，人数/门槛写在徽章下面 */ .tierhead{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 10px 7px;font-size:13px} .tier.me{border-color:rgba(255,176,32,.55);background:rgba(255,176,32,.06)} .tier.me .tiername{color:var(--accent)} .tiername{font-weight:700;flex:1;margin-left:4px} .tiersub{color:var(--dim);font-size:12px;white-space:nowrap} .trow{display:flex;gap:8px;align-items:center;padding:6px 12px;border-top:1px solid var(--line);font-size:12.5px} .trow.me{background:rgba(255,176,32,.08)} .trank{width:20px;color:var(--dim);text-align:right;flex:none} .tname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tscore{color:var(--accent);font-weight:700;flex:none} .trec{color:var(--dim);flex:none;font-size:11.5px} .rankres{margin-top:6px;padding:8px 10px;border-radius:10px;font-weight:700;font-size:15px;background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.45)} .rankres.up{color:var(--ok);border-color:rgba(46,204,113,.45);background:rgba(46,204,113,.08)} .rankres.down{color:var(--bad);border-color:rgba(255,92,92,.45);background:rgba(255,92,92,.08)} @media (max-width:560px){ .rankme{flex-direction:column;align-items:flex-start} .rankreadybtns button{flex:1} } /* ===================== [R597] 排位匹配弹窗（居中、盖住大厅；期间锁卡组） ===================== */ .rankmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,9,14,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .rankmodal[hidden]{display:none!important} .rankmodal [hidden]{display:none!important} .rankmcard{width:min(420px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;box-shadow:0 24px 70px rgba(0,0,0,.6);animation:rankm-in .16s ease-out} @keyframes rankm-in{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}} .rankmhead{display:flex;flex-direction:column;gap:4px} .rankmtitle{font-size:18px;font-weight:800;letter-spacing:.02em} .rankmsub{font-size:12.5px;color:var(--dim);line-height:1.5} .rankmcard .rankqueue,.rankmcard .rankready{margin-top:14px} .rankmcard .rankreadybtns{display:flex;justify-content:center;gap:10px} .rankmcard .rankreadybtns button{flex:0 0 auto;min-width:104px} .rankmfoot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px} body.rank-lock .deckbox{display:none!important} /* ===================== [R598] 对局结算浮层（深色、居中；胜/负 + 双方领袖 + 统计 + 回放） ===================== */ .resultmodal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,10,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .resultmodal.hidden{display:none!important} .rmcard{width:min(560px,100%);max-height:calc(100vh - 36px);overflow:auto;background:linear-gradient(180deg,#151b26,#0f141c);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:0 28px 80px rgba(0,0,0,.65);animation:rm-in .18s ease-out} @keyframes rm-in{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}} .rmhead{text-align:center} .rmtitle{font-size:30px;font-weight:900;letter-spacing:.14em} .resultmodal.win .rmtitle{color:#ffcf5a;text-shadow:0 0 24px rgba(255,180,40,.35)} .resultmodal.lose .rmtitle{color:#8d9bb0} .rmsub{margin-top:6px;font-size:12.5px;color:var(--dim)} .rmduel{display:flex;align-items:center;gap:12px;margin-top:18px} .rmside{flex:1;min-width:0;text-align:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)} .rmside.win{border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.06)} .rmside.lose{opacity:.85} .rmlead img{width:86px;height:120px;object-fit:cover;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.45);background:#20283a} .rmleadname{display:block;margin-top:6px;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rmname{margin-top:4px;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rmstat{display:flex;justify-content:center;gap:10px;margin-top:6px;font-size:11.5px;color:var(--dim)} .rmstat b{color:var(--text)} .rmvs{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--dim);letter-spacing:.1em} .rmranked{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center} .rmranked .rankres{text-align:center} .rmmeta{display:flex;justify-content:center;gap:16px;margin-top:14px;font-size:12px;color:var(--dim);flex-wrap:wrap} .rmbtns{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap} .rmbtns button{min-width:120px} @media (max-width:560px){ .rmcard{padding:18px 16px 16px} .rmtitle{font-size:24px} .rmlead img{width:72px;height:100px} .rmduel{gap:8px} .rmbtns button{min-width:104px} } @media (max-width:560px){ /* 手机上同样居中：这里必须盖掉上面 560px 块里的 .rankreadybtns button{flex:1} */ .rankmcard .rankreadybtns{justify-content:center;gap:8px} .rankmcard .rankreadybtns button{flex:0 1 auto;min-width:96px} .rankmcard .rankmfoot{justify-content:center} } /* ===================== [R588] 称号徽章（排行榜每档标题 + 我的段位卡） ===================== */ .rankmeleft .tierbadge{height:26px;width:auto;max-width:190px;display:block;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .tierhead .tierbadge{height:46px;width:auto;max-width:250px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))} .trow.empty{color:var(--dim);font-style:italic;opacity:.8} @media (max-width:560px){ .tierhead .tierbadge{height:34px;max-width:170px} .matchbig{padding:14px 32px;font-size:17px} } /* ===================== [R593] 单人练习：一个按钮 + 难度菜单 ===================== */ .solobox{position:relative;display:inline-block} .solobox .solo{display:inline-flex;align-items:center;gap:6px} .solo-caret{font-size:11px;opacity:.7;transform:translateY(1px)} .solomenu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:124px;padding:6px;display:flex;flex-direction:column;gap:2px; background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.45)} .solomenu.hidden{display:none} .solomenu button{display:block;width:100%;min-height:34px;text-align:left;padding:7px 11px;border-radius:6px;background:transparent;border:1px solid transparent;color:var(--text);font:inherit;font-size:14px;line-height:1.35;cursor:pointer} .solomenu button:hover,.solomenu button:focus-visible{background:var(--panel2);border-color:var(--line);outline:none} /* ---------------- [R594] 最近对局 / 晋级横幅 ---------------- */ .rankrecent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-2px 0 10px;padding:0 2px} .rankrecent[hidden]{display:none!important} .rrhead{font-size:12px;color:var(--dim);letter-spacing:.04em} .rr{font-size:12px;line-height:1;padding:4px 7px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);white-space:nowrap} .rr.w{color:#9ee7a6;border-color:rgba(90,200,110,.35)} .rr.l{color:#f0a0a0;border-color:rgba(220,100,100,.3)} .rankpromo{display:flex;align-items:center;gap:10px;margin:10px 0 6px;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,196,80,.55); background:radial-gradient(120% 160% at 20% 0%,rgba(255,205,90,.22),rgba(255,170,40,.06) 60%,transparent);animation:rankPromoIn .5s ease-out both} .rankpromo img{height:40px;max-width:200px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))} .rankpromo .rankpromotxt{font-size:17px;font-weight:800;letter-spacing:.06em;color:#ffd977;text-shadow:0 1px 0 rgba(0,0,0,.35)} .rankpromo.down{border-color:rgba(120,140,180,.45);background:radial-gradient(120% 160% at 20% 0%,rgba(120,150,200,.16),transparent 65%)} .rankpromo.down .rankpromotxt{color:#b9c7de;font-weight:700} .rankpromo.down img{filter:grayscale(.35) drop-shadow(0 2px 4px rgba(0,0,0,.45))} .hint.warn{color:#ffb35c} @keyframes rankPromoIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}100%{opacity:1;transform:none}} @media (max-width:560px){ .rankpromo img{height:32px;max-width:150px} .rankpromo .rankpromotxt{font-size:15px} .rr{font-size:11px;padding:3px 6px} } .rankres.pop{animation:rankResPop .46s cubic-bezier(.22,1.2,.36,1) both} @keyframes rankResPop{0%{transform:scale(.94);opacity:.35}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}} /* ===================== [R596] 彩蛋：底部大肥鱼 ===================== */ .fishegg{position:relative;margin:22px auto 2px;width:132px;text-align:center;user-select:none} .fishegg .fishbtn{display:block;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;transition:transform .18s ease} .fishegg .fishbtn img{display:block;width:100%;height:auto;border-radius:12px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));animation:fishBob 3.6s ease-in-out infinite;-webkit-user-drag:none} .fishegg .fishbtn:hover{transform:translateY(-4px) scale(1.035)} .fishegg .fishbtn:active{transform:translateY(1px) scale(.975)} .fishegg .fishhint{margin-top:5px;font-size:12px;color:var(--dim);letter-spacing:.02em;transition:color .2s} .fishegg .fishbtn.poke img{animation:fishPoke .44s cubic-bezier(.3,1.55,.42,1)} @keyframes fishBob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-6px) rotate(1.2deg)}} @keyframes fishPoke{0%{transform:scale(1)}35%{transform:scale(1.14) rotate(-4deg)}70%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}} /* 连点 10 下之后：飘卡变鱼 + 泡泡 + 海浪 */ body.fish-storm .hcard.fish .hin{filter:drop-shadow(0 0 20px rgba(96,196,255,.55))} body.fish-storm .hcard.fish img{border-radius:7px;box-shadow:0 0 0 2px rgba(150,220,255,.5),0 10px 24px rgba(20,60,110,.45)} body.fish-storm .fishegg .fishhint{color:#3f8fd2} body.fish-storm .fishegg::after{content:"";position:absolute;left:50%;bottom:-8px;width:150px;height:34px;transform:translateX(-50%);border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(112,206,255,.55),rgba(112,206,255,0) 72%);animation:fishRing 2.6s ease-out infinite} .fish-wave{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1} .fish-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden} .fish-wave::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38vh; background:linear-gradient(to top,rgba(88,190,255,.30),rgba(120,205,255,.10) 46%,rgba(120,205,255,0) 82%); animation:fishWave 6s ease-in-out infinite} .fish-bubble{position:absolute;bottom:-36px;width:var(--bs,10px);height:var(--bs,10px);border-radius:50%;opacity:0; background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.98),rgba(150,222,255,.72) 46%,rgba(96,190,255,.28) 72%); border:1px solid rgba(150,220,255,.8);box-shadow:0 0 10px rgba(120,205,255,.45); animation:fishBubble var(--bd,9s) linear var(--bdelay,0s) infinite} @keyframes fishBubble{0%{transform:translate3d(0,0,0) scale(.65);opacity:0}12%{opacity:1}88%{opacity:.85}100%{transform:translate3d(16px,-112vh,0) scale(1.22);opacity:0}} @keyframes fishWave{0%,100%{transform:translateY(6px);opacity:.75}50%{transform:translateY(-6px);opacity:1}} @keyframes fishRing{0%{transform:translateX(-50%) scale(.72);opacity:.9}100%{transform:translateX(-50%) scale(1.4);opacity:0}} @media (prefers-reduced-motion:reduce){ .fishegg .fishbtn img,body.fish-storm .fish-wave::after{animation:none} /* 低动态偏好下不撒泡泡动画，但保留一层静态气泡，别让彩蛋变成空场 */ .fish-bubble{animation:none;opacity:.45;transform:translate3d(0,-46vh,0) scale(1)} } @media (max-width:560px){.fishegg{width:108px;margin:18px auto 0}.fishegg .fishhint{font-size:11px}} /* [R598] 禁卡：卡片正中大印章 + 淡红遮罩（素材 /theme/ban/ban-stamp.png） */ .bcard.banned{cursor:not-allowed} .bcard .ban-veil{position:absolute;inset:0;background:rgba(190,24,24,.22);pointer-events:none;z-index:2} .bcard .ban-stamp{position:absolute;left:50%;top:42%;width:64%;height:auto;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;z-index:3;mix-blend-mode:multiply;filter:drop-shadow(0 1px 2px rgba(90,0,0,.3))} .bcard.banned .nm{color:#ff8d8d} .bitem .bantag{flex:0 0 auto;padding:0 5px;border-radius:4px;background:var(--bad);color:#fff;font-size:10px;line-height:15px;font-weight:700} body.parchment #builder .bcard .ban-veil{background:rgba(180,30,30,.18)} /* [R599] 组合禁：A 与 B 同时入组才盖蓝色 LIMIT 章（单张合法，不加遮罩） */ .bcard .combo-stamp{position:absolute;left:50%;top:44%;width:58%;height:auto;transform:translate(-50%,-50%) rotate(-10deg);pointer-events:none;z-index:3;filter:drop-shadow(0 1px 2px rgba(20,50,110,.35))} .bcard.combo{outline:2px solid rgba(70,130,220,.55);outline-offset:-2px} .bitem .bantag.limit{background:#2b4f9e}