/* Stable full-bleed row (background spans viewport, content stays centered) */
.bleed-row {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
}

body.theme-casespin {
  zoom: 1 !important;
  width: 100% !important;
  min-height: 100%;
  height: auto !important;
  transform: none !important;
}

html {
  overflow-x: hidden;
}
html { overflow-y: scroll; }
body.is-home { overflow-x: hidden; }

/* Global Logo Pulse Animation */
@keyframes logoPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(0, 224, 255, 0.6));
    }
    50% { 
        opacity: 0.4; 
        transform: scale(0.95);
        filter: drop-shadow(0 0 30px rgba(255, 0, 194, 0.8));
    }
}

/* CaseSpin Premium Theme v2.0 - Modern Gaming Platform */
:root {
  /* Background Colors - New Palette */
  --bg-0: #0B0E15; /* Deep navy-black */
  --bg-1: #0B0E15; /* Deep navy-black */
  --bg-2: #0B0E15; /* Section background */
  --bg-3: #1a1f2e; /* Elevated surfaces */
  --bg-glass: rgba(11, 14, 21, 0.85); /* Glass morphism */
  
  /* Text Colors - New Palette */
  --text-0: #E5E5E5; /* Primary text - elegant white */
  --text-1: #E5E5E5; /* Secondary text */
  --text-2: #8C8FA5; /* Muted text - cool gray */
  --text-3: #6a6d7f; /* Disabled text */
  
  /* Brand Colors - New Palette */
  --primary: #00E0FF; /* Cyan accent */
  --primary-light: #33e7ff;
  --primary-dark: #00b8d4;
  --secondary: #FF00C2; /* Magenta highlight */
  --secondary-light: #ff33d1;
  --secondary-dark: #cc0099;
  
  /* Status Colors - Using palette colors */
  --success: #00E0FF; /* Cyan from palette */
  --success-light: #33e7ff;
  --warning: #FF00C2; /* Magenta from palette */
  --warning-light: #ff33d1;
  --danger: #FF00C2; /* Magenta from palette */
  --danger-light: #ff33d1;
  
  /* Special Effects */
  --gold: #fbbf24; /* Premium gold */
  --gold-light: #fcd34d;
  --neon-glow: #00E0FF;
  --neon-secondary: #FF00C2;
  
  /* Borders & Shadows */
  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  
  /* Rarity Colors - CS:GO Inspired */
  --rarity-common: #b0c4de;
  --rarity-uncommon: #5e98d9;
  --rarity-rare: #4b69ff;
  --rarity-mythical: #8847ff;
  --rarity-legendary: #d32ce6;
  --rarity-ancient: #eb4b4b;
  --rarity-immortal: #e4ae39;
}

/* Recent Drops - wyśrodkowanie itemków */
#recent-drops {
  display: flex !important;
  align-items: center !important;
  min-height: 120px !important;
}

#recent-drops > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 100px !important;

  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.15);
  --shadow: rgba(3, 8, 20, 0.6);
}

/* Typography normalization to avoid scattered text */
.theme-casespin, .theme-casespin * {
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  text-rendering: optimizeLegibility;
}

/* Prevent buttons/links from awkward wrapping on icons */
.theme-casespin a, .theme-casespin button {
  white-space: normal;
}

/* Global background with premium gaming gradients */
body.theme-casespin {
  color: var(--text-0);
  background: #0B0E15;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Animacja tła wyłączona */

/* Sticky Header */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden;
}

.Navigation {
  position: relative;
  z-index: 1000;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.Navigation.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.Navigation .Header {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.Navigation.is-stuck .Header {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
}

/* Gdy header jest przyklejony, usuń niebieską obwódkę/glow z nav */
.Navigation.is-stuck.glass {
  background: #0B0E15 !important;
  border-color: rgba(15, 23, 42, 0.85) !important;
  box-shadow: none !important;
}

.TopRight a.Deposit {
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  animation: deposit-pulse 1s ease-in-out infinite;
}

.TopRight a.Deposit:hover {
  filter: brightness(0.9);
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.9);
  animation: none;
}

@keyframes deposit-pulse {
  0%, 100% {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.8);
  }
}

/* Modern Glass Morphism & Cards */
.glass {
  background: rgba(11, 14, 21, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 224, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.card {
  background: linear-gradient(145deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.panel {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Modern Button System */
.btn-base {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.025em;
  color: white;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
}

.btn-base:hover { 
  transform: translateY(-2px) scale(1.02); 
  filter: brightness(1.1);
}

.btn-base:active { 
  transform: translateY(0) scale(0.98); 
  filter: brightness(0.95);
}

.btn-gradient-primary {
  background: linear-gradient(135deg, #4b5563, #6b7280);
  box-shadow: 0 8px 32px rgba(75, 85, 99, 0.4), 0 4px 16px rgba(107, 114, 128, 0.2);
}

.btn-gradient-primary:hover {
  background: linear-gradient(135deg, #374151, #4b5563);
  box-shadow: 0 12px 40px rgba(75, 85, 99, 0.5), 0 6px 20px rgba(107, 114, 128, 0.3);
}

.btn-gradient-steam {
  background: linear-gradient(135deg, #1b2838, #2a475e);
  box-shadow: 0 8px 32px rgba(27, 40, 56, 0.6);
}

.btn-gradient-success {
  background: linear-gradient(135deg, #4b5563, #6b7280);
  box-shadow: 0 8px 32px rgba(75, 85, 99, 0.4);
}

.btn-outline-glow {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-outline-glow:hover {
  border-color: var(--primary);
  background: rgba(0, 224, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 224, 255, 0.3);
}

/* Premium Animation System */
.btn-shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-120%);
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine { 
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); } 
}

/* Pulse Animation for Important Elements */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 40px rgba(0, 224, 255, 0.6), 0 0 20px rgba(255, 0, 194, 0.3);
    transform: scale(1.02);
  }
}

/* Floating Animation */
.float-animation {
  animation: floatSmooth 6s ease-in-out infinite;
}

@keyframes floatSmooth {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Slide In Animations */
.slide-in-left {
  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-right {
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-up {
  animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger Animation for Grid Items */
.stagger-animation {
  opacity: 0;
  transform: translateY(30px);
  animation: staggerFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-animation:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation:nth-child(6) { animation-delay: 0.6s; }

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Particle Effect Background */
.particle-bg {
  position: relative;
  overflow: hidden;
}

.particle-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(139, 92, 246, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(6, 182, 212, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(251, 191, 36, 0.3), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(139, 92, 246, 0.3), transparent);
  background-repeat: repeat;
  background-size: 150px 100px;
  animation: particleFloat 20s linear infinite;
  opacity: 0.4;
}

@keyframes particleFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-100px); }
}

/* Glow ring */
.glow {
  box-shadow: 0 0 0px rgba(255,255,255,0), 0 0 40px -8px var(--primary-2);
}
.glow:hover {
  box-shadow: 0 0 0px rgba(255,255,255,0), 0 0 50px -8px var(--secondary);
}

/* Gradient borders */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  z-index: -1;
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 9999px; font-weight: 700; font-size: .75rem;
}
.badge-success { background: rgba(34,197,94,.15); color: #34d399; border: 1px solid rgba(34,197,94,.35); }
.badge-danger { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.35); }
.badge-info { background: rgba(0,229,255,.15); color: #6ee7ff; border: 1px solid rgba(0,229,255,.35); }

/* List / cards hover */
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.45); }

/* Nav enhancements */
.nav-blur { background: rgba(15, 21, 48, .7); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-underline a{ position: relative; }
.nav-underline a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: right .3s ease; }
.nav-underline a:hover::after{ right: 0; }

/* Subtle float */
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* Shimmer skeleton */
.skeleton { position: relative; background: #1d2445; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: shimmer 1.6s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Tables */
.table-modern { border-collapse: separate; border-spacing: 0 10px; }
.table-modern tr { background: rgba(255,255,255,.03); }
.table-modern tr:hover { background: rgba(255,255,255,.05); }
.table-modern td, .table-modern th { padding: .85rem 1rem; }

/* Inputs */
.input-modern { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.15); color: var(--text-0); border-radius: 12px; padding: .7rem .9rem; }
.input-modern:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0,229,255,.15); }

/* Toasts (container already exists in app) */
.toast-wow { border-left: 4px solid var(--secondary); background: rgba(15,21,48,.9); backdrop-filter: blur(8px); }

/* Utility helpers to apply quickly on existing markup */
.u-gradient-text { background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-muted { color: var(--muted); }
.u-divider { border-color: rgba(255,255,255,.08) !important; }

/* Steam specific button color harmonized */
.btn-steam {
  background: linear-gradient(90deg, #1b2838, #2a475e);
  color: #fff;
}

/* Deposit button vivid */
.btn-deposit { background: linear-gradient(90deg, #10b981, #22d3ee); }

/* Anim gradient bg (for hero sections) */
.anim-gradient-bg {
  background: linear-gradient(110deg, rgba(108,92,231,.25), rgba(0,229,255,.18), rgba(255,77,109,.20));
  background-size: 200% 200%;
  animation: gradientMove 12s ease infinite;
}
@keyframes gradientMove { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }

/* Premium Loading Animations */
.loading-skeleton {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 25%, rgba(139, 92, 246, 0.3) 50%, rgba(139, 92, 246, 0.1) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.loading-skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: loading-shine 2s infinite;
}

@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes loading-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Loading Spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top: 3px solid #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
}

.loading-spinner::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid transparent;
    border-top: 2px solid #06b6d4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite reverse;
}

/* Loading Dots */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(45deg, #8b5cf6, #06b6d4);
    animation: loading-bounce 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes loading-bounce {
    0%, 80%, 100% { 
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% { 
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Loading Card Skeleton */
.case-card-skeleton {
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    animation: pulse-glow 2s infinite;
}

.case-card-skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    animation: skeleton-slide 2s infinite;
}

@keyframes skeleton-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Case cards hover animation */
.case-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.case-card .CaseOutline {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.case-card .HowlCaseImage {
    transition: transform 0.25s ease;
}

.case-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.case-card:hover .CaseOutline {
    box-shadow: 0 0 30px rgba(148, 163, 184, 0.6);
    border-color: rgba(148, 163, 184, 0.9) !important;
}

.case-card:hover .HowlCaseImage {
    transform: scale(1.05);
}

/* --- Global overrides for legacy Tailwind classes to fit theme --- */
.theme-casespin .bg-white {
  background: var(--glass) !important;
  color: var(--text-0) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 40px var(--shadow) !important;
}
.theme-casespin .text-gray-800 { color: var(--text-0) !important; }
.theme-casespin .text-gray-700 { color: var(--text-1) !important; }
.theme-casespin .text-gray-600 { color: var(--muted) !important; }
.theme-casespin .border-gray-200 { border-color: rgba(255,255,255,.12) !important; }
.theme-casespin .border-gray-300 { border-color: rgba(255,255,255,.16) !important; }
.theme-casespin .bg-gray-100 { background: rgba(255,255,255,.06) !important; }
.theme-casespin .bg-gray-200 { background: rgba(255,255,255,.08) !important; }
.theme-casespin .bg-gray-700 { background: rgba(15,21,48,.7) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255,255,255,.12) !important; }
.theme-casespin .bg-gray-800 { background: rgba(15,21,48,.65) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255,255,255,.12) !important; }
.theme-casespin .border-gray-700 { border-color: rgba(255,255,255,.12) !important; }

/* Containers spacing helpers */
.app-container {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  overflow: visible; /* allow full-bleed children to extend */
}
@media (min-width: 768px){
  .app-container { padding-left: 0; padding-right: 0; }
}

/* Full-bleed helper: stretch section to viewport width */
.full-bleed {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
  overflow: visible;
  box-sizing: border-box;
}

/* --- Inventory Drawer (Ekwipunek) --- */
#inventory-drawer {
  background: rgba(15, 21, 48, 0.88) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 40px rgba(3, 8, 20, 0.6) !important;
}

/* Grid / list */
#inventory-drawer .box-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px !important;
  align-content: start !important;
}

/* NOWE KARTY: czysty, prosty kafelek */
#inventory-drawer .gitem-small {
  position: relative;
  display: flex; flex-direction: column;
  height: 172px !important;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 26px rgba(3,8,20,.38);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#inventory-drawer .gitem-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(3,8,20,.5);
}
#inventory-drawer .gitem-small.selected {
  outline: 2px solid rgba(168,85,247,.9);
  outline-offset: 0;
  border-color: rgba(168,85,247,.8);
}
/* wyłącz poprzednie efekty */
#inventory-drawer .gitem-small::after { content: none !important; }

/* Image/logo background */
#inventory-drawer .image-logo {
  display: grid; place-items: center; width: 100%; height: 84px;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#inventory-drawer .image-logo img { max-width: 88%; max-height: 74%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }

/* Body */
#inventory-drawer .item-info {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
}
#inventory-drawer .item-weapon { font-size: 11px; color: var(--muted); margin: 0; letter-spacing: .01em; }
#inventory-drawer .item-skin { font-size: 13px; font-weight: 800; color: var(--text-0); margin: 0; letter-spacing: .01em; line-height: 1.15; }
#inventory-drawer .item-price {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: #22d3ee;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 8px;
  padding: 3px 8px;
}

/* pasek akcentu rarity po lewej stronie */
#inventory-drawer .gitem-small::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
}
#inventory-drawer .gitem-small.rarity-common::before { background: linear-gradient(180deg,#9ca3af,#6b7280); }
#inventory-drawer .gitem-small.rarity-uncommon::before { background: linear-gradient(180deg,#10b981,#065f46); }
#inventory-drawer .gitem-small.rarity-rare::before { background: linear-gradient(180deg,#3b82f6,#1e40af); }
#inventory-drawer .gitem-small.rarity-epic::before { background: linear-gradient(180deg,#9333ea,#5b21b6); }
#inventory-drawer .gitem-small.rarity-legendary::before { background: linear-gradient(180deg,#f59e0b,#b45309); }
#inventory-drawer .gitem-small.rarity-mythic::before { background: linear-gradient(180deg,#f43f5e,#9f1239); }

/* Select bubble (top-right) – prościej */
#inventory-drawer .box-select { position: absolute; right: 8px; top: 8px; z-index: 2; }
#inventory-drawer .select-circle {
  width: 18px; height: 18px; border-radius: 9999px; display: grid; place-items: center;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.2);
}
#inventory-drawer .gitem-small.selected .select-circle { background: rgba(168,85,247,.22); border-color: rgba(168,85,247,.7); }

/* Rarity tints dla image (lżejsze) */
#inventory-drawer .image-logo.rarity-common { background: linear-gradient(180deg, rgba(209,213,219,.14), rgba(31,41,55,.24)); }
#inventory-drawer .image-logo.rarity-uncommon { background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(31,41,55,.24)); }
#inventory-drawer .image-logo.rarity-rare { background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(31,41,55,.24)); }
#inventory-drawer .image-logo.rarity-epic { background: linear-gradient(180deg, rgba(147,51,234,.18), rgba(31,41,55,.24)); }
#inventory-drawer .image-logo.rarity-legendary { background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(31,41,55,.24)); }
#inventory-drawer .image-logo.rarity-mythic { background: linear-gradient(180deg, rgba(244,63,94,.18), rgba(31,41,55,.24)); }

/* Opcjonalne badże */
#inventory-drawer .quantity-badge {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-weight: 800; font-size: 11px;
  padding: 2px 6px; border-radius: 9999px;
}
#inventory-drawer .rarity-badge {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: rgba(168,85,247,.2);
  border: 1px solid rgba(216,180,254,.45);
  color: #e9d5ff; font-weight: 800; font-size: 10px; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 6px;
}

/* Empty state */
#inventory-empty { opacity: .8; }

/* Toolbar controls */
#inventory-drawer select,
#inventory-drawer input[type="text"],
#inventory-drawer .toolbar-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--text-0) !important;
}

/* Scrollbar for inventory list */
#inventory-grid::-webkit-scrollbar { width: 10px; }
#inventory-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }
#inventory-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }

@media (max-width: 640px) {
  #inventory-drawer .box-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  #inventory-drawer .gitem-small { height: 160px !important; }
  #inventory-drawer .image-logo { height: 80px; }
}

/* ==== HARD OVERRIDE: LIST LAYOUT (remove cards entirely) ==== */
#inventory-drawer .box-list {
  display: block !important;
}
#inventory-drawer .box-list .gitem-small {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 64px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}
#inventory-drawer .box-list .gitem-small + .gitem-small { border-top: 1px solid rgba(255,255,255,.08) !important; }
#inventory-drawer .box-list .gitem-small.selected { outline: none !important; border-color: transparent !important; }
#inventory-drawer .box-list .gitem-small::before { display: none !important; }

#inventory-drawer .box-list .image-logo {
  width: 56px !important; height: 56px !important;
  min-width: 56px !important;
  background: transparent !important;
  border: 0 !important;
}
#inventory-drawer .box-list .image-logo img { max-width: 100% !important; max-height: 100% !important; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); }

#inventory-drawer .box-list .item-info {
  padding: 0 !important;
  display: flex !important; flex-direction: column !important;
  gap: 2px !important; flex: 1 1 auto !important;
}
#inventory-drawer .box-list .item-weapon { font-size: 11px !important; margin: 0 !important; color: var(--muted) !important; }
#inventory-drawer .box-list .item-skin { font-size: 13px !important; margin: 0 !important; font-weight: 800 !important; color: var(--text-0) !important; }

#inventory-drawer .box-list .item-price {
  margin-left: auto !important;
  font-size: 12px !important; font-weight: 800 !important;
  color: #22d3ee !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

#inventory-drawer .box-select,
#inventory-drawer .select-circle { display: none !important; }

/* neutralize rarity backgrounds on image */
#inventory-drawer .image-logo[class*="rarity-"] { background: transparent !important; }

@media (max-width: 640px) {
  #inventory-drawer .box-list .gitem-small { height: 60px !important; padding: 8px 10px !important; }
  #inventory-drawer .box-list .image-logo { width: 52px !important; height: 52px !important; min-width: 52px !important; }
}

/* ==== HIDE ALL INVENTORY CARDS COMPLETELY ==== */
/* #inventory-drawer .gitem-small,
#inventory-items .gitem-small {
  display: none !important;
} */

/* ==== Item Slider Animation for case.php ==== */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* (width of item + margin) * number of original items */
    /* (192px + 16px) * N -- assuming N is the number of items before duplication */
    /* This will be calculated dynamically if needed, but for a seamless loop with duplicated items, we can use a large value */
    transform: translateX(calc(-208px * 20)); /* Adjust 20 to the number of original items */
  }
}

.animate-scroll {
  /* Adjust duration for speed */
  animation: scroll 40s linear infinite;
}

.group:hover .animate-scroll {
  animation-play-state: paused;
}

/* ========================================
   GLOBAL COLOR OVERRIDES - PALETTE ONLY
   ======================================== */

/* Replace all green colors with cyan */
.text-green-400, .text-green-500, .text-green-600, .text-emerald-400, .text-emerald-500 {
  color: #00E0FF !important;
}

.bg-green-400, .bg-green-500, .bg-green-600, .bg-emerald-400, .bg-emerald-500 {
  background-color: #00E0FF !important;
}

.border-green-400, .border-green-500, .border-green-600, .border-emerald-400, .border-emerald-500 {
  border-color: #00E0FF !important;
}

/* Replace all blue colors with cyan */
.text-blue-400, .text-blue-500, .text-blue-600 {
  color: #00E0FF !important;
}

.bg-blue-400, .bg-blue-500, .bg-blue-600 {
  background-color: #00E0FF !important;
}

.border-blue-400, .border-blue-500, .border-blue-600 {
  border-color: #00E0FF !important;
}

/* Replace all purple colors with magenta */
.text-purple-400, .text-purple-500, .text-purple-600 {
  color: #FF00C2 !important;
}

.bg-purple-400, .bg-purple-500, .bg-purple-600 {
  background-color: #FF00C2 !important;
}

.border-purple-400, .border-purple-500, .border-purple-600 {
  border-color: #FF00C2 !important;
}

/* Replace all yellow colors with cyan */
.text-yellow-400, .text-yellow-500, .text-yellow-600 {
  color: #00E0FF !important;
}

.bg-yellow-400, .bg-yellow-500, .bg-yellow-600 {
  background-color: #00E0FF !important;
}

.border-yellow-400, .border-yellow-500, .border-yellow-600 {
  border-color: #00E0FF !important;
}

/* Replace all red colors with magenta */
.text-red-400, .text-red-500, .text-red-600 {
  color: #FF00C2 !important;
}

.bg-red-400, .bg-red-500, .bg-red-600 {
  background-color: #FF00C2 !important;
}

.border-red-400, .border-red-500, .border-red-600 {
  border-color: #FF00C2 !important;
}

/* Replace cyan colors to ensure consistency */
.text-cyan-400, .text-cyan-500 {
  color: #00E0FF !important;
}

.bg-cyan-400, .bg-cyan-500 {
  background-color: #00E0FF !important;
}

/* Replace pink colors with magenta */
.text-pink-400, .text-pink-500, .text-pink-600 {
  color: #FF00C2 !important;
}

.bg-pink-400, .bg-pink-500, .bg-pink-600 {
  background-color: #FF00C2 !important;
}

/* Override Tailwind gradients */
.from-green-400, .from-green-500, .from-green-600, .from-emerald-400 {
  --tw-gradient-from: #00E0FF !important;
}

.to-green-400, .to-green-500, .to-green-600, .to-emerald-500 {
  --tw-gradient-to: #00E0FF !important;
}

.from-blue-400, .from-blue-500, .from-blue-600 {
  --tw-gradient-from: #00E0FF !important;
}

.to-blue-400, .to-blue-500, .to-blue-600 {
  --tw-gradient-to: #00E0FF !important;
}

.from-purple-400, .from-purple-500, .from-purple-600 {
  --tw-gradient-from: #FF00C2 !important;
}

.to-purple-400, .to-purple-500, .to-purple-600 {
  --tw-gradient-to: #FF00C2 !important;
}

.from-yellow-400, .from-yellow-500, .from-yellow-600 {
  --tw-gradient-from: #00E0FF !important;
}

.to-yellow-400, .to-yellow-500, .to-yellow-600 {
  --tw-gradient-to: #00E0FF !important;
}

.from-red-400, .from-red-500, .from-red-600 {
  --tw-gradient-from: #FF00C2 !important;
}

.to-red-400, .to-red-500, .to-red-600 {
  --tw-gradient-to: #FF00C2 !important;
}

.from-pink-400, .from-pink-500 {
  --tw-gradient-from: #FF00C2 !important;
}

.to-pink-400, .to-pink-500 {
  --tw-gradient-to: #FF00C2 !important;
}

/* Override shadow colors */
.shadow-green-400, .shadow-blue-400, .shadow-yellow-400 {
  --tw-shadow-color: rgba(0, 224, 255, 0.5) !important;
}

.shadow-purple-400, .shadow-red-400, .shadow-pink-400 {
  --tw-shadow-color: rgba(255, 0, 194, 0.5) !important;
}

/* Override hover states */
.hover\:text-green-400:hover, .hover\:text-green-500:hover, .hover\:text-blue-400:hover, 
.hover\:text-blue-500:hover, .hover\:text-yellow-400:hover, .hover\:text-yellow-500:hover {
  color: #00E0FF !important;
}

.hover\:text-purple-400:hover, .hover\:text-purple-500:hover, .hover\:text-red-400:hover, 
.hover\:text-red-500:hover, .hover\:text-pink-400:hover, .hover\:text-pink-500:hover {
  color: #FF00C2 !important;
}

.hover\:bg-green-400:hover, .hover\:bg-green-500:hover, .hover\:bg-blue-400:hover, 
.hover\:bg-blue-500:hover, .hover\:bg-yellow-400:hover, .hover\:bg-yellow-500:hover {
  background-color: #00E0FF !important;
}

.hover\:bg-purple-400:hover, .hover\:bg-purple-500:hover, .hover\:bg-red-400:hover, 
.hover\:bg-red-500:hover, .hover\:bg-pink-400:hover, .hover\:bg-pink-500:hover {
  background-color: #FF00C2 !important;
}

/* Override group-hover states */
.group:hover .group-hover\:text-green-400, .group:hover .group-hover\:text-green-500,
.group:hover .group-hover\:text-blue-400, .group:hover .group-hover\:text-blue-500,
.group:hover .group-hover\:text-yellow-400, .group:hover .group-hover\:text-yellow-500 {
  color: #00E0FF !important;
}

.group:hover .group-hover\:text-purple-400, .group:hover .group-hover\:text-purple-500,
.group:hover .group-hover\:text-red-400, .group:hover .group-hover\:text-red-500,
.group:hover .group-hover\:text-pink-400, .group:hover .group-hover\:text-pink-500 {
  color: #FF00C2 !important;
}

/* Override lighter/darker variants */
.text-green-300, .text-blue-300, .text-yellow-300, .text-emerald-300 {
  color: #33e7ff !important;
}

.text-purple-300, .text-red-300, .text-pink-300 {
  color: #ff33d1 !important;
}

.text-green-700, .text-blue-700, .text-yellow-700, .text-emerald-700 {
  color: #00b8d4 !important;
}

.text-purple-700, .text-red-700, .text-pink-700 {
  color: #cc0099 !important;
}

.bg-green-300, .bg-blue-300, .bg-yellow-300 {
  background-color: #33e7ff !important;
}

.bg-purple-300, .bg-red-300, .bg-pink-300 {
  background-color: #ff33d1 !important;
}

.bg-green-700, .bg-blue-700, .bg-yellow-700 {
  background-color: #00b8d4 !important;
}

.bg-purple-700, .bg-red-700, .bg-pink-700 {
  background-color: #cc0099 !important;
}

/* Override -200 variants */
.text-purple-200, .text-yellow-200 {
  color: #E5E5E5 !important;
}

/* Override from/to for -300 and -700 */
.from-green-300, .from-blue-300, .from-yellow-300 {
  --tw-gradient-from: #33e7ff !important;
}

.to-green-300, .to-blue-300, .to-yellow-300 {
  --tw-gradient-to: #33e7ff !important;
}

.from-purple-300, .from-red-300, .from-pink-300 {
  --tw-gradient-from: #ff33d1 !important;
}

.to-purple-300, .to-red-300, .to-pink-300 {
  --tw-gradient-to: #ff33d1 !important;
}

.from-green-700, .from-blue-700, .from-yellow-700, .from-orange-700 {
  --tw-gradient-from: #00b8d4 !important;
}

.to-green-700, .to-blue-700, .to-yellow-700, .to-orange-700 {
  --tw-gradient-to: #00b8d4 !important;
}

.from-purple-700, .from-red-700 {
  --tw-gradient-from: #cc0099 !important;
}

.to-purple-700, .to-red-700 {
  --tw-gradient-to: #cc0099 !important;
}

/* Override orange colors */
.from-orange-600, .to-orange-600 {
  --tw-gradient-from: #FF00C2 !important;
  --tw-gradient-to: #FF00C2 !important;
}