:root { color-scheme:dark; font-family:"Microsoft YaHei",system-ui,sans-serif; --gold:#d2a566; --ink:#100d0d; --panel:#211817; --line:#745b46; --text:#eadbc8; --muted:#958677; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:0; background:radial-gradient(circle at 50% 15%,#352d2b,#0a0809 72%); color:var(--text); overflow:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle,#000,transparent 76%); }
main { position:relative; width:min(96vw,calc((100dvh - 66px)*1.6)); max-width:none; }
header { display:flex; align-items:baseline; justify-content:space-between; padding:6px 10px; border:1px solid #745b4638; border-bottom:0; background:#120f0ea8; }
.header-actions{display:flex;gap:6px;align-items:center}.header-actions button{width:auto;padding:7px 12px;border-radius:999px;font-size:12px;background:#1d1717cc;border-color:#79604b;color:#dac6ac}.header-actions #mobile-toggle.active{border-color:#65c7c4;background:#173538;color:#baf2ed;box-shadow:0 0 13px #53b8b544}
h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: 4px; color: #d9b07a; }
header p { margin: 0; color: #9f9588; font-size: 13px; }
canvas { display:block; width:100%; height:auto; max-height:calc(100dvh - 66px); aspect-ratio:8/5; background:#211b19; border:3px solid #6b5341; border-radius:0 0 6px 6px; box-shadow:0 20px 70px #000d,0 0 0 1px #b58b5b33; image-rendering:auto; touch-action:none; }
#touch-controls{display:none;position:fixed;z-index:40;inset:38px 0 0;pointer-events:none;user-select:none;-webkit-user-select:none}.mobile-mode #touch-controls.visible{display:block}.touch-stick{position:absolute;width:112px;height:112px;border:2px solid #b8d9d266;border-radius:50%;background:radial-gradient(circle,#29424455 0 28%,#14232666 29% 62%,#89aaa51f 63%);box-shadow:inset 0 0 22px #5ec6c522,0 8px 24px #0008;pointer-events:auto;touch-action:none}.touch-stick>i{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border:2px solid #b8e8df99;border-radius:50%;background:#3f6b6bd9;box-shadow:0 4px 12px #0009,0 0 12px #64d2ce44}.touch-stick>span{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);color:#b9cfca;font-size:9px;white-space:nowrap;text-shadow:0 2px 5px #000}.touch-stick.active{border-color:#8ee7dfaa;background:radial-gradient(circle,#4b85856b,#18303377 64%)}#move-stick{left:max(16px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom))}#aim-stick{right:max(16px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom))}.touch-skills{position:absolute;right:max(136px,calc(env(safe-area-inset-right) + 136px));bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,46px);gap:7px;pointer-events:auto}.touch-skills button,.touch-map button,.touch-pause{padding:0;min-width:0;width:46px;height:46px;border:1px solid #7ab5b1;border-radius:50%;background:#173033d9;color:#d9f3ee;font-size:12px;box-shadow:0 5px 14px #0009;touch-action:none}.touch-skills .touch-roll{grid-column:1/4;width:100%;height:34px;border-radius:18px;color:#f2d8a7;border-color:#bc8d58;background:#3c2b20db}.touch-map{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom));display:none;gap:8px;pointer-events:auto}.touch-map button{width:64px;border-radius:22px}.touch-pause{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:38px;height:38px;pointer-events:auto}.mobile-mode #touch-controls.map-mode .combat-touch{display:none}.mobile-mode #touch-controls.map-mode .map-touch{display:flex}#rotate-hint{display:none}.mobile-mode #rotate-hint{position:fixed;z-index:80;inset:0;place-content:center;text-align:center;background:#090b0df5;color:#d9eee9}.mobile-mode #rotate-hint strong{display:block;font-size:24px;letter-spacing:4px}.mobile-mode #rotate-hint span{display:block;margin-top:10px;color:#83aaa5;font-size:12px}
#relic-tray{position:absolute;z-index:2;left:12px;top:108px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.relic-icon{position:relative;width:36px;height:36px;padding:0;display:grid;place-items:center;border:2px solid #b99158;border-radius:7px;background:radial-gradient(circle,#4f3928,#171110);color:#f0c477;font-size:20px;box-shadow:0 4px 12px #0009;pointer-events:auto}
.relic-icon:hover{transform:translateX(3px)}
.relic-icon::after{content:attr(data-tooltip);position:absolute;left:44px;top:0;width:205px;padding:9px 11px;border:1px solid #98754f;border-radius:5px;background:#120e0ef2;color:#d7c6b1;font-size:11px;line-height:1.5;text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateX(-5px);transition:.15s;pointer-events:none}
.relic-icon:hover::after,.relic-icon:focus-visible::after{opacity:1;visibility:visible;transform:none}
#overlay { position:absolute; inset:40px 4px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 20px; text-align:center; overflow:clip; background:radial-gradient(circle at 50% 35%,#35241fd9,#090706f5 70%); backdrop-filter:blur(3px); z-index:8; }
#overlay::before { content:""; position:absolute; inset:0; transform:scale(2); background:repeating-conic-gradient(from 15deg,#b9894420 0 1deg,transparent 1deg 18deg); animation:lobby-turn 38s linear infinite; pointer-events:none; }
#overlay::after{content:"";position:absolute;inset:14px;pointer-events:none;border:1px solid #a77a4624;background:linear-gradient(135deg,#b78b4f24 0 2px,transparent 2px) 0 0/24px 24px,linear-gradient(315deg,#b78b4f18 0 2px,transparent 2px) 100% 100%/24px 24px}
#overlay.hidden { display: none; }
#modifier-overlay,#creator-overlay { position:absolute; inset:40px 4px 4px; z-index:8; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:28px; background:radial-gradient(circle at 50% 25%,#282536,#090708 72%); }
#modifier-overlay.hidden { display:none; }
#creator-overlay.hidden{display:none}
.contract-title { text-align:center; }
.contract-title span { color:#786ca1; font-size:10px; letter-spacing:8px; }
.contract-title h2 { margin:4px 0; color:#ded4f0; font-size:29px; letter-spacing:5px; }
.contract-title p { margin:0 0 18px; color:#91899e; font-size:13px; }
.modifier-groups { display:grid; grid-template-columns:1fr 1fr; gap:24px; width:min(850px,100%); }
.modifier-groups h3 { margin:0 0 8px; color:#d7c8b8; font-size:15px; text-align:left; }
.modifier-groups h3 small { color:#8c8198; font-weight:400; }
.modifier-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.modifier-list button { --sigil:#9a78b7;min-height:72px;padding:8px 10px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto auto;column-gap:9px;align-items:center;text-align:left;border-color:#4e4659;background:radial-gradient(circle at 14% 50%,color-mix(in srgb,var(--sigil) 24%,transparent),transparent 34%),#19161ecc;overflow:hidden }
.modifier-list button i{grid-row:1/4;width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--sigil) 80%,#fff);border-radius:50%;background:radial-gradient(circle,var(--sigil),#17121c 68%);color:#fff4dc;font:normal 22px Georgia,serif;box-shadow:0 0 16px color-mix(in srgb,var(--sigil) 45%,transparent),inset 0 0 8px #fff2;text-shadow:0 0 7px #fff8}
.modifier-list button strong { color:#dfd4ec; }
.modifier-list button span { color:#b3a5c0; font-size:12px; }
.modifier-list button em { color:#837990; font-size:10px; font-style:normal; }
.modifier-list button.selected { border-color:#b094d0; background:#3c3049; box-shadow:inset 0 0 20px #a77fd322; }
.modifier-groups>div:first-child .modifier-list button{--sigil:#b5764d}.modifier-groups>div:last-child .modifier-list button{--sigil:#5b6f96}
#contract-pressure { margin:16px 0 10px; color:#d2bce5; font-weight:700; letter-spacing:2px; }
.contract-actions { display:flex; gap:12px; }
.lobby-title,.meta-progress,.roster-heading,.character-cards,.skill-loadout,.weapon-row,.loadout-advice,.launch-row { position:relative; z-index:1; width:min(910px,100%); }
.lobby-title{display:grid;place-items:center;padding:5px 90px 6px;text-align:center;border-top:1px solid #a97b465c;border-bottom:1px solid #6e513938;background:linear-gradient(90deg,#241713d9,#15100ee8 50%,#241713d9)}
.lobby-title::before,.lobby-title::after{content:"";position:absolute;top:50%;width:22%;height:34px;transform:translateY(-50%);opacity:.55;background:linear-gradient(90deg,transparent,#a578454c),repeating-linear-gradient(135deg,transparent 0 8px,#ad7b4330 8px 9px)}
.lobby-title::before{left:18px}.lobby-title::after{right:18px;transform:translateY(-50%) scaleX(-1)}
.lobby-title-copy{position:relative;z-index:1}
.lobby-title span { color:#8f6c46; font-size:10px; letter-spacing:8px; }
.lobby-title h2 { margin:2px 0 0; font-size:25px; letter-spacing:5px; color:#ebcfaa; }
.lobby-title p { margin:0; color:#9f9081; font-size:11px; }
.meta-progress{height:27px;display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;padding:0 9px;border-bottom:1px solid #6d513b55;background:#100c0bd9;color:#b89d7e;font-size:9px;text-align:left}.meta-progress strong{color:#e0bd82;letter-spacing:1px}.meta-progress>div{height:7px;background:#28201c;border:1px solid #59483b}.meta-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b5d36,#e1af63);box-shadow:0 0 9px #d6984b88;transition:width .3s}.meta-progress small{color:#827468;white-space:nowrap}
.roster-heading{display:flex;justify-content:space-between;align-items:center;padding:5px 3px 4px;color:#caa06c;font-size:11px;letter-spacing:2px;text-align:left}
.roster-heading b,.difficulty-block>span b{display:inline-grid;place-items:center;width:22px;height:18px;margin-right:5px;border:1px solid #a97d4d66;color:#e1bd86;font:10px Georgia,serif}
.roster-heading small{color:#7f7165;font-size:9px;letter-spacing:1px}
.character-cards { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.character-card { position:relative;min-width:0;height:210px;padding:0;display:block;overflow:hidden;border:2px solid #56453b;background:radial-gradient(circle at 50% 30%,#4a382d,#171110 72%);color:#cfbfad;text-align:left;isolation:isolate }
.character-card::before{content:"属性";position:absolute;z-index:5;right:7px;top:7px;padding:3px 6px;border:1px solid #b68a5766;background:#110d0dcc;color:#d9b47f;font-size:8px;letter-spacing:1px;transition:opacity .18s ease}
.character-card::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,#130e0eea 48%,#0b0808);z-index:1}
.character-card img{position:absolute;z-index:0;left:2%;top:0;width:96%;height:174px;object-fit:contain;object-position:center top;filter:drop-shadow(0 10px 12px #000a);transition:transform .24s ease,filter .24s ease}.character-card[data-character="chrono"] img,.character-card[data-character="storm"] img{left:0;width:100%;object-fit:cover}
.character-copy{position:absolute;z-index:2;left:8px;right:8px;bottom:7px;display:grid;gap:1px;transition:opacity .18s ease,transform .22s ease}
.character-card strong { font-size:16px;letter-spacing:2px;color:#f0d5ad;text-shadow:0 2px 7px #000 }
.character-card small { color:#d5a96f;font-size:8px;letter-spacing:.5px }
.character-card em { margin-top:2px;font-style:normal;font-size:7px;color:#a99a8b;line-height:1.25 }
.character-card:hover,.character-card.selected { border-color:#d1a369; background:linear-gradient(155deg,#503828,#211713); transform:translateY(-3px); box-shadow:0 8px 25px #0008,inset 0 0 22px #c0843520; }
.character-card:hover img,.character-card.selected img{transform:scale(1.045) translateY(-2px);filter:drop-shadow(0 10px 14px #000c) saturate(1.12)}
.character-info{position:absolute;z-index:4;inset:28px 5px 5px;padding:7px;display:flex;flex-direction:column;gap:5px;justify-content:flex-end;pointer-events:none;opacity:0;transform:translateY(10px);background:linear-gradient(180deg,#16100f1a 0%,#15100ff2 28%,#090707fa 100%);border:1px solid #b985504d;box-shadow:inset 0 0 24px #d19b4b12;transition:opacity .18s ease,transform .22s ease}
.character-info>b{color:#f0d5ad;font-size:10px;letter-spacing:.5px}
.character-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.character-stats i{display:flex;align-items:center;justify-content:space-between;padding:3px 4px;background:#241b18dc;border-left:2px solid #a7784d;color:#948578;font-size:7px;font-style:normal}
.character-stats strong{font-size:8px;letter-spacing:0;color:#ead0a8;text-shadow:none}
.character-trait{color:#c3b4a2;font-size:7px;line-height:1.35}
.character-recommend{padding-top:4px;border-top:1px solid #80644866;color:#d8c3a4;font-size:7px;line-height:1.3}
.character-recommend i{margin-right:4px;padding:2px 5px;background:#79522f;color:#ffe1ad;font-style:normal}
.character-card:hover .character-copy,.character-card:focus .character-copy,.character-card.show-info .character-copy{opacity:0;transform:translateY(8px)}
.character-card:hover .character-info,.character-card:focus .character-info,.character-card.show-info .character-info{opacity:1;visibility:visible;transform:none}
.character-card:hover img,.character-card:focus img,.character-card.show-info img{filter:drop-shadow(0 10px 14px #000c) saturate(.72) brightness(.42);transform:scale(1.07) translateY(-2px)}
.character-card:hover::before,.character-card:focus::before,.character-card.show-info::before{opacity:0}
.character-card.selected::before{content:"已选";opacity:1;border-color:#d7aa6e;background:#6a472bd9;color:#ffe0ae}
.character-card.selected:hover::before,.character-card.selected:focus::before,.character-card.selected.show-info::before{opacity:0}
.character-card.locked,.weapon-row button.locked{filter:grayscale(.85) brightness(.5);cursor:not-allowed}.character-card.locked::before{content:"未解锁";opacity:1;color:#b7a99b;border-color:#76685d}.character-card.locked:hover{transform:none;border-color:#56453b;box-shadow:none}.character-card.locked:hover .character-info{opacity:0}.character-card.locked:hover .character-copy{opacity:1;transform:none}
.skill-loadout{margin-top:7px;border:1px solid #604a3a;background:#110d0de8;text-align:left}.skill-loadout-title{height:26px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #5d493a;color:#c6a77e;font-size:10px;letter-spacing:1px}.skill-loadout-title b{margin-right:6px;color:#f0c37d}.skill-loadout-title i{margin-right:3px;color:#f1d1a4;font-style:normal}.skill-loadout-title small{color:#817368;font-size:8px}.skill-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px}.skill-card{position:relative;min-width:0;padding:6px 7px 5px 38px;border:1px solid #493d36;background:linear-gradient(135deg,#251b18,#151111);overflow:hidden}.skill-card>i{position:absolute;left:6px;top:7px;width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--skill-color,#b58a58);border-radius:50%;background:#171111;color:var(--skill-color,#e5b977);font:bold 12px Georgia,serif;box-shadow:0 0 11px color-mix(in srgb,var(--skill-color,#b58a58) 35%,transparent)}.skill-card strong{display:block;color:#ead1ae;font-size:10px}.skill-card>small{display:block;height:22px;margin:2px 0 4px;color:#8f8277;font-size:7px;line-height:1.35}.skill-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.skill-branches button{min-width:0;padding:3px 2px;border-color:#4d4139;background:#1c1715;color:#8d8176;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skill-branches button.selected{border-color:var(--skill-color,#b58a58);background:color-mix(in srgb,var(--skill-color,#b58a58) 20%,#171111);color:#f0ddc1}.skill-branches button:hover::after,.skill-branches button:focus-visible::after{content:attr(data-desc);position:fixed;z-index:30;left:50%;bottom:14px;width:min(520px,80vw);padding:9px 12px;transform:translateX(-50%);border:1px solid #ad8255;background:#100c0cf2;color:#e0ccb2;font-size:10px;white-space:normal;box-shadow:0 8px 25px #000}
.creator-window{width:min(760px,94%);border:1px solid #6ca7a8;background:linear-gradient(145deg,#132426f5,#0b1012f7);box-shadow:0 24px 80px #000,inset 0 0 50px #2d8b8d16}.creator-title{padding:20px 24px 15px;border-bottom:1px solid #477779;text-align:left}.creator-title span{color:#6bd3d1;font:10px Consolas,monospace;letter-spacing:3px}.creator-title h2{margin:4px 0;color:#d8f4ef;letter-spacing:5px}.creator-title p{margin:0;color:#719392;font-size:10px}.creator-tools{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:10px;padding:16px}.creator-tools>div{min-height:150px;padding:12px;border:1px solid #31595b;background:#101b1de8}.creator-tools h3{margin:0 0 12px;color:#9ed4cf;font-size:12px;letter-spacing:2px}.creator-tools button,.creator-tools select{width:100%;margin:4px 0;padding:8px;border-color:#477a7c;background:#17292b;color:#cce9e5}.creator-tools label{display:flex;align-items:center;gap:8px;margin:12px 0;color:#a8c7c4;font-size:11px}.creator-tools input{accent-color:#69c8c6}.creator-actions{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #31595b;color:#6fa6a4;font:10px Consolas,monospace}.creator-actions button{width:auto;padding:7px 18px;border-color:#477a7c;background:#17292b;color:#cce9e5}
.weapon-row { display:grid;grid-template-columns:96px repeat(4,1fr);gap:7px;align-items:stretch;margin-top:8px; }
.weapon-row>span { grid-row:span 2;padding:5px 7px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #5b4839;background:#15100ecc;color:#b59067;font-size:10px;letter-spacing:1px; }
.weapon-row>span b{width:22px;height:22px;display:grid;place-items:center;border:1px solid #9b7047;color:#e1b57e;font:10px Georgia,serif}
.weapon-row button { position:relative;padding:7px 8px;display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;text-align:left;border-color:#4e443d;background:#171312d9;overflow:hidden }
.weapon-row b { grid-row:1/3;align-self:center;color:#9b795d;font-size:20px; }
.weapon-row strong { color:#d8c5ad;font-size:12px; }
.weapon-row small { color:#80746b;font-size:9px; }
.weapon-row button.selected { border-color:#d1a369;background:#3f2c21;box-shadow:inset 0 0 15px #c0843520; }
.weapon-row button.recommended{border-color:#75603f;background:linear-gradient(110deg,#251a14,#171312d9)}
.weapon-row button.recommended::after{content:"推荐";position:absolute;right:-19px;top:5px;width:62px;padding:2px 0;transform:rotate(38deg);text-align:center;background:#8a6032;color:#ffe0ae;font-size:7px;letter-spacing:1px;box-shadow:0 2px 8px #0008}
.weapon-row button.selected.recommended{border-color:#e0ad69;box-shadow:inset 0 0 18px #d19a4430,0 0 0 1px #e2ba7a22}
.loadout-advice{margin-top:6px;padding:6px 9px;display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;text-align:left;border:1px solid #634a373d;background:linear-gradient(90deg,#251813dc,#15100ed9 62%,#291b14d4)}
.loadout-advice>span{display:grid;gap:1px;padding-right:10px;border-right:1px solid #8060444a}
.loadout-advice>span b{color:#d7ad77;font-size:10px;letter-spacing:2px}.loadout-advice>span em{color:#8c7b6c;font-size:8px;font-style:normal}
.loadout-advice p{margin:0;color:#b5a494;font-size:9px;line-height:1.35}
.loadout-advice>strong{min-width:96px;padding:5px 8px;text-align:center;border:1px solid #6d8c6555;background:#24352099;color:#a8d093;font-size:9px;white-space:nowrap}
.loadout-advice>strong.mixed{border-color:#a37b4e55;background:#3a281a99;color:#dab17b}
.launch-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin-top:8px;padding:7px 9px;border:1px solid #5b473833;background:linear-gradient(90deg,#171210d4,#231711c9)}
.difficulty-block{text-align:left}
.difficulty-block>span{color:#a98c6b;font-size:10px;letter-spacing:1px}
.difficulty-row { display:flex; gap:7px; margin:5px 0 0; }
.difficulty-row button { position:relative;min-width:126px;padding:7px 14px; display:grid; gap:2px; overflow:hidden;border-color:#4b4038; background:#171312cc; }
.difficulty-row button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#876c52;opacity:.45;transition:height .18s,opacity .18s}
.difficulty-row button small { color:#80746b; font-size:10px; }
.difficulty-row button.selected { border-color:#9f7952; background:#3d2c22; color:#f1d2a7; }
.difficulty-row button.selected::after{height:4px;opacity:1}.difficulty-row button[data-difficulty="explore"].selected{border-color:#5f9070;background:#24392d;color:#b8dfc3}.difficulty-row button[data-difficulty="explore"]::after{background:#71b185}.difficulty-row button[data-difficulty="nightmare"].selected{border-color:#a45b52;background:#442521;color:#efaaa1}.difficulty-row button[data-difficulty="nightmare"]::after{background:#c85e52}
#start { position:relative;overflow:hidden;min-width:274px;min-height:54px;padding:9px 38px; display:grid; gap:1px; border-color:#d2a566; background:linear-gradient(#65432a,#392419); box-shadow:0 7px 24px #0008,inset 0 0 22px #e2b56a10; }
#start::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 28%,#fff2 48%,transparent 68%);transform:translateX(-120%);transition:transform .5s ease}#start:hover::after,#start:focus-visible::after{transform:translateX(120%)}
#start span { font-size:17px; letter-spacing:4px; }
#start small { color:#c3a885; font-weight:400; }
@keyframes lobby-turn { from{transform:scale(2) rotate(0)}to { transform:scale(2) rotate(360deg); } }
#buff-overlay,#shop-overlay,#event-overlay,#pause-overlay { position:absolute; inset:40px 4px 4px; display:grid; place-content:center; padding:32px; text-align:center; background:radial-gradient(circle at 50% 45%,#2b211fef,#080606f5 72%); backdrop-filter:blur(5px); z-index:3; }
#buff-overlay.hidden,#shop-overlay.hidden,#event-overlay.hidden,#pause-overlay.hidden { display:none; }
#buff-options,#shop-options { display:flex; gap:18px; margin-bottom:18px; }
.buff-card { width:220px; min-height:168px; padding:20px 14px; border:1px solid #9b7954; border-radius:5px; background:linear-gradient(155deg,#49372a,#211715); color:#f3dcc0; cursor:pointer; box-shadow:0 12px 25px #0007,inset 0 1px #fff1; transition:.18s ease; }
.buff-card:hover { border-color:#e0b671; transform:translateY(-5px); }
.buff-card strong { display:block; color:#f0c982; font-size:20px; margin-bottom:12px; }
.buff-card span { color:#c7b7a5; line-height:1.6; }
.talent-level { display:block; margin:-5px 0 8px; color:#b99bdd; font-style:normal; font-size:12px; }
.buff-card span b { color:#e5b768; }
.buff-card:disabled { filter:grayscale(1); opacity:.45; cursor:not-allowed; transform:none; }
#refresh-buffs,#leave-shop { justify-self:center; }
#event-actions { display:flex; justify-content:center; gap:14px; margin-top:18px; }
#event-text { max-width:620px; margin:0 auto; color:#c7b7a5; font-size:17px; line-height:1.7; }
#buff-overlay>h2,#shop-overlay>h2,#event-overlay>h2,#pause-overlay>h2 { margin:0 0 18px; color:#edd1aa; font-size:28px; letter-spacing:4px; text-shadow:0 3px 12px #000; }
#shop-money { justify-self:center; margin:-10px 0 18px; padding:7px 18px; border:1px solid #9c784c66; border-radius:20px; background:#19120fd9; color:#e5bb67; }
#pause-overlay p { color:#9f9080; letter-spacing:2px; }
#transition-overlay { position:absolute; inset:40px 4px 4px; z-index:9; display:grid; place-content:center; background:#090706; opacity:0; visibility:hidden; transition:opacity .26s ease,visibility 0s linear .26s; pointer-events:none; }
#transition-overlay.active { opacity:1; visibility:visible; transition:opacity .26s ease; }
#act-transition{position:absolute;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:#080606;color:#eadaca;transition:opacity .3s}
#act-transition.hidden{display:none}
#act-transition::before,#act-transition::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#080606 8%,var(--act-dark,#291d1c) 52%,#080606 92%);transform:translateX(-102%);animation:actCurtain 1.9s cubic-bezier(.77,0,.18,1) both}
#act-transition::after{opacity:.32;background:repeating-linear-gradient(90deg,transparent 0 76px,var(--act-accent,#9c7152) 78px 80px);animation-name:actGrain}
#act-transition>div{position:relative;z-index:2;text-align:center;min-width:420px;padding:44px 70px;border-block:1px solid color-mix(in srgb,var(--act-accent,#9c7152) 55%,transparent);animation:actText 1.9s ease both}
#act-transition span{font:700 12px/1.2 Georgia,serif;letter-spacing:.42em;color:var(--act-accent,#d1a36c)}
#act-transition h2{margin:12px 0 8px;font:700 38px/1.1 Georgia,"Microsoft YaHei",serif;letter-spacing:.12em;text-shadow:0 4px 22px #000}
#act-transition p{margin:0;color:#aa9990;letter-spacing:.13em}
#act-transition i{display:block;width:90px;height:2px;margin:24px auto 0;background:var(--act-accent,#d1a36c);box-shadow:0 0 18px var(--act-accent,#d1a36c)}
@keyframes actCurtain{0%{transform:translateX(-102%)}20%,78%{transform:none}100%{transform:translateX(102%)}}
@keyframes actGrain{0%{transform:translateX(102%)}20%,78%{transform:none}100%{transform:translateX(-102%)}}
@keyframes actText{0%,18%,86%,100%{opacity:0;transform:scale(.94);filter:blur(8px)}35%,75%{opacity:1;transform:none;filter:none}}
#transition-text { color:#d9b07a; letter-spacing:5px; }
#message { font-size: 34px; text-shadow: 0 3px #000; }
button { border:1px solid #b28d5c; border-radius:4px; background:linear-gradient(#493326,#2c1e18); color:#f3dcc0; padding:12px 28px; font:inherit; font-weight:700; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
button:hover { border-color:#e0b575; background:linear-gradient(#60422e,#39251b); transform:translateY(-2px); box-shadow:0 7px 18px #0006; }
button:focus-visible { outline:2px solid #efc982; outline-offset:3px; }
body.mobile-mode{padding:0;background:#070809;overscroll-behavior:none}.mobile-mode main{width:min(100vw,calc((100dvh - 40px)*1.6));max-width:none}.mobile-mode header{height:40px;min-height:40px;padding:4px 7px;align-items:center}.mobile-mode h1{margin:0;font-size:17px;letter-spacing:2px}.mobile-mode header p{display:none}.mobile-mode .header-actions button{padding:5px 8px;font-size:9px}.mobile-mode canvas{max-height:calc(100dvh - 40px);border-width:2px}.mobile-mode #overlay,.mobile-mode #modifier-overlay,.mobile-mode #creator-overlay,.mobile-mode #buff-overlay,.mobile-mode #shop-overlay,.mobile-mode #event-overlay,.mobile-mode #pause-overlay{inset:40px 2px 2px}.mobile-mode #overlay,.mobile-mode #modifier-overlay,.mobile-mode #creator-overlay{justify-content:flex-start;overflow:auto}.mobile-mode .touch-skills button:active,.mobile-mode .touch-map button:active,.mobile-mode .touch-pause:active{transform:scale(.92);background:#386263}.mobile-mode #relic-tray{top:54px;left:6px;transform:scale(.78);transform-origin:top left}

@media (max-width:760px),(max-height:690px){
  #act-transition>div{min-width:0;width:80%;padding:36px 20px}#act-transition h2{font-size:28px}
  body { overflow:hidden; padding:max(2px,env(safe-area-inset-top)) max(2px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left)); }
  main { width:min(100%,calc((100dvh - 46px)*1.6)); }
  header p { display:none; }
  #overlay,#modifier-overlay,#creator-overlay { inset:38px 2px 2px; justify-content:flex-start; padding:16px; }
  #overlay{overflow-x:hidden;overflow-y:auto}#modifier-overlay,#creator-overlay{overflow:auto}
  .lobby-title{padding:7px 60px}.lobby-title h2 { font-size:24px; }.roster-heading small{display:none}
  .character-cards { grid-template-columns:repeat(2,1fr); }
  .skill-overview{grid-template-columns:1fr}.skill-card>small{height:auto}.creator-tools{grid-template-columns:1fr}.creator-tools>div{min-height:0}
  .character-card { height:205px; }.character-card img{height:170px}.character-card strong{font-size:16px}.character-card em{font-size:8px}.character-info{inset:28px 6px 6px;padding:8px;gap:5px}.character-info>b{font-size:11px}.character-trait,.character-recommend{font-size:8px}
  .weapon-row { grid-template-columns:repeat(2,1fr); }
  .weapon-row>span { display:none; }
  .loadout-advice{grid-template-columns:1fr auto}.loadout-advice>span{display:none}.loadout-advice p{font-size:8px}
  .difficulty-row { flex-wrap:wrap; justify-content:center; }
  .launch-row{grid-template-columns:1fr;padding:7px}.difficulty-block{text-align:center}#start{width:100%;min-height:48px}
  .modifier-groups { grid-template-columns:1fr; gap:12px; }
  .modifier-list{grid-template-columns:repeat(2,minmax(180px,1fr))}
  #buff-options,#shop-options { display:grid; grid-template-columns:repeat(3,minmax(170px,1fr)); width:100%; gap:10px; overflow-x:auto; }
  .buff-card { width:auto; min-height:145px; }
}
@media (max-width:520px) and (orientation:portrait){
  main{width:100%}header{min-height:38px;padding:4px 7px}h1{font-size:18px;letter-spacing:2px;margin:0}.header-actions button{padding:5px 8px;font-size:9px}
  #overlay,#modifier-overlay,#creator-overlay,#buff-overlay,#shop-overlay,#event-overlay,#pause-overlay{inset:38px 2px 2px;padding:12px}
  .lobby-title p{display:none}.roster-heading{padding:5px 2px}.character-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.character-card{height:165px}.character-card img{height:140px}.character-card strong{font-size:14px}.character-card em{display:none}.character-info{inset:5px;padding:6px;gap:4px}.character-info>b{font-size:10px}.character-stats i{padding:3px 4px;font-size:8px}.character-stats strong{font-size:8px}.character-trait{display:none}.character-recommend{font-size:7px;padding-top:4px}.skill-loadout-title small{display:none}.loadout-advice{grid-template-columns:1fr}.loadout-advice p{display:none}.loadout-advice>strong{width:100%}
  #buff-options,#shop-options{grid-template-columns:1fr;overflow-y:auto}.buff-card{min-height:110px;padding:12px}
  .modifier-list{grid-template-columns:1fr}.modifier-list button{min-height:62px}
}
@media (max-width:760px) and (orientation:portrait){body.mobile-mode.mobile-playing #rotate-hint{display:grid}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 断界余烬：标题、成长树与全设备自适配 */
#title-screen{position:fixed;inset:0;z-index:2000;overflow:hidden;background:#07090c;color:#eee6dc;isolation:isolate}#title-screen.hidden{display:none}
.title-screen-art{position:absolute;inset:0;background:linear-gradient(90deg,#05080cfa 0%,#05080ccc 29%,#05080c0b 66%),url('assets/ui/duanjie-title-art-v1.png') center/cover no-repeat;filter:saturate(.92) contrast(1.06);transform:scale(1.01);animation:title-breathe 12s ease-in-out infinite alternate}.title-screen-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#040609dc,transparent 28%)}
.title-menu{position:relative;z-index:2;width:min(570px,48vw);height:100%;padding:clamp(34px,6vh,78px) clamp(28px,5vw,86px);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}.game-logo{position:relative;padding-left:76px;text-shadow:0 3px 18px #000}.game-logo>i{position:absolute;left:0;top:23px;width:54px;height:54px;display:grid;place-items:center;border:2px solid #e1a64d;transform:rotate(45deg);font:30px Georgia;color:#ffe0a0;box-shadow:0 0 24px #c76d2d88,inset 0 0 18px #df8e3a44;background:#17100c}.game-logo span{font:600 11px Georgia;letter-spacing:.34em;color:#d8aa69}.game-logo h1{margin:4px 0 2px;font:900 clamp(46px,6vw,82px)/.98 "Microsoft YaHei";letter-spacing:.08em;background:linear-gradient(#fff3d2,#c88a40 70%,#7b411e);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #37180b)}.game-logo small{color:#9d9186;letter-spacing:.24em}.title-story{max-width:480px;margin:30px 0 26px;padding-left:18px;border-left:2px solid #b3763c;color:#a9a8a7;line-height:1.85;font-size:13px}
.title-actions{display:grid;gap:8px;max-width:390px}.title-actions button,.title-panel button{border:1px solid transparent;background:linear-gradient(90deg,#17191ded,#11131799);color:#d9d6d1;text-align:left;padding:12px 18px;cursor:pointer;transition:.2s}.title-actions button:hover,.title-actions button:focus-visible{border-color:#c88949;background:linear-gradient(90deg,#4a2d1cf2,#17191db8);transform:translateX(8px);color:#fff}.title-actions b{display:block;font-size:17px;letter-spacing:.12em}.title-actions small{font-size:11px;color:#8e8d8b}.title-version{position:absolute;z-index:2;left:28px;bottom:18px;color:#6f7378;font:10px monospace;letter-spacing:.18em}
.title-panel{position:absolute;left:clamp(28px,5vw,86px);bottom:clamp(24px,5vh,64px);width:min(430px,86vw);padding:16px;background:#0c1015f2;border:1px solid #72502f;box-shadow:0 18px 50px #000b;backdrop-filter:blur(16px)}.title-panel.hidden{display:none}.title-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.title-panel header button{padding:2px 12px;font-size:22px}.title-panel>p,.title-panel>small{color:#888;font-size:11px}#save-slots{display:grid;gap:8px}.save-slot{display:grid!important;grid-template-columns:40px 1fr auto;gap:12px;align-items:center!important}.save-slot.active{border-color:#e5ae5d;background:#392619}.save-slot i{width:30px;height:30px;display:grid;place-items:center;border:1px solid #765536;border-radius:50%;font-style:normal}.save-slot span{display:flex;flex-direction:column}.save-slot em{font-style:normal;color:#a9947a;font-size:11px}
.growth-open{margin:0 24px 18px;padding:10px 16px;border:1px solid #735338;background:linear-gradient(90deg,#2c2119,#17191c);color:#e7cfaa;text-align:left}.growth-open span,.growth-open small{display:block}.growth-open span{font-weight:800}.growth-open small{color:#928476}
#growth-overlay{position:fixed;inset:0;z-index:1700;background:#03060ad9;display:grid;place-items:center;padding:18px;backdrop-filter:blur(12px)}#growth-overlay.hidden{display:none}.growth-window{width:min(980px,96vw);height:min(760px,92vh);display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 50% 45%,#19232a,#081016 72%);border:1px solid #776044;box-shadow:0 24px 90px #000;overflow:hidden}.growth-window>header{padding:18px 24px;display:flex;justify-content:space-between;border-bottom:1px solid #463a2e;background:#0b1117}.growth-window>header span{color:#c59655;font:10px monospace;letter-spacing:.28em}.growth-window h2{margin:2px 0;font-size:24px}.growth-window p{margin:0;color:#9a9ea3;font-size:12px}.growth-window>header button{width:40px;height:40px;background:#171d22;border:1px solid #5c4b3c;color:#ddd;font-size:24px}.growth-window>footer{display:flex;gap:14px;align-items:center;justify-content:center;padding:10px 18px;border-top:1px solid #463a2e;background:#0b1117}.growth-window>footer span{margin-right:auto;color:#858b91;font-size:11px}.growth-window>footer button{width:36px;height:30px;background:#1a2025;border:1px solid #64513f;color:#e1c28c}
#growth-tree{position:relative;min-height:0;overflow:auto;background-image:radial-gradient(#8c69362c 1px,transparent 1px);background-size:24px 24px}#growth-lines,#growth-nodes{position:absolute;inset:0;width:100%;height:100%;min-width:760px;min-height:560px}#growth-lines line{stroke:#5f2930;stroke-width:4}#growth-lines line.unlocked{stroke:#d39a4f;filter:drop-shadow(0 0 5px #d38a44)}.growth-node{position:absolute;width:62px;height:62px;margin:-31px;border-radius:50%;border:4px solid #4b5054;background:radial-gradient(circle,#30363b,#11161a);color:#aaa;box-shadow:0 0 0 3px #171b1e;cursor:pointer}.growth-node strong{display:block;font-size:18px}.growth-node small{position:absolute;top:66px;left:50%;width:120px;transform:translateX(-50%);font-size:10px;color:#8a8f93;pointer-events:none}.growth-node.available{border-color:#b77c3e;color:#f1d19b;animation:node-pulse 1.8s infinite}.growth-node.unlocked{border-color:#e0ad5b;color:#fff3ce;background:radial-gradient(circle,#74421f,#27170e);box-shadow:0 0 0 3px #3c2b1b,0 0 24px #d17b36aa}.growth-node.locked{filter:saturate(.15)}
@keyframes title-breathe{to{transform:scale(1.035) translateX(-.4%)}}@keyframes node-pulse{50%{box-shadow:0 0 0 3px #382a1d,0 0 24px #d8863d88}}
@media(max-width:900px){.title-menu{width:58vw}.game-logo h1{font-size:clamp(42px,8vw,66px)}.growth-window>footer span{display:none}}
@media(max-width:700px),(pointer:coarse){body{overflow:hidden}main{width:100vw;max-width:none;height:100dvh;padding:0;display:grid;grid-template-rows:auto 1fr}main>header{min-height:38px;padding:3px 10px}main>header p{display:none}canvas{width:100%!important;height:100%!important;max-height:calc(100dvh - 44px);object-fit:contain}.title-screen-art{background-position:61% center}.title-menu{width:100%;padding:24px 20px;justify-content:flex-end;background:linear-gradient(0deg,#05070afa 0 47%,transparent 78%)}.game-logo{padding-left:54px}.game-logo>i{width:38px;height:38px;top:16px;font-size:22px}.game-logo h1{font-size:40px}.game-logo small{font-size:9px}.title-story{display:none}.title-actions{width:100%;max-width:none}.title-actions button{padding:9px 16px}.title-panel{left:5vw;bottom:4vh;width:90vw;box-sizing:border-box}.growth-window{height:96dvh}.growth-window>header{padding:10px 14px}.growth-window h2{font-size:18px}#growth-tree{touch-action:pan-x pan-y}.growth-open{margin:0 10px 10px}.skill-branches{overflow-x:auto}}
@media(max-height:520px) and (orientation:landscape){.title-menu{width:48vw;padding:12px 24px;justify-content:center;background:linear-gradient(90deg,#05070afa 0 65%,transparent)}.game-logo h1{font-size:34px}.game-logo small,.title-story{display:none}.title-actions{gap:4px}.title-actions button{padding:6px 13px}.title-actions b{font-size:13px}.title-actions small,.title-version{display:none}}
.game-logo h1{font-size:clamp(44px,5vw,68px);letter-spacing:.06em;white-space:nowrap}