.pass-item-art {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  color: inherit;
  cursor: help;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.pass-item-art:hover,
.pass-item-art:focus-visible,
.pass-item-art[aria-expanded="true"] {
  border-color: var(--pass-accent, #ffd566);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass-primary, #6b5be8) 28%, transparent),
              0 0 22px color-mix(in srgb, var(--pass-secondary, #5c9cff) 34%, transparent);
  transform: translateY(-1px);
}

.market-item-tooltip[hidden] { display: none !important; }

.market-item-tooltip {
  position: fixed;
  z-index: 2147482000;
  width: min(350px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  padding: 10px;
  overflow: auto;
  border: 2px solid #7c8fae;
  border-radius: 7px;
  color: #161616;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(239,244,250,.99));
  box-shadow: 0 14px 42px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.9);
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.38;
  overscroll-behavior: contain;
  animation: infinity-item-tooltip-in 120ms ease-out;
}

@keyframes infinity-item-tooltip-in {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.market-tooltip-head { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 10px; }
.market-tooltip-art {
  width: 88px;
  min-height: 94px;
  display: grid;
  place-items: center;
  border-right: 1px solid #bdc6d2;
  background: linear-gradient(135deg,#f7f9fc,#e8edf5);
}
.market-tooltip-art img {
  max-width: 78px;
  max-height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(42,55,76,.28));
}
.market-tooltip-copy h4 {
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #aeb8c6;
  color: #202020;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.market-tooltip-effects,.market-tooltip-card { display: grid; gap: 2px; }
.market-tooltip-effects strong { color: #202020; font-size: 13px; font-weight: 800; }
.market-tooltip-muted { margin: 0; color: #687282; font-size: 11px; }
.market-tooltip-rule { height: 1px; margin: 9px 0 7px; background: #aeb8c6; }
.market-tooltip-stats { display: grid; gap: 2px; margin: 0; }
.market-tooltip-stats > div { display: flex; gap: 5px; }
.market-tooltip-stats dt { color: #113fb0; font-weight: 900; }
.market-tooltip-stats dt::after { content: ":"; }
.market-tooltip-stats dd { margin: 0; color: #111; font-weight: 700; }
.market-tooltip-sub { display: grid; gap: 5px; margin-top: 9px; padding-top: 7px; border-top: 1px solid #c2cad5; }
.market-tooltip-sub > span { color: #113fb0; font-weight: 900; }
.market-tooltip-card { padding: 6px 7px; border-left: 3px solid #7b48ca; background: rgba(110,80,181,.08); }
.market-tooltip-card b { color: #34205e; }
.market-tooltip-card small,.market-tooltip-option { color: #222; font-size: 11px; font-weight: 700; }
.market-tooltip-hint { display: none; margin: 9px 0 0; color: #687282; font-size: 10px; text-align: center; }

@media (max-width: 520px) {
  .market-item-tooltip { width: min(330px, calc(100vw - 16px)); }
  .market-tooltip-head { grid-template-columns: 76px minmax(0,1fr); }
  .market-tooltip-art { width: 76px; min-height: 82px; }
  .market-tooltip-art img { max-width: 68px; max-height: 76px; }
}

@media (hover: none), (pointer: coarse) {
  .pass-item-art { cursor: pointer; }
  .market-tooltip-hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .pass-item-art { transition: none; }
  .market-item-tooltip { animation: none; }
}