/* ═══════════════════════════════════════════════════════════════
   HoK Vault — Skin Cards
   Apple-Inspired Liquid Glass Card Design
   Only 2 Layout Modes: Poster (Primary) & List (Compact)
   No White Outlines · No Neon Glow · Layered Translucency
   ═══════════════════════════════════════════════════════════════ */

/* ───────────── GRID CONTAINER ───────────── */

#items-grid {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#items-grid[data-layout="poster"] {
  display: grid;
  gap: 16px;
}

@media (max-width: 640px) {
  #items-grid[data-layout="poster"] {
    gap: 10px;
  }
}

/* ───────────── POSTER CARD (PRIMARY VIEW) ───────────── */

.skin-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 5.2;
  height: auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: clamp(14px, 4cqi, 22px);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-md)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  animation: cardReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  container-type: inline-size;
  user-select: none;
}

@media (max-width: 640px) {
  .skin-card {
    border-radius: clamp(12px, 3.5cqi, 18px);
    min-height: 140px;
  }
}

.skin-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
}

.skin-card:active {
  transform: translateY(-1px) scale(0.995);
}

/* Accessible focus ring using accent */
.skin-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-20), var(--glass-shadow-hover);
}

/* ───────────── CARD ARTWORK & PLACEHOLDER ───────────── */

.skin-card-img,
.skin-card-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  z-index: 1;
}

.skin-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.skin-card:hover .skin-card-img img {
  transform: scale(1.04);
}

.skin-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
}

.skin-card-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.14;
}

.skin-card-placeholder[data-r="basic"]::before { background: linear-gradient(135deg, #94a3b8, #475569); }
.skin-card-placeholder[data-r="rare"]::before { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.skin-card-placeholder[data-r="epic"]::before { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.skin-card-placeholder[data-r="epic_limited"]::before { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.skin-card-placeholder[data-r="legend"]::before { background: linear-gradient(135deg, #f0b429, #b44d12); }
.skin-card-placeholder[data-r="legend_limited"]::before { background: linear-gradient(135deg, #f0b429, #d97706); }
.skin-card-placeholder[data-r="precious"]::before { background: linear-gradient(135deg, #ec4899, #be185d); }
.skin-card-placeholder[data-r="flawless"]::before { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.skin-card-placeholder[data-r="treasure_flawless"]::before { background: linear-gradient(135deg, #f59e0b, #06b6d4); }
.skin-card-placeholder[data-r="mythic"]::before { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.skin-card-placeholder-icon {
  font-size: clamp(1.8rem, 10cqi, 2.5rem);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* ───────────── CARD BODY (LAYERED OVER ARTWORK) ───────────── */

.skin-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: clamp(14px, 8cqi, 28px) clamp(8px, 4cqi, 14px) clamp(8px, 4cqi, 12px) clamp(8px, 4cqi, 14px);
  background: var(--card-gradient-overlay);
  backdrop-filter: blur(clamp(1px, 1.5cqi, 3px));
  -webkit-backdrop-filter: blur(clamp(1px, 1.5cqi, 3px));
  border: none;
  border-radius: 0 0 clamp(14px, 4cqi, 22px) clamp(14px, 4cqi, 22px);
}

.skin-card-hero {
  font-size: clamp(7px, 3.8cqi, 10.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-light);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-scheme="light"] .skin-card-hero {
  color: var(--accent-dark);
  text-shadow: none;
}

.skin-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.72rem, 5.5cqi, 1.02rem);
  font-weight: 800;
  line-height: 1.2;
  margin-top: 1px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-scheme="light"] .skin-card-name {
  color: var(--text-primary);
  text-shadow: none;
}

.skin-card-price {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(8px, 4cqi, 11.5px);
  font-weight: 700;
  color: var(--accent-light);
}

[data-scheme="light"] .skin-card-price {
  color: var(--accent-dark);
}

.skin-card-price .price-unit {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* ───────────── THREE-DOT CARD ACTION BUTTON ───────────── */

.skin-card .card-menu-trigger {
  width: clamp(26px, 11cqi, 32px);
  height: clamp(26px, 11cqi, 32px);
  border-radius: 9999px;
  background: var(--input-bg);
  border: 1px solid var(--glass-border-subtle);
  color: var(--text-tertiary);
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 25;
  flex-shrink: 0;
}

.skin-card .card-menu-trigger:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
  transform: scale(1.05);
}

.skin-card .card-menu-trigger:active {
  background: var(--accent-15);
  color: var(--accent);
  transform: scale(0.96);
}

@media (pointer: coarse) {
  .skin-card .card-menu-trigger {
    min-width: 38px;
    min-height: 38px;
  }
}

/* ───────────── OWNED STATE (SUBTLE & REFINED) ───────────── */

.skin-card.owned {
  border-color: rgba(16, 185, 129, 0.18);
}

.skin-card.owned .skin-card-img img {
  filter: brightness(0.78) saturate(0.9);
}

.skin-card.owned:hover .skin-card-img img {
  filter: brightness(0.92) saturate(1);
}

.owned-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(16, 185, 129, 0.2);
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ───────────── REFINED BADGES (LOW SATURATION, GLASS) ───────────── */

.rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: clamp(1px, 1cqi, 3px) clamp(4px, 2cqi, 8px);
  border-radius: 8px;
  font-size: clamp(6.5px, 3.5cqi, 9.5px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid transparent;
}

.rb-basic {
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.12);
}

.rb-rare {
  background: rgba(59, 130, 246, 0.10);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.14);
}

.rb-epic {
  background: rgba(139, 92, 246, 0.10);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.14);
}

.rb-epic_limited {
  background: rgba(139, 92, 246, 0.14);
  color: #c084fc;
  border-color: rgba(139, 92, 246, 0.18);
}

.rb-legend {
  background: rgba(240, 180, 41, 0.10);
  color: #fbbf24;
  border-color: rgba(240, 180, 41, 0.14);
}

.rb-legend_limited {
  background: rgba(240, 180, 41, 0.14);
  color: #fde68a;
  border-color: rgba(240, 180, 41, 0.18);
}

.rb-precious {
  background: rgba(236, 72, 153, 0.10);
  color: #f472b6;
  border-color: rgba(236, 72, 153, 0.14);
}

.rb-flawless {
  background: rgba(6, 182, 212, 0.10);
  color: #22d3ee;
  border-color: rgba(6, 182, 212, 0.14);
}

.rb-treasure_flawless {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.16);
}

.rb-mythic {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.16);
}

/* Light mode rarity badge colors */
[data-scheme="light"] .rb-basic { color: #475569; }
[data-scheme="light"] .rb-rare { color: #2563eb; }
[data-scheme="light"] .rb-epic { color: #7c3aed; }
[data-scheme="light"] .rb-epic_limited { color: #9333ea; }
[data-scheme="light"] .rb-legend { color: #d97706; }
[data-scheme="light"] .rb-legend_limited { color: #b45309; }
[data-scheme="light"] .rb-precious { color: #db2777; }
[data-scheme="light"] .rb-flawless { color: #0891b2; }
[data-scheme="light"] .rb-treasure_flawless { color: #d97706; }
[data-scheme="light"] .rb-mythic { color: #dc2626; }

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid transparent;
}

.sb-available {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.15);
}

.sb-upcoming {
  background: rgba(99, 102, 241, 0.1);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.15);
}

.sb-expired {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.15);
}

/* Priority Dots (Subtle Ambient Glow, No Harsh RGB Glow) */
.priority-dot {
  width: clamp(4px, 2cqi, 7px);
  height: clamp(4px, 2cqi, 7px);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pd-must {
  background: #ef4444;
}

.pd-high {
  background: #f59e0b;
}

.pd-medium {
  background: #8b5cf6;
}

.pd-low {
  background: var(--text-muted);
}

/* ───────────── LIST MODE (COMPACT DATA-ORIENTED) ───────────── */

#items-grid[data-layout="list"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#items-grid[data-layout="list"] .skin-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  aspect-ratio: auto;
  height: auto;
  min-height: unset;
  padding: 12px 18px;
  border-radius: 18px;
  justify-content: flex-start;
}

#items-grid[data-layout="list"] .skin-card-img,
#items-grid[data-layout="list"] .skin-card-placeholder {
  position: relative;
  inset: auto;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
}

#items-grid[data-layout="list"] .skin-card-body {
  position: relative;
  inset: auto;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 16px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
}

#items-grid[data-layout="list"] .skin-card-name {
  color: var(--text-primary);
  text-shadow: none;
  font-size: 0.95rem;
}

#items-grid[data-layout="list"] .skin-card-hero {
  color: var(--text-tertiary);
  text-shadow: none;
  font-size: 10px;
}

#items-grid[data-layout="list"] .skin-card-price {
  color: var(--accent);
  font-size: 1rem;
}

#items-grid[data-layout="list"] .skin-card-price .price-unit {
  color: var(--text-tertiary);
}

/* ───────────── CARD REVEAL STAGGER ANIMATIONS ───────────── */

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.skin-card:nth-child(1) { animation-delay: 0.02s; }
.skin-card:nth-child(2) { animation-delay: 0.04s; }
.skin-card:nth-child(3) { animation-delay: 0.06s; }
.skin-card:nth-child(4) { animation-delay: 0.08s; }
.skin-card:nth-child(5) { animation-delay: 0.10s; }
.skin-card:nth-child(6) { animation-delay: 0.12s; }
.skin-card:nth-child(7) { animation-delay: 0.14s; }
.skin-card:nth-child(8) { animation-delay: 0.16s; }