*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#0b1020;color:#e8eefc;font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;touch-action:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}#game{display:block;width:100%;height:100%;touch-action:none}#ui-root{position:absolute;inset:0;pointer-events:none;z-index:10;touch-action:auto}#ui-root>*{pointer-events:auto}.hidden{display:none!important}.hud{position:absolute;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0;display:flex;flex-direction:column;gap:8px;pointer-events:none}.hud-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.8)}.hud-stats{display:flex;gap:12px;flex-wrap:wrap}.hp-bar-wrap{width:min(280px,55vw);height:14px;background:#00000073;border:1px solid rgba(255,255,255,.2);border-radius:8px;overflow:hidden}.hp-bar{height:100%;width:100%;background:linear-gradient(90deg,#e74c3c,#f39c12);border-radius:8px;transition:width .12s linear}.xp-bar-wrap{width:100%;height:6px;background:#0006;border-radius:4px;overflow:hidden}.xp-bar{height:100%;width:0%;background:linear-gradient(90deg,#6c5ce7,#00cec9);border-radius:4px}.weapon-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.weapon-chip{font-size:11px;padding:2px 8px;border-radius:999px;background:#141e3cbf;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;gap:4px}.weapon-chip.with-icon img{width:18px;height:18px;border-radius:4px;object-fit:cover}.hud-row.sub{font-size:12px;opacity:.95}.gold-text{color:#fdcb6e;font-weight:600}.combo-text{color:#ff7675;font-weight:700;min-height:1em}.buff-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.buff-chip{font-size:11px;padding:2px 8px;border-radius:999px;background:#fd79a833;border:1px solid rgba(253,121,168,.35);color:#fd79a8}.choice-card.disabled,.btn.disabled,.btn:disabled{opacity:.45;pointer-events:none}.gold-tag{color:#fdcb6e!important;background:#fdcb6e26!important}.shop-panel{max-height:min(90dvh,720px);overflow-y:auto}.event-banner{position:absolute;top:28%;left:50%;transform:translate(-50%,-20px);padding:10px 18px;border-radius:12px;background:#6c5ce7e6;color:#fff;font-weight:700;font-size:15px;pointer-events:none;opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:25;text-align:center;white-space:nowrap;max-width:90vw}.event-banner.show{opacity:1;transform:translate(-50%)}.selected-char{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;margin:12px 0 8px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 25%,transparent),#00000040);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}.sc-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#00000040}.sc-name{font-weight:700;font-size:15px;margin-bottom:4px}.sc-desc{font-size:12px;color:#b5c2df;line-height:1.4}.char-panel{width:min(520px,100%);max-height:min(92dvh,800px);overflow-y:auto}.char-grid{display:flex;flex-direction:column;gap:10px;margin-top:8px;text-align:left}.char-card{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;background:#ffffff0a;cursor:pointer;transition:border-color .12s,transform .1s,box-shadow .12s}.char-card:hover:not(.locked){border-color:var(--a, #74b9ff);transform:translateY(-1px)}.char-card.selected{border-color:var(--c, #6c5ce7);box-shadow:0 0 0 1px var(--c),0 8px 24px color-mix(in srgb,var(--c) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,transparent),#0003)}.char-card.locked{opacity:.55;cursor:not-allowed;filter:grayscale(.35)}.char-top{display:flex;gap:10px;align-items:center;margin-bottom:6px}.char-icon{font-size:28px}.char-title{font-weight:800;font-size:15px}.char-name{font-size:12px;color:#9aabcc}.char-desc{font-size:13px;color:#b8c4e0;margin-bottom:8px}.char-traits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.trait{font-size:11px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c, #6c5ce7) 22%,transparent);border:1px solid color-mix(in srgb,var(--a, #a29bfe) 40%,transparent);color:#e8eefc}.char-open{font-size:12px;color:#fdcb6e;font-style:italic}.board-panel{width:min(480px,100%);max-height:min(92dvh,800px);overflow-y:auto}.name-edit{display:flex;gap:8px;align-items:center;margin:10px 0 12px;flex-wrap:wrap;justify-content:center}.name-edit label{font-size:13px;color:#9aabcc}.name-edit input{flex:1;min-width:120px;max-width:200px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#00000059;color:#fff;font-size:14px}.btn-sm{min-height:40px;padding:8px 12px;font-size:13px}.board-list{display:flex;flex-direction:column;gap:6px;text-align:left}.board-row{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;gap:2px 8px;padding:8px 10px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);font-size:13px}.board-row.top{background:linear-gradient(135deg,#fdcb6e1a,#6c5ce714);border-color:#fdcb6e40}.br-rank{grid-row:1 / 3;align-self:center;font-weight:800;color:#fdcb6e}.br-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.br-char{text-align:right;color:#81ecec;font-size:12px}.br-score{grid-column:3;grid-row:1;font-weight:800;color:#ffeaa7}.br-meta{grid-column:2 / 4;font-size:11px;color:#8fa3d1}.board-empty{padding:24px;color:#8fa3d1;font-size:14px}.name-gate{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px;text-align:left}.name-gate label{font-size:13px;color:#9aabcc}.name-gate input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#00000059;color:#fff;font-size:16px;font-weight:600}.name-gate input:focus{outline:none;border-color:#74b9ffb3;box-shadow:0 0 0 2px #74b9ff26}.meta-bar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;margin:10px 0 4px;padding:8px 12px;border-radius:10px;background:#00000047;border:1px solid rgba(253,203,110,.2)}.meta-shop-panel{width:min(520px,100%);max-height:min(92dvh,820px);overflow-y:auto}.meta-grid{display:flex;flex-direction:column;gap:10px;margin-top:8px;text-align:left}.meta-card{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;background:#ffffff0a}.meta-card.owned{border-color:#00cec94d}.meta-card.equipped{border-color:#fdcb6e8c;background:linear-gradient(135deg,#fdcb6e1f,#6c5ce714);box-shadow:0 0 16px #fdcb6e1f}.meta-card .title{display:flex;justify-content:space-between;font-weight:700;margin-bottom:4px;gap:8px}.meta-card .desc{font-size:13px;color:#b5c2df;margin-bottom:8px}.meta-card .meta-act{width:100%;margin-top:8px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#050812b8;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));z-index:20;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y}.panel{width:min(420px,100%);background:linear-gradient(160deg,#1c2444f5,#0e1224fa);border:1px solid rgba(140,170,255,.25);border-radius:18px;padding:24px 20px;box-shadow:0 20px 50px #00000073;text-align:center;max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.main-summary,.main-actions{min-width:0}.menu-section-label{display:none;color:#81ecec;font-size:12px;font-weight:800;letter-spacing:.16em}.menu-footnote{margin-top:12px;color:#7f8caf!important;font-size:12px!important}.meta-grid,.char-grid,.levelup-grid,.board-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.panel h1{font-size:28px;margin-bottom:8px;letter-spacing:1px}.panel h2{font-size:22px;margin-bottom:12px}.panel p{color:#b8c4e0;font-size:14px;line-height:1.55;margin-bottom:12px}.panel .meta{font-size:13px;color:#8fa3d1;margin-bottom:18px}.btn-row{display:flex;flex-direction:column;gap:10px}.btn{appearance:none;border:none;border-radius:12px;min-height:52px;padding:12px 18px;font-size:16px;font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(135deg,#5b7cfa,#6c5ce7);box-shadow:0 6px 18px #5b7cfa59;transition:transform .08s ease,filter .12s ease}.btn:active{transform:scale(.97);filter:brightness(.95)}.btn.secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.18);box-shadow:none}.btn.danger{background:linear-gradient(135deg,#e17055,#d63031);box-shadow:0 6px 18px #d630314d}.levelup-overlay{background:#050812c7;animation:fadeIn .18s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.levelup-panel{animation:popIn .22s cubic-bezier(.2,1.2,.4,1);border-color:#fdcb6e59;box-shadow:0 20px 50px #00000080,0 0 40px #6c5ce733}@keyframes popIn{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.levelup-grid{display:flex;flex-direction:column;gap:10px;margin-top:8px}.choice-card{text-align:left;border:1px solid rgba(255,255,255,.14);background:#ffffff0d;border-radius:14px;padding:14px 14px 12px;cursor:pointer;min-height:72px;transition:border-color .12s ease,background .12s ease,transform .1s ease,box-shadow .12s ease}.choice-card:active,.choice-card:hover{border-color:#78aaffb3;background:#5a82ff1f;transform:translateY(-1px)}.choice-card.rarity-good{border-color:#00cec966;background:#00cec914}.choice-card.rarity-great{border-color:#fdcb6e8c;background:linear-gradient(135deg,#fdcb6e1f,#6c5ce71a);box-shadow:0 0 18px #fdcb6e1f}.choice-card.rarity-evo,.choice-card.evo{border-color:#ff7675a6;background:linear-gradient(135deg,#ff767526,#a29bfe1f);box-shadow:0 0 22px #ff76752e;animation:evoPulse 1.4s ease-in-out infinite}@keyframes evoPulse{0%,to{box-shadow:0 0 14px #ff767526}50%{box-shadow:0 0 28px #fdcb6e59}}.choice-card .title{font-size:16px;font-weight:700;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px;align-items:center}.choice-card .lv-label{margin-left:8px;font-size:12px;font-weight:600;color:#81ecec}.choice-card .desc{font-size:13px;color:#b5c2df;line-height:1.4}.choice-card .tag{font-size:11px;font-weight:600;color:#81ecec;background:#00cec91f;border-radius:999px;padding:2px 8px;white-space:nowrap}.choice-card.evo .tag,.choice-card.rarity-evo .tag{color:#ffeaa7;background:#fdcb6e2e}.choice-card.rarity-great .tag{color:#fdcb6e;background:#fdcb6e26}.stat-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.stat-pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#74b9ff26;color:#74b9ff;border:1px solid rgba(116,185,255,.25)}.rarity-great .stat-pill,.rarity-evo .stat-pill{background:#fdcb6e26;color:#fdcb6e;border-color:#fdcb6e4d}.float-actions{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;display:flex;gap:8px;z-index:15;pointer-events:auto}.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0a0e1c8c;color:#fff;font-size:16px;cursor:pointer}#virtual-controls{position:absolute;inset:0;z-index:8;pointer-events:none}#virtual-controls:not(.hidden){display:block}.vpad-base,.vpad-knob,.vbtn{position:absolute;pointer-events:auto;touch-action:none}.vpad-base{width:128px;height:128px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.18);left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px))}.vpad-knob{width:56px;height:56px;border-radius:50%;background:#78a0ff8c;border:2px solid rgba(255,255,255,.35);left:36px;top:36px;box-shadow:0 4px 12px #0000004d}.vbtn{width:76px;height:76px;border-radius:50%;right:calc(28px + env(safe-area-inset-right,0px));bottom:calc(36px + env(safe-area-inset-bottom,0px));background:#fd79a859;border:2px solid rgba(255,255,255,.28);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}.vbtn.active{background:#fd79a8a6;transform:scale(.96)}.vbtn.cooldown:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.55) var(--cd, 0%),transparent 0)}.low-perf-tip{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate(-50%);font-size:12px;color:#ffeaa7;background:#00000073;padding:4px 10px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .3s}.low-perf-tip.show{opacity:1}@media(min-width:900px){.panel h1{font-size:32px}}@media(orientation:landscape)and (max-height:600px){.overlay{padding:max(8px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}.panel{max-width:100%;max-height:100%;padding:14px 16px;border-radius:14px}.panel h1{margin-bottom:4px;font-size:24px}.panel h2{margin-bottom:6px;font-size:19px}.panel p{margin-bottom:7px;font-size:12px;line-height:1.4}.btn{min-height:42px;padding:8px 12px;border-radius:10px;font-size:14px}.main-panel{display:grid;grid-template-columns:minmax(260px,.92fr) minmax(310px,1.08fr);gap:16px;width:min(900px,100%);height:100%;overflow:hidden;text-align:left}.main-summary{min-height:0;overflow-y:auto;padding-right:5px;touch-action:pan-y}.main-actions{display:flex;min-height:0;flex-direction:column;justify-content:center;padding-left:16px;border-left:1px solid rgba(255,255,255,.12)}.menu-section-label{display:block;margin-bottom:8px}.menu-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.menu-action-grid .btn:first-child{grid-column:1 / -1}.menu-footnote{margin:9px 0 0!important;font-size:10px!important;line-height:1.35!important}.name-gate{gap:3px;margin:7px 0 4px}.name-gate label{font-size:11px}.name-gate input{min-height:39px;padding:7px 10px;border-radius:9px;font-size:14px}.selected-char{gap:8px;margin:6px 0 5px;padding:7px 9px}.selected-char .sc-desc{display:-webkit-box;overflow:hidden;font-size:11px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.meta-bar{gap:6px;margin:5px 0 3px;padding:6px 8px;font-size:11px}.main-summary .meta{margin-bottom:0;font-size:11px}.levelup-panel,.shop-panel,.char-panel,.meta-shop-panel{display:grid;grid-template-columns:minmax(165px,.42fr) minmax(0,1.58fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:14px;width:min(1060px,100%);height:100%;overflow:hidden;text-align:left}.levelup-panel>h2,.shop-panel>h2,.char-panel>h2,.meta-shop-panel>h2{grid-column:1;grid-row:1}.levelup-panel>p,.shop-panel>p,.char-panel>p,.meta-shop-panel>p{grid-column:1;grid-row:2;align-self:start}.levelup-panel>.btn-row,.shop-panel>.btn-row,.char-panel>.btn-row,.meta-shop-panel>.btn-row{grid-column:1;grid-row:3;align-self:end;margin-top:8px!important}.levelup-panel>.levelup-grid,.shop-panel>.levelup-grid,.char-panel>.char-grid,.meta-shop-panel>.meta-grid{grid-column:2;grid-row:1 / 4;min-height:0;margin:0;overflow-y:auto;padding:2px 5px 4px 2px}.levelup-panel>.levelup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));align-content:center;gap:8px}.shop-panel>.levelup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:8px}.char-panel>.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-content:start;gap:8px}.meta-shop-panel>.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-content:start;gap:8px}.choice-card{min-height:0;padding:9px 10px;border-radius:11px}.choice-card .title{margin-bottom:3px;font-size:13px}.choice-card .desc{display:-webkit-box;overflow:hidden;font-size:11px;line-height:1.32;-webkit-box-orient:vertical;-webkit-line-clamp:3}.choice-card .tag,.choice-card .lv-label,.stat-pill{font-size:9px}.stat-pills{gap:4px;margin-top:5px}.stat-pill{padding:2px 5px}.meta-card{padding:9px 10px;border-radius:11px}.meta-card .title{margin-bottom:3px;font-size:13px}.meta-card .desc{display:-webkit-box;overflow:hidden;margin-bottom:4px;font-size:11px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.meta-card .meta-act{min-height:36px;margin-top:5px}.char-card{padding:9px}.char-desc,.char-open{font-size:10px}.board-panel{width:min(760px,100%);max-height:100%}.board-list{max-height:calc(100dvh - 150px);overflow-y:auto}}@media(orientation:landscape)and (max-height:400px){.panel{padding:9px 12px}.panel h1{font-size:21px}.panel h2{font-size:17px}.main-panel,.levelup-panel,.shop-panel,.char-panel,.meta-shop-panel{column-gap:10px}.main-actions{padding-left:10px}.menu-footnote{display:none}.btn{min-height:38px;padding-block:6px;font-size:13px}.choice-card .desc{-webkit-line-clamp:2}}