:root{--bg:#0d1118;--panel:#141a24d1;--panel-line:#8caad229;--ink:#e6ecf5;--ink-dim:#93a3b8;--accent:#5ad6a0;--accent-warm:#d1a44a;--danger:#e0603f;--radius:10px;--shadow:0 10px 30px #00000073}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;overflow:hidden}button{font:inherit;color:inherit}.app{height:100%;position:relative}.app canvas{display:block}.hud{pointer-events:none;z-index:10;background:linear-gradient(#080b10e6,#0000);grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 18px;display:grid;position:absolute;top:0;left:0;right:0}.hud-left,.hud-right{align-items:center;gap:10px;display:flex}.hud-right{justify-content:flex-end}.hud-center{color:var(--ink-dim);text-align:center;font-style:italic}.brand{letter-spacing:.08em;text-transform:uppercase;font-size:20px}.chip{border:1px solid var(--panel-line);color:var(--ink-dim);background:var(--panel);border-radius:999px;padding:3px 10px;font-size:13px}.shards{color:var(--accent-warm);font-size:18px}.mute{pointer-events:auto;line-height:1}.toast{border:1px solid var(--danger);border-radius:var(--radius);pointer-events:auto;cursor:pointer;background:#3c1410f2;padding:8px 16px;position:absolute;top:56px;left:50%;transform:translate(-50%)}.side{z-index:5;scrollbar-width:thin;flex-direction:column;gap:12px;width:268px;display:flex;position:absolute;top:64px;bottom:76px;overflow-y:auto}.side.left{left:14px}.side.right{right:14px}.panel{border:1px solid var(--panel-line);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:var(--shadow);padding:12px 14px}.panel h2{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 8px;font-size:13px;font-weight:500}.panel ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.muted{color:var(--ink-dim);font-size:14px}.hint{color:var(--accent);margin:10px 0 0;font-size:13px}.synergy li{background:#ffffff08;border-radius:7px;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;padding:6px 8px;font-size:14px;display:grid}.synergy li.is-active{background:#5ad6a01f;border:1px solid #5ad6a047}.synergy li.is-inactive{opacity:.62}.swatch{border-radius:3px;width:10px;height:10px}.synergy-name{text-transform:capitalize}.synergy-count b{color:var(--accent)}.synergy-next{color:var(--ink-dim);grid-column:2/-1;font-size:12px}.roster-row{cursor:pointer;background:#ffffff08;border:1px solid #0000;border-radius:8px;padding:8px}.roster-row:hover{border-color:var(--panel-line)}.roster-row.is-selected{border-color:var(--accent);background:#5ad6a01a}.roster-row.is-benched{opacity:.5}.roster-head{justify-content:space-between;align-items:baseline;margin-bottom:5px;display:flex}.rank{color:var(--accent-warm);border:1px solid var(--accent-warm);border-radius:4px;padding:0 5px;font-size:12px}.hp-strip{background:#ffffff1a;border-radius:2px;height:4px;overflow:hidden}.hp-strip-fill{background:var(--accent);height:100%}.roster-items{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.pill{border:1px solid var(--panel-line);color:var(--ink-dim);white-space:nowrap;border-radius:999px;padding:1px 6px;font-size:11px}.pill-mod{border-color:#7d5bc680}.pill-relic{color:var(--accent-warm);border-color:#d1a44a80}.relic-tray{flex-wrap:wrap;gap:5px;display:flex}.map-track{flex-direction:column;gap:6px;display:flex}.map-col{gap:6px;display:flex}.map-node{border:1px solid var(--panel-line);cursor:not-allowed;opacity:.45;text-align:left;background:#ffffff08;border-radius:8px;flex:1;align-items:center;gap:8px;padding:7px 9px;display:flex}.map-node.is-available{cursor:pointer;opacity:1;border-color:var(--accent);background:#5ad6a01f}.map-node.is-visited{opacity:.3}.map-node.kind-elite.is-available,.map-node.kind-boss.is-available{border-color:var(--danger);background:#e0603f1f}.map-icon{font-size:16px}.map-label{font-size:13px}.bottom{z-index:8;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.planbar{border:1px solid var(--panel-line);background:var(--panel);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:14px;padding:10px 16px;display:flex}.speeds{gap:5px;display:flex}.btn{border:1px solid var(--panel-line);cursor:pointer;background:#ffffff0d;border-radius:8px;padding:8px 16px;transition:background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--accent);background:#ffffff1a}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#06231a;font-weight:600}.btn-primary:hover:not(:disabled){background:#6fe6b2}.btn-small{padding:4px 10px;font-size:13px}.btn-small.is-on{background:var(--accent);color:#06231a;border-color:var(--accent)}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20;background:#06090eb8;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.modal{border:1px solid var(--panel-line);width:min(560px,100%);max-height:88vh;box-shadow:var(--shadow);background:#10151ef7;border-radius:14px;padding:26px;overflow-y:auto}.modal.wide{width:min(900px,100%)}.modal h1{letter-spacing:.02em;margin:0 0 6px;font-size:26px;font-weight:500}.card-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:18px 0;display:grid}.card{border:1px solid var(--panel-line);text-align:left;cursor:pointer;background:#ffffff0a;border-radius:10px;flex-direction:column;gap:6px;padding:12px;transition:transform .12s,border-color .12s;display:flex;position:relative}.card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.card:disabled{opacity:.45;cursor:not-allowed}.card-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.card-head em{color:var(--ink-dim);font-size:12px}.blurb{color:var(--ink-dim);margin:0;font-size:13px;line-height:1.45}.cost{color:var(--accent-warm)}.kind{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);font-size:11px}.rarity-rare{border-color:#4c7fb880}.rarity-epic{border-color:#c2455e8c}.is-sold{opacity:.3}.is-tag-grant{border-color:#5ad6a080}.badge{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);background:#00000080;border-radius:999px;padding:2px 6px;font-size:10px;position:absolute;top:8px;right:8px}.badge-grant{background:var(--accent);color:#06231a}.tag-row{flex-wrap:wrap;gap:4px;display:flex}.tag{text-transform:capitalize;border:1px solid var(--panel-line);border-radius:999px;padding:1px 7px;font-size:11px}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.modal-actions.column{flex-direction:column;align-items:stretch}.equip-picker{border:1px dashed var(--accent);border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;padding:12px;display:flex}.unit-bars{-webkit-user-select:none;user-select:none;pointer-events:none;width:54px}.bar{background:#000000a6;border:1px solid #000c;border-radius:3px;height:5px;margin-bottom:2px;position:relative;overflow:hidden}.bar-fill{width:100%;height:100%;transition:none}.bar-hp .bar-fill{background:var(--accent)}.unit-bars[data-team=enemy] .bar-hp .bar-fill{background:var(--danger)}.bar-shield{background:#bedcffbf;width:0;position:absolute;inset:0}.bar-mana .bar-fill{background:#5b8fd6}.unit-name{color:var(--ink);text-shadow:0 1px 3px #000;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:12px}.unit-name.is-selected{color:var(--accent)}.unit-rank{color:var(--accent-warm);margin-left:4px}@media (max-width:900px){.side{width:210px}.hud-center{display:none}}