.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inventory-grid .inventory-card {
  display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; min-width: 0; padding: 10px;
  overflow: hidden; border: 1px solid #b5522b; border-radius: 23px;
  background: radial-gradient(ellipse at 50% 0, #7231182e, transparent 65%), linear-gradient(150deg, #2a160f, #170e0a 75%);
  box-shadow: inset 0 1px 1px #ffd69b35, inset 0 0 16px #ff65210c, 0 8px 24px #0004;
  animation: inventory-card-reveal 420ms cubic-bezier(.22, 1, .36, 1) both;
}
.inventory-card .inventory-art {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden;
  border-radius: 16px; background: radial-gradient(ellipse at 50% 75%, #d9512433, transparent 62%), linear-gradient(160deg, #34170c88, #1c100a88);
}
.inventory-art::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 17% 70%, #ffbf6655 0 1px, transparent 2px), radial-gradient(circle at 77% 30%, #ffae5d77 0 1px, transparent 2px), radial-gradient(circle at 30% 19%, #f8893444 0 1px, transparent 3px); }
.inventory-card .inventory-art > img { display: block; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 7px 12px #ff701b30); }
.inventory-card .inventory-art > .stage-gift-emoji { display: grid; place-items: center; width: 86%; height: 86%; font-size: clamp(65px, 22vw, 145px); line-height: 1; }
.inventory-quantity { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; min-width: 33px; height: 30px; padding: 0 8px; border: 1px solid #a7603d88; border-radius: 12px; color: #fff1df; background: #2d1712e6; box-shadow: inset 0 1px #ffc99525; font-size: 14px; font-weight: 650; line-height: 1; }
.inventory-card .inventory-card-copy { display: flex; flex-direction: column; gap: 6px; padding: 12px 3px 11px; min-width: 0; flex: 1; }
.inventory-card .inventory-card-copy h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-height: 1.25em; color: #fff3e6; font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.inventory-stars { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; white-space: nowrap; color: #ffe9b7; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.inventory-stars .inventory-star { display: block; flex: none; width: 22px; height: 22px; object-fit: contain; }
.inventory-card .inventory-stars > span { font-size: inherit; font-weight: inherit; line-height: inherit; }
.inventory-grid .inventory-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.inventory-grid .inventory-actions .inventory-sell {
  display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; width: 100%; height: 50px; min-height: 50px; padding: 8px 5px;
  border: 1px solid #ffbc67; border-radius: 15px; color: #fff5e7; background: linear-gradient(115deg, #ff9b28, #ff641c 45%, #e7350c);
  box-shadow: inset 0 1px 1px #ffe9af80, 0 4px 14px #f25c202e; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.15;
  transition: filter 180ms ease, opacity 180ms ease;
}
.inventory-card .inventory-sell-label { white-space: nowrap; font-size: inherit; font-weight: inherit; line-height: inherit; }
.inventory-sell .inventory-stars { color: #fff6e7; font-size: 14px; gap: 3px; }
.inventory-sell .inventory-star { width: 18px; height: 18px; }
.inventory-sell:active { filter: brightness(.9); }
.inventory-sell:focus-visible, .inventory-telegram:focus-visible { outline: 2px solid #ffce75; outline-offset: 2px; }
.inventory-grid .inventory-actions .inventory-telegram {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; min-height: 43px; padding: 8px 6px;
  border: 1px solid #a660383d; border-radius: 14px; color: #d3b6a1; background: linear-gradient(135deg, #4b281a88, #2b1913);
  font-family: inherit; font-size: 10px; font-weight: 500; line-height: 1.25; text-align: left;
}
.inventory-card .inventory-telegram > span { flex: 1; min-width: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.inventory-telegram svg { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: #e9a26a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inventory-telegram svg.inventory-row-tail { width: 13px; height: 13px; stroke: #a77e62; }
.inventory-telegram.is-disabled { cursor: default; }
.inventory-item-status { display: grid; place-items: center; min-height: 46px; border: 1px solid #ab69482c; border-radius: 14px; color: #b9957d; background: #3f261b55; font-size: 12px; }
.inventory-card.is-unavailable .inventory-art > img { opacity: .55; }
@keyframes inventory-card-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 560px) { .inventory-grid { gap: 16px; } .inventory-grid .inventory-card { padding: 15px; } .inventory-card .inventory-card-copy h3 { font-size: 20px; } .inventory-grid .inventory-actions .inventory-sell { min-height: 52px; font-size: 17px; gap: 7px; } .inventory-sell .inventory-stars { font-size: 18px; } .inventory-grid .inventory-actions .inventory-telegram { font-size: 13px; padding: 10px; gap: 8px; } }
@media (max-width: 359px) { .inventory-grid { gap: 9px; } .inventory-grid .inventory-card { padding: 8px; border-radius: 20px; } .inventory-card .inventory-card-copy h3 { font-size: 13px; } .inventory-grid .inventory-actions .inventory-sell { font-size: 11px; } .inventory-sell .inventory-stars { font-size: 12px; } .inventory-sell .inventory-star { width: 16px; height: 16px; } .inventory-grid .inventory-actions .inventory-telegram { font-size: 9px; gap: 4px; } .inventory-telegram svg { width: 15px; height: 15px; } }
@media (prefers-reduced-motion: reduce) { .inventory-grid .inventory-card { animation: none; } }
