:root{--bg-deep: #0a0608;--bg-mid: #1a0a0a;--ink: #f5e6d3;--ink-dim: #c9b89d;--ink-dimmer: #8a7a5a;--vermilion: #c43c3c;--gold: #d4a045;--gold-bright: #f0c060;--jade: #4a6b54;--indigo: #2c3e6b;--celestial: #6b8aa8;--seal: #8b1a1a;--paper: #e8e0d0}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden}#ui-root{position:fixed;inset:0;z-index:50;pointer-events:none;font-family:STKaiti,KaiTi,楷体,Songti SC,SimSun,serif}#ui-root *{pointer-events:auto}.menu-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#3c141466,#0a0608f2 70%);position:relative;overflow:hidden}.menu-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,240,200,.4),transparent),radial-gradient(1px 1px at 60% 20%,rgba(255,240,200,.5),transparent),radial-gradient(2px 2px at 80% 50%,rgba(212,160,69,.5),transparent),radial-gradient(1px 1px at 30% 70%,rgba(255,240,200,.3),transparent),radial-gradient(1.5px 1.5px at 90% 80%,rgba(212,160,69,.4),transparent),radial-gradient(1px 1px at 10% 90%,rgba(255,240,200,.4),transparent);animation:stars 8s linear infinite}.menu-stars-2{animation-duration:12s;animation-direction:reverse;opacity:.7}@keyframes stars{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.menu-content{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 48px;border:1px solid rgba(212,160,69,.3);background:#0a060899;backdrop-filter:blur(8px);border-radius:4px;box-shadow:0 0 40px #c43c3c33,inset 0 0 30px #0006;max-width:90vw}.menu-title{font-size:72px;letter-spacing:24px;color:var(--gold-bright);text-shadow:0 0 24px rgba(240,192,96,.6),0 4px 8px rgba(0,0,0,.8);font-weight:700}.menu-subtitle{font-size:20px;color:var(--ink);letter-spacing:12px;margin-top:-8px}.menu-stamp{font-size:12px;color:var(--vermilion);letter-spacing:4px;padding:4px 12px;border:1px solid var(--vermilion);margin:4px 0 12px;text-shadow:0 0 4px rgba(196,60,60,.4)}.menu-btn{background:transparent;color:var(--ink);border:1px solid var(--ink-dim);padding:12px 32px;font-family:inherit;font-size:18px;letter-spacing:6px;cursor:pointer;transition:all .3s ease;min-width:200px;position:relative}.menu-btn:hover{background:#d4a04526;border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 16px #d4a0454d}.menu-btn-primary{border-color:var(--gold);color:var(--gold-bright)}.menu-btn-primary:hover{background:#c43c3c66;border-color:var(--vermilion);color:var(--paper)}.menu-version{font-size:11px;color:var(--ink-dimmer);letter-spacing:2px;margin-top:4px}.pick-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:32px 24px;background:radial-gradient(ellipse at center,#140a0aeb,#050305fa);overflow-y:auto}.pick-header{text-align:center;margin-bottom:24px}.pick-title{font-size:48px;color:var(--gold-bright);letter-spacing:16px;text-shadow:0 0 16px rgba(240,192,96,.5)}.pick-subtitle{font-size:14px;color:var(--ink-dim);letter-spacing:4px;margin-top:8px}.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;width:100%;max-width:1100px;padding:16px}.pick-card{background:#140c08b3;border:1px solid rgba(212,160,69,.25);padding:14px 10px;cursor:pointer;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;overflow:hidden;text-align:center}.pick-card:hover{background:#3c1810b3;border-color:var(--vermilion);transform:translateY(-2px);box-shadow:0 4px 20px #c43c3c4d}.pick-locked{opacity:.35;cursor:not-allowed}.pick-locked:hover{transform:none;background:#140c08b3;border-color:#d4a04540;box-shadow:none}.pick-symbol{font-size:36px;line-height:1;margin-bottom:4px}.pick-cn{font-size:20px;font-weight:700;letter-spacing:2px}.pick-cnname{font-size:11px;color:var(--ink-dim);letter-spacing:1px}.pick-role{font-size:10px;color:var(--ink-dimmer);padding:2px 6px;border:1px solid var(--ink-dimmer);margin-top:2px}.pick-trait{font-size:11px;color:var(--ink);line-height:1.4;margin-top:4px;min-height:30px}.pick-skill{font-size:10px;color:var(--ink-dim);line-height:1.4;margin-top:2px}.pick-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;padding:4px 12px;font-size:12px;color:var(--ink-dim);letter-spacing:2px;border:1px solid var(--ink-dimmer)}.pick-back{margin-top:16px;background:transparent;color:var(--ink-dim);border:1px solid var(--ink-dim);padding:8px 24px;font-family:inherit;font-size:14px;letter-spacing:4px;cursor:pointer}.pick-back:hover{color:var(--ink);border-color:var(--ink)}.hud-screen{position:absolute;inset:0;pointer-events:none}.hud-topbar{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:20px;padding:8px 20px;background:#0a060899;border:1px solid rgba(212,160,69,.4);backdrop-filter:blur(4px);pointer-events:auto;min-width:320px;justify-content:space-between}.hud-timer{font-size:24px;color:var(--gold-bright);letter-spacing:2px;font-weight:700;text-shadow:0 0 8px rgba(240,192,96,.5);min-width:60px;text-align:center}.hud-towers{display:flex;align-items:center;gap:12px}.hud-tower-group{display:flex;align-items:center;gap:4px;font-size:16px}.hud-tower-player{color:#f88}.hud-tower-enemy{color:#88f}.hud-tower-icon{font-size:18px}.hud-tower-count{font-size:18px;font-weight:700;min-width:16px;text-align:center}.hud-tower-vs{color:var(--ink-dim);font-size:12px}.hud-bottom{position:absolute;bottom:16px;left:16px;right:16px;display:flex;align-items:center;gap:16px;pointer-events:none}.hud-skill{pointer-events:auto}.hud-skill-btn{width:64px;height:64px;background:#140c08d9;border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;transition:all .2s;color:var(--ink)}.hud-skill-btn:hover{transform:scale(1.05)}.hud-skill-btn.hud-skill-ready{background:#c43c3c66;box-shadow:0 0 16px currentColor;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 8px currentColor}50%{box-shadow:0 0 24px currentColor}}.hud-skill-name{font-size:16px;font-weight:700;letter-spacing:1px}.hud-skill-cd{font-size:10px;color:var(--ink-dim);margin-top:2px}.hud-hp-wrap{flex:1;display:flex;flex-direction:column;gap:4px;pointer-events:auto}.hud-hp-label{font-size:12px;color:var(--ink-dim);letter-spacing:2px}.hud-hp-bar{position:relative;width:100%;height:24px;background:#140c08d9;border:1px solid rgba(212,160,69,.4)}.hud-hp-fill{height:100%;transition:width .2s ease}.hud-hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--paper);font-size:14px;font-weight:700;text-shadow:0 0 4px black,0 1px 2px black;letter-spacing:1px}.hud-hint{position:absolute;bottom:100px;left:50%;transform:translate(-50%);font-size:12px;color:var(--ink-dimmer);letter-spacing:4px;pointer-events:none;background:#0a060880;padding:4px 12px;border:1px solid rgba(212,160,69,.2)}.result-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#281010d9,#050305fa)}.result-card{background:#140c08eb;border:1px solid rgba(212,160,69,.5);padding:36px 48px;max-width:480px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 0 60px #d4a04533}.result-stamp{font-size:96px;line-height:1;font-weight:700;letter-spacing:4px;padding:16px 28px;border:3px solid}.result-victory{color:var(--vermilion);border-color:var(--vermilion);text-shadow:0 0 16px rgba(196,60,60,.6)}.result-defeat{color:var(--ink-dim);border-color:var(--ink-dim)}.result-text{font-size:16px;color:var(--ink);letter-spacing:4px}.result-constellation{font-size:32px;letter-spacing:4px;font-weight:700}.result-fate{font-size:14px;letter-spacing:2px}.result-stats{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-dim);padding:12px 0;border-top:1px solid rgba(212,160,69,.3);border-bottom:1px solid rgba(212,160,69,.3);width:100%}.result-destiny{font-size:14px;color:var(--ink);letter-spacing:2px;line-height:1.6;padding:8px 12px;background:#3c18104d;border-left:2px solid var(--vermilion);border-right:2px solid var(--vermilion);font-style:italic}.result-actions{display:flex;gap:12px;margin-top:8px}.codex-screen{width:100%;height:100%;background:radial-gradient(ellipse at center,#140a0aeb,#050305fa);padding:32px 24px;overflow-y:auto;display:flex;flex-direction:column;align-items:center}.codex-title{font-size:36px;color:var(--gold-bright);letter-spacing:8px}.codex-sub{font-size:14px;color:var(--ink-dim);margin-top:8px;margin-bottom:24px;letter-spacing:2px}.codex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;max-width:900px;width:100%}.codex-card{background:#140c08b3;border:1px solid rgba(212,160,69,.25);padding:16px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.codex-locked{opacity:.3}.codex-symbol{font-size:32px}.codex-cn{font-size:18px;color:var(--ink);letter-spacing:2px}.codex-trait{font-size:10px;color:var(--ink-dim);margin-top:4px}.codex-lock{font-size:10px;color:var(--ink-dimmer);margin-top:4px}