/* ==========================================================================
   RoCandy — Sell page
   Your inventory on the left (trade-page cards), the sell panel on the right.
   ========================================================================== */
.sell-page { padding: 6rem 1.25rem 3rem; color: var(--cream-100); }
.sell-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1rem; align-items: start; max-width: var(--container); margin: 0 auto; }
.sell-page .panel { animation: fadeUp .45s var(--ease-out) both; }
.sell-panel { animation-delay: .08s; }

/* ---------- inventory ---------- */
.sell-inv .panel-bar h2 { margin-right: .5rem; }
.sell-inv .coin { color: rgba(255, 242, 228, .7); }
.sell-inv .coin b { color: var(--cream-50); }
.sell-inv .item-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.sell-inv .grid-scroll { max-height: calc(4.5 * 186px + 4 * .45rem); }
.sell-inv .item { padding-bottom: .9rem; }
.sell-inv .item::after {                 /* rarity bar along the bottom, like the reference cards */
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--r); opacity: .85;
}
.sell-inv .item[aria-pressed="true"]::after { opacity: 1; height: 4px; }
.sell-inv .item-price { font-size: .9rem; color: var(--cream-50); }
.sell-inv .item.is-hidden { display: none; }

/* ---------- sell panel ---------- */
.sell-panel { position: sticky; top: 5.5rem; padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.lbl { font: 900 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 242, 228, .55); }
.sell-rank { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-bottom: .9rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, .18); }
.sell-rank b { display: block; margin-top: .3rem; font: 800 .9rem/1 var(--font-body); color: var(--cream-50); }
.sell-rank .right { text-align: right; }
.sell-rank .pink { color: var(--pink-300); }
.sell-rank-mid { text-align: center; }
.sell-rank-mid b { display: inline; font-size: .95rem; }
.sell-rank-mid span { font: 700 .75rem/1 var(--font-body); color: rgba(255, 242, 228, .45); margin-left: .2rem; }
.sell-rank-bar { position: relative; height: 6px; margin-top: .5rem; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sell-rank-bar i { position: absolute; inset: 0 auto 0 0; width: max(var(--at, 0%), 3px); border-radius: 4px; background: linear-gradient(90deg, var(--butter-300), var(--pink-300)); }
.sell-amount { font: 700 clamp(2.2rem, 3vw, 2.8rem)/1 'Space Grotesk', var(--font-body); letter-spacing: -.03em; color: var(--cream-50); transition: transform .2s var(--ease-out); }
.sell-amount.is-bump { transform: scale(1.04); }
.sell-all { align-self: flex-start; margin: .1rem 0 .9rem; padding: 0; border: 0; background: none; font: 800 .82rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--pink-300); cursor: pointer; }
.sell-all:hover { color: var(--pink-200); text-decoration: underline; text-underline-offset: 3px; }
.methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .2rem; }
.method {
  position: relative; display: flex; align-items: center; gap: .55rem; min-height: 60px; padding: .6rem .7rem; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .05); color: var(--cream-50); font: 800 .78rem/1.15 var(--font-body); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 2px transparent; transition: background .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
}
.method:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.method.is-active { background: rgba(110, 217, 192, .1); box-shadow: inset 0 0 0 2px var(--mint-400), 0 10px 22px -14px rgba(110, 217, 192, .8); }
.method > svg { flex: 0 0 30px; width: 30px; height: 30px; }
.method-logo { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.method-wide { grid-column: 1 / -1; min-height: 54px; }
.method-wide .method-txt { display: flex; align-items: baseline; gap: .6rem; }
.method-wide .method-txt small { text-transform: none; letter-spacing: 0; font-size: .72rem; }
.method-txt { display: grid; gap: .15rem; min-width: 0; }
.method-txt b { font-weight: 800; }
.method-txt small { font: 700 .66rem/1 var(--font-body); color: rgba(255, 242, 228, .5); letter-spacing: .04em; text-transform: uppercase; }
.method-badge { position: absolute; top: -7px; right: -4px; padding: .28rem .45rem; border-radius: 7px; background: #58E38A; color: #0D2E1F; font: 900 .62rem/1 var(--font-body); }
.sell-note { margin: .2rem 0 .8rem; font: 700 .74rem/1.4 var(--font-body); color: rgba(255, 242, 228, .5); }
.sell-note b { color: rgba(255, 242, 228, .8); }
.sell-note span { color: var(--mint-400); }
.sell-panel .field-label { margin-top: .2rem; }
.sell-totals { display: grid; gap: .55rem; margin: 1rem 0 .4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.sell-totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sell-totals dt { font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 242, 228, .6); }
.sell-totals dd { margin: 0; font: 800 .9rem/1 var(--font-body); color: var(--cream-50); }
.sell-totals .total { margin-top: .3rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.sell-totals .total dt { color: var(--cream-50); font-size: .95rem; }
.sell-totals .total dd { font: 700 1.7rem/1 'Space Grotesk', var(--font-body); letter-spacing: -.02em; }
.sell-avg { margin: 0 0 .9rem; text-align: center; font: 700 .72rem/1.4 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 242, 228, .45); }
.sell-avg b { color: #58E38A; }
.sell-claim { width: 100%; }
.sell-fine { margin: .6rem 0 0; text-align: center; font: 700 .72rem/1.4 var(--font-body); color: rgba(255, 242, 228, .4); }

@media (max-width: 1100px) { .sell-layout { grid-template-columns: minmax(0, 1fr) 360px; } .methods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .sell-page { padding: 5.5rem 1rem 2.5rem; }
  .sell-layout { grid-template-columns: 1fr; }
  .sell-panel { position: static; }
  .sell-inv .grid-scroll { max-height: calc(3.5 * 186px + 3 * .45rem); }
}
@media (max-width: 640px) {                /* phones show the whole list, like the trade page */
  .sell-inv .grid-scroll { max-height: none; overflow: visible; }
  .sell-inv .grid-fade::after { display: none; }
}
@media (max-width: 480px) { .methods { grid-template-columns: 1fr 1fr; } .sell-rank { grid-template-columns: 1fr 1fr; } .sell-rank-mid { grid-column: 1 / -1; } }

.icon-sq.is-spinning svg { animation: sellSpin .6s linear; }
@keyframes sellSpin { to { transform: rotate(360deg); } }