: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 #audio-toggle{width:auto;padding:7px 12px;border-radius:999px;font-size:12px;background:#1d1717cc;border-color:#79604b;color:#dac6ac}
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; }
#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 { 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; }
.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,.roster-heading,.character-cards,.weapon-row,.loadout-advice,.launch-row { position:relative; z-index:1; width:min(910px,100%); }
.lobby-title{display:grid;place-items:center;padding:9px 90px 10px;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:3px 0 1px; font-size:29px; letter-spacing:5px; color:#ebcfaa; }
.lobby-title p { margin:0; color:#9f9081; font-size:11px; }
.roster-heading{display:flex;justify-content:space-between;align-items:center;padding:7px 3px 6px;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(4,1fr); gap:12px; }
.character-card { position:relative;min-width:0;height:258px;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:216px;object-fit:contain;object-position:center top;filter:drop-shadow(0 10px 12px #000a);transition:transform .24s ease,filter .24s ease}
.character-copy{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;display:grid;gap:2px;transition:opacity .18s ease,transform .22s ease}
.character-card strong { font-size:20px;letter-spacing:3px;color:#f0d5ad;text-shadow:0 2px 7px #000 }
.character-card small { color:#d5a96f;font-size:10px;letter-spacing:1px }
.character-card em { margin-top:4px;font-style:normal;font-size:9px;color:#a99a8b;line-height:1.35 }
.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:43px 8px 8px;padding:11px;display:flex;flex-direction:column;gap:8px;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:12px;letter-spacing:1px}
.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:4px 6px;background:#241b18dc;border-left:2px solid #a7784d;color:#948578;font-size:9px;font-style:normal}
.character-stats strong{font-size:10px;letter-spacing:0;color:#ead0a8;text-shadow:none}
.character-trait{color:#c3b4a2;font-size:9px;line-height:1.45}
.character-recommend{padding-top:6px;border-top:1px solid #80644866;color:#d8c3a4;font-size:9px;line-height:1.35}
.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}
.weapon-row { display:grid;grid-template-columns:96px repeat(4,1fr);gap:7px;align-items:stretch;margin-top:8px; }
.weapon-row>span { 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; }

@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 { inset:38px 2px 2px; justify-content:flex-start; padding:16px; }
  #overlay{overflow-x:hidden;overflow-y:auto}#modifier-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); }
  .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 #audio-toggle{padding:5px 8px;font-size:10px}
  #overlay,#modifier-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}.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 (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}