:root{--color-bg:#0b0e12;--color-surface:#141a21;--color-surface-2:#1d2530;--color-border:#2c3a48;--color-text:#d8d2c4;--color-text-dim:#8a8676;--color-accent:#58c2a9;--color-accent-2:#d94f3d;--color-gold:#d9b45b;--color-hp:#c94848;--color-exp:#58c2a9;--wx-metal:#d9c8a0;--wx-wood:#58c2a9;--wx-water:#5b9bd9;--wx-fire:#d9663d;--wx-earth:#b08a4f;--font-pixel:"SimSun", "Songti SC", "MS Gothic", monospace;--text-xs:10px;--text-sm:12px;--text-md:14px;--text-lg:18px;--text-xl:26px;--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--duration-fast:.12s;--duration-normal:.25s;--ease-out:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);height:100%;color:var(--color-text);font-family:var(--font-pixel);-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden}#app{place-items:center;display:grid;position:fixed;inset:0}body.rotated #app{transform-origin:0 0;width:100vh;height:100vw;inset:0 auto auto 0;transform:rotate(90deg)translateY(-100%)}#game-canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#10151b}#ui-root{pointer-events:none;position:absolute;inset:0}#ui-root>*{pointer-events:auto}#ui-root>.menu,#ui-root>.hud,#ui-root>.overlay,#ui-root>.decision-modal{zoom:var(--ui-scale,1)}button{cursor:pointer;font-family:inherit}.menu,.menu-panel,.overlay-panel,.decision-modal{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu::-webkit-scrollbar{display:none}.menu-panel::-webkit-scrollbar{display:none}.overlay-panel::-webkit-scrollbar{display:none}.decision-modal::-webkit-scrollbar{display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.hud{pointer-events:none;font-size:var(--text-sm);text-shadow:1px 1px #000;position:absolute;inset:0}.hud-exp{background:#10151b;height:4px;position:absolute;top:0;left:0;right:0}.hud-exp-fill{background:var(--color-exp);width:0;height:100%}.hud-top-left{position:absolute;top:10px;left:10px}.hud-hp{background:#241518;border:1px solid #000;width:140px;height:12px;position:relative}.hud-hp-fill{background:var(--color-hp);height:100%}.hud-hp-text{text-align:center;font-size:var(--text-xs);color:#fff;line-height:12px;position:absolute;inset:0}.hud-realm{color:var(--color-text-dim);font-size:var(--text-xs);margin-top:4px}.hud-time{font-size:var(--text-lg);color:var(--color-text);position:absolute;top:10px;left:50%;transform:translate(-50%)}.hud-time-late{color:var(--color-accent-2)}.hud-kills{color:var(--color-text-dim);position:absolute;top:10px;right:10px}.hud-slots{flex-wrap:wrap;gap:3px;max-width:60%;display:flex;position:absolute;bottom:10px;left:10px}.slot{background:var(--color-surface);border:1px solid var(--color-border);text-align:center;width:28px;height:28px;line-height:28px;font-size:var(--text-md);position:relative}.slot i{color:var(--color-gold);font-size:10px;font-style:normal;position:absolute;bottom:0;right:1px}.slot-el-metal{border-color:var(--wx-metal)}.slot-el-wood{border-color:var(--wx-wood)}.slot-el-water{border-color:var(--wx-water)}.slot-el-fire{border-color:var(--wx-fire)}.slot-el-earth{border-color:var(--wx-earth)}.slot-pill{border-color:var(--color-text-dim);border-radius:50%}.slot-evolved{box-shadow:0 0 6px var(--color-gold);border-color:var(--color-gold)}.hud-dodge{text-align:center;background:var(--color-surface);border:1px solid var(--color-border);min-width:52px;color:var(--color-text-dim);font-size:var(--text-xs);padding:4px 6px;position:absolute;bottom:10px;right:10px}.hud-dodge.ready{color:var(--color-accent);border-color:var(--color-accent)}.hud-boss{width:46%;display:none;position:absolute;bottom:42px;left:50%;transform:translate(-50%)}.hud-boss.show{display:block}.hud-boss-name{text-align:center;color:var(--color-accent-2);font-size:var(--text-xs);margin-bottom:2px}.hud-boss-bar{background:#241518;border:1px solid #000;height:6px}.hud-boss-fill{background:linear-gradient(90deg,#8a2f2f,#c94848);height:100%}.hud-trial,.hud-suppress{border:1px solid var(--color-accent);color:var(--color-accent);font-size:var(--text-xs);background:#14171cd9;padding:3px 10px;display:none;position:absolute;top:40px;left:50%;transform:translate(-50%)}.hud-trial.show,.hud-suppress.show{display:block}.hud-suppress{border-color:var(--color-gold);color:var(--color-gold);top:62px}.hud-banner{text-align:center;font-size:var(--text-xl);letter-spacing:.4em;opacity:0;transition:opacity var(--duration-normal) var(--ease-out);position:absolute;top:30%;left:0;right:0}.hud-banner.show{opacity:1}.decision-modal{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-3);background:#06080bb8;flex-direction:column;display:none;position:absolute;inset:0}.decision-modal.show{display:flex}.decision-modal h2{font-size:var(--text-xl);letter-spacing:.5em;color:var(--color-accent);text-shadow:1px 1px #000}.decision-desc{color:var(--color-text-dim);font-size:var(--text-md);text-align:center;max-width:520px}.decision-cards{gap:var(--space-3);flex-wrap:wrap;justify-content:center;max-width:860px;display:flex}.decision-card{background:var(--color-surface);border:1px solid var(--color-border);width:230px;min-height:170px;color:var(--color-text);text-align:center;transition:transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast);flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;padding:34px 16px 26px;display:flex;position:relative}.decision-card:hover,.decision-card:focus-visible{border-color:var(--color-accent);outline:none;transform:translateY(-4px);box-shadow:0 6px 18px #00000059}.decision-card strong{letter-spacing:.1em;font-size:20px}.decision-card p{font-size:var(--text-md);color:var(--color-text-dim);line-height:1.7}.card-tag{font-size:var(--text-sm);background:var(--color-surface-2);color:var(--color-text-dim);letter-spacing:.1em;padding:5px 0;position:absolute;top:0;left:0;right:0}.card-key{font-size:var(--text-sm);color:var(--color-text-dim);position:absolute;bottom:4px;right:8px}.card-el-metal{border-top:2px solid var(--wx-metal)}.card-el-wood{border-top:2px solid var(--wx-wood)}.card-el-water{border-top:2px solid var(--wx-water)}.card-el-fire{border-top:2px solid var(--wx-fire)}.card-el-earth{border-top:2px solid var(--wx-earth)}.card-pill{border-top:2px solid var(--color-text-dim)}.card-break{border-top:2px solid var(--color-accent)}.card-suppress{border-top:2px solid var(--color-gold)}.card-mutation{border-top:2px solid var(--color-accent-2)}.decision-reroll{font-size:var(--text-md);border:1px solid var(--color-gold);color:var(--color-gold);background:0 0;padding:9px 26px}.decision-reroll:hover{background:#d9b45b26}.overlay{background:#06080bd9;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.overlay.show{display:flex}.overlay-panel{width:min(480px,92%);max-height:88%;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);text-align:center;overflow-y:auto}.overlay-panel h1{font-size:var(--text-xl);letter-spacing:.4em;margin-bottom:var(--space-2)}.result-panel.won h1{color:var(--color-gold)}.result-panel.lost h1{color:var(--color-accent-2)}.result-desc{color:var(--color-text-dim);font-size:var(--text-sm);margin-bottom:var(--space-3)}.result-stats{justify-content:center;gap:var(--space-3);margin-bottom:var(--space-3);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.dmg-breakdown{text-align:left;margin-bottom:var(--space-3)}.dmg-breakdown h3{font-size:var(--text-sm);color:var(--color-text-dim);margin-bottom:var(--space-2)}.dmg-row{font-size:var(--text-xs);align-items:center;gap:6px;margin-bottom:3px;display:flex}.dmg-name{text-align:right;width:80px}.dmg-bar{background:var(--color-surface-2);flex:1;height:6px}.dmg-bar div{background:var(--color-accent);height:100%}.dmg-pct{width:44px;color:var(--color-text-dim)}.result-unlocks{margin-bottom:var(--space-3);padding:var(--space-2);color:var(--color-gold);font-size:var(--text-xs);background:#d9b45b0f;border:1px solid #d9b45b66;line-height:2}.overlay-actions{gap:var(--space-2);justify-content:center;display:flex}.overlay-actions button{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);font-size:var(--text-sm);padding:8px 22px}.overlay-actions .btn-primary{border-color:var(--color-accent);color:var(--color-accent)}.overlay-actions button:hover{border-color:var(--color-text)}.build-summary{text-align:left;font-size:var(--text-xs);color:var(--color-text-dim);margin-bottom:var(--space-3);line-height:1.8}.touch-ui{pointer-events:none;display:none;position:absolute;inset:0}.touch-ui.active{display:block}.touch-zone{pointer-events:auto;touch-action:none;width:60%;position:absolute;top:15%;bottom:0;left:0}.touch-stick{pointer-events:none;border:2px solid #d8d2c440;border-radius:50%;width:80px;height:80px;margin:-40px 0 0 -40px;display:none;position:fixed}.touch-stick.active{display:block}.touch-nub{background:#58c2a980;border-radius:50%;width:28px;height:28px;margin:-14px 0 0 -14px;position:absolute;top:50%;left:50%}.touch-dodge{border:2px solid var(--color-accent);width:64px;height:64px;color:var(--color-accent);font-size:var(--text-xs);pointer-events:auto;touch-action:none;background:#141a21b3;border-radius:50%;position:absolute;bottom:46px;right:14px}.touch-dodge:active{background:#58c2a94d}.touch-pause{border:2px solid var(--color-border);width:48px;height:48px;color:var(--color-text-dim);font-size:var(--text-xs);pointer-events:auto;touch-action:none;background:#141a21b3;border-radius:50%;position:absolute;bottom:126px;right:22px}.touch-pause:active{border-color:var(--color-accent);color:var(--color-accent)}.menu{background:radial-gradient(at 50% 120%,#58c2a914,#0000 60%),linear-gradient(#0b0e12 0%,#10161c 100%);justify-content:center;align-items:center;display:none;position:absolute;inset:0;overflow-y:auto}.menu.show{display:flex}body.rotated .menu{align-items:safe center}body.rotated .menu-panel{max-height:100%}body.rotated .menu-title{column-gap:var(--space-3);text-align:left;grid-template-columns:auto 1fr;align-items:center;display:grid}body.rotated .menu-title .title-sub,body.rotated .menu-title .title-main,body.rotated .menu-title .title-stats,body.rotated .menu-title .title-controls{grid-column:2;margin:2px 0}body.rotated .menu-title .title-hero{grid-area:1/1/span 4;max-height:120px;margin:0;animation:none}body.rotated .menu-title .title-main{font-size:26px}body.rotated .menu-title .title-nav{flex-flow:wrap;grid-column:2;justify-content:flex-start;gap:6px;margin:6px 0 2px}body.rotated .menu-title .title-nav button{letter-spacing:.2em;text-indent:.2em;width:132px;padding:7px 0}body.rotated .menu-title .title-controls{display:none}.menu-panel{width:min(560px,94%);max-height:92%;padding:var(--space-4);text-align:center;overflow-y:auto}.menu-wide{width:min(720px,96%)}.menu-panel h2{font-size:var(--text-lg);letter-spacing:.5em;color:var(--color-accent);margin-bottom:var(--space-3)}.menu-panel h3{font-size:var(--text-sm);color:var(--color-text-dim);letter-spacing:.3em;margin:var(--space-3) 0 var(--space-2);text-align:left}.title-sub{color:var(--color-text-dim);letter-spacing:.6em;font-size:var(--text-sm)}.title-main{letter-spacing:.25em;margin:var(--space-2) 0 var(--space-3);color:var(--color-text);text-shadow:0 0 24px #58c2a959,2px 2px #000;font-size:clamp(34px,8vw,56px)}.title-hero{image-rendering:pixelated;width:auto;max-height:28vh;margin-bottom:var(--space-3);animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.title-nav{gap:var(--space-2);margin-bottom:var(--space-3);flex-direction:column;align-items:center;display:flex}.title-nav button{width:220px;font-size:var(--text-md);letter-spacing:.4em;text-indent:.4em;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);transition:border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out);padding:10px 0}.title-nav button:hover{border-color:var(--color-accent);transform:translateY(-2px)}.title-nav .btn-primary{border-color:var(--color-accent);color:var(--color-accent)}.title-stats{color:var(--color-text-dim);font-size:var(--text-xs)}.title-controls{color:var(--color-text-dim);font-size:var(--text-xs);margin-top:var(--space-2);opacity:.7}.loadout-cards{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.loadout-card{width:160px;padding:var(--space-3) var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);transition:transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast);flex-direction:column;align-items:center;gap:8px;display:flex}.loadout-card img{image-rendering:pixelated}.loadout-card:not(.locked):hover{border-color:var(--color-accent);transform:translateY(-3px)}.loadout-card.locked{opacity:.55;cursor:not-allowed}.loadout-card p{font-size:var(--text-xs);color:var(--color-text-dim);line-height:1.6}.garden-drops{color:var(--color-gold);font-size:var(--text-sm);margin-bottom:var(--space-3)}.herb-grid{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));display:grid}.herb-card{padding:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);text-align:left;flex-direction:column;gap:6px;display:flex}.herb-card p{font-size:var(--text-xs);color:var(--color-text-dim);flex:1;line-height:1.6}.herb-pips{gap:3px;display:flex}.herb-pips i{background:var(--color-surface-2);border:1px solid var(--color-border);width:14px;height:5px}.herb-pips i.on{background:var(--color-accent);border-color:var(--color-accent)}.herb-card button{background:var(--color-surface-2);border:1px solid var(--color-gold);color:var(--color-gold);font-size:var(--text-xs);padding:5px 0}.herb-card button:disabled{border-color:var(--color-border);color:var(--color-text-dim);cursor:default}.codex-grid{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));display:grid}.codex-cell{padding:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);flex-direction:column;align-items:center;gap:5px;min-height:90px;display:flex}.codex-cell img{image-rendering:pixelated;object-fit:contain;max-width:100%;max-height:40px}.codex-cell.evo{border-color:#d9b45b66}.codex-cell.unknown{opacity:.5}.codex-cell p{color:var(--color-text-dim);font-size:10px;line-height:1.5}.ach-list{text-align:left;flex-direction:column;gap:6px;display:flex}.ach-row{background:var(--color-surface);border:1px solid var(--color-border);opacity:.55;align-items:center;gap:10px;padding:8px 10px;display:flex}.ach-row.done{opacity:1;border-color:#d9b45b80}.ach-mark{color:var(--color-gold);font-size:var(--text-md);width:16px}.ach-row p{font-size:var(--text-xs);color:var(--color-text-dim)}.settings-list{gap:var(--space-3);text-align:left;flex-direction:column;align-items:stretch;display:flex}.settings-list label{justify-content:space-between;align-items:center;gap:var(--space-3);font-size:var(--text-sm);display:flex}.settings-list input[type=range]{width:180px;accent-color:var(--color-accent)}.settings-list input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-accent)}.menu-back{margin-top:var(--space-3);border:1px solid var(--color-border);color:var(--color-text-dim);background:0 0;padding:8px 26px}.menu-back:hover{border-color:var(--color-text);color:var(--color-text)}.menu-toast{background:var(--color-surface-2);border:1px solid var(--color-gold);color:var(--color-gold);font-size:var(--text-sm);opacity:0;transition:all var(--duration-normal) var(--ease-out);pointer-events:none;padding:8px 18px;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px)}.menu-toast.show{opacity:1;transform:translate(-50%)}