/* 密室奇缘舞台(原型 games/sanxiao/style.css, 选择器限定在 .sx-stage 里; 和站点重名的 shell / top / panel / hint / bar 加了 sx- 前缀; 背景图走 --sx-chamber, 舞台上设) */
/* 站点里的舞台: 外框 .sx-frame 页面内 16:9 / 全屏时盖满窗口(account.js 加 html.game-full); 里面保留原型的最小高度, 矮屏在外框里上下滚动。
   载入 / 选关 / 通关演出是原型的 position:fixed 全屏层, 没改(默认就是全屏玩) */
.sx-frame{position:relative;width:min(100%,calc((100vh - 100px)*16/9));aspect-ratio:16/9;margin:0 auto;border-radius:18px;overflow-x:hidden;overflow-y:auto;background:#100b14}
html.game-full,html.game-full body{overflow:hidden}
html.game-full .sx-frame{position:fixed;inset:0;z-index:50;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0}
html.game-full .chat-fab{display:none}
/* 舞台要有确定的高度, 里面 .sx-shell 的 height:100% 才生效(只写 min-height 时它会缩回内容高度, 大屏下面空一截); 手机竖屏是整页上下滚, 高度跟内容走 */
.sx-stage{height:100%}@media(max-width:700px){.sx-stage{height:auto;min-height:100%}}.sx-stage .sx-shell{transform-origin:0 0} /* 矮窗口整体等比缩小(sanxiao.js 的 fitShell) */.sx-stage [data-full-toggle]{display:inline-flex;align-items:center}
.sx-stage{color-scheme:dark;font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;color:#fff0de;background:#100b14}.sx-stage *{box-sizing:border-box}.sx-stage button,.sx-stage a{font:inherit}.sx-stage button{cursor:pointer}.sx-stage a{color:#f2cba1;text-decoration:none}.sx-stage a:hover{color:white}
.sx-stage .sx-shell{position:relative;display:grid;grid-template-columns:30% 44% 26%;grid-template-rows:72px minmax(690px,1fr);width:100%;min-height:780px;height:100%;overflow:hidden;background:#120b13 var(--sx-chamber) center/cover no-repeat}.sx-stage #world{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.sx-stage .sx-shell::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0e081555 0%,transparent 23% 68%,#0d08158a 100%),linear-gradient(0deg,#09050e88,transparent 18% 85%,#0b071799);box-shadow:inset 0 0 80px #0006}
.sx-stage .sx-top{position:relative;grid-column:1/-1;grid-row:1;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:linear-gradient(#100b1bb8,transparent);text-shadow:0 2px 12px #000}.sx-stage .sx-top>div{text-align:center}.sx-stage .sx-top small,.sx-stage .boss-heading small,.sx-stage .board-heading span{font-size:10px;letter-spacing:.3em;color:#dda98e}.sx-stage .sx-top h2{margin:0;color:#ffe5b8;font-size:26px;letter-spacing:.13em}.sx-stage .sx-top button,.sx-stage .close{border:0;background:none;color:#f3d1b0;padding:9px 12px;text-shadow:0 2px 9px #000}.sx-stage .sx-top button:hover{color:white}
.sx-stage .boss-panel{grid-column:1;grid-row:2;position:relative;z-index:2;pointer-events:none}.sx-stage .boss-heading{position:absolute;z-index:3;bottom:145px;left:28px;text-shadow:0 2px 12px #000}.sx-stage .boss-heading h2{margin:5px 0;color:#ffe1bf;font-size:25px}.sx-stage .boss-heading em{font-style:normal;color:#f9e7d8;font-size:15px}.sx-stage .boss-heading strong{font-size:12px;color:#ffb980}.sx-stage .character-stage{position:absolute;inset:0;overflow:visible;filter:drop-shadow(0 22px 22px #0009) drop-shadow(0 0 25px #f46a4a33)}.sx-stage .character-stage canvas{width:100%;height:100%;object-fit:contain;transform:scale(1.66);transform-origin:51% 58%;pointer-events:none}.sx-stage .boss-hud{position:absolute;z-index:3;bottom:25px;left:28px;width:min(360px,calc(100% - 52px));text-shadow:0 2px 8px #000}.sx-stage .numbers{display:flex;align-items:center;justify-content:space-between;gap:8px}.sx-stage .numbers{font-size:14px;color:#ffe0d3}.sx-stage .sx-bar{height:12px;margin-top:10px;border-radius:10px;background:#160e1a;box-shadow:0 2px 8px #0009,inset 0 0 4px #000}.sx-stage .sx-bar span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ac273c,#ed644d,#ffba75);box-shadow:0 0 15px #ff5237;transition:width .3s}.sx-stage .boss-hud p{margin:9px 0 7px;color:#ffd795;font-size:13px;line-height:1.5}.sx-stage .gauge{height:4px;background:#403246;border-radius:5px;overflow:hidden}.sx-stage .gauge span{display:block;width:0;height:100%;background:#ffd269;box-shadow:0 0 9px #ffc267;transition:width .3s}.sx-stage .boss-panel.hit .character-stage{animation:hitflash .34s ease-out}.sx-stage .boss-panel.cast .character-stage{animation:castflash .5s ease-out}@keyframes hitflash{20%{filter:brightness(2) saturate(1.5);transform:translateX(7px)}50%{transform:translateX(-7px)}}@keyframes castflash{45%{filter:brightness(1.8) sepia(.5)}}
.sx-stage .arena{grid-column:2;grid-row:2;position:relative;z-index:2;pointer-events:none}.sx-stage .board-heading{position:absolute;top:23px;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 12px #000;white-space:nowrap}.sx-stage .board-heading span{display:block;color:#dfaa86}.sx-stage .board-heading strong{display:block;margin-top:4px;font-size:21px;color:#ffe7b8}.sx-stage .board-tip{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);font-size:12px;color:#e4c9b5;letter-spacing:.1em;text-shadow:0 2px 9px #000;white-space:nowrap}.sx-stage .loading{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:#150d19e8;color:#fbe0a1;font-size:18px}.sx-stage .loading[hidden],.sx-stage .finale[hidden]{display:none!important}.sx-stage #floating{position:absolute;z-index:5;top:43%;left:50%;transform:translateX(-50%);font-size:35px;font-weight:900;color:#ffe3a0;text-shadow:0 0 20px #ffba6a,0 3px 10px #000;white-space:nowrap}.sx-stage .pop{animation:float .8s ease-out both}@keyframes float{from{opacity:0;transform:translateY(24px) scale(.8)}25%{opacity:1}to{opacity:0;transform:translateY(-32px) scale(1.13)}}
.sx-stage .sx-panel{grid-column:3;grid-row:2;position:relative;z-index:3;overflow:auto;padding:90px 24px 25px 15px;background:linear-gradient(90deg,transparent,#100b1aba 26%,#100b1ad9);text-shadow:0 2px 8px #000}.sx-stage .sx-panel h2{margin:22px 0 7px;color:#ffdaa1;font-size:17px;letter-spacing:.08em}.sx-stage #restart:focus-visible,.sx-stage #again:focus-visible{outline:3px solid #ffda81;outline-offset:2px}.sx-stage #log{padding-left:18px;margin:8px 0 17px;color:#d5c6ca;font-size:12px;line-height:1.5}.sx-stage #log li{margin:6px 0}.sx-stage #restart,.sx-stage #again{border:0;border-bottom:1px solid #e8ab7e;padding:10px 5px;color:#ffdaa6;background:none;font-weight:800;text-shadow:0 0 12px #d56d5e}.sx-stage #restart:hover,.sx-stage #again:hover{color:white}
.sx-stage .finale{position:fixed;z-index:9;inset:0;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#190e20dc,#100a19dd 48%,#080712f2),var(--sx-chamber) center/cover no-repeat}.sx-stage .finale-stage{min-height:0;background:radial-gradient(ellipse at 48% 52%,#bb6b7544,transparent 65%)}.sx-stage .finale-stage canvas{width:100%;height:100%;object-fit:contain}.sx-stage .finale-copy{align-self:center;max-width:470px;padding:30px}.sx-stage .finale-copy small{color:#e6c794;letter-spacing:.2em}.sx-stage .finale-copy h2{font-size:clamp(30px,4vw,57px);line-height:1.16;color:#ffedc8}.sx-stage .finale-copy p{line-height:1.8;color:#c4d2df}.sx-stage .finale-copy button{margin-top:20px}.sx-stage .finale.ending{background:#000}.sx-stage .finale.ending .finale-stage{background:#000}.sx-stage .finale.ending.prologue{display:flex;align-items:center;justify-content:center;text-align:center}.sx-stage .finale.ending.prologue .finale-stage{display:none}.sx-stage .finale.ending.prologue .finale-copy{max-width:700px}.sx-stage .finale.ending.prologue .finale-copy p{font-size:clamp(18px,2vw,26px);color:#fff1db}.sx-stage dialog{max-width:540px;border:1px solid #a99968;border-radius:16px;padding:30px;background:#19243a;color:#f6e9d0;line-height:1.65}.sx-stage dialog::backdrop{background:#020711c9}.sx-stage dialog .close{float:right}.sx-stage dialog h2{margin-top:0}.sx-stage dialog p{font-size:14px;color:#d5e1e9}@keyframes appear{from{opacity:0}to{opacity:1}}
@media(max-width:1100px) and (min-width:701px){.sx-stage .sx-shell{grid-template-columns:30% 44% 26%}.sx-stage .character-stage canvas{transform:scale(1.425)}.sx-stage .sx-panel{padding-right:12px}}
@media(max-width:700px){.sx-stage .sx-shell{display:block;height:auto;min-height:1530px;overflow:hidden;background-size:auto 850px;background-position:34% top}.sx-stage #world{height:850px}.sx-stage .sx-top{height:62px;padding:0 12px}.sx-stage .sx-top h2{font-size:18px}.sx-stage .sx-top a,.sx-stage .sx-top button{font-size:11px}.sx-stage .boss-panel{position:absolute;top:62px;left:0;width:100%;height:295px}.sx-stage .boss-heading{top:6px;left:18px}.sx-stage .boss-heading h2{font-size:18px}.sx-stage .boss-heading strong{font-size:10px}.sx-stage .character-stage{top:12px;bottom:70px}.sx-stage .character-stage canvas{transform:scale(1.235);transform-origin:center 55%}.sx-stage .boss-hud{bottom:0;left:18px;width:calc(100% - 36px)}.sx-stage .boss-hud p{font-size:11px;margin:5px 0}.sx-stage .arena{position:absolute;top:340px;left:0;width:100%;height:470px}.sx-stage .board-heading{top:0}.sx-stage .board-heading strong{font-size:15px}.sx-stage .board-tip{bottom:5px;font-size:10px}.sx-stage .sx-panel{position:relative;z-index:3;margin-top:810px;padding:24px 22px 40px;min-height:650px;background:linear-gradient(#120c19dd,#120c19);overflow:visible}.sx-stage .sx-panel h2{margin-top:20px}.sx-stage .finale{grid-template-columns:1fr;grid-template-rows:58vh auto}.sx-stage .finale-copy{padding:5px 22px}.sx-stage .finale-copy h2{margin:6px 0;font-size:28px}}
.sx-stage .top-actions{display:flex;gap:8px;align-items:center}.sx-stage .top-actions button{white-space:nowrap}.sx-stage .level-select{position:fixed;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;overflow:auto;background:linear-gradient(#100a18d9,#100a18ee),var(--sx-chamber) center/cover no-repeat;color:#ffe4c5;text-align:center}.sx-stage .level-select[hidden]{display:none}.sx-stage .level-intro{padding:55px 20px 18px;text-shadow:0 3px 12px #000}.sx-stage .level-intro small{letter-spacing:.32em;color:#e8b586}.sx-stage .level-intro h2{margin:7px 0;font-size:clamp(35px,4vw,56px)}.sx-stage .level-intro p{margin:0;color:#d4c2c5}.sx-stage .level-track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;width:min(1320px,96vw);flex:1;min-height:440px;align-items:end}.sx-stage .level-track::before{content:"";position:absolute;left:5%;right:5%;bottom:91px;border-top:1px solid #d6a98188;box-shadow:0 0 12px #ffc684;pointer-events:none}.sx-stage .level-node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:min(64vh,600px);padding:5px 8px 44px;border:0;background:none;color:#ffe8ce;text-shadow:0 2px 10px #000;cursor:pointer}.sx-stage .level-node img{display:block;width:100%;height:72%;object-fit:contain;filter:drop-shadow(0 15px 18px #0009);transition:transform .25s,filter .25s}.sx-stage .level-node:hover:not(:disabled) img,.sx-stage .level-node.current img{transform:scale(1.08);filter:drop-shadow(0 0 18px #e8aa80bb) drop-shadow(0 20px 18px #0009)}.sx-stage .level-node small{color:#edbd94;letter-spacing:.2em}.sx-stage .level-node strong{font-size:22px;line-height:1.5}.sx-stage .level-node em{font-size:12px;font-style:normal;color:#f2d5b5}.sx-stage .level-node.locked{opacity:.47;cursor:not-allowed}.sx-stage .level-node.locked img{filter:grayscale(1) brightness(.7) drop-shadow(0 12px 12px #000)}.sx-stage .level-node:focus-visible,.sx-stage .level-close:focus-visible{outline:2px solid #ffdea0;outline-offset:-5px}.sx-stage .level-close{margin:12px 0 24px;padding:9px 16px;border:0;background:none;color:#f8cfaa}.sx-stage .finale-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.sx-stage #next-level,.sx-stage #choose-level{border:0;border-bottom:1px solid #e8ab7e;padding:10px 5px;color:#ffdaa6;background:none;font-weight:800;text-shadow:0 0 12px #d56d5e}.sx-stage #next-level:hover,.sx-stage #choose-level:hover{color:white}.sx-stage #next-level[hidden]{display:none}
@media(max-width:700px){.sx-stage .top-actions{gap:0}.sx-stage .top-actions button{padding:7px 4px}.sx-stage .level-intro{padding-top:28px}.sx-stage .level-track{display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;width:100vw;min-height:470px;flex:0 0 auto}.sx-stage .level-track::before{display:none}.sx-stage .level-node{min-width:54vw;height:450px;scroll-snap-align:center;padding-bottom:30px}.sx-stage .level-node img{height:75%}.sx-stage .level-node strong{font-size:18px}.sx-stage .level-close{margin-top:5px}.sx-stage .finale{overflow:auto}.sx-stage .finale-actions{gap:8px}}
.sx-stage .level-close{min-width:180px;margin:16px 0 28px;padding:12px 32px;border:1px solid #ffd4a7;background:linear-gradient(135deg,#a65b4a,#683047);color:#fff2dc;font-weight:800;letter-spacing:.12em;box-shadow:0 5px 20px #0009,0 0 18px #f0a47455;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}.sx-stage .level-close:hover{filter:brightness(1.22)}

/* Combat HUD */
.sx-stage .sx-panel{padding:82px 18px 20px 20px;background:linear-gradient(90deg,#100b1800,#0e0b19d9 18%,#100d1cf2),radial-gradient(circle at 80% 22%,#6d3e5833,transparent 45%);border-left:1px solid #f2c17a33;box-shadow:inset 12px 0 28px #0005}
.sx-stage .hud-heading{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;text-shadow:0 2px 10px #000}.sx-stage .hud-heading small{color:#d3a878;letter-spacing:.2em;font-size:9px}.sx-stage .hud-heading strong{font-family:Georgia,"Noto Serif SC",serif;font-size:21px;color:#ffebc5;letter-spacing:.08em}
.sx-stage .combat-feed{margin-top:16px;padding:1px 11px 8px;border:1px solid #b2876255;border-radius:6px;background:#0d0c18c9;box-shadow:inset 0 0 20px #0007}.sx-stage .combat-feed h2{margin:8px 0 5px;font-size:14px;color:#e7bb85}.sx-stage .combat-feed #log{max-height:92px;overflow:auto;margin:3px 0;padding-left:18px;color:#d9c7c0;font-size:11px}.sx-stage .sx-panel #restart{margin-top:10px}
.sx-stage .audio-menu{position:relative}.sx-stage .audio-menu summary{list-style:none;display:grid;place-items:center;min-width:36px;height:36px;padding:0 7px;border:1px solid #d1a47675;border-radius:6px;background:#231728bd;color:#ffe4b2;cursor:pointer}.sx-stage .audio-menu summary::-webkit-details-marker{display:none}.sx-stage .audio-menu[open] summary{background:#563448;color:white}.sx-stage .audio-options{position:absolute;top:42px;right:0;z-index:12;display:grid;gap:10px;width:242px;padding:14px;border:1px solid #d6a875;background:#17111eea;box-shadow:0 14px 30px #000b;text-align:left;text-shadow:none}.sx-stage .audio-options strong{color:#ffe1ac}.sx-stage .audio-options label{display:flex;align-items:center;gap:7px;font-size:12px;color:#eadccf}.sx-stage .audio-options input[type=range]{width:110px;accent-color:#efbd7e}.sx-stage .audio-options input[type=checkbox]{accent-color:#e4ab6b}.sx-stage .audio-options small{color:#bdb0aa;font-size:10px;line-height:1.4}.sx-stage .audio-options a{color:#f4c28f}
@media(max-width:1100px) and (min-width:701px){.sx-stage .sx-panel{padding:72px 9px 15px}}
@media(max-width:700px){.sx-stage .sx-panel{margin-top:810px;padding:26px 20px 35px;border-left:0;border-top:1px solid #d6a87599;background:linear-gradient(#191024ef,#100b18)}.sx-stage .hud-heading{margin-bottom:13px}.sx-stage .audio-menu summary{min-width:27px;height:29px;padding:0 4px;font-size:18px}.sx-stage .audio-options{right:-32px;width:min(242px,90vw)}}

/* Entrance and level selection */
.sx-stage .loading{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at center,#563249b0,#120b19ed 62%),var(--sx-chamber) center/cover no-repeat;text-align:center}
.sx-stage .loading-content{width:min(480px,100%);padding:38px 38px 45px;border:1px solid #eec48c77;background:linear-gradient(145deg,#2d1a30dd,#100b1bdf);box-shadow:0 24px 80px #000c,inset 0 0 45px #ebaf6140;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}
.sx-stage .loading-sigil{display:grid;place-items:center;width:90px;height:90px;margin:0 auto 20px;border:1px solid #f7d6a5;border-radius:50%;box-shadow:0 0 0 7px #dda8752a,0 0 35px #efaa74a8,inset 0 0 22px #f5b96c8c;color:#fff3cb;font-size:49px;animation:loading-pulse 2s ease-in-out infinite alternate}
.sx-stage .loading-content small{color:#d9aa83;letter-spacing:.35em}.sx-stage .loading-content h2{margin:8px 0 18px;color:#ffeed0;font-family:Georgia,"Noto Serif SC",serif;font-size:clamp(38px,7vw,56px);letter-spacing:.16em;text-shadow:0 0 20px #f4ba7d77}.sx-stage .loading-content p{min-height:24px;margin:0 0 26px;color:#f4d9b6;font-size:14px}.sx-stage #loading-progress{display:block;width:100%;height:9px;overflow:hidden;border:1px solid #b18467;border-radius:9px;background:#110a17;appearance:none}.sx-stage #loading-progress::-webkit-progress-bar{background:#110a17}.sx-stage #loading-progress::-webkit-progress-value{background:linear-gradient(90deg,#b36e67,#ffe0a1,#d68179);box-shadow:0 0 15px #ffcd8b}.sx-stage #loading-progress::-moz-progress-bar{background:linear-gradient(90deg,#b36e67,#ffe0a1,#d68179)}.sx-stage #loading-percent{display:block;margin-top:9px;color:#ffe0a1;font-size:15px;letter-spacing:.1em}.sx-stage .loading-content button{margin-top:22px;padding:9px 20px;border:1px solid #dfae83;background:#693e4a;color:#fff0d3}.sx-stage .loading-content button[hidden],.sx-stage .level-close[hidden]{display:none!important}
.sx-stage .level-track{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:1fr;width:min(1480px,98vw)}.sx-stage .level-node{min-width:0}.sx-stage .level-node strong{font-size:clamp(15px,1.45vw,21px)}.sx-stage .level-node em{font-size:clamp(10px,.82vw,12px)}
.sx-stage .panel-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}.sx-stage .panel-actions #restart,.sx-stage .panel-actions #select-level{display:grid;place-items:center;min-width:0;min-height:48px;margin:0;padding:8px 5px;border:1px solid #d8967b;border-radius:7px;background:linear-gradient(145deg,#7c384d,#442437);box-shadow:inset 0 1px #ffddba55,0 5px 14px #0009;color:#fff4e1;font-size:14px;font-weight:800;text-align:center;text-shadow:0 1px 5px #000;transition:transform .15s,filter .15s,box-shadow .15s}.sx-stage .panel-actions #select-level{border-color:#f4c77e;background:linear-gradient(145deg,#ac693d,#744035);box-shadow:inset 0 1px #ffe6ae99,0 0 14px #e5a65b66,0 5px 14px #0009}.sx-stage .panel-actions #restart:hover,.sx-stage .panel-actions #select-level:hover{transform:translateY(-2px);filter:brightness(1.2)}.sx-stage .panel-actions #restart:focus-visible,.sx-stage .panel-actions #select-level:focus-visible{outline:3px solid #ffe6aa;outline-offset:2px}
@keyframes loading-pulse{to{transform:scale(1.06);box-shadow:0 0 0 9px #dda87533,0 0 55px #efaa74,inset 0 0 30px #f5b96ca8}}
@media(max-width:700px){.sx-stage .level-track{display:grid;grid-template-columns:repeat(7,170px);grid-template-rows:1fr;align-items:end;overflow-x:auto}.sx-stage .level-node{width:100%;min-width:0}}
@media(prefers-reduced-motion:reduce){.sx-stage .loading-sigil{animation:none}}

.sx-stage .sx-panel .board-heading{top:16px;left:20px;right:18px;transform:none;text-align:left}.sx-stage .sx-panel .board-heading span{color:#e6ba91;letter-spacing:.12em}.sx-stage .sx-panel .board-heading strong{margin-top:3px;font-size:18px;line-height:1.2}
@media(max-width:1100px) and (min-width:701px){.sx-stage .sx-panel .board-heading{left:9px;right:9px}}
@media(max-width:700px){.sx-stage .sx-panel .board-heading{position:static;margin-bottom:14px;white-space:normal}.sx-stage .sx-panel .board-heading strong{font-size:18px}}
.sx-stage .finale.ending{display:block;overflow:hidden}.sx-stage .finale.ending .finale-stage{position:absolute;inset:0;width:100vw;height:100vh}.sx-stage .finale.ending .finale-stage canvas{display:block;width:100%;height:100%;object-fit:contain}.sx-stage .finale.ending:not(.prologue) .finale-copy{position:absolute;right:20px;bottom:18px;max-width:min(400px,90vw);padding:12px 18px;border-radius:12px;background:#0008;text-align:right}.sx-stage .finale.ending:not(.prologue) .finale-copy small,.sx-stage .finale.ending:not(.prologue) .finale-copy h2,.sx-stage .finale.ending:not(.prologue) .finale-copy p{display:none}.sx-stage .finale.ending:not(.prologue) .finale-actions{justify-content:flex-end}.sx-stage .finale.ending.prologue .finale-copy{position:relative;z-index:1}
/* H113 and H108 have more transparent space around the figure in their preview images. */
.sx-stage .level-node:nth-child(4) img,.sx-stage .level-node:nth-child(6) img{scale:1.28}
/* The board canvas must paint above the character, even where the character overflows its panel. */
.sx-stage #world{z-index:3}.sx-stage .arena{z-index:4}.sx-stage .boss-panel.h184 .character-stage canvas{transform:translateX(135px) scale(1.577)}
@media(max-width:1100px) and (min-width:701px){.sx-stage .boss-panel.h184 .character-stage canvas{transform:translateX(95px) scale(1.354)}}
@media(max-width:700px){.sx-stage .boss-panel.h184 .character-stage canvas{transform:translateX(62px) scale(1.173)}}.sx-stage #choose-level[hidden]{display:none}
.sx-stage #defeat{text-align:center;background:linear-gradient(145deg,#332037,#171322);box-shadow:0 20px 80px #000b}.sx-stage #defeat h2{color:#ffe6c2;font-size:clamp(20px,4vw,28px)}.sx-stage .defeat-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:24px}.sx-stage .defeat-actions button{padding:10px 20px;border:1px solid #c8966d;border-radius:6px;background:#5d3544;color:#fff0d8}.sx-stage .defeat-actions button:hover{background:#874d59}.sx-stage .defeat-actions button:focus-visible{outline:2px solid #ffda81;outline-offset:2px}
/* Compact stage and turn line above the player status. */
.sx-stage .sx-panel{padding-top:56px}.sx-stage .sx-panel .board-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;white-space:nowrap}.sx-stage .sx-panel .board-heading span{font-size:13px}.sx-stage .sx-panel .board-heading strong{margin-top:0;font-size:15px}
@media(max-width:1100px) and (min-width:701px){.sx-stage .sx-panel{padding-top:52px}.sx-stage .sx-panel .board-heading span{font-size:11px}.sx-stage .sx-panel .board-heading strong{font-size:12px}}
@media(max-width:700px){.sx-stage .sx-panel{padding-top:26px}.sx-stage .sx-panel .board-heading{margin-bottom:14px}.sx-stage .sx-panel .board-heading span{font-size:13px}.sx-stage .sx-panel .board-heading strong{font-size:15px}}
/* Victory cutscene: one black stage, then a soft reveal. */
.sx-stage .finale{display:block;background:#000}.sx-stage .finale .finale-stage,.sx-stage .finale.ending .finale-stage{position:absolute;inset:0;width:100vw;height:100vh;opacity:0;filter:brightness(0);background:#000;transition:opacity 1.2s ease,filter 1.6s ease}.sx-stage .finale .finale-stage canvas{display:block;width:100%;height:100%;object-fit:contain}.sx-stage .finale.reveal .finale-stage,.sx-stage .finale.ending.reveal .finale-stage{opacity:1;filter:brightness(1)}.sx-stage .finale .finale-copy{position:absolute;right:20px;bottom:18px;max-width:min(400px,90vw);padding:12px 18px;border-radius:12px;background:#0008;text-align:right;transition:opacity .6s ease}.sx-stage .finale.prologue,.sx-stage .finale.ending.prologue{display:flex;align-items:center;justify-content:center;text-align:center}.sx-stage .finale.prologue .finale-copy,.sx-stage .finale.ending.prologue .finale-copy{position:relative;right:auto;bottom:auto;z-index:1;width:100%;max-width:100%;padding:0 8px;background:none;text-align:center}.sx-stage .finale.prologue .finale-copy small,.sx-stage .finale.prologue .finale-copy h2,.sx-stage .finale.prologue .finale-actions{display:none}.sx-stage .finale.prologue #finale-text,.sx-stage .finale.ending.prologue #finale-text{margin:0;white-space:nowrap;font-size:clamp(9px,2.15vw,24px);line-height:1.4;color:#fff1db}.sx-stage .finale.intro-fade .finale-copy{opacity:0}.sx-stage .finale.reveal .finale-copy small,.sx-stage .finale.reveal .finale-copy h2,.sx-stage .finale.reveal .finale-copy p{display:none}.sx-stage .finale.reveal .finale-actions{justify-content:flex-end}
.sx-stage .finale #next-level:not([hidden]){padding:12px 16px;border:1px solid #f4c790;border-radius:8px;background:linear-gradient(135deg,#a7634e,#613449);box-shadow:0 7px 20px #0009,0 0 16px #d7906355;color:#fff4df;font-size:14px;font-weight:800;white-space:normal}.sx-stage .finale #next-level:hover{filter:brightness(1.18)}
/* ---- 右侧战斗面板: 金属描边 + 卡牌式技能 ---- */
.sx-stage .sx-panel{--metal:linear-gradient(135deg,#fbe3a6,#7d5124 26%,#f0cc84 50%,#5e3b1c 74%,#f6d590);background:radial-gradient(120% 45% at 100% 0,#4a1c3a55,transparent 60%),linear-gradient(90deg,#07050b00,#07050bf5 7%,#06040a);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000;color:#fff}
.sx-stage .sx-panel .board-heading strong{font-family:Georgia,"Noto Serif SC","Songti SC",serif;letter-spacing:.08em;background:linear-gradient(#fff6d8,#f0c779 60%,#b07a32);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 3px #000)}
.sx-stage .sx-panel .board-heading span{font-family:Georgia,"Noto Serif SC","Songti SC",serif;color:#e9c48e}
/* 通用金框: 金属渐变描边 + 内衬细线 */
.sx-stage :is(.sx-hero,.arcane-box,.skill-detail,.combat-feed){position:relative;border:1px solid transparent;border-radius:6px;background:linear-gradient(160deg,#1a1020,#09070e 60%) padding-box,var(--metal) border-box;box-shadow:0 0 0 1px #000,0 10px 24px #000a}
.sx-stage :is(.sx-hero,.arcane-box,.skill-detail,.combat-feed)::after{content:"";position:absolute;inset:3px;pointer-events:none;border:1px solid var(--line,#e9c27a30);border-radius:4px}
/* 头像 + 血条 */
.sx-stage .sx-hero{display:flex;gap:12px;align-items:center;padding:7px 12px 7px 9px}
.sx-stage .hero-avatar{position:relative;flex:none;width:52px;height:52px;padding:2px;border-radius:50%;background:conic-gradient(from 210deg,#fbe3a6,#7d5124,#f0cc84,#5e3b1c,#fbe3a6);box-shadow:0 0 0 2px #120c18,0 0 18px #e2b25e44,0 6px 14px #000c}
.sx-stage .hero-avatar svg{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 28%,#4d4669,#17131f 70%);fill:#06040a;box-shadow:inset 0 0 12px #000}
.sx-stage .hero-avatar::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#fff1c4,#a8702c)}
.sx-stage .hero-bars{flex:1;min-width:0}
/* 生命 / 护盾: 金环图标球压在槽左端, 名称和数值写在槽里, 三者同一条中线 */
.sx-stage .hero-row{--c:#ff3a4c;--track:#3a0f19;position:relative;display:flex;align-items:center;height:26px}
.sx-stage .hero-row.shield{--c:#3fa0ff;--track:#0f2142}
.sx-stage .hero-row+.hero-row{margin-top:5px}
.sx-stage .hero-row>i{position:relative;z-index:3;flex:none;display:grid;place-items:center;width:26px;height:26px;box-sizing:border-box;border:2px solid transparent;border-radius:50%;background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--c),#fff 45%),var(--c) 45%,color-mix(in srgb,var(--c),#000 65%) 85%) padding-box,conic-gradient(from 210deg,#fbe3a6,#7d5124,#f0cc84,#5e3b1c,#fbe3a6) border-box;box-shadow:0 0 0 1px #000,0 0 10px color-mix(in srgb,var(--c),transparent 40%);color:#fff;font-style:normal;font-size:12px;line-height:1;text-shadow:0 1px 2px #000}
.sx-stage .hero-row>span,.sx-stage .hero-row>b{position:absolute;top:50%;z-index:2;transform:translateY(-50%);font-size:11px;line-height:1;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.sx-stage .hero-row>span{left:34px;font-family:Georgia,"Noto Serif SC","Songti SC",serif;font-weight:700;letter-spacing:.1em}
.sx-stage .hero-row>b{right:9px;font-weight:700}
.sx-stage .hero-row .sx-bar{position:relative;flex:1;height:16px;margin:0 0 0 -9px;padding:0;border-radius:0 3px 3px 0;background:linear-gradient(#ffffff14,transparent 60%),var(--track);box-shadow:0 0 0 1px #000,0 0 0 2px #8a6232,0 0 0 3px #000,inset 0 2px 4px #000;overflow:hidden}
.sx-stage .hero-row .sx-bar::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--v,0%);background:#fff1c2;opacity:.6;transition:width .6s .35s ease-out}
.sx-stage .hero-row .sx-bar span{position:relative;display:block;width:var(--v,0%);height:100%;border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c),#000 45%),var(--c) 65%,color-mix(in srgb,var(--c),#fff 35%));box-shadow:0 0 10px var(--c);transition:width .25s ease-out}
.sx-stage .hero-row .sx-bar::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ffffff40,transparent 45%,#0006),repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#0008 calc(10% - 1px) 10%)}
.sx-stage #burn{display:inline-block;margin-top:7px;padding:1px 8px;border:1px solid #ff8a4d88;border-radius:10px;background:#3a160c99;color:#ffb27a;font-size:11px}
.sx-stage #burn:empty{display:none}
/* 技能卡: 牌框 + 圆形图腾 + 名字铭牌, 有星时呼吸发光并扫光 */
.sx-stage .skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px;perspective:700px}
.sx-stage .skill-card,.sx-stage .skill-detail{--skill:#efaa79}
.sx-stage :is(.skill-card,.skill-detail).attack{--skill:#ff5a3c}
.sx-stage :is(.skill-card,.skill-detail).heal{--skill:#2cf08a}
.sx-stage :is(.skill-card,.skill-detail).guard{--skill:#3aa2ff}
.sx-stage :is(.skill-card,.skill-detail).energy{--skill:#ffcc2e}
.sx-stage :is(.skill-card,.skill-detail).arcane{--skill:#b072ff}
.sx-stage .skill-card{--rx:0deg;--ry:0deg;display:block;min-width:0;padding:0;border:0;background:none;color:#fff6e9;cursor:pointer}
.sx-stage .skill-face{position:relative;display:flex;height:100%;box-sizing:border-box;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:9px 4px 6px;overflow:hidden;border:2px solid transparent;border-radius:8px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--skill),transparent 55%),#08060c 68%) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--skill),#fff 55%),color-mix(in srgb,var(--skill),#000 35%) 35%,var(--skill) 62%,color-mix(in srgb,var(--skill),#000 45%)) border-box;text-shadow:0 1px 2px #000;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out,filter .2s,box-shadow .25s;box-shadow:0 8px 16px #000b}
.sx-stage .skill-card:hover .skill-face{transform:translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));filter:brightness(1.12)}
.sx-stage .skill-card:active .skill-face{transform:scale(.95)}
.sx-stage .skill-card:not(.ready) .skill-icon{filter:brightness(.88)}
.sx-stage .skill-card{position:relative}
/* 选中: 金色锁定角框收拢扣住 + 内描边提亮 + 下方菱形指向详情 (都挂在不动的按钮上, 不影响悬停判定) */
.sx-stage .skill-card.shown::before{--c:#ffe3a0;content:"";position:absolute;inset:-5px;z-index:3;pointer-events:none;background:linear-gradient(var(--c),var(--c)) left top/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) left top/2px 12px no-repeat,linear-gradient(var(--c),var(--c)) right top/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) right top/2px 12px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/2px 12px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/2px 12px no-repeat;filter:drop-shadow(0 0 3px #ffc95c) drop-shadow(0 0 1px #000);animation:sx-lock-in .28s cubic-bezier(.2,.9,.3,1.3),sx-lock 1.8s ease-in-out .28s infinite}
.sx-stage .skill-card.shown::after{content:"";position:absolute;left:50%;bottom:-9px;z-index:3;width:10px;height:10px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#fff4cc,#d9a24a 60%,#8a5a1e);filter:drop-shadow(0 0 4px #ffc95c);pointer-events:none}
.sx-stage .skill-card.shown .skill-face{filter:brightness(1.12) saturate(1.1)}
.sx-stage .skill-card.shown .skill-face::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #fff8,inset 0 0 16px color-mix(in srgb,var(--skill),transparent 35%)}
@keyframes sx-lock-in{from{inset:-14px;opacity:0}}
@keyframes sx-lock{50%{inset:-7px}}
.sx-stage .skill-card:focus-visible{outline:3px solid #ffe6aa;outline-offset:2px}
.sx-stage .skill-face::after{content:"";position:absolute;inset:-40% -70%;pointer-events:none;background:linear-gradient(105deg,transparent 44%,#ffffff50 50%,transparent 56%);transform:translateX(-70%);opacity:0}
.sx-stage .skill-card.ready .skill-face::after{opacity:1;animation:sx-shine 3.4s ease-in-out infinite}
.sx-stage .skill-card.ready .skill-face{animation:sx-ready 1.8s ease-in-out infinite}
.sx-stage .skill-card.ready.cast .skill-face{animation:sx-cast .55s ease-out,sx-ready 1.8s ease-in-out .55s infinite}
.sx-stage .skill-card.cast:not(.ready) .skill-face{animation:sx-cast .55s ease-out}
@keyframes sx-ready{50%{box-shadow:0 8px 16px #000b,0 0 22px color-mix(in srgb,var(--skill),transparent 20%)}}
@keyframes sx-shine{0%,55%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}
@keyframes sx-cast{0%{transform:scale(1.1);filter:brightness(2.4)}100%{transform:none;filter:none}}
@keyframes sx-spin{to{transform:rotate(1turn)}}
.sx-stage .skill-no{position:absolute;top:3px;left:3px;z-index:2;display:grid;place-items:center;width:20px;height:20px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#fff1c4,#a8702c);color:#2a1608;font-size:10px;font-weight:900;text-shadow:none}
.sx-stage .skill-icon{--icon:var(--skill);position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--icon),#fff 25%);border-radius:50%;background:radial-gradient(circle at 40% 30%,color-mix(in srgb,var(--icon),#fff 30%),var(--icon) 32%,color-mix(in srgb,var(--icon),#000 70%) 78%);box-shadow:0 0 0 3px #000,0 0 16px color-mix(in srgb,var(--icon),transparent 45%),inset 0 0 12px #000a;font-size:20px;line-height:1;text-shadow:0 0 10px var(--icon)}
.sx-stage .skill-icon::before{content:"";position:absolute;inset:-5px;border:1px dashed color-mix(in srgb,var(--icon),transparent 30%);border-radius:50%;opacity:.5}
.sx-stage .skill-card.ready .skill-icon::before{opacity:1;animation:sx-spin 10s linear infinite}
.sx-stage .skill-icon.flame{--icon:#ff6a1a}
.sx-stage .skill-icon.frost{--icon:#3cc8ff;color:#fff}
.sx-stage .skill-icon.drain{--icon:#c4102a;border-color:#8a0c1f;background:radial-gradient(circle at 50% 45%,#000 0 38%,#3a0610 62%,#8a0c1f 100%);box-shadow:0 0 0 3px #000,0 0 18px #b3001bcc,inset 0 0 14px #ff1e3c66;text-shadow:0 0 10px #ff1e3c,0 0 3px #000}
.sx-stage .skill-card strong{align-self:stretch;margin:2px -4px 0;padding:2px;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--skill),transparent 45%);border-bottom:1px solid color-mix(in srgb,var(--skill),transparent 70%);color:#fff;background:linear-gradient(90deg,transparent,#000d 18%,#000d 82%,transparent);font-family:Georgia,"Noto Serif SC","Songti SC",serif;font-size:12px;letter-spacing:.06em;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.sx-stage .skill-energy{display:block;width:86%;height:5px;border-radius:1px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#0009 calc(25% - 1px) 25%),linear-gradient(#ffffff14,transparent),color-mix(in srgb,var(--skill),#120d1b 78%);box-shadow:0 0 0 1px #000,0 0 0 2px color-mix(in srgb,var(--skill),transparent 45%),inset 0 1px 2px #000a;overflow:hidden}
.sx-stage .skill-energy span{display:block;width:0;height:100%;background:linear-gradient(#ffffff60,transparent 60%),linear-gradient(90deg,color-mix(in srgb,var(--skill),#000 30%),var(--skill),#fff6d0);box-shadow:0 0 6px var(--skill);transition:width .35s ease-out}
.sx-stage .skill-stars{display:inline-flex;gap:2px;font-size:13px;line-height:1}
.sx-stage .skill-stars i{display:inline-block;font-style:normal;color:#1a1420;-webkit-text-stroke:1px #6d5c4c;text-shadow:none}
.sx-stage .skill-stars i.on{background:linear-gradient(#fff6c8,#ffc23a 55%,#c27a12);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.5px #8a5410;filter:drop-shadow(0 0 4px #ffbf3c)}
.sx-stage .skill-stars i.pop{animation:sx-pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes sx-pop{0%{transform:scale(.2) rotate(-70deg)}60%{transform:scale(1.8);filter:drop-shadow(0 0 12px #fff2a0)}100%{transform:none}}
/* 奥义框: 紫色金属框, 框头一条共用奥义槽 + 一组星 */
.sx-stage .arcane-box{--metal:linear-gradient(135deg,#efdcff,#5b3594 26%,#cfa8ff 50%,#3e2470 74%,#e6ccff);--line:#c9a2ff3a;margin-top:12px;padding:0 12px 11px;background:radial-gradient(70% 55% at 50% 0,#6a3aa855,transparent 72%) padding-box,radial-gradient(60% 50% at 50% 100%,#2a1250aa,transparent 75%) padding-box,linear-gradient(180deg,#170c28,#09060f) padding-box,var(--metal) border-box}
.sx-stage .arcane-box:has(.ready){animation:sx-arcane 2.4s ease-in-out infinite}
/* 框底一圈淡淡的魔法阵, 有奥义可放时慢慢转 */
.sx-stage .arcane-box::before{content:"";position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-80px 0 0 -85px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 55%,#c9a2ff40 55.5% 56.5%,transparent 57% 67%,#c9a2ff30 67.5% 68.5%,transparent 69%),repeating-conic-gradient(#c9a2ff26 0 1.5deg,transparent 1.5deg 10deg);-webkit-mask:radial-gradient(circle,transparent 54%,#000 55% 69%,transparent 70%);mask:radial-gradient(circle,transparent 54%,#000 55% 69%,transparent 70%)}
.sx-stage .arcane-box:has(.ready)::before{animation:sx-spin 40s linear infinite}
.sx-stage .arcane-head,.sx-stage .arcane-cards{position:relative;z-index:1}
.sx-stage .arcane-box.cast{animation:sx-cast .55s ease-out}
@keyframes sx-arcane{50%{box-shadow:0 0 0 1px #000,0 10px 24px #000a,0 0 24px #a874ffaa}}
/* 框头是一整块标题牌, 盖住框的上边当作顶梁: 左 徽记+奥义 | 中 嵌入式能量槽 | 右 星星 */
.sx-stage .arcane-head{--skill:#b072ff;display:flex;align-items:stretch;height:30px;box-sizing:border-box;margin:-1px -13px 10px;border:1px solid transparent;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#3b1f60,#1a0c2c 55%,#12081f) padding-box,var(--metal) border-box;box-shadow:0 5px 12px #000a,inset 0 1px #ffffff26}
/* "奥义"铭牌骑在上边线正中 */
.sx-stage .arcane-head b{flex:none;display:flex;align-items:center;gap:7px;padding:0 14px 0 11px;border-right:1px solid #000a;box-shadow:1px 0 #c9a2ff38;font-family:Georgia,"Noto Serif SC","Songti SC",serif;font-size:13px;font-weight:700;line-height:1;letter-spacing:.3em;white-space:nowrap;color:#f3e8ff;text-shadow:0 0 8px #a874ff}
.sx-stage .arcane-head b::before{content:"";width:12px;height:12px;flex:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:radial-gradient(circle at 40% 35%,#fff 0 12%,#d7b6ff 30%,#8a4fe0 65%,#3e1d78);filter:drop-shadow(0 0 4px #b072ff)}
.sx-stage .arcane-head .skill-energy{flex:1;align-self:center;width:auto;height:8px;margin:0 12px;border-radius:4px;background:linear-gradient(#000c,#1d1030);box-shadow:inset 0 1px 3px #000,0 1px 0 #ffffff1f,0 -1px 0 #0008}
.sx-stage .arcane-head .skill-stars{flex:none;align-items:center;padding:0 11px;border-left:1px solid #c9a2ff38;box-shadow:-1px 0 #000a;font-size:15px}
.sx-stage .arcane-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;perspective:700px}
.sx-stage .arcane-head .skill-energy span{border-radius:4px}
/* 技能详情 */
.sx-stage .skill-detail{display:flex;gap:12px;box-sizing:border-box;margin-top:10px;padding:11px 16px 12px 14px;overflow:hidden}
.sx-stage .skill-detail::before{content:"";position:absolute;left:-1px;top:14%;bottom:14%;width:3px;border-radius:2px;background:var(--skill);box-shadow:0 0 10px var(--skill)}
.sx-stage .skill-detail .skill-icon{width:44px;height:44px;border-radius:10px;font-size:22px}
.sx-stage .skill-detail .skill-icon::before{display:none}
.sx-stage .skill-detail>div{min-width:0;flex:1}
.sx-stage .skill-detail h3{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:7px;margin:0;font-family:Georgia,"Noto Serif SC","Songti SC",serif;font-size:15px;letter-spacing:.06em;color:#fff1da}
.sx-stage .skill-detail h3 em{padding:1px 9px;border:1px solid var(--skill);border-radius:10px;background:color-mix(in srgb,var(--skill),transparent 85%);color:var(--skill);font-family:system-ui,sans-serif;font-size:11px;font-style:normal;letter-spacing:0}
.sx-stage .skill-detail .skill-stars{font-size:12px}
.sx-stage .skill-detail p{display:-webkit-box;height:2.9em;margin:4px 0 6px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#f7efe6;font-size:12px;line-height:1.45}
.sx-stage .skill-detail dl{display:grid;gap:2px;margin:0;padding-top:5px;border-top:1px solid;border-image:linear-gradient(90deg,#e2b25e88,transparent) 1;font-size:11px}
.sx-stage .skill-detail dl div{display:flex;gap:10px;white-space:nowrap}
.sx-stage .skill-detail dd{overflow:hidden;text-overflow:ellipsis}
.sx-stage .skill-detail dt{color:#e0bd84}
.sx-stage .skill-detail dt::before{content:"◆ ";color:#a8702c;font-size:8px}
.sx-stage .skill-detail dd{margin:0;color:#fff}
/* 战斗记录 */
.sx-stage .sx-panel{display:flex;flex-direction:column}.sx-stage .sx-panel>*{flex:none}
.sx-stage .combat-feed{display:flex;flex-direction:column;flex:1 1 0;min-height:110px;margin-top:10px;padding:0 12px 8px}
.sx-stage .combat-feed h2{display:flex;align-items:center;gap:8px;height:28px;box-sizing:border-box;margin:-1px -13px 4px;padding:0 12px 0 8px;border:1px solid transparent;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#3a2614,#1a1009 55%,#100a06) padding-box,var(--metal) border-box;box-shadow:0 5px 12px #000a,inset 0 1px #ffffff22;font-family:Georgia,"Noto Serif SC","Songti SC",serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.24em;color:#ffe2a8;text-shadow:0 0 8px #e2a24a88}
.sx-stage .combat-feed h2 i{flex:none;display:grid;place-items:center;width:18px;height:18px;box-sizing:border-box;border:1px solid transparent;border-radius:50%;background:radial-gradient(circle at 40% 30%,#5a3a1a,#1a0f06) padding-box,conic-gradient(from 210deg,#fbe3a6,#7d5124,#f0cc84,#5e3b1c,#fbe3a6) border-box;font-style:normal;font-size:10px;letter-spacing:0;color:#ffe9b8}
.sx-stage .combat-feed h2::after{content:"";flex:1;height:1px;margin-left:4px;background:linear-gradient(90deg,#e2b25e99,transparent)}
.sx-stage .combat-feed #log{flex:1;min-height:0;max-height:none;margin:0 -4px;overflow:auto;list-style:none;padding:0;color:#ece2da;font-size:12px;scrollbar-width:thin;scrollbar-color:#8a6232 transparent}
.sx-stage .combat-feed #log li{--k:#a89a8e;position:relative;margin:0;padding:4px 6px 4px 20px;border-bottom:1px solid #ffffff0c;line-height:1.45}
.sx-stage .combat-feed #log li.hurt{--k:#ff4057}.sx-stage .combat-feed #log li.star{--k:#ffd04a}.sx-stage .combat-feed #log li.warn{--k:#ff9a3c}.sx-stage .combat-feed #log li.combo{--k:#5ad1ff}.sx-stage .combat-feed #log li.good{--k:#4cf0a0}
.sx-stage .combat-feed #log li.attack{--k:#ff5a3c}.sx-stage .combat-feed #log li.heal{--k:#2cf08a}.sx-stage .combat-feed #log li.guard{--k:#3aa2ff}.sx-stage .combat-feed #log li.energy{--k:#ffcc2e}.sx-stage .combat-feed #log li.arcane{--k:#b072ff}
.sx-stage .combat-feed #log li:nth-child(n+4){opacity:.8}.sx-stage .combat-feed #log li:nth-child(n+7){opacity:.6}
.sx-stage .combat-feed #log li::before{content:"";position:absolute;left:7px;top:calc(4px + .725em - 3.5px);width:7px;height:7px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--k);filter:drop-shadow(0 0 3px var(--k))}
.sx-stage .combat-feed #log li:first-child{color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--k),transparent 80%),transparent 75%);box-shadow:inset 2px 0 var(--k)}
.sx-stage .combat-feed #log li.new{animation:sx-log-in .35s ease-out}
@keyframes sx-log-in{from{opacity:0;transform:translateX(-10px)}}
.sx-stage #log b{color:#ffd36b;font-weight:700}
.sx-stage #log em{font-style:normal;font-weight:700}
.sx-stage #log em.attack{color:#ff8a6c}.sx-stage #log em.heal{color:#6ee6a8}.sx-stage #log em.guard{color:#7fc2ff}.sx-stage #log em.energy{color:#ffd45e}.sx-stage #log em.arcane{color:#c9a2ff}
/* 底部按钮: 金边铭牌 */
.sx-stage .panel-actions #restart,.sx-stage .panel-actions #select-level{position:relative;overflow:hidden;min-height:50px;border:1px solid transparent;border-radius:4px;background:linear-gradient(#80243a,#45111f) padding-box,var(--metal) border-box;font-family:Georgia,"Noto Serif SC","Songti SC",serif;font-size:15px;letter-spacing:.12em;box-shadow:0 0 0 1px #000,0 6px 14px #000b,inset 0 1px #ffd9b066,inset 0 -10px 16px #0006}
.sx-stage .panel-actions #select-level{background:linear-gradient(#946024,#4e300f) padding-box,var(--metal) border-box}
.sx-stage .panel-actions button::after{content:"";position:absolute;inset:0 -60%;background:linear-gradient(105deg,transparent 44%,#ffffff40 50%,transparent 56%);transform:translateX(-70%);transition:transform .6s}
.sx-stage .panel-actions button:hover::after{transform:translateX(70%)}
@media(max-width:1100px) and (min-width:701px){.sx-stage .sx-hero{gap:8px;padding:5px 8px}.sx-stage .hero-avatar{width:40px;height:40px}.sx-stage .skills,.sx-stage .arcane-cards{gap:8px}.sx-stage .skill-face{padding:9px 2px 5px}.sx-stage .skill-icon{width:32px;height:32px;font-size:16px}.sx-stage .skill-card strong{font-size:11px}.sx-stage .skill-stars{font-size:10px}.sx-stage .arcane-head .skill-stars{font-size:13px}.sx-stage .skill-detail{padding:10px 12px}.sx-stage .skill-detail .skill-icon{width:36px;height:36px;font-size:18px}}
@media(max-width:700px){.sx-stage .sx-panel{background:radial-gradient(120% 40% at 100% 0,#3d1f3c66,transparent 60%),linear-gradient(#191024ef,#0a0811)}}
@media(max-width:700px){.sx-stage .combat-feed{flex:none}.sx-stage .combat-feed #log{max-height:150px}}
@media(prefers-reduced-motion:reduce){.sx-stage #log li.new,.sx-stage .arcane-box::before,.sx-stage .skill-card.shown::before,.sx-stage .skill-face,.sx-stage .skill-face::after,.sx-stage .skill-icon::before,.sx-stage .arcane-box,.sx-stage .skill-stars i{animation:none!important}.sx-stage .skill-face{transform:none!important}}