:root{--bg: #eef1f5;--panel: #ffffff;--panel-edge: #d7dce3;--ink: #2a2f36;--ink-soft: #697280;--accent: #6f7d54;--accent-ink: #ffffff;--gold: #b78a35;--danger: #b4573f;--good: #567a45;--radius: 12px;--shadow: 0 2px 10px rgba(35, 42, 52, .09);--tap: 44px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0}#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui{position:absolute;inset:0;pointer-events:none}#ui button,#ui .panel,#ui .bar{pointer-events:auto}.topbar{position:absolute;top:calc(8px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}.stat{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 10px;min-width:0;display:flex;flex-direction:column;justify-content:center}.stat .label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}.stat .value{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}.stat.grow{flex:1 1 auto;min-width:0}.stat.grow .value{overflow:hidden;text-overflow:ellipsis}.hpbar{margin-top:4px;height:6px;border-radius:3px;background:#e3e7ec;overflow:hidden}.hpbar>i{display:block;height:100%;background:var(--good);transition:width .16s linear}.hpbar.low>i{background:var(--danger)}.topbar .actions{display:flex;gap:6px;align-items:center}button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);box-shadow:var(--shadow);min-height:var(--tap);min-width:var(--tap);padding:8px 12px;cursor:pointer;transition:transform 90ms ease,background .12s ease,border-color .12s ease}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}button.selected{border-color:var(--accent);background:#eef2e6}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn{padding:8px 10px;font-size:15px}.call-btn{padding:8px 12px;font-size:13px;font-weight:620;font-variant-numeric:tabular-nums;min-width:82px;display:flex;gap:5px;align-items:baseline;justify-content:center}.call-btn .bonus{color:var(--gold)}.call-btn:disabled .bonus{color:inherit}.dock{position:absolute;left:0;right:0;bottom:0;padding:8px calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));display:flex;flex-direction:column;gap:8px}.palette-wrap{display:flex;flex-direction:column;gap:8px;padding:8px;pointer-events:auto}.tabs{display:flex;gap:4px;overflow-x:auto;touch-action:pan-x;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;min-height:32px;min-width:0;padding:4px 12px;font-size:12px;font-weight:600;border-radius:8px;background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft)}.tab.selected{background:#eef2e6;border-color:var(--accent);color:var(--ink)}.palette{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scrollbar-width:thin;touch-action:pan-x;pointer-events:auto}.palette::-webkit-scrollbar{height:4px}.palette::-webkit-scrollbar-thumb{background:var(--panel-edge);border-radius:2px}.card{flex:0 0 auto;min-width:116px;text-align:left;padding:8px 10px;display:flex;flex-direction:column;gap:2px}.card .name{font-size:13px;font-weight:620;white-space:nowrap;padding-right:12px}.card .cost{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}.card .key{position:absolute;top:6px;right:8px;font-size:10px;font-weight:700;color:var(--ink-soft);opacity:.7}.card{position:relative}.card[hidden]{display:none}.card.unaffordable .cost{color:var(--danger)}.cooldown{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}.context{display:none;flex-direction:column;gap:8px}.context.open{display:flex}.confirm{border-color:var(--gold);box-shadow:0 2px 14px #b78a3538}.confirm h2{font-size:15px}.context header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.context h2{margin:0;font-size:15px}.context .lvl{font-size:12px;color:var(--gold)}.context .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px 10px;font-size:12px;color:var(--ink-soft)}.context .stats b{display:block;color:var(--ink);font-variant-numeric:tabular-nums;font-size:13px}.context{max-height:44vh;overflow-y:auto}.context .row{display:flex;gap:8px}.context .specs{flex-wrap:wrap}.context .specs button{flex:1 1 96px;font-size:12px;line-height:1.25}.base-upgrades{display:flex;flex-direction:column;gap:8px}.context .row[hidden],.base-upgrades[hidden],.spec-title[hidden]{display:none}.context .row button{flex:1 1 0;min-height:40px;font-size:13px}.blurb{font-size:12px;color:var(--ink-soft);line-height:1.4;margin:0}.scrim{position:absolute;inset:0;background:#262c3452;display:none;align-items:center;justify-content:center;padding:16px;pointer-events:auto}.scrim.open{display:flex}.modal{width:min(420px,100%);max-height:84vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;touch-action:pan-y}.modal h1{margin:0;font-size:19px}.modal h3{margin:4px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}.modal .row{display:flex;gap:8px;flex-wrap:wrap}.modal .row button{flex:1 1 90px;font-size:13px}.difficulties{display:flex;flex-direction:column;gap:8px}.difficulty{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px}.difficulty .name{font-size:15px;font-weight:650}.difficulty .blurb{font-variant-numeric:tabular-nums}.base-menu header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.base-menu header h1{margin:0}.base-menu .lvl{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}.upgrade-row{display:flex;align-items:center;gap:10px;justify-content:space-between}.upgrade-row .meta{min-width:0}.upgrade-row .meta .name{font-size:13px;font-weight:620}.upgrade-row button{flex:0 0 auto;min-height:38px;font-size:13px}.toast{position:absolute;left:50%;transform:translate(-50%);top:calc(74px + var(--safe-top));background:var(--panel);border:1px solid var(--panel-edge);border-left:3px solid var(--ink-soft);border-radius:8px;box-shadow:var(--shadow);padding:7px 12px;font-size:13px;display:none;max-width:80vw;text-align:center}.toast.open{display:block}.toast.good{border-left-color:var(--good)}.toast.bad{border-left-color:var(--danger)}.banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-size:clamp(22px,7vw,40px);font-weight:700;letter-spacing:.03em;color:var(--ink);opacity:0;transition:opacity .4s ease;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.7)}.banner.show{opacity:.9}.hint{font-size:12px;color:var(--ink-soft);line-height:1.5}@media (min-width: 760px){.dock{flex-direction:row;align-items:flex-end;gap:12px;padding:12px}.dock .palette-wrap{flex:1 1 auto;min-width:0}.palette{flex-wrap:wrap;overflow-x:visible}.context{width:290px;flex:0 0 auto}}@media (max-width: 759px){.stat .value{font-size:15px}.stat{padding:5px 8px}.topbar{gap:6px}.topbar .stat:not(.grow){flex:1 1 0;min-width:0}.topbar .stat.grow{order:3;flex:1 0 100%}.topbar .stat.grow .value{font-size:12px;font-weight:600;color:var(--ink-soft)}.topbar .actions{flex:0 0 auto}.call-btn{min-width:0;padding:8px 10px}.call-btn .bonus{display:none}.toast{top:calc(120px + var(--safe-top))}.context{padding:10px}.context{order:-1}.palette-wrap{padding:6px;gap:6px}.tab{min-height:30px;padding:3px 10px}}