:root{--bg: #10210f;--panel: #1b2a1a;--panel-2: #24371f;--line: #0a120a;--ink: #f2f5e4;--muted: #a3b596;--green: #79d34c;--green-d: #3f9e2c;--gold: #ffd23e;--gold-d: #c6922a;--red: #e0404a;--blue: #5ab4ff;--purple: #c27bff;--orange: #ffb338;--font: "Zpix", "Fusion Pixel", "Unifont", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}img{image-rendering:pixelated}.game-root{position:fixed;top:0;right:0;bottom:0;left:0}.game-root canvas{display:block;image-rendering:pixelated}.ui-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}button{font-family:inherit;color:inherit;cursor:pointer}.pixel-box{background:var(--panel);box-shadow:0 0 0 3px var(--line),0 0 0 5px #4b6a3f,0 0 0 8px var(--line),0 8px 0 8px #00000059}.btn{position:relative;border:0;padding:10px 18px;font-size:16px;font-weight:700;background:var(--green-d);color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.55);box-shadow:inset 0 3px #ffffff47,inset 0 -4px #00000052,0 0 0 3px var(--line);transition:transform .06s,filter .1s;pointer-events:auto}.btn:hover:not(:disabled){filter:brightness(1.2);transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 -2px #ffffff26,inset 0 4px #00000052,0 0 0 3px var(--line)}.btn:disabled{filter:grayscale(.85) brightness(.65);cursor:not-allowed}.btn.gold{background:var(--gold-d)}.btn.red{background:#a92c34}.btn.blue{background:#2e6ea8}.btn.ghost{background:#33402f}.btn.small{padding:6px 10px;font-size:13px}.screen{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;display:flex;flex-direction:column;background:#0a120adb;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));animation:fadeIn .15s ease-out}.screen-head{display:flex;align-items:center;gap:12px;padding:4px 2px 10px;flex-wrap:wrap}.screen-head h2{margin:0;font-size:24px;color:var(--gold);text-shadow:2px 2px 0 #000}.screen-head .spacer{flex:1}.screen-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding:8px 8px 16px}.screen-body::-webkit-scrollbar{width:10px}.screen-body::-webkit-scrollbar-thumb{background:#4b6a3f}.gold-tag{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:700;font-size:18px;text-shadow:2px 2px 0 #000}.muted{color:var(--muted)}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.tabs .btn{background:#33402f}.tabs .btn.on{background:var(--green-d)}@keyframes fadeIn{0%{opacity:0}}@keyframes popIn{0%{transform:scale(.82);opacity:0}}.menu{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3vh 16px 2vh}.logo{text-align:center;animation:popIn .35s ease-out}.logo h1{margin:0;font-size:clamp(34px,7.5vh,68px);letter-spacing:6px;color:var(--green);text-shadow:3px 0 0 #000,-3px 0 0 #000,0 3px 0 #000,0 -3px 0 #000,5px 6px 0 #1d5418}.logo .en{font-size:clamp(12px,2.4vh,18px);color:var(--gold);letter-spacing:3px;text-shadow:2px 2px 0 #000}.slogan{margin-top:6px;font-size:clamp(12px,2.3vh,16px);color:#fff;text-shadow:2px 2px 0 #000}.menu-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;pointer-events:auto}.menu-actions .btn{min-width:124px}.menu-actions .btn.primary{width:100%;max-width:300px;font-size:22px;padding:13px 20px;background:var(--gold-d);flex-basis:100%}.menu-row{display:contents}.menu-foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:13px;color:#dfe8d2;text-shadow:1px 1px 0 #000;margin-top:8px}.select-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.opt-card{position:relative;text-align:left;border:0;background:var(--panel-2);padding:10px;box-shadow:0 0 0 3px var(--line);transition:transform .08s;display:flex;flex-direction:column;gap:4px;min-height:92px;pointer-events:auto}.opt-card:hover:not(.locked){transform:translateY(-3px);background:#2f4628}.opt-card.on{box-shadow:0 0 0 3px var(--gold),0 0 0 6px var(--line);background:#38522c}.opt-card.locked{filter:grayscale(.7);opacity:.72}.opt-card .row{display:flex;gap:8px;align-items:center}.opt-card .name{font-weight:700;font-size:15px;color:#fff}.opt-card .desc{font-size:12px;color:var(--muted);line-height:1.45}.opt-card .lock-tip{font-size:12px;color:var(--orange)}.stat-line{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:11px;color:#cfe0bd}.step-title{margin:12px 0 8px;color:var(--green);font-size:17px;text-shadow:2px 2px 0 #000}.start-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:8px}.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;pointer-events:auto}.check input{width:18px;height:18px;accent-color:var(--green-d)}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-size:13px;text-shadow:1px 1px 0 #000,-1px 1px 0 #000;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.hud-top{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:min(60vw,560px);display:flex;flex-direction:column;align-items:center;gap:3px}.hud-stats{display:flex;gap:12px;align-items:baseline;justify-content:center;flex-wrap:wrap;background:#00000073;padding:2px 10px}.hud-time{font-size:22px;font-weight:700;color:#fff}.hud-stats b{color:var(--gold)}.market{font-weight:700}.market.up{color:#4ce07a}.market.down{color:#ff5a5a}.boss-bar{width:100%;background:#0009;box-shadow:0 0 0 2px #000;position:relative;height:16px;animation:popIn .25s ease-out}.boss-bar .fill{height:100%;background:linear-gradient(#ff5a4a 0,#ff5a4a 50%,#c92a30 50%,#c92a30);transition:width .12s linear}.boss-bar span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:12px;line-height:16px}.event-chip{background:#78288ccc;padding:1px 10px;font-size:12px}.hud-left{position:absolute;top:max(6px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));width:min(23vw,220px);display:flex;flex-direction:column;gap:4px}.bar{position:relative;height:15px;background:#000000a6;box-shadow:0 0 0 2px #000}.bar .fill{height:100%}.bar.hp .fill{background:linear-gradient(#ff6a70 0,#ff6a70 50%,#d0303a 50%,#d0303a)}.bar.xp .fill{background:linear-gradient(#7ce4ff 0,#7ce4ff 50%,#2e9fd8 50%,#2e9fd8)}.bar.ult .fill{background:linear-gradient(#e0a6ff 0,#e0a6ff 50%,#9a4fe0 50%,#9a4fe0)}.bar.ult.ready .fill{background:linear-gradient(#ffe67a 0,#ffe67a 50%,#ffb338 50%,#ffb338);animation:pulse .6s infinite alternate}@keyframes pulse{to{filter:brightness(1.45)}}.bar span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:11px;line-height:15px}.status-row{display:flex;gap:6px;flex-wrap:wrap;font-size:12px}.status-row .tag{background:#0000008c;padding:0 6px}.hud-right{position:absolute;top:max(6px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:118px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.touch .hud-right{top:50px}.chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end}.chip{position:relative;width:34px;height:34px;background:#0000008c;box-shadow:0 0 0 2px #000}.chip img{width:100%;height:100%}.chip em{position:absolute;right:1px;bottom:-2px;font-style:normal;font-size:11px;font-weight:700}.chip.small{width:26px;height:26px}.chip.evolved{box-shadow:0 0 0 2px var(--gold)}.chip.ready{animation:readyGlow .7s infinite alternate}@keyframes readyGlow{to{box-shadow:0 0 0 2px #3fe0c8,0 0 8px 2px #3fe0c8}}.evo-list{display:flex;flex-direction:column;gap:3px;width:118px;margin-top:2px}.evo-item{font-size:10px;background:#0000008c;padding:1px 3px}.evo-item .evo-bar{height:3px;background:#ffffff29;margin-top:1px}.evo-item .evo-bar i{display:block;height:100%}.evo-item.blocked{opacity:.55}.hud-bottom{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:8px;align-items:center;pointer-events:none}.ult-btn{pointer-events:auto;background:#4d2a7a;min-width:120px}.ult-btn.ready{background:var(--gold-d);animation:pulse .5s infinite alternate}.pause-btn{pointer-events:auto}.touch .hud-bottom{display:contents}.touch .ult-btn{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:92px;height:92px;min-width:0;padding:4px;border-radius:50%;font-size:13px;opacity:.92}.touch .pause-btn{position:absolute;right:max(8px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top));width:44px;height:38px;padding:0}.touch-zone{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;touch-action:none}.joy-base{position:absolute;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:#ffffff1a;box-shadow:inset 0 0 0 3px #ffffff73;pointer-events:none}.joy-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#ffffff6b;box-shadow:inset 0 0 0 3px #ffffffb3}.upgrade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;background:#0000009e;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:10px;animation:fadeIn .12s}.upgrade h2{margin:0;color:var(--gold);font-size:clamp(20px,4.5vh,30px);text-shadow:3px 3px 0 #000}.upgrade .quip{color:#dfe8d2;font-size:13px;text-shadow:1px 1px 0 #000}.cards{display:flex;gap:16px;justify-content:center;width:100%;max-width:880px}.card{flex:1 1 0;max-width:270px;min-width:0;border:0;background:#223320;color:#fff;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;box-shadow:0 0 0 3px #000,0 0 0 6px var(--rc, #8a9a80),0 0 0 9px #000;transition:transform .1s,filter .1s;animation:popIn .2s ease-out backwards}.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:hover,.card:focus-visible{transform:translateY(-8px) scale(1.03);filter:brightness(1.18);outline:none}.card.picked{transform:scale(1.1);filter:brightness(1.5)}.card.dim{opacity:.35;transform:scale(.94)}.card.common{--rc: #9aa890}.card.rare{--rc: #5ab4ff}.card.epic{--rc: #c27bff}.card.legend{--rc: #ffb338}.card img{width:clamp(44px,11vh,72px);height:clamp(44px,11vh,72px)}.card .type{font-size:11px;color:var(--rc)}.card .cname{font-size:clamp(15px,3vh,19px);font-weight:700}.card .lv{font-size:12px;color:var(--gold)}.card .cdesc{font-size:12px;color:#d4dfc8;line-height:1.45;min-height:34px}.card .hint{font-size:11px;color:#7dfff0}.card .rarity{font-size:11px;font-weight:700;color:var(--rc)}.banner-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50}.big-banner{position:absolute;left:0;right:0;top:22%;text-align:center;padding:12px 16px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.72) 22%,rgba(0,0,0,.72) 78%,transparent);animation:bannerIn .28s ease-out}@keyframes bannerIn{0%{transform:scaleY(0);opacity:0}}.big-banner .t{font-size:clamp(22px,5.5vh,42px);font-weight:700;text-shadow:3px 3px 0 #000;color:#fff}.big-banner .s{font-size:clamp(12px,2.6vh,17px);color:#e5ecd9;margin-top:2px;text-shadow:2px 2px 0 #000}.big-banner.event .t{color:var(--gold)}.big-banner.boss .t{color:#ff5a4a}.big-banner.evo .t{color:#7dfff0}.big-banner.ult .t{color:#fff;font-size:clamp(30px,8vh,60px)}.big-banner.warn .t{color:#ffb338;font-size:clamp(15px,3.4vh,24px)}.toasts{position:absolute;bottom:62px;left:max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:4px;max-width:min(44vw,360px)}.touch .toasts{left:auto;right:120px;bottom:12px;align-items:flex-end}.toast{display:flex;gap:6px;align-items:center;background:#000000b3;padding:4px 8px;font-size:12px;animation:toastIn .18s ease-out;border-left:3px solid #fff}@keyframes toastIn{0%{transform:translate(-20px);opacity:0}}.toast img{width:30px;height:36px;object-fit:contain}.toast .tt{font-weight:700}.toast .ts{font-size:11px;color:#cfdabf}.toast.ach{border-color:var(--gold)}.toast.ach .tt{color:var(--gold)}.toast.codex{border-color:#7dfff0;animation:codexIn .4s cubic-bezier(.2,1.4,.4,1)}@keyframes codexIn{0%{transform:scale(.4);opacity:0}}.toast.quip{border-color:var(--green);color:#dfe8d2}.toast.chest{border-color:var(--orange)}.toast.result{border-color:var(--blue)}.modal-wrap{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000ad;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:60;padding:12px}.modal{padding:18px 22px;width:min(92vw,520px);max-height:92vh;overflow-y:auto;touch-action:pan-y;animation:popIn .15s ease-out}.modal h3{margin:0 0 10px;color:var(--gold);font-size:22px;text-align:center}.modal .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 14px;font-size:13px}.kv div{display:flex;justify-content:space-between;gap:8px}.kv b{color:var(--gold)}.result{align-items:center;background:#080e089e}.result .sheet{width:min(96vw,860px);padding:14px 18px;display:flex;flex-direction:column;min-height:0;max-height:100%;overflow-y:auto;touch-action:pan-y}.result h2{margin:0;text-align:center;font-size:clamp(22px,5vh,34px);text-shadow:3px 3px 0 #000}.result h2.win{color:var(--gold)}.result h2.lose{color:#ff6a60}.result .line{text-align:center;color:#dfe8d2;font-size:13px;margin:2px 0 8px}.result-main{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}.rating{font-size:clamp(46px,13vh,88px);font-weight:700;line-height:1;color:var(--gold);text-shadow:4px 4px 0 #000;animation:popIn .4s cubic-bezier(.2,1.6,.4,1);min-width:90px;text-align:center}.titles{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}.titles span{background:#5a2a7a;padding:2px 8px;font-size:12px}.titles span:first-child{background:var(--gold-d)}.result-list{margin-top:8px;font-size:12px;display:flex;flex-wrap:wrap;gap:4px}.result-list span{background:#ffffff14;padding:2px 6px}.detail-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}.detail-table td,.detail-table th{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.detail-table .num{text-align:right;color:var(--gold)}.mini-bar{height:5px;background:#ffffff1f}.mini-bar i{display:block;height:100%;background:var(--green)}.book-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.book-card{background:var(--panel-2);padding:10px;box-shadow:0 0 0 3px var(--line);display:flex;gap:10px;min-height:112px}.book-card .pic{flex:0 0 64px;height:80px;display:flex;align-items:center;justify-content:center;background:#0000004d}.book-card .pic img{max-width:62px;max-height:76px;object-fit:contain}.silhouette{filter:brightness(0)}.book-card .info{min-width:0;font-size:12px;line-height:1.5;color:#cfdabf}.book-card .info h4{margin:0 0 2px;font-size:15px;color:#fff}.book-card .info b{color:var(--gold);font-weight:400}.shop-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.shop-card{background:var(--panel-2);padding:10px;box-shadow:0 0 0 3px var(--line);display:flex;flex-direction:column;gap:6px}.shop-card .top{display:flex;gap:8px;align-items:center}.shop-card img{width:42px;height:42px}.shop-card .name{font-weight:700;font-size:15px}.shop-card .desc{font-size:12px;color:var(--muted)}.pips{display:flex;gap:2px;flex-wrap:wrap}.pips i{width:12px;height:7px;background:#ffffff24}.pips i.on{background:var(--green)}.ach-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.ach{background:var(--panel-2);padding:8px 10px;box-shadow:0 0 0 3px var(--line);font-size:12px;color:var(--muted)}.ach h4{margin:0;font-size:14px;color:#8a9a80}.ach.done{background:#38522c}.ach.done h4{color:var(--gold)}.settings-list{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel-2);padding:10px 12px;box-shadow:0 0 0 3px var(--line);font-size:14px}.set-row input[type=range]{width:180px;accent-color:var(--green-d);touch-action:pan-x}.set-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--green-d)}.rotate-tip{position:absolute;top:0;right:0;bottom:0;left:0;background:#10210f;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;pointer-events:auto;text-align:center;padding:24px;font-size:18px}.rotate-icon{font-size:60px;animation:spin 1.8s ease-in-out infinite}@keyframes spin{50%{transform:rotate(-90deg)}}@media(max-height:460px){.screen-head{padding-bottom:4px}.screen-head h2{font-size:19px}.btn{padding:7px 12px;font-size:14px}.menu-actions .btn{min-width:96px}.menu-actions .btn.primary{font-size:17px;padding:8px 14px}.hud-time{font-size:17px}.hud-stats{gap:8px;font-size:11px}.card{padding:6px;gap:2px}.card .cdesc{min-height:0}.chip{width:28px;height:28px}.chip.small{width:22px;height:22px}.hud-right,.evo-list{width:104px}}