/* ── v42: Inventory UI ── */
.inventory-page { padding: 20px; max-width: 900px; margin: 0 auto; }
.inventory-page h2 { color: #e63946; margin-bottom: 4px; }
.inv-badge { font-size: 0.6em; background: #e63946; color: white; padding: 2px 10px; border-radius: 12px; vertical-align: middle; margin-left: 8px; }
.inv-filters { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.inv-filter { padding: 6px 16px; border: 1px solid #333; border-radius: 20px; background: transparent; color: #bbb; cursor: pointer; font-size: 0.85em; transition: all 0.2s; }
.inv-filter.active { background: #e63946; border-color: #e63946; color: white; }
.inv-filter:hover:not(.active) { border-color: #e63946; color: #fff; }
.inv-section { margin-bottom: 24px; }
.inv-section h3 { color: #ccc; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #222; }
.inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.inv-card { background: #1a1a2e; border: 1px solid #2a2a3e; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; transition: all 0.2s; }
.inv-card:hover { border-color: #e63946; }
.crate-card { border-left: 3px solid #e63946; }
.fang-card { border-left: 3px solid #ffd700; }
.boost-card { border-left: 3px solid #4ade80; }
.cosmetic-card { border-left: 3px solid #a78bfa; }
.inv-card-icon { font-size: 2em; min-width: 40px; text-align: center; }
.inv-card-body { flex: 1; }
.inv-card-body b { display: block; color: #eee; font-size: 0.95em; }
.inv-card-body small { color: #888; font-size: 0.8em; }
.inv-open-btn, .inv-activate-btn, .inv-claim-btn { padding: 8px 16px; border: none; border-radius: 8px; font-size: 0.85em; cursor: pointer; font-weight: 600; white-space: nowrap; }
.inv-open-btn { background: #e63946; color: white; }
.inv-activate-btn { background: #ffd700; color: #111; }
.inv-claim-btn { background: #a78bfa; color: #111; }
.inv-open-btn:disabled, .inv-activate-btn:disabled, .inv-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.inventory-empty { text-align: center; padding: 60px 20px; color: #888; }
.inventory-empty p { margin-bottom: 16px; }

/* ── v42: Level-Up Celebration ── */
.levelup-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.levelup-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #2a1a3e 50%, #1a1a2e 100%);
  border: 2px solid #e63946;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 60px rgba(230,57,70,0.3);
}
.levelup-sparkle { font-size: 4em; animation: sparkle 0.6s ease infinite alternate; }
.levelup-card h2 { color: #e63946; font-size: 2em; margin: 8px 0; }
.levelup-number { color: #eee; font-size: 1.1em; margin-bottom: 16px; }
.levelup-number strong { color: #ffd700; font-size: 1.4em; }
.levelup-rewards { text-align: left; margin: 16px 0; }
.levelup-rewards p { color: #888; margin-bottom: 8px; font-size: 0.9em; }
.levelup-reward-item { padding: 6px 0; color: #ccc; font-size: 0.95em; }
.levelup-actions { display: flex; gap: 10px; margin-top: 20px; }
.levelup-actions button { flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 1em; cursor: pointer; font-weight: 600; }
.levelup-actions .primary { background: #e63946; color: white; }
.levelup-actions .ghost { background: transparent; color: #888; border: 1px solid #333; }

/* ── v42: Shop nav badge ── */
.nav-badge {
  background: #e63946;
  color: white;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: top;
  animation: popIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sparkle { from { transform: scale(1) rotate(-5deg); } to { transform: scale(1.15) rotate(5deg); } }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

/* ── v42: XP bar mini in chat header ── */
.xp-mini-bar {
  height: 3px;
  background: #2a2a3e;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.xp-mini-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #e63946, #ff6b6b);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ── v42: Shop tab bar ── */
.shop-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  background: #111;
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.shop-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: 500;
  transition: all 0.2s;
}
.shop-tab:hover {
  color: #ddd;
  background: rgba(255,255,255,0.05);
}
.shop-tab.active {
  background: #e63946;
  color: white;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   v43: Minecraft-style Inventory Cube Grid
   Redwolf Productions Theme — kovatai.com
   ══════════════════════════════════════════════ */

.inv-page { padding: 20px; max-width: 1100px; margin: 0 auto; }
.inv-page h2 { color: #e63946; margin-bottom: 4px; }

.inv-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}

.inv-legend {
  display: flex; gap: 6px;
}

.inv-legend-chip {
  padding: 3px 10px; border-radius: 12px; font-size: 0.7em; font-weight: 600;
  color: white; text-transform: uppercase; letter-spacing: 0.5px;
}
.rarity-standard { background: #3a5a80; border: 1px solid #6496c8; }
.rarity-rare { background: #5a2a80; border: 1px solid #b464ff; }
.rarity-legendary { background: #6b4a10; border: 1px solid #ffb428; }
.rarity-common { background: #3a3a4a; border: 1px solid #78788c; }

/* Cube Grid — Minecraft-style inventory */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  padding: 4px;
}

/* Individual inventory card */
.inv-card-v2 {
  background: rgba(10,10,15,0.95);
  border: 1px solid #1a1a2e;
  border-radius: 14px;
  padding: 14px 10px 10px;
  text-align: center;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.inv-card-v2:hover {
  border-color: var(--rarity-border, #e63946);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--rarity-glow, rgba(230,57,70,0.3));
  z-index: 2;
}

/* Rarity-specific card borders on hover */
.inv-card-v2.rarity-standard:hover { border-color: #6496c8; box-shadow: 0 12px 32px rgba(100,150,200,0.3); }
.inv-card-v2.rarity-rare:hover { border-color: #b464ff; box-shadow: 0 12px 32px rgba(180,100,255,0.35); }
.inv-card-v2.rarity-legendary:hover { border-color: #ffb428; box-shadow: 0 12px 32px rgba(255,180,40,0.4); animation: legendPulse 2s ease infinite; }

@keyframes legendPulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(255,180,40,0.4); }
  50% { box-shadow: 0 12px 48px rgba(255,180,40,0.6); }
}

/* Status badges */
.inv-status-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px; border-radius: 8px; font-size: 0.65em;
  font-weight: 700; letter-spacing: 0.5px; z-index: 3;
}
.inv-status-badge.unopened { background: #e63946; color: white; animation: popIn 0.3s ease; }
.inv-status-badge.unclaimed { background: #ffb428; color: #111; animation: popIn 0.3s ease; }

/* The cube container */
.inv-card-cube {
  width: 110px; height: 110px;
  margin: 0 auto 10px;
  border-radius: 18px;
  border: 2px solid var(--rarity-border, #444);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}
.inv-card-v2:hover .inv-card-cube {
  transform: scale(1.05);
}

/* The item image inside the cube */
.inv-card-img {
  width: 75%; height: 75%;
  object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Emoji fallback */
.inv-card-emoji {
  font-size: 2.8em; position: relative; z-index: 1;
}

/* Shine effect overlay */
.inv-card-shine {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
  pointer-events: none; z-index: 2;
  transition: all 0.6s ease;
}
.inv-card-v2:hover .inv-card-shine {
  top: -20%; left: 120%;
}

/* Item name */
.inv-card-name {
  font-weight: 700; font-size: 0.85em;
  color: #eee; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rarity label */
.inv-card-rarity-label {
  font-size: 0.65em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 8px; color: var(--rarity-border, #888);
}

/* Source text */
.inv-card-source {
  font-size: 0.68em; color: #555;
  margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Action buttons row */
.inv-card-actions {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
}

/* ── Redwolf-Themed Action Buttons ── */
.inv-card-actions button {
  padding: 5px 10px; border: 1px solid #2a2a3e; border-radius: 7px;
  background: rgba(20,20,30,0.8); color: #aaa; cursor: pointer;
  font-size: 0.72em; font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.inv-card-actions button:hover {
  transform: translateY(-1px);
}

/* Open button — Redwolf red */
.inv-open-btn {
  border-color: #e63946 !important; color: #e63946 !important;
  background: rgba(230,57,70,0.1) !important;
}
.inv-open-btn:hover {
  background: #e63946 !important; color: white !important;
  box-shadow: 0 4px 12px rgba(230,57,70,0.3);
}

/* Activate button — Gold */
.inv-activate-btn {
  border-color: #ffd700 !important; color: #ffd700 !important;
  background: rgba(255,215,0,0.08) !important;
}
.inv-activate-btn:hover {
  background: #ffd700 !important; color: #111 !important;
  box-shadow: 0 4px 12px rgba(255,215,0,0.3);
}

/* Claim button — Purple */
.inv-claim-btn {
  border-color: #a78bfa !important; color: #a78bfa !important;
  background: rgba(167,139,250,0.08) !important;
}
.inv-claim-btn:hover {
  background: #a78bfa !important; color: #111 !important;
  box-shadow: 0 4px 12px rgba(167,139,250,0.3);
}

/* Sell button — Orange */
.inv-sell-btn:hover {
  border-color: #f97316 !important; color: #f97316 !important;
  background: rgba(249,115,22,0.1) !important;
}

/* Trade button — Green */
.inv-trade-btn:hover {
  border-color: #22c55e !important; color: #22c55e !important;
  background: rgba(34,197,94,0.1) !important;
}

/* Opened/Active labels */
.inv-opened-label, .inv-claimed-label {
  padding: 4px 10px; border-radius: 6px; font-size: 0.7em;
  color: #666; background: rgba(255,255,255,0.03); border: 1px solid #222;
}

.inv-empty-icon { font-size: 4em; margin-bottom: 12px; opacity: 0.5; }

/* ══════════════════════════════════════════════
   v43: Goals & Rewards Center
   Redwolf Productions Theme — kovatai.com
   ══════════════════════════════════════════════ */

.goals-page { padding: 20px; max-width: 1000px; margin: 0 auto; }

/* Hero section */
.goals-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
@media (max-width: 640px) { .goals-hero { grid-template-columns: 1fr; } }

.goals-level-card {
  background: linear-gradient(135deg, #0a0a15 0%, #141425 100%);
  border: 1px solid #2a2a3e; border-radius: 16px;
  padding: 20px; display: flex; align-items: center; gap: 16px;
}
.goals-level-number {
  font-size: 3em; font-weight: 900; color: #e63946;
  min-width: 70px; text-align: center; line-height: 1;
}
.goals-level-info { flex: 1; }
.goals-level-info h3 { color: #f7f7fb; margin: 0 0 6px; font-size: 1.1em; }
.goals-level-info small { color: #888; font-size: 0.75em; }
.goals-total-xp { text-align: center; min-width: 80px; }
.goals-total-xp b { display: block; color: #ffd700; font-size: 1.4em; }
.goals-total-xp small { color: #666; font-size: 0.7em; }

.goals-referral-card {
  background: linear-gradient(135deg, #141425 0%, #0a0a15 100%);
  border: 1px solid #2a2a3e; border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; justify-content: center;
}
.goals-referral-card h3 { color: #f7f7fb; margin: 0 0 8px; }
.goals-referral-card p { margin: 0 0 12px; font-size: 0.85em; }

/* Goal bar */
.goal-bar { height: 6px; background: #1a1a2e; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.goal-bar-lg { height: 8px; }
.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #e63946, #ff6b6b);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Section headings */
.goals-section { margin-bottom: 24px; }
.goals-section h3 { color: #ccc; font-size: 0.95em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* Next rewards chips */
.next-rewards {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.next-reward-chip {
  background: rgba(255,255,255,0.04); border: 1px solid #2a2a3e;
  border-radius: 20px; padding: 6px 14px; font-size: 0.8em;
  color: #bbb; display: flex; align-items: center; gap: 6px;
}
.next-reward-chip span { font-size: 1.1em; }

/* Goals list */
.goals-list { display: grid; gap: 10px; }
.goals-empty {
  text-align: center; padding: 40px 20px; color: #888;
  background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px dashed #2a2a3e;
}
.goals-empty p { font-size: 1.1em; margin-bottom: 8px; }

/* Individual goal card */
.goal-card {
  background: rgba(20,20,35,0.7); border: 1px solid #2a2a3e; border-radius: 12px;
  padding: 16px; display: flex; align-items: center; gap: 12px;
  transition: all 0.2s;
}
.goal-card:hover { border-color: #e63946; }
.goal-card.completed {
  border-color: #22c55e; background: rgba(34,197,94,0.06);
  animation: goalGlow 2s ease infinite;
}
@keyframes goalGlow {
  0%, 100% { border-color: #22c55e; }
  50% { border-color: #4ade80; }
}

.goal-icon { font-size: 1.8em; min-width: 44px; text-align: center; }
.goal-body { flex: 1; }
.goal-body b { display: block; color: #eee; font-size: 0.9em; }
.goal-body small { color: #888; font-size: 0.78em; }
.goal-reward {
  font-size: 0.78em; color: #ffd700; margin-top: 3px; font-weight: 600;
}

.goal-claim-btn {
  padding: 8px 18px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white; cursor: pointer; font-weight: 700; font-size: 0.85em;
  white-space: nowrap; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.goal-claim-btn:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(34,197,94,0.5); }
.goal-claim-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

.goal-pct {
  color: #888; font-size: 0.85em; font-weight: 600; min-width: 40px; text-align: right;
}

/* Stats footer */
.goals-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #1a1a2e;
}
.goals-stat {
  text-align: center; padding: 12px; background: rgba(255,255,255,0.02);
  border-radius: 10px; border: 1px solid #1a1a2e;
}
.goals-stat b { display: block; font-size: 1.5em; margin-bottom: 4px; }
.goals-stat span { display: block; color: #f7f7fb; font-size: 1.1em; font-weight: 700; }
.goals-stat small { color: #666; font-size: 0.7em; }

/* ══════════════════════════════════════════════
   v43: Trade UI
   ══════════════════════════════════════════════ */

.trade-layout { display: flex; gap: 16px; align-items: flex-start; }
.trade-side { flex: 1; background: #1a1a2e; border-radius: 12px; padding: 16px; border: 1px solid #2a2a3e; }
.trade-side h3 { color: #ccc; margin-bottom: 12px; }
.trade-divider { font-size: 2em; color: #e63946; display: flex; align-items: center; padding-top: 20px; }
.trade-items { min-height: 60px; }
.trade-item { 
  background: rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 10px;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px; font-size: 0.9em; color: #ddd;
}
.trade-item.theirs { background: rgba(230,57,70,0.08); }
.trade-remove { background: none; border: none; color: #e63946; cursor: pointer; margin-left: auto; font-size: 1.2em; }
.trade-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.trade-bottom { margin-top: 16px; text-align: center; }
.ready-badge { color: #22c55e; font-weight: 600; padding: 8px; }
.trade-actions button { padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.85em; }

/* ══════════════════════════════════════════════
   CS2 Crate Opening Animation Styles
   ══════════════════════════════════════════════ */

.crate-open-result {
  width: 420px; max-width: 90vw; margin: 0 auto;
}

.crate-roll-view {
  height: 340px; overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, #0a0a15 0%, #141425 40%, #0a0a15 100%);
  border: 2px solid #2a2a3e; position: relative;
}

.crate-roll-track {
  position: absolute; top: 0; left: 0; right: 0;
  will-change: transform;
}

.crate-roll-item {
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
  height: 68px; box-sizing: border-box;
}

.crate-roll-icon { font-size: 1.6em; min-width: 40px; text-align: center; }
.crate-roll-label { font-weight: 600; color: #ddd; font-size: 0.9em; }

.crate-roll-item.rarity.standard .crate-roll-label { color: #a0b8d0; }
.crate-roll-item.rarity.rare .crate-roll-label { color: #c9a0ff; }
.crate-roll-item.rarity.legendary .crate-roll-label { color: #ffd700; }

.crate-roll-marker {
  position: absolute; top: 50%; left: 0; right: 0; height: 68px;
  transform: translateY(-50%);
  border-top: 2px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  pointer-events: none; z-index: 2;
  transition: border-color 0.08s;
}

/* ── Location Sharing Cards ── */
.location-cards { margin-bottom: 8px; }
.location-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(74,122,255,0.08), rgba(74,122,255,0.02));
  border: 1px solid rgba(74,122,255,0.2); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.location-card-icon { font-size: 1.8em; }
.location-card-body { flex: 1; }
.location-card-body b { display: block; color: #e0e8ff; font-size: 0.9em; }
.location-coords { color: #7a9aff; font-size: 0.8em; font-family: monospace; margin-top: 2px; }
.location-card-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

/* ── Skeleton Loading ── */
.skeleton{background:linear-gradient(90deg,#1a1a2e 25%,#2a2a3e 50%,#1a1a2e 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px;}
.skeleton-text{height:14px;margin:6px 0;}
.skeleton-title{height:20px;width:60%;margin:8px 0;}
.skeleton-card{height:80px;margin:8px 0;border-radius:10px;}
.skeleton-avatar{width:40px;height:40px;border-radius:50%;}
.skeleton-btn{height:36px;width:100px;border-radius:8px;display:inline-block;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}