:root{--ink: #0b2a33;--slate: #17242a;--slate-2: #1f3138;--slate-3: #27404a;--teal: #2fd3c6;--teal-soft: rgba(47, 211, 198, .16);--mint: #7be495;--coral: #ff7a59;--coral-soft: rgba(255, 122, 89, .18);--ember: #d94f3d;--violet: #5b4fcf;--violet-soft: rgba(91, 79, 207, .22);--ivory: #f2f4ef;--text: #e6edea;--muted: #93a5a3;--line: rgba(242, 244, 239, .1);--line-2: rgba(242, 244, 239, .18);--font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;--font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;--font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;--topbar-h: 58px;--tabs-h: 62px;--sab: env(safe-area-inset-bottom, 0px);--sat: env(safe-area-inset-top, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--ink);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.35;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;touch-action:manipulation}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}input,textarea{font:inherit}h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.01em;text-wrap:balance}.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.teal{color:var(--teal)}.coral{color:var(--coral)}.mint{color:var(--mint)}.violet{color:#a198ff}.ember{color:#ff7d6c}.app{position:relative;height:100%;display:flex;flex-direction:column;background:var(--ink)}.scene-host{position:absolute;inset:0}.scene-host canvas{display:block;width:100%!important;height:100%!important}.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column}.hud>*{pointer-events:auto}.hud-col{width:100%;max-width:560px;margin:0 auto}.topbar{padding:calc(var(--sat) + 8px) 12px 8px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(to bottom,rgba(6,20,24,.92),rgba(6,20,24,.55) 70%,transparent)}.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.era-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#17242ad9;border:1px solid var(--line-2);font-family:var(--font-display);font-weight:600;font-size:13px}.era-chip .act{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.icon-btn{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#17242ad9;border:1px solid var(--line-2);color:var(--text);font-size:16px}.icon-btn.active{border-color:var(--teal);color:var(--teal)}.res-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.res-pill{display:flex;flex-direction:column;padding:6px 10px;border-radius:12px;min-width:0;background:#17242ad9;border:1px solid var(--line)}.res-pill .label{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:6px}.res-pill .dot{width:8px;height:8px;border-radius:50%;display:inline-block}.res-pill .value{font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.res-pill .rate{font-size:11px;color:var(--mint)}.res-pill.evo .value{color:#a198ff}.res-pill.evo .rate{color:var(--muted)}.scene-ui{flex:1;position:relative;pointer-events:none}.scene-ui>*{pointer-events:none}.frenzy-bar{position:absolute;left:50%;bottom:14px;transform:translate(-50%);width:min(70%,320px);height:12px;border-radius:999px;background:#17242acc;border:1px solid var(--line-2);overflow:hidden}.frenzy-bar .fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--coral));transition:width .15s linear}.frenzy-bar.active .fill{background:linear-gradient(90deg,var(--coral),var(--ember));animation:pulse .5s ease-in-out infinite alternate}.frenzy-label{position:absolute;left:50%;bottom:30px;transform:translate(-50%);font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.frenzy-label.active{color:var(--coral);font-size:15px;animation:pulse .4s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.75}to{opacity:1}}.queue-chips{position:absolute;left:10px;top:8px;display:flex;flex-direction:column;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:12px;background:#17242ad9;border:1px solid var(--line-2)}.chip .bar{width:60px;height:4px;background:var(--slate-3);border-radius:2px;overflow:hidden}.chip .bar i{display:block;height:100%;background:var(--teal)}.shield-chip{position:absolute;right:10px;top:8px}.tap-hint{position:absolute;left:50%;top:66%;transform:translate(-50%);color:var(--text);font-family:var(--font-display);font-weight:700;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,.6);animation:bob 1.2s ease-in-out infinite;pointer-events:none}@keyframes bob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-8px)}}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px 8px calc(var(--sab) + 6px);background:#061418f5;border-top:1px solid var(--line)}.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;position:relative}.tab .ico{font-size:20px;line-height:1}.tab.active{color:var(--teal);background:var(--teal-soft)}.tab .badge{position:absolute;top:2px;right:14%;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--coral);color:#1a0a06;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}.sheet-backdrop{position:absolute;left:0;right:0;top:0;bottom:calc(var(--tabs-h) + var(--sab));background:#040e1259}.sheet{position:absolute;left:0;right:0;bottom:calc(var(--tabs-h) + var(--sab));max-height:70%;display:flex;flex-direction:column;background:#0f1a1ef7;border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px #00000080;animation:sheet-in .22s cubic-bezier(.2,.8,.2,1)}@keyframes sheet-in{0%{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;border-bottom:1px solid var(--line)}.sheet-head h2{font-size:19px;font-weight:800}.sheet-head .sub{font-size:12px;color:var(--muted)}.sheet-body{overflow-y:auto;padding:10px 12px 16px;-webkit-overflow-scrolling:touch}.sheet-body::-webkit-scrollbar{width:6px}.sheet-body::-webkit-scrollbar-thumb{background:var(--slate-3);border-radius:3px}.row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--slate);border:1px solid var(--line);margin-bottom:8px}.row.locked{opacity:.55}.row .glyph{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--slate-2);position:relative;overflow:hidden}.row .glyph img{width:100%;height:100%;object-fit:contain}.row .glyph .count{position:absolute;right:2px;bottom:1px;font-size:11px;font-weight:800;font-family:var(--font-display);background:#061418d9;padding:0 4px;border-radius:6px}.row .main{min-width:0}.row .title{font-family:var(--font-display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px}.row .desc{font-size:12.5px;color:var(--muted);margin-top:1px}.row .stat{font-size:12px;color:var(--mint);margin-top:2px}.buy-col{display:flex;flex-direction:column;align-items:stretch;gap:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:10px;font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1;white-space:nowrap;background:var(--slate-3);border:1px solid var(--line-2);color:var(--text);transition:transform .08s ease,background .15s ease}.btn:active{transform:scale(.96)}.btn.primary{background:var(--teal);color:#06211f;border-color:transparent}.btn.coral{background:var(--coral);color:#2a0d06;border-color:transparent}.btn.violet{background:var(--violet);color:#fff;border-color:transparent}.btn.ghost{background:transparent}.btn.small{padding:6px 9px;font-size:12.5px}.btn.block{width:100%}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn .cost{font-family:var(--font-body);font-weight:600;font-size:12px;opacity:.85}.btn.can{box-shadow:0 0 0 1px #2fd3c659,0 0 16px #2fd3c640}.seg{display:inline-flex;background:var(--slate-2);border-radius:10px;padding:3px;gap:2px}.seg button{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;color:var(--muted)}.seg button.on{background:var(--slate-3);color:var(--text)}.section-title{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 4px 8px;display:flex;align-items:center;justify-content:space-between}.card{padding:12px;border-radius:12px;background:var(--slate);border:1px solid var(--line);margin-bottom:8px}.card h3{font-size:15px;margin-bottom:4px}.card p{margin:0;font-size:13px;color:var(--muted)}.progress{height:8px;border-radius:4px;background:var(--slate-3);overflow:hidden;margin-top:8px}.progress i{display:block;height:100%;background:var(--teal)}.progress.violet i{background:var(--violet)}.kv{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line)}.kv:last-child{border-bottom:0}.kv b{font-family:var(--font-display)}.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--slate-3)}.pill.good{background:#7be4952e;color:var(--mint)}.pill.bad{background:#d94f3d38;color:#ff9a8a}.pill.violet{background:var(--violet-soft);color:#b8b0ff}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stepper{display:inline-flex;align-items:center;gap:6px}.stepper input{width:64px;text-align:center;padding:6px;border-radius:8px;border:1px solid var(--line-2);background:var(--slate-2);color:var(--text)}.stepper button{width:30px;height:30px;border-radius:8px;background:var(--slate-3);font-weight:800}.info-btn{width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}.tooltip{position:fixed;z-index:60;max-width:min(320px,calc(100vw - 24px));padding:12px 14px;border-radius:12px;background:#0c1a1f;border:1px solid var(--line-2);box-shadow:0 12px 40px #0009;pointer-events:none;animation:tip-in .12s ease-out}@keyframes tip-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.tooltip h4{font-size:15px;margin-bottom:4px;display:flex;align-items:center;gap:8px}.tooltip p{margin:0 0 6px;font-size:13px}.tooltip .lore{color:var(--muted);font-style:italic;font-size:12.5px}.tooltip .stats{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px;margin-top:6px}.tooltip .stats span:nth-child(odd){color:var(--muted)}.tooltip .stats span:nth-child(2n){font-weight:600;text-align:right}.toasts{position:absolute;left:50%;top:calc(var(--topbar-h) + var(--sat) + 52px);transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:40;pointer-events:none;width:min(92%,420px)}.toast{padding:8px 14px;border-radius:12px;background:#0c1a1ff2;border:1px solid var(--line-2);font-size:13.5px;font-weight:600;text-align:center;animation:toast-in .2s ease-out;box-shadow:0 8px 24px #0006}.toast.good{border-color:#7be49580;color:var(--mint)}.toast.bad{border-color:#d94f3d99;color:#ff9a8a}.toast.epic{border-color:var(--coral);color:var(--coral);font-family:var(--font-display);font-weight:800;font-size:15px}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}.modal-backdrop{position:absolute;inset:0;z-index:50;background:#040c0fb3;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}.modal{width:min(100%,440px);max-height:88%;overflow-y:auto;border-radius:18px;background:#0f1d22;border:1px solid var(--line-2);box-shadow:0 24px 80px #0009;padding:20px;animation:sheet-in .25s cubic-bezier(.2,.8,.2,1)}.modal h2{font-size:24px;font-weight:800;margin-bottom:6px}.modal .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:8px}.modal p{color:var(--text);margin:0 0 12px;font-size:14.5px}.modal .actions{display:flex;gap:8px;margin-top:14px}.modal .actions .btn{flex:1;padding:12px;font-size:15px}.gain-list{display:grid;gap:6px;margin:10px 0}.gain{display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;background:var(--slate)}.gain b{font-family:var(--font-display);color:var(--mint)}.report-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:10px 0}.report-side{padding:10px;border-radius:12px;background:var(--slate);font-size:13px}.report-side h4{font-size:14px;margin-bottom:4px}.report-vs{font-family:var(--font-display);font-weight:800;color:var(--muted)}.narrative{font-style:italic;color:var(--muted);border-left:3px solid var(--coral);padding-left:10px}.tut-spot{position:fixed;z-index:70;border-radius:14px;box-shadow:0 0 0 9999px #040c0f99,0 0 0 3px var(--teal);pointer-events:none;transition:all .25s ease}.tut-card{position:fixed;z-index:71;left:50%;transform:translate(-50%);width:min(92%,400px);padding:14px 16px;border-radius:14px;background:#0f1d22;border:1px solid var(--teal);box-shadow:0 16px 48px #0009}.tut-card h3{font-size:16px;margin-bottom:4px;color:var(--teal)}.tut-card p{margin:0;font-size:14px}.tut-card .tut-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}.tut-card .step{font-size:11px;color:var(--muted);letter-spacing:.08em}.target{padding:12px;border-radius:12px;background:var(--slate);border:1px solid var(--line);margin-bottom:8px}.target-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.target-head h3{font-size:15px}.target .taunt{font-style:italic;color:var(--muted);font-size:12.5px;margin:4px 0 8px}.target .loot{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;margin-bottom:8px}.army-picker{display:grid;gap:6px;margin:8px 0}.army-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;font-size:13px}.army-row input[type=range]{width:100%;accent-color:var(--teal)}.codex-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.codex-tabs button{padding:5px 10px;border-radius:999px;background:var(--slate-2);font-size:12px;font-weight:700;color:var(--muted)}.codex-tabs button.on{background:var(--teal-soft);color:var(--teal)}.codex-entry{padding:10px 12px;border-radius:10px;background:var(--slate);margin-bottom:6px}.codex-entry h4{font-size:14px;margin-bottom:2px}.codex-entry p{margin:0;font-size:12.5px}.codex-entry .lore{color:var(--muted);font-style:italic}.search{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--slate-2);color:var(--text);margin-bottom:10px}@media(prefers-reduced-motion:reduce){.sheet,.toast,.modal,.tooltip,.tap-hint,.frenzy-bar.active .fill,.frenzy-label.active{animation:none!important}}@media(min-width:700px){.sheet,.tabs,.topbar{max-width:560px;margin-left:auto;margin-right:auto;left:0;right:0}.sheet{border-radius:18px;bottom:calc(var(--tabs-h) + var(--sab) + 8px)}}