/* 唐五 · 深蓝对战桌 / 铜金操作 / 清晰的双手读数 */
:root { color-scheme: dark; --bg1:#101f2a; --bg2:#172d38; --panel:#182e3a; --panel2:#203c48; --line:#35505b; --txt:#e8eee9; --dim:#a4bac0; --gold:#dfb780; --gold2:#bc8f59; --red:#ed8b87; --green:#80c8a1; --blue:#85bfd2; --purple:#bcacd7; --cyan:#85cbd0; --display:'STKaiti','KaiTi','Songti SC',serif; }
* { box-sizing:border-box; margin:0; padding:0; }
/* Keep document metadata out of layout and make structural boxes explicit.
   The desktop renderer must not depend on UA defaults for the app's geometry. */
:where(head,title,meta,link,style,script,template),[hidden] { display:none!important; }
:where(html,body,main,section,div,p,h1,h2,h3,details,header,footer,nav,aside,figure,figcaption,ul,ol) { display:block; }
:where(li) { display:list-item; }
:where(summary) { display:list-item; cursor:pointer; }
:where(button,input,select,textarea,svg) { display:inline-block; }
html { min-height:100%; background:var(--bg1); scroll-behavior:smooth; }
body { min-height:100vh; color:var(--txt); background:radial-gradient(ellipse at 15% 0%,#25475380,transparent 55%),var(--bg1); font:15px/1.6 'Microsoft YaHei','PingFang SC',sans-serif; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--txt); padding:10px 16px; min-height:44px; transition:background .16s,transform .16s,border-color .16s; }
button:hover:not(:disabled) { background:#2a4855; border-color:var(--blue); transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(0); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--gold); border-color:var(--gold); color:#182832; font-weight:700; }
button.primary:hover:not(:disabled) { background:#ebc995; border-color:#ebc995; }
button.ghost { background:transparent; }
a { color:var(--blue); text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
input,select { width:100%; min-width:0; min-height:46px; border:1px solid var(--line); border-radius:8px; background:#10232e; color:var(--txt); padding:10px 13px; }
input::placeholder { color:#89a4af; }
input[type=radio] { width:auto; min-height:0; accent-color:var(--gold); }
.hidden { display:none!important; }
header { max-width:1240px; margin:auto; min-height:90px; padding:20px 28px; display:flex; gap:20px; align-items:center; border-bottom:1px solid var(--line); }
.logo { font-family:var(--display); font-size:33px; font-weight:700; letter-spacing:5px; white-space:nowrap; color:var(--gold); }
.brand-sub { margin-left:12px; font:11px/1.4 'Microsoft YaHei',sans-serif; letter-spacing:3px; color:var(--dim); vertical-align:middle; }
.roominfo { flex:1; min-width:0; font-size:12px; color:var(--dim); }
.header-btns { display:flex; gap:8px; flex-shrink:0; }
.header-btns button { font-size:12px; min-height:38px; padding:7px 12px; }
main { max-width:1240px; padding:28px; margin:auto; }
.panel { border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:28px; }
h1,h2,h3 { line-height:1.3; }
h2 { font-size:23px; margin-bottom:10px; }
.sub { color:var(--dim); font-size:14px; margin-bottom:22px; }
.hint,.kbd-hint { color:var(--dim); font-size:12px; }
.eyebrow { display:block; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:2px; margin-bottom:14px; }
/* 大厅：手势就是游戏的主视觉。 */
.home-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; min-height:590px; }
.home-layout.panel { background:transparent; border:0; padding:12px 0; }
.hero { min-width:0; position:relative; }
.hero h1 { font:700 clamp(42px,4.5vw,64px)/1.3 var(--display); letter-spacing:3px; margin-bottom:18px; }
.hero h1 em { color:var(--gold); font-style:normal; }
.hero-copy { color:var(--dim); max-width:380px; line-height:1.9; }
.hero-hands { height:250px; display:flex; justify-content:center; align-items:center; position:relative; max-width:470px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.hero-hands::before { content:''; position:absolute; width:250px; height:190px; border:1px solid #dfb78030; border-radius:50%; transform:rotate(-15deg); }
.hero-hands svg.hand { width:205px; height:205px; transform:rotate(-14deg); }
.hero-hands svg.hand:last-child { transform:rotate(14deg) scaleX(-1); }
.hero-hands .versus { color:var(--gold); font:italic 24px Georgia,serif; z-index:2; }
.hero-facts { display:flex; gap:24px; color:var(--dim); font-size:12px; }
.hero-facts b { display:block; font-size:19px; color:var(--txt); font-weight:600; }
.play-panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:0 20px 60px #0002; }
.play-panel h2 { font-size:22px; }
.field-label { display:block; color:var(--dim); font-size:12px; margin:18px 0 7px; }
.join-row { display:flex; gap:10px; margin-bottom:12px; }
.join-row button { flex-shrink:0; }
.play-divider { height:1px; background:var(--line); margin:24px 0; }
.panel-note { color:var(--dim); font-size:12px; margin-top:18px; }
.err { color:var(--red); font-size:13px; min-height:20px; }
.menu-opt { display:flex; flex-direction:column; gap:18px; }
.seg { display:flex; gap:8px; }
.seg button { flex:1; padding:12px 8px; font-size:13px; }
.seg button.on,.chip.on { background:#dfb78018; color:var(--gold); border-color:var(--gold); }
.seg button small { display:block; font-size:11px; color:var(--dim); margin-top:4px; font-weight:400; }
#diff-row { display:flex; flex-direction:column; gap:8px; }
#diff-row>span { font-size:12px; color:var(--dim); }
.difficulty-note { min-height:38px; color:var(--dim); font-size:12px; }
.quick-rules { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.quick-rules summary { cursor:pointer; color:var(--gold); font-size:13px; }
.quick-rules p { margin-top:12px; font-size:13px; color:var(--dim); line-height:1.9; }
#waiting { max-width:720px; margin:50px auto; text-align:center; padding:45px 30px; }
.bigcode { font:700 60px/1.4 Consolas,monospace; letter-spacing:14px; color:var(--gold); margin:22px 0; }
.invite { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin:20px 0; }
.invite a { overflow-wrap:anywhere; font-size:13px; }
/* 对战桌：双方并排，操作区完整占一行；战报独立滚动。 */
#game { display:grid; grid-template-columns:minmax(0,1fr) 278px; gap:20px; align-items:start; }
.game-left { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; }
.banner { grid-column:1/-1; border:1px solid var(--line); border-radius:9px; background:var(--panel); padding:12px 18px; font-size:14px; display:flex; align-items:center; gap:10px; min-height:49px; }
.banner::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--dim); flex-shrink:0; }
.banner.myturn { color:var(--gold); border-color:#8d7755; background:#dfb7800d; }
.banner.myturn::before { background:var(--gold); box-shadow:0 0 0 4px #dfb78015; }
.banner.aiwait { color:var(--blue); }
.player-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:18px; min-width:0; transition:border-color .2s; }
.player-card.active { border-color:var(--gold); box-shadow:inset 0 3px var(--gold); }
.p-head { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.p-name { font-size:14px; font-weight:700; flex:1; min-width:0; overflow-wrap:anywhere; }
.energy-badge { color:var(--gold); font-size:11px; white-space:nowrap; background:#dfb78010; border:1px solid #dfb78035; padding:3px 8px; border-radius:5px; }
.hp-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hp-bar { flex:1; height:5px; background:#0b1c26; border-radius:3px; overflow:hidden; }
.hp-fill { height:100%; border-radius:3px; transition:width .3s; }
.hp-fill.good { background:var(--green); }.hp-fill.mid { background:var(--gold); }.hp-fill.low { background:var(--red); }
.hp-num { font:700 20px Consolas,monospace; white-space:nowrap; }
.hp-num::after { content:' HP'; font:10px 'Microsoft YaHei',sans-serif; color:var(--dim); }
.hands { display:flex; justify-content:center; gap:12px; }
.hand-box { position:relative; display:flex; align-items:center; flex-direction:column; padding:6px 0 10px; min-width:0; flex:1; border-radius:9px; background:linear-gradient(180deg,#85bfd207,#85bfd214); }
.hand-box.skill { background:linear-gradient(180deg,#dfb78007,#dfb78014); }
.hand-box::before { content:'费用手'; font-size:10px; color:var(--blue); letter-spacing:1px; }
.hand-box.skill::before { content:'技能手'; color:var(--gold); }
svg.hand { width:112px; height:110px; max-width:100%; position:relative; filter:drop-shadow(0 5px 5px #0003); }
.hand-digit { min-width:30px; text-align:center; font:700 24px/1.2 Consolas,monospace; color:var(--blue); }
.hand-digit.skill { color:var(--gold); }
.buffs { display:flex; gap:5px; flex-wrap:wrap; margin-top:12px; }
.buffs:empty { display:none; }
.buff { border:1px solid var(--line); border-radius:5px; font-size:10px; color:var(--dim); padding:3px 6px; }
.buff[data-key=duming],.buff[data-key=qibu],.buff[data-key=delayed] { color:var(--red); border-color:#ed8b8755; }
.buff[data-key=wudi],.buff[data-key=dummy] { color:var(--gold); }
.buff[data-key=freeze] { color:var(--cyan); }
.controls,.controls-local { grid-column:1/-1; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:20px; }
.controls:empty,.controls-local:empty { display:none; }
.controls.sending { opacity:.55; pointer-events:none; }
.prompt { color:var(--dim); font-size:13px; margin-bottom:16px; }
.prompt b { color:var(--gold); font-size:17px; }
.add-btns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.add-choice { display:flex; flex-direction:column; text-align:left; padding:16px; gap:9px; min-height:132px; background:#10252f; }
.add-label { color:var(--dim); font-size:11px; }
.add-equation { font:22px Consolas,monospace; color:var(--txt); }
.add-equation b { font-size:32px; color:var(--gold); }
.add-preview { font-size:11px; color:var(--blue); line-height:1.7; }
.add-preview.unavailable { color:var(--red); }
.kbd-hint { margin-top:12px; text-align:center; font-size:11px; }
.skill-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:15px; }
.skill-card { --accent:var(--gold); position:relative; display:flex; flex-direction:column; padding:0 0 14px; overflow:hidden; border:1px solid var(--line); border-top:2px solid var(--accent); border-radius:9px; text-align:left; background:#112630; }
.skill-card:hover:not(:disabled) { border-color:var(--accent); background:#1d3540; transform:translateY(-3px); }
.theme-attack { --accent:var(--red); }.theme-heal { --accent:var(--green); }.theme-control { --accent:var(--purple); }.theme-defense,.theme-digit { --accent:var(--blue); }.theme-summon { --accent:var(--cyan); }
.card-art { height:80px; overflow:hidden; background:linear-gradient(180deg,#ffffff05,transparent); margin-bottom:8px; }
svg.card-svg { width:100%; height:100%; display:block; }
.card-name { color:var(--txt); font-size:14px; font-weight:700; padding:0 12px; }
.card-desc { color:var(--dim); font-size:11px; line-height:1.75; padding:6px 12px 0; }
.card-cost { position:absolute; top:7px; right:7px; font:700 12px Consolas,monospace; border-radius:5px; background:#0c1c25e8; color:var(--gold); padding:4px 7px; }
.card-star { position:absolute; top:7px; left:8px; color:var(--gold); font-size:12px; }
.card-tag { color:var(--blue); font-size:10px; padding:3px 12px 0; }
.card-key { position:absolute; right:8px; top:57px; font:10px Consolas,monospace; color:var(--dim); border:1px solid var(--line); padding:0 4px; border-radius:3px; }
.pass-btn { width:100%; border-style:dashed; background:transparent; font-size:12px; color:var(--dim); }
.wait-msg { padding:24px 10px; text-align:center; color:var(--dim); font-size:13px; }
.game-right { position:sticky; top:20px; min-width:0; }
.log-panel { border:1px solid var(--line); background:#10222c; border-radius:12px; overflow:hidden; }
.log-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); font-size:12px; }
.log-count { font-size:10px; color:var(--dim); }
.log { padding:10px 14px; max-height:660px; min-height:280px; overflow-y:auto; font-size:11px; line-height:1.85; color:var(--dim); }
.log-line { padding:7px 0 7px 9px; margin:4px 0; border-left:2px solid var(--line); }
.log-line.dmg { border-color:var(--red); }.log-line.heal { border-color:var(--green); }.log-line.nrg { border-color:var(--gold); }.log-line.sys { border-color:var(--purple); }
.log-line.latest { color:var(--txt); background:#dfb7800a; }
.log-jump { position:absolute; right:12px; bottom:12px; min-height:32px; font-size:11px; padding:5px 10px; background:var(--gold); color:var(--bg1); }
/* 技能禁用与弹层 */
#ban { max-width:1080px; margin:auto; }
.ban-tools { display:flex; align-items:center; gap:16px; margin:18px 0; flex-wrap:wrap; }
.ban-tools input { flex:1 1 180px; }
.ban-chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { min-height:34px; padding:5px 10px; font:12px Consolas,monospace; }
.ban-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; max-height:62vh; overflow:auto; padding:4px; }
.ban-skill { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; background:#112630; padding:14px; }
.ban-cost { align-self:flex-end; font:11px Consolas,monospace; color:var(--gold); }
.ban-name { font-weight:700; font-size:14px; }.ban-desc { font-size:11px; color:var(--dim); line-height:1.7; }
.empty-state { grid-column:1/-1; padding:30px; color:var(--dim); text-align:center; }
.modal { position:fixed; inset:0; z-index:50; background:#07121bd9; backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { width:min(420px,100%); max-height:90dvh; overflow:auto; display:flex; flex-direction:column; gap:16px; padding:30px; border:1px solid var(--line); border-radius:17px; background:var(--panel); box-shadow:0 30px 90px #0006; text-align:center; }
.modal-box.wide { width:min(900px,100%); height:88dvh; text-align:left; }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }.modal-head h2 { font-size:19px; margin:0; }
.modal-box iframe { flex:1; width:100%; min-height:200px; border:1px solid var(--line); border-radius:8px; background:var(--bg1); }
.modal-box .sub { margin:0; }
.buff-choice { display:block; border:1px solid var(--line); border-radius:7px; text-align:left; padding:12px; margin-bottom:8px; font-size:13px; }
.btn-row { display:flex; gap:8px; margin-top:16px; }.btn-row button { flex:1; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:70; max-width:90vw; background:var(--panel2); border:1px solid var(--gold); color:var(--txt); border-radius:9px; padding:12px 20px; font-size:13px; box-shadow:0 8px 30px #0005; }
.ai-thinking { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:40; border:1px solid var(--blue); background:#112630f5; padding:10px 18px; border-radius:30px; color:var(--blue); font-size:12px; display:flex; gap:8px; align-items:center; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--blue); animation:blink 1.2s infinite; }.dot:nth-child(2) { animation-delay:.2s; }.dot:nth-child(3) { animation-delay:.4s; }
.dmg-num { position:absolute; right:20px; top:45px; color:var(--red); font:700 24px Consolas,monospace; pointer-events:none; animation:float-up .8s forwards; }.dmg-num.heal { color:var(--green); }
.player-card.hurt { animation:hurt .5s; }
@keyframes float-up { to { opacity:0; transform:translateY(-25px); } }
@keyframes hurt { 50% { border-color:var(--red); box-shadow:inset 0 0 25px #ed8b8720; } }
@keyframes blink { 50% { opacity:.25; } }
* { scrollbar-width:thin; scrollbar-color:#506975 #112630; }
@media(max-width:1000px) { .home-layout { gap:26px; }.hero h1 { font-size:46px; } #game { grid-template-columns:minmax(0,1fr) 230px; gap:14px; }.player-card { padding:13px; }.hands { gap:6px; } svg.hand { width:94px; height:100px; }.hero-hands svg.hand { width:180px; height:190px; } }
@media(max-width:820px) { header { padding:15px 20px; min-height:76px; }.brand-sub { display:none; } main { padding:22px 18px; }.home-layout { grid-template-columns:1fr; gap:28px; max-width:590px; margin:auto; }.hero-hands { height:185px; margin-top:10px; }.hero-hands svg.hand { height:180px; }.hero h1 { font-size:44px; }.hero-copy { max-width:none; }.hero-facts { justify-content:space-between; }.play-panel { padding:24px; } #game { grid-template-columns:1fr; }.game-right { position:relative; top:auto; }.log { min-height:120px; max-height:230px; }.banner { position:sticky; top:8px; z-index:5; background:#182e3af5; }.banner.myturn { background:#2b3536f5; } }
@media(max-width:480px) { header { gap:10px; padding:12px 14px; flex-wrap:wrap; }.logo { font-size:29px; }.roominfo { font-size:10px; }.header-btns { gap:5px; }.header-btns button { padding:6px 9px; min-height:35px; font-size:11px; } main { padding:18px 12px; }.hero h1 { font-size:38px; }.hero { padding:0 8px; }.hero-hands { height:166px; }.hero-hands svg.hand { width:156px; height:164px; }.hero-facts { gap:12px; }.hero-facts b { font-size:17px; }.play-panel,.panel { padding:20px 16px; }.game-left { gap:10px; }.player-card { padding:12px 9px; }.p-head { flex-wrap:wrap; gap:5px; margin-bottom:10px; }.p-name { flex-basis:100%; font-size:12px; }.energy-badge { font-size:10px; padding:2px 5px; }.hp-num { font-size:17px; }.hp-num::after { font-size:8px; }.hp-row { gap:7px; }.hands { gap:4px; } svg.hand { width:70px; height:84px; }.hand-box::before { font-size:9px; letter-spacing:0; }.hand-digit { font-size:20px; }.controls,.controls-local { padding:16px 12px; }.add-choice { padding:12px 10px; }.add-equation { font-size:18px; }.add-equation b { font-size:27px; }.add-preview { font-size:10px; }.skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.card-art { height:70px; }.card-desc { padding:5px 10px 0; }.card-name { padding:0 10px; }.ban-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.ban-skill { padding:10px; }.modal { padding:12px; }.modal-box { padding:22px 16px; }.buff { font-size:9px; }.bigcode { font-size:43px; }.join-row button { font-size:13px; padding:10px; }.kbd-hint { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* 插画保持完整构图；悬停只动图片容器，不卡住对局输入。 */
.card-art { height:128px; background:#071c24; position:relative; }
.card-art .card-svg { transition:transform .24s ease,filter .24s ease; }
.skill-card:hover:not(:disabled) .card-art .card-svg,
.skill-card:focus-visible .card-art .card-svg { transform:scale(1.065); filter:brightness(1.13); }
.card-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 70%,#11263080); pointer-events:none; }
.skill-card:active:not(:disabled) { transform:translateY(1px) scale(.985); }
#battle-fx { position:fixed; inset:0; z-index:55; overflow:hidden; pointer-events:none; contain:strict; }
#battle-fx>div { position:absolute; pointer-events:none; }
.cast-scene { inset:0; width:100%; height:100%; perspective:1000px; --fx-color:#d8c29d; }
.cast-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%,#08111d10 8%,#08111d75 75%); }
.cast-face { position:absolute; left:var(--cast-x); top:var(--cast-y); width:210px; height:284px; border:1px solid #e9d5b080; border-radius:15px; padding:9px; overflow:hidden; transform-style:preserve-3d; background:linear-gradient(145deg,#384b60,#152337 48%,#0b1524); box-shadow:0 28px 80px #0009,0 0 55px color-mix(in srgb,var(--fx-color) 25%,transparent),inset 0 0 0 3px #080d18,inset 0 0 0 4px #e9d5b030; }
.cast-face::after { content:""; position:absolute; inset:5px; border:1px solid #d8c29d45; border-radius:10px; pointer-events:none; }
.cast-face-art { height:218px; border-radius:9px; overflow:hidden; background:#101c2c; }
.cast-face-art svg { width:100%; height:100%; display:block; }
.cast-cost { position:absolute; left:16px; top:16px; width:34px; height:45px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #e9d5b080; border-radius:5px; background:#101827e8; color:#f0dfbe; font:600 23px/1 Georgia,serif; }
.cast-cost small { margin-top:4px; font:9px/1 sans-serif; letter-spacing:2px; }
.cast-face-title { display:flex; align-items:center; justify-content:space-between; padding:13px 8px 5px; }
.cast-face-title small { color:var(--fx-color); font-size:10px; letter-spacing:3px; }
.cast-face-title strong { color:#f2e6cf; font:600 21px/1.1 "KaiTi","STKaiti",serif; letter-spacing:2px; }
.cast-foil { position:absolute; inset:-30%; background:linear-gradient(110deg,transparent 25%,#fff1 42%,#f8edcc80 49%,#fff2 55%,transparent 70%); mix-blend-mode:screen; }
.cast-orbit { position:absolute; left:var(--cast-x); top:calc(var(--cast-y) - 20px); width:410px; height:410px; transform:translate(-50%,-50%); }
.cast-orbit svg { width:100%; height:100%; fill:none; stroke:var(--fx-color); stroke-width:.65; }
.cast-orbit circle:nth-child(2) { stroke-dasharray:2 11; stroke-width:2; opacity:.75; }
.cast-caption { position:absolute; left:var(--cast-x); top:calc(var(--cast-y) + 143px); width:min(340px,86vw); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; text-shadow:0 2px 10px #000; }
.cast-caption>span { color:var(--fx-color); font-size:10px; letter-spacing:4px; }
.cast-caption strong { font:600 25px/1.2 "KaiTi","STKaiti",serif; color:#f3e8d2; letter-spacing:5px; }
.cast-caption>small { color:#bdc8d5; font-size:11px; line-height:1.6; max-width:300px; }
.cast-slash { position:absolute; left:var(--cast-x); top:var(--cast-y); height:5px; transform-origin:left center; background:linear-gradient(90deg,transparent,var(--fx-color) 45%,#fff 80%,transparent); box-shadow:0 0 15px var(--fx-color); }
.cast-impact { position:absolute; left:var(--hit-x); top:var(--hit-y); width:210px; height:210px; transform:translate(-50%,-50%); }
.cast-impact i { position:absolute; inset:8%; border:1px solid var(--fx-color); border-radius:50%; box-shadow:0 0 20px color-mix(in srgb,var(--fx-color) 50%,transparent),inset 0 0 22px color-mix(in srgb,var(--fx-color) 15%,transparent); }
.cast-impact b { position:absolute; inset:28%; background:radial-gradient(circle,#fff8,var(--fx-color) 20%,transparent 68%); border-radius:50%; }
.cast-motes { position:absolute; left:var(--hit-x); top:var(--hit-y); }
.cast-motes i { position:absolute; width:var(--size); height:calc(var(--size)*2.4); background:var(--fx-color); border-radius:1px; box-shadow:0 0 8px var(--fx-color); transform-origin:center; }
.cast-kind-fire .cast-impact b { inset:5% 18%; border-radius:80% 20% 60% 40%; background:radial-gradient(ellipse at 50% 70%,#fff3ae,#ff9d44 24%,#bf421860 48%,transparent 68%); }
.cast-kind-frost .cast-impact i { border-radius:0; rotate:45deg; background:linear-gradient(135deg,#a3e1f405,#a3e1f428); }
.cast-kind-shield .cast-impact i,.cast-kind-summon .cast-impact i { clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%); border-radius:0; background:linear-gradient(135deg,transparent,color-mix(in srgb,var(--fx-color) 18%,transparent)); }
.cast-kind-sniper .cast-impact i { border:2px solid var(--fx-color); background:linear-gradient(90deg,transparent 49%,#ffd997 49%,#ffd997 50%,transparent 50%),linear-gradient(0deg,transparent 49%,#ffd997 49%,#ffd997 50%,transparent 50%); }
.cast-ultimate .cast-face { box-shadow:0 28px 100px #000b,0 0 75px #ffd99765; border-color:#ffe2a4; }
.cast-ultimate .cast-impact { width:280px; height:280px; }
@media(max-width:480px) { .cast-face { width:170px; height:232px; }.cast-face-art { height:172px; }.cast-orbit { width:310px; height:310px; }.cast-caption { top:calc(var(--cast-y) + 120px); }.cast-caption strong { font-size:22px; }.cast-face-title strong { font-size:18px; }.cast-caption>small { font-size:10px; }.cast-impact { width:170px; height:170px; } }
.result-reason { margin:14px 0; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:#101827; color:#d5cdbb; font-size:13px; line-height:1.7; }
.review-note { color:var(--dim); font-size:12px; }
.review-players { display:flex; justify-content:space-between; gap:12px; color:var(--gold); padding:8px 0 16px; font-size:13px; }
.review-log { max-height:55vh; overflow:auto; background:#101827; border:1px solid var(--line); border-radius:9px; padding:12px; text-align:left; }
.cast-ghost { width:64px; height:64px; border:1px solid var(--fx-color); border-radius:12px; overflow:hidden; box-shadow:0 0 20px color-mix(in srgb,var(--fx-color) 50%,transparent); background:#10232e; }
.cast-label { white-space:nowrap; color:var(--fx-color); border:1px solid color-mix(in srgb,var(--fx-color) 55%,transparent); background:#0b1d29ee; padding:5px 14px; border-radius:20px; font-size:13px; font-weight:700; box-shadow:0 4px 18px #0004; }
.effect-burst { transform:translate(-50%,-50%); }
.effect-ring { position:absolute; inset:8%; border:2px solid var(--fx-color); border-radius:50%; box-shadow:0 0 15px var(--fx-color),inset 0 0 18px color-mix(in srgb,var(--fx-color) 30%,transparent); animation:fx-ring var(--fx-duration) ease-out both; }
.effect-core { position:absolute; inset:25%; background:radial-gradient(circle,#fff9,transparent 60%); border-radius:50%; }
.effect-particle { position:absolute; left:50%; top:50%; width:5px; height:13px; border-radius:4px; background:var(--fx-color); box-shadow:0 0 8px var(--fx-color); animation:fx-particle var(--fx-duration) ease-out both; animation-delay:var(--delay); }
.effect-fire .effect-core { inset:16% 25%; background:radial-gradient(ellipse at 50% 80%,#fff5a7,#ffb34a 28%,#eb6828a0 50%,transparent 70%); border-radius:80% 20% 60% 40%; transform:rotate(18deg); }
.effect-fire .effect-ring { border-color:transparent; box-shadow:0 0 30px #ff9b4760; }
.effect-frost .effect-core { inset:12%; border-radius:0; clip-path:polygon(50% 0,58% 36%,85% 15%,64% 43%,100% 50%,64% 57%,85% 85%,58% 64%,50% 100%,42% 64%,15% 85%,36% 57%,0 50%,36% 43%,15% 15%,42% 36%); background:linear-gradient(135deg,#fff,#9dddff80,#b8e9ff); }
.effect-frost .effect-particle { width:8px; height:16px; border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.effect-heal .effect-core { inset:29%; border-radius:3px; clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); background:linear-gradient(#e3fff0,#6bda9b); }
.effect-heal .effect-particle { border-radius:50%; width:6px; height:6px; }
.effect-shield .effect-ring { inset:8% 19%; border-radius:40% 40% 50% 50%; background:linear-gradient(145deg,#9edaff40,transparent); transform:perspective(200px) rotateY(-15deg); }
.effect-shield .effect-core { inset:25% 32%; background:linear-gradient(135deg,#fff8,#93d8ff70); clip-path:polygon(50% 0,100% 20%,88% 73%,50% 100%,12% 73%,0 20%); }
.effect-shatter .effect-ring { animation:fx-shatter .4s ease-out both; }.effect-shatter .effect-core { opacity:.2; }.effect-shatter .effect-particle { width:12px; height:18px; border-radius:0; clip-path:polygon(0 0,100% 30%,45% 100%); }
.effect-poison .effect-core { background:radial-gradient(circle,#b9f291a0,#65b44250,transparent 70%); inset:4%; }.effect-poison .effect-particle { border-radius:50%; width:10px; height:10px; }
.effect-control .effect-ring,.effect-digit .effect-ring { border-style:dashed; border-width:3px; }
.effect-summon .effect-core,.effect-energy .effect-core { background:linear-gradient(135deg,#fff8,var(--fx-color)); clip-path:polygon(50% 0,90% 35%,72% 85%,50% 100%,28% 85%,10% 35%); }
.sniper-sight { width:120px; height:120px; border:1px solid #ffd997; border-radius:50%; box-shadow:0 0 16px #ffd99744; }
.sniper-sight::before { content:''; position:absolute; inset:15px; border:1px solid #ffd99780; border-radius:50%; }.sniper-sight i { position:absolute; left:50%; top:-12px; height:144px; border-left:1px solid #ffe0a2; }.sniper-sight b { position:absolute; top:50%; left:-12px; width:144px; border-top:1px solid #ffe0a2; }
.shot-trail { height:2px; transform-origin:0 50%; background:linear-gradient(90deg,transparent,#ffd997,#fff); box-shadow:0 0 12px #ffd997; }
.ultimate-banner { display:flex; flex-direction:column; align-items:center; min-width:240px; padding:20px 45px; color:#f8d69e; background:linear-gradient(90deg,transparent,#091e2aee 20%,#091e2aee 80%,transparent); border-block:1px solid #d8b57480; }
.ultimate-banner small { letter-spacing:5px; font-size:11px; }.ultimate-banner strong { font:700 64px/1.2 Georgia,serif; text-shadow:0 0 25px #dba66160; }.ultimate-banner span { font-size:13px; letter-spacing:4px; }
@keyframes fx-ring { from { opacity:.9; scale:.4; } to { opacity:0; scale:1.4; } }
@keyframes fx-particle { from { opacity:0; transform:rotate(var(--angle)) translateY(0) scale(.2); } 20% { opacity:1; } to { opacity:0; transform:rotate(var(--angle)) translateY(calc(-1 * var(--travel))) scale(.5); } }
@keyframes fx-shatter { from { opacity:1; scale:.9; } to { opacity:0; scale:1.55; rotate:18deg; } }
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after { animation:none!important; transition:none!important; }
html[data-motion=reduced] .skill-card:hover,html[data-motion=reduced] .skill-card:active,
html[data-motion=reduced] .skill-card:hover .card-svg,html[data-motion=reduced] .skill-card:focus-visible .card-svg { transform:none; filter:none; }
@media(max-width:480px) { .card-art { height:120px; }.cast-label { font-size:11px; }.header-btns { flex-wrap:wrap; }.header-btns #btn-motion { font-size:10px; }.header-btns { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .skill-card:hover,.skill-card:active,.skill-card:hover .card-svg,.skill-card:focus-visible .card-svg { transform:none;filter:none; } }

.chain-indicator { margin-left:auto; padding:3px 9px; border:1px solid #dfb78055; border-radius:5px; font:11px/1.5 Consolas,'Microsoft YaHei',sans-serif; white-space:nowrap; color:var(--gold); background:#dfb78012; }
.header-link { align-self:center; font-size:12px; padding:8px; text-decoration:none; white-space:nowrap; }
.artbook-intro { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:24px; }.artbook-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px; }.artbook-grid .card-art { height:180px; }.artbook-grid .skill-card { width:100%; }.artbook-stage { display:flex; gap:16px; margin:20px 0; }.artbook-stage .player-card { flex:1; text-align:center; padding:14px; }.artbook-stage .p-name { margin-bottom:8px; }.artbook-stage svg.hand { height:80px; }.artbook-grid .skill-card .card-desc { display:none; }.artbook-grid .skill-card .card-name { font-size:14px; }.artbook-grid .card-tag { display:none; }
@media(max-width:820px) { .artbook-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.artbook-grid .card-art { height:140px; } }
@media(max-width:480px) { .artbook-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.artbook-grid .card-art { height:145px; }.artbook-intro { display:block; }.header-link { font-size:11px; padding:4px; }.chain-indicator { font-size:10px; padding:2px 5px; } }

.ban-summary { grid-column:1/-1; border:1px solid #c08f6866; border-radius:10px; padding:14px 16px; background:#dfb78009; }
.ban-summary-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
.ban-summary-head strong { color:var(--gold); font-size:13px; }.ban-summary-head span { color:var(--dim); font-size:11px; }
.ban-summary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.banned-detail { display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; align-items:start; }
.banned-art { height:58px; border-radius:7px; overflow:hidden; opacity:.8; }.banned-name { font-weight:700; font-size:13px; color:var(--txt); }.banned-name span { font:11px Consolas,monospace; color:var(--gold); padding-left:6px; }
.banned-detail p { font-size:11px; line-height:1.7; color:var(--dim); margin-top:3px; }
@media(max-width:560px) { .ban-summary-list { grid-template-columns:1fr; }.ban-summary { padding:12px; }.banned-detail { grid-template-columns:48px minmax(0,1fr); }.banned-art { height:48px; } }