/* Upgrades (/upgrades) — The Forge: per-plus strip, gear list, price ladder (stairs), scroll it or buy it. */

/* ---------- what one plus adds ---------- */
.perplus{margin-bottom:24px}
.pp-row{display:flex;align-items:stretch;padding:12px 10px 14px;gap:0;overflow:hidden}
.pp{position:relative;flex:1 1 0;min-width:0;padding:4px 14px 12px;display:flex;flex-direction:column;justify-content:flex-start}
.pp+.pp{border-left:1.5px dashed var(--win-line)}
.pp>b{font:800 30px/1 var(--f-game);color:var(--maple);letter-spacing:-.01em}
.pp>span{font-size:13px;color:var(--ink-3);line-height:1.25;margin-top:3px}
.pp>span em{font-style:normal;font-weight:700;color:var(--ink)}
.pp>i{position:absolute;left:14px;bottom:2px;height:4px;width:calc((100% - 28px) * var(--w) / 100);border-radius:2px;background:linear-gradient(90deg,#ffd27a,#e8641c)}
.pp.big{flex:2.2 1 0;flex-direction:row;align-items:flex-start;gap:12px;border-top:0;border-right:0;border-bottom:0;background:transparent;text-align:left;cursor:pointer;color:inherit;font:inherit;justify-content:flex-start}
.pp.big:hover{background:#fff3d6}
.pp.big>span:last-child{display:flex;flex-direction:column;min-width:0}
.pp.big small{font:800 11.5px var(--f-game);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pp.big b{font:800 30px/1.05 var(--f-game);color:var(--down)}
.pp.big b small{font:700 13px var(--f-ui);letter-spacing:0;text-transform:none}
.pp.big span span{font-size:13px;color:var(--ink-2);line-height:1.25}
.pp.n>b{color:var(--bar-2)}
.pp-row .empty{flex:1}

/* ---------- layout ---------- */
.upg-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:24px;align-items:start}
.upg-grid>*{min-width:0}
.upg-grid .stack{grid-template-columns:minmax(0,1fr)}

/* ---------- gear list ---------- */
.upg-listwin{position:sticky;top:16px}
.upg-listwin .tools{display:grid;gap:8px;padding:12px 14px 10px}
.upg-listwin .filt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.upg-listwin .tabs{padding:0 10px}
.upg-listwin .tabs button{padding:5px 9px 2px}
.upg-listwin .tabs [aria-selected=true]{padding-top:8px}
.cnt{margin:0;padding:8px 16px 0;font-size:12.5px;color:var(--ink-3)}
.gear{max-height:min(640px,calc(100vh - 330px));min-height:260px;overflow:auto;padding:6px 8px 10px}
.gear li>button[aria-pressed=true]{background:#ffe0a3!important;box-shadow:inset 0 0 0 2px var(--maple)}
.gear .pr{font-size:17px;color:var(--down)}
.gear .pr small{color:var(--ink-3);font-size:11.5px}
.gear .sep{font:800 11.5px var(--f-game);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:12px 8px 4px}

/* ---------- ladder ---------- */
.lad-hd{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center}
.slot.big{width:64px;height:64px;border-radius:8px}
.slot.big img{width:44px;height:44px}
.lad-t h2{margin:0;font:800 26px/1.1 var(--f-game)}
.lad-t p{margin:3px 0 0}
.best{text-align:right;padding:8px 14px}
.best small{display:block;font-size:11.5px;color:var(--tip-dim)}
.best b{display:block;font:800 34px/1 var(--f-game);color:var(--gold-ink)}
.stairs-wrap{position:relative;margin-top:16px;overflow-x:auto;overflow-y:visible;padding-top:4px}
.stairs{display:grid;grid-template-columns:repeat(var(--n,6),minmax(52px,1fr));gap:8px;height:300px;align-items:end;padding:0 4px;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(transparent 0 59px,rgba(200,183,143,.35) 59px 60px);min-width:calc(var(--n,6) * 60px)}
.step{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;cursor:default;outline:none}
.step:focus-visible .st-bar{outline:3px solid var(--gold);outline-offset:2px}
.st-p{font:800 14px/1 var(--f-game);white-space:nowrap}
.st-p .coin{width:.8em;height:.8em}
.st-x{font:800 12.5px var(--f-ui);color:var(--down)}
.step.zero .st-x{color:var(--ink-3)}
.step.neg .st-x,.step.loss .st-x{color:var(--up)}
.st-bar{display:block;width:100%;max-width:64px;height:calc(var(--h) - 52px);min-height:8px;border:2px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;background:linear-gradient(#ffd27a,#e8641c);box-shadow:inset 0 3px 0 rgba(255,255,255,.5);transform-origin:bottom;animation:grow var(--dur-slow) calc(var(--i) * var(--stagger)) var(--ease-out) both}
.st-bar.ask{background:repeating-linear-gradient(135deg,#fff4dc 0 6px,#ffd9a0 6px 12px)}
.step.zero .st-bar{background:linear-gradient(#cdd9f3,#8fa8d8)}
.step.neg .st-bar{background:linear-gradient(#e7d9c6,#bba98e)}
.step:hover .st-bar{filter:brightness(1.1);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 0 0 3px rgba(232,100,28,.25)}
@keyframes grow{from{transform:scaleY(0)}}
.st-n{position:absolute;bottom:-30px;font:800 17px var(--f-game)}
.st-c{position:absolute;bottom:-46px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.stairs-wrap{padding-bottom:50px}
.stip{position:absolute;z-index:5;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font-size:13px;line-height:1.35}
.stip b{font:800 15px var(--f-game);color:var(--gold-ink)}
.stip small{color:var(--tip-dim)}
.lad-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--ink-3);padding:30px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-3);margin-top:4px}
.legend i{display:inline-block;width:14px;height:12px;border:1.5px solid var(--ink);border-radius:3px;vertical-align:-1px;margin-right:5px}
.legend i.sold{background:linear-gradient(#ffd27a,#e8641c)}
.legend i.ask{background:repeating-linear-gradient(135deg,#fff4dc 0 3px,#ffd9a0 3px 6px)}
.lad-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- scroll it or buy it ---------- */
.fg-big{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
.fg-big b{font:800 30px var(--f-game);color:var(--maple);margin-right:4px}
.fg-pick{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.fg-pick .sel{flex:1;min-width:0}
.fr-h{display:grid;grid-template-columns:48px minmax(0,1fr) 120px;gap:10px;font:800 11.5px var(--f-game);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 4px 6px}
.fr-h span:last-child{text-align:right}
.sw{display:inline-block;width:12px;height:10px;border:1.5px solid var(--ink);border-radius:2px;margin:0 4px 0 8px;vertical-align:-1px}
.sw:first-child{margin-left:0}
.sw.buy,.b.buy i{background:linear-gradient(#a9c3f0,#5f82bf)}
.sw.fg,.b.fg i{background:linear-gradient(#ffd27a,#e8641c)}
.fr{display:grid;grid-template-columns:48px minmax(0,1fr) 120px;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid rgba(200,183,143,.45)}
.fr .pl{font:800 20px var(--f-game)}
.bars{display:grid;gap:4px;min-width:0}
.b{display:flex;align-items:center;gap:6px;min-width:0}
.b i{display:block;flex:none;width:calc(var(--w) * .7);height:14px;border:1.5px solid var(--ink);border-radius:4px;transform-origin:left;animation:growx var(--dur-slow) var(--ease-out) both}
@keyframes growx{from{transform:scaleX(0)}}
.b em{font:800 13.5px var(--f-game);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b em small{font:700 11.5px var(--f-ui);color:var(--ink-3)}
.vd{justify-self:end;text-align:right;font:800 15px var(--f-game);padding:3px 10px 2px;border-radius:7px;border:2px solid var(--ink);color:#fff;line-height:1.1}
.vd small{display:block;font:700 11px var(--f-ui);opacity:.9}
@media (min-width:821px){.vd small{white-space:nowrap}}
.vd.buy{background:linear-gradient(#8fb3ee,#3a5590)}
.vd.fg{background:linear-gradient(#ffa24a,#c94f10)}
.fr-foot{margin:8px 0 0}
.fg-note{margin:10px 0 0}

/* ---------- responsive ---------- */
@media (max-width:1100px) and (min-width:821px){
  .upg-grid{grid-template-columns:320px minmax(0,1fr)}
  .pp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
  .pp:nth-child(3n+1){border-left:0}
  .pp:nth-child(n+4){border-top:1.5px dashed var(--win-line);padding-top:10px}
  .pp.big{grid-column:span 2}
}
@media (max-width:820px){
  .pp-row{display:grid;grid-template-columns:1fr 1fr;padding:6px 4px 8px}
  .pp{padding:8px 12px 12px;border-left:0!important;border-bottom:1.5px dashed var(--win-line)}
  .pp:nth-child(even){border-left:1.5px dashed var(--win-line)!important}
  .pp>b{font-size:24px}
  .pp.big{grid-column:1/-1;border-left:0!important}
  .pp.big b{font-size:24px}
  .pp.n{grid-column:1/-1;border-left:0!important;border-bottom:0}
  .upg-grid{grid-template-columns:minmax(0,1fr)}
  .upg-listwin{position:relative;top:0}
  .gear{max-height:420px}
  .lad-hd{grid-template-columns:52px minmax(0,1fr)}
  .slot.big{width:52px;height:52px}
  .lad-t h2{font-size:21px}
  .best{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .best b{font-size:26px}
  .stairs{height:260px;grid-template-columns:repeat(var(--n,6),minmax(40px,1fr));gap:5px;min-width:calc(var(--n,6) * 45px)}
  .st-p{font-size:12px}.st-p .coin{display:none}
  .upg-listwin .tabs{padding:0 6px}.upg-listwin .tabs button{padding:5px 7px 2px;font-size:13px}
  .fr-h{grid-template-columns:1fr;gap:2px}.fr-h span:first-child,.fr-h span:last-child{display:none}
  .ladder{scroll-margin-top:56px}
  .fr-h,.fr{grid-template-columns:36px minmax(0,1fr) 104px;gap:8px}
  .b em small{display:none}
}
/* reserve the KPI row while it loads (no layout shift when the numbers land) */
.pp-row:has(>.empty){min-height:127px}
@media (max-width:1100px){.pp-row:has(>.empty){min-height:338px}}
@media (max-width:820px){.pp-row:has(>.empty){min-height:352px}}