/* Evertrail Idle client · Store: tool upgrade lines, cards and hold-to-buy */
.store-page { grid-template-rows: auto minmax(0, 1fr); gap: var(--gap); }
.store-header .bank-title .t-caps { color: var(--gold-3); }
.store-tools { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.store-tools .filter-toggle { margin: 0; }
.store-body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--gap); min-height: 0; padding-top: .55rem; }

/* Categories */
.store-nav { display: flex; flex-direction: column; min-height: 0; padding-top: 1.2rem; }
.store-cats { display: grid; align-content: start; gap: .4rem; padding: .45rem .6rem; overflow-y: auto; }
.store-cat { position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .6rem .45rem .45rem; border-radius: .55rem; text-align: left; border: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, rgba(34, 50, 76, .6), rgba(14, 22, 36, .75)); color: var(--text-2); transition: border-color .15s, background .15s, transform .15s var(--ease-out); }
.store-cat:hover { border-color: color-mix(in srgb, var(--skill) 50%, transparent); transform: translateX(2px); }
.store-cat.is-active { color: var(--text-1); border-color: color-mix(in srgb, var(--skill) 70%, #fff 10%); background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 30%, rgba(14, 22, 36, .9)), rgba(14, 22, 36, .9)); box-shadow: inset 3px 0 0 var(--skill), 0 .35rem .9rem rgba(0, 0, 0, .4); }
.store-cat.is-planned { opacity: .72; }
.store-cat-icon { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: .5rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--skill) 28%, #1c2a42), #0b121d 78%); box-shadow: inset 0 .1rem .35rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); }
.store-cat-icon .ia-emblem { width: 2.1rem; height: 2.1rem; filter: drop-shadow(0 .12rem .15rem rgba(0, 0, 0, .7)); }
.store-cat-copy { display: grid; gap: .1rem; min-width: 0; }
.store-cat-copy strong { font: 600 1rem/1.1 var(--font-display); }
.store-cat-copy small { font-size: .7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-cat > .ia-glyph { width: .9rem; height: .9rem; color: var(--text-4); }
.store-badge, .sr-badge { min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; display: grid; place-items: center; border-radius: 1rem; font: 700 .74rem/1 var(--font-num); color: #1f1406; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 0 1px #000, 0 0 .6rem rgba(242, 198, 106, .55); }
.store-hint { margin: auto 0 0; display: flex; gap: .45rem; padding: .6rem .8rem .8rem; font-size: .72rem; color: var(--text-3); border-top: 1px solid var(--edge-soft); }
.store-hint .ia-glyph { flex: none; width: .9rem; height: .9rem; margin-top: .1rem; color: var(--gold-3); }
.store-main { display: flex; flex-direction: column; min-height: 0; padding-top: 1.2rem; }
.store-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .9rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.store-scroll > * { flex: none; }

/* The tool as it is now */
.tool-summary { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "figure copy stats"; align-items: center; gap: .6rem 1.1rem; padding: .85rem 1rem; border-radius: .6rem; border: 1px solid color-mix(in srgb, var(--skill) 35%, transparent); background: radial-gradient(70% 160% at 0% 0%, color-mix(in srgb, var(--skill) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(26, 40, 64, .8), rgba(9, 15, 27, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 .4rem 1rem rgba(0, 0, 0, .35); }
.ts-figure { grid-area: figure; position: relative; display: grid; justify-items: center; gap: .35rem; }
.ts-tier { padding: .12rem .5rem; border-radius: 1rem; font: 700 .64rem var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: #0d1320; background: var(--tier); box-shadow: 0 0 0 1px #000, 0 0 .6rem color-mix(in srgb, var(--tier) 60%, transparent); }
.ts-copy { grid-area: copy; display: grid; gap: .12rem; min-width: 0; }
.ts-copy .t-caps { color: color-mix(in srgb, var(--skill) 75%, #fff); }
.ts-copy h2 { margin: 0; font-size: 1.55rem; line-height: 1.1; color: var(--text-1); text-shadow: 0 .1rem .35rem rgba(0, 0, 0, .7); }
.ts-copy small { color: var(--text-3); font-size: .78rem; }
.ts-stats { grid-area: stats; display: flex; gap: .45rem; }
.ts-stat { display: grid; justify-items: center; align-content: start; min-width: 5.2rem; padding: .4rem .6rem; border-radius: .45rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06); }
.ts-stat small { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ts-stat b { font-size: 1.55rem; line-height: 1.1; color: var(--text-1); text-shadow: 0 0 .8rem color-mix(in srgb, var(--skill) 45%, transparent); }
.ts-stat em { font-style: normal; font-size: .6rem; color: var(--ember); }

/* Upgrade lines */
.upgrade-line { display: grid; gap: .55rem; }
.ul-head { display: flex; align-items: center; gap: .55rem; padding: 0 .1rem .35rem; border-bottom: 1px solid var(--edge-soft); }
.ul-head .ia-emblem { width: 1.7rem; height: 1.7rem; filter: drop-shadow(0 .1rem .15rem #000); }
.ul-head h3 { margin: 0; font: 600 1.2rem var(--font-display); color: var(--gold-1); text-shadow: 0 1px 0 #000; }
.ul-head small { color: var(--text-3); font-size: .74rem; }
.ul-count { margin-left: auto; padding: .1rem .5rem; border-radius: 1rem; font-size: .76rem; font-weight: 700; color: var(--text-2); background: rgba(0, 0, 0, .35); border: 1px solid var(--edge-soft); }
.ul-empty { margin: 0; display: flex; align-items: center; gap: .4rem; padding: .6rem; color: var(--text-3); font-size: .82rem; }
.ul-empty .ia-glyph { color: var(--emerald); }
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .6rem; }

/* Upgrade cards */
.upgrade-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .6rem .7rem .7rem; border-radius: .6rem; border: 1px solid color-mix(in srgb, var(--tier) 35%, rgba(255, 255, 255, .06)); background: linear-gradient(180deg, rgba(30, 45, 70, .78), rgba(11, 17, 29, .9)); box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .15s var(--ease-out), box-shadow .15s, border-color .15s; }
.upgrade-card::before { content: ""; position: absolute; left: .7rem; right: .7rem; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--tier), transparent); opacity: .8; }
.upgrade-card.is-next { border-color: color-mix(in srgb, var(--gold-2) 65%, transparent); box-shadow: 0 0 0 1px rgba(242, 198, 106, .25), 0 .5rem 1.3rem rgba(0, 0, 0, .45), 0 0 1.4rem rgba(242, 198, 106, .12); }
.upgrade-card.is-next:hover { transform: translateY(-2px); }
.upgrade-card.is-owned { background: linear-gradient(180deg, rgba(24, 58, 40, .55), rgba(9, 18, 16, .88)); border-color: rgba(88, 214, 127, .28); }
.upgrade-card.is-locked { background: linear-gradient(180deg, rgba(18, 24, 36, .72), rgba(7, 10, 17, .88)); }
.upgrade-card.is-locked .uc-icon, .upgrade-card.is-locked .uc-provides { filter: grayscale(.6) brightness(.75); }
.uc-head { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.uc-icon { position: relative; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: .55rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tier) 34%, #1c2a42), #0a111c 80%); box-shadow: inset 0 .12rem .4rem rgba(0, 0, 0, .75), 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent); }
.uc-icon .ia-emblem { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .75)); }
.uc-roman { position: absolute; right: -.3rem; bottom: -.3rem; min-width: 1.45rem; padding: .08rem .28rem; border-radius: .35rem; font-size: .66rem; font-weight: 800; text-align: center; color: #0d1320; background: var(--tier); box-shadow: 0 0 0 1px #000; }
.uc-title { display: grid; gap: .12rem; min-width: 0; }
.uc-title strong { font: 600 1.05rem/1.12 var(--font-display); color: var(--text-1); }
.uc-title small { font-size: .7rem; color: var(--text-3); }
.uc-section { display: grid; gap: .25rem; }
.uc-section > .t-caps { font-size: .58rem; color: var(--text-4); }
.uc-provides { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.uc-stat { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .8rem; color: var(--text-2); }
.uc-stat b { font-size: 1.25rem; color: var(--text-1); }
.uc-stat em { font-style: normal; font: 700 .72rem var(--font-num); color: var(--emerald); }
.uc-effect { margin: 0; font-size: .72rem; color: var(--text-3); }
.uc-effect b { color: var(--text-2); }
.uc-reqs, .uc-costs { display: flex; flex-wrap: wrap; gap: .3rem; }
.uc-reqs .chip .ia-glyph { width: .72rem; height: .72rem; }
.uc-cost { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem .15rem .2rem; border-radius: .4rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06); font-size: .82rem; color: var(--text-1); }
.uc-cost img, .uc-cost .ia-emblem { width: 1.3rem; height: 1.3rem; object-fit: contain; }
.uc-cost.is-short { color: #ffb08a; border-color: rgba(255, 143, 79, .4); background: rgba(90, 35, 15, .35); }
.uc-free { font-size: .76rem; color: var(--text-3); }
.uc-foot { margin-top: auto; padding-top: .15rem; }
.uc-owned { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.25rem; border-radius: var(--radius-sm); font-weight: 700; font-size: .85rem; color: #b9f5c8; background: rgba(23, 80, 44, .35); border: 1px solid rgba(88, 214, 127, .3); }
.uc-owned .ia-glyph { width: 1rem; height: 1rem; }
.upgrade-card .btn[disabled] { white-space: normal; line-height: 1.2; }

/* Hold to buy: the fill must complete before the purchase is sent */
.hold-buy { overflow: hidden; touch-action: none; user-select: none; }
.hold-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .6)); pointer-events: none; }
.hold-buy.is-holding .hold-fill { animation: hold-fill .7s linear forwards; }
.hold-buy.is-holding { box-shadow: 0 0 0 1px #000, 0 0 1.2rem rgba(242, 198, 106, .7); }
.hold-label { position: relative; display: inline-flex; align-items: center; gap: .4rem; pointer-events: none; }
@keyframes hold-fill { to { transform: scaleX(1); } }

.store-planned { padding: 3rem 1rem; }
.store-planned .ia-emblem { width: 4.5rem; height: 4.5rem; filter: drop-shadow(0 .2rem .3rem #000); opacity: .9; }
.store-planned-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .4rem; }
.level-up.is-upgrade { border-color: var(--gold-2); }
.level-up.is-upgrade .lu-copy span { color: var(--gold-1); }
.chat-line.k-upgrade .who { color: var(--gold-1); }

/* Narrower desktops and phones */
@media (max-aspect-ratio: 4/3) and (min-width: 761px) {
  .store-body { grid-template-columns: 13rem minmax(0, 1fr); }
  .store-cat-copy small { display: none; }
  .tool-summary { grid-template-areas: "figure copy" "stats stats"; grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .store-body { display: flex; flex-direction: column; gap: 1.1rem; padding-top: .7rem; }
  .store-cats { grid-template-columns: 1fr 1fr; overflow: visible; }
  .store-cat { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .store-cat-icon { width: 2.4rem; height: 2.4rem; }
  .store-cat-copy small, .store-hint { display: none; }
  .store-tools { width: 100%; margin: 0; justify-content: space-between; }
  .store-scroll { overflow: visible; padding: .4rem .6rem .8rem; }
  .tool-summary { grid-template-areas: "figure copy" "stats stats"; grid-template-columns: auto minmax(0, 1fr); padding: .7rem; }
  .ts-stat { flex: 1; min-width: 0; }
  .upgrade-grid { grid-template-columns: 1fr; }
  .ul-head small { display: none; }
}

/* Tool facts on gathering pages */
.card-hp { color: #9ee26f; font-weight: 700; }
.fact .ia-emblem { width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 1px 1px #000); }
.tool-callout .btn .ia-emblem { width: 1.15rem; height: 1.15rem; }

/* General supplies: consumables bought in bundles into the bank */
.supply-intro { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .78rem; color: var(--text-3); }
.supply-intro .ia-glyph { width: .9rem; height: .9rem; color: var(--gold-3); }
.supply-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: .5rem; }
.supply-card { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: .55rem; border: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, rgba(34, 50, 76, .55), rgba(12, 19, 32, .75)); }
.supply-card .well { width: 3.2rem; }
.supply-copy { display: grid; gap: .08rem; min-width: 0; }
.supply-copy strong { font: 600 .98rem/1.1 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supply-copy small { font-size: .7rem; color: var(--text-3); }
.supply-price { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 700; color: var(--gold-1); }
.supply-price .ia-emblem { width: .95rem; height: .95rem; }
.supply-buy { display: grid; gap: .25rem; }
.supply-buy .btn { min-width: 2.6rem; justify-content: center; }

/* Bank space: one more space per purchase, and how the price grows (views/store.mjs bankSpaceSection) */
.bank-ladder-rows { display: grid; gap: .2rem; }
.bank-ladder-rows > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .26rem .5rem; border-radius: .35rem; background: rgba(0, 0, 0, .25); font-size: .78rem; color: var(--text-2); }
.bank-ladder-rows > div b { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-1); }
.bank-ladder-rows .ia-emblem { width: .95rem; height: .95rem; }
.bank-ladder-rows > .is-owned { opacity: .45; }
.bank-ladder-rows > .is-next { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 55%, transparent) inset; color: var(--gold-1); }
.bank-ladder .uc-section { display: grid; gap: .45rem; }