:root{--u: 3;--bg: #14100c;--panel: rgba(26, 20, 16, .94);--panel2: rgba(40, 30, 22, .96);--rust: #8a4a26;--rust2: #b8683a;--sand: #e6d89a;--sand2: #cbb677;--ash: #918b86;--gold: #ffdc63;--danger: #ff3b3b;--toxic: #7fd13d;--ice: #b8ecff;--font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;--fs: clamp(12px, calc(var(--u) * 5.2px), 22px);--fs-s: clamp(11px, calc(var(--u) * 4.2px), 18px);--fs-l: clamp(16px, calc(var(--u) * 8px), 34px);--fs-xl: clamp(22px, calc(var(--u) * 12px), 52px);--p: calc(var(--u) * 3px)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--font);color:var(--sand)}#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}#game{position:absolute}#game canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}#ui{position:absolute;pointer-events:none;font-size:var(--fs);line-height:1.35;overflow:hidden}#ui>*{pointer-events:none}#ui .panel,#ui .btn,#ui .card,#ui .touch-btn,#ui .clickable{pointer-events:auto}img.px{image-rendering:pixelated;image-rendering:crisp-edges}.panel{position:absolute;background:var(--panel);border:calc(var(--u) * 1px) solid var(--rust);box-shadow:0 0 0 calc(var(--u) * 1px) #1a1210,inset 0 0 0 calc(var(--u) * 1px) #3a2618;padding:var(--p);color:var(--sand)}.panel.center{left:50%;top:50%;transform:translate(-50%,-50%)}.panel.fill{inset:0;border:none;box-shadow:none;background:#0c0907db;display:flex;flex-direction:column;align-items:center;justify-content:center}.title{font-size:var(--fs-xl);color:var(--gold);text-shadow:calc(var(--u) * 1px) calc(var(--u) * 1px) 0 #5a2e1a,0 0 calc(var(--u) * 6px) rgba(255,220,99,.35);letter-spacing:.08em;margin:0}.subtitle{font-size:var(--fs);color:var(--sand2);margin:calc(var(--p) * .5) 0 var(--p)}h2{font-size:var(--fs-l);color:var(--gold);margin:0 0 var(--p)}h3{font-size:var(--fs);color:var(--rust2);margin:var(--p) 0 calc(var(--p) * .5)}.btn{display:inline-block;background:#3a2618;color:var(--sand);border:calc(var(--u) * 1px) solid var(--rust2);padding:calc(var(--p) * .6) calc(var(--p) * 1.6);font-size:var(--fs);font-family:var(--font);cursor:pointer;margin:calc(var(--p) * .4);box-shadow:0 calc(var(--u) * 1px) 0 #1a1210;text-align:center;min-width:calc(var(--u) * 40px)}.btn:hover,.btn.focus{background:#5a3a24;color:#fff;border-color:var(--gold)}.btn:active{transform:translateY(calc(var(--u) * 1px));box-shadow:none}.btn.primary{background:var(--rust);border-color:var(--gold);color:#fff}.btn.small{font-size:var(--fs-s);padding:calc(var(--p) * .3) var(--p);min-width:0}.btn.danger{border-color:var(--danger)}.btn:disabled{opacity:.4;cursor:default}.row{display:flex;gap:var(--p);align-items:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:calc(var(--p) * .5)}.muted{color:var(--ash);font-size:var(--fs-s)}.gold{color:var(--gold)}.danger{color:var(--danger)}.toxic{color:var(--toxic)}.ice{color:var(--ice)}.icon{width:calc(var(--u) * 14px);height:calc(var(--u) * 14px);image-rendering:pixelated;vertical-align:middle}.icon.big{width:calc(var(--u) * 28px);height:calc(var(--u) * 28px)}.stars{color:var(--gold);letter-spacing:.1em;font-size:var(--fs-s)}.stars .off{color:#4a4744}.bar{position:relative;height:calc(var(--u) * 4px);background:#1a1210;border:1px solid #3a2618;overflow:hidden}.bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0}.bar.hp>i{background:#e63946}.bar.shield>i{background:var(--ice)}.bar.xp>i{background:#6fb2e6}.bar.boss>i{background:#a8181f}.scroll{overflow-y:auto;max-height:calc(var(--u) * 200px);pointer-events:auto}.scroll::-webkit-scrollbar{width:calc(var(--u) * 2px)}.scroll::-webkit-scrollbar-thumb{background:var(--rust)}.kbd{display:inline-block;border:1px solid var(--ash);padding:0 .35em;font-size:var(--fs-s);color:var(--sand2);border-radius:2px}.menu-root{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--p)}.menu-root .btn{min-width:calc(var(--u) * 90px);font-size:var(--fs-l)}.menu-footer{position:absolute;bottom:var(--p);left:0;right:0;text-align:center;color:var(--ash);font-size:var(--fs-s)}.menu-best{position:absolute;top:var(--p);right:var(--p);text-align:right;font-size:var(--fs-s);color:var(--sand2)}.chars{display:flex;gap:var(--p);justify-content:center;align-items:stretch;width:100%;padding:0 var(--p)}.card{background:var(--panel2);border:calc(var(--u) * 1px) solid var(--rust);padding:var(--p);cursor:pointer;flex:1 1 0;max-width:calc(var(--u) * 140px);display:flex;flex-direction:column;gap:calc(var(--p) * .5);transition:transform .08s;position:relative}.card:hover,.card.selected{border-color:var(--gold);transform:translateY(calc(var(--u) * -1px));box-shadow:0 0 0 calc(var(--u) * 1px) var(--gold)}.card .portrait{width:calc(var(--u) * 32px);height:calc(var(--u) * 32px);image-rendering:pixelated;border:calc(var(--u) * 1px) solid var(--rust2);background:#0d0b0a}.card .name{font-size:var(--fs-l);color:var(--gold)}.card .role{color:var(--rust2);font-size:var(--fs-s)}.card .trait{color:var(--ice);font-size:var(--fs-s)}.card .bio{color:var(--sand2);font-size:var(--fs-s);line-height:1.4}.card .lvl{position:absolute;right:var(--p);top:var(--p);font-size:var(--fs-s);color:var(--gold);background:#1a1210;padding:0 .4em;border:1px solid var(--rust)}.card.new .lvl{color:var(--toxic);border-color:var(--toxic)}.card .lines{font-size:var(--fs-s);color:var(--sand2)}.card .lines div+div{margin-top:.2em}.card .hotkey{position:absolute;left:var(--p);bottom:calc(var(--p) * .5);color:var(--ash);font-size:var(--fs-s)}.hud{position:absolute;inset:0;font-size:var(--fs-s)}.hud .xpbar{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 4px);background:#0d0b0acc}.hud .xpbar>i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#3b6fa8,#6fb2e6);width:0}.hud .xpbar>b{position:absolute;left:calc(var(--u) * 2px);top:calc(var(--u) * 5px);color:var(--ice);font-weight:400}.hud .slots{position:absolute;left:calc(var(--u) * 2px);top:calc(var(--u) * 12px);display:flex;flex-direction:column;gap:calc(var(--u) * 1px)}.hud .slotrow{display:flex;gap:calc(var(--u) * 1px)}.hud .slot{width:calc(var(--u) * 16px);height:calc(var(--u) * 16px);background:#0d0b0abf;border:1px solid #3a2618;position:relative}.hud .slot img{width:100%;height:100%;image-rendering:pixelated}.hud .slot .lv{position:absolute;right:0;bottom:0;background:#0d0b0ae6;color:var(--sand);font-size:calc(var(--fs-s) * .8);line-height:1;padding:1px 2px}.hud .slot.evo{border-color:var(--gold);box-shadow:0 0 calc(var(--u) * 2px) #ffdc6399}.hud .slot.max .lv{color:var(--gold)}.hud .timer{position:absolute;left:50%;top:calc(var(--u) * 5px);transform:translate(-50%);font-size:var(--fs-l);color:#fff;text-shadow:1px 1px 0 #000,0 0 calc(var(--u) * 2px) #000;text-align:center;line-height:1}.hud .timer small{display:block;font-size:var(--fs-s);color:var(--sand2);margin-top:.2em}.hud .stats{position:absolute;right:calc(var(--u) * 2px);top:calc(var(--u) * 5px);text-align:right;color:#fff;text-shadow:1px 1px 0 #000}.hud .stats div{display:flex;align-items:center;justify-content:flex-end;gap:.3em}.hud .stats img{width:calc(var(--u) * 10px);height:calc(var(--u) * 10px);image-rendering:pixelated}.hud .hp{position:absolute;left:calc(var(--u) * 2px);bottom:calc(var(--u) * 2px);display:flex;align-items:center;gap:calc(var(--u) * 2px)}.hud .hp img.portrait{width:calc(var(--u) * 24px);height:calc(var(--u) * 24px);image-rendering:pixelated;border:1px solid var(--rust2);background:#0d0b0a}.hud .hp .bars{width:calc(var(--u) * 70px);display:flex;flex-direction:column;gap:calc(var(--u) * 1px)}.hud .hp .bar{height:calc(var(--u) * 6px)}.hud .hp .bar.shield{height:calc(var(--u) * 3px)}.hud .hp .bar span{position:absolute;inset:0;text-align:center;color:#fff;font-size:calc(var(--fs-s) * .9);line-height:calc(var(--u) * 6px);text-shadow:1px 1px 0 #000}.hud .pets{position:absolute;left:50%;bottom:calc(var(--u) * 2px);transform:translate(-50%);display:flex;gap:calc(var(--u) * 2px)}.hud .pet{width:calc(var(--u) * 26px);background:#0d0b0acc;border:1px solid #3a2618;padding:calc(var(--u) * 1px);text-align:center;position:relative}.hud .pet img{width:calc(var(--u) * 14px);height:calc(var(--u) * 14px);image-rendering:pixelated}.hud .pet .stars{display:block;line-height:1;font-size:calc(var(--fs-s) * .8)}.hud .pet .cd{height:calc(var(--u) * 2px);background:#1a1210;margin-top:1px}.hud .pet .cd i{display:block;height:100%;background:var(--ice);width:0}.hud .pet .cdl{font-size:calc(var(--fs-s) * .75);color:var(--ash);line-height:1.1}.hud .pet.empty{opacity:.35}.hud .dash{position:absolute;right:calc(var(--u) * 2px);bottom:calc(var(--u) * 2px);text-align:right;color:var(--sand2)}.hud .dash .bar{width:calc(var(--u) * 40px);height:calc(var(--u) * 3px);margin-top:2px}.hud .dash .bar i{background:var(--ice)}.hud .bossbar{position:absolute;left:50%;top:calc(var(--u) * 24px);transform:translate(-50%);width:calc(var(--u) * 200px);text-align:center;color:#fff;text-shadow:1px 1px 0 #000}.hud .bossbar .bar{height:calc(var(--u) * 5px);border-color:var(--danger)}.hud .announce{position:absolute;left:0;right:0;top:30%;text-align:center;pointer-events:none;opacity:0;transition:opacity .3s}.hud .announce.show{opacity:1}.hud .announce b{display:block;font-size:var(--fs-xl);font-weight:400;text-shadow:calc(var(--u) * 1px) calc(var(--u) * 1px) 0 #000,0 0 calc(var(--u) * 6px) #000}.hud .announce span{display:block;font-size:var(--fs);color:var(--sand);text-shadow:1px 1px 0 #000}.hud .toast{position:absolute;left:50%;bottom:calc(var(--u) * 34px);transform:translate(-50%);background:#0d0b0acc;padding:.2em .8em;border:1px solid var(--rust);opacity:0;transition:opacity .2s;white-space:nowrap}.hud .toast.show{opacity:1}.hud .hint{position:absolute;right:calc(var(--u) * 2px);bottom:calc(var(--u) * 12px);color:var(--ash);font-size:calc(var(--fs-s) * .9);text-align:right}.touch-btn{position:absolute;width:calc(var(--u) * 26px);height:calc(var(--u) * 26px);border-radius:50%;background:#281e16b3;border:calc(var(--u) * 1px) solid var(--rust2);display:flex;align-items:center;justify-content:center;color:var(--sand);font-size:var(--fs-s)}.touch-btn:active{background:var(--rust)}.touch-btn.dash{right:calc(var(--u) * 8px);bottom:calc(var(--u) * 26px)}.touch-btn.pause{right:calc(var(--u) * 4px);top:calc(var(--u) * 14px);width:calc(var(--u) * 16px);height:calc(var(--u) * 16px)}.joy{position:absolute;width:calc(var(--u) * 40px);height:calc(var(--u) * 40px);border-radius:50%;border:calc(var(--u) * 1px) solid rgba(230,216,154,.5);background:#0d0b0a4d;transform:translate(-50%,-50%);display:none}.joy i{position:absolute;left:50%;top:50%;width:calc(var(--u) * 16px);height:calc(var(--u) * 16px);border-radius:50%;background:#e6d89a99;transform:translate(-50%,-50%)}.levelup{display:flex;gap:var(--p);justify-content:center;width:100%;padding:0 var(--p)}.levelup .card{min-height:calc(var(--u) * 90px);max-width:calc(var(--u) * 130px)}.levelup .card .head{display:flex;align-items:center;gap:calc(var(--p) * .6)}.levelup .card .head .name{font-size:var(--fs)}.petbox{display:flex;gap:var(--p);align-items:flex-start}.petbox .big{width:calc(var(--u) * 42px);height:calc(var(--u) * 42px);image-rendering:pixelated;border:calc(var(--u) * 1px) solid var(--rust2);background:#0d0b0a}.petbox .title2{font-size:var(--fs-l)}.petbox .skill{font-size:var(--fs-s);color:var(--sand2);margin:.15em 0}.petbox .skill.on{color:var(--sand)}.petbox .skill.now{color:var(--gold)}.petlist{display:flex;gap:calc(var(--p) * .6);flex-wrap:wrap}.petlist .card{max-width:calc(var(--u) * 80px);min-width:calc(var(--u) * 70px);align-items:center}.petlist .card img{width:calc(var(--u) * 28px);height:calc(var(--u) * 28px);image-rendering:pixelated}.petlist .card.active{border-color:var(--toxic)}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--p);width:100%}.stat-line{display:flex;justify-content:space-between;gap:var(--p);font-size:var(--fs-s)}.dmgbar{position:relative;height:calc(var(--u) * 5px);background:#1a1210;margin-top:2px}.dmgbar i{display:block;height:100%;background:var(--rust2)}.dmgrow{display:flex;align-items:center;gap:.4em;font-size:var(--fs-s);margin-bottom:.2em}.dmgrow img{width:calc(var(--u) * 10px);height:calc(var(--u) * 10px);image-rendering:pixelated}.dmgrow .n{margin-left:auto;color:var(--gold)}.build-icons{display:flex;gap:2px;flex-wrap:wrap}.build-icons .slot{width:calc(var(--u) * 16px);height:calc(var(--u) * 16px);border:1px solid #3a2618;position:relative;background:#0d0b0a}.build-icons .slot img{width:100%;height:100%;image-rendering:pixelated}.build-icons .slot b{position:absolute;right:0;bottom:0;font-size:calc(var(--fs-s) * .75);background:#000000b3;padding:0 2px;font-weight:400}.tabs{display:flex;gap:calc(var(--p) * .4);flex-wrap:wrap;margin-bottom:var(--p)}.tabs .btn.on{background:var(--rust);border-color:var(--gold)}.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u) * 34px),1fr));gap:calc(var(--p) * .5)}.codex-grid .entry{background:#1a1210;border:1px solid #3a2618;padding:calc(var(--p) * .4);text-align:center;cursor:pointer;font-size:calc(var(--fs-s) * .9);pointer-events:auto}.codex-grid .entry img{width:calc(var(--u) * 20px);height:calc(var(--u) * 20px);image-rendering:pixelated;display:block;margin:0 auto 2px;object-fit:contain}.codex-grid .entry.locked img{filter:brightness(0);opacity:.6}.codex-grid .entry.locked{color:var(--ash)}.codex-grid .entry.on{border-color:var(--gold)}.codex-detail{background:#1a1210;border:1px solid var(--rust);padding:var(--p);min-height:calc(var(--u) * 60px);font-size:var(--fs-s)}.codex-detail img{width:calc(var(--u) * 32px);height:calc(var(--u) * 32px);image-rendering:pixelated;float:left;margin-right:var(--p);object-fit:contain}.codex-detail h3{margin-top:0}.setting{display:grid;grid-template-columns:calc(var(--u) * 60px) 1fr calc(var(--u) * 20px);align-items:center;gap:var(--p);margin:calc(var(--p) * .5) 0;font-size:var(--fs-s)}.setting input[type=range]{width:100%;accent-color:var(--gold);pointer-events:auto}.setting input[type=checkbox]{width:calc(var(--u) * 5px);height:calc(var(--u) * 5px);accent-color:var(--gold);pointer-events:auto}.build-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--p);font-size:var(--fs-s)}.build-list .item{display:flex;gap:.5em;align-items:flex-start;background:#1a1210;border:1px solid #3a2618;padding:calc(var(--p) * .4)}.build-list .item img{width:calc(var(--u) * 14px);height:calc(var(--u) * 14px);image-rendering:pixelated;flex:none}.debug{position:absolute;right:0;top:0;bottom:0;width:calc(var(--u) * 110px);background:#0a0806f2;border-left:2px solid var(--toxic);padding:var(--p);font-size:var(--fs-s);overflow-y:auto;pointer-events:auto;color:var(--toxic)}.debug h3{color:var(--toxic)}.debug select,.debug input,.debug button{font-family:var(--font);font-size:var(--fs-s);background:#1a1210;color:var(--sand);border:1px solid var(--toxic);margin:2px;pointer-events:auto}.debug .row{gap:2px}.hidden{display:none!important}