:root{color-scheme:dark;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;background:#050b12}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 15%,rgba(66,232,209,.12),transparent 38%),#050b12}#game-canvas{display:block;width:min(100vw,720px,56.25vh);height:auto;max-width:100vw;max-height:100vh;aspect-ratio:9 / 16;border-radius:22px;background:#081522;box-shadow:0 28px 90px #00000080;touch-action:none}.loading{position:fixed;inset:0;display:grid;place-items:center;color:#d9e8f5;background:#07111c;font-size:18px;letter-spacing:.08em}.loading.hidden{display:none}.home-screen{position:fixed;inset:0;z-index:10;display:none;overflow:hidden;background:linear-gradient(180deg,#040e17f0,#050c14fc),radial-gradient(circle at 50% 0%,rgba(66,232,209,.14),transparent 42%);color:#f8fbff}.home-screen.active{display:block}.home-shell{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);position:relative;width:min(760px,100%);height:100%;min-height:0;margin:0 auto;padding:28px 22px 46px}.home-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.home-services button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;min-height:76px;padding:11px;border:1px solid color-mix(in srgb,var(--service-color) 42%,transparent);border-radius:14px;background:color-mix(in srgb,var(--service-color) 9%,#091c2d);color:#f8fbff;font:inherit;text-align:left}.home-services button>span{grid-row:1 / 3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--service-color);color:#06131d;font-size:19px;font-weight:1000}.home-services button strong{align-self:end;font-size:16px}.home-services button small{align-self:start;color:#9fb2c8;font-size:11px}.home-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(66,232,209,.18)}.home-header-actions{display:flex;align-items:stretch;gap:10px}.home-share-button{display:grid;place-items:center;width:52px;min-height:52px;border:1px solid rgba(66,232,209,.3);border-radius:14px;background:#091b2ae6;color:#42e8d1}.home-share-button svg{width:24px;height:24px;overflow:visible}.home-share-button circle,.home-share-button path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.home-share-button circle{fill:#42e8d129}.home-toast{position:fixed;left:50%;bottom:34px;z-index:45;max-width:min(420px,calc(100vw - 40px));padding:11px 16px;transform:translate(-50%,18px);border:1px solid rgba(66,232,209,.36);border-radius:999px;background:#071826fa;color:#f8fbff;font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}.home-toast.visible{transform:translate(-50%);opacity:1}.home-eyebrow{margin:0 0 6px;color:#42e8d1;font-size:12px;font-weight:800;letter-spacing:.12em}.home-header h1{margin:0;font-size:32px;line-height:1.15}.home-resource{display:grid;gap:3px;min-width:112px;padding:12px 16px;border:1px solid rgba(66,232,209,.3);border-radius:14px;background:#091b2adb;text-align:right}.home-resource span{color:#9fb2c8;font-size:12px}.home-resource strong{color:#ffe08a;font-size:24px}.home-tabs{display:flex;gap:8px;margin:12px 0 18px;overflow-x:auto}.menu-page-layer{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;background:linear-gradient(180deg,#040e17fa,#050c14),radial-gradient(circle at 50% 0%,rgba(66,232,209,.12),transparent 42%)}.menu-page-layer.active{display:block}.menu-page{width:min(760px,100%);height:100%;margin:0 auto}.menu-page-shell{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;padding:24px 20px 34px}.menu-page-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(66,232,209,.18)}.menu-page-header h2,.menu-page-header p{margin:0}.menu-page-header h2{font-size:25px}.menu-page-header p{margin-top:3px;color:#9fb2c8;font-size:12px;line-height:1.35}.menu-back{min-width:72px;min-height:46px;border:1px solid rgba(66,232,209,.34);border-radius:12px;background:#0a1f2fe6;color:#f8fbff;font:inherit;font-weight:900}.sync-state{padding:7px 9px;border:1px solid rgba(159,178,200,.24);border-radius:999px;color:#9fb2c8;font-size:10px;font-weight:800;white-space:nowrap}.sync-state.synced{border-color:#42e8d170;color:#42e8d1}.sync-state.saving,.sync-state.loading,.sync-state.pending{color:#ffe08a}.sync-state.offline{color:#ff9c8a}.menu-page-actions{display:grid;justify-items:end;gap:6px}.menu-confirm{min-height:32px;padding:0 10px;border:1px solid rgba(66,232,209,.4);border-radius:9px;background:#42e8d124;color:#e9fffb;font:inherit;font-size:11px;font-weight:900}.menu-confirm:disabled{opacity:.38}.menu-dialog-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:#02070cc2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.menu-dialog{width:min(430px,100%);padding:22px;border:1px solid rgba(255,224,138,.46);border-radius:18px;background:#081826fc;box-shadow:0 22px 70px #00000080}.menu-dialog h3,.menu-dialog p{margin:0}.menu-dialog h3{color:#ffe08a;font-size:21px}.menu-dialog p{margin-top:10px;color:#b6c6d5;line-height:1.55}.menu-dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.menu-dialog-actions button{min-height:46px;border-radius:12px;font:inherit;font-weight:900}.dialog-cancel{border:1px solid rgba(159,178,200,.3);background:#0c1f2feb;color:#dce9f4}.dialog-sync{border:0;background:#ffe08a;color:#171006}.menu-page-content{min-height:0;overflow:auto;overscroll-behavior:contain}.menu-note{color:#8098af;font-size:12px;text-align:center}.inventory-board-frame{display:grid;place-items:start center;min-height:0;padding:18px 0 8px}.inventory-board{position:relative;display:grid;grid-template-columns:repeat(var(--inventory-size),var(--inventory-cell));grid-template-rows:repeat(var(--inventory-size),var(--inventory-cell));gap:2px;width:fit-content;padding:7px;border:1px solid rgba(66,232,209,.28);border-radius:16px;background:#05101bfa;box-shadow:inset 0 0 34px #42e8d10d;--inventory-cell: clamp( 22px, calc((min(760px, 100vw) - 88px) / 12), 42px )}.inventory-cell{border:1px solid rgba(95,127,151,.19);border-radius:4px;background:#0d233485}.inventory-item{position:relative;z-index:1;display:grid;place-content:center;gap:2px;min-width:0;min-height:0;margin:1px;overflow:hidden;border:1px solid color-mix(in srgb,var(--item-color) 78%,white 8%);border-radius:7px;background:linear-gradient(145deg,color-mix(in srgb,var(--item-color) 44%,#122c42),#081826fa);color:#f8fbff;font:inherit;text-align:center;touch-action:none;cursor:grab}.inventory-item.dragging{z-index:8;cursor:grabbing;opacity:.88;box-shadow:0 16px 38px #0000007a}.inventory-item-icon{color:var(--item-color);font-size:clamp(14px,3.5vw,25px);font-weight:1000;line-height:1}.inventory-item strong{overflow:hidden;font-size:clamp(7px,1.5vw,11px);line-height:1.05;text-overflow:ellipsis}.inventory-item small{color:#a8bacb;font-size:clamp(6px,1.2vw,9px)}.inventory-item.element-item strong,.inventory-item.element-item small{display:none}.formation-stage{display:grid;justify-items:center;gap:10px;padding:16px 16px 18px;border:1px solid color-mix(in srgb,var(--formation-color) 34%,transparent);border-radius:20px;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--formation-color) 13%,transparent),transparent 55%),#071826f0}.formation-copy{display:grid;justify-items:center;gap:4px;text-align:center}.formation-copy span{color:var(--formation-color);font-size:11px;font-weight:900}.formation-copy strong{font-size:23px}.formation-copy p{max-width:480px;margin:0;color:#9fb2c8;font-size:13px}.formation-copy em{color:#ffe08a;font-size:13px;font-style:normal;font-weight:900}.formation-diagram{width:min(100%,352px);height:auto;overflow:visible}.formation-dot{fill:#9fb2c840;stroke:#9fb2c85c;stroke-width:2}.formation-line{filter:drop-shadow(0 0 7px var(--formation-color));stroke-dasharray:720;stroke-dashoffset:720;animation:formation-draw .9s ease forwards}.formation-node{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 7px var(--formation-color));opacity:0;animation:formation-node-in .46s ease forwards}.formation-diagram.is-equipped .formation-node{animation:formation-node-in .46s ease forwards,formation-node-pulse 1.5s ease-in-out infinite .65s}.formation-equip{min-width:180px;min-height:46px;border:0;border-radius:12px;background:var(--formation-color);color:#06131d;font:inherit;font-weight:1000}.formation-equip.equipped{opacity:.72}.menu-section-header,.character-list-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px}.menu-section-header span{color:#8098af;font-size:11px}.formation-book-list,.character-item-list{display:flex;gap:10px;padding:2px 2px 14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}.formation-book{position:relative;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr auto;gap:8px;flex:0 0 224px;min-height:132px;padding:12px;border:1px solid color-mix(in srgb,var(--book-color) 42%,transparent);border-radius:14px;background:color-mix(in srgb,var(--book-color) 8%,#0a2033);scroll-snap-align:start}.formation-book.selected{box-shadow:inset 0 0 0 2px var(--book-color)}.formation-book.equipped:after{content:"已装备";position:absolute;top:8px;right:8px;padding:3px 6px;border-radius:999px;background:var(--book-color);color:#07131c;font-size:9px;font-weight:1000}.formation-book-icon{grid-row:1;display:grid;place-items:center;width:48px;height:62px;border:2px solid var(--book-color);border-left-width:8px;border-radius:5px 10px 10px 5px;color:var(--book-color);font-size:20px;font-weight:1000}.formation-book>div:nth-child(2){display:grid;align-content:start;gap:3px}.formation-book span,.formation-book small{color:#9fb2c8;font-size:11px}.formation-book button{grid-column:1 / 3;min-height:34px;border:1px solid color-mix(in srgb,var(--book-color) 44%,transparent);border-radius:9px;background:#071826d1;color:#f8fbff;font:inherit;font-weight:900}.character-stage{position:relative;width:min(100%,520px);min-height:500px;margin:12px auto 0;border:1px solid rgba(66,232,209,.16);border-radius:22px;background:radial-gradient(circle at 50% 35%,rgba(66,232,209,.1),transparent 46%),#061420eb}.character-pentagon{position:absolute;inset:0;width:100%;height:100%}.character-pentagon polygon{fill:#b7a1ff0a;stroke:#b7a1ff6b;stroke-width:1;stroke-dasharray:3 2}.character-silhouette{position:absolute;inset:0;width:100%;height:100%}.character-silhouette circle,.character-silhouette path{fill:#3d5e777a;stroke:#7da7c285;stroke-width:3}.character-slot{position:absolute;display:grid;place-items:center;gap:2px;width:78px;min-height:62px;padding:5px;transform:translate(-50%,-50%);border:1px dashed rgba(159,178,200,.56);border-radius:12px;background:#05101be0;color:#dce9f4;font:inherit}.character-slot.equipped{border-style:solid;border-color:var(--slot-color);box-shadow:0 0 20px color-mix(in srgb,var(--slot-color) 24%,transparent)}.character-slot em,.character-element-slot em,.character-item em{color:#ffe08a;font-size:9px;font-style:normal;font-weight:900}.character-slot span{font-size:21px;font-weight:1000}.character-element-slot{position:absolute;display:grid;place-items:center;gap:1px;width:62px;min-height:58px;padding:4px;transform:translate(-50%,-50%);border:1px dashed rgba(183,161,255,.7);border-radius:50%;background:#081222f5;color:#dce9f4;font:inherit}.character-element-slot.equipped{border-style:solid;border-color:var(--slot-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--slot-color) 16%,transparent),0 0 22px color-mix(in srgb,var(--slot-color) 28%,transparent)}.character-element-slot span{font-size:20px;font-weight:1000;line-height:1}.character-element-slot small{max-width:54px;overflow:hidden;color:#9fb2c8;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.character-slot small{color:#9fb2c8;font-size:9px}.character-filters{display:flex;gap:6px;overflow-x:auto;padding:2px}.character-filters button{flex:0 0 auto;min-height:32px;padding:0 10px;border:1px solid rgba(66,232,209,.2);border-radius:999px;background:#081927e6;color:#b9cad9;font:inherit;font-size:11px;font-weight:800}.character-filters button.active{border-color:#42e8d1;color:#fff}.character-item{position:relative;display:grid;align-content:start;gap:5px;flex:0 0 154px;min-height:176px;padding:12px;border:1px solid color-mix(in srgb,var(--item-color) 44%,transparent);border-radius:14px;background:color-mix(in srgb,var(--item-color) 8%,#0a2033);scroll-snap-align:start}.character-item.equipped{box-shadow:inset 0 0 0 2px var(--item-color)}.character-item.draggable-element{touch-action:none;cursor:grab}.character-item.draggable-element:active{cursor:grabbing}.character-item-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:color-mix(in srgb,var(--item-color) 28%,#10283b);color:var(--item-color);font-size:23px;font-weight:1000}.character-item span,.character-item small{color:#9fb2c8;font-size:10px;line-height:1.35}.character-item button{align-self:end;min-height:34px;margin-top:auto;border:0;border-radius:9px;background:var(--item-color);color:#06131d;font:inherit;font-weight:1000}.character-element-slot.drop-target{border-color:#fff;background:color-mix(in srgb,var(--slot-color, #42e8d1) 28%,#0b2034);box-shadow:0 0 0 5px #42e8d12e,0 0 28px #42e8d16b}.character-drag-ghost{position:fixed;z-index:70;display:grid;place-items:center;width:54px;height:54px;transform:translate(-50%,-50%);border:2px solid var(--drag-color);border-radius:50%;background:#071422f5;color:var(--drag-color);box-shadow:0 12px 30px #00000070;pointer-events:none}.character-drag-ghost span{font-size:20px;font-weight:1000}.character-drag-ghost small{color:#ffe08a;font-size:8px}@keyframes formation-draw{to{stroke-dashoffset:0}}@keyframes formation-node-in{0%{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}}@keyframes formation-node-pulse{0%,to{opacity:.78;transform:scale(.92)}50%{opacity:1;transform:scale(1.25)}}.home-tabs button{flex:1;min-width:112px;padding:12px 10px;border:1px solid rgba(66,232,209,.2);border-radius:12px;background:#091b2ab8;color:#d9e8f5;font-weight:800}.home-tabs button.active{border-color:#42e8d1;background:#42e8d129;color:#fff}.home-content{display:grid;align-content:start;gap:16px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}.home-content.stage-layout{grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;overflow:hidden}.stage-list-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}.home-tip{margin:0;color:#9fb2c8;line-height:1.55}.stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stage-button{min-height:76px;padding:10px;border:1px solid rgba(66,232,209,.22);border-radius:12px;background:#0a1f2fe6;color:#f8fbff}.stage-button strong,.stage-button span{display:block}.stage-button span{margin-top:7px;color:#9fb2c8;font-size:12px}.stage-button.selected{border-color:#42e8d1;box-shadow:inset 0 0 0 1px #42e8d1}.stage-button.locked{opacity:.35}.home-primary{min-height:54px;border:0;border-radius:14px;background:#42e8d1;color:#031411;font:inherit;font-weight:900}.home-secondary{min-height:52px;padding:0 18px;border:1px solid rgba(66,232,209,.36);border-radius:14px;background:#0a1f2feb;color:#f8fbff;font:inherit;font-weight:900}.home-secondary:disabled{opacity:.42}.roguelite-intro,.destiny-grid,.roguelite-actions{display:grid;gap:12px}.roguelite-rules{display:flex;flex-wrap:wrap;gap:8px}.roguelite-rules span{padding:7px 10px;border:1px solid rgba(183,161,255,.34);border-radius:999px;background:#b7a1ff1a;color:#e8e1ff;font-size:12px;font-weight:800}.destiny-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.destiny-grid button{display:grid;gap:7px;min-height:144px;padding:15px;border:1px solid color-mix(in srgb,var(--destiny-color) 46%,transparent);border-radius:15px;background:color-mix(in srgb,var(--destiny-color) 9%,#081929);color:#f8fbff;font:inherit;text-align:left}.destiny-grid button.selected{border-color:var(--destiny-color);box-shadow:inset 0 0 0 1px var(--destiny-color)}.destiny-grid button span{color:#aebfd0;font-size:13px;line-height:1.45}.destiny-grid button small{align-self:end;color:var(--destiny-color);font-size:12px;font-weight:800}.roguelite-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.continue-run{width:100%}.element-upgrade-list{display:grid;gap:14px}.element-upgrade-row{padding:16px;border:1px solid rgba(66,232,209,.16);border-radius:16px;background:#081927e6}.element-upgrade-title{display:grid;grid-template-columns:14px 1fr;gap:6px 10px;align-items:center}.element-upgrade-title>span{grid-row:1 / 3;width:14px;height:46px;border-radius:8px}.element-upgrade-title small{color:#9fb2c8}.upgrade-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.upgrade-actions button{min-height:54px;padding:8px 10px;border:1px solid rgba(66,232,209,.22);border-radius:11px;background:#0d273ae0;color:#f8fbff;text-align:left}.upgrade-actions button strong,.upgrade-actions button span{display:block}.upgrade-actions button span{margin-top:4px;color:#ffe08a;font-size:12px}.upgrade-actions button:disabled{opacity:.4}.ranking-list{display:grid;gap:8px;padding:0;margin:0;list-style:none}.ranking-list li{display:grid;grid-template-columns:38px 1fr auto 80px;gap:10px;align-items:center;padding:14px;border:1px solid rgba(66,232,209,.14);border-radius:12px;background:#081927e0}.rank-index{color:#42e8d1;font-weight:900}.ranking-list em{color:#ffe08a;font-style:normal;font-weight:900;text-align:right}.share-panel{display:grid;gap:16px;padding:20px;border:1px solid rgba(66,232,209,.18);border-radius:18px;background:#081927e6}.share-panel p{margin:0;color:#cbd9e8;line-height:1.55}.share-stat{display:grid;gap:4px;padding:16px;border-radius:12px;background:#42e8d114}.share-stat strong{color:#42e8d1;font-size:26px}.share-stat span{color:#9fb2c8}@media(max-width:520px){.stage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-header{align-items:flex-start;flex-direction:column}.destiny-grid,.roguelite-actions{grid-template-columns:1fr}}