:root{--bg: #12101a;--panel: #1d1a２8;--panel: #1d1a28;--panel2: #26222f;--line: #38323f;--text: #ece8f2;--dim: #9a92a8;--accent: #c8a04a;--wei: #4a6ebe;--shu: #c83c3c;--wu: #3ca078;--qun: #96703c;--water: #3c8ceb;--fire: #e44e38;--wood: #4ab054;--light: #e9be42;--dark: #9658d0;--heart: #e86a9e;--ok: #4ab054;--bad: #e44e38}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:PingFang TC,Microsoft JhengHei,Noto Sans TC,sans-serif;overscroll-behavior:none}body{display:flex;flex-direction:column}#app{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}#stage{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0a0810}body.in-battle #stage{display:block}body.in-battle #app{display:none}#ver{position:fixed;right:8px;bottom:6px;font-size:11px;color:#6a6278;z-index:100;pointer-events:none}.chip.ver{color:var(--dim);border-style:dashed}.wrap{max-width:560px;margin:0 auto;padding:12px 12px 40px}h1{font-size:22px;margin:6px 0 14px;letter-spacing:2px}h2{font-size:16px;margin:18px 0 8px;color:var(--accent)}.muted{color:var(--dim);font-size:14px;line-height:1.7}.topbar{position:sticky;top:0;z-index:10;background:#12101af5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;padding:8px 12px;flex-wrap:wrap}.topbar .name{font-weight:700}.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap}.tabs{display:flex;gap:6px;padding:8px 12px 0}.tabs button{flex:1;min-height:48px}button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 16px;cursor:pointer;min-height:44px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#21190a;border-color:var(--accent);font-weight:700}button.on{background:var(--accent);color:#21190a;border-color:var(--accent)}button.sm{padding:7px 12px;font-size:13px;border-radius:8px;min-height:36px}input{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;width:100%;min-height:46px;font-size:16px}label{display:block;font-size:13px;color:var(--dim);margin:10px 0 4px}form{max-width:340px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0}.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.right{margin-left:auto}.stage-item{display:flex;gap:10px;align-items:center;cursor:pointer}.stage-item.locked{opacity:.45;cursor:not-allowed}.stage-item .no{width:42px;text-align:center;font-weight:700;color:var(--accent)}.stage-item .t{font-weight:600}.stage-item .d{font-size:12px;color:var(--dim);margin-top:2px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.unit{position:relative;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:4px;text-align:center;cursor:pointer;overflow:hidden}.unit.sel{border-color:var(--accent);box-shadow:0 0 0 2px #c8a04a4d}.unit img{width:100%;aspect-ratio:1;object-fit:contain;display:block}.unit .nm{font-size:13px;font-weight:600;margin-top:2px}.unit .lv{font-size:12px;color:var(--dim)}.unit .st{position:absolute;top:3px;left:3px;font-size:10px;padding:1px 5px;border-radius:6px;background:#0000008c}.unit .lk{position:absolute;top:3px;right:3px;font-size:11px}.unit.wei{border-left:4px solid var(--wei)}.unit.shu{border-left:4px solid var(--shu)}.unit.wu{border-left:4px solid var(--wu)}.unit.qun{border-left:4px solid var(--qun)}.empty-slot{display:flex;align-items:center;justify-content:center;min-height:108px;color:var(--dim);font-size:12px}.bar{height:8px;background:#241f2c;border-radius:999px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--ok)}#toast{position:fixed;left:50%;bottom:66px;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}#toast div{background:#1c1826f7;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:14px;max-width:90vw}#toast div.bad{border-color:var(--bad);color:#ffb3a8}dialog{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;padding:16px;max-width:92vw;width:420px}dialog::backdrop{background:#0009}